@db-ux/wc-core-components 2.0.0-0-custom-select-16b8cce → 2.0.0

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

@@ -1 +1 @@
-{"version":3,"file":"notification.js","sourceRoot":"","sources":["../../../src/components/notification/notification.tsx"],"names":[],"mappings":"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","sourcesContent":["import { DBNotificationProps, DBNotificationState } from \"./model\";\nimport { DBButton } from \"../button/button\";\nimport { DEFAULT_CLOSE_BUTTON } from \"../../shared/constants\";\nimport { cls, getHideProp, stringPropVisible } from \"../../utils\";\nimport { ClickEvent } from \"../../shared/model\";\n\nimport { Component, h, Fragment, Event, Prop } from \"@stencil/core\";\n\n\n/**\n * @slot children - This is a default/unnamed slot\n * @slot image - TODO: Add description for slotImage\n * @slot link - TODO: Add description for slotLink\n */\n @Component({\n  tag: \"db-notification\",\n})\nexport class DBNotification {\n  private _ref!: HTMLDivElement | null;\n  @Event() onClose: any;\n  @Prop() id: DBNotificationProps[\"id\"];\n  @Prop({attribute: \"classname\"}) className: DBNotificationProps[\"className\"];\n  @Prop() ariaLive: DBNotificationProps[\"ariaLive\"];\n  @Prop() semantic: DBNotificationProps[\"semantic\"];\n  @Prop() variant: DBNotificationProps[\"variant\"];\n  @Prop() icon: DBNotificationProps[\"icon\"];\n  @Prop() showIcon: DBNotificationProps[\"showIcon\"];\n  @Prop() linkVariant: DBNotificationProps[\"linkVariant\"];\n  @Prop() headline: DBNotificationProps[\"headline\"];\n  @Prop() showHeadline: DBNotificationProps[\"showHeadline\"];\n  @Prop() text: DBNotificationProps[\"text\"];\n\n  @Prop() timestamp: DBNotificationProps[\"timestamp\"];\n  @Prop() showTimestamp: DBNotificationProps[\"showTimestamp\"];\n  @Prop() closeable: DBNotificationProps[\"closeable\"];\n  @Prop() closeButtonId: DBNotificationProps[\"closeButtonId\"];\n  @Prop() closeButtonText: DBNotificationProps[\"closeButtonText\"];\n\n  handleClose(event: ClickEvent<HTMLButtonElement>) {\n    if (this.onClose) {\n      this.onClose.emit();\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-notification\");\n  }\n\n  render() {\n    return (\n      <article\n        class={cls(\"db-notification\", this.className)}\n        ref={(el: any) => {\n          this._ref = el;\n        }}\n        id={this.id}\n        aria-live={this.ariaLive}\n        data-semantic={this.semantic}\n        data-variant={this.variant}\n        data-icon={this.icon}\n        data-hide-icon={getHideProp(this.showIcon)}\n        data-link-variant={this.linkVariant}\n      >\n        <slot name=\"image\"></slot>\n        {stringPropVisible(this.headline, this.showHeadline) ? (\n          <header>{this.headline}</header>\n        ) : null}\n        <p>{this.text ? this.text : <slot></slot>}</p>\n        {stringPropVisible(this.timestamp, this.showTimestamp) ? (\n          <span>{this.timestamp}</span>\n        ) : null}\n        <slot name=\"link\"></slot>\n        {this.closeable ? (\n          <db-button\n            icon=\"cross\"\n            variant=\"ghost\"\n            size=\"small\"\n            id={this.closeButtonId}\n            noText={true}\n            onClick={(event) => this.handleClose(event)}\n          >\n            {this.closeButtonText ?? DEFAULT_CLOSE_BUTTON}\n          </db-button>\n        ) : null}\n      </article>\n    );\n  }\n}\n"]}
+{"version":3,"file":"notification.js","sourceRoot":"","sources":["../../../src/components/notification/notification.tsx"],"names":[],"mappings":"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","sourcesContent":["import { DBNotificationProps, DBNotificationState } from \"./model\";\nimport { DBButton } from \"../button/button\";\nimport { DEFAULT_CLOSE_BUTTON } from \"../../shared/constants\";\nimport { cls, getBoolean, getHideProp, stringPropVisible } from \"../../utils\";\nimport { ClickEvent } from \"../../shared/model\";\n\nimport {\n  Component,\n  h,\n  Fragment,\n  Event,\n  EventEmitter,\n  Prop,\n} from \"@stencil/core\";\n\n\n/**\n * @slot children - This is a default/unnamed slot\n * @slot image - TODO: Add description for slotImage\n * @slot link - TODO: Add description for slotLink\n */\n @Component({\n  tag: \"db-notification\",\n})\nexport class DBNotification {\n  private _ref!: HTMLDivElement | any;\n  @Event() close: EventEmitter<\n    Parameters<Required<DBNotificationProps>[\"onClose\"]>[number]\n  > | void;\n  @Prop() id: DBNotificationProps[\"id\"];\n  @Prop({attribute: \"classname\"}) className: DBNotificationProps[\"className\"];\n  @Prop() ariaLive: DBNotificationProps[\"ariaLive\"];\n  @Prop() semantic: DBNotificationProps[\"semantic\"];\n  @Prop() variant: DBNotificationProps[\"variant\"];\n  @Prop() icon: DBNotificationProps[\"icon\"];\n  @Prop() showIcon: DBNotificationProps[\"showIcon\"];\n  @Prop() linkVariant: DBNotificationProps[\"linkVariant\"];\n  @Prop() headline: DBNotificationProps[\"headline\"];\n  @Prop() showHeadline: DBNotificationProps[\"showHeadline\"];\n  @Prop() text: DBNotificationProps[\"text\"];\n  @Prop() timestamp: DBNotificationProps[\"timestamp\"];\n  @Prop() showTimestamp: DBNotificationProps[\"showTimestamp\"];\n  @Prop() closeable: DBNotificationProps[\"closeable\"];\n  @Prop() closeButtonId: DBNotificationProps[\"closeButtonId\"];\n  @Prop() closeButtonText: DBNotificationProps[\"closeButtonText\"];\n\n  handleClose(event: ClickEvent<HTMLButtonElement> | any) {\n    if (this.close) {\n      this.close.emit(event);\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-notification\");\n  }\n\n  render() {\n    return (\n      <article\n        class={cls(\"db-notification\", this.className)}\n        ref={(el: any) => {\n          this._ref = el;\n        }}\n        id={this.id}\n        aria-live={this.ariaLive}\n        data-semantic={this.semantic}\n        data-variant={this.variant}\n        data-icon={this.icon}\n        data-hide-icon={getHideProp(this.showIcon)}\n        data-link-variant={this.linkVariant}\n      >\n        <slot name=\"image\"></slot>\n        {stringPropVisible(this.headline, this.showHeadline) ? (\n          <header>{this.headline}</header>\n        ) : null}\n        <p>{this.text ? this.text : <slot></slot>}</p>\n        {stringPropVisible(this.timestamp, this.showTimestamp) ? (\n          <span>{this.timestamp}</span>\n        ) : null}\n        <slot name=\"link\"></slot>\n        {getBoolean(this.closeable, \"closeable\") ? (\n          <db-button\n            icon=\"cross\"\n            variant=\"ghost\"\n            size=\"small\"\n            id={this.closeButtonId}\n            noText={true}\n            onClick={(event) => this.handleClose(event)}\n          >\n            {this.closeButtonText ?? DEFAULT_CLOSE_BUTTON}\n          </db-button>\n        ) : null}\n      </article>\n    );\n  }\n}\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"model.js","sourceRoot":"","sources":["../../../src/components/page/model.ts"],"names":[],"mappings":"AACA,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,MAAM,EAAE,OAAO,CAAU,CAAC;AAE1D,MAAM,CAAC,MAAM,wBAAwB,GAAG,CAAC,QAAQ,EAAE,MAAM,CAAU,CAAC","sourcesContent":["import { GlobalProps, GlobalState } from '../../shared/model';\nexport const PageVariantList = ['auto', 'fixed'] as const;\nexport type PageVariantType = (typeof PageVariantList)[number];\nexport const PageDocumentOverflowList = ['hidden', 'auto'] as const;\nexport type PageDocumentOverflowType = (typeof PageDocumentOverflowList)[number];\nexport type DBPageDefaultProps = {\n  /**\n   * The documentOverflow sets the overflow:hidden/auto to the root document\n   */\n  documentOverflow?: PageDocumentOverflowType;\n  /**\n   * Set this to have a transition with opacity to avoid layout-shifts https://simonhearne.com/2021/layout-shifts-webfonts/\n   */\n  fadeIn?: boolean;\n\n  /**\n   * The slot can be used for React to set a footer.\n   */\n  footer?: any;\n  /**\n   * The slot can be used for React to set a header.\n   */\n  header?: any;\n\n  /**\n   * Adds `class` to `<main>` element\n   */\n  mainClass?: string;\n\n  /**\n   * The variant=fixed uses flex-box to make header and footer static\n   */\n  variant?: PageVariantType;\n};\nexport type DBPageProps = DBPageDefaultProps & GlobalProps;\nexport type DBPageDefaultState = {\n  fontsLoaded?: boolean;\n};\nexport type DBPageState = DBPageDefaultState & GlobalState"]}
+{"version":3,"file":"model.js","sourceRoot":"","sources":["../../../src/components/page/model.ts"],"names":[],"mappings":"AACA,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,MAAM,EAAE,OAAO,CAAU,CAAC;AAE1D,MAAM,CAAC,MAAM,wBAAwB,GAAG,CAAC,QAAQ,EAAE,MAAM,CAAU,CAAC","sourcesContent":["import { GlobalProps, GlobalState } from '../../shared/model';\nexport const PageVariantList = ['auto', 'fixed'] as const;\nexport type PageVariantType = (typeof PageVariantList)[number];\nexport const PageDocumentOverflowList = ['hidden', 'auto'] as const;\nexport type PageDocumentOverflowType = (typeof PageDocumentOverflowList)[number];\nexport type DBPageDefaultProps = {\n  /**\n   * The documentOverflow sets the overflow:hidden/auto to the root document\n   */\n  documentOverflow?: PageDocumentOverflowType;\n  /**\n   * Set this to have a transition with opacity to avoid layout-shifts https://simonhearne.com/2021/layout-shifts-webfonts/\n   */\n  fadeIn?: boolean | string;\n\n  /**\n   * The slot can be used for React to set a footer.\n   */\n  footer?: any;\n  /**\n   * The slot can be used for React to set a header.\n   */\n  header?: any;\n\n  /**\n   * Adds `class` to `<main>` element\n   */\n  mainClass?: string;\n\n  /**\n   * The variant=fixed uses flex-box to make header and footer static\n   */\n  variant?: PageVariantType;\n};\nexport type DBPageProps = DBPageDefaultProps & GlobalProps;\nexport type DBPageDefaultState = {\n  fontsLoaded?: boolean;\n};\nexport type DBPageState = DBPageDefaultState & GlobalState"]}

package/dist/collection/components/page/page.js

@@ -61,19 +61,20 @@ export class DBPage {
         }
     }
     render() {
-        return (h("div", { key: 'e84efdbed5836db872f261cc1ac3c2606153e6d6', class: cls("db-page", this.className), ref: (el) => {
+        return (h("div", { key: 'c94b9840013c227ce38cfe21391d287fc0a89f6c', class: cls("db-page", this.className), ref: (el) => {
                 this._ref = el;
-            }, id: this.id, "data-variant": this.variant, "data-fade-in": this.fadeIn, "data-fonts-loaded": getBooleanAsString(this.fontsLoaded) }, h("slot", { key: 'fff9d9902cc83f706932d233195d30c9096f8c14', name: "header" }), h("main", { key: '1c78d658ffe24c528e5cd431c9156fb19d10ce0d', class: cls("db-main", this.mainClass) }, h("slot", { key: 'd7124b497f131fac36e66da44add93a0504eed0c' })), h("slot", { key: '765db6c7b9981063e05c97b983558f357081c6be', name: "footer" })));
+            }, id: this.id, "data-variant": this.variant, "data-fade-in": getBooleanAsString(this.fadeIn), "data-fonts-loaded": getBooleanAsString(this.fontsLoaded) }, h("slot", { key: '2f8142be3eb631f6af14ef1ff561699d18facb5e', name: "header" }), h("main", { key: '7cfc82fa914ef92140b93d5ce265a33129f5ed37', class: cls("db-main", this.mainClass) }, h("slot", { key: '1db431f209c21045733755fdac9c1930bad30eb7' })), h("slot", { key: 'da7861f0d5edd4cf76a117b615771b8660d13026', name: "footer" })));
     }
     static get is() { return "db-page"; }
     static get properties() {
         return {
             "fadeIn": {
-                "type": "boolean",
+                "type": "any",
+                "attribute": "fade-in",
                 "mutable": false,
                 "complexType": {
                     "original": "DBPageProps[\"fadeIn\"]",
-                    "resolved": "boolean",
+                    "resolved": "boolean | string",
                     "references": {
                         "DBPageProps": {
                             "location": "import",
@@ -90,11 +91,11 @@ export class DBPage {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "fade-in",
                 "reflect": false
             },
             "documentOverflow": {
                 "type": "string",
+                "attribute": "document-overflow",
                 "mutable": false,
                 "complexType": {
                     "original": "DBPageProps[\"documentOverflow\"]",
@@ -115,11 +116,11 @@ export class DBPage {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "document-overflow",
                 "reflect": false
             },
             "variant": {
                 "type": "string",
+                "attribute": "variant",
                 "mutable": false,
                 "complexType": {
                     "original": "DBPageProps[\"variant\"]",
@@ -140,11 +141,11 @@ export class DBPage {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "variant",
                 "reflect": false
             },
             "id": {
                 "type": "string",
+                "attribute": "id",
                 "mutable": false,
                 "complexType": {
                     "original": "DBPageProps[\"id\"]",
@@ -165,11 +166,11 @@ export class DBPage {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "id",
                 "reflect": false
             },
             "className": {
                 "type": "string",
+                "attribute": "classname",
                 "mutable": false,
                 "complexType": {
                     "original": "DBPageProps[\"className\"]",
@@ -190,11 +191,11 @@ export class DBPage {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "classname",
                 "reflect": false
             },
             "mainClass": {
                 "type": "string",
+                "attribute": "main-class",
                 "mutable": false,
                 "complexType": {
                     "original": "DBPageProps[\"mainClass\"]",
@@ -215,7 +216,6 @@ export class DBPage {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "main-class",
                 "reflect": false
             }
         };

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

@@ -1 +1 @@
-{"version":3,"file":"page.js","sourceRoot":"","sources":["../../../src/components/page/page.tsx"],"names":[],"mappings":"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","sourcesContent":["import { DBPageProps, DBPageState } from \"./model\";\nimport { cls, getBooleanAsString } from \"../../utils\";\n\nimport { Component, h, Fragment, Prop, State } from \"@stencil/core\";\n\n\n/**\n * @slot children - This is a default/unnamed slot\n * @slot header - TODO: Add description for slotHeader\n * @slot footer - TODO: Add description for slotFooter\n */\n @Component({\n  tag: \"db-page\",\n})\nexport class DBPage {\n  private _ref!: HTMLDivElement | null;\n  @Prop() fadeIn: DBPageProps[\"fadeIn\"];\n  @Prop() documentOverflow: DBPageProps[\"documentOverflow\"];\n  @Prop() variant: DBPageProps[\"variant\"];\n  @Prop() id: DBPageProps[\"id\"];\n  @Prop({attribute: \"classname\"}) className: DBPageProps[\"className\"];\n  @Prop() mainClass: DBPageProps[\"mainClass\"];\n\n  @State() fontsLoaded = false;\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-page\");\n    this.fontsLoaded = !this.fadeIn;\n    if (document && this.fadeIn) {\n      document.fonts.ready.then(() => {\n        this.fontsLoaded = true;\n      });\n    } else {\n      this.fontsLoaded = true;\n    }\n  }\n  disconnectedCallback() {\n    if (\n      typeof window !== \"undefined\" &&\n      document.documentElement.classList.contains(\"db-page-document\")\n    ) {\n      // remove document styles set by this\n      document.documentElement.classList.remove(\"db-page-document\");\n    }\n  }\n\n  render() {\n    return (\n      <div\n        class={cls(\"db-page\", this.className)}\n        ref={(el: any) => {\n          this._ref = el;\n        }}\n        id={this.id}\n        data-variant={this.variant}\n        data-fade-in={this.fadeIn}\n        data-fonts-loaded={getBooleanAsString(this.fontsLoaded)}\n      >\n        <slot name=\"header\"></slot>\n        <main class={cls(\"db-main\", this.mainClass)}>\n          <slot></slot>\n        </main>\n        <slot name=\"footer\"></slot>\n      </div>\n    );\n  }\n}\n"]}
+{"version":3,"file":"page.js","sourceRoot":"","sources":["../../../src/components/page/page.tsx"],"names":[],"mappings":"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","sourcesContent":["import { DBPageProps, DBPageState } from \"./model\";\nimport { cls, getBooleanAsString } from \"../../utils\";\n\nimport { Component, h, Fragment, Prop, State } from \"@stencil/core\";\n\n\n/**\n * @slot children - This is a default/unnamed slot\n * @slot header - TODO: Add description for slotHeader\n * @slot footer - TODO: Add description for slotFooter\n */\n @Component({\n  tag: \"db-page\",\n})\nexport class DBPage {\n  private _ref!: HTMLDivElement | any;\n  @Prop() fadeIn: DBPageProps[\"fadeIn\"];\n  @Prop() documentOverflow: DBPageProps[\"documentOverflow\"];\n  @Prop() variant: DBPageProps[\"variant\"];\n  @Prop() id: DBPageProps[\"id\"];\n  @Prop({attribute: \"classname\"}) className: DBPageProps[\"className\"];\n  @Prop() mainClass: DBPageProps[\"mainClass\"];\n  @State() fontsLoaded = false;\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-page\");\n    this.fontsLoaded = !this.fadeIn;\n    if (document && this.fadeIn) {\n      document.fonts.ready.then(() => {\n        this.fontsLoaded = true;\n      });\n    } else {\n      this.fontsLoaded = true;\n    }\n  }\n  disconnectedCallback() {\n    if (\n      typeof window !== \"undefined\" &&\n      document.documentElement.classList.contains(\"db-page-document\")\n    ) {\n      // remove document styles set by this\n      document.documentElement.classList.remove(\"db-page-document\");\n    }\n  }\n\n  render() {\n    return (\n      <div\n        class={cls(\"db-page\", this.className)}\n        ref={(el: any) => {\n          this._ref = el;\n        }}\n        id={this.id}\n        data-variant={this.variant}\n        data-fade-in={getBooleanAsString(this.fadeIn)}\n        data-fonts-loaded={getBooleanAsString(this.fontsLoaded)}\n      >\n        <slot name=\"header\"></slot>\n        <main class={cls(\"db-main\", this.mainClass)}>\n          <slot></slot>\n        </main>\n        <slot name=\"footer\"></slot>\n      </div>\n    );\n  }\n}\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"model.js","sourceRoot":"","sources":["../../../src/components/popover/model.ts"],"names":[],"mappings":"","sourcesContent":["import { GapProps, GlobalProps, GlobalState, InitializedState, PlacementProps, PopoverProps, PopoverState, SpacingProps } from '../../shared/model';\nexport type DBPopoverDefaultProps = {\n  /**\n   * Use open to disable the default hover/focus behavior to use it on click or other trigger.\n   */\n  open?: boolean;\n\n  /**\n   * The trigger to open the popover e.g. a button\n   */\n  trigger?: any;\n};\nexport type DBPopoverProps = DBPopoverDefaultProps & GlobalProps & SpacingProps & PlacementProps & GapProps & PopoverProps;\nexport type DBPopoverDefaultState = {\n  isExpanded?: boolean;\n  getTrigger: () => Element | null;\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  handleLeave: (event: any) => void;\n};\nexport type DBPopoverState = DBPopoverDefaultState & GlobalState & PopoverState & InitializedState"]}
+{"version":3,"file":"model.js","sourceRoot":"","sources":["../../../src/components/popover/model.ts"],"names":[],"mappings":"","sourcesContent":["import { GapProps, GlobalProps, GlobalState, InitializedState, PlacementProps, PopoverProps, PopoverState, SpacingProps } from '../../shared/model';\nexport type DBPopoverDefaultProps = {\n  /**\n   * Use open to disable the default hover/focus behavior to use it on click or other trigger.\n   */\n  open?: boolean | string;\n\n  /**\n   * The trigger to open the popover e.g. a button\n   */\n  trigger?: any;\n};\nexport type DBPopoverProps = DBPopoverDefaultProps & GlobalProps & SpacingProps & PlacementProps & GapProps & PopoverProps;\nexport type DBPopoverDefaultState = {\n  isExpanded?: boolean;\n  getTrigger: () => Element | null;\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  handleLeave: (event: any) => void;\n};\nexport type DBPopoverState = DBPopoverDefaultState & GlobalState & PopoverState & InitializedState"]}

package/dist/collection/components/popover/popover.js

@@ -110,15 +110,16 @@ export class DBPopover {
     }
     render() {
         var _a;
-        return (h("div", { key: '266a99bdc9c4e255642180c6775f55e6cb8f91c1', class: cls("db-popover", this.className), ref: (el) => {
+        return (h("div", { key: 'dd9a109cf9822c400063e906005cb7e4a0d77246', class: cls("db-popover", this.className), ref: (el) => {
                 this._ref = el;
-            }, id: this.id, onFocus: () => this.handleAutoPlacement(), onBlur: (event) => this.handleLeave(event), onMouseEnter: () => this.handleAutoPlacement(), onMouseLeave: (event) => this.handleLeave(event) }, h("slot", { key: '2e440979745c2c4b0a1026ae1c4556d8d27c5998', name: "trigger" }), h("article", { key: 'ac109522faf4e778db2969c5e4e9bdeaf16c6595', class: "db-popover-content", "data-spacing": this.spacing, "data-gap": getBooleanAsString(this.gap), "data-animation": getBooleanAsString((_a = this.animation) !== null && _a !== void 0 ? _a : true), "data-open": this.open, "data-delay": this.delay, "data-width": this.width, "data-placement": this.placement }, h("slot", { key: '8b4b1d8c324eff9a7ac5db2a742c11dfe25d68fb' }))));
+            }, id: this.id, onFocus: () => this.handleAutoPlacement(), onBlur: (event) => this.handleLeave(event), onMouseEnter: () => this.handleAutoPlacement(), onMouseLeave: (event) => this.handleLeave(event) }, h("slot", { key: '464ed37c74a82835b651477c0037755787d5a589', name: "trigger" }), h("article", { key: '6aaa12138b4a48fa29778beb48394ed32f95b0bf', class: "db-popover-content", "data-spacing": this.spacing, "data-gap": getBooleanAsString(this.gap), "data-animation": getBooleanAsString((_a = this.animation) !== null && _a !== void 0 ? _a : true), "data-open": getBooleanAsString(this.open), "data-delay": this.delay, "data-width": this.width, "data-placement": this.placement }, h("slot", { key: 'c0e8fdce2d08f6f7614a6fefc9372d3b506fe2a4' }))));
     }
     static get is() { return "db-popover"; }
     static get properties() {
         return {
             "id": {
                 "type": "string",
+                "attribute": "id",
                 "mutable": false,
                 "complexType": {
                     "original": "DBPopoverProps[\"id\"]",
@@ -139,11 +140,11 @@ export class DBPopover {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "id",
                 "reflect": false
             },
             "className": {
                 "type": "string",
+                "attribute": "classname",
                 "mutable": false,
                 "complexType": {
                     "original": "DBPopoverProps[\"className\"]",
@@ -164,11 +165,11 @@ export class DBPopover {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "classname",
                 "reflect": false
             },
             "spacing": {
                 "type": "string",
+                "attribute": "spacing",
                 "mutable": false,
                 "complexType": {
                     "original": "DBPopoverProps[\"spacing\"]",
@@ -189,15 +190,15 @@ export class DBPopover {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "spacing",
                 "reflect": false
             },
             "gap": {
-                "type": "boolean",
+                "type": "any",
+                "attribute": "gap",
                 "mutable": false,
                 "complexType": {
                     "original": "DBPopoverProps[\"gap\"]",
-                    "resolved": "boolean",
+                    "resolved": "boolean | string",
                     "references": {
                         "DBPopoverProps": {
                             "location": "import",
@@ -214,15 +215,15 @@ export class DBPopover {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "gap",
                 "reflect": false
             },
             "animation": {
-                "type": "boolean",
+                "type": "any",
+                "attribute": "animation",
                 "mutable": false,
                 "complexType": {
                     "original": "DBPopoverProps[\"animation\"]",
-                    "resolved": "boolean",
+                    "resolved": "boolean | string",
                     "references": {
                         "DBPopoverProps": {
                             "location": "import",
@@ -239,15 +240,15 @@ export class DBPopover {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "animation",
                 "reflect": false
             },
             "open": {
-                "type": "boolean",
+                "type": "any",
+                "attribute": "open",
                 "mutable": false,
                 "complexType": {
                     "original": "DBPopoverProps[\"open\"]",
-                    "resolved": "boolean",
+                    "resolved": "boolean | string",
                     "references": {
                         "DBPopoverProps": {
                             "location": "import",
@@ -264,11 +265,11 @@ export class DBPopover {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "open",
                 "reflect": false
             },
             "delay": {
                 "type": "string",
+                "attribute": "delay",
                 "mutable": false,
                 "complexType": {
                     "original": "DBPopoverProps[\"delay\"]",
@@ -289,11 +290,11 @@ export class DBPopover {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "delay",
                 "reflect": false
             },
             "width": {
                 "type": "string",
+                "attribute": "width",
                 "mutable": false,
                 "complexType": {
                     "original": "DBPopoverProps[\"width\"]",
@@ -314,11 +315,11 @@ export class DBPopover {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "width",
                 "reflect": false
             },
             "placement": {
                 "type": "string",
+                "attribute": "placement",
                 "mutable": false,
                 "complexType": {
                     "original": "DBPopoverProps[\"placement\"]",
@@ -339,7 +340,6 @@ export class DBPopover {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "placement",
                 "reflect": false
             }
         };

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

@@ -1 +1 @@
-{"version":3,"file":"popover.js","sourceRoot":"","sources":["../../../src/components/popover/popover.tsx"],"names":[],"mappings":"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","sourcesContent":["import { DBPopoverProps, DBPopoverState } from \"./model\";\nimport { cls, getBooleanAsString, handleDataOutside } from \"../../utils\";\n\nimport { Component, h, Fragment, Watch, Prop, State } from \"@stencil/core\";\n\n\n/**\n * @slot children - This is a default/unnamed slot\n * @slot trigger - TODO: Add description for slotTrigger\n */\n @Component({\n  tag: \"db-popover\",\n})\nexport class DBPopover {\n  private _ref!: HTMLDivElement | null;\n  @Prop() id: DBPopoverProps[\"id\"];\n  @Prop({attribute: \"classname\"}) className: DBPopoverProps[\"className\"];\n  @Prop() spacing: DBPopoverProps[\"spacing\"];\n  @Prop() gap: DBPopoverProps[\"gap\"];\n  @Prop() animation: DBPopoverProps[\"animation\"];\n  @Prop() open: DBPopoverProps[\"open\"];\n  @Prop() delay: DBPopoverProps[\"delay\"];\n  @Prop() width: DBPopoverProps[\"width\"];\n  @Prop() placement: DBPopoverProps[\"placement\"];\n\n  @State() initialized = false;\n  @State() isExpanded = false;\n\n  handleAutoPlacement() {\n    this.isExpanded = true;\n    if (!this._ref) return;\n    const article = this._ref.querySelector(\"article\");\n    if (!article) return;\n    handleDataOutside(article);\n  }\n  handleLeave(event: any) {\n    const element = event.target as HTMLElement;\n    const parent = element.parentNode;\n    if (\n      !parent ||\n      (element.parentNode.querySelector(\":focus\") !== element &&\n        element.parentNode.querySelector(\":focus-within\") !== element &&\n        element.parentNode.querySelector(\":hover\") !== element)\n    ) {\n      this.isExpanded = false;\n    }\n  }\n  getTrigger() {\n    if (this._ref) {\n      const children: Element[] = Array.from(this._ref.children);\n      if (children.length >= 2) {\n        const firstChild = children[0];\n        if (firstChild.tagName.includes(\"-\")) {\n          // this is a workaround for custom angular components\n          return firstChild.children?.length > 0\n            ? firstChild.children[0]\n            : null;\n        } else {\n          return firstChild;\n        }\n      }\n    }\n    return null;\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  watch0Fn() {\n    if (this._ref && this.initialized) {\n      const child = this.getTrigger();\n      if (child) {\n        child.ariaHasPopup = \"true\";\n      }\n      this.initialized = false;\n    }\n  }\n\n  @Watch(\"_ref\")\n  @Watch(\"initialized\")\n  watch0() {\n    this.watch0Fn();\n  }\n\n  watch1Fn() {\n    if (this._ref) {\n      const child = this.getTrigger();\n      if (child) {\n        child.ariaExpanded = Boolean(this.isExpanded).toString();\n      }\n    }\n  }\n\n  @Watch(\"_ref\")\n  @Watch(\"isExpanded\")\n  watch1() {\n    this.watch1Fn();\n  }\n\n  componentDidLoad() {\n    this.enableAttributePassing(this._ref, \"db-popover\");\n    this.initialized = true;\n    this.watch0Fn();\n    this.watch1Fn();\n  }\n\n  render() {\n    return (\n      <div\n        class={cls(\"db-popover\", this.className)}\n        ref={(el: any) => {\n          this._ref = el;\n        }}\n        id={this.id}\n        onFocus={() => this.handleAutoPlacement()}\n        onBlur={(event) => this.handleLeave(event)}\n        onMouseEnter={() => this.handleAutoPlacement()}\n        onMouseLeave={(event) => this.handleLeave(event)}\n      >\n        <slot name=\"trigger\"></slot>\n        <article\n          class=\"db-popover-content\"\n          data-spacing={this.spacing}\n          data-gap={getBooleanAsString(this.gap)}\n          data-animation={getBooleanAsString(this.animation ?? true)}\n          data-open={this.open}\n          data-delay={this.delay}\n          data-width={this.width}\n          data-placement={this.placement}\n        >\n          <slot></slot>\n        </article>\n      </div>\n    );\n  }\n}\n"]}
+{"version":3,"file":"popover.js","sourceRoot":"","sources":["../../../src/components/popover/popover.tsx"],"names":[],"mappings":"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","sourcesContent":["import { DBPopoverProps, DBPopoverState } from \"./model\";\nimport { cls, getBooleanAsString, handleDataOutside } from \"../../utils\";\n\nimport { Component, h, Fragment, Watch, Prop, State } from \"@stencil/core\";\n\n\n/**\n * @slot children - This is a default/unnamed slot\n * @slot trigger - TODO: Add description for slotTrigger\n */\n @Component({\n  tag: \"db-popover\",\n})\nexport class DBPopover {\n  private _ref!: HTMLDivElement | any;\n  @Prop() id: DBPopoverProps[\"id\"];\n  @Prop({attribute: \"classname\"}) className: DBPopoverProps[\"className\"];\n  @Prop() spacing: DBPopoverProps[\"spacing\"];\n  @Prop() gap: DBPopoverProps[\"gap\"];\n  @Prop() animation: DBPopoverProps[\"animation\"];\n  @Prop() open: DBPopoverProps[\"open\"];\n  @Prop() delay: DBPopoverProps[\"delay\"];\n  @Prop() width: DBPopoverProps[\"width\"];\n  @Prop() placement: DBPopoverProps[\"placement\"];\n  @State() initialized = false;\n  @State() isExpanded = false;\n\n  handleAutoPlacement() {\n    this.isExpanded = true;\n    if (!this._ref) return;\n    const article = this._ref.querySelector(\"article\");\n    if (!article) return;\n    handleDataOutside(article);\n  }\n  handleLeave(event: any) {\n    const element = event.target as HTMLElement;\n    const parent = element.parentNode;\n    if (\n      !parent ||\n      (element.parentNode.querySelector(\":focus\") !== element &&\n        element.parentNode.querySelector(\":focus-within\") !== element &&\n        element.parentNode.querySelector(\":hover\") !== element)\n    ) {\n      this.isExpanded = false;\n    }\n  }\n  getTrigger() {\n    if (this._ref) {\n      const children: Element[] = Array.from(this._ref.children);\n      if (children.length >= 2) {\n        const firstChild = children[0];\n        if (firstChild.tagName.includes(\"-\")) {\n          // this is a workaround for custom angular components\n          return firstChild.children?.length > 0\n            ? firstChild.children[0]\n            : null;\n        } else {\n          return firstChild;\n        }\n      }\n    }\n    return null;\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  watch0Fn() {\n    if (this._ref && this.initialized) {\n      const child = this.getTrigger();\n      if (child) {\n        child.ariaHasPopup = \"true\";\n      }\n      this.initialized = false;\n    }\n  }\n\n  @Watch(\"_ref\")\n  @Watch(\"initialized\")\n  watch0() {\n    this.watch0Fn();\n  }\n\n  watch1Fn() {\n    if (this._ref) {\n      const child = this.getTrigger();\n      if (child) {\n        child.ariaExpanded = Boolean(this.isExpanded).toString();\n      }\n    }\n  }\n\n  @Watch(\"_ref\")\n  @Watch(\"isExpanded\")\n  watch1() {\n    this.watch1Fn();\n  }\n\n  componentDidLoad() {\n    this.enableAttributePassing(this._ref, \"db-popover\");\n    this.initialized = true;\n    this.watch0Fn();\n    this.watch1Fn();\n  }\n\n  render() {\n    return (\n      <div\n        class={cls(\"db-popover\", this.className)}\n        ref={(el: any) => {\n          this._ref = el;\n        }}\n        id={this.id}\n        onFocus={() => this.handleAutoPlacement()}\n        onBlur={(event) => this.handleLeave(event)}\n        onMouseEnter={() => this.handleAutoPlacement()}\n        onMouseLeave={(event) => this.handleLeave(event)}\n      >\n        <slot name=\"trigger\"></slot>\n        <article\n          class=\"db-popover-content\"\n          data-spacing={this.spacing}\n          data-gap={getBooleanAsString(this.gap)}\n          data-animation={getBooleanAsString(this.animation ?? true)}\n          data-open={getBooleanAsString(this.open)}\n          data-delay={this.delay}\n          data-width={this.width}\n          data-placement={this.placement}\n        >\n          <slot></slot>\n        </article>\n      </div>\n    );\n  }\n}\n"]}