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

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

@@ -0,0 +1,480 @@
+import { DEFAULT_CLOSE_BUTTON } from "../../shared/constants";
+import { cls, getHideProp, stringPropVisible } from "../../utils";
+import { h } from "@stencil/core";
+/**
+ * @slot children - This is a default/unnamed slot
+ * @slot image - TODO: Add description for slotImage
+ * @slot link - TODO: Add description for slotLink
+ */
+export class DBNotification {
+    handleClose(event) {
+        if (this.onClose) {
+            this.onClose.emit();
+        }
+    }
+    /**
+     * 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-notification");
+    }
+    render() {
+        var _a;
+        return (h("article", { key: '687caef11f1936276ea751c770a202132d7ff823', class: cls("db-notification", this.className), ref: (el) => {
+                this._ref = el;
+            }, id: this.id, "aria-live": this.ariaLive, "data-semantic": this.semantic, "data-variant": this.variant, "data-icon": this.icon, "data-hide-icon": getHideProp(this.showIcon), "data-link-variant": this.linkVariant }, h("slot", { key: '8b8fe272272196ebf585a0b3166c27fdf8a81c0a', name: "image" }), stringPropVisible(this.headline, this.showHeadline) ? (h("header", null, this.headline)) : null, h("p", { key: '57f127bde56e0ea9ecebf371f2119c4b5b6c0e50' }, this.text ? this.text : h("slot", null)), stringPropVisible(this.timestamp, this.showTimestamp) ? (h("span", null, this.timestamp)) : null, h("slot", { key: 'ab7ddf6617b5df95984d2d7dc21ef6dd517981fc', name: "link" }), this.closeable ? (h("db-button", { icon: "cross", variant: "ghost", size: "small", id: this.closeButtonId, noText: true, onClick: (event) => this.handleClose(event) }, (_a = this.closeButtonText) !== null && _a !== void 0 ? _a : DEFAULT_CLOSE_BUTTON)) : null));
+    }
+    static get is() { return "db-notification"; }
+    static get properties() {
+        return {
+            "id": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "DBNotificationProps[\"id\"]",
+                    "resolved": "string",
+                    "references": {
+                        "DBNotificationProps": {
+                            "location": "import",
+                            "path": "./model",
+                            "id": "src/components/notification/model.ts::DBNotificationProps"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "id",
+                "reflect": false
+            },
+            "className": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "DBNotificationProps[\"className\"]",
+                    "resolved": "string",
+                    "references": {
+                        "DBNotificationProps": {
+                            "location": "import",
+                            "path": "./model",
+                            "id": "src/components/notification/model.ts::DBNotificationProps"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "classname",
+                "reflect": false
+            },
+            "ariaLive": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "DBNotificationProps[\"ariaLive\"]",
+                    "resolved": "\"assertive\" | \"off\" | \"polite\"",
+                    "references": {
+                        "DBNotificationProps": {
+                            "location": "import",
+                            "path": "./model",
+                            "id": "src/components/notification/model.ts::DBNotificationProps"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "aria-live",
+                "reflect": false
+            },
+            "semantic": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "DBNotificationProps[\"semantic\"]",
+                    "resolved": "\"adaptive\" | \"critical\" | \"informational\" | \"neutral\" | \"successful\" | \"warning\"",
+                    "references": {
+                        "DBNotificationProps": {
+                            "location": "import",
+                            "path": "./model",
+                            "id": "src/components/notification/model.ts::DBNotificationProps"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "semantic",
+                "reflect": false
+            },
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "DBNotificationProps[\"variant\"]",
+                    "resolved": "\"docked\" | \"overlay\" | \"standalone\"",
+                    "references": {
+                        "DBNotificationProps": {
+                            "location": "import",
+                            "path": "./model",
+                            "id": "src/components/notification/model.ts::DBNotificationProps"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "variant",
+                "reflect": false
+            },
+            "icon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "DBNotificationProps[\"icon\"]",
+                    "resolved": "BaseIconTypes | LooseAutocomplete",
+                    "references": {
+                        "DBNotificationProps": {
+                            "location": "import",
+                            "path": "./model",
+                            "id": "src/components/notification/model.ts::DBNotificationProps"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "icon",
+                "reflect": false
+            },
+            "showIcon": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "DBNotificationProps[\"showIcon\"]",
+                    "resolved": "boolean",
+                    "references": {
+                        "DBNotificationProps": {
+                            "location": "import",
+                            "path": "./model",
+                            "id": "src/components/notification/model.ts::DBNotificationProps"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "show-icon",
+                "reflect": false
+            },
+            "linkVariant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "DBNotificationProps[\"linkVariant\"]",
+                    "resolved": "\"block\" | \"inline\"",
+                    "references": {
+                        "DBNotificationProps": {
+                            "location": "import",
+                            "path": "./model",
+                            "id": "src/components/notification/model.ts::DBNotificationProps"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "link-variant",
+                "reflect": false
+            },
+            "headline": {
+                "type": "any",
+                "mutable": false,
+                "complexType": {
+                    "original": "DBNotificationProps[\"headline\"]",
+                    "resolved": "any",
+                    "references": {
+                        "DBNotificationProps": {
+                            "location": "import",
+                            "path": "./model",
+                            "id": "src/components/notification/model.ts::DBNotificationProps"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "headline",
+                "reflect": false
+            },
+            "showHeadline": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "DBNotificationProps[\"showHeadline\"]",
+                    "resolved": "boolean",
+                    "references": {
+                        "DBNotificationProps": {
+                            "location": "import",
+                            "path": "./model",
+                            "id": "src/components/notification/model.ts::DBNotificationProps"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "show-headline",
+                "reflect": false
+            },
+            "text": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "DBNotificationProps[\"text\"]",
+                    "resolved": "string",
+                    "references": {
+                        "DBNotificationProps": {
+                            "location": "import",
+                            "path": "./model",
+                            "id": "src/components/notification/model.ts::DBNotificationProps"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "text",
+                "reflect": false
+            },
+            "timestamp": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "DBNotificationProps[\"timestamp\"]",
+                    "resolved": "string",
+                    "references": {
+                        "DBNotificationProps": {
+                            "location": "import",
+                            "path": "./model",
+                            "id": "src/components/notification/model.ts::DBNotificationProps"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "timestamp",
+                "reflect": false
+            },
+            "showTimestamp": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "DBNotificationProps[\"showTimestamp\"]",
+                    "resolved": "boolean",
+                    "references": {
+                        "DBNotificationProps": {
+                            "location": "import",
+                            "path": "./model",
+                            "id": "src/components/notification/model.ts::DBNotificationProps"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "show-timestamp",
+                "reflect": false
+            },
+            "closeable": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "DBNotificationProps[\"closeable\"]",
+                    "resolved": "boolean",
+                    "references": {
+                        "DBNotificationProps": {
+                            "location": "import",
+                            "path": "./model",
+                            "id": "src/components/notification/model.ts::DBNotificationProps"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "closeable",
+                "reflect": false
+            },
+            "closeButtonId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "DBNotificationProps[\"closeButtonId\"]",
+                    "resolved": "string",
+                    "references": {
+                        "DBNotificationProps": {
+                            "location": "import",
+                            "path": "./model",
+                            "id": "src/components/notification/model.ts::DBNotificationProps"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "close-button-id",
+                "reflect": false
+            },
+            "closeButtonText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "DBNotificationProps[\"closeButtonText\"]",
+                    "resolved": "string",
+                    "references": {
+                        "DBNotificationProps": {
+                            "location": "import",
+                            "path": "./model",
+                            "id": "src/components/notification/model.ts::DBNotificationProps"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "close-button-text",
+                "reflect": false
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "onClose",
+                "name": "onClose",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
+            }];
+    }
+}
+//# sourceMappingURL=notification.js.map

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

@@ -0,0 +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"]}

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

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

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

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

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

@@ -0,0 +1,3 @@
+export const PageVariantList = ['auto', 'fixed'];
+export const PageDocumentOverflowList = ['hidden', 'auto'];
+//# sourceMappingURL=model.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"model.js","sourceRoot":"","sources":["../../../src/components/page/model.ts"],"names":[],"mappings":"AACA,MAAM,CAAC,MAAM,eAAe,GAAI,CAAC,MAAM,EAAE,OAAO,CAAW,CAAC;AAE5D,MAAM,CAAC,MAAM,wBAAwB,GAAI,CAAC,QAAQ,EAAE,MAAM,CAAW,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   * 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"]}