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

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

@@ -0,0 +1 @@
+{"version":3,"file":"tabs.js","sourceRoot":"","sources":["../../../src/components/tabs/tabs.tsx"],"names":[],"mappings":"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","sourcesContent":["import { DBSimpleTabProps, DBTabsProps, DBTabsState } from \"./model\";\nimport { cls, uuid } from \"../../utils\";\nimport { DBButton } from \"../button/button\";\nimport { DBTabList } from \"../tab-list/tab-list\";\nimport { DBTabItem } from \"../tab-item/tab-item\";\nimport { DBTabPanel } from \"../tab-panel/tab-panel\";\n\nimport { Component, h, Fragment, Prop, State } from \"@stencil/core\";\n\n\n/**\n * @slot children - This is a default/unnamed slot\n\n */\n @Component({\n  tag: \"db-tabs\",\n})\nexport class DBTabs {\n  private _ref!: HTMLDivElement | null;\n  @Prop() id: DBTabsProps[\"id\"];\n  @Prop() name: DBTabsProps[\"name\"];\n  @Prop() arrowScrollDistance: DBTabsProps[\"arrowScrollDistance\"];\n  @Prop() orientation: DBTabsProps[\"orientation\"];\n  @Prop() behavior: DBTabsProps[\"behavior\"];\n  @Prop() initialSelectedMode: DBTabsProps[\"initialSelectedMode\"];\n  @Prop() initialSelectedIndex: DBTabsProps[\"initialSelectedIndex\"];\n  @Prop({attribute: \"classname\"}) className: DBTabsProps[\"className\"];\n  @Prop() alignment: DBTabsProps[\"alignment\"];\n  @Prop() width: DBTabsProps[\"width\"];\n  @Prop() tabs: DBTabsProps[\"tabs\"];\n\n  @State() _id = \"tabs-\" + uuid();\n  @State() _name = \"\";\n  @State() initialized = false;\n  @State() showScrollLeft = false;\n  @State() showScrollRight = false;\n  @State() scrollContainer = null;\n\n  convertTabs(tabs: unknown[] | string | undefined) {\n    try {\n      if (typeof tabs === \"string\") {\n        return JSON.parse(tabs);\n      }\n      return tabs as DBSimpleTabProps[];\n    } catch (error) {\n      console.error(error);\n    }\n    return [];\n  }\n  evaluateScrollButtons(tList: Element) {\n    const needsScroll = tList.scrollWidth > tList.clientWidth;\n    this.showScrollLeft = needsScroll && tList.scrollLeft > 1;\n    this.showScrollRight =\n      needsScroll && tList.scrollLeft < tList.scrollWidth - tList.clientWidth;\n  }\n  scroll(left?: boolean) {\n    let step = this.arrowScrollDistance || 100;\n    if (left) {\n      step *= -1;\n    }\n    this.scrollContainer?.scrollBy({\n      top: 0,\n      left: step,\n      behavior: \"smooth\",\n    });\n  }\n  initTabList() {\n    if (this._ref) {\n      const tabList = this._ref.querySelector(\".db-tab-list\");\n      if (tabList) {\n        const container: HTMLElement | null =\n          tabList.querySelector('[role=\"tablist\"]');\n        if (container) {\n          container.setAttribute(\n            \"aria-orientation\",\n            this.orientation || \"horizontal\"\n          );\n          if (this.behavior === \"arrows\") {\n            this.scrollContainer = container;\n            this.evaluateScrollButtons(container);\n            container.addEventListener(\"scroll\", () => {\n              this.evaluateScrollButtons(container);\n            });\n          }\n        }\n      }\n    }\n  }\n  initTabs(init?: boolean) {\n    if (this._ref) {\n      const tabItems = Array.from<Element>(\n        this._ref.getElementsByClassName(\"db-tab-item\")\n      );\n      for (const tabItem of tabItems) {\n        const index: number = tabItems.indexOf(tabItem);\n        const label = tabItem.querySelector(\"label\");\n        const input = tabItem.querySelector(\"input\");\n        if (input && label) {\n          if (!input.id) {\n            const tabId = `${this._name}-tab-${index}`;\n            label.setAttribute(\"for\", tabId);\n            input.setAttribute(\n              \"aria-controls\",\n              `${this._name}-tab-panel-${index}`\n            );\n            input.id = tabId;\n            input.setAttribute(\"name\", this._name);\n          }\n          if (init) {\n            // Auto select\n            const autoSelect =\n              !this.initialSelectedMode || this.initialSelectedMode === \"auto\";\n            const shouldAutoSelect =\n              (this.initialSelectedIndex == null && index === 0) ||\n              this.initialSelectedIndex === index;\n            if (autoSelect && shouldAutoSelect) {\n              input.click();\n            }\n          }\n        }\n      }\n      const tabPanels = Array.from<Element>(\n        this._ref.querySelectorAll(\n          \":is(:scope > .db-tab-panel, :scope > db-tab-panel > .db-tab-panel)\"\n        )\n      );\n      for (const panel of tabPanels) {\n        if (panel.id) continue;\n        const index: number = tabPanels.indexOf(panel);\n        panel.id = `${this._name}-tab-panel-${index}`;\n        panel.setAttribute(\"aria-labelledby\", `${this._name}-tab-${index}`);\n      }\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-tabs\");\n    this._id = this.id || this._id;\n    this._name = `tabs-${this.name || uuid()}`;\n    this.initialized = true;\n  }\n\n  componentDidUpdate() {\n    if (this._ref && this.initialized) {\n      this.initTabList();\n      this.initTabs(true);\n      const tabList = this._ref.querySelector(\".db-tab-list\");\n      if (tabList) {\n        const observer = new MutationObserver((mutations) => {\n          mutations.forEach((mutation) => {\n            if (mutation.removedNodes.length || mutation.addedNodes.length) {\n              this.initTabList();\n              this.initTabs();\n            }\n          });\n        });\n        observer.observe(tabList, {\n          childList: true,\n          subtree: true,\n        });\n      }\n      this.initialized = false;\n    }\n  }\n\n  render() {\n    return (\n      <div\n        class={cls(\"db-tabs\", this.className)}\n        ref={(el: any) => {\n          this._ref = el;\n        }}\n        id={this._id}\n        data-orientation={this.orientation}\n        data-scroll-behavior={this.behavior}\n        data-alignment={this.alignment ?? \"start\"}\n        data-width={this.width ?? \"auto\"}\n      >\n        {this.showScrollLeft ? (\n          <db-button\n            class=\"tabs-scroll-left\"\n            variant=\"ghost\"\n            icon=\"chevron_left\"\n            noText={true}\n            onClick={() => this.scroll(true)}\n          >\n            Scroll left\n          </db-button>\n        ) : null}\n        {this.tabs ? (\n          <Fragment>\n            <db-tab-list>\n              {this.convertTabs(this.tabs)?.map((tab, index) => (\n                <db-tab-item\n                  key={this.name + \"tab-item\" + index}\n                  active={tab.active}\n                  label={tab.label}\n                  iconAfter={tab.iconAfter}\n                  icon={tab.icon}\n                  noText={tab.noText}\n                ></db-tab-item>\n              ))}\n            </db-tab-list>\n            {this.convertTabs(this.tabs)?.map((tab, index) => (\n              <db-tab-panel\n                key={this.name + \"tab-panel\" + index}\n                content={tab.content}\n              >\n                {tab.children}\n              </db-tab-panel>\n            ))}\n          </Fragment>\n        ) : null}\n        {this.showScrollRight ? (\n          <db-button\n            class=\"tabs-scroll-right\"\n            variant=\"ghost\"\n            icon=\"chevron_right\"\n            noText={true}\n            onClick={() => this.scroll()}\n          >\n            Scroll right\n          </db-button>\n        ) : null}\n        <slot></slot>\n      </div>\n    );\n  }\n}\n"]}

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

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

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

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

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

@@ -0,0 +1,2 @@
+export const TagBehaviorList = ['static', 'removable'];
+//# sourceMappingURL=model.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"model.js","sourceRoot":"","sources":["../../../src/components/tag/model.ts"],"names":[],"mappings":"AACA,MAAM,CAAC,MAAM,eAAe,GAAI,CAAC,QAAQ,EAAE,WAAW,CAAW,CAAC","sourcesContent":["import { ContentSlotProps, GlobalProps, GlobalState, IconProps, InitializedState, OverflowProps, SemanticProps, ShowIconProps, TagEmphasisProps } from '../../shared/model';\nexport const TagBehaviorList = (['static', 'removable'] as const);\nexport type TagBehaviorType = (typeof TagBehaviorList)[number];\nexport type DBTagDefaultProps = {\n  /**\n   *\tDefines the behavior of the component:\n   *\t- static: default behavior without remove button\n   *  - removable: add a remove button at the end of the tag\n   */\n  behavior?: TagBehaviorType | string;\n\n  /**\n   * @deprecated Disable tag\n   */\n  disabled?: boolean;\n  /**\n   * Define the text next to the icon specified via the icon Property to get hidden.\n   */\n  noText?: boolean;\n  /**\n   * If \"removeButton\" attribute is set this function will be called when user clicks cancel button inside the tag.\n   */\n  onRemove?: () => void;\n  /**\n   * The removeButton attribute shows the cancel button.\n   */\n  removeButton?: string;\n  /**\n   * Enable/Disable icon for checkbox/radio inside tag.\n   */\n  showCheckState?: boolean;\n  /**\n   * Alternative for children to set content as property.\n   */\n  text?: string;\n\n  /**\n   * If \"interactive\" is set to true, you can pass a value to the underlying checkbox or radio input.\n   */\n  value?: string;\n};\nexport type DBTagProps = DBTagDefaultProps & GlobalProps & IconProps & SemanticProps & OverflowProps & TagEmphasisProps & ShowIconProps & ContentSlotProps;\nexport type DBTagDefaultState = {\n  getRemoveButtonText: () => string;\n  handleRemove: () => void;\n};\nexport type DBTagState = DBTagDefaultState & GlobalState & InitializedState"]}

package/dist/collection/components/tag/tag.js

@@ -0,0 +1,430 @@
+import { cls, getBooleanAsString, getHideProp } from "../../utils";
+import { h } from "@stencil/core";
+/**
+ * @slot children - This is a default/unnamed slot
+ * @slot content - TODO: Add description for slotContent
+ */
+export class DBTag {
+    constructor() {
+        this.initialized = false;
+    }
+    handleRemove() {
+        if (this.onRemove) {
+            this.onRemove.emit();
+        }
+    }
+    getRemoveButtonText() {
+        if (this.removeButton) {
+            return this.removeButton;
+        }
+        // TODO: We should think this through again, if we would really like to have default and especially english, instead of german labels in here
+        return "Remove tag";
+    }
+    /**
+     * 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-tag");
+    }
+    componentDidUpdate() {
+        var _a, _b;
+        if (this.initialized && this._ref && this.disabled !== undefined) {
+            const button = (_a = this._ref) === null || _a === void 0 ? void 0 : _a.querySelector("button:not(.db-tab-remove-button)");
+            const input = (_b = this._ref) === null || _b === void 0 ? void 0 : _b.querySelector("input");
+            for (const element of [button, input]) {
+                if (element) {
+                    element.disabled = this.disabled;
+                }
+            }
+        }
+    }
+    render() {
+        var _a;
+        return (h("div", { key: 'e6f18da64641446432bbce41af6471d9bb752ec7', class: cls("db-tag", this.className), ref: (el) => {
+                this._ref = el;
+            }, id: this.id, "data-disabled": getBooleanAsString(this.disabled), "data-semantic": this.semantic, "data-emphasis": this.emphasis, "data-icon": this.icon, "data-show-check-state": getBooleanAsString((_a = this.showCheckState) !== null && _a !== void 0 ? _a : true), "data-hide-icon": getHideProp(this.showIcon), "data-no-text": getBooleanAsString(this.noText), "data-overflow": getBooleanAsString(this.overflow) }, h("slot", { key: 'eae0086cdb3d8b98c1656f6f55fbfa0e96621775', name: "content" }), h("slot", { key: '02475fab45bbab8604543163eec85e6e370e122a' }), this.text ? this.text : null, this.behavior === "removable" ? (h("button", { class: "db-button db-tab-remove-button", "data-icon": "cross", "data-size": "small", "data-no-text": "true", "data-variant": "ghost", onClick: () => this.handleRemove(), title: this.getRemoveButtonText() }, this.getRemoveButtonText())) : null));
+    }
+    static get is() { return "db-tag"; }
+    static get properties() {
+        return {
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "DBTagProps[\"disabled\"]",
+                    "resolved": "boolean",
+                    "references": {
+                        "DBTagProps": {
+                            "location": "import",
+                            "path": "./model",
+                            "id": "src/components/tag/model.ts::DBTagProps"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "disabled",
+                "reflect": false
+            },
+            "removeButton": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "DBTagProps[\"removeButton\"]",
+                    "resolved": "string",
+                    "references": {
+                        "DBTagProps": {
+                            "location": "import",
+                            "path": "./model",
+                            "id": "src/components/tag/model.ts::DBTagProps"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "remove-button",
+                "reflect": false
+            },
+            "id": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "DBTagProps[\"id\"]",
+                    "resolved": "string",
+                    "references": {
+                        "DBTagProps": {
+                            "location": "import",
+                            "path": "./model",
+                            "id": "src/components/tag/model.ts::DBTagProps"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "id",
+                "reflect": false
+            },
+            "className": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "DBTagProps[\"className\"]",
+                    "resolved": "string",
+                    "references": {
+                        "DBTagProps": {
+                            "location": "import",
+                            "path": "./model",
+                            "id": "src/components/tag/model.ts::DBTagProps"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "classname",
+                "reflect": false
+            },
+            "semantic": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "DBTagProps[\"semantic\"]",
+                    "resolved": "\"adaptive\" | \"critical\" | \"informational\" | \"neutral\" | \"successful\" | \"warning\"",
+                    "references": {
+                        "DBTagProps": {
+                            "location": "import",
+                            "path": "./model",
+                            "id": "src/components/tag/model.ts::DBTagProps"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "semantic",
+                "reflect": false
+            },
+            "emphasis": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "DBTagProps[\"emphasis\"]",
+                    "resolved": "\"origin\" | \"strong\" | \"weak\"",
+                    "references": {
+                        "DBTagProps": {
+                            "location": "import",
+                            "path": "./model",
+                            "id": "src/components/tag/model.ts::DBTagProps"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "emphasis",
+                "reflect": false
+            },
+            "icon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "DBTagProps[\"icon\"]",
+                    "resolved": "BaseIconTypes | LooseAutocomplete",
+                    "references": {
+                        "DBTagProps": {
+                            "location": "import",
+                            "path": "./model",
+                            "id": "src/components/tag/model.ts::DBTagProps"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "icon",
+                "reflect": false
+            },
+            "showCheckState": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "DBTagProps[\"showCheckState\"]",
+                    "resolved": "boolean",
+                    "references": {
+                        "DBTagProps": {
+                            "location": "import",
+                            "path": "./model",
+                            "id": "src/components/tag/model.ts::DBTagProps"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "show-check-state",
+                "reflect": false
+            },
+            "showIcon": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "DBTagProps[\"showIcon\"]",
+                    "resolved": "boolean",
+                    "references": {
+                        "DBTagProps": {
+                            "location": "import",
+                            "path": "./model",
+                            "id": "src/components/tag/model.ts::DBTagProps"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "show-icon",
+                "reflect": false
+            },
+            "noText": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "DBTagProps[\"noText\"]",
+                    "resolved": "boolean",
+                    "references": {
+                        "DBTagProps": {
+                            "location": "import",
+                            "path": "./model",
+                            "id": "src/components/tag/model.ts::DBTagProps"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "no-text",
+                "reflect": false
+            },
+            "overflow": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "DBTagProps[\"overflow\"]",
+                    "resolved": "boolean",
+                    "references": {
+                        "DBTagProps": {
+                            "location": "import",
+                            "path": "./model",
+                            "id": "src/components/tag/model.ts::DBTagProps"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "overflow",
+                "reflect": false
+            },
+            "text": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "DBTagProps[\"text\"]",
+                    "resolved": "string",
+                    "references": {
+                        "DBTagProps": {
+                            "location": "import",
+                            "path": "./model",
+                            "id": "src/components/tag/model.ts::DBTagProps"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "text",
+                "reflect": false
+            },
+            "behavior": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "DBTagProps[\"behavior\"]",
+                    "resolved": "string",
+                    "references": {
+                        "DBTagProps": {
+                            "location": "import",
+                            "path": "./model",
+                            "id": "src/components/tag/model.ts::DBTagProps"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "behavior",
+                "reflect": false
+            }
+        };
+    }
+    static get states() {
+        return {
+            "initialized": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "onRemove",
+                "name": "onRemove",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
+            }];
+    }
+}
+//# sourceMappingURL=tag.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tag.js","sourceRoot":"","sources":["../../../src/components/tag/tag.tsx"],"names":[],"mappings":"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","sourcesContent":["import { DBTagProps, DBTagState } from \"./model\";\nimport { cls, getBooleanAsString, getHideProp } from \"../../utils\";\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 content - TODO: Add description for slotContent\n */\n @Component({\n  tag: \"db-tag\",\n})\nexport class DBTag {\n  private _ref!: HTMLDivElement | null;\n  @Prop() disabled: DBTagProps[\"disabled\"];\n  @Event() onRemove: any;\n  @Prop() removeButton: DBTagProps[\"removeButton\"];\n  @Prop() id: DBTagProps[\"id\"];\n  @Prop({attribute: \"classname\"}) className: DBTagProps[\"className\"];\n  @Prop() semantic: DBTagProps[\"semantic\"];\n  @Prop() emphasis: DBTagProps[\"emphasis\"];\n  @Prop() icon: DBTagProps[\"icon\"];\n  @Prop() showCheckState: DBTagProps[\"showCheckState\"];\n  @Prop() showIcon: DBTagProps[\"showIcon\"];\n  @Prop() noText: DBTagProps[\"noText\"];\n  @Prop() overflow: DBTagProps[\"overflow\"];\n\n  @Prop() text: DBTagProps[\"text\"];\n  @Prop() behavior: DBTagProps[\"behavior\"];\n  @State() initialized = false;\n\n  handleRemove() {\n    if (this.onRemove) {\n      this.onRemove.emit();\n    }\n  }\n  getRemoveButtonText() {\n    if (this.removeButton) {\n      return this.removeButton;\n    }\n\n    // TODO: We should think this through again, if we would really like to have default and especially english, instead of german labels in here\n    return \"Remove tag\";\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-tag\");\n  }\n\n  componentDidUpdate() {\n    if (this.initialized && this._ref && this.disabled !== undefined) {\n      const button: HTMLButtonElement | null = this._ref?.querySelector(\n        \"button:not(.db-tab-remove-button)\"\n      );\n      const input: HTMLInputElement | null = this._ref?.querySelector(\"input\");\n      for (const element of [button, input]) {\n        if (element) {\n          element.disabled = this.disabled;\n        }\n      }\n    }\n  }\n\n  render() {\n    return (\n      <div\n        class={cls(\"db-tag\", this.className)}\n        ref={(el: any) => {\n          this._ref = el;\n        }}\n        id={this.id}\n        data-disabled={getBooleanAsString(this.disabled)}\n        data-semantic={this.semantic}\n        data-emphasis={this.emphasis}\n        data-icon={this.icon}\n        data-show-check-state={getBooleanAsString(this.showCheckState ?? true)}\n        data-hide-icon={getHideProp(this.showIcon)}\n        data-no-text={getBooleanAsString(this.noText)}\n        data-overflow={getBooleanAsString(this.overflow)}\n      >\n        <slot name=\"content\"></slot>\n        <slot></slot>\n        {this.text ? this.text : null}\n        {this.behavior === \"removable\" ? (\n          <button\n            class=\"db-button db-tab-remove-button\"\n            data-icon=\"cross\"\n            data-size=\"small\"\n            data-no-text=\"true\"\n            data-variant=\"ghost\"\n            onClick={() => this.handleRemove()}\n            title={this.getRemoveButtonText()}\n          >\n            {this.getRemoveButtonText()}\n          </button>\n        ) : null}\n      </div>\n    );\n  }\n}\n"]}

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

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

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

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

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

@@ -0,0 +1,3 @@
+export const TextareaResizeList = ['none', 'both', 'horizontal', 'vertical'];
+export const TextareaWrapList = ['hard', 'soft', 'off'];
+//# sourceMappingURL=model.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"model.js","sourceRoot":"","sources":["../../../src/components/textarea/model.ts"],"names":[],"mappings":"AACA,MAAM,CAAC,MAAM,kBAAkB,GAAI,CAAC,MAAM,EAAE,MAAM,EAAE,YAAY,EAAE,UAAU,CAAW,CAAC;AAExF,MAAM,CAAC,MAAM,gBAAgB,GAAI,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,CAAW,CAAC","sourcesContent":["import { ChangeEventProps, ChangeEventState, FocusEventProps, FocusEventState, FormMessageProps, FormProps, FormState, FormTextProps, GlobalProps, GlobalState, InputEventProps, InputEventState } from '../../shared/model';\nexport const TextareaResizeList = (['none', 'both', 'horizontal', 'vertical'] as const);\nexport type TextareaResizeType = (typeof TextareaResizeList)[number];\nexport const TextareaWrapList = (['hard', 'soft', 'off'] as const);\nexport type TextareaWrapType = (typeof TextareaWrapList)[number];\nexport type DBTextareaDefaultProps = {\n  /**\n   * The visible width of the text control, in average character widths. If it is specified, it must be a positive integer\n   */\n  cols?: number;\n  /**\n   * In most browsers, textareas are resizable — you'll notice the drag handle in the right-hand corner, you can control it with this\n   */\n  resize?: TextareaResizeType;\n  /**\n   * The number of visible text lines for the control. If it is specified, it must be a positive integer\n   */\n  rows?: number;\n  /**\n   * Specifies whether the textarea is subject to spell checking by the underlying browser/OS\n   */\n  spellCheck?: boolean;\n\n  /**\n   * Indicates how the control should wrap the value for form submission.\n   */\n  wrap?: TextareaWrapType;\n};\nexport type DBTextareaProps = DBTextareaDefaultProps & ChangeEventProps<HTMLTextAreaElement> & InputEventProps<HTMLTextAreaElement> & FocusEventProps<HTMLTextAreaElement> & FormProps & GlobalProps & FormTextProps & FormMessageProps;\nexport type DBTextareaDefaultState = {};\nexport type DBTextareaState = DBTextareaDefaultState & ChangeEventState<HTMLTextAreaElement> & InputEventState<HTMLTextAreaElement> & FocusEventState<HTMLTextAreaElement> & FormState & GlobalState"]}