@db-ux/wc-core-components 4.12.0 → 4.13.0-shell-f221975

package/dist/collection/components/select/select.js

@@ -273,14 +273,14 @@ export class DBSelect {
     }
     render() {
         var _a, _b, _c, _d, _e, _f;
-        return (h("div", { key: '5273757e8379f6601c23f4b343812c233ddf86eb', class: cls("db-select", this.className), "data-variant": this.variant, "data-hide-label": getHideProp(this.showLabel), "data-hide-asterisk": getHideProp(this.showRequiredAsterisk), "data-icon": this.icon, "data-show-icon": getBooleanAsString(this.showIcon, "showIcon") }, h("label", { key: '9c75ec7cd982b4b8d283ce9365f6642c363dae16', htmlFor: this._id }, (_a = this.label) !== null && _a !== void 0 ? _a : DEFAULT_LABEL), h("select", { key: '8b2e0dc14717704e45524cf7803163c6c640de32', "aria-invalid": this.validation === "invalid", "data-custom-validity": this.validation, ref: (el) => {
+        return (h("div", { key: 'f8378bfa46ef070277bd139d22dca6e14144d043', class: cls("db-select", this.className), "data-variant": this.variant, "data-hide-label": getHideProp(this.showLabel), "data-hide-asterisk": getHideProp(this.showRequiredAsterisk), "data-icon": this.icon, "data-show-icon": getBooleanAsString(this.showIcon, "showIcon") }, h("label", { key: '3214b7203a712bb24e9ad68d5a0c172d4936f4da', htmlFor: this._id }, (_a = this.label) !== null && _a !== void 0 ? _a : DEFAULT_LABEL), h("select", { key: '1dc0396696e7ae35f1379516e13746c7296c05d9', "aria-invalid": this.validation === "invalid", "data-custom-validity": this.validation, ref: (el) => {
                 this._ref = el;
             }, required: getBoolean(this.required, "required"), disabled: getBoolean(this.disabled, "disabled"), id: this._id, name: this.name, size: this.size,
             /* @ts-ignore */
             value: (_c = (_b = this.value) !== null && _b !== void 0 ? _b : this._value) !== null && _c !== void 0 ? _c : undefined, autocomplete: this.autocomplete, multiple: this.multiple, onInput: (event) => this.handleInput(event), onClick: (event) => this.handleClick(event), onChange: (event) => this.handleChange(event), onBlur: (event) => this.handleBlur(event), onFocus: (event) => this.handleFocus(event), "aria-describedby": (_d = this.ariaDescribedBy) !== null && _d !== void 0 ? _d : this._descByIds }, this.variant === "floating" || !!this.placeholder ? (h("option", { class: "placeholder", value: "", "data-show-empty-option": getBooleanAsString(this.shouldShowEmptyOption(), "showEmptyOption") })) : null, ((_e = this.options) === null || _e === void 0 ? void 0 : _e.length) ? ((_f = this.options) === null || _f === void 0 ? void 0 : _f.map((option) => {
             var _a;
             return (h(Fragment, null, option.options ? (h("optgroup", { label: this.getOptionLabel(option), key: undefined }, (_a = option.options) === null || _a === void 0 ? void 0 : _a.map((optgroupOption) => (h("option", { value: optgroupOption.value, selected: optgroupOption.selected, disabled: optgroupOption.disabled, key: undefined }, this.getOptionLabel(optgroupOption)))))) : (h("option", { value: option.value, disabled: option.disabled, selected: option.selected, key: undefined }, this.getOptionLabel(option)))));
-        })) : (h("slot", null))), this.placeholder ? (h("span", { class: "db-select-placeholder", id: this._placeholderId }, this.placeholder)) : null, stringPropVisible(this.message, this.showMessage) ? (h("db-infotext", { size: "small", icon: this.messageIcon, id: this._messageId }, this.message)) : null, this.hasValidState() ? (h("db-infotext", { size: "small", semantic: "successful", id: this._validMessageId }, this.validMessage || DEFAULT_VALID_MESSAGE)) : null, h("db-infotext", { key: '5c7dbe0b5e75b5f4b704cf469f0806451e3d0c4a', size: "small", semantic: "critical", id: this._invalidMessageId }, this._invalidMessage), h("span", { key: '932f5a52716c95629ed4eb12e3b2eee3ce1c559f', "data-visually-hidden": "true", role: "status" }, this._voiceOverFallback)));
+        })) : (h("slot", null))), this.placeholder ? (h("span", { class: "db-select-placeholder", id: this._placeholderId }, this.placeholder)) : null, stringPropVisible(this.message, this.showMessage) ? (h("db-infotext", { size: "small", icon: this.messageIcon, id: this._messageId }, this.message)) : null, this.hasValidState() ? (h("db-infotext", { size: "small", semantic: "successful", id: this._validMessageId }, this.validMessage || DEFAULT_VALID_MESSAGE)) : null, h("db-infotext", { key: '0f0bbbc2306021f8ec85dd4aadb679a17a469ac2', size: "small", semantic: "critical", id: this._invalidMessageId }, this._invalidMessage), h("span", { key: '8d554728c58e2693a197b0136f3ebcf19dbcb061', "data-visually-hidden": "true", role: "status" }, this._voiceOverFallback)));
     }
     static get is() { return "db-select"; }
     static get properties() {

package/dist/collection/components/shell/index.js

@@ -0,0 +1,2 @@
+import { DBShell } from "./shell";
+export default DBShell;

package/dist/collection/components/shell/model.js

@@ -0,0 +1 @@
+export const ShellSubNavigationMobilePosition = ['top', 'bottom', 'none'];

package/dist/collection/components/{header/header.js → shell/shell.js}

@@ -1,38 +1,18 @@
-import { DEFAULT_BURGER_MENU } from "../../shared/constants.js";
-import { addAttributeToChildren, cls, getBoolean } from "../../utils/index.js";
-import { isEventTargetNavigationItem } from "../../utils/navigation.js";
+import { cls, getBoolean, getBooleanAsString } from "../../utils/index.js";
 import { h } from "@stencil/core";
 /**
  * @slot children - This is a default/unnamed slot
- * @slot metaNavigation - TODO: Add description for slotMetaNavigation
- * @slot brand - TODO: Add description for slotBrand
- * @slot primaryAction - TODO: Add description for slotPrimaryAction
- * @slot secondaryAction - TODO: Add description for slotSecondaryAction
+
  */
-export class DBHeader {
+export class DBShell {
     constructor() {
-        this.initialized = false;
-        this.forcedToMobile = false;
+        this.fontsLoaded = false;
         this.observer = undefined;
     }
-    handleToggle(event) {
-        if (event && event.stopPropagation) {
-            event.stopPropagation();
-        }
-        const open = !getBoolean(this.drawerOpen, "drawerOpen");
-        if (this.toggle) {
-            this.toggle.emit(open);
-        }
-    }
-    handleNavigationItemClick(event) {
-        if (isEventTargetNavigationItem(event)) {
-            this.handleToggle();
-        }
-    }
     setupObserver(element) {
         if (!element)
             return;
-        const parent = element.closest("db-header");
+        const parent = element.closest("db-shell");
         if (!parent || this.observer)
             return;
         this.observer = new MutationObserver((mutations) => {
@@ -41,7 +21,7 @@ export class DBHeader {
                 const attr = mutation.target.attributes.getNamedItem((_a = mutation.attributeName) !== null && _a !== void 0 ? _a : "");
                 return (attr === null || attr === void 0 ? void 0 : attr.value) !== mutation.oldValue;
             })) {
-                this.enableAttributePassing(element, "db-header");
+                this.enableAttributePassing(element, "db-shell");
             }
         });
         this.observer.observe(parent, {
@@ -90,20 +70,6 @@ export class DBHeader {
             }
         }
     }
-    watch0Fn() {
-        if (this.initialized && this._ref && this.forceMobile) {
-            // Adds this attribute to the header to enable all styling which would have
-            // @media screen and (min-width: $db-screens-m) to show mobile navigation on a desktop device
-            addAttributeToChildren(this._ref, {
-                key: "data-force-mobile",
-                value: "true",
-            });
-            this.forcedToMobile = true;
-        }
-    }
-    watch0() {
-        this.watch0Fn();
-    }
     componentDidLoad() {
         if (typeof document !== "undefined" && this.rootElement && this.rootElement.dataset.connect) {
             const connectedElement = document.querySelector(`[data-connect-id="${this.rootElement.dataset.connect}"]`);
@@ -111,42 +77,53 @@ export class DBHeader {
                 connectedElement.remove();
             }
         }
-        this.enableAttributePassing(this._ref, "db-header");
+        this.enableAttributePassing(this._ref, "db-shell");
         const onMountHook_0 = () => {
-            this.initialized = true;
+            var _a, _b;
+            const fadeIn = getBoolean(this.fadeIn, "fadeIn");
+            this.fontsLoaded = !fadeIn;
+            if (document && fadeIn) {
+                (_b = (_a = document.fonts) === null || _a === void 0 ? void 0 : _a.ready) === null || _b === void 0 ? void 0 : _b.then(() => {
+                    this.fontsLoaded = true;
+                }).catch(() => {
+                    this.fontsLoaded = true;
+                });
+            }
+            else {
+                this.fontsLoaded = true;
+            }
         };
         onMountHook_0();
         const onMountHook_1 = () => {
             this.setupObserver(this._ref);
         };
         onMountHook_1();
-        this.watch0Fn();
     }
     disconnectedCallback() {
         var _a;
         (_a = this.observer) === null || _a === void 0 ? void 0 : _a.disconnect();
     }
     render() {
-        var _a, _b, _c;
-        return (h("header", { key: 'aeeac33c4b9db2b9749b24ccca840aa03bac81df', class: cls("db-header", this.className), ref: (el) => {
+        var _a, _b, _c, _d, _e, _f;
+        return (h("div", { key: '3dbac9ffe368787517b775903e88ac086614066f', class: cls("db-shell", this.className), ref: (el) => {
                 this._ref = el;
-            }, id: (_a = this.id) !== null && _a !== void 0 ? _a : (_b = this.propOverrides) === null || _b === void 0 ? void 0 : _b.id, "data-width": this.width, "data-on-forcing-mobile": this.forceMobile && !this.forcedToMobile }, h("div", { key: '1078f960dbc6ed24664b5ff5c23c3524d725b822', class: "db-header-meta-navigation" }, h("slot", { key: 'c55739d8ae17254c2aa457795a31017a07ab5a88', name: "metaNavigation" })), h("div", { key: '6e82ab28439854dec6bcc6dcf9ed3fa36c6f5e69', class: "db-header-navigation-bar" }, h("div", { key: '7e991f8cdee7c1767ea3aefdd9a01c662fb5d178', class: "db-header-brand-container" }, h("slot", { key: 'a1e2aea32b28520095612367e97a8b955f93bd96', name: "brand" })), h("div", { key: '273f17e3b8594dad83d8fbad021008405d865176', class: "db-header-navigation-container" }, h("div", { key: '8bd9a08a0f3cf8083d238963c2cc3715edf1d5a4', class: "db-header-navigation" }, h("slot", { key: 'abfd95ef152c34e53806c114f243ff26b63a9bbe' })), h("div", { key: '4a61c6d86a0362913b45a432095a621ca22d1268', class: "db-header-primary-action" }, h("slot", { key: '3b79bfc6d85a0a39fcb3ca2550be0a2a36b6a682', name: "primaryAction" }))), h("div", { key: '1c506669010a04ae260b692811ed17d76a3ecc03', class: "db-header-action-container" }, h("div", { key: 'aa522f5b0010a1747a1bc7f550c3700a0bad4e8a', class: "db-header-burger-menu-container" }, h("db-button", { key: '2223a3865ed4ea94e3a3849e73e4113e1db0fb66', icon: "menu", variant: "ghost", noText: true, onClick: () => this.handleToggle() }, (_c = this.burgerMenuLabel) !== null && _c !== void 0 ? _c : DEFAULT_BURGER_MENU)), h("div", { key: '86f41a6b354de871ac3f4d9cf8b7205c699ba189', class: "db-header-secondary-action" }, h("slot", { key: '43e443323eb93871bb19cbea2222da6eb8ebd0e8', name: "secondaryAction" })))), h("db-drawer", { key: '8a8474e8a7f54d827f5844f76dea9ce44ef565e0', class: "db-header-drawer", spacing: "small", rounded: true, closeButtonId: this.closeButtonId, closeButtonText: this.closeButtonText, open: getBoolean(this.drawerOpen), onClose: () => this.handleToggle() }, h("div", { key: '21f360dc09f2d53aea13fde8b13c1ffb3781f558', class: "db-header-drawer-navigation" }, h("div", { key: '0c567049a2c1788decb48b10b0115348d2f3b406', class: "db-header-navigation", onClick: (event) => this.handleNavigationItemClick(event) }, h("slot", { key: '1403d518f5f63eca522ccecaf5a4b5f153649a33' })), h("div", { key: 'c624cf3f4ea7e89a87e430ef96b34fa4ce6d4236', class: "db-header-meta-navigation" }, h("slot", { key: '4fde72b2d7d8c098a8a09160e8f36ca2ddbd0702', name: "metaNavigation" }))), h("div", { key: '91d6fc1b39b3cfc39b8563956971f56a168da218', class: "db-header-secondary-action" }, h("slot", { key: 'a9745f3cf4c91db6a3cd0bc4e4bf904b8bc7a2aa', name: "secondaryAction" })))));
+            }, id: (_a = this.id) !== null && _a !== void 0 ? _a : (_b = this.propOverrides) === null || _b === void 0 ? void 0 : _b.id, "data-control-panel-desktop-position": (_c = this.controlPanelDesktopPosition) !== null && _c !== void 0 ? _c : "top", "data-control-panel-mobile-position": (_d = this.controlPanelMobilePosition) !== null && _d !== void 0 ? _d : "top", "data-sub-navigation-desktop-position": (_e = this.subNavigationDesktopPosition) !== null && _e !== void 0 ? _e : "top", "data-sub-navigation-mobile-position": (_f = this.subNavigationMobilePosition) !== null && _f !== void 0 ? _f : "top", "data-show-sub-navigation": getBooleanAsString(this.showSubNavigation, "showSubNavigation"), "data-fade-in": getBooleanAsString(this.fadeIn, "fadeIn"), "data-fonts-loaded": getBooleanAsString(this.fontsLoaded) }, h("slot", { key: '97b4ae8f0a3e718d02c1d79f41c4d0989fd543e4' })));
     }
-    static get is() { return "db-header"; }
+    static get is() { return "db-shell"; }
     static get properties() {
         return {
-            "forceMobile": {
+            "fadeIn": {
                 "type": "any",
                 "mutable": false,
                 "complexType": {
-                    "original": "DBHeaderProps[\"forceMobile\"]",
+                    "original": "DBShellProps[\"fadeIn\"]",
                     "resolved": "boolean | string",
                     "references": {
-                        "DBHeaderProps": {
+                        "DBShellProps": {
                             "location": "import",
                             "path": "./model.js",
-                            "id": "src/components/header/model.ts::DBHeaderProps",
-                            "referenceLocation": "DBHeaderProps"
+                            "id": "src/components/shell/model.ts::DBShellProps",
+                            "referenceLocation": "DBShellProps"
                         }
                     }
                 },
@@ -159,20 +136,20 @@ export class DBHeader {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "force-mobile"
+                "attribute": "fade-in"
             },
-            "drawerOpen": {
-                "type": "any",
+            "id": {
+                "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "DBHeaderProps[\"drawerOpen\"]",
-                    "resolved": "boolean | string",
+                    "original": "DBShellProps[\"id\"]",
+                    "resolved": "string",
                     "references": {
-                        "DBHeaderProps": {
+                        "DBShellProps": {
                             "location": "import",
                             "path": "./model.js",
-                            "id": "src/components/header/model.ts::DBHeaderProps",
-                            "referenceLocation": "DBHeaderProps"
+                            "id": "src/components/shell/model.ts::DBShellProps",
+                            "referenceLocation": "DBShellProps"
                         }
                     }
                 },
@@ -185,20 +162,20 @@ export class DBHeader {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "drawer-open"
+                "attribute": "id"
             },
-            "className": {
-                "type": "string",
+            "propOverrides": {
+                "type": "unknown",
                 "mutable": false,
                 "complexType": {
-                    "original": "DBHeaderProps[\"className\"]",
-                    "resolved": "string",
+                    "original": "DBShellProps[\"propOverrides\"]",
+                    "resolved": "{ id?: string; }",
                     "references": {
-                        "DBHeaderProps": {
+                        "DBShellProps": {
                             "location": "import",
                             "path": "./model.js",
-                            "id": "src/components/header/model.ts::DBHeaderProps",
-                            "referenceLocation": "DBHeaderProps"
+                            "id": "src/components/shell/model.ts::DBShellProps",
+                            "referenceLocation": "DBShellProps"
                         }
                     }
                 },
@@ -209,22 +186,20 @@ export class DBHeader {
                     "text": ""
                 },
                 "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "classname"
+                "setter": false
             },
-            "id": {
+            "className": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "DBHeaderProps[\"id\"]",
+                    "original": "DBShellProps[\"className\"]",
                     "resolved": "string",
                     "references": {
-                        "DBHeaderProps": {
+                        "DBShellProps": {
                             "location": "import",
                             "path": "./model.js",
-                            "id": "src/components/header/model.ts::DBHeaderProps",
-                            "referenceLocation": "DBHeaderProps"
+                            "id": "src/components/shell/model.ts::DBShellProps",
+                            "referenceLocation": "DBShellProps"
                         }
                     }
                 },
@@ -237,20 +212,20 @@ export class DBHeader {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "id"
+                "attribute": "classname"
             },
-            "propOverrides": {
-                "type": "unknown",
+            "controlPanelDesktopPosition": {
+                "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "DBHeaderProps[\"propOverrides\"]",
-                    "resolved": "{ id?: string; }",
+                    "original": "DBShellProps[\"controlPanelDesktopPosition\"]",
+                    "resolved": "\"left\" | \"top\"",
                     "references": {
-                        "DBHeaderProps": {
+                        "DBShellProps": {
                             "location": "import",
                             "path": "./model.js",
-                            "id": "src/components/header/model.ts::DBHeaderProps",
-                            "referenceLocation": "DBHeaderProps"
+                            "id": "src/components/shell/model.ts::DBShellProps",
+                            "referenceLocation": "DBShellProps"
                         }
                     }
                 },
@@ -261,20 +236,22 @@ export class DBHeader {
                     "text": ""
                 },
                 "getter": false,
-                "setter": false
+                "setter": false,
+                "reflect": false,
+                "attribute": "control-panel-desktop-position"
             },
-            "width": {
+            "controlPanelMobilePosition": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "DBHeaderProps[\"width\"]",
-                    "resolved": "\"full\" | \"large\" | \"medium\" | \"small\"",
+                    "original": "DBShellProps[\"controlPanelMobilePosition\"]",
+                    "resolved": "\"bottom\" | \"top\"",
                     "references": {
-                        "DBHeaderProps": {
+                        "DBShellProps": {
                             "location": "import",
                             "path": "./model.js",
-                            "id": "src/components/header/model.ts::DBHeaderProps",
-                            "referenceLocation": "DBHeaderProps"
+                            "id": "src/components/shell/model.ts::DBShellProps",
+                            "referenceLocation": "DBShellProps"
                         }
                     }
                 },
@@ -287,20 +264,20 @@ export class DBHeader {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "width"
+                "attribute": "control-panel-mobile-position"
             },
-            "burgerMenuLabel": {
+            "subNavigationDesktopPosition": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "DBHeaderProps[\"burgerMenuLabel\"]",
-                    "resolved": "string",
+                    "original": "DBShellProps[\"subNavigationDesktopPosition\"]",
+                    "resolved": "\"left\" | \"top\"",
                     "references": {
-                        "DBHeaderProps": {
+                        "DBShellProps": {
                             "location": "import",
                             "path": "./model.js",
-                            "id": "src/components/header/model.ts::DBHeaderProps",
-                            "referenceLocation": "DBHeaderProps"
+                            "id": "src/components/shell/model.ts::DBShellProps",
+                            "referenceLocation": "DBShellProps"
                         }
                     }
                 },
@@ -313,20 +290,20 @@ export class DBHeader {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "burger-menu-label"
+                "attribute": "sub-navigation-desktop-position"
             },
-            "closeButtonId": {
+            "subNavigationMobilePosition": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "DBHeaderProps[\"closeButtonId\"]",
-                    "resolved": "string",
+                    "original": "DBShellProps[\"subNavigationMobilePosition\"]",
+                    "resolved": "\"bottom\" | \"none\" | \"top\"",
                     "references": {
-                        "DBHeaderProps": {
+                        "DBShellProps": {
                             "location": "import",
                             "path": "./model.js",
-                            "id": "src/components/header/model.ts::DBHeaderProps",
-                            "referenceLocation": "DBHeaderProps"
+                            "id": "src/components/shell/model.ts::DBShellProps",
+                            "referenceLocation": "DBShellProps"
                         }
                     }
                 },
@@ -339,20 +316,20 @@ export class DBHeader {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "close-button-id"
+                "attribute": "sub-navigation-mobile-position"
             },
-            "closeButtonText": {
-                "type": "string",
+            "showSubNavigation": {
+                "type": "any",
                 "mutable": false,
                 "complexType": {
-                    "original": "DBHeaderProps[\"closeButtonText\"]",
-                    "resolved": "string",
+                    "original": "DBShellProps[\"showSubNavigation\"]",
+                    "resolved": "boolean | string",
                     "references": {
-                        "DBHeaderProps": {
+                        "DBShellProps": {
                             "location": "import",
                             "path": "./model.js",
-                            "id": "src/components/header/model.ts::DBHeaderProps",
-                            "referenceLocation": "DBHeaderProps"
+                            "id": "src/components/shell/model.ts::DBShellProps",
+                            "referenceLocation": "DBShellProps"
                         }
                     }
                 },
@@ -365,43 +342,15 @@ export class DBHeader {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "close-button-text"
+                "attribute": "show-sub-navigation"
             }
         };
     }
     static get states() {
         return {
-            "initialized": {},
-            "forcedToMobile": {},
+            "fontsLoaded": {},
             "observer": {}
         };
     }
-    static get events() {
-        return [{
-                "method": "toggle",
-                "name": "toggle",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "complexType": {
-                    "original": "any",
-                    "resolved": "any",
-                    "references": {}
-                }
-            }];
-    }
     static get elementRef() { return "rootElement"; }
-    static get watchers() {
-        return [{
-                "propName": "initialized",
-                "methodName": "watch0"
-            }, {
-                "propName": "_ref",
-                "methodName": "watch0"
-            }];
-    }
 }

package/dist/collection/components/shell-content/index.js

@@ -0,0 +1,2 @@
+import { DBShellContent } from "./shell-content";
+export default DBShellContent;

package/dist/collection/components/shell-content/model.js

@@ -0,0 +1 @@
+export const ShellContentVariantList = ['auto', 'fixed'];