@db-ux/wc-core-components 1.0.0-test-13b991d

package/dist/collection/components/header/header.js

@@ -0,0 +1,266 @@
+import { addAttributeToChildren, cls, uuid } from "../../utils";
+import { DEFAULT_BURGER_MENU, DEFAULT_ID } from "../../shared/constants";
+import { isEventTargetNavigationItem } from "../../utils/navigation";
+import { h } from "@stencil/core";
+/**
+ * @slot children - This is a default/unnamed slot
+ * @slot metaNavigation - TODO: Add description for slotMetaNavigation
+ * @slot secondaryAction - TODO: Add description for slotSecondaryAction
+ * @slot brand - TODO: Add description for slotBrand
+ * @slot primaryAction - TODO: Add description for slotPrimaryAction
+ */
+export class DBHeader {
+    constructor() {
+        this._id = DEFAULT_ID;
+        this.initialized = false;
+        this.forcedToMobile = false;
+    }
+    toggle() {
+        if (this.onToggle) {
+            this.onToggle.emit(!this.drawerOpen);
+        }
+    }
+    handleNavigationItemClick(event) {
+        if (isEventTargetNavigationItem(event)) {
+            this.toggle();
+        }
+    }
+    /**
+     * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.
+     * @param element  the ref for the component
+     * @param customElementSelector  the custom element like `my-component`
+     */
+    enableAttributePassing(element, customElementSelector) {
+        const parent = element === null || element === void 0 ? void 0 : element.closest(customElementSelector);
+        if (element && parent) {
+            const attributes = parent.attributes;
+            for (let i = 0; i < attributes.length; i++) {
+                const attr = attributes.item(i);
+                if (attr &&
+                    (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))) {
+                    element.setAttribute(attr.name, attr.value);
+                    parent.removeAttribute(attr.name);
+                }
+                if (attr && attr.name === "class") {
+                    const isWebComponent = attr.value.includes("hydrated");
+                    const value = attr.value.replace("hydrated", "").trim();
+                    const currentClass = element.getAttribute("class");
+                    element.setAttribute(attr.name, `${currentClass ? `${currentClass} ` : ""}${value}`);
+                    if (isWebComponent) {
+                        // Stencil is using this class for lazy loading component
+                        parent.setAttribute("class", "hydrated");
+                    }
+                    else {
+                        parent.removeAttribute(attr.name);
+                    }
+                }
+            }
+        }
+    }
+    componentDidLoad() {
+        this.enableAttributePassing(this._ref, "db-header");
+        this.initialized = true;
+        this._id = this.id || "header-" + uuid();
+    }
+    componentDidUpdate() {
+        if (this.initialized && document && this._id && this.forceMobile) {
+            const headerElement = document.getElementById(this._id);
+            if (headerElement) {
+                // 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(headerElement, {
+                    key: "data-force-mobile",
+                    value: "true",
+                });
+            }
+            this.forcedToMobile = true;
+        }
+    }
+    render() {
+        var _a;
+        return (h("header", { key: '90e4860c36a39e77aa080e188c190d8213e05f31', class: cls("db-header", this.className), ref: (el) => {
+                this._ref = el;
+            }, id: this._id, "data-width": this.width, "data-on-forcing-mobile": this.forceMobile && !this.forcedToMobile }, h("db-drawer", { key: 'baab2ea24ee50f1c57cdeee348a32a0bfe727181', class: "db-header-drawer", spacing: "small", rounded: true, open: this.drawerOpen, onClose: () => this.toggle() }, h("div", { key: '04227e024f8aa835274b00edeb729f248b843432', class: "db-header-drawer-navigation" }, h("div", { key: '49255007dd63d0f48c403c6ea6982e29cb3be8ce', class: "db-header-navigation", onClick: (event) => this.handleNavigationItemClick(event) }, h("slot", { key: '52b2c8cea483255cebf7bbf824e490a2805c0812' })), h("div", { key: 'd53b476dd0eb375a91571ed8b25f09533952b7ac', class: "db-header-meta-navigation" }, h("slot", { key: 'd7aca8fa660affa66857c78c70bf6d3bb6baf577', name: "metaNavigation" }))), h("div", { key: '1baa944ea37df34349cafe83ff9601a96b2f3845', class: "db-header-secondary-action" }, h("slot", { key: '2df7106c6096adb6642a58d2afd865babb9a2aed', name: "secondaryAction" }))), h("div", { key: '3444df8cd284cf2f09fe8bcd561605eed25547ac', class: "db-header-meta-navigation" }, h("slot", { key: 'b3cdfb520b9bfaa69586c6d9d397b2564962e38e', name: "metaNavigation" })), h("div", { key: 'e6f467e4e541179d37d30acc045261a007cf65d1', class: "db-header-navigation-bar" }, h("div", { key: '5c6f78bcd3516b699a5f2b0c9c26a6142f6c534b', class: "db-header-brand-container" }, h("slot", { key: '9fb25e7cdc3c44e1b7a388083c1e16ec66bcd100', name: "brand" })), h("div", { key: 'a59204c004f0e03aaa7cf6190c304db448f9783e', class: "db-header-navigation-container" }, h("div", { key: '7a4c5ab818ba78209bc63a6baecb9f0460355d0b', class: "db-header-navigation" }, h("slot", { key: '799cbf46a06b87f8c2c7a42f17a0f2c23c65481f' })), h("div", { key: '756293dd8ecfff883cb90cc1ba904503beea77eb', class: "db-header-primary-action" }, h("slot", { key: '181fa4b77a2c10bf091a6690b97d4e665d4fd824', name: "primaryAction" }))), h("div", { key: '0ba2601633b491a60b33166253a7da6695249c0a', class: "db-header-action-container" }, h("div", { key: '21d5d4145aa40c14c475b9f9d72d0ce885aff81e', class: "db-header-burger-menu-container" }, h("db-button", { key: '732bb354bbb363b32365215f2db1f25b3a54cee3', icon: "menu", variant: "ghost", id: this._id + "-burger-menu", noText: true, onClick: () => this.toggle() }, (_a = this.burgerMenuLabel) !== null && _a !== void 0 ? _a : DEFAULT_BURGER_MENU)), h("div", { key: 'c9e3f15b97eabaf94dcaee166f7d0e31577ade58', class: "db-header-secondary-action" }, h("slot", { key: '5e783e8c6347e28264f466829cd495973a6d23d8', name: "secondaryAction" }))))));
+    }
+    static get is() { return "db-header"; }
+    static get properties() {
+        return {
+            "id": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "DBHeaderProps[\"id\"]",
+                    "resolved": "string",
+                    "references": {
+                        "DBHeaderProps": {
+                            "location": "import",
+                            "path": "./model",
+                            "id": "src/components/header/model.ts::DBHeaderProps"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "id",
+                "reflect": false
+            },
+            "forceMobile": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "DBHeaderProps[\"forceMobile\"]",
+                    "resolved": "boolean",
+                    "references": {
+                        "DBHeaderProps": {
+                            "location": "import",
+                            "path": "./model",
+                            "id": "src/components/header/model.ts::DBHeaderProps"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "force-mobile",
+                "reflect": false
+            },
+            "drawerOpen": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "DBHeaderProps[\"drawerOpen\"]",
+                    "resolved": "boolean",
+                    "references": {
+                        "DBHeaderProps": {
+                            "location": "import",
+                            "path": "./model",
+                            "id": "src/components/header/model.ts::DBHeaderProps"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "drawer-open",
+                "reflect": false
+            },
+            "className": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "DBHeaderProps[\"className\"]",
+                    "resolved": "string",
+                    "references": {
+                        "DBHeaderProps": {
+                            "location": "import",
+                            "path": "./model",
+                            "id": "src/components/header/model.ts::DBHeaderProps"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "classname",
+                "reflect": false
+            },
+            "width": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "DBHeaderProps[\"width\"]",
+                    "resolved": "\"full\" | \"large\" | \"medium\" | \"small\"",
+                    "references": {
+                        "DBHeaderProps": {
+                            "location": "import",
+                            "path": "./model",
+                            "id": "src/components/header/model.ts::DBHeaderProps"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "width",
+                "reflect": false
+            },
+            "burgerMenuLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "DBHeaderProps[\"burgerMenuLabel\"]",
+                    "resolved": "string",
+                    "references": {
+                        "DBHeaderProps": {
+                            "location": "import",
+                            "path": "./model",
+                            "id": "src/components/header/model.ts::DBHeaderProps"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "burger-menu-label",
+                "reflect": false
+            }
+        };
+    }
+    static get states() {
+        return {
+            "_id": {},
+            "initialized": {},
+            "forcedToMobile": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "onToggle",
+                "name": "onToggle",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
+            }];
+    }
+}
+//# sourceMappingURL=header.js.map

package/dist/collection/components/header/header.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"header.js","sourceRoot":"","sources":["../../../src/components/header/header.tsx"],"names":[],"mappings":"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","sourcesContent":["import { DBHeaderProps, DBHeaderState } from \"./model\";\nimport { addAttributeToChildren, cls, uuid } from \"../../utils\";\nimport { DBButton } from \"../button/button\";\nimport { DBDrawer } from \"../drawer/drawer\";\nimport { DEFAULT_BURGER_MENU, DEFAULT_ID } from \"../../shared/constants\";\nimport { isEventTargetNavigationItem } from \"../../utils/navigation\";\n\nimport { Component, h, Fragment, Event, Prop, State } from \"@stencil/core\";\n\n\n/**\n * @slot children - This is a default/unnamed slot\n * @slot metaNavigation - TODO: Add description for slotMetaNavigation\n * @slot secondaryAction - TODO: Add description for slotSecondaryAction\n * @slot brand - TODO: Add description for slotBrand\n * @slot primaryAction - TODO: Add description for slotPrimaryAction\n */\n @Component({\n  tag: \"db-header\",\n})\nexport class DBHeader {\n  private _ref!: HTMLDivElement | null;\n  @Prop() id: DBHeaderProps[\"id\"];\n  @Prop() forceMobile: DBHeaderProps[\"forceMobile\"];\n  @Event() onToggle: any;\n  @Prop() drawerOpen: DBHeaderProps[\"drawerOpen\"];\n  @Prop({attribute: \"classname\"}) className: DBHeaderProps[\"className\"];\n  @Prop() width: DBHeaderProps[\"width\"];\n\n  @Prop() burgerMenuLabel: DBHeaderProps[\"burgerMenuLabel\"];\n  @State() _id = DEFAULT_ID;\n  @State() initialized = false;\n  @State() forcedToMobile = false;\n\n  toggle() {\n    if (this.onToggle) {\n      this.onToggle.emit(!this.drawerOpen);\n    }\n  }\n  handleNavigationItemClick(event: unknown) {\n    if (isEventTargetNavigationItem(event)) {\n      this.toggle();\n    }\n  }\n\n  /**\n   * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n   * @param element  the ref for the component\n   * @param customElementSelector  the custom element like `my-component`\n   */\n  private enableAttributePassing(\n    element: HTMLElement | null,\n    customElementSelector: string\n  ) {\n    const parent = element?.closest(customElementSelector);\n    if (element && parent) {\n      const attributes = parent.attributes;\n      for (let i = 0; i < attributes.length; i++) {\n        const attr = attributes.item(i);\n        if (\n          attr &&\n          (attr.name.startsWith(\"data-\") || attr.name.startsWith(\"aria-\"))\n        ) {\n          element.setAttribute(attr.name, attr.value);\n          parent.removeAttribute(attr.name);\n        }\n        if (attr && attr.name === \"class\") {\n          const isWebComponent = attr.value.includes(\"hydrated\");\n          const value = attr.value.replace(\"hydrated\", \"\").trim();\n          const currentClass = element.getAttribute(\"class\");\n          element.setAttribute(\n            attr.name,\n            `${currentClass ? `${currentClass} ` : \"\"}${value}`\n          );\n          if (isWebComponent) {\n            // Stencil is using this class for lazy loading component\n            parent.setAttribute(\"class\", \"hydrated\");\n          } else {\n            parent.removeAttribute(attr.name);\n          }\n        }\n      }\n    }\n  }\n\n  componentDidLoad() {\n    this.enableAttributePassing(this._ref, \"db-header\");\n    this.initialized = true;\n    this._id = this.id || \"header-\" + uuid();\n  }\n\n  componentDidUpdate() {\n    if (this.initialized && document && this._id && this.forceMobile) {\n      const headerElement = document.getElementById(this._id) as HTMLElement;\n      if (headerElement) {\n        // Adds this attribute to the header to enable all styling which would have\n        // @media screen and (min-width: $db-screens-m) to show mobile navigation on a desktop device\n        addAttributeToChildren(headerElement, {\n          key: \"data-force-mobile\",\n          value: \"true\",\n        });\n      }\n      this.forcedToMobile = true;\n    }\n  }\n\n  render() {\n    return (\n      <header\n        class={cls(\"db-header\", this.className)}\n        ref={(el: any) => {\n          this._ref = el;\n        }}\n        id={this._id}\n        data-width={this.width}\n        data-on-forcing-mobile={this.forceMobile && !this.forcedToMobile}\n      >\n        <db-drawer\n          class=\"db-header-drawer\"\n          spacing=\"small\"\n          rounded={true}\n          open={this.drawerOpen}\n          onClose={() => this.toggle()}\n        >\n          <div class=\"db-header-drawer-navigation\">\n            <div\n              class=\"db-header-navigation\"\n              onClick={(event) => this.handleNavigationItemClick(event)}\n            >\n              <slot></slot>\n            </div>\n            <div class=\"db-header-meta-navigation\">\n              <slot name=\"metaNavigation\"></slot>\n            </div>\n          </div>\n          <div class=\"db-header-secondary-action\">\n            <slot name=\"secondaryAction\"></slot>\n          </div>\n        </db-drawer>\n        <div class=\"db-header-meta-navigation\">\n          <slot name=\"metaNavigation\"></slot>\n        </div>\n        <div class=\"db-header-navigation-bar\">\n          <div class=\"db-header-brand-container\">\n            <slot name=\"brand\"></slot>\n          </div>\n          <div class=\"db-header-navigation-container\">\n            <div class=\"db-header-navigation\">\n              <slot></slot>\n            </div>\n            <div class=\"db-header-primary-action\">\n              <slot name=\"primaryAction\"></slot>\n            </div>\n          </div>\n          <div class=\"db-header-action-container\">\n            <div class=\"db-header-burger-menu-container\">\n              <db-button\n                icon=\"menu\"\n                variant=\"ghost\"\n                id={this._id + \"-burger-menu\"}\n                noText={true}\n                onClick={() => this.toggle()}\n              >\n                {this.burgerMenuLabel ?? DEFAULT_BURGER_MENU}\n              </db-button>\n            </div>\n            <div class=\"db-header-secondary-action\">\n              <slot name=\"secondaryAction\"></slot>\n            </div>\n          </div>\n        </div>\n      </header>\n    );\n  }\n}\n"]}

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

@@ -0,0 +1,3 @@
+import { DBHeader } from "./header";
+export default DBHeader;
+//# sourceMappingURL=index.js.map

package/dist/collection/components/header/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/header/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAC;AAEpC,eAAe,QAAQ,CAAC","sourcesContent":["import { DBHeader } from './header';\n\nexport default DBHeader;"]}

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

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=model.js.map

package/dist/collection/components/header/model.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"model.js","sourceRoot":"","sources":["../../../src/components/header/model.ts"],"names":[],"mappings":"","sourcesContent":["import { ContainerWidthProps, GlobalProps, GlobalState, InitializedState, NavigationBehaviorState, ToggleEventProps, ToggleEventState } from '../../shared/model';\nexport type DBHeaderDefaultProps = {\n  /**\n   * Slot to pass in the DBBrand component\n   */\n  brand?: any;\n  /**\n   * Slot to pass in a meta navigation.\n   * Desktop: Above the regular header\n   * Mobile: Inside the drawer\n   */\n  metaNavigation?: any;\n  /**\n   * Slot to pass one or more elements like DBButton (e.g. search) as primary action.\n   * Desktop: Shown next to the main-navigation\n   * Mobile: Shown next to the brand\n   */\n  primaryAction?: any;\n  /**\n   * Slot to pass one or more elements like DBButton (e.g. profile, language, etc.) as secondary action.\n   * Desktop: Shown seperated by divider at the end of the header\n   * Mobile: Shown inside the drawer at the bottom.\n   */\n  secondaryAction?: any;\n\n  /**\n   * Open/closes the drawer for mobile header or if `forceMobile` is true.\n   */\n  drawerOpen?: boolean;\n\n  /**\n   * Forces the header to use mobile layout for desktop as well.\n   * You should only use this setting if you really can't provide a smaller navigation.\n   * Overwrite size of the drawer with '--db-drawer-max-width: xxx'\n   */\n  forceMobile?: boolean;\n\n  /**\n   * This attribute sets the label for the burger menu button for mobile headers.\n   */\n  burgerMenuLabel?: string;\n};\nexport type DBHeaderProps = DBHeaderDefaultProps & GlobalProps & ToggleEventProps & ContainerWidthProps;\nexport type DBHeaderDefaultState = {\n  forcedToMobile?: boolean;\n};\nexport type DBHeaderState = DBHeaderDefaultState & GlobalState & ToggleEventState<HTMLElement> & InitializedState & NavigationBehaviorState"]}

package/dist/collection/components/icon/icon.js

@@ -0,0 +1,204 @@
+import { cls } from "../../utils";
+import { h } from "@stencil/core";
+/**
+ * @slot children - This is a default/unnamed slot
+
+ */
+export class DBIcon {
+    /**
+     * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.
+     * @param element  the ref for the component
+     * @param customElementSelector  the custom element like `my-component`
+     */
+    enableAttributePassing(element, customElementSelector) {
+        const parent = element === null || element === void 0 ? void 0 : element.closest(customElementSelector);
+        if (element && parent) {
+            const attributes = parent.attributes;
+            for (let i = 0; i < attributes.length; i++) {
+                const attr = attributes.item(i);
+                if (attr &&
+                    (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))) {
+                    element.setAttribute(attr.name, attr.value);
+                    parent.removeAttribute(attr.name);
+                }
+                if (attr && attr.name === "class") {
+                    const isWebComponent = attr.value.includes("hydrated");
+                    const value = attr.value.replace("hydrated", "").trim();
+                    const currentClass = element.getAttribute("class");
+                    element.setAttribute(attr.name, `${currentClass ? `${currentClass} ` : ""}${value}`);
+                    if (isWebComponent) {
+                        // Stencil is using this class for lazy loading component
+                        parent.setAttribute("class", "hydrated");
+                    }
+                    else {
+                        parent.removeAttribute(attr.name);
+                    }
+                }
+            }
+        }
+    }
+    componentDidLoad() {
+        this.enableAttributePassing(this._ref, "db-icon");
+    }
+    render() {
+        return (h("span", { key: '37462bfe90d8348f3ddaf4600ba12c12ae5f4756', class: cls("db-icon", this.className), "aria-hidden": "true", ref: (el) => {
+                this._ref = el;
+            }, id: this.id, "data-icon": this.icon, "data-icon-weight": this.weight, "data-icon-variant": this.variant }, this.text ? this.text : h("slot", null)));
+    }
+    static get is() { return "db-icon"; }
+    static get properties() {
+        return {
+            "id": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "DBIconProps[\"id\"]",
+                    "resolved": "string",
+                    "references": {
+                        "DBIconProps": {
+                            "location": "import",
+                            "path": "./model",
+                            "id": "src/components/icon/model.ts::DBIconProps"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "id",
+                "reflect": false
+            },
+            "className": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "DBIconProps[\"className\"]",
+                    "resolved": "string",
+                    "references": {
+                        "DBIconProps": {
+                            "location": "import",
+                            "path": "./model",
+                            "id": "src/components/icon/model.ts::DBIconProps"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "classname",
+                "reflect": false
+            },
+            "icon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "DBIconProps[\"icon\"]",
+                    "resolved": "BaseIconTypes | LooseAutocomplete",
+                    "references": {
+                        "DBIconProps": {
+                            "location": "import",
+                            "path": "./model",
+                            "id": "src/components/icon/model.ts::DBIconProps"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "icon",
+                "reflect": false
+            },
+            "weight": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "DBIconProps[\"weight\"]",
+                    "resolved": "\"16\" | \"20\" | \"24\" | \"32\" | \"48\" | \"64\"",
+                    "references": {
+                        "DBIconProps": {
+                            "location": "import",
+                            "path": "./model",
+                            "id": "src/components/icon/model.ts::DBIconProps"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "weight",
+                "reflect": false
+            },
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "DBIconProps[\"variant\"]",
+                    "resolved": "\"default\" | \"filled\" | \"inverted\"",
+                    "references": {
+                        "DBIconProps": {
+                            "location": "import",
+                            "path": "./model",
+                            "id": "src/components/icon/model.ts::DBIconProps"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "variant",
+                "reflect": false
+            },
+            "text": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "DBIconProps[\"text\"]",
+                    "resolved": "string",
+                    "references": {
+                        "DBIconProps": {
+                            "location": "import",
+                            "path": "./model",
+                            "id": "src/components/icon/model.ts::DBIconProps"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "text",
+                "reflect": false
+            }
+        };
+    }
+}
+//# sourceMappingURL=icon.js.map

package/dist/collection/components/icon/icon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"icon.js","sourceRoot":"","sources":["../../../src/components/icon/icon.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC;AAElC,OAAO,EAAE,SAAS,EAAE,CAAC,EAAY,IAAI,EAAE,MAAM,eAAe,CAAC;AAG7D;;;GAGG;AAIH,MAAM,OAAO,MAAM;IAUjB;;;;OAIG;IACK,sBAAsB,CAC5B,OAA2B,EAC3B,qBAA6B;QAE7B,MAAM,MAAM,GAAG,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,OAAO,CAAC,qBAAqB,CAAC,CAAC;QACvD,IAAI,OAAO,IAAI,MAAM,EAAE,CAAC;YACtB,MAAM,UAAU,GAAG,MAAM,CAAC,UAAU,CAAC;YACrC,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,UAAU,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE,CAAC;gBAC3C,MAAM,IAAI,GAAG,UAAU,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;gBAChC,IACE,IAAI;oBACJ,CAAC,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC,EAChE,CAAC;oBACD,OAAO,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC;oBAC5C,MAAM,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;gBACpC,CAAC;gBACD,IAAI,IAAI,IAAI,IAAI,CAAC,IAAI,KAAK,OAAO,EAAE,CAAC;oBAClC,MAAM,cAAc,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,UAAU,CAAC,CAAC;oBACvD,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,UAAU,EAAE,EAAE,CAAC,CAAC,IAAI,EAAE,CAAC;oBACxD,MAAM,YAAY,GAAG,OAAO,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC;oBACnD,OAAO,CAAC,YAAY,CAClB,IAAI,CAAC,IAAI,EACT,GAAG,YAAY,CAAC,CAAC,CAAC,GAAG,YAAY,GAAG,CAAC,CAAC,CAAC,EAAE,GAAG,KAAK,EAAE,CACpD,CAAC;oBACF,IAAI,cAAc,EAAE,CAAC;wBACnB,yDAAyD;wBACzD,MAAM,CAAC,YAAY,CAAC,OAAO,EAAE,UAAU,CAAC,CAAC;oBAC3C,CAAC;yBAAM,CAAC;wBACN,MAAM,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;oBACpC,CAAC;gBACH,CAAC;YACH,CAAC;QACH,CAAC;IACH,CAAC;IAED,gBAAgB;QACd,IAAI,CAAC,sBAAsB,CAAC,IAAI,CAAC,IAAI,EAAE,SAAS,CAAC,CAAC;IACpD,CAAC;IAED,MAAM;QACJ,OAAO,CACL,6DACE,KAAK,EAAE,GAAG,CAAC,SAAS,EAAE,IAAI,CAAC,SAAS,CAAC,iBACzB,MAAM,EAClB,GAAG,EAAE,CAAC,EAAO,EAAE,EAAE;gBACf,IAAI,CAAC,IAAI,GAAG,EAAE,CAAC;YACjB,CAAC,EACD,EAAE,EAAE,IAAI,CAAC,EAAE,eACA,IAAI,CAAC,IAAI,sBACF,IAAI,CAAC,MAAM,uBACV,IAAI,CAAC,OAAO,IAE9B,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,eAAa,CACjC,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import type { DBIconProps, DBIconState } from \"./model\";\nimport { cls } from \"../../utils\";\n\nimport { Component, h, Fragment, Prop } from \"@stencil/core\";\n\n\n/**\n * @slot children - This is a default/unnamed slot\n\n */\n @Component({\n  tag: \"db-icon\",\n})\nexport class DBIcon {\n  private _ref!: HTMLSpanElement | null;\n  @Prop() id: DBIconProps[\"id\"];\n  @Prop({attribute: \"classname\"}) className: DBIconProps[\"className\"];\n  @Prop() icon: DBIconProps[\"icon\"];\n  @Prop() weight: DBIconProps[\"weight\"];\n  @Prop() variant: DBIconProps[\"variant\"];\n  @Prop() text: DBIconProps[\"text\"];\n\n\n  /**\n   * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n   * @param element  the ref for the component\n   * @param customElementSelector  the custom element like `my-component`\n   */\n  private enableAttributePassing(\n    element: HTMLElement | null,\n    customElementSelector: string\n  ) {\n    const parent = element?.closest(customElementSelector);\n    if (element && parent) {\n      const attributes = parent.attributes;\n      for (let i = 0; i < attributes.length; i++) {\n        const attr = attributes.item(i);\n        if (\n          attr &&\n          (attr.name.startsWith(\"data-\") || attr.name.startsWith(\"aria-\"))\n        ) {\n          element.setAttribute(attr.name, attr.value);\n          parent.removeAttribute(attr.name);\n        }\n        if (attr && attr.name === \"class\") {\n          const isWebComponent = attr.value.includes(\"hydrated\");\n          const value = attr.value.replace(\"hydrated\", \"\").trim();\n          const currentClass = element.getAttribute(\"class\");\n          element.setAttribute(\n            attr.name,\n            `${currentClass ? `${currentClass} ` : \"\"}${value}`\n          );\n          if (isWebComponent) {\n            // Stencil is using this class for lazy loading component\n            parent.setAttribute(\"class\", \"hydrated\");\n          } else {\n            parent.removeAttribute(attr.name);\n          }\n        }\n      }\n    }\n  }\n\n  componentDidLoad() {\n    this.enableAttributePassing(this._ref, \"db-icon\");\n  }\n\n  render() {\n    return (\n      <span\n        class={cls(\"db-icon\", this.className)}\n        aria-hidden=\"true\"\n        ref={(el: any) => {\n          this._ref = el;\n        }}\n        id={this.id}\n        data-icon={this.icon}\n        data-icon-weight={this.weight}\n        data-icon-variant={this.variant}\n      >\n        {this.text ? this.text : <slot></slot>}\n      </span>\n    );\n  }\n}\n"]}

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

@@ -0,0 +1,3 @@
+import { DBIcon } from "./icon";
+export default DBIcon;
+//# sourceMappingURL=index.js.map

package/dist/collection/components/icon/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/icon/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,QAAQ,CAAC;AAEhC,eAAe,MAAM,CAAC","sourcesContent":["import { DBIcon } from './icon';\n\nexport default DBIcon;"]}

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

@@ -0,0 +1,3 @@
+export const IconVariantList = ['default', 'inverted', 'filled'];
+export const IconWeightList = ['16', '20', '24', '32', '48', '64'];
+//# sourceMappingURL=model.js.map

package/dist/collection/components/icon/model.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"model.js","sourceRoot":"","sources":["../../../src/components/icon/model.ts"],"names":[],"mappings":"AACA,MAAM,CAAC,MAAM,eAAe,GAAI,CAAC,SAAS,EAAE,UAAU,EAAE,QAAQ,CAAW,CAAC;AAE5E,MAAM,CAAC,MAAM,cAAc,GAAI,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,CAAW,CAAC","sourcesContent":["import { GlobalProps, GlobalState, IconProps, TextProps } from '../../shared/model';\nexport const IconVariantList = (['default', 'inverted', 'filled'] as const);\nexport type IconVariantType = (typeof IconVariantList)[number];\nexport const IconWeightList = (['16', '20', '24', '32', '48', '64'] as const);\nexport type IconWeightType = (typeof IconWeightList)[number];\nexport type DBIconDefaultProps = {\n  variant?: IconVariantType;\n  weight?: IconWeightType;\n};\nexport type DBIconProps = DBIconDefaultProps & GlobalProps & IconProps & TextProps;\nexport type DBIconDefaultState = {};\nexport type DBIconState = DBIconDefaultState & GlobalState"]}

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

@@ -0,0 +1,3 @@
+import { DBInfotext } from "./infotext";
+export default DBInfotext;
+//# sourceMappingURL=index.js.map

package/dist/collection/components/infotext/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/infotext/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AAExC,eAAe,UAAU,CAAC","sourcesContent":["import { DBInfotext } from './infotext';\n\nexport default DBInfotext;"]}