npm - udp-stencil-component-library - Versions diffs - 25.18.1-beta.6 → 25.18.1-beta.8 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (344) hide show

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

	@@ -1 +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,OAAO,EAAE,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAelF,MAAM,OAAO,OAAO;IALpB;QAQE;;;;;WAKG;QACK,YAAO,GAAwB,MAAM,CAAC;QAErC,cAAS,GAAW,CAAC,CAAC;QACtB,eAAU,GAAgB,EAAE,CAAC,CAAC,qBAAqB;QACnD,gBAAW,GAAyC;YAC3D,KAAK,EAAE,GAAG;YACV,SAAS,EAAE,eAAe;SAC3B,CAAC;QACO,mBAAc,GAAY,KAAK,CAAC;QAChC,oBAAe,GAAY,KAAK,CAAC;QAElC,SAAI,GAAwB,EAAE,CAAC;QAC/B,eAAU,GAAwB,EAAE,CAAC;KAyN9C;IArNC,gBAAgB;QACd,IAAI,CAAC,cAAc,EAAE,CAAC;IACxB,CAAC;IAGD,YAAY;QACV,qBAAqB,CAAC,GAAG,EAAE;YACzB,IAAI,CAAC,oBAAoB,EAAE,CAAC;YAC5B,IAAI,CAAC,WAAW,EAAE,CAAC;QACrB,CAAC,CAAC,CAAC;IACL,CAAC;IAED,gBAAgB;QACd,IAAI,CAAC,cAAc,EAAE,CAAC;IACxB,CAAC;IAGD,iBAAiB;QACf,IAAI,CAAC,gBAAgB,EAAE,CAAC;QACxB,IAAI,CAAC,oBAAoB,EAAE,CAAC;IAC9B,CAAC;IAGD,eAAe;QACb,qBAAqB,CAAC,GAAG,EAAE;YACzB,IAAI,CAAC,oBAAoB,EAAE,CAAC;YAC5B,IAAI,CAAC,WAAW,EAAE,CAAC;QACrB,CAAC,CAAC,CAAC;IACL,CAAC;IAEO,cAAc;;QACpB,IAAI,CAAC,UAAU,GAAG,EAAE,CAAC;QACrB,6BAA6B;QAC7B,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,MAAM,CAC7C,CAAC,KAAK,EAA8B,EAAE,CAAC,KAAK,CAAC,OAAO,CAAC,WAAW,EAAE,KAAK,SAAS,CACjF,CAAC;QAEF,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC;YACtC,KAAK,EAAE,GAAG,CAAC,KAAK;YAChB,IAAI,EAAE,GAAG,CAAC,IAAI;YACd,aAAa,EAAE,GAAG,CAAC,aAAa;YAChC,MAAM,EAAE,GAAG,CAAC,MAAM;YAClB,QAAQ,EAAE,GAAG,CAAC,QAAQ;SACvB,CAAC,CAAC,CAAC;QAEJ,wDAAwD;QACxD,IAAI,CAAA,MAAA,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,SAAS,CAAC,0CAAE,MAAM,MAAI,MAAA,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,SAAS,CAAC,0CAAE,QAAQ,CAAA,EAAE,CAAC;YACzF,+CAA+C;YAC/C,MAAM,eAAe,GAAG,IAAI,CAAC,UAAU,CAAC,SAAS,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC,GAAG,CAAC,MAAM,IAAI,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC;YACvF,gEAAgE;YAChE,IAAI,CAAC,SAAS,GAAG,eAAe,CAAC;QACnC,CAAC;QAED,IAAI,CAAC,gBAAgB,EAAE,CAAC;QAExB,qBAAqB,CAAC,GAAG,EAAE;YACzB,IAAI,CAAC,oBAAoB,EAAE,CAAC;YAC5B,IAAI,CAAC,WAAW,EAAE,CAAC;QACrB,CAAC,CAAC,CAAC;IACL,CAAC;IAEO,gBAAgB;QACtB,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,GAAG,EAAE,KAAK,EAAE,EAAE;YAC/B,GAAG,CAAC,MAAM,GAAG,KAAK,KAAK,IAAI,CAAC,SAAS,CAAC;QACxC,CAAC,CAAC,CAAC;IACL,CAAC;IAEO,oBAAoB;QAC1B,MAAM,YAAY,GAAG,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;QACrD,IAAI,CAAC,YAAY,EAAE,CAAC;YAClB,IAAI,CAAC,WAAW,GAAG,EAAE,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,iBAAiB,EAAE,CAAC;YAClE,OAAO;QACT,CAAC;QAED,IAAI,CAAC,WAAW,GAAG;YACjB,KAAK,EAAE,GAAG,YAAY,CAAC,WAAW,IAAI;YACtC,SAAS,EAAE,cAAc,YAAY,CAAC,UAAU,KAAK;SACtD,CAAC;IACJ,CAAC;IAEO,WAAW;QACjB,IAAI,CAAC,IAAI,CAAC,kBAAkB;YAAE,OAAO;QACrC,MAAM,EAAE,UAAU,EAAE,WAAW,EAAE,WAAW,EAAE,GAAG,IAAI,CAAC,kBAAkB,CAAC;QACzE,MAAM,aAAa,GAAG,WAAW,GAAG,WAAW,CAAC;QAChD,IAAI,CAAC,cAAc,GAAG,aAAa,IAAI,UAAU,GAAG,CAAC,CAAC;QACtD,IAAI,CAAC,eAAe,GAAG,aAAa,IAAI,UAAU,GAAG,WAAW,GAAG,WAAW,GAAG,CAAC,CAAC;IACrF,CAAC;IAEO,UAAU,CAAC,QAAgB;;QACjC,IAAI,MAAA,IAAI,CAAC,UAAU,CAAC,QAAQ,CAAC,0CAAE,QAAQ,EAAE,CAAC;YACxC,OAAO;QACT,CAAC;QAED,IAAI,CAAC,SAAS,GAAG,QAAQ,CAAC;QAE1B,MAAM,SAAS,GAAG,IAAI,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC;QAC5C,MAAM,SAAS,GAAG,IAAI,CAAC,kBAAkB,CAAC;QAE1C,IAAI,CAAC,SAAS,IAAI,CAAC,SAAS;YAAE,OAAO;QAErC,MAAM,EAAE,UAAU,EAAE,WAAW,EAAE,GAAG,SAAS,CAAC;QAC9C,MAAM,OAAO,GAAG,SAAS,CAAC,UAAU,CAAC;QACrC,MAAM,QAAQ,GAAG,OAAO,GAAG,SAAS,CAAC,WAAW,CAAC;QAEjD,MAAM,eAAe,GAAG,EAAE,CAAC;QAE3B,MAAM,YAAY,GAAG,UAAU,GAAG,eAAe,CAAC;QAClD,MAAM,aAAa,GAAG,UAAU,GAAG,WAAW,GAAG,eAAe,CAAC;QAEjE,0DAA0D;QAC1D,IAAI,OAAO,GAAG,YAAY,EAAE,CAAC;YAC3B,uEAAuE;YACvE,SAAS,CAAC,QAAQ,CAAC;gBACjB,IAAI,EAAE,OAAO,GAAG,eAAe;gBAC/B,QAAQ,EAAE,QAAQ;aACnB,CAAC,CAAC;QACL,CAAC;QACD,4DAA4D;aACvD,IAAI,QAAQ,GAAG,aAAa,EAAE,CAAC;YAClC,sEAAsE;YACtE,SAAS,CAAC,QAAQ,CAAC;gBACjB,IAAI,EAAE,QAAQ,GAAG,WAAW,GAAG,eAAe;gBAC9C,QAAQ,EAAE,QAAQ;aACnB,CAAC,CAAC;QACL,CAAC;IACH,CAAC;IAEO,aAAa;QACnB,IAAI,CAAC,IAAI,CAAC,kBAAkB;YAAE,OAAO;QACrC,IAAI,CAAC,kBAAkB,CAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,CAAC,CAAC;IACpE,CAAC;IAEO,WAAW;QACjB,IAAI,CAAC,IAAI,CAAC,kBAAkB;YAAE,OAAO;QACrC,MAAM,SAAS,GAAG,IAAI,CAAC,kBAAkB,CAAC;QAC1C,MAAM,EAAE,WAAW,EAAE,WAAW,EAAE,GAAG,SAAS,CAAC;QAC/C,MAAM,aAAa,GAAG,WAAW,GAAG,WAAW,CAAC;QAChD,SAAS,CAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,aAAa,EAAE,QAAQ,EAAE,QAAQ,EAAE,CAAC,CAAC;IAClE,CAAC;IAED,MAAM;QACJ,OAAO,CACL,4DAAK,KAAK,EAAC,eAAe;YACxB,4DAAK,KAAK,EAAE,cAAc,IAAI,CAAC,OAAO,EAAE;gBACrC,IAAI,CAAC,cAAc,IAAI,CACtB,+DACE,KAAK,EAAC,mBAAmB,EACzB,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,aAAa,EAAE,gBACxB,qBAAqB;oBAE/B,iEAAU,QAAQ,EAAC,eAAe,EAAC,KAAK,EAAC,SAAS,GAAG,CAC/C,CACV;gBAEA,IAAI,CAAC,cAAc,IAAI,4DAAK,KAAK,EAAC,kBAAkB,GAAO;gBAE5D,4DACE,KAAK,EAAC,sBAAsB,EAC5B,GAAG,EAAE,EAAE,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,kBAAkB,GAAG,EAAE,CAAC,EACzC,QAAQ,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,WAAW,EAAE;oBAEjC,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,KAAK,EAAE,EAAE;wBAClC,IAAI,GAAG,CAAC,MAAM,EAAE,CAAC;4BACf,OAAO,IAAI,CAAC;wBACd,CAAC;wBAED,mEAAmE;wBACnE,MAAM,MAAM,GAAG,GAAG,CAAC,IAAI,CAAC,CAAC,CAAC,gBAAU,QAAQ,EAAE,GAAG,CAAC,IAAI,EAAE,KAAK,EAAE,SAAS,GAAI,CAAC,CAAC,CAAC,IAAI,CAAC;wBACpF,mEAAmE;wBACnE,MAAM,OAAO,GAAG,gBAAO,GAAG,CAAC,KAAK,CAAQ,CAAC;wBAEzC,OAAO,CACL,cACE,KAAK,EAAE;gCACL,QAAQ,EAAE,KAAK,KAAK,IAAI,CAAC,SAAS;gCAClC,UAAU,EAAE,CAAC,CAAC,GAAG,CAAC,IAAI;gCACtB,CAAC,QAAQ,GAAG,CAAC,aAAa,EAAE,CAAC,EAAE,CAAC,CAAC,GAAG,CAAC,IAAI;gCACzC,UAAU,EAAE,GAAG,CAAC,QAAQ;6BACzB,EACD,QAAQ,EAAE,GAAG,CAAC,QAAQ,EACtB,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC,EACrC,IAAI,EAAC,KAAK,mBACK,KAAK,KAAK,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,mBAC3C,GAAG,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,EAC9C,GAAG,EAAE,EAAE,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC,GAAG,EAAE,CAAC;4BAEvC,MAAM;4BACN,OAAO,CACD,CACV,CAAC;oBACJ,CAAC,CAAC;oBAEF,4DAAK,KAAK,EAAC,QAAQ,EAAC,KAAK,EAAE,IAAI,CAAC,WAAW,GAAQ,CAC/C;gBAEL,IAAI,CAAC,eAAe,IAAI,4DAAK,KAAK,EAAC,mBAAmB,GAAO;gBAE7D,IAAI,CAAC,eAAe,IAAI,CACvB,+DACE,KAAK,EAAC,oBAAoB,EAC1B,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,WAAW,EAAE,gBACtB,oBAAoB;oBAE/B,iEAAU,QAAQ,EAAC,gBAAgB,EAAC,KAAK,EAAC,SAAS,GAAG,CAC/C,CACV,CACG;YACN,4DAAK,KAAK,EAAC,aAAa;gBACtB,8DAAa,CACT,CACF,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","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"]}
1	+ {"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, Event, EventEmitter } from '@stencil/core';\n\ninterface TabDetail {\n label: 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 /\n (Controlled) The index of the currently active tab.\n * If this prop is provided, the component will be in \"controlled\" mode.\n * The parent must listen for `udpTabChange` to update this value.\n /\n @Prop() value?: number;\n\n /\n (Optional) An array of tab configuration objects.\n * If provided, this will be used to render tabs instead of slotted `<udp-tab>` components.\n * This mode is typically used with controlled tabs.\n /\n @Prop() tabs: TabDetail[] = [];\n\n /\n (Controlled) Emits the index of the tab that was clicked.\n * This is only emitted in \"controlled\" mode (when `value` is provided).\n /\n @Event() udpTabChange: EventEmitter<number>;\n\n @State() internalActiveTab: number = 0; // For uncontrolled mode\n @State() tabDetails: TabDetail[] = []; // Unified details from prop or slot\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 slottedTabs: HTMLUdpTabElement[] = []; // Renamed from `tabs`\n private buttonRefs: HTMLButtonElement[] = [];\n private scrollContainerRef?: HTMLDivElement;\n\n /\n Returns true if the component is in controlled mode.\n /\n private get isControlled(): boolean {\n return this.value != null;\n }\n\n /\n Returns true if tabs are being provided by the `tabs` prop.\n /\n private get useTabsProp(): boolean {\n return this.tabs && this.tabs.length > 0;\n }\n\n /\n Returns the currently active tab index,\n * respecting controlled or uncontrolled mode.\n /\n private get activeTab(): number {\n return this.isControlled ? this.value : this.internalActiveTab;\n }\n\n @Listen('slotchange')\n handleSlotChange() {\n // If we're using the tabs prop, slot changes are irrelevant\n if (this.useTabsProp) return;\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 /\n Watcher for uncontrolled state changes.\n /\n @Watch('internalActiveTab')\n onActiveTabChange(newValue: number) {\n this.updateActiveTabs();\n this.updateSliderPosition();\n this.scrollTabIntoView(newValue);\n }\n\n /\n Watcher for controlled state changes.\n /\n @Watch('value')\n onValueChange(newValue: number) {\n this.updateActiveTabs();\n this.updateSliderPosition();\n this.scrollTabIntoView(newValue);\n }\n\n /\n Watcher for tabs prop changes.\n */\n @Watch('tabs')\n onTabsPropChange() {\n this.initializeTabs();\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\n if (this.useTabsProp) {\n // --- Prop-based ---\n this.tabDetails = this.tabs.map(t => ({ ...t })); // Use data from prop\n this.slottedTabs = []; // Ensure we're not tracking slotted tabs\n } else {\n // --- Slot-based ---\n this.slottedTabs = Array.from(this.el.children).filter(\n (child): child is HTMLUdpTabElement => child.tagName.toLowerCase() === 'udp-tab',\n );\n\n this.tabDetails = this.slottedTabs.map(tab => ({\n label: tab.label,\n icon: tab.icon,\n iconPlacement: tab.iconPlacement,\n hidden: tab.hidden,\n disabled: tab.disabled,\n }));\n }\n\n // --- Common Logic ---\n // In uncontrolled mode, check if the default active tab is invalid.\n if (!this.isControlled) {\n if (this.tabDetails[this.internalActiveTab]?.hidden \|\| this.tabDetails[this.internalActiveTab]?.disabled) {\n const firstValidIndex = this.tabDetails.findIndex(tab => !tab.hidden && !tab.disabled);\n this.internalActiveTab = firstValidIndex > -1 ? firstValidIndex : 0;\n }\n }\n\n this.updateActiveTabs();\n\n requestAnimationFrame(() => {\n this.updateSliderPosition();\n this.checkScroll();\n });\n }\n\n private updateActiveTabs() {\n // Only update slotted tabs if we're in slot mode\n if (!this.useTabsProp) {\n const currentActiveTab = this.activeTab;\n this.slottedTabs.forEach((tab, index) => {\n tab.active = index === currentActiveTab;\n });\n }\n // If in prop mode, the <button> 'active' class is handled by render()\n }\n\n private updateSliderPosition() {\n const activeButton = this.buttonRefs[this.activeTab]; // Use getter\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 if (this.isControlled) {\n // In controlled mode, emit the event for the parent to handle.\n // The `onValueChange` watcher will handle UI updates when the prop changes.\n this.udpTabChange.emit(tabIndex);\n } else {\n // In uncontrolled mode, update state directly.\n // The `onActiveTabChange` watcher will handle UI updates.\n this.internalActiveTab = tabIndex;\n }\n }\n\n private scrollTabIntoView(tabIndex: number) {\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 const safeZoneLeft = scrollLeft + safeZonePadding;\n const safeZoneRight = scrollLeft + clientWidth - safeZonePadding;\n\n if (tabLeft < safeZoneLeft) {\n container.scrollTo({\n left: tabLeft - safeZonePadding,\n behavior: 'smooth',\n });\n } else if (tabRight > safeZoneRight) {\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 const currentActiveTab = this.activeTab; // Use getter\n\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 labelEl = <span>{tab.label}</span>;\n\n return (\n <button\n class={{\n 'active': index === currentActiveTab,\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 === currentActiveTab ? 'true' : 'false'}\n aria-disabled={tab.disabled ? 'true' : 'false'}\n ref={el => (this.buttonRefs[index] = el)}\n >\n {iconEl}\n {labelEl}\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\n {!this.isControlled && !this.useTabsProp && (\n <div>\n <slot></slot>\n </div>\n )}\n </div>\n );\n }\n}\n"]}

package/dist/collection/components/my-component/UI/tabs/tab/udp-tab.css CHANGED Viewed

@@ -1,11 +1,9 @@
 .tab-panel {
     display: none;
-    background-color: #ffffff;
   }
   .tab-panel.active {
     display: block;
   }

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

@@ -23,7 +23,7 @@ export class UdpTab {
         this.disabled = false;
     }
     render() {
-        return (h("div", { key: '0dbc41862f8bb01ecfec94ca44f082f0e4e7104f', class: { 'tab-panel': true, 'active': this.active }, role: "tabpanel" }, h("slot", { key: 'facc5f18260ea67c405dca1a90dcdc48e5ec995c' })));
+        return (h("div", { key: '20ba03ac77abb9cde63aa864aac67db7c57bf66a', class: { 'tab-panel': true, 'active': this.active }, role: "tabpanel" }, h("slot", { key: 'd4b0450e94770421adae0e47c0b868d00cdf772d' })));
     }
     static get is() { return "udp-tab"; }
     static get originalStyleUrls() {
@@ -38,7 +38,7 @@ export class UdpTab {
     }
     static get properties() {
         return {
-            "title": {
+            "label": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
@@ -55,7 +55,7 @@ export class UdpTab {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "title"
+                "attribute": "label"
             },
             "active": {
                 "type": "boolean",

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

	@@ -1 +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,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"]}
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,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() label: 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/tabs/udp-tab-panel/udp-tab-panel.css ADDED Viewed

@@ -0,0 +1,11 @@
+:host {
+  display: block;
+}
+.tab-panel {
+  display: none;
+}
+.tab-panel.active {
+  display: block;
+}

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

@@ -0,0 +1,65 @@
+import { h } from "@stencil/core";
+export class UdpTabPanel {
+    render() {
+        const isActive = this.value === this.index;
+        return (h("div", { key: 'eaa68aa3e874dbf92d218eed44f6332efd7b4946', class: {
+                'tab-panel': true,
+                'active': isActive,
+            }, role: "tabpanel", "aria-hidden": !isActive ? 'true' : 'false' }, h("slot", { key: '5ebaeac17012121bcdf75249edd5042f47473f58' })));
+    }
+    static get is() { return "udp-tab-panel"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["udp-tab-panel.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["udp-tab-panel.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "value": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The active tab index, provided by the parent."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "value"
+            },
+            "index": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The index this panel corresponds to."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "index"
+            }
+        };
+    }
+}
+//# sourceMappingURL=udp-tab-panel.js.map

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

@@ -0,0 +1 @@

+ {"version":3,"file":"udp-tab-panel.js","sourceRoot":"","sources":["../../../../../../src/components/my-component/UI/tabs/udp-tab-panel/udp-tab-panel.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAOnD,MAAM,OAAO,WAAW;IAWtB,MAAM;QACJ,MAAM,QAAQ,GAAG,IAAI,CAAC,KAAK,KAAK,IAAI,CAAC,KAAK,CAAC;QAE3C,OAAO,CACL,4DACE,KAAK,EAAE;gBACL,WAAW,EAAE,IAAI;gBACjB,QAAQ,EAAE,QAAQ;aACnB,EACD,IAAI,EAAC,UAAU,iBAEF,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO;YAEzC,8DAAa,CACT,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Prop } from '@stencil/core';\n\n@Component({\n tag: 'udp-tab-panel',\n styleUrl: 'udp-tab-panel.css',\n shadow: true,\n})\nexport class UdpTabPanel {\n /**\n * The active tab index, provided by the parent.\n */\n @Prop() value: number;\n\n /**\n * The index this panel corresponds to.\n */\n @Prop() index: number;\n\n render() {\n const isActive = this.value === this.index;\n\n return (\n <div\n class={{\n 'tab-panel': true,\n 'active': isActive,\n }}\n role=\"tabpanel\"\n // Use aria-hidden for accessibility and :host styling\n aria-hidden={!isActive ? 'true' : 'false'}\n >\n <slot></slot>\n </div>\n );\n }\n}\n"]}

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

@@ -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: '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 }))));
+        return (h("div", { key: 'cad9b6256dbad649083ef3e26f13bff47e3d427d', class: "header" }, h("stencil-icon-button", { key: '79958d8a6a7993575923b87ac3a61180116fc614', noBackground: true, darkIcon: false, icon: Menu24 }), h("unity-typography", { key: 'ccd072e7ca26b9070ba990289b637608e903d1c0', variant: 'data-display-one' }, " ", h("slot", { key: 'af2e0183590ea54d48be89d36418281633fc6453' }), "   "), h("a", { key: '36a8c2006d5d0c25d9f4ef2691f86324d875503f', class: "skip-to-content", href: "#main-content" }, "Skip to main content"), h("div", { key: '2ccd08207f64f0d9a4854f34119765ed5fd48595', class: "header__logo" }), h("div", { key: 'b6cacb7037f36dfb81cb7e66f8cf268b96f84ae9', class: "header__nav", role: "navigation", "aria-label": "Carbon Design System" }), h("div", { key: '9c147941d4b7d762cd9a1d97e7053190f3e6f0fc', class: "header__global" }, h("udp-avatar", { key: '15830daddc4f25488ec07014720762232e5e304a', 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 CHANGED Viewed

@@ -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: '63ea7c8c6831190e02052214270b60939e300039' }, h("slot", { key: '7745b374f2a3c64dbd29e414d3350bdfc984bdf6' })));
+        return (h(Host, { key: 'a15d6cd564f8aef008068decd2c423239e7caa89' }, h("slot", { key: '6e79729b7819373e24a9b7f91c31a15960a09363' })));
     }
     static get is() { return "ghost-render"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1,7 +1,7 @@
 import { h } from "@stencil/core";
 export class AmbientDemoContainer {
     render() {
-        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' })));
+        return (h("div", { key: '75dd493b0eed427f414786dcc666948afb7b40db', class: "container" }, h("div", { key: 'debe96ae62cfd10154da7432ef470e21d1ab879b', class: "title-container" }, " ", h("unity-typography", { key: '64cfc0fcbb5b745004e914fe5819d5a608b83fc4', variant: "button" }, " ", this.title, " "), " "), h("slot", { key: 'c75ba7fa50059017da74ac203c9251ab79973645' })));
     }
     static get is() { return "ambient-demo-container"; }
     static get encapsulation() { return "shadow"; }

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

@@ -91,7 +91,7 @@ export class InputsExample {
         };
     }
     render() {
-        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: {
+        return (h("div", { key: '6b50ded2b5937f9d1c0a103393b99e2a6f48c6e8', class: "inputs-example" }, h("h1", { key: '7b2298487532b8508bc4fe15e7b46879fd60399d' }, "Input Components Examples"), h("section", { key: '475beb2ff7e6f0d2a94f545efc068c93ebcbd6e8', class: "example-section" }, h("h2", { key: 'bb8636068a53c2be053bba146de8d6a079f5df2d' }, "Controlled Components"), h("p", { key: '2d29719a77cafa91d6daf88380dacd0978e1915a' }, "Parent component manages state and passes values to child components."), h("div", { key: '293c65cb3f38c26cabe875d9ab104d2e276b4b3c', class: "input-grid" }, h("div", { key: 'b88953b136c63c09704ae12a864997a6899c3d6f', class: "input-example" }, h("h3", { key: '8d27f5037a4064c4ae7df9622fd2a42314782fc0' }, "Text Field"), h("text-field", { key: '19190ab403f17711e8a4f344ac44d4542ac127fc', label: "Controlled Text Input", placeholder: "Enter text...", value: this.controlledTextValue }), h("p", { key: 'feaeed71f390846c35eee957cafb60fc1600d98b', class: "value-display" }, "Value: ", this.controlledTextValue)), h("div", { key: '20c5515f35e06ad1648682ea752ec0561008150a', class: "input-example" }, h("h3", { key: '4345172c87f8c427166b2e5533007470513e5c7f' }, "Numeric Field"), h("numeric-field", { key: '27556ce43e88bb47073731c8383bcd4f8eb741be', label: "Controlled Numeric Input", placeholder: "Enter number...", value: this.controlledNumericValue, min: "0", max: "100", step: "1", onChange: this.handleControlledNumericChange }), h("p", { key: 'cfd7b6473c71ae63e2d337a0ed38cac7fe488249', class: "value-display" }, "Value: ", this.controlledNumericValue)), h("div", { key: '1a5ab5c84878d698b23129dc8f8b7f2a46a74488', class: "input-example" }, h("h3", { key: '8ff0bd3644b2027f1ccf4607a001fa896ee74809' }, "Text Area"), h("text-area", { key: '8b54d457a09424321443dc4e48e140431ae45a1a', label: "Controlled Text Area", placeholder: "Enter description...", value: this.controlledTextAreaValue, minRows: 3, maxRows: 6 }), h("p", { key: 'e24c877d209de29cbb9aa8596d022036182388c4', class: "value-display" }, "Value: ", this.controlledTextAreaValue)), h("div", { key: 'cb3d16fcfef9bd860c9c789cdde68990c91735c4', class: "input-example" }, h("h3", { key: '8e91f172f4e98d293845738a8afb9584bb5198bf' }, "Checkbox"), h("check-box", { key: '676dbaabea69be3f5f91d17c7986adca52b06da1', label: "Controlled Checkbox", checked: this.controlledCheckboxValue, onChange: this.handleControlledCheckboxChange }), h("p", { key: '43a8f4032222fd5368f7fca421ff66f2f292b26c', class: "value-display" }, "Checked: ", this.controlledCheckboxValue.toString())), h("div", { key: '17a38692b2912c00977d22a89cf900fe4db8413f', class: "input-example" }, h("h3", { key: '3715bf330765086639bc0980352f1c826a7e54db' }, "Toggle"), h("stencil-toggle", { key: 'b62845365cf967114fc651ec4588cdb5af35994f', label: "Controlled Toggle", checked: this.controlledToggleValue, onChange: this.handleControlledToggleChange }), h("p", { key: '97565ba674f96a56f053c15ee4b305b00fca3cd9', class: "value-display" }, "Toggled: ", this.controlledToggleValue.toString())), h("div", { key: '7f52b0eb5bf59430918c4742de2d90a24bb22b72', class: "input-example" }, h("h3", { key: 'd8648dd0e8239f2f8e15e7177048b2586930e1aa' }, "Date Selector"), h("udp-date-selector", { key: '8e8bc3b6eba6dc91cb2ba8f19b8c16f810fa101b', label: "Controlled Date", value: this.controlledDateValue, onChange: this.handleControlledDateChange }), h("p", { key: '5e0f507d8f80e3a5506eb03a50e00341fb7f089d', class: "value-display" }, "Date: ", this.controlledDateValue)), h("div", { key: 'f96eee6cc3a0035c4d170b4675ce4b42ae0316f2', class: "input-example" }, h("h3", { key: '869940774405ef3881864c796082b6748b9d312b' }, "DateTime Selector"), h("udp-datetime-selector", { key: 'c7359174b839e386b879fce4bdbcbc94bc16f47f', label: "Controlled DateTime", value: this.controlledDateTimeValue, onChange: this.handleControlledDateTimeChange }), h("p", { key: '89f0e05b0becbfe819f400614efe04a3ba0146d0', class: "value-display" }, "DateTime: ", this.controlledDateTimeValue)), h("div", { key: 'fe08bb2860efc4214cd1c84a01324153fd42a6d6', class: "input-example" }, h("h3", { key: '9cc8d81ee4f85a69a8f15eb5daa16dbfd92b9f7a' }, "Time Selector"), h("udp-time-selector", { key: 'fae61e563015df43d76b31b6cb46e6518d45bc04', label: "Controlled Time", value: this.controlledTimeValue, onChange: this.handleControlledTimeChange }), h("p", { key: '62315ae45eb080ea450f35fee1f2fe76e83bd829', class: "value-display" }, "Time: ", this.controlledTimeValue)), h("div", { key: '571735fe6c7a126591c891da131bc6484e161bbc', class: "input-example" }, h("h3", { key: 'bbdba518d050d2442a6a2f55978e45f49ddf6e3f' }, "UDP Selector"), h("udp-selector", { key: '85bbdda76d8029a9bd0984484f57732aa7b66f67', label: "Controlled Selector", options: this.selectorOptions, value: this.controlledSelectorValue, onChange: this.handleControlledSelectorChange }), h("p", { key: 'c4d6858e679bafdb072c6e2f24df9fe979e9a2b1', class: "value-display" }, "Selected: ", this.controlledSelectorValue)), h("div", { key: '086135c1f8cfeb2eb5f9cd54436356856f6594b0', class: "input-example" }, h("h3", { key: '342be830da34c811266d9a467faa011f07c17c10' }, "File Upload"), h("file-upload", { key: '9344549ecc1570026cd900d6a80d3eb1975f0f94', label: "Controlled File Upload", allowMultiple: true, onChange: this.handleControlledFileChange }), h("p", { key: 'd5c32410a303357356be7710ac8bc51c3f6d8d71', class: "value-display" }, "Files: ", this.controlledFileValue.length, " selected")))), h("section", { key: '90a91939cbf4b5cd5d0e714ec6dbc572148a2530', class: "example-section" }, h("h2", { key: '40c14e1baae2826964bc2e41bb6230c6ece00d31' }, "Uncontrolled Components"), h("p", { key: '0216bbfb7442780936edc44866341ec2d1b7b996' }, "Components manage their own state with initial values."), h("div", { key: '75fc67742f1edf4fafe87417bcfcbde428f86d44', class: "input-grid" }, h("div", { key: 'dc2f84e6792250d96d4e82b0474701e568540375', class: "input-example" }, h("h3", { key: '6d17fcce74341e47330f203a1251a37ecc3c6498' }, "Text Field"), h("text-field", { key: '436a46aa93ffa40592380ea36be25e5ad78ac913', label: "Uncontrolled Text Input", placeholder: "Enter text...", initialValue: "Initial text value", onChange: (e) => console.log('Text changed:', e.detail) })), h("div", { key: '013560293f04950fd08cd1d9829830adc9050c42', class: "input-example" }, h("h3", { key: '54d50556c57fec37819b0a64ed6c58788ad8dcda' }, "Numeric Field"), h("numeric-field", { key: 'de05429463b1619df59ccbb378610ead45276acd', label: "Uncontrolled Numeric Input", placeholder: "Enter number...", initialValue: "42", min: "0", max: "100", onChange: (e) => console.log('Number changed:', e.detail) })), h("div", { key: 'ccdd65e720e78172bbdf79223807fde6fce10b2c', class: "input-example" }, h("h3", { key: '4bc9cb7c8a5473cc35e25955dd755be1b13c0748' }, "Text Area"), h("text-area", { key: 'e6620c10db672e8184ccf43895bd6805808c2cf4', 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: '352cfd880f026ff7a14d596599aa665734ff21a0', class: "input-example" }, h("h3", { key: '7c6b5e8b1d83b85fb02d4107a5598a696e0bdc86' }, "Checkbox"), h("check-box", { key: '171a78ba1b898c08cf73e84e1aa91e24c20ae1c0', label: "Uncontrolled Checkbox", initialValue: "true", onChange: (e) => console.log('Checkbox changed:', e.detail) })), h("div", { key: 'ff81933cfb80a36b515ca5c0ebed3a8172bcf152', class: "input-example" }, h("h3", { key: '06d7c7657af8c0d0b57fbf301bf675b6f401f1d8' }, "Toggle"), h("stencil-toggle", { key: 'c3fa6566984d2f8efa177f336d9c4b21400753e3', label: "Uncontrolled Toggle", initialValue: "false", onChange: (e) => console.log('Toggle changed:', e.detail) })), h("div", { key: '52428a2236893246268e976eccefc5d0ed420077', class: "input-example" }, h("h3", { key: '4bd154912f6328e88fae791898b0a74942b7e948' }, "Date Selector"), h("udp-date-selector", { key: 'a206c079f63dc834363c1a13df8593571ef31924', label: "Uncontrolled Date", initialValue: "2024-01-15", onChange: (e) => console.log('Date changed:', e.detail) })), h("div", { key: '797b0a55e6cb4c66e642bab72e68da01c212bb73', class: "input-example" }, h("h3", { key: '20b438beff287b412d2e692e12f1b96f8c8fa5aa' }, "Time Selector"), h("udp-time-selector", { key: '74e861d9f070225bdc7b8b7b9d6f9fb87a27fb1e', label: "Uncontrolled Time", initialValue: "14:30", onChange: (e) => console.log('Time changed:', e.detail) })), h("div", { key: '8a43ae37f986fd8c81d091be946e9d3407b593a1', class: "input-example" }, h("h3", { key: 'bdbf60f7deddef385c78a9bf7f05e50ef788792c' }, "DateTime Selector"), h("udp-datetime-selector", { key: 'f3917bebe83cc1a55d7caa1acec5ec991fab115c', label: "Uncontrolled DateTime", initialValue: "2024-01-15T14:30", onChange: (e) => console.log('DateTime changed:', e.detail) })), h("div", { key: '1782c0c0af9bf367d5a65748da1b5f4882ff478f', class: "input-example" }, h("h3", { key: 'a530d1d5750b4e6927bafb056211d420cd86cb02' }, "UDP Selector"), h("udp-selector", { key: 'e6935be37209f2872a10429544651ed8ae3ae9eb', label: "Uncontrolled Selector", options: this.selectorOptions, initialValue: "option2", onChange: (e) => console.log('Selector changed:', e.detail) })))), h("section", { key: '526277689a5ab71c53aea1a15dc1e005e3513337', class: "example-section" }, h("h2", { key: '52b1138ff192ed102b15db303cd565a64d2bfe40' }, "Form-wrapped Components"), h("p", { key: 'd7e086a0b2a635d184c324219e6fa2137da4c717' }, "Components integrated with stencil-form and stencil-field for validation and state management."), h("stencil-form", { key: 'b9914d0287d025ce6065f5985d49fbfc230b2b7f', 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: '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 })))))));
+            } }, h("div", { key: 'c988f4199f89b9d28a444ca6f262d0f7a4d7086f', class: "form-grid" }, h("stencil-field", { key: 'e61edacce18a1080604cca6c83a47eb9bf853dca', name: "formTextField" }, h("text-field", { key: '52a4fb8ad33fb5eb5f4c03a6b34f0352daecb227', label: "Form Text Field", placeholder: "Enter text...", required: true })), h("stencil-field", { key: '2fde12d1bc8562d727b9c16486f3cebc8d0ef0a1', name: "formNumericField" }, h("numeric-field", { key: 'cce90a03f97a7ce519e769cbf5568557e8da5172', label: "Form Numeric Field", placeholder: "Enter number...", min: "0", max: "100", required: true })), h("stencil-field", { key: '483c179ef0e6e057b0038c44ad35d758e8da72c0', name: "formTextArea" }, h("text-area", { key: '54bf5a7d1a29f00a4db885e70a4fff18c25ccc8b', label: "Form Text Area", placeholder: "Enter description...", required: true, minRows: 3 })), h("stencil-field", { key: '5b9b92bc986d8247e0d29580d16ea1af1d6dd811', name: "formCheckbox" }, h("check-box", { key: '9b697664e89f5e88964e740cb713e783cb7e5eaf', label: "Accept Terms and Conditions", required: true })), h("stencil-field", { key: '04e214cc1e402cd5d8cc4a902530ce3e5abfab93', name: "formToggle" }, h("stencil-toggle", { key: '90264b08f1fde534454cc62bbbc94148de7d357b', label: "Enable Notifications" })), h("stencil-field", { key: 'c2b32a971b1ff98067606c621cde478eddf532dc', name: "formDate" }, h("udp-date-selector", { key: '38d4277f734bfe478a07f3137424608646a48848', label: "Form Date", required: true })), h("stencil-field", { key: 'be40b541a17d729c6140931d05fce1baf2db7273', name: "formTime" }, h("udp-time-selector", { key: 'f3c10e03320cbd983b5573cee4ec99c737a0d389', label: "Form Time" })), h("stencil-field", { key: 'f0ec76807e7ac9caae2c216665934d5668abee6d', name: "formSelector" }, h("udp-selector", { key: 'a887013efc6d25c8119ec1ead75de3e3779e1d20', label: "Form Selector", options: this.selectorOptions, required: true })), h("stencil-field", { key: '662c9e1b54e9eb2926dd5405c17e7c9774bddba5', name: "formFiles" }, h("file-upload", { key: '08c9b118f3582f93086a5da3fa4d45446a967f5e', label: "Form File Upload", allowMultiple: true }))), h("div", { key: '951a514199520009da7df0798a6b9a6a8c8fb696', class: "form-actions" }, h("button", { key: '8550d0b23137a65a279390fcd083b75280e5c2ff', type: "submit", class: "submit-button" }, "Submit Form"))), h("div", { key: '194547ea02a3a71691c9721456def235b1ca0aa1', class: "form-values" }, h("h3", { key: '9f2237ad72e7dc8a89a3b76eb2a85489ef784b0f' }, "Current Form Values:"), h("pre", { key: 'b9e2cbee72e21f3640dba65eab05d2af47c4a284' }, JSON.stringify(this.formValues, null, 2)))), h("section", { key: '58723614fb40ff513d99eb984324848e68e26690', class: "example-section" }, h("h2", { key: '1c3528c6fa28d8c47bddd005523b2b2203433c24' }, "Additional Examples"), h("p", { key: '663507cd004a87e188acd89611a6f719dc236a0d' }, "More complex configurations and specialized use cases."), h("div", { key: 'c09839477af2b59587589b71730736fbe11f10f6', class: "input-grid" }, h("div", { key: '05be4e05ea40a32b44f8486ac36ec648617667ce', class: "input-example" }, h("h3", { key: '1a55bc8af2155bb961dd087ec28f1894604cf181' }, "Multi-Select UDP Selector"), h("udp-selector", { key: 'e39700fb3d1c54346e51ba22408c677ccc00fa93', label: "Multi-Select Selector", options: this.selectorOptions, multiSelect: true, initialValue: "option1,option3", onChange: (e) => console.log('Multi-select changed:', e.detail) })), h("div", { key: '8f18b41bb0f8fde3e7ea57e0a127885d3888039e', class: "input-example" }, h("h3", { key: '2627a3d0bfdcd7dc23fd67f4563733f2300c27de' }, "Large UDP Selector"), h("udp-selector", { key: '33c8e46f5e98b732c8e861de3fa1a8dadf8e75e1', label: "Large Selector", options: this.selectorOptions, large: true, initialValue: "option2", onChange: (e) => console.log('Large selector changed:', e.detail) })), h("div", { key: 'e74f1ccfac444c1058b03006c7516a90090704fc', class: "input-example" }, h("h3", { key: 'c13665d87d1ab26ce42084f5b497514df758336b' }, "File Upload with Type Restrictions"), h("file-upload", { key: 'fdbcbce5f0ad21427b10c69b1ff14faa5ff5bcd6', 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: 'e485136314ce4c0ea095ad532a3729e72d731e79', class: "input-example" }, h("h3", { key: 'fd9026adbfe0a0da04dba6d8e58d096e0e88cda1' }, "Disabled Components"), h("div", { key: '1a35bfda54b5bf67f50c460a028cec1e9a7979dd', class: "disabled-examples" }, h("text-field", { key: '163bd27c789de9fadaf4e7a509f59d36ef41a35e', label: "Disabled Text Field", value: "Cannot edit this", disabled: true }), h("check-box", { key: '6d94b2842459b07cd8a093c17555613e02ecdc27', label: "Disabled Checkbox", checked: true, disabled: true }), h("udp-selector", { key: 'db1da592947e1f072f2fc88026a3643059f8e405', 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 CHANGED Viewed

@@ -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: '7300d352c088dfd4796240bddf641f3491fc0e3d' }, this.pageData.map((data) => {
+        return (h("div", { key: '05f030812933d2473f080285d7af0ddeecda005c' }, 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 CHANGED Viewed

@@ -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: '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'))));
+        return (h("div", { key: 'de905a4b5da8d7e06bafc3e1da7ed57548c29beb', class: "container" }, h("unity-typography", { key: '635febd73647ff8ccfd2655750cca80a6a038ee6', variant: "h2" }, "Unity Theme"), h("div", { key: 'cd50d5641d3af9b9430c490b565b1a6de9cd4d71', class: "theme-section" }, h("div", { key: '74ca31a3e63f5342dadc50f3be4f0f4682b6c2aa', class: "unity-theme" }, this.renderColorSection('Primary Colors', 'primary'), this.renderColorSection('Secondary Colors', 'secondary'))), h("unity-typography", { key: '4df9f7aff314abaef0cee198c400fd8527780566', variant: "h2" }, "SAP Theme"), h("div", { key: '7e3185d9f54d46618711fa522a28f44e936e835d', class: "theme-section" }, h("div", { key: 'e9fcc854930e8645bd725d34e1f354bbaf4dc78f', class: "sap-theme" }, this.renderColorSection('Primary Colors', 'primary'), this.renderColorSection('Secondary Colors', 'secondary'))), h("unity-typography", { key: 'd3573c966fe9ddd40f9af2f1ed6a3d6c61abf962', variant: "h2" }, "Status Colors"), h("div", { key: '5330d30d62ebbd57886015e8b27f542d76a402fe', 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 CHANGED Viewed

@@ -94,13 +94,13 @@ export class ChipSection {
     }
     render() {
         console.log("Rendering ChipSection", this.visibleFilterChips);
-        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) => {
+        return (h("div", { key: '9a1b452a244c22fdb6566acb2972f42bdddb5621', class: "wrapper", id: "chipSectionContainer" }, h("div", { key: '0c03e15b9ce04d0da54ee83a9e56dbcab0553580', class: "chipHolder" }, h("div", { key: '9a55382935f37510948d8d978b1171509f05cba2', 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: '13b4e97701d984df535637f10302a96bfca4ee6f', id: "filterChipsContainer", menuItems: this.menuItems }, this.selectedFilterChip && (h("stencil-chip", { key: 'f0c6749140c629a2c864a0341818c8ca632df701', 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: '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))))))))));
+        })), h("div", { key: '26e8ed21c6d420b82efd005c8ebbcff532674dae', 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: '79450b2d263970db47b70a7d4ec0a28c3522d2a1', 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"; }

package/dist/collection/udp-utilities/layout/udp-dynamic-container-with-menu/udp-dynamic-container-with-menu.js CHANGED Viewed

@@ -114,7 +114,7 @@ export class DynamicContainerWithMenu {
         this.udpChipClicked.emit(chipText);
     }
     render() {
-        return (h("div", { key: '3dbaff6a6f132f9a88d1e20be8b2bd6addfe29e1', class: "container" }, h("div", { key: '19612cdc163703220caf60859a78cf05a2bc6f2a', class: "chips" }, console.log('Received data for chips via executeQwith', this.visibleChildren), this.visibleChildren && this.visibleChildren.map((child, index) => (h("stencil-chip", { color: "secondary", key: index, text: child.description, "show-delete": "false", externalToggleString: this.externalToggle })))), h("div", { key: 'f5311d566d4ee2f3e5f3000de81dbb85bf62f6bb', class: "overflow" }, h("udp-pop-over", { key: 'df064bb0a2757b1452aad74d80413113cf56016e', isOpen: this.popoverOpen, anchorElement: document.getElementById('anchorElement') }, h("div", { key: '1ea5b82d8578de30740af913f9f3109b971b3ef1', class: "menu" }, this.menuChildren && this.menuChildren.map((child, index) => (h("stencil-chip", { key: index, text: child.label, "show-delete": "false" }, " "))))))));
+        return (h("div", { key: 'e39cb91451a2879c50e94d06ad7d04ea48e6924c', class: "container" }, h("div", { key: '68340fbe6565fcb4065634c23bbde57509aaa377', class: "chips" }, console.log('Received data for chips via executeQwith', this.visibleChildren), this.visibleChildren && this.visibleChildren.map((child, index) => (h("stencil-chip", { color: "secondary", key: index, text: child.description, "show-delete": "false", externalToggleString: this.externalToggle })))), h("div", { key: 'fd984302e13b2d30c4e0724735b92e91150694af', class: "overflow" }, h("udp-pop-over", { key: '296ae16800bd847a6f2d45c65c9971e2fa9642c0', isOpen: this.popoverOpen, anchorElement: document.getElementById('anchorElement') }, h("div", { key: '8edb5977027465a416e5440104c0b97da7df23a7', class: "menu" }, this.menuChildren && this.menuChildren.map((child, index) => (h("stencil-chip", { key: index, text: child.label, "show-delete": "false" }, " "))))))));
     }
     static get is() { return "udp-dynamic-container-with-menu"; }
     static get encapsulation() { return "shadow"; }

package/dist/components/add-map-feature-popup2.js CHANGED Viewed

@@ -82,11 +82,11 @@ const AddMapFeaturePopUp = /*@__PURE__*/ proxyCustomElement(class AddMapFeatureP
     }
     render() {
         var _a, _b, _c;
-        return (h("div", { key: '8a80462e93ff992138a3618d00230fa320f1247e', class: "popoverContent" }, !((_a = this.panelConfig) === null || _a === void 0 ? void 0 : _a.hideLayerSelector) && (h("udp-selector", { key: 'e23169696696373cdd2d7a73358d91b0c3bdf3fa', id: 'layer', options: this.layerToAddOptions, initialValue: this.selectedLayer, label: 'Layer', onChange: (e) => {
+        return (h("div", { key: '32fb2a44efbb94b005cdea535a0a3ac2651f5d17', class: "popoverContent" }, !((_a = this.panelConfig) === null || _a === void 0 ? void 0 : _a.hideLayerSelector) && (h("udp-selector", { key: 'f9c1bd59497d705d5b0f22539a300750dcd64f6a', id: 'layer', options: this.layerToAddOptions, initialValue: this.selectedLayer, label: 'Layer', onChange: (e) => {
                 this.handleSetSelectedLayer(e.detail);
-            }, large: false })), h("udp-selector", { key: '03921fbbb989a7cc4f67a6789b5026e194cd5f5e', id: 'type', options: (_b = this.drawingTypeOptions) !== null && _b !== void 0 ? _b : [], initialValue: this.selectedType, label: 'Type', onChange: (e) => {
+            }, large: false })), h("udp-selector", { key: '055e530103ac5b5eb284e2c860a6128d19374ba1', id: 'type', options: (_b = this.drawingTypeOptions) !== null && _b !== void 0 ? _b : [], initialValue: this.selectedType, label: 'Type', onChange: (e) => {
                 this.handleSetSelectedType(e.detail);
-            }, large: false }), h("div", { key: '1359c6564351367c01c0703ed838de5b5096294a', class: "formButton" }, h("custom-button", { key: '91668bf33c28f218f7391a37997e4700b0ac1eab', label: h("unity-typography", { variant: "button" }, 'Draw feature'), onClick: () => this.handleStartDrawingMapFeature(this.selectedLayer, this.selectedType), variant: 'outline', disabled: (this.selectedLayer === null && !((_c = this.panelConfig) === null || _c === void 0 ? void 0 : _c.hideLayerSelector)) ||
+            }, large: false }), h("div", { key: '525b90353ff86c07a55542a2baa1ef1fb0ad8fb3', class: "formButton" }, h("custom-button", { key: '7de411f454d7cf8574f36bf0692bc8039aa4fdd9', label: h("unity-typography", { variant: "button" }, 'Draw feature'), onClick: () => this.handleStartDrawingMapFeature(this.selectedLayer, this.selectedType), variant: 'outline', disabled: (this.selectedLayer === null && !((_c = this.panelConfig) === null || _c === void 0 ? void 0 : _c.hideLayerSelector)) ||
                 this.selectedType === null }))));
     }
     static get watchers() { return {

package/dist/components/ag-grid-base2.js CHANGED Viewed

@@ -964,7 +964,7 @@ const AgGridBase = /*@__PURE__*/ proxyCustomElement(class AgGridBase extends H {
     render() {
         var _a;
         const variantClass = `variant-${((_a = this.headerConfig) === null || _a === void 0 ? void 0 : _a.variant) || 'light'}`;
-        return (h("div", { key: '315a73b730d7d5d044b6bbf5f60a15e3b9582976', class: variantClass, ref: el => (this.gridContainerEl = el) }, h("ghost-render", { key: '466bccfb96cd71bb4d49cc8cea9293d76e8ef974' }, h("div", { key: '39de56375c5fc7ba94add149473348bf18060848' }, h("udp-dialog", { key: 'e1a537dae7065f89ccc1749c05ccd6f0043b54f7' }), h("udp-list-item", { key: '239b637a36feb02ec191203240b721a647997782' }), h("hint-panel", { key: 'd8ccc7f25ec0c3704b85496bed34a67b1e81f0cd' }))), h("div", { key: '74640f93605ecb67015daceb356c4b1fba30d069', class: "grid-base-header" }, h("grid-header", { key: 'a1eaa9bce2b9ce5f70631bb1d5e75270c00f96e8', headerConfig: this.headerConfig, gridFunctions: this.gridFunctions, onHeaderAction: this.onHeaderAction }), h("div", { key: '3edcb8130744665fd8570c738c8c61e51f3a096b', class: "action-bar", style: { viewTransitionName: `action-bar` } }, this.gridFunctionInstances.map(fn => { var _a; return (_a = fn.render) === null || _a === void 0 ? void 0 : _a.call(fn); }))), h("div", { key: '32f44119cc6bb374e08e3c5160b9d86d3f1d3c49', id: "myNewGrid", ref: el => (this.gridEl = el), style: {
+        return (h("div", { key: '09ef0f0e4491de19f4b7b06ee20d0ee1384005f9', class: variantClass, ref: el => (this.gridContainerEl = el) }, h("ghost-render", { key: '74ec21f0fc099e50c68be0915a1af7cda74d0776' }, h("div", { key: '850311d288c09fddd394086540eb5fe9730efd28' }, h("udp-dialog", { key: 'afcac5ce1b9fa78e59d2dcc05ccce773ec14a39a' }), h("udp-list-item", { key: 'a78311218bb58edf424a185d562955bedcace44d' }), h("hint-panel", { key: 'aeebbfbbadd7d97ef59893a4ab74d8f520e2c9b5' }))), h("div", { key: 'f0eb54721ab03eb3b66b7c94bc2c1edb2b503e19', class: "grid-base-header" }, h("grid-header", { key: '688303601e82c2755ad7261e61eee24a453ebe38', headerConfig: this.headerConfig, gridFunctions: this.gridFunctions, onHeaderAction: this.onHeaderAction }), h("div", { key: 'b99099543b7c32516f25931a4a3554d3b735510b', class: "action-bar", style: { viewTransitionName: `action-bar` } }, this.gridFunctionInstances.map(fn => { var _a; return (_a = fn.render) === null || _a === void 0 ? void 0 : _a.call(fn); }))), h("div", { key: 'fc409e24001a190d9a5b78e487522bb7259ba97e', id: "myNewGrid", ref: el => (this.gridEl = el), style: {
                 viewTransitionName: `my-new-grid`,
             } })));
     }

package/dist/components/ag-table2.js CHANGED Viewed

@@ -9,7 +9,7 @@ const AgTable = /*@__PURE__*/ proxyCustomElement(class AgTable extends H {
         this.height = 'calc(100vh - 200px)';
     }
     render() {
-        return (h("div", { key: '83743973c902da683ac71a96eb67c4e44e12a778', id: "myGrid", style: { height: this.height, width: '100%' }, class: "ag-theme-material" }));
+        return (h("div", { key: '08764e8cfc9a52ac728c67018a849be7f3409408', id: "myGrid", style: { height: this.height, width: '100%' }, class: "ag-theme-material" }));
     }
     get el() { return this; }
 }, [256, "ag-table", {

package/dist/components/ambient-demo-container2.js CHANGED Viewed

@@ -12,7 +12,7 @@ const AmbientDemoContainer = /*@__PURE__*/ proxyCustomElement(class AmbientDemoC
         this.__attachShadow();
     }
     render() {
-        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' })));
+        return (h("div", { key: '75dd493b0eed427f414786dcc666948afb7b40db', class: "container" }, h("div", { key: 'debe96ae62cfd10154da7432ef470e21d1ab879b', class: "title-container" }, " ", h("unity-typography", { key: '64cfc0fcbb5b745004e914fe5819d5a608b83fc4', variant: "button" }, " ", this.title, " "), " "), h("slot", { key: 'c75ba7fa50059017da74ac203c9251ab79973645' })));
     }
     static get style() { return ambientDemoContainerCss; }
 }, [257, "ambient-demo-container", {