feat(desktop-ui): new duiPositionChange directive, new dui-menu component, automatically reposition dropdown, improved dui-adaptive-container

Author: marcj

packages/api-console-gui/src/app/components/inputs/input.component.ts

@@ -17,10 +17,9 @@ import { CodeHighlightComponent } from '@deepkit/ui-library';
             @if (!isValueRequired) {
               <dui-checkbox [ngModel]="enabled"
                             (ngModelChange)="setEnabled($event)"
-              >{{ String(decoration.name) }}??
+              >{{ String(decoration.name) }}
               </dui-checkbox>
             }
-            {{model().active()}}
             @if (isValueRequired) {
               <div>{{ String(decoration.name) }}</div>
             }

packages/desktop-ui/src/assets/fonts/ui-icons.svg

@@ -2,40 +2,10 @@
 :host {
   position: relative;
   display: flex;
-  flex-wrap: wrap;
+  flex-wrap: nowrap;
   overflow: hidden;
 }
 
-.toggle-button {
-  position: absolute;
-  top: 0;
-  right: 0;
-  visibility: hidden;
-}
-
-:host.row-reverse .toggle-button {
-  left: 0;
-  right: unset;
-}
-
-:host.column .toggle-button {
-  top: unset;
-  left: 0;
-  bottom: 0;
-}
-
-:host.column-reverse .toggle-button {
-  top: 0;
-  left: 0;
-  bottom: unset;
-}
-
-:host.has-hidden {
-  .toggle-button {
-    visibility: visible;
-  }
-}
-
 :host.row {
   flex-direction: row;
 }
@@ -52,18 +22,16 @@
   flex-direction: column-reverse;
 }
 
-:host ::ng-deep > * {
-  flex: 0 0 auto;
-  min-width: 0;
-}
-
 :host ::ng-deep > .dui-ac-hidden {
-  visibility: hidden;
-  pointer-events: none;
+  display: none;
 }
 
-.dui-dropdown-content {
+.dui-adaptive-container-dropdown-content {
   display: flex;
   flex-direction: column;
   gap: 4px;
 }
+
+.dui-overflow-fallback {
+  display: none;
+}