xv-webcomponents 0.1.17 → 0.1.18

package/dist/collection/components/xv-table/xv-table.js

@@ -0,0 +1,245 @@
+import { Host, h } from "@stencil/core";
+import { TABLE_COLOR_SCHEMA, TABLE_SIZE } from "./defs";
+export class XvTable {
+    constructor() {
+        /**
+         * Set current color schema type of enum TABLE_COLOR_SCHEMA
+         * Possible options 'zebra'
+         */
+        this.colorSchema = TABLE_COLOR_SCHEMA.DEF;
+        /**
+         * If table is expandable fields
+         */
+        this.expandable = false;
+        /**
+         * Table size
+         * enum TABLE_SIZE
+         */
+        this.size = TABLE_SIZE.MEDIUM;
+        /**
+         * Add checkbox selection to the table
+         */
+        this.selectable = false;
+        this.selectedRows = new Map();
+        this.handleCheckedChange = (e) => {
+            const { name, value, checked } = e.detail;
+            if (checked) {
+                this.selectedRows.set(name, { name, value });
+            }
+            else {
+                this.selectedRows.delete(name);
+            }
+            this.changeSelection.emit(Array.from(this.selectedRows.values()));
+        };
+    }
+    setRowPropsHandler() {
+        const rows = Array
+            .from(this.el.childNodes)
+            .filter((node) => node.nodeType === Node.ELEMENT_NODE &&
+            ((node === null || node === void 0 ? void 0 : node.tagName) === `${this.el.tagName}-ROW` || (node === null || node === void 0 ? void 0 : node.tagName) === `${this.el.tagName}-HEADER-ROW`));
+        let visualIndex = 0;
+        rows.forEach((node, i) => {
+            var _a;
+            const row = node;
+            const isHeaderRow = (node === null || node === void 0 ? void 0 : node.tagName) === `${this.el.tagName}-HEADER-ROW`;
+            if (this.selectable) {
+                let name = row.getAttribute('selection-name');
+                if (!name) {
+                    name = isHeaderRow ? 'header' : `xv-table-row-${i}`;
+                    row.setAttribute('selection-name', name);
+                }
+                if (row.hasAttribute('checked')) {
+                    this.selectedRows.set(name, {
+                        name,
+                        value: (_a = row.getAttribute('value')) !== null && _a !== void 0 ? _a : undefined,
+                    });
+                }
+            }
+            if (isHeaderRow)
+                return;
+            switch (this.colorSchema) {
+                case TABLE_COLOR_SCHEMA.ZEBRA:
+                    const stripe = visualIndex % 2 === 0 ? 'even' : 'odd';
+                    if (row.hasAttribute('expandable') && rows[i + 1]) {
+                        row.setAttribute(stripe, '');
+                    }
+                    else {
+                        visualIndex++;
+                        row.setAttribute(stripe, '');
+                    }
+                    break;
+                default:
+                    row.removeAttribute('odd');
+                    row.removeAttribute('even');
+            }
+        });
+    }
+    render() {
+        return (h(Host, { key: '5d187689ae04f8cf161616defc092b2690831f98', size: this.size, selectable: this.selectable }, (this.el.title || this.description) && (h("div", { key: 'ee66085f185a99c2404d8e398ec356b2e2e5c347', class: "caption" }, this.el.title && h("h5", { key: '652bd665af5fac06bbaecd4aed542246c2a5d002', class: "caption_title" }, this.el.title), this.description && h("p", { key: '650461f500003c3ce70bbaaf24d4764a5c1904f1', class: "caption_description" }, this.description))), h("slot", { key: '7331a48d73167801ccc2d5f8682b62d3656712c3' })));
+    }
+    componentWillLoad() {
+        this.setRowPropsHandler();
+        this.el.addEventListener('checkedChange', this.handleCheckedChange);
+    }
+    disconnectedCallback() {
+        this.el.removeEventListener('checkedChange', this.handleCheckedChange);
+    }
+    static get is() { return "xv-table-v2"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["xv-table.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["xv-table.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "description": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Table caption description"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "description",
+                "reflect": false
+            },
+            "colorSchema": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "TABLE_COLOR_SCHEMA",
+                    "resolved": "TABLE_COLOR_SCHEMA.DEF | TABLE_COLOR_SCHEMA.ZEBRA",
+                    "references": {
+                        "TABLE_COLOR_SCHEMA": {
+                            "location": "import",
+                            "path": "./defs",
+                            "id": "src/components/xv-table/defs.ts::TABLE_COLOR_SCHEMA"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Set current color schema type of enum TABLE_COLOR_SCHEMA\nPossible options 'zebra'"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "color-schema",
+                "reflect": false,
+                "defaultValue": "TABLE_COLOR_SCHEMA.DEF"
+            },
+            "expandable": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If table is expandable fields"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "expandable",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "TABLE_SIZE",
+                    "resolved": "TABLE_SIZE.EXTRA_LARGE | TABLE_SIZE.EXTRA_SMALL | TABLE_SIZE.LARGE | TABLE_SIZE.MEDIUM | TABLE_SIZE.SMALL",
+                    "references": {
+                        "TABLE_SIZE": {
+                            "location": "import",
+                            "path": "./defs",
+                            "id": "src/components/xv-table/defs.ts::TABLE_SIZE"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Table size\nenum TABLE_SIZE"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "size",
+                "reflect": false,
+                "defaultValue": "TABLE_SIZE.MEDIUM"
+            },
+            "selectable": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Add checkbox selection to the table"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "selectable",
+                "reflect": false,
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "selectedRows": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "changeSelection",
+                "name": "changeSelection",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "{ name: string, value?: any }[]",
+                    "resolved": "{ name: string; value?: any; }[]",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "colorSchema",
+                "methodName": "setRowPropsHandler"
+            }];
+    }
+}
+//# sourceMappingURL=xv-table.js.map

package/dist/collection/components/xv-table/xv-table.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"xv-table.js","sourceRoot":"","sources":["../../../src/components/xv-table/xv-table.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, h, Element, Prop, Watch, Event, EventEmitter, State } from '@stencil/core';\nimport { TABLE_COLOR_SCHEMA, TABLE_SIZE, TableSelectionEvent } from './defs';\n\n@Component({\n  tag: 'xv-table-v2',\n  styleUrl: 'xv-table.scss',\n  shadow: true,\n})\nexport class XvTable {\n  @Element() el: HTMLElement;\n  /**\n   * Table caption description\n   */\n  @Prop() description: string;\n  /**\n   * Set current color schema type of enum TABLE_COLOR_SCHEMA\n   * Possible options 'zebra'\n   */\n  @Prop({ attribute: 'color-schema' }) colorSchema: TABLE_COLOR_SCHEMA = TABLE_COLOR_SCHEMA.DEF;\n  /**\n   * If table is expandable fields\n   */\n  @Prop() expandable: boolean = false;\n  /**\n   * Table size\n   * enum TABLE_SIZE\n   */\n  @Prop() size: TABLE_SIZE = TABLE_SIZE.MEDIUM;\n  /**\n   * Add checkbox selection to the table\n   */\n  @Prop() selectable: boolean = false;\n\n  @State() selectedRows = new Map<string, { name: string, value?: string }>();\n\n  @Event() changeSelection: EventEmitter<{ name: string, value?: any }[]>;\n\n  @Watch('colorSchema')\n  setRowPropsHandler() {\n    const rows = Array\n      .from(this.el.childNodes)\n      .filter((node) =>\n        node.nodeType === Node.ELEMENT_NODE &&\n        ((node as any)?.tagName === `${this.el.tagName}-ROW` || (node as any)?.tagName === `${this.el.tagName}-HEADER-ROW`)\n      );\n    let visualIndex = 0;\n\n    rows.forEach((node, i) => {\n      const row = (node as HTMLElement);\n      const isHeaderRow = (node as any)?.tagName === `${this.el.tagName}-HEADER-ROW`;\n\n      if (this.selectable) {\n        let name = row.getAttribute('selection-name');\n\n        if (!name) {\n          name = isHeaderRow ? 'header' : `xv-table-row-${i}`;\n          row.setAttribute('selection-name', name);\n        }\n\n        if (row.hasAttribute('checked')) {\n          this.selectedRows.set(name, {\n            name,\n            value: row.getAttribute('value') ?? undefined,\n          })\n        }\n      }\n\n      if (isHeaderRow) return;\n\n      switch (this.colorSchema) {\n        case TABLE_COLOR_SCHEMA.ZEBRA:\n          const stripe = visualIndex % 2 === 0 ? 'even' : 'odd';\n          if (row.hasAttribute('expandable') && rows[i + 1]) {\n            row.setAttribute(stripe, '');\n          } else {\n            visualIndex++;\n            row.setAttribute(stripe, '');\n          }\n          break;\n        default:\n          row.removeAttribute('odd');\n          row.removeAttribute('even');\n      }\n    });\n  }\n\n  private handleCheckedChange = (e: TableSelectionEvent) => {\n    const { name, value, checked } = e.detail;\n\n    if (checked) {\n      this.selectedRows.set(name, { name, value });\n    } else {\n      this.selectedRows.delete(name);\n    }\n\n    this.changeSelection.emit(Array.from(this.selectedRows.values()));\n  }\n\n    render() {\n    return (\n      <Host size={this.size} selectable={this.selectable}>\n        {(this.el.title || this.description) && (\n          <div class=\"caption\">\n            {this.el.title && <h5 class=\"caption_title\">{this.el.title}</h5>}\n            {this.description && <p class=\"caption_description\">{this.description}</p>}\n          </div>\n        )}\n        <slot></slot>\n      </Host>\n    );\n  }\n\n  componentWillLoad() {\n    this.setRowPropsHandler();\n    this.el.addEventListener('checkedChange', this.handleCheckedChange as any);\n  }\n\n  disconnectedCallback() {\n    this.el.removeEventListener('checkedChange', this.handleCheckedChange as any);\n  }\n}\n"]}

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

@@ -13,7 +13,7 @@ export class XvTag {
         this.closeClick.emit(e);
     }
     render() {
-        return (h(Host, { key: '429e196f85e0b46f65822519d0e363671fd60a77', style: { color: this.color, background: this.bg }, class: `xv-tag ${this.disabled ? 'disabled' : ''} ${this.size}` }, h("div", { key: 'b2b919d599e662e07fad0cc0d2e933926911aea9', class: "xv-tag_content" }, h("slot", { key: '717f8e980099bb813a12342015661e9914cc1330' })), this.closeable && (h("button", { key: '31ea0d38544c9b422fcab3dd92718de0e4005be8', onClick: this.closeHandler.bind(this), class: "xv-tag_close" }))));
+        return (h(Host, { key: '3164ae035733d790ba1fb02040dd8ba5430c960a', style: { color: this.color, background: this.bg }, class: `xv-tag ${this.disabled ? 'disabled' : ''} ${this.size}` }, h("div", { key: '1c540ff9be6a45d89d8a2175bf2603640e43b478', class: "xv-tag_content" }, h("slot", { key: '2d893f03cc168828c932c4995ba2bbb6a649897b' })), this.closeable && (h("button", { key: '459f1f667f3b207fa6f5b24af82e2b5f6470db0d', onClick: this.closeHandler.bind(this), class: "xv-tag_close" }))));
     }
     static get is() { return "xv-tag-v2"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/xv-tooltip/xv-tooltip.js

@@ -9,7 +9,7 @@ export class XvTooltip {
         this.position = 'top';
     }
     render() {
-        return (h(Host, { key: '3896748ac459f1b401b4cd59b5ff163640811dce', tooltip: this.message, class: `xv-tooltip_${this.position}` }, h("slot", { key: '458ac3f69fe0b595af5bfbf16b7b99614a84bb8c' }, h("svg", { key: '32561cbbb87adcd9ef493a81c3edfd7e9c1f71ed', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512", width: 16, height: 16 }, h("path", { key: 'cb38fdc43b099b8fa080bf8a48fb736ff2c2cf80', fill: "currentColor", d: "M256 48a208 208 0 1 1 0 416 208 208 0 1 1 0-416zm0 464A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM216 336c-13.3 0-24 10.7-24 24s10.7 24 24 24l80 0c13.3 0 24-10.7 24-24s-10.7-24-24-24l-8 0 0-88c0-13.3-10.7-24-24-24l-48 0c-13.3 0-24 10.7-24 24s10.7 24 24 24l24 0 0 64-24 0zm40-144a32 32 0 1 0 0-64 32 32 0 1 0 0 64z" })))));
+        return (h(Host, { key: '476077c0607c160c2374a48f00c5ddabd199da03', tooltip: this.message, class: `xv-tooltip_${this.position}` }, h("slot", { key: '9ebaf660c304374fd7eb1802a5e145a7856c7b70' }, h("svg", { key: '196a46d3bf15df204853bc092361538dafcbf9f8', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512", width: 16, height: 16 }, h("path", { key: '042422978eb1dca37c64df75b076fc25f4f0dd87', fill: "currentColor", d: "M256 48a208 208 0 1 1 0 416 208 208 0 1 1 0-416zm0 464A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM216 336c-13.3 0-24 10.7-24 24s10.7 24 24 24l80 0c13.3 0 24-10.7 24-24s-10.7-24-24-24l-8 0 0-88c0-13.3-10.7-24-24-24l-48 0c-13.3 0-24 10.7-24 24s10.7 24 24 24l24 0 0 64-24 0zm40-144a32 32 0 1 0 0-64 32 32 0 1 0 0 64z" })))));
     }
     static get is() { return "xv-tooltip-v2"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/types/enum.js

@@ -0,0 +1,9 @@
+export var SIZE_VAR;
+(function (SIZE_VAR) {
+    SIZE_VAR["XS"] = "XS";
+    SIZE_VAR["SM"] = "sm";
+    SIZE_VAR["MD"] = "md";
+    SIZE_VAR["LG"] = "lg";
+    SIZE_VAR["XL"] = "xl";
+})(SIZE_VAR || (SIZE_VAR = {}));
+//# sourceMappingURL=enum.js.map

package/dist/collection/types/enum.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"enum.js","sourceRoot":"","sources":["../../src/types/enum.ts"],"names":[],"mappings":"AAAA,MAAM,CAAN,IAAY,QAMX;AAND,WAAY,QAAQ;IAClB,qBAAS,CAAA;IACT,qBAAS,CAAA;IACT,qBAAS,CAAA;IACT,qBAAS,CAAA;IACT,qBAAS,CAAA;AACX,CAAC,EANW,QAAQ,KAAR,QAAQ,QAMnB","sourcesContent":["export enum SIZE_VAR {\n  XS = 'XS',\n  SM = 'sm',\n  MD = 'md',\n  LG = 'lg',\n  XL = 'xl',\n}\n"]}

package/dist/collection/utils/utils.js

@@ -4,4 +4,11 @@ export function format(first, middle, last) {
 export function uidGenerator() {
     return "10000000-1000-4000-8000-100000000000".replace(/[018]/g, c => (+c ^ crypto.getRandomValues(new Uint8Array(1))[0] & 15 >> +c / 4).toString(16));
 }
+/**
+ * Walks through the given DOM collection and runs the given callback.
+ * @param a A DOM collection.
+ * @param predicate The callback function.
+ * @param [thisObject] The context object for the given callback function.
+ */
+export const forEach = (a, predicate, thisObject) => Array.prototype.forEach.call(a, predicate, thisObject);
 //# sourceMappingURL=utils.js.map

package/dist/collection/utils/utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../src/utils/utils.ts"],"names":[],"mappings":"AAAA,MAAM,UAAU,MAAM,CAAC,KAAc,EAAE,MAAe,EAAE,IAAa;IACnE,OAAO,CAAC,KAAK,IAAI,EAAE,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,MAAM,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,IAAI,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC;AACjF,CAAC;AAED,MAAM,UAAU,YAAY;IAC1B,OAAO,sCAAsC,CAAC,OAAO,CAAC,QAAQ,EAAE,CAAC,CAAC,EAAE,CAClE,CAAC,CAAC,CAAC,GAAG,MAAM,CAAC,eAAe,CAAC,IAAI,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,EAAE,IAAI,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,QAAQ,CAAC,EAAE,CAAC,CAChF,CAAC;AACJ,CAAC","sourcesContent":["export function format(first?: string, middle?: string, last?: string): string {\n  return (first || '') + (middle ? ` ${middle}` : '') + (last ? ` ${last}` : '');\n}\n\nexport function uidGenerator() {\n  return \"10000000-1000-4000-8000-100000000000\".replace(/[018]/g, c =>\n    (+c ^ crypto.getRandomValues(new Uint8Array(1))[0] & 15 >> +c / 4).toString(16)\n  );\n}\n"]}
+{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../src/utils/utils.ts"],"names":[],"mappings":"AAAA,MAAM,UAAU,MAAM,CAAC,KAAc,EAAE,MAAe,EAAE,IAAa;IACnE,OAAO,CAAC,KAAK,IAAI,EAAE,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,MAAM,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,IAAI,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC;AACjF,CAAC;AAED,MAAM,UAAU,YAAY;IAC1B,OAAO,sCAAsC,CAAC,OAAO,CAAC,QAAQ,EAAE,CAAC,CAAC,EAAE,CAClE,CAAC,CAAC,CAAC,GAAG,MAAM,CAAC,eAAe,CAAC,IAAI,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,EAAE,IAAI,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,QAAQ,CAAC,EAAE,CAAC,CAChF,CAAC;AACJ,CAAC;AAED;;;;;GAKG;AACH,MAAM,CAAC,MAAM,OAAO,GAAG,CACrB,CAA+C,EAC/C,SAAoD,EACpD,UAAgB,EAChB,EAAE,CAAC,KAAK,CAAC,SAAS,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,EAAE,SAAS,EAAE,UAAU,CAAC,CAAC","sourcesContent":["export function format(first?: string, middle?: string, last?: string): string {\n  return (first || '') + (middle ? ` ${middle}` : '') + (last ? ` ${last}` : '');\n}\n\nexport function uidGenerator() {\n  return \"10000000-1000-4000-8000-100000000000\".replace(/[018]/g, c =>\n    (+c ^ crypto.getRandomValues(new Uint8Array(1))[0] & 15 >> +c / 4).toString(16)\n  );\n}\n\n/**\n * Walks through the given DOM collection and runs the given callback.\n * @param a A DOM collection.\n * @param predicate The callback function.\n * @param [thisObject] The context object for the given callback function.\n */\nexport const forEach = (\n  a: NodeListOf<Node> | HTMLCollectionOf<Element>,\n  predicate: (search: Element, index?: number) => void,\n  thisObject?: any\n) => Array.prototype.forEach.call(a, predicate, thisObject);\n"]}

package/dist/esm/{index-60f5a964.js → index-83ab73b7.js}

@@ -1,5 +1,5 @@
 const NAMESPACE = 'xv-webcomponents';
-const BUILD = /* xv-webcomponents */ { allRenderFn: true, appendChildSlotFix: false, asyncLoading: true, asyncQueue: false, attachStyles: true, cloneNodeFix: false, constructableCSS: true, cssAnnotations: true, devTools: false, element: false, event: true, experimentalScopedSlotChanges: false, experimentalSlotFixes: false, formAssociated: false, hasRenderFn: true, hostListener: true, hostListenerTarget: true, hostListenerTargetBody: true, hostListenerTargetDocument: false, hostListenerTargetParent: false, hostListenerTargetWindow: false, hotModuleReplacement: false, hydrateClientSide: false, hydrateServerSide: false, hydratedAttribute: false, hydratedClass: true, hydratedSelectorName: "hydrated", initializeNextTick: false, invisiblePrehydration: true, isDebug: false, isDev: false, isTesting: false, lazyLoad: true, lifecycle: true, lifecycleDOMEvents: false, member: true, method: true, mode: false, modernPropertyDecls: false, observeAttribute: true, profile: false, prop: true, propBoolean: true, propMutable: true, propNumber: true, propString: true, reflect: false, scoped: false, scopedSlotTextContentFix: false, scriptDataOpts: false, shadowDelegatesFocus: false, shadowDom: true, slot: true, slotChildNodesFix: false, slotRelocation: false, state: true, style: true, svg: true, taskQueue: true, transformTagName: false, updatable: true, vdomAttribute: true, vdomClass: true, vdomFunctional: false, vdomKey: true, vdomListener: true, vdomPropOrAttr: true, vdomRef: false, vdomRender: true, vdomStyle: true, vdomText: true, vdomXlink: false, watchCallback: true };
+const BUILD = /* xv-webcomponents */ { allRenderFn: true, appendChildSlotFix: false, asyncLoading: true, asyncQueue: false, attachStyles: true, cloneNodeFix: false, constructableCSS: true, cssAnnotations: true, devTools: false, element: false, event: true, experimentalScopedSlotChanges: false, experimentalSlotFixes: false, formAssociated: true, hasRenderFn: true, hostListener: true, hostListenerTarget: true, hostListenerTargetBody: true, hostListenerTargetDocument: false, hostListenerTargetParent: false, hostListenerTargetWindow: false, hotModuleReplacement: false, hydrateClientSide: false, hydrateServerSide: false, hydratedAttribute: false, hydratedClass: true, hydratedSelectorName: "hydrated", initializeNextTick: false, invisiblePrehydration: true, isDebug: false, isDev: false, isTesting: false, lazyLoad: true, lifecycle: true, lifecycleDOMEvents: false, member: true, method: true, mode: false, modernPropertyDecls: false, observeAttribute: true, profile: false, prop: true, propBoolean: true, propMutable: true, propNumber: true, propString: true, reflect: true, scoped: false, scopedSlotTextContentFix: false, scriptDataOpts: false, shadowDelegatesFocus: false, shadowDom: true, slot: true, slotChildNodesFix: false, slotRelocation: false, state: true, style: true, svg: true, taskQueue: true, transformTagName: false, updatable: true, vdomAttribute: true, vdomClass: true, vdomFunctional: false, vdomKey: true, vdomListener: true, vdomPropOrAttr: true, vdomRef: true, vdomRender: true, vdomStyle: true, vdomText: true, vdomXlink: false, watchCallback: true };
 
 /*
  Stencil Client Platform v4.27.1 | MIT Licensed | https://stenciljs.com
@@ -84,6 +84,12 @@ var styles = /* @__PURE__ */ new Map();
 var HYDRATED_STYLE_ID = "sty-id";
 var HYDRATED_CSS = "{visibility:hidden}.hydrated{visibility:inherit}";
 var SLOT_FB_CSS = "slot-fb{display:contents}slot-fb[hidden]{display:none}";
+var FORM_ASSOCIATED_CUSTOM_ELEMENT_CALLBACKS = [
+  "formAssociatedCallback",
+  "formResetCallback",
+  "formDisabledCallback",
+  "formStateRestoreCallback"
+];
 var win = typeof window !== "undefined" ? window : {};
 var plt = {
   $flags$: 0,
@@ -459,7 +465,11 @@ var setAccessor = (elm, memberName, oldValue, newValue, isSvg, flags, initialRen
         }
       }
     }
-  } else if (memberName === "key") ; else if ((!isProp ) && memberName[0] === "o" && memberName[1] === "n") {
+  } else if (memberName === "key") ; else if (memberName === "ref") {
+    if (newValue) {
+      newValue(elm);
+    }
+  } else if ((!isProp ) && memberName[0] === "o" && memberName[1] === "n") {
     if (memberName[2] === "-") {
       memberName = memberName.slice(3);
     } else if (isMemberInElement(win, ln)) {
@@ -631,6 +641,7 @@ var removeVnodes = (vnodes, startIdx, endIdx) => {
     const vnode = vnodes[index];
     if (vnode) {
       const elm = vnode.$elm$;
+      nullifyVNodeRefs(vnode);
       if (elm) {
         elm.remove();
       }
@@ -766,6 +777,12 @@ var patch = (oldVNode, newVNode2, isInitialRender = false) => {
     elm.data = text;
   }
 };
+var nullifyVNodeRefs = (vNode) => {
+  {
+    vNode.$attrs$ && vNode.$attrs$.ref && vNode.$attrs$.ref(null);
+    vNode.$children$ && vNode.$children$.map(nullifyVNodeRefs);
+  }
+};
 var insertBefore = (parent, newNode, reference) => {
   {
     return parent == null ? void 0 : parent.insertBefore(newNode, reference);
@@ -777,6 +794,12 @@ var renderVdom = (hostRef, renderFnResults, isInitialLoad = false) => {
   const oldVNode = hostRef.$vnode$ || newVNode(null, null);
   const rootVnode = isHost(renderFnResults) ? renderFnResults : h(null, null, renderFnResults);
   hostTagName = hostElm.tagName;
+  if (cmpMeta.$attrsToReflect$) {
+    rootVnode.$attrs$ = rootVnode.$attrs$ || {};
+    cmpMeta.$attrsToReflect$.map(
+      ([propName, attribute]) => rootVnode.$attrs$[attribute] = hostElm[propName]
+    );
+  }
   if (isInitialLoad && rootVnode.$attrs$) {
     for (const key of Object.keys(rootVnode.$attrs$)) {
       if (hostElm.hasAttribute(key) && !["key", "ref", "style", "class"].includes(key)) {
@@ -1002,6 +1025,25 @@ var setValue = (ref, propName, newVal, cmpMeta) => {
 var proxyComponent = (Cstr, cmpMeta, flags) => {
   var _a, _b;
   const prototype = Cstr.prototype;
+  if (cmpMeta.$flags$ & 64 /* formAssociated */ && flags & 1 /* isElementConstructor */) {
+    FORM_ASSOCIATED_CUSTOM_ELEMENT_CALLBACKS.forEach((cbName) => {
+      Object.defineProperty(prototype, cbName, {
+        value(...args) {
+          const hostRef = getHostRef(this);
+          const instance = hostRef.$lazyInstance$ ;
+          if (!instance) {
+            hostRef.$onReadyPromise$.then((asyncInstance) => {
+              const cb = asyncInstance[cbName];
+              typeof cb === "function" && cb.call(asyncInstance, ...args);
+            });
+          } else {
+            const cb = instance[cbName] ;
+            typeof cb === "function" && cb.call(instance, ...args);
+          }
+        }
+      });
+    });
+  }
   if (cmpMeta.$members$ || (cmpMeta.$watchers$ || Cstr.watchers)) {
     if (Cstr.watchers && !cmpMeta.$watchers$) {
       cmpMeta.$watchers$ = Cstr.watchers;
@@ -1122,8 +1164,12 @@ var proxyComponent = (Cstr, cmpMeta, flags) => {
         /* @__PURE__ */ new Set([
           ...Object.keys((_b = cmpMeta.$watchers$) != null ? _b : {}),
           ...members.filter(([_, m]) => m[0] & 15 /* HasAttribute */).map(([propName, m]) => {
+            var _a2;
             const attrName = m[1] || propName;
             attrNameToPropName.set(attrName, propName);
+            if (m[0] & 512 /* ReflectAttr */) {
+              (_a2 = cmpMeta.$attrsToReflect$) == null ? void 0 : _a2.push([propName, attrName]);
+            }
             return attrName;
           })
         ])
@@ -1313,6 +1359,9 @@ var bootstrapLazy = (lazyBundles, options = {}) => {
       {
         cmpMeta.$listeners$ = compactMeta[3];
       }
+      {
+        cmpMeta.$attrsToReflect$ = [];
+      }
       {
         cmpMeta.$watchers$ = (_a2 = compactMeta[4]) != null ? _a2 : {};
       }
@@ -1374,6 +1423,9 @@ var bootstrapLazy = (lazyBundles, options = {}) => {
           return getHostRef(this).$onReadyPromise$;
         }
       };
+      if (cmpMeta.$flags$ & 64 /* formAssociated */) {
+        HostElement.formAssociated = true;
+      }
       cmpMeta.$lazyBundleId$ = lazyBundle[0];
       if (!exclude.includes(tagName) && !customElements2.get(tagName)) {
         cmpTags.push(tagName);
@@ -1451,4 +1503,4 @@ var setNonce = (nonce) => plt.$nonce$ = nonce;
 
 export { Host as H, bootstrapLazy as b, createEvent as c, getElement as g, h, promiseResolve as p, registerInstance as r, setNonce as s };
 
-//# sourceMappingURL=index-60f5a964.js.map
+//# sourceMappingURL=index-83ab73b7.js.map