feat(desktop-ui): better docs, new dui-adaptive-container component

Author: marcj

packages/desktop-ui/package.json

@@ -41,7 +41,7 @@
     "font": "node bin/create-font.js",
     "build": "npm run font && npm run docjson && rm -rf .angular && ng-packagr --config tsconfig.prod.json && rm dist/.npmignore",
     "watch": "ng-packagr --config tsconfig.prod.json --watch",
-    "docjson": "rm -f docs.json && typedoc --json docs.json --options ../../typedoc.js --plugin ../../typedoc.decorators.js src/index.ts && cp docs.json src/assets/docs.json",
+    "docjson": "typedoc --json docs.json --options ../../typedoc.js --plugin ../../typedoc.decorators.js src/index.ts && cp docs.json src/assets/docs.json",
     "prepublishOnly": "webpack && node bin/create-font.js"
   },
   "browserslist": [

packages/desktop-ui/src/components/adaptive-container/adaptive-container.component.scss

@@ -0,0 +1,69 @@
+
+:host {
+  position: relative;
+  display: flex;
+  flex-wrap: wrap;
+  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;
+}
+
+:host.row-reverse {
+  flex-direction: row-reverse;
+}
+
+:host.column {
+  flex-direction: column;
+}
+
+:host.column-reverse {
+  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;
+}
+
+.dui-dropdown-content {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}