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

package/dist/collection/components/section/section.js

@@ -0,0 +1,164 @@
+import { cls, uuid } from "../../utils";
+import { DEFAULT_ID } from "../../shared/constants";
+import { h } from "@stencil/core";
+/**
+ * @slot children - This is a default/unnamed slot
+
+ */
+export class DBSection {
+    constructor() {
+        this._id = DEFAULT_ID;
+    }
+    /**
+     * 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-section");
+        this._id = this.id || "section-" + uuid();
+    }
+    render() {
+        return (h("section", { key: 'e7968521b6967bc9832d0953f3adf5c0f12263c4', class: cls("db-section", this.className), ref: (el) => {
+                this._ref = el;
+            }, id: this._id, "data-spacing": this.spacing || "medium", "data-width": this.width }, h("slot", { key: 'a87c12f1d2379a3e6a41b7db1d1e5ba3dc64d60c' })));
+    }
+    static get is() { return "db-section"; }
+    static get properties() {
+        return {
+            "id": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "DBSectionProps[\"id\"]",
+                    "resolved": "string",
+                    "references": {
+                        "DBSectionProps": {
+                            "location": "import",
+                            "path": "./model",
+                            "id": "src/components/section/model.ts::DBSectionProps"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "id",
+                "reflect": false
+            },
+            "className": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "DBSectionProps[\"className\"]",
+                    "resolved": "string",
+                    "references": {
+                        "DBSectionProps": {
+                            "location": "import",
+                            "path": "./model",
+                            "id": "src/components/section/model.ts::DBSectionProps"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "classname",
+                "reflect": false
+            },
+            "spacing": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "DBSectionProps[\"spacing\"]",
+                    "resolved": "\"large\" | \"medium\" | \"none\" | \"small\"",
+                    "references": {
+                        "DBSectionProps": {
+                            "location": "import",
+                            "path": "./model",
+                            "id": "src/components/section/model.ts::DBSectionProps"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "spacing",
+                "reflect": false
+            },
+            "width": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "DBSectionProps[\"width\"]",
+                    "resolved": "\"full\" | \"large\" | \"medium\" | \"small\"",
+                    "references": {
+                        "DBSectionProps": {
+                            "location": "import",
+                            "path": "./model",
+                            "id": "src/components/section/model.ts::DBSectionProps"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "width",
+                "reflect": false
+            }
+        };
+    }
+    static get states() {
+        return {
+            "_id": {}
+        };
+    }
+}
+//# sourceMappingURL=section.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"section.js","sourceRoot":"","sources":["../../../src/components/section/section.tsx"],"names":[],"mappings":"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","sourcesContent":["import { DBSectionProps, DBSectionState } from \"./model\";\nimport { cls, uuid } from \"../../utils\";\nimport { DEFAULT_ID } from \"../../shared/constants\";\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-section\",\n})\nexport class DBSection {\n  private _ref!: HTMLDivElement | null;\n  @Prop() id: DBSectionProps[\"id\"];\n  @Prop({attribute: \"classname\"}) className: DBSectionProps[\"className\"];\n  @Prop() spacing: DBSectionProps[\"spacing\"];\n  @Prop() width: DBSectionProps[\"width\"];\n\n  @State() _id = DEFAULT_ID;\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-section\");\n    this._id = this.id || \"section-\" + uuid();\n  }\n\n  render() {\n    return (\n      <section\n        class={cls(\"db-section\", this.className)}\n        ref={(el: any) => {\n          this._ref = el;\n        }}\n        id={this._id}\n        data-spacing={this.spacing || \"medium\"}\n        data-width={this.width}\n      >\n        <slot></slot>\n      </section>\n    );\n  }\n}\n"]}

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

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

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

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

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"model.js","sourceRoot":"","sources":["../../../src/components/select/model.ts"],"names":[],"mappings":"","sourcesContent":["import { ChangeEventProps, ChangeEventState, ClickEventProps, ClickEventState, FocusEventProps, FocusEventState, FormMessageProps, FormProps, FormState, GlobalProps, GlobalState, IconProps, InitializedState, InputEventProps, InputEventState, ShowIconProps } from '../../shared/model';\nexport type DBSelectDefaultProps = {\n  /**\n   * The description attribute will add a paragraph below the select.\n   */\n  description?: string;\n\n  /**\n   * If you don't/can't use children/slots you can pass in the options as an array.\n   */\n  options?: DBSelectOptionType[];\n};\nexport type DBSelectOptionType = {\n  /**\n   * Identifier for option\n   */\n  id?: string;\n\n  /**\n   * Disables this option\n   */\n  disabled?: boolean;\n\n  /**\n   * Selects this option\n   */\n  selected?: boolean;\n\n  /**\n   * If the value is different from the label you want to show to the user.\n   */\n  label?: string;\n\n  /**\n   * If you want to use optgroup you can nest options here.\n   */\n  options?: DBSelectOptionType[];\n\n  /**\n   * The main value you select, will be shown as default label if no label is set.\n   */\n  value: string | string[] | number;\n};\nexport type DBSelectProps = DBSelectDefaultProps & GlobalProps & ClickEventProps<HTMLSelectElement> & ChangeEventProps<HTMLSelectElement> & FocusEventProps<HTMLSelectElement> & InputEventProps<HTMLSelectElement> & FormProps & IconProps & FormMessageProps & ShowIconProps;\nexport type DBSelectDefaultState = {\n  _placeholderId: string;\n  getOptionLabel: (option: DBSelectOptionType) => string;\n};\nexport type DBSelectState = DBSelectDefaultState & GlobalState & ClickEventState<HTMLSelectElement> & ChangeEventState<HTMLSelectElement> & FocusEventState<HTMLSelectElement> & InputEventState<HTMLSelectElement> & FormState & InitializedState"]}