udp-stencil-component-library 25.18.1-beta.4 → 25.18.1-beta.6

package/dist/collection/components/my-component/UI/tabs/tab/tabs/udp-tabs.js

@@ -1,15 +1,160 @@
 import { h } from "@stencil/core";
 export class UdpTabs {
     constructor() {
+        /**
+         * Specifies the layout variant of the tab header.
+         *
+         * - `'standard'`: Tabs will be sized based on their content.
+         * - `'fill'`: Tabs will stretch to fill the available horizontal space.
+         */
+        this.variant = 'fill';
         this.activeTab = 0;
+        this.tabDetails = []; // Uses new interface
+        this.sliderStyle = {
+            width: '0',
+            transform: 'translateX(0)',
+        };
+        this.showScrollLeft = false;
+        this.showScrollRight = false;
+        this.tabs = [];
+        this.buttonRefs = [];
+    }
+    handleSlotChange() {
+        this.initializeTabs();
+    }
+    handleResize() {
+        requestAnimationFrame(() => {
+            this.updateSliderPosition();
+            this.checkScroll();
+        });
+    }
+    componentDidLoad() {
+        this.initializeTabs();
+    }
+    onActiveTabChange() {
+        this.updateActiveTabs();
+        this.updateSliderPosition();
+    }
+    onVariantChange() {
+        requestAnimationFrame(() => {
+            this.updateSliderPosition();
+            this.checkScroll();
+        });
+    }
+    initializeTabs() {
+        var _a, _b;
+        this.buttonRefs = [];
+        // Get ALL tabs from the slot
+        this.tabs = Array.from(this.el.children).filter((child) => child.tagName.toLowerCase() === 'udp-tab');
+        this.tabDetails = this.tabs.map(tab => ({
+            title: tab.title,
+            icon: tab.icon,
+            iconPlacement: tab.iconPlacement,
+            hidden: tab.hidden,
+            disabled: tab.disabled,
+        }));
+        // Check if the current activeTab (default 0) is invalid
+        if (((_a = this.tabDetails[this.activeTab]) === null || _a === void 0 ? void 0 : _a.hidden) || ((_b = this.tabDetails[this.activeTab]) === null || _b === void 0 ? void 0 : _b.disabled)) {
+            // If it is, find the first valid tab to select
+            const firstValidIndex = this.tabDetails.findIndex(tab => !tab.hidden && !tab.disabled);
+            // If we found one, set it. If not (all tabs invalid), set to -1
+            this.activeTab = firstValidIndex;
+        }
+        this.updateActiveTabs();
+        requestAnimationFrame(() => {
+            this.updateSliderPosition();
+            this.checkScroll();
+        });
+    }
+    updateActiveTabs() {
+        this.tabs.forEach((tab, index) => {
+            tab.active = index === this.activeTab;
+        });
+    }
+    updateSliderPosition() {
+        const activeButton = this.buttonRefs[this.activeTab];
+        if (!activeButton) {
+            this.sliderStyle = { width: '0px', transform: 'translateX(0px)' };
+            return;
+        }
+        this.sliderStyle = {
+            width: `${activeButton.offsetWidth}px`,
+            transform: `translateX(${activeButton.offsetLeft}px)`,
+        };
+    }
+    checkScroll() {
+        if (!this.scrollContainerRef)
+            return;
+        const { scrollLeft, scrollWidth, clientWidth } = this.scrollContainerRef;
+        const isOverflowing = scrollWidth > clientWidth;
+        this.showScrollLeft = isOverflowing && scrollLeft > 1;
+        this.showScrollRight = isOverflowing && scrollLeft < scrollWidth - clientWidth - 1;
     }
     tabClicked(tabIndex) {
+        var _a;
+        if ((_a = this.tabDetails[tabIndex]) === null || _a === void 0 ? void 0 : _a.disabled) {
+            return;
+        }
         this.activeTab = tabIndex;
+        const tabButton = this.buttonRefs[tabIndex];
+        const container = this.scrollContainerRef;
+        if (!tabButton || !container)
+            return;
+        const { scrollLeft, clientWidth } = container;
+        const tabLeft = tabButton.offsetLeft;
+        const tabRight = tabLeft + tabButton.offsetWidth;
+        const safeZonePadding = 70;
+        const safeZoneLeft = scrollLeft + safeZonePadding;
+        const safeZoneRight = scrollLeft + clientWidth - safeZonePadding;
+        // Check if the tab's left edge is hidden by the left fade
+        if (tabLeft < safeZoneLeft) {
+            // Scroll to position the tab's left edge at the start of the safe zone
+            container.scrollTo({
+                left: tabLeft - safeZonePadding,
+                behavior: 'smooth'
+            });
+        }
+        // Check if the tab's right edge is hidden by the right fade
+        else if (tabRight > safeZoneRight) {
+            // Scroll to position the tab's right edge at the end of the safe zone
+            container.scrollTo({
+                left: tabRight - clientWidth + safeZonePadding,
+                behavior: 'smooth'
+            });
+        }
+    }
+    scrollToStart() {
+        if (!this.scrollContainerRef)
+            return;
+        this.scrollContainerRef.scrollTo({ left: 0, behavior: 'smooth' });
+    }
+    scrollToEnd() {
+        if (!this.scrollContainerRef)
+            return;
+        const container = this.scrollContainerRef;
+        const { scrollWidth, clientWidth } = container;
+        const maxScrollLeft = scrollWidth - clientWidth;
+        container.scrollTo({ left: maxScrollLeft, behavior: 'smooth' });
     }
     render() {
-        return (h("div", { key: '11b569eb074151f849159aa15af92129c8992929' }, h("div", { key: '3c6d9178dd37fd5fd5b91ec44e287241ee256e1c', class: "tab-header" }, h("slot", { key: 'e9289d5d3fa6e2da92b81de71e55276b3455f37c', name: "tab-title" })), h("div", { key: 'ed2038f48697251f5dfd3856d26711313376af10' }, h("slot", { key: '2b6d109cef169e2f50fb876387efc334464dc9da' }))));
+        return (h("div", { key: '173d42a32bb4ed0cbd57950e38bb75ab216efda1', class: "tab-container" }, h("div", { key: '369754b2aeed74f35f5e7be39b6617081c41cad2', class: `tab-header ${this.variant}` }, this.showScrollLeft && (h("button", { key: '68fefbbb9e8c95f54b3a78d700698d61b1c0b8bc', class: "scroll-arrow left", onClick: () => this.scrollToStart(), "aria-label": "Scroll to first tab" }, h("udp-icon", { key: 'f2230bcf77a4ef6cfc972f3219023c8da4607e2e', iconName: "chevronLeft16", color: "inherit" }))), this.showScrollLeft && h("div", { key: '69476b6d664f2b42b7a102275999f131e1b397f0', class: "scroll-fade left" }), h("div", { key: 'a12d5b22ec762e52091770b1ed276a7df8267437', class: "tab-scroll-container", ref: el => (this.scrollContainerRef = el), onScroll: () => this.checkScroll() }, this.tabDetails.map((tab, index) => {
+            if (tab.hidden) {
+                return null;
+            }
+            // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+            const iconEl = tab.icon ? h("udp-icon", { iconName: tab.icon, color: 'inherit' }) : null;
+            // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+            const titleEl = h("span", null, tab.title);
+            return (h("button", { class: {
+                    'active': index === this.activeTab,
+                    'has-icon': !!tab.icon,
+                    [`icon-${tab.iconPlacement}`]: !!tab.icon,
+                    'disabled': tab.disabled,
+                }, disabled: tab.disabled, onClick: () => this.tabClicked(index), role: "tab", "aria-selected": index === this.activeTab ? 'true' : 'false', "aria-disabled": tab.disabled ? 'true' : 'false', ref: el => (this.buttonRefs[index] = el) }, iconEl, titleEl));
+        }), h("div", { key: '6726c5fd74d32e9385aa83aaf88ab92e9d83d858', class: "slider", style: this.sliderStyle })), this.showScrollRight && h("div", { key: 'ce175b2bb6465211587af95995375d315a0e6fed', class: "scroll-fade right" }), this.showScrollRight && (h("button", { key: '63dbc5cd40921b7b39c75377986ba37b5d69c93a', class: "scroll-arrow right", onClick: () => this.scrollToEnd(), "aria-label": "Scroll to last tab" }, h("udp-icon", { key: 'b191a3a90cdecf10abf94dc98fbf16bd973ee1e1', iconName: "chevronRight16", color: "inherit" })))), h("div", { key: '3ffe241125e1fa6969cf9fcce49350d63f82bee6', class: "tab-content" }, h("slot", { key: 'a6fe2932604e485e85f0a860ee58633f8bf161b6' }))));
     }
     static get is() { return "udp-tabs"; }
+    static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
             "$": ["udp-tabs.css"]
@@ -20,10 +165,63 @@ export class UdpTabs {
             "$": ["udp-tabs.css"]
         };
     }
+    static get properties() {
+        return {
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'fill' | 'standard'",
+                    "resolved": "\"fill\" | \"standard\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Specifies the layout variant of the tab header.\n\n- `'standard'`: Tabs will be sized based on their content.\n- `'fill'`: Tabs will stretch to fill the available horizontal space."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "variant",
+                "defaultValue": "'fill'"
+            }
+        };
+    }
     static get states() {
         return {
-            "activeTab": {}
+            "activeTab": {},
+            "tabDetails": {},
+            "sliderStyle": {},
+            "showScrollLeft": {},
+            "showScrollRight": {}
         };
     }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "activeTab",
+                "methodName": "onActiveTabChange"
+            }, {
+                "propName": "variant",
+                "methodName": "onVariantChange"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "slotchange",
+                "method": "handleSlotChange",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "resize",
+                "method": "handleResize",
+                "target": "window",
+                "capture": false,
+                "passive": true
+            }];
+    }
 }
 //# sourceMappingURL=udp-tabs.js.map

package/dist/collection/components/my-component/UI/tabs/tab/tabs/udp-tabs.js.map

@@ -1 +1 @@
-{"version":3,"file":"udp-tabs.js","sourceRoot":"","sources":["../../../../../../../src/components/my-component/UI/tabs/tab/tabs/udp-tabs.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAMpD,MAAM,OAAO,OAAO;IAJpB;QAKW,cAAS,GAAW,CAAC,CAAC;KAoBhC;IAlBC,UAAU,CAAC,QAAgB;QACzB,IAAI,CAAC,SAAS,GAAG,QAAQ,CAAC;IAC5B,CAAC;IAED,MAAM;QACJ,OAAO,CACL;YACE,4DAAK,KAAK,EAAC,YAAY;gBACrB,6DAAM,IAAI,EAAC,WAAW,GAEf,CACH;YACN;gBACE,8DAAa,CACT,CACF,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, State } from '@stencil/core';\n\n@Component({\n  tag: 'udp-tabs',\n  styleUrl: 'udp-tabs.css',\n})\nexport class UdpTabs {\n  @State() activeTab: number = 0;\n\n  tabClicked(tabIndex: number) {\n    this.activeTab = tabIndex;\n  }\n\n  render() {\n    return (\n      <div>\n        <div class=\"tab-header\">\n          <slot name=\"tab-title\">\n            {/* Titles go here */}\n          </slot>\n        </div>\n        <div>\n          <slot></slot>\n        </div>\n      </div>\n    );\n  }\n}\n"]}
+{"version":3,"file":"udp-tabs.js","sourceRoot":"","sources":["../../../../../../../src/components/my-component/UI/tabs/tab/tabs/udp-tabs.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, State, Element, Watch, Listen, Prop } from '@stencil/core';\n\ninterface TabDetail {\n  title: string;\n  icon?: string;\n  iconPlacement?: 'start' | 'end' | 'top' | 'bottom';\n  hidden?: boolean;\n  disabled?: boolean;\n}\n\n@Component({\n  tag: 'udp-tabs',\n  styleUrl: 'udp-tabs.css',\n  shadow: true,\n})\nexport class UdpTabs {\n  @Element() el: HTMLElement;\n\n  /**\n   * Specifies the layout variant of the tab header.\n   *\n   * - `'standard'`: Tabs will be sized based on their content.\n   * - `'fill'`: Tabs will stretch to fill the available horizontal space.\n   */\n  @Prop() variant: 'fill' | 'standard' = 'fill';\n\n  @State() activeTab: number = 0;\n  @State() tabDetails: TabDetail[] = []; // Uses new interface\n  @State() sliderStyle: { width: string; transform: string } = {\n    width: '0',\n    transform: 'translateX(0)',\n  };\n  @State() showScrollLeft: boolean = false;\n  @State() showScrollRight: boolean = false;\n\n  private tabs: HTMLUdpTabElement[] = [];\n  private buttonRefs: HTMLButtonElement[] = [];\n  private scrollContainerRef?: HTMLDivElement;\n\n  @Listen('slotchange')\n  handleSlotChange() {\n    this.initializeTabs();\n  }\n\n  @Listen('resize', { target: 'window' })\n  handleResize() {\n    requestAnimationFrame(() => {\n      this.updateSliderPosition();\n      this.checkScroll();\n    });\n  }\n\n  componentDidLoad() {\n    this.initializeTabs();\n  }\n\n  @Watch('activeTab')\n  onActiveTabChange() {\n    this.updateActiveTabs();\n    this.updateSliderPosition();\n  }\n\n  @Watch('variant')\n  onVariantChange() {\n    requestAnimationFrame(() => {\n      this.updateSliderPosition();\n      this.checkScroll();\n    });\n  }\n\n  private initializeTabs() {\n    this.buttonRefs = [];\n    // Get ALL tabs from the slot\n    this.tabs = Array.from(this.el.children).filter(\n      (child): child is HTMLUdpTabElement => child.tagName.toLowerCase() === 'udp-tab',\n    );\n\n    this.tabDetails = this.tabs.map(tab => ({\n      title: tab.title,\n      icon: tab.icon,\n      iconPlacement: tab.iconPlacement,\n      hidden: tab.hidden,\n      disabled: tab.disabled,\n    }));\n\n    // Check if the current activeTab (default 0) is invalid\n    if (this.tabDetails[this.activeTab]?.hidden || this.tabDetails[this.activeTab]?.disabled) {\n      // If it is, find the first valid tab to select\n      const firstValidIndex = this.tabDetails.findIndex(tab => !tab.hidden && !tab.disabled);\n      // If we found one, set it. If not (all tabs invalid), set to -1\n      this.activeTab = firstValidIndex;\n    }\n\n    this.updateActiveTabs();\n\n    requestAnimationFrame(() => {\n      this.updateSliderPosition();\n      this.checkScroll();\n    });\n  }\n\n  private updateActiveTabs() {\n    this.tabs.forEach((tab, index) => {\n      tab.active = index === this.activeTab;\n    });\n  }\n\n  private updateSliderPosition() {\n    const activeButton = this.buttonRefs[this.activeTab];\n    if (!activeButton) {\n      this.sliderStyle = { width: '0px', transform: 'translateX(0px)' };\n      return;\n    }\n\n    this.sliderStyle = {\n      width: `${activeButton.offsetWidth}px`,\n      transform: `translateX(${activeButton.offsetLeft}px)`,\n    };\n  }\n\n  private checkScroll() {\n    if (!this.scrollContainerRef) return;\n    const { scrollLeft, scrollWidth, clientWidth } = this.scrollContainerRef;\n    const isOverflowing = scrollWidth > clientWidth;\n    this.showScrollLeft = isOverflowing && scrollLeft > 1;\n    this.showScrollRight = isOverflowing && scrollLeft < scrollWidth - clientWidth - 1;\n  }\n\n  private tabClicked(tabIndex: number) {\n    if (this.tabDetails[tabIndex]?.disabled) {\n      return;\n    }\n\n    this.activeTab = tabIndex;\n\n    const tabButton = this.buttonRefs[tabIndex];\n    const container = this.scrollContainerRef;\n\n    if (!tabButton || !container) return;\n\n    const { scrollLeft, clientWidth } = container;\n    const tabLeft = tabButton.offsetLeft;\n    const tabRight = tabLeft + tabButton.offsetWidth;\n\n    const safeZonePadding = 70;\n\n    const safeZoneLeft = scrollLeft + safeZonePadding;\n    const safeZoneRight = scrollLeft + clientWidth - safeZonePadding;\n\n    // Check if the tab's left edge is hidden by the left fade\n    if (tabLeft < safeZoneLeft) {\n      // Scroll to position the tab's left edge at the start of the safe zone\n      container.scrollTo({\n        left: tabLeft - safeZonePadding,\n        behavior: 'smooth'\n      });\n    }\n    // Check if the tab's right edge is hidden by the right fade\n    else if (tabRight > safeZoneRight) {\n      // Scroll to position the tab's right edge at the end of the safe zone\n      container.scrollTo({\n        left: tabRight - clientWidth + safeZonePadding,\n        behavior: 'smooth'\n      });\n    }\n  }\n\n  private scrollToStart() {\n    if (!this.scrollContainerRef) return;\n    this.scrollContainerRef.scrollTo({ left: 0, behavior: 'smooth' });\n  }\n\n  private scrollToEnd() {\n    if (!this.scrollContainerRef) return;\n    const container = this.scrollContainerRef;\n    const { scrollWidth, clientWidth } = container;\n    const maxScrollLeft = scrollWidth - clientWidth;\n    container.scrollTo({ left: maxScrollLeft, behavior: 'smooth' });\n  }\n\n  render() {\n    return (\n      <div class=\"tab-container\">\n        <div class={`tab-header ${this.variant}`}>\n          {this.showScrollLeft && (\n            <button\n              class=\"scroll-arrow left\"\n              onClick={() => this.scrollToStart()}\n              aria-label=\"Scroll to first tab\"\n            >\n               <udp-icon iconName=\"chevronLeft16\" color=\"inherit\" />\n            </button>\n          )}\n\n          {this.showScrollLeft && <div class=\"scroll-fade left\"></div>}\n\n          <div\n            class=\"tab-scroll-container\"\n            ref={el => (this.scrollContainerRef = el)}\n            onScroll={() => this.checkScroll()}\n          >\n            {this.tabDetails.map((tab, index) => {\n              if (tab.hidden) {\n                return null;\n              }\n\n              // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment\n              const iconEl = tab.icon ? <udp-icon iconName={tab.icon} color={'inherit'} /> : null;\n              // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment\n              const titleEl = <span>{tab.title}</span>;\n\n              return (\n                <button\n                  class={{\n                    'active': index === this.activeTab,\n                    'has-icon': !!tab.icon,\n                    [`icon-${tab.iconPlacement}`]: !!tab.icon,\n                    'disabled': tab.disabled,\n                  }}\n                  disabled={tab.disabled}\n                  onClick={() => this.tabClicked(index)}\n                  role=\"tab\"\n                  aria-selected={index === this.activeTab ? 'true' : 'false'}\n                  aria-disabled={tab.disabled ? 'true' : 'false'}\n                  ref={el => (this.buttonRefs[index] = el)}\n                >\n                  {iconEl}\n                  {titleEl}\n                </button>\n              );\n            })}\n\n            <div class=\"slider\" style={this.sliderStyle}></div>\n          </div>\n\n          {this.showScrollRight && <div class=\"scroll-fade right\"></div>}\n\n          {this.showScrollRight && (\n            <button\n              class=\"scroll-arrow right\"\n              onClick={() => this.scrollToEnd()}\n              aria-label=\"Scroll to last tab\"\n            >\n              <udp-icon iconName=\"chevronRight16\" color=\"inherit\" />\n            </button>\n          )}\n        </div>\n        <div class=\"tab-content\">\n          <slot></slot>\n        </div>\n      </div>\n    );\n  }\n}\n"]}

package/dist/collection/components/my-component/UI/tabs/tab/udp-tab.js

@@ -1,10 +1,29 @@
 import { h } from "@stencil/core";
 export class UdpTab {
-    activeChanged() {
-        // Handle the active state change, if needed
+    constructor() {
+        /**
+         * True if this is the active tab.
+         * This is set by the parent <udp-tabs> component.
+         */
+        this.active = false;
+        /**
+         * Placement of the icon relative to the title.
+         * @default 'start'
+         */
+        this.iconPlacement = 'start';
+        /**
+         * If true, the tab will be hidden from the tab list.
+         * @default false
+         */
+        this.hidden = false;
+        /**
+         * If true, the tab will be unselectable.
+         * @default false
+         */
+        this.disabled = false;
     }
     render() {
-        return (h("div", { key: '775798db38994b9a9dcfdb94a8cc588bafed47f9', class: { 'tab-panel': true, 'active': this.active } }, h("slot", { key: '6f67d3f672d0600eeb84b9dfcc2c12f2fc931ef7' })));
+        return (h("div", { key: '0dbc41862f8bb01ecfec94ca44f082f0e4e7104f', class: { 'tab-panel': true, 'active': this.active }, role: "tabpanel" }, h("slot", { key: 'facc5f18260ea67c405dca1a90dcdc48e5ec995c' })));
     }
     static get is() { return "udp-tab"; }
     static get originalStyleUrls() {
@@ -31,7 +50,7 @@ export class UdpTab {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "The title of the tab, displayed in the tab-header."
                 },
                 "getter": false,
                 "setter": false,
@@ -50,20 +69,103 @@ export class UdpTab {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "True if this is the active tab.\nThis is set by the parent <udp-tabs> component."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "active",
+                "defaultValue": "false"
+            },
+            "icon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Optional icon to display in the tab."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "active"
+                "attribute": "icon"
+            },
+            "iconPlacement": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'start' | 'end' | 'top' | 'bottom'",
+                    "resolved": "\"bottom\" | \"end\" | \"start\" | \"top\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "'start'"
+                        }],
+                    "text": "Placement of the icon relative to the title."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "icon-placement",
+                "defaultValue": "'start'"
+            },
+            "hidden": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "false"
+                        }],
+                    "text": "If true, the tab will be hidden from the tab list."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "hidden",
+                "defaultValue": "false"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "false"
+                        }],
+                    "text": "If true, the tab will be unselectable."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "disabled",
+                "defaultValue": "false"
             }
         };
     }
-    static get watchers() {
-        return [{
-                "propName": "active",
-                "methodName": "activeChanged"
-            }];
-    }
 }
 //# sourceMappingURL=udp-tab.js.map

package/dist/collection/components/my-component/UI/tabs/tab/udp-tab.js.map

@@ -1 +1 @@
-{"version":3,"file":"udp-tab.js","sourceRoot":"","sources":["../../../../../../src/components/my-component/UI/tabs/tab/udp-tab.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAM1D,MAAM,OAAO,MAAM;IAKjB,aAAa;QACX,4CAA4C;IAC9C,CAAC;IAED,MAAM;QACJ,OAAO,CACL,4DAAK,KAAK,EAAE,EAAE,WAAW,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,CAAC,MAAM,EAAE;YACtD,8DAAa,CACT,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Prop, Watch } from '@stencil/core';\n\n@Component({\n  tag: 'udp-tab',\n  styleUrl: 'udp-tab.css',\n})\nexport class UdpTab {\n  @Prop() title: string;\n  @Prop() active: boolean;\n\n  @Watch('active')\n  activeChanged() {\n    // Handle the active state change, if needed\n  }\n\n  render() {\n    return (\n      <div class={{ 'tab-panel': true, 'active': this.active }}>\n        <slot></slot>\n      </div>\n    );\n  }\n}\n"]}
+{"version":3,"file":"udp-tab.js","sourceRoot":"","sources":["../../../../../../src/components/my-component/UI/tabs/tab/udp-tab.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAMnD,MAAM,OAAO,MAAM;IAJnB;QAUE;;;WAGG;QACsB,WAAM,GAAY,KAAK,CAAC;QAOjD;;;WAGG;QACK,kBAAa,GAAwC,OAAO,CAAC;QACrE;;;WAGG;QACK,WAAM,GAAa,KAAK,CAAC;QAEjC;;;WAGG;QACK,aAAQ,GAAa,KAAK,CAAC;KASpC;IAPC,MAAM;QACJ,OAAO,CACL,4DAAK,KAAK,EAAE,EAAE,WAAW,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,CAAC,MAAM,EAAE,EAAE,IAAI,EAAC,UAAU;YACvE,8DAAa,CACT,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'udp-tab',\n  styleUrl: 'udp-tab.css',\n})\nexport class UdpTab {\n  /**\n   * The title of the tab, displayed in the tab-header.\n   */\n  @Prop() title: string;\n\n  /**\n   * True if this is the active tab.\n   * This is set by the parent <udp-tabs> component.\n   */\n  @Prop({ reflect: true }) active: boolean = false;\n\n  /**\n   * Optional icon to display in the tab.\n   */\n  @Prop() icon?: string;\n\n  /**\n   * Placement of the icon relative to the title.\n   * @default 'start'\n   */\n  @Prop() iconPlacement?: 'start' | 'end' | 'top' | 'bottom' = 'start';\n  /**\n   * If true, the tab will be hidden from the tab list.\n   * @default false\n   */\n  @Prop() hidden?: boolean = false;\n\n  /**\n   * If true, the tab will be unselectable.\n   * @default false\n   */\n  @Prop() disabled?: boolean = false;\n\n  render() {\n    return (\n      <div class={{ 'tab-panel': true, 'active': this.active }} role=\"tabpanel\">\n        <slot></slot>\n      </div>\n    );\n  }\n}\n"]}

package/dist/collection/components/my-component/UI/toolbars/app-bar/app-bar.js

@@ -2,7 +2,7 @@ import { h } from "@stencil/core";
 import Menu24 from "@carbon/icons/es/menu/24";
 export class AppBar {
     render() {
-        return (h("div", { key: 'a96a536ce64d82b2a05a305539b0d40cb9372e14', class: "header" }, h("stencil-icon-button", { key: '391ce32825452e7da4bba0423b7f373b8bd9c4a4', noBackground: true, darkIcon: false, icon: Menu24 }), h("unity-typography", { key: 'bb88b074aa8ec47ef03aeb64a0b6b23794f0296f', variant: 'data-display-one' }, " ", h("slot", { key: '6b7dc252193ce4b63d1a42634c81ef5a704f7581' }), "   "), h("a", { key: 'd5bc1a1c3a12ea3d6d93b82859c81f0ea1d1845e', class: "skip-to-content", href: "#main-content" }, "Skip to main content"), h("div", { key: 'bc6e26c729d46424d07935029f6d9a84cb658548', class: "header__logo" }), h("div", { key: '3827e3e7fe86a3c6a7f15d654b70655b8b77a748', class: "header__nav", role: "navigation", "aria-label": "Carbon Design System" }), h("div", { key: 'b81cb8f52041214a74bd02d89f17bbdd2128463a', class: "header__global" }, h("udp-avatar", { key: '8c9ab84ee004cc0eb1405e7f491f4cafc4863a58', username: this.username }))));
+        return (h("div", { key: '90d237af2bda122e231ed0d4934f41a2c7b21992', class: "header" }, h("stencil-icon-button", { key: 'a35a9b3355284d972f5fd564c0b133ed32114b63', noBackground: true, darkIcon: false, icon: Menu24 }), h("unity-typography", { key: 'bd93a6c415dcab2421175e13c9e7a0807f78b85e', variant: 'data-display-one' }, " ", h("slot", { key: '6c4b317a6fd338dfdda3a77991ed78fd1702b995' }), "   "), h("a", { key: 'b2066316b5184675a04c2481fe1856785211b390', class: "skip-to-content", href: "#main-content" }, "Skip to main content"), h("div", { key: '3ba55346dea1a86fd90c63d366661dfb5e77d871', class: "header__logo" }), h("div", { key: '4cc724ff9b5f73262503172656b2439313552285', class: "header__nav", role: "navigation", "aria-label": "Carbon Design System" }), h("div", { key: '7c3a3275ca99c1a328d86dd2b90a2bafe3290d5a', class: "header__global" }, h("udp-avatar", { key: '9a4db5288bce2550d56acfd124b57165e08b8d08', username: this.username }))));
     }
     static get is() { return "app-bar"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/my-component/UI/util/ghost-render/ghost-render.js

@@ -70,7 +70,7 @@ export class GhostRender {
         // The <slot /> is necessary to prevent the Stencil compiler from
         // overly optimizing this component's output and aliasing the
         // defineCustomElement export, which breaks downstream wrappers.
-        return (h(Host, { key: '02fc2687cd43c93172cc0e626810724b3933fc25' }, h("slot", { key: 'c240aa0ccde1c38e5d80a0cd89f5608b8c608636' })));
+        return (h(Host, { key: '63ea7c8c6831190e02052214270b60939e300039' }, h("slot", { key: '7745b374f2a3c64dbd29e414d3350bdfc984bdf6' })));
     }
     static get is() { return "ghost-render"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/my-component/demo/ambient-demo-container.js

@@ -1,7 +1,7 @@
 import { h } from "@stencil/core";
 export class AmbientDemoContainer {
     render() {
-        return (h("div", { key: 'a5c238df1343ab96d334fb0b013c393835b1c11e', class: "container" }, h("div", { key: '8c43e8fbc425796685da07ceb134adf8e2bc0a65', class: "title-container" }, " ", h("unity-typography", { key: '9ea72535c3f58822abfde8260e17a1dfc97227ae', variant: "button" }, " ", this.title, " "), " "), h("slot", { key: '52edab7acd8f01735b9a7341b9fca3a0ae7a9508' })));
+        return (h("div", { key: 'e2dc6db3f12a7cc3cbd9e0e5e59bb63abe1ff839', class: "container" }, h("div", { key: '1097924d31d84a42f3dfa4411efa02ca2d578b23', class: "title-container" }, " ", h("unity-typography", { key: '3c126bce0e92f7b57016dd206a83935bd216c9fe', variant: "button" }, " ", this.title, " "), " "), h("slot", { key: '0df19aa562c08c1b24453f8b8c4b57a153f11d3b' })));
     }
     static get is() { return "ambient-demo-container"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/test-component/inputs-example/inputs-example.js

@@ -91,7 +91,7 @@ export class InputsExample {
         };
     }
     render() {
-        return (h("div", { key: '0efd3f4460ea20ff10f2aaf00ca70770237da618', class: "inputs-example" }, h("h1", { key: '006277abe860f17193251d59d60008947ca2bf77' }, "Input Components Examples"), h("section", { key: '252130c2af84ca1c16251db183209c1651d3ca71', class: "example-section" }, h("h2", { key: '589f7b01a7de725ace061f317bb054c99f278c18' }, "Controlled Components"), h("p", { key: '5275e91ce1928c7db447882ecc648069870b93e4' }, "Parent component manages state and passes values to child components."), h("div", { key: '551f424a12c6dc3bcc141ea0cc6c7a0b3be0c96d', class: "input-grid" }, h("div", { key: '55de1d2ad83636052b2a5f49544f3c416eb969b6', class: "input-example" }, h("h3", { key: '5d8184f1650a3f13cba35ba894a3fb68ed5f943b' }, "Text Field"), h("text-field", { key: '8bd05080a978920bde77bccffc53368e26369d22', label: "Controlled Text Input", placeholder: "Enter text...", value: this.controlledTextValue }), h("p", { key: '9f931a1a2e6a94f879d440902fc1ce304337b3a1', class: "value-display" }, "Value: ", this.controlledTextValue)), h("div", { key: '3a71f26e7ef8b27ef987fab993f9f68d8a74dd25', class: "input-example" }, h("h3", { key: '3c4869186abcf344b1f098092ec75c7084fa28e0' }, "Numeric Field"), h("numeric-field", { key: '4a94e0557e2524b918b9b9c712758b8b2705078d', label: "Controlled Numeric Input", placeholder: "Enter number...", value: this.controlledNumericValue, min: "0", max: "100", step: "1", onChange: this.handleControlledNumericChange }), h("p", { key: '26344fd447d79233dd3d176fad21b4d736325475', class: "value-display" }, "Value: ", this.controlledNumericValue)), h("div", { key: '2c35fe41a275c18c18e4340e00589d95c9240af0', class: "input-example" }, h("h3", { key: '8a7ac8119188ba1d0681196d7207147eb76501d2' }, "Text Area"), h("text-area", { key: 'fb554b6b21bb51901013981d3b2bd9360839dce9', label: "Controlled Text Area", placeholder: "Enter description...", value: this.controlledTextAreaValue, minRows: 3, maxRows: 6 }), h("p", { key: '5622e978387b0a8c31b24173f4839b2d9b9a088b', class: "value-display" }, "Value: ", this.controlledTextAreaValue)), h("div", { key: 'd957c4002d97bd3cee3fca6e734260098504ecb0', class: "input-example" }, h("h3", { key: 'a51d7312e52943c3b21e2d99881b73e7858ef36e' }, "Checkbox"), h("check-box", { key: 'a76b891c6ec232a20f3ba7053db0cf02e48831c9', label: "Controlled Checkbox", checked: this.controlledCheckboxValue, onChange: this.handleControlledCheckboxChange }), h("p", { key: '54866fd5d3b00875f5b763a80cc78556b2d719fd', class: "value-display" }, "Checked: ", this.controlledCheckboxValue.toString())), h("div", { key: '4d4ce6273c9f75b95a27fd60c10c8c1bfbc6dde5', class: "input-example" }, h("h3", { key: 'cdce4e97bb3577a77509fa9c7ef28c65a1056992' }, "Toggle"), h("stencil-toggle", { key: 'bb9c014216ec1d4573f03fed25cc82344baac92e', label: "Controlled Toggle", checked: this.controlledToggleValue, onChange: this.handleControlledToggleChange }), h("p", { key: '1019191b0934529d856bf4f4114c5733fd01424b', class: "value-display" }, "Toggled: ", this.controlledToggleValue.toString())), h("div", { key: '95ed43eede6b66422a906c4a5c055c956bf537f1', class: "input-example" }, h("h3", { key: '6b0c3368be18c6c328572b027ccfc08006c3e4ef' }, "Date Selector"), h("udp-date-selector", { key: '45a9903e034e034add2500f4374cebb9b098cffc', label: "Controlled Date", value: this.controlledDateValue, onChange: this.handleControlledDateChange }), h("p", { key: '25b075ba6a748e19cf060258947d1b69b0865e9a', class: "value-display" }, "Date: ", this.controlledDateValue)), h("div", { key: '041b10ba312b9c0b595201687e034e169e8c502b', class: "input-example" }, h("h3", { key: '8df015893dc9d297c8fdd1acb2673c3541637c94' }, "DateTime Selector"), h("udp-datetime-selector", { key: '562e3908a61c3739732b51bf9711426b89bcaef0', label: "Controlled DateTime", value: this.controlledDateTimeValue, onChange: this.handleControlledDateTimeChange }), h("p", { key: 'e46ad5ca14b6038d5f2470fba4f5ccf6bac23a5c', class: "value-display" }, "DateTime: ", this.controlledDateTimeValue)), h("div", { key: '7d1a01e4d73932cfc26c9782bd19388e4650971e', class: "input-example" }, h("h3", { key: '76e4b9a5dde26015293c54f06ea84cae0408c630' }, "Time Selector"), h("udp-time-selector", { key: 'f5ceb2da3facc5f268da85891e1f3b0bd5e8b061', label: "Controlled Time", value: this.controlledTimeValue, onChange: this.handleControlledTimeChange }), h("p", { key: '8e061f37c0a0ecd7eba9496a9a441cc2d0397e18', class: "value-display" }, "Time: ", this.controlledTimeValue)), h("div", { key: 'eb8d7f5e9d6e11eda3fa33f4c35671c8146816ed', class: "input-example" }, h("h3", { key: 'bc4f419f561d4ea816331ce4e922fc7e7ce25b18' }, "UDP Selector"), h("udp-selector", { key: 'c6a2153a88b7470d799bf9ef1df6c858f19dc78d', label: "Controlled Selector", options: this.selectorOptions, value: this.controlledSelectorValue, onChange: this.handleControlledSelectorChange }), h("p", { key: '7a653cec33c7202ea2468eaad37da12746f11d82', class: "value-display" }, "Selected: ", this.controlledSelectorValue)), h("div", { key: '9a4836a07e6f0f9c69d9e76515003ea993411ec4', class: "input-example" }, h("h3", { key: 'fc06320104a8d51ca49638933371a77083ac20bf' }, "File Upload"), h("file-upload", { key: '2821b6f36940ddc513dd89e233f4afb6a98b07d2', label: "Controlled File Upload", allowMultiple: true, onChange: this.handleControlledFileChange }), h("p", { key: '823341c790042bf0a2df0fde691eb715478f86d9', class: "value-display" }, "Files: ", this.controlledFileValue.length, " selected")))), h("section", { key: '400893e3266665c8a63a286ddaad6bb64ad9efd6', class: "example-section" }, h("h2", { key: 'a11bc8c2ea72e3394a32ef537f064d1d027b7567' }, "Uncontrolled Components"), h("p", { key: '6faec1e2ceb7d17c4f7e21226dc0ffdeed3ae039' }, "Components manage their own state with initial values."), h("div", { key: '72b6fc67bfcae5d60b41d87a8dbcafb9fd4bc982', class: "input-grid" }, h("div", { key: '0e5d40d18c610b8dcdc8c90944892d8179b726e3', class: "input-example" }, h("h3", { key: '3f01b543c41d0dc276caaeb67be4e66a39dded4e' }, "Text Field"), h("text-field", { key: 'f9c7ca2d4b98af3fb67f3ae74d7e936d87ef9c3c', label: "Uncontrolled Text Input", placeholder: "Enter text...", initialValue: "Initial text value", onChange: (e) => console.log('Text changed:', e.detail) })), h("div", { key: '55db82562b3c1e5371784f4aa052741e5edf9607', class: "input-example" }, h("h3", { key: 'bd8b8ab64beb7523966d21e0cacd5afa60f3105a' }, "Numeric Field"), h("numeric-field", { key: '116da3d99fe20151b37e77068dce0f2cb9ae0917', label: "Uncontrolled Numeric Input", placeholder: "Enter number...", initialValue: "42", min: "0", max: "100", onChange: (e) => console.log('Number changed:', e.detail) })), h("div", { key: 'fdddde6cdf4ff4285fa067720be6925cdc1e3830', class: "input-example" }, h("h3", { key: '40acfb74b91565f64072dbe13975d96c945b5a8e' }, "Text Area"), h("text-area", { key: '7d0da30788f2b76c50767296a4de85691c83c170', label: "Uncontrolled Text Area", placeholder: "Enter description...", initialValue: "Initial description text", minRows: 3, onChange: (e) => console.log('Text area changed:', e.detail) })), h("div", { key: '3f843afb917770a01e6291f50f20fac007821e0a', class: "input-example" }, h("h3", { key: '6ad479fa8bd9cee5dc5f67aecfd6018a27953877' }, "Checkbox"), h("check-box", { key: '0ad746a68cbdae97e953073bea1dfc4574b1da43', label: "Uncontrolled Checkbox", initialValue: "true", onChange: (e) => console.log('Checkbox changed:', e.detail) })), h("div", { key: '5c2d036874db447f8cf058a5a511e0272bedc1a7', class: "input-example" }, h("h3", { key: 'dac3a19d667510cd27cc55ff5e466a1f4469e007' }, "Toggle"), h("stencil-toggle", { key: '90603832ed57ea3fa5b0a7115868343003d1d084', label: "Uncontrolled Toggle", initialValue: "false", onChange: (e) => console.log('Toggle changed:', e.detail) })), h("div", { key: '49af9584417e30c4c82821eb5d0261a45577c83e', class: "input-example" }, h("h3", { key: 'ed380270ff7aa432c482c5d3f9239982c1222776' }, "Date Selector"), h("udp-date-selector", { key: '5ff1824a24a6c89939218c2283ca80f399b90198', label: "Uncontrolled Date", initialValue: "2024-01-15", onChange: (e) => console.log('Date changed:', e.detail) })), h("div", { key: 'bd352b08b5a9249939748f6a93aa4ead16d8db6a', class: "input-example" }, h("h3", { key: '0962ed467ab9357aa073d222f33d5eeb11c892d5' }, "Time Selector"), h("udp-time-selector", { key: '4a7bfb3d1f6c6a118034c0bddff26978f5836c1d', label: "Uncontrolled Time", initialValue: "14:30", onChange: (e) => console.log('Time changed:', e.detail) })), h("div", { key: '748568382a7d6144b2e0d878b06d46eaa82977ac', class: "input-example" }, h("h3", { key: '0750049de540a9a0d659af161e1b14d3f294eb40' }, "DateTime Selector"), h("udp-datetime-selector", { key: '778a0408dd43ea048171596a4eb0de6353a470ff', label: "Uncontrolled DateTime", initialValue: "2024-01-15T14:30", onChange: (e) => console.log('DateTime changed:', e.detail) })), h("div", { key: '593afaf38ef12585cf35998f6684590e683872f5', class: "input-example" }, h("h3", { key: '1cfe0ba353fee26bfd2216b1da8a297aebfb83fb' }, "UDP Selector"), h("udp-selector", { key: '5b0a4ed94f3998482572fd9351544e03f3ddd964', label: "Uncontrolled Selector", options: this.selectorOptions, initialValue: "option2", onChange: (e) => console.log('Selector changed:', e.detail) })))), h("section", { key: '8cdecea2dff7eeacae58ef8a00f28fe1ae0be3ca', class: "example-section" }, h("h2", { key: '85929c1cc99ba5379c49ba6479df2e3f17d4c7dc' }, "Form-wrapped Components"), h("p", { key: '0596694a262ab286ac612339279df96b391e4104' }, "Components integrated with stencil-form and stencil-field for validation and state management."), h("stencil-form", { key: '0cad6aef3d8738a1bf4b2d944152e591fa185b08', handleSubmit: this.handleFormSubmit, handleChange: this.handleFormChange, handleValidate: this.validateForm, initialValues: {
+        return (h("div", { key: '568318c42e44cab4a6a750a4c5819953328887dd', class: "inputs-example" }, h("h1", { key: '5637becd6a248192914e63c9c6e8dfc3714f3a15' }, "Input Components Examples"), h("section", { key: 'e9dc7d661c548210421400385a404b952d9f1956', class: "example-section" }, h("h2", { key: '1577a2c0eae0bcaa0bbfefea1bf186403162c407' }, "Controlled Components"), h("p", { key: '3c98d8f5a0c50d3180edf77c89b14b58df9f5d7c' }, "Parent component manages state and passes values to child components."), h("div", { key: '93c0227504b3e7b41fa17674883796401951f7e0', class: "input-grid" }, h("div", { key: '299b926df1c5146758d10ad3ffc9400b9ee45539', class: "input-example" }, h("h3", { key: 'f20a59ab4a449e86c9c2608819bdb548437a361a' }, "Text Field"), h("text-field", { key: '8d73d9be252b05655a321a25a1faf13d51087158', label: "Controlled Text Input", placeholder: "Enter text...", value: this.controlledTextValue }), h("p", { key: '74ebcbc54fb2892e31709485bf4ec754fbcf0838', class: "value-display" }, "Value: ", this.controlledTextValue)), h("div", { key: '572728243b33fae1872160456ea22230450f98d0', class: "input-example" }, h("h3", { key: 'd82edbf3ddca5e0ea1cba3a335c7bc7b0bf47e37' }, "Numeric Field"), h("numeric-field", { key: '54c858e75aaea42ef52580f31e89e6cfb2872e58', label: "Controlled Numeric Input", placeholder: "Enter number...", value: this.controlledNumericValue, min: "0", max: "100", step: "1", onChange: this.handleControlledNumericChange }), h("p", { key: '0fb607f8d5d2890c9d777792ec86eaf47aa8d467', class: "value-display" }, "Value: ", this.controlledNumericValue)), h("div", { key: 'a7f8e537d6c769129a66d98ad88306ebcda48da6', class: "input-example" }, h("h3", { key: '43cac26cb5a7c97e81d6cb079c853df67b93bc32' }, "Text Area"), h("text-area", { key: 'bf6fa1b6edc51798d6db4c8261c3114b62f922e1', label: "Controlled Text Area", placeholder: "Enter description...", value: this.controlledTextAreaValue, minRows: 3, maxRows: 6 }), h("p", { key: '4eab773e3ff0faec1bed1b7f06437fc44b370f70', class: "value-display" }, "Value: ", this.controlledTextAreaValue)), h("div", { key: 'b046957511aead089862c702264ba0e742f1b68d', class: "input-example" }, h("h3", { key: 'ff62fc57987c3bdbd727bce422df26c4d3bbda8a' }, "Checkbox"), h("check-box", { key: '4b4fe082b6215c11575f5cabc385ef45ca4e7bd6', label: "Controlled Checkbox", checked: this.controlledCheckboxValue, onChange: this.handleControlledCheckboxChange }), h("p", { key: '4c65f141f2a8a7477205f6084d69200346bb0755', class: "value-display" }, "Checked: ", this.controlledCheckboxValue.toString())), h("div", { key: 'a48006413538b9981670434ae6c944e7e58271f9', class: "input-example" }, h("h3", { key: '45383efba3e427ff11d43044fa01e57ed471fdc5' }, "Toggle"), h("stencil-toggle", { key: '44848de53876d025aec88a2860eb9e60b579f568', label: "Controlled Toggle", checked: this.controlledToggleValue, onChange: this.handleControlledToggleChange }), h("p", { key: '3d629c545ba9202e853093ee999ce4eec10601f6', class: "value-display" }, "Toggled: ", this.controlledToggleValue.toString())), h("div", { key: '4241e9b1fd8664e728d04f3b17ce76b08ccce7b8', class: "input-example" }, h("h3", { key: 'd83a696d7301047672071daa973056c379aa174c' }, "Date Selector"), h("udp-date-selector", { key: 'd1fdf59f30ad9b4640f614078f718e2e37957f50', label: "Controlled Date", value: this.controlledDateValue, onChange: this.handleControlledDateChange }), h("p", { key: '109f4a7821a45bb4f9e63807db0f456d71bb79e5', class: "value-display" }, "Date: ", this.controlledDateValue)), h("div", { key: '38844d4720ddc7c7ffcf3611ec264aaf82771ef9', class: "input-example" }, h("h3", { key: '40479e7e8704d9672a55642806d5d9adf76ad5b5' }, "DateTime Selector"), h("udp-datetime-selector", { key: '88028b3e9499217f4df97f5fc6186891bcd95b18', label: "Controlled DateTime", value: this.controlledDateTimeValue, onChange: this.handleControlledDateTimeChange }), h("p", { key: '41f26787189f9e38213ab5c12d5e23090e4b73fc', class: "value-display" }, "DateTime: ", this.controlledDateTimeValue)), h("div", { key: '72d82de355d314169aa1786dba5e314a4a3c2780', class: "input-example" }, h("h3", { key: '13d248566f080175992873afbce91e0776425351' }, "Time Selector"), h("udp-time-selector", { key: '4eef41d123a13fed720ddb5d6f1ff502d12b3382', label: "Controlled Time", value: this.controlledTimeValue, onChange: this.handleControlledTimeChange }), h("p", { key: '09b646081621e5bbc0ea04e1a6082e2aeecb8ce2', class: "value-display" }, "Time: ", this.controlledTimeValue)), h("div", { key: 'ebed47a9e2ff7fe2f88726c433e2b9a581dbac2c', class: "input-example" }, h("h3", { key: '9a294a5894d1e29b036bc6b773acad0091a7b98b' }, "UDP Selector"), h("udp-selector", { key: 'd3a6adf65d0d4a93677b2fa887fda79c726ef819', label: "Controlled Selector", options: this.selectorOptions, value: this.controlledSelectorValue, onChange: this.handleControlledSelectorChange }), h("p", { key: '68a33dabe7906580dbc91deab34595aaa6439903', class: "value-display" }, "Selected: ", this.controlledSelectorValue)), h("div", { key: '3319c740db491c5eb68011418cac7c7c8551123c', class: "input-example" }, h("h3", { key: 'e6d760ebd7e941267da381e1b763d4529a0940ea' }, "File Upload"), h("file-upload", { key: 'a1726d26e4d3de052646de14cd9fdaf4d6cc2a34', label: "Controlled File Upload", allowMultiple: true, onChange: this.handleControlledFileChange }), h("p", { key: '286df59dbec522a45bb0498b0274c9d5b60da51d', class: "value-display" }, "Files: ", this.controlledFileValue.length, " selected")))), h("section", { key: '92e1995b075a1d6a8b08d7121df729b676e0f254', class: "example-section" }, h("h2", { key: '99b8b95638ee6289736fe31c9f92de4fc915ab66' }, "Uncontrolled Components"), h("p", { key: 'ce0ec4155a0d4e0c578cf310a36054b898046e12' }, "Components manage their own state with initial values."), h("div", { key: 'b6be0f3f1de8e43d7d2e3176c9bd0fa80fe41839', class: "input-grid" }, h("div", { key: 'f863c9c473e10a46118792f3b1d4f90c0468f312', class: "input-example" }, h("h3", { key: '76c13a12b2cf46b786a5c6fd6e7ab09a114422ce' }, "Text Field"), h("text-field", { key: '2f002aa2965ba1592614e19cdaf41685eff27a74', label: "Uncontrolled Text Input", placeholder: "Enter text...", initialValue: "Initial text value", onChange: (e) => console.log('Text changed:', e.detail) })), h("div", { key: '7a72540333aa14e138b0776a037c9499218b48a1', class: "input-example" }, h("h3", { key: 'fe756740f658a568b6b025f801472c88d5a2ff69' }, "Numeric Field"), h("numeric-field", { key: '5602a4cfb1439d79b323e7e990c77701fad43c1e', label: "Uncontrolled Numeric Input", placeholder: "Enter number...", initialValue: "42", min: "0", max: "100", onChange: (e) => console.log('Number changed:', e.detail) })), h("div", { key: '8b01079941128dc419490ae9268f3de12f64bbec', class: "input-example" }, h("h3", { key: 'f3bb19ebe3f1eb7860c8670fa05e56100083100c' }, "Text Area"), h("text-area", { key: '77b84fd065898b3f53b4f29d49175ca69d0e9a0c', label: "Uncontrolled Text Area", placeholder: "Enter description...", initialValue: "Initial description text", minRows: 3, onChange: (e) => console.log('Text area changed:', e.detail) })), h("div", { key: '18108e76b0d3cba4d17cb240d991e557e45a4cf0', class: "input-example" }, h("h3", { key: 'd7a8665af975ccfc51fdd6637c65cf090b3e64ee' }, "Checkbox"), h("check-box", { key: '51c64943d73cae575b8354e63a723ce42a4da7a8', label: "Uncontrolled Checkbox", initialValue: "true", onChange: (e) => console.log('Checkbox changed:', e.detail) })), h("div", { key: 'd850416de27eb55f014f91245ab38658f645ec5e', class: "input-example" }, h("h3", { key: '1181811e2e29035b7ebdca214c77fe6994f0f85a' }, "Toggle"), h("stencil-toggle", { key: 'f1f911a89e6a325fa136cfef4a8706bf6f7ca0bf', label: "Uncontrolled Toggle", initialValue: "false", onChange: (e) => console.log('Toggle changed:', e.detail) })), h("div", { key: '78138f2afb3865b8b726c871d5b66c0a765fdc3b', class: "input-example" }, h("h3", { key: '737ebb728f6dc1c3667ee4797470f2b4253ac531' }, "Date Selector"), h("udp-date-selector", { key: '46794fcb28892c784028b112e23017f68688fe71', label: "Uncontrolled Date", initialValue: "2024-01-15", onChange: (e) => console.log('Date changed:', e.detail) })), h("div", { key: '7d4321f22573a578f3c97f42ff909c8dba89c239', class: "input-example" }, h("h3", { key: 'f5bea7039842c10d1d18c12dbf148a7e4406aaf0' }, "Time Selector"), h("udp-time-selector", { key: '59bc40ac5ff2cb5ce2d5cac649456761e4acd024', label: "Uncontrolled Time", initialValue: "14:30", onChange: (e) => console.log('Time changed:', e.detail) })), h("div", { key: 'd38663af248b165fd945b435d139645778dd15a6', class: "input-example" }, h("h3", { key: '4a71a7d7ab4fc85b882a7ad510f106ef8af845e2' }, "DateTime Selector"), h("udp-datetime-selector", { key: '0e50bb043a1e29c1b1196099182f2cfbe4d5780e', label: "Uncontrolled DateTime", initialValue: "2024-01-15T14:30", onChange: (e) => console.log('DateTime changed:', e.detail) })), h("div", { key: 'b0018485ce72a2e345e4324df645c167d605e270', class: "input-example" }, h("h3", { key: 'a476c75bee67f99b8190c2eee40bcf3f3681e0f5' }, "UDP Selector"), h("udp-selector", { key: '8734d212c8e57b566331ce9a5a3658673979e496', label: "Uncontrolled Selector", options: this.selectorOptions, initialValue: "option2", onChange: (e) => console.log('Selector changed:', e.detail) })))), h("section", { key: '182dc382da022fea80addb395b7e73d0e686db75', class: "example-section" }, h("h2", { key: '0e74791316e43917b64aa88437d3195c7e01d518' }, "Form-wrapped Components"), h("p", { key: '22f0b0ad471b5a64e6f1e2dd560c4591381deb1d' }, "Components integrated with stencil-form and stencil-field for validation and state management."), h("stencil-form", { key: '7d6510a9ac5a7f4b3ff67d6e23d6a61a803cfefa', handleSubmit: this.handleFormSubmit, handleChange: this.handleFormChange, handleValidate: this.validateForm, initialValues: {
                 formTextField: 'Initial form text',
                 formNumericField: '25',
                 formTextArea: 'Initial form description',
@@ -100,7 +100,7 @@ export class InputsExample {
                 formDate: '2024-02-01',
                 formTime: '09:00',
                 formSelector: 'option1'
-            } }, h("div", { key: 'efcf2196b2603a552bfedd3591b3ca6b1b5a71f1', class: "form-grid" }, h("stencil-field", { key: '5231c6f402747272e1e89b26d110ff86f0aa7a3b', name: "formTextField" }, h("text-field", { key: 'c8e245f52997e27f27f93454ab24cbff224cc583', label: "Form Text Field", placeholder: "Enter text...", required: true })), h("stencil-field", { key: 'ca91becfc791148116d60d0e905b1a3daa5b9db3', name: "formNumericField" }, h("numeric-field", { key: '44347c0895f0f8b501a421cf761cadacd0932c6f', label: "Form Numeric Field", placeholder: "Enter number...", min: "0", max: "100", required: true })), h("stencil-field", { key: 'c7b4b216d3106c9af75392e54725e8a21f8ca3b3', name: "formTextArea" }, h("text-area", { key: '9de49a3341b5987f0bde64ce14c3ebc7e88cc74a', label: "Form Text Area", placeholder: "Enter description...", required: true, minRows: 3 })), h("stencil-field", { key: '56d39f44ea989beed99ad8d7c5bdd645e5c817aa', name: "formCheckbox" }, h("check-box", { key: 'ef7c6aafba7e06b2774088c4f5ac98edbf367a7c', label: "Accept Terms and Conditions", required: true })), h("stencil-field", { key: '54e05f275558330b2c37afa140a8f6926e726180', name: "formToggle" }, h("stencil-toggle", { key: '8c8b1925bd17463429b5badcac307857bc84cec2', label: "Enable Notifications" })), h("stencil-field", { key: '1415837b1d0fa0e092fc40b40929b87cddf47410', name: "formDate" }, h("udp-date-selector", { key: '9ebbe59d298c8648c10b9e7f6ed39de46715b6b2', label: "Form Date", required: true })), h("stencil-field", { key: 'f48570db700715597bf2e45fd9c2892d023e6897', name: "formTime" }, h("udp-time-selector", { key: 'edbdbff32cc3c225ed56c3b94c613005dfdcde39', label: "Form Time" })), h("stencil-field", { key: '8437d71e061aa088e4cba83225a521c44a4ca3d2', name: "formSelector" }, h("udp-selector", { key: '6d1983d097f69466060cd3278d6ec58e220e8d77', label: "Form Selector", options: this.selectorOptions, required: true })), h("stencil-field", { key: '41ab83071b303dfd1c8763a46895c792344a0f1e', name: "formFiles" }, h("file-upload", { key: '7d9a05439319655c232bd27ab6961c1f6db8d883', label: "Form File Upload", allowMultiple: true }))), h("div", { key: 'ca241b12f04441dbf884d57d13e84f0dbccb7f65', class: "form-actions" }, h("button", { key: '9ab10fa33f12f8c376e95c97732b40717dd2b0b5', type: "submit", class: "submit-button" }, "Submit Form"))), h("div", { key: '0c80c817538bd6bd0f00c6197cb3c2793daaf910', class: "form-values" }, h("h3", { key: 'dfd5d67e510aa606c99450d4f4f08342a0661319' }, "Current Form Values:"), h("pre", { key: 'a10e287b7066a43cc69130830ded4da6aa0c1556' }, JSON.stringify(this.formValues, null, 2)))), h("section", { key: 'd099ca8f995aa1f7262af5338873bf94754811f3', class: "example-section" }, h("h2", { key: '7cb065039260f3e516133e32d6253240aece1a35' }, "Additional Examples"), h("p", { key: '62617e685432dde1d659eca861b554f064ec24fa' }, "More complex configurations and specialized use cases."), h("div", { key: 'c533b992028051734003b0be0bd5d0985806358a', class: "input-grid" }, h("div", { key: 'fce996f18ec7e4bc7f159047c97fd1066f45a8a9', class: "input-example" }, h("h3", { key: 'c94a1ba5d9cd5156cfd7ef1f4015a057d710e0a5' }, "Multi-Select UDP Selector"), h("udp-selector", { key: '53b28993b382889d27919e3a7d9405a5fd32aaf8', label: "Multi-Select Selector", options: this.selectorOptions, multiSelect: true, initialValue: "option1,option3", onChange: (e) => console.log('Multi-select changed:', e.detail) })), h("div", { key: 'ce2255624cb7db841d30dda4cca5af6f1024cd7d', class: "input-example" }, h("h3", { key: '69d19bcd69cf2bebff41c872eb582a32a594900a' }, "Large UDP Selector"), h("udp-selector", { key: '559044cb64b37d8e08effe91bb1950990085e82b', label: "Large Selector", options: this.selectorOptions, large: true, initialValue: "option2", onChange: (e) => console.log('Large selector changed:', e.detail) })), h("div", { key: '0947306acbc6628996b3ad444fe0b2849590bb3b', class: "input-example" }, h("h3", { key: 'da9050afe5f7be2d078fcf3d5f7e0987cc26cda5' }, "File Upload with Type Restrictions"), h("file-upload", { key: '3f57ad462161a807e56cba39d3b68f8cb287e851', label: "Image Upload Only", allowedFileTypes: ['jpg', 'jpeg', 'png', 'gif'], allowMultiple: false, browseFileMessage: "Select an Image", onChange: (e) => console.log('Image upload changed:', e.detail) })), h("div", { key: '16217dff92f04c11145583b6c3879828bb63de18', class: "input-example" }, h("h3", { key: 'ad5625e7ffb1ef843f8831be4e4a5b65be32ba76' }, "Disabled Components"), h("div", { key: '22f9b761b49d601000d39a64ea698115ded20a17', class: "disabled-examples" }, h("text-field", { key: '35b8b2c6e57f555633c523a09db515666af3178f', label: "Disabled Text Field", value: "Cannot edit this", disabled: true }), h("check-box", { key: '73df91016a0cecb031e4d6b4c82b7b8bbd320589', label: "Disabled Checkbox", checked: true, disabled: true }), h("udp-selector", { key: '42cd089facfb8bd98e2ec5419ff5d32d18055bb7', label: "Disabled Selector", options: this.selectorOptions, value: "option1", disabled: true })))))));
+            } }, h("div", { key: '4c3acd2264ca5a61bbf40917e742d55be678c5da', class: "form-grid" }, h("stencil-field", { key: 'b4ca78596d2aef8cc0f2c5a85adfa8df147f9bef', name: "formTextField" }, h("text-field", { key: '2728029a47760daa7a67d4144b6c1647e2934dd7', label: "Form Text Field", placeholder: "Enter text...", required: true })), h("stencil-field", { key: '28a17c16e33499b7ec208cc0459e075ec5a76c9b', name: "formNumericField" }, h("numeric-field", { key: '7c6edb230784665a312c82901bda77fc876697a1', label: "Form Numeric Field", placeholder: "Enter number...", min: "0", max: "100", required: true })), h("stencil-field", { key: 'eb5947f21056c3cbbc53d063340527d8dae96365', name: "formTextArea" }, h("text-area", { key: '760c3553c309f2c132179d4bc6323fc6492c3837', label: "Form Text Area", placeholder: "Enter description...", required: true, minRows: 3 })), h("stencil-field", { key: 'e31f53fbbce59a7d49fa99f321888bc874b01972', name: "formCheckbox" }, h("check-box", { key: '3771e81b0f4430f9cca07f1457ec0b75f1031eff', label: "Accept Terms and Conditions", required: true })), h("stencil-field", { key: '9ca02ff8c5c067a3288ce13bcb9347359f9195f3', name: "formToggle" }, h("stencil-toggle", { key: '10f7bde9a8edde29d638a5592787c415654e6368', label: "Enable Notifications" })), h("stencil-field", { key: 'd30d821fedd9f94a5c816203522db312e5861bc6', name: "formDate" }, h("udp-date-selector", { key: 'e73f814ec0bc86dbd3538af31306c797479c476d', label: "Form Date", required: true })), h("stencil-field", { key: 'f8180949e6d0c3aec19b0c4b206f004f9aa2e258', name: "formTime" }, h("udp-time-selector", { key: '59c0e0bbcec7e0c59f7bfe43d4571507926d08f5', label: "Form Time" })), h("stencil-field", { key: 'ddb1f59940d2ffb2cdd02ddd64593be6923bf4b7', name: "formSelector" }, h("udp-selector", { key: '09e82dda4fe421b68b12848ac162240104e4dd6a', label: "Form Selector", options: this.selectorOptions, required: true })), h("stencil-field", { key: 'b836ed682cb45ec90b78821cb82f10ca5ea676c3', name: "formFiles" }, h("file-upload", { key: 'a8337a623851b31c4acf2f294828ed9ec76b4739', label: "Form File Upload", allowMultiple: true }))), h("div", { key: 'e6b81aecf417b8077197a2925a57275eb2407764', class: "form-actions" }, h("button", { key: 'bc47fe7038b8f224745ae1ce101da82e5772b4b3', type: "submit", class: "submit-button" }, "Submit Form"))), h("div", { key: '752745e88a81808a7874bea7dcf13070d964761f', class: "form-values" }, h("h3", { key: 'ba70a02c4f3c4c5840e89dce5c8333e3f98027e6' }, "Current Form Values:"), h("pre", { key: '5bfc90a17f885e7e41b47e73eaf2a0d01ba8e9e2' }, JSON.stringify(this.formValues, null, 2)))), h("section", { key: '1778db0713a491b61b75293f6ee57b90c6fecf20', class: "example-section" }, h("h2", { key: '94d8d772e3f49e0cbc43796f67505f01494ba890' }, "Additional Examples"), h("p", { key: 'ef4ce8b2bebb9fa6a94b965066fe2b7d6703e96f' }, "More complex configurations and specialized use cases."), h("div", { key: 'f45dd83e6894913b7cc22da8730f3bc9abada5a5', class: "input-grid" }, h("div", { key: '92c270c05d1747340f2cb2b6a0bce7adade5baef', class: "input-example" }, h("h3", { key: '3ff494f9ccd9f1df461927f4b58d39c71e07171d' }, "Multi-Select UDP Selector"), h("udp-selector", { key: 'f9d5d28836a2a0e0694775655f07f2cd1b17cd06', label: "Multi-Select Selector", options: this.selectorOptions, multiSelect: true, initialValue: "option1,option3", onChange: (e) => console.log('Multi-select changed:', e.detail) })), h("div", { key: 'cdc145e98cf83ae5ff4a5b1599eb0ac5c5cfe04a', class: "input-example" }, h("h3", { key: 'c8321fbcb13460216d415b6f6086c01fc837faf9' }, "Large UDP Selector"), h("udp-selector", { key: '30daad81514fcbc8cd1ae7b8ca4ebe57f19b33b0', label: "Large Selector", options: this.selectorOptions, large: true, initialValue: "option2", onChange: (e) => console.log('Large selector changed:', e.detail) })), h("div", { key: '7d703caa09925ac7221296422c6bfe7415187646', class: "input-example" }, h("h3", { key: '7a7b5e085594c15dc11bb01e786e18c4edafbd64' }, "File Upload with Type Restrictions"), h("file-upload", { key: 'e2941cb3e03bc86696bbce3146b77fd5a311e6c6', label: "Image Upload Only", allowedFileTypes: ['jpg', 'jpeg', 'png', 'gif'], allowMultiple: false, browseFileMessage: "Select an Image", onChange: (e) => console.log('Image upload changed:', e.detail) })), h("div", { key: '216b5c93bb960345ac62770a8bda5c85c527f1fa', class: "input-example" }, h("h3", { key: '91faff234095fdbf962c39b8101c1d2e89f0f8d3' }, "Disabled Components"), h("div", { key: 'f1b1e093a0cebf1999d5c2332ca95fe7748b9d6a', class: "disabled-examples" }, h("text-field", { key: '225dca34033c0b6c3dd86461cb8b2e64cee24a2b', label: "Disabled Text Field", value: "Cannot edit this", disabled: true }), h("check-box", { key: '64dcf3f40a5b1abe44fb32a29059469c89128bba', label: "Disabled Checkbox", checked: true, disabled: true }), h("udp-selector", { key: '86827b73670a641b2eba08196c54f2051a696911', label: "Disabled Selector", options: this.selectorOptions, value: "option1", disabled: true })))))));
     }
     static get is() { return "inputs-example"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/page-renderer/page-renderer.js

@@ -7,7 +7,7 @@ export class PageRenderer {
         return (h("div", { style: { border: '1px solid #ff6a00', padding: '10px', margin: '10px 0', borderRadius: '5px', color: '#ff6a00', backgroundColor: '#fff3e0' } }, h("unity-typography", null, "Content currently unavailable ( ", h("span", { style: { fontWeight: '700' } }, componentName), " ). We're working to make this available to you soon!")));
     }
     render() {
-        return (h("div", { key: '1c24e76c6dc3ff76df88d2203d6b5bf762d6b20f' }, this.pageData.map((data) => {
+        return (h("div", { key: '7300d352c088dfd4796240bddf641f3491fc0e3d' }, this.pageData.map((data) => {
             // Prepare properties from metaData, ensuring any existing keys that
             // match your direct props are overridden.
             const gridProps = Object.assign(Object.assign({}, data.properties), {

package/dist/collection/theme/color-preview/color-preview.js

@@ -10,7 +10,7 @@ export class ColorPreview {
         return (h("div", { class: "color-section" }, h("unity-typography", { variant: "h4" }, title), h("div", { class: "color-grid" }, this.renderColorBox(`--${prefix}-color-main`, `--${prefix}-contrast-text`), this.renderColorBox(`--${prefix}-color-dark`, `--${prefix}-contrast-text`), this.renderColorBox(`--${prefix}-color-light`, `--${prefix}-contrast-text`), this.renderColorBox(`--${prefix}-color-hint`, `--${prefix}-contrast-text`))));
     }
     render() {
-        return (h("div", { key: 'b9d28659e92e4fd4211283ad8d9d4cc4b89227a1', class: "container" }, h("unity-typography", { key: '6ae71d5e546969c04e3b517879dc8798de6758e5', variant: "h2" }, "Unity Theme"), h("div", { key: 'bbf373dff37916ac06bd3c525e2e6894a6d1f959', class: "theme-section" }, h("div", { key: '53a93b2d6d105871218fbcf099af2db67da759c2', class: "unity-theme" }, this.renderColorSection('Primary Colors', 'primary'), this.renderColorSection('Secondary Colors', 'secondary'))), h("unity-typography", { key: '7f11dcbeeddd63cf3f2fb8967c1c998b56cca28f', variant: "h2" }, "SAP Theme"), h("div", { key: '8211f3c961758b530fc65181376a79f8a01db13a', class: "theme-section" }, h("div", { key: '8fd5fe3896c6b36660348745da33208fd313b99c', class: "sap-theme" }, this.renderColorSection('Primary Colors', 'primary'), this.renderColorSection('Secondary Colors', 'secondary'))), h("unity-typography", { key: 'b0e1469eba809cad5ce5960fb7e57cc8997fa12f', variant: "h2" }, "Status Colors"), h("div", { key: '44cddcae4395207ab6c027c7b97a5dc507fd501c', class: "status-section" }, this.renderStatusSection('Success', 'success'), this.renderStatusSection('Error', 'error'), this.renderStatusSection('Warning', 'warning'), this.renderStatusSection('Info', 'info'), this.renderStatusSection('Note', 'note'))));
+        return (h("div", { key: 'af0ff93a70c5af74f8b1e93d60720132d1faa9f4', class: "container" }, h("unity-typography", { key: '576b44cc5891a9ab8a8002bdf4b03a637b77bfc7', variant: "h2" }, "Unity Theme"), h("div", { key: 'e8f7759b3e727137f61eeef54be01ea3b23f1213', class: "theme-section" }, h("div", { key: '96369ddd49f8dc771f2535eae48f817a4551d483', class: "unity-theme" }, this.renderColorSection('Primary Colors', 'primary'), this.renderColorSection('Secondary Colors', 'secondary'))), h("unity-typography", { key: '0b70191cc53b6a2da1070b62bcba2cbe3a2964c1', variant: "h2" }, "SAP Theme"), h("div", { key: 'cf9d784be553912a70c84f9366bec58a28bd2bc6', class: "theme-section" }, h("div", { key: '9289db2ae2ce115cca3e8831f24d51dba67c8c75', class: "sap-theme" }, this.renderColorSection('Primary Colors', 'primary'), this.renderColorSection('Secondary Colors', 'secondary'))), h("unity-typography", { key: '054b2be6009841de2b2bcd105e6805dc49e5132e', variant: "h2" }, "Status Colors"), h("div", { key: '7972dc38ba4ac40b81731748e15320c179338b83', class: "status-section" }, this.renderStatusSection('Success', 'success'), this.renderStatusSection('Error', 'error'), this.renderStatusSection('Warning', 'warning'), this.renderStatusSection('Info', 'info'), this.renderStatusSection('Note', 'note'))));
     }
     static get is() { return "color-preview"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/udp-utilities/layout/udp-dynamic-container-with-menu/chip-section/chip-section.js

@@ -94,13 +94,13 @@ export class ChipSection {
     }
     render() {
         console.log("Rendering ChipSection", this.visibleFilterChips);
-        return (h("div", { key: '97503932df8fda4b368905a88e8aa1e3ef601443', class: "wrapper", id: "chipSectionContainer" }, h("div", { key: '57814e45ad3c18bc0e63000c117843b2b05d61ef', class: "chipHolder" }, h("div", { key: 'ec26227bf3af968aca95ebdcd8ac8f9128f8bb62', id: "viewChipsContainer" }, this.viewChips.map((chip, index) => (h("stencil-chip", { onOnDelete: () => this.handleDelete('view', index), text: chip.label, class: "viewChip" })))), h("udp-dynamic-container-with-menu", { key: '592e4853cd0a478e8779e591392e99928cd2f243', id: "filterChipsContainer", menuItems: this.menuItems }, this.selectedFilterChip && (h("stencil-chip", { key: '90b22a6f40be859668bdb1b878b446029929d0d3', onOnDelete: this.handleFilterChipUntoggle, text: this.selectedFilterChip.label, class: "viewChip" })), console.log('filtering here...', this.filterChips), this.filterChips.map((chip) => {
+        return (h("div", { key: '1f819dd77ec4d57736e7a22d6eca56084f4f4532', class: "wrapper", id: "chipSectionContainer" }, h("div", { key: 'a5a0d06461cc51926104cb18b9079f4ea2dea060', class: "chipHolder" }, h("div", { key: 'ced61e7ededad3aecb698c77b586f5620a207fb6', id: "viewChipsContainer" }, this.viewChips.map((chip, index) => (h("stencil-chip", { onOnDelete: () => this.handleDelete('view', index), text: chip.label, class: "viewChip" })))), h("udp-dynamic-container-with-menu", { key: '152f8d45e16254a52002af1b16d74d4a74dddaaa', id: "filterChipsContainer", menuItems: this.menuItems }, this.selectedFilterChip && (h("stencil-chip", { key: '6a88b12ddb43f82f08642bff2505c6fb7420b0d0', onOnDelete: this.handleFilterChipUntoggle, text: this.selectedFilterChip.label, class: "viewChip" })), console.log('filtering here...', this.filterChips), this.filterChips.map((chip) => {
             if (this.selectedFilterChip && chip.id === this.selectedFilterChip.id) {
                 console.log('returning null...');
                 return null;
             }
             return (h("stencil-chip", { text: `${chip.label} ${chip.value}`, class: "filterChip", onClick: () => this.handleFilterChipToggle(chip) }));
-        })), h("div", { key: '3fcf40061e51d798ebad3024ec893cbcd1fcff2c', id: "additionalFilterChipsContainer" }, this.additionalFilterChips.map((chip, index) => (h("stencil-chip", { onOnDelete: () => this.handleDelete('additionalFilter', index), text: chip.label, class: "additionalFilterChip" })))), !this.hideKpiSection && (h("div", { key: 'b038933ee9d50d99c13c7dae2dababd5c4ede139', class: "KPI", id: "kpiContainer" }, this.kpiValues.slice(0, this.maxKPIsDisplayed).map((kpi) => (h("div", { class: "kpiItem" }, h("span", { class: "kpiLabel" }, this.abbreviateLabel(kpi.label) || kpi.label), h("span", { class: "kpiValue" }, this.abbrNum(kpi.value, 1))))))))));
+        })), h("div", { key: '360f87acdfdccb2545212f7120efd2821bd63655', id: "additionalFilterChipsContainer" }, this.additionalFilterChips.map((chip, index) => (h("stencil-chip", { onOnDelete: () => this.handleDelete('additionalFilter', index), text: chip.label, class: "additionalFilterChip" })))), !this.hideKpiSection && (h("div", { key: 'edfac64a37a8886403f0a1e0a93aafe6ddd35b58', class: "KPI", id: "kpiContainer" }, this.kpiValues.slice(0, this.maxKPIsDisplayed).map((kpi) => (h("div", { class: "kpiItem" }, h("span", { class: "kpiLabel" }, this.abbreviateLabel(kpi.label) || kpi.label), h("span", { class: "kpiValue" }, this.abbrNum(kpi.value, 1))))))))));
     }
     static get is() { return "chip-section"; }
     static get encapsulation() { return "shadow"; }