udp-stencil-component-library 25.18.2-beta.1 → 25.18.2-beta.11

package/dist/components/udp-tabs2.js

@@ -1,278 +1 @@
-import { p as proxyCustomElement, H, c as createEvent, h } from './index2.js';
-import { d as defineCustomElement$1 } from './udp-icon2.js';
-
-const udpTabsCss = ".tab-container{display:flex;flex-direction:column}.tab-header{background-color:#ffffff;position:relative;display:flex;align-items:center}.tab-scroll-container{display:flex;position:relative;overflow-x:auto;overflow-y:hidden;flex:1;min-width:0}.tab-scroll-container::-webkit-scrollbar{height:4px}.tab-scroll-container::-webkit-scrollbar-track{background:transparent}.tab-scroll-container::-webkit-scrollbar-thumb{background-color:rgba(0, 0, 0, 0.2);border-radius:4px}.tab-scroll-container::-webkit-scrollbar-thumb:hover{background-color:rgba(0, 0, 0, 0.3)}.tab-header::after{content:'';position:absolute;bottom:0;left:0;width:100%;height:1px;background-color:var(--divider-color, #e0e0e0)}.tab-header button{padding:16px;font-size:14px;text-align:center;border:none;background:none;cursor:pointer;outline:none;transition:all 0.22s ease;color:#555555;font-weight:600;opacity:0.9;white-space:nowrap;display:flex;align-items:center;justify-content:center;gap:8px}.tab-header.fill .tab-scroll-container{width:100%}.tab-header.fill .tab-scroll-container button{flex-grow:1}.tab-header button.active{color:var(--secondary-color, #344861);opacity:1.0}.tab-header button.scroll-arrow{position:absolute;top:0;bottom:0;display:flex;align-items:center;justify-content:center;width:40px;padding:0;background:#ffffff;cursor:pointer;font-size:16px;font-weight:bold;color:#757575;z-index:2;transition:color 0.2s ease;flex-shrink:0;opacity:1;gap:0}.tab-header button.scroll-arrow:hover{color:#000}.tab-header button.scroll-arrow.left{left:0}.tab-header button.scroll-arrow.right{right:0}.scroll-fade{position:absolute;top:0;bottom:0;width:30px;z-index:1;pointer-events:none}.scroll-fade.left{left:40px;background:linear-gradient(\n    to right,\n    #ffffff,\n    rgba(255, 255, 255, 0)\n  )}.scroll-fade.right{right:40px;background:linear-gradient(\n    to left,\n    #ffffff,\n    rgba(255, 255, 255, 0)\n  )}.tab-header button udp-icon{font-size:1.2em;line-height:1}.tab-header button.icon-start{flex-direction:row}.tab-header button.icon-end{flex-direction:row-reverse}.tab-header button.icon-top{flex-direction:column;gap:4px}.tab-header button.icon-bottom{flex-direction:column-reverse;gap:4px}.slider{position:absolute;bottom:0;left:0;height:2px;background-color:var(--secondary-color, #344861);transition:transform 0.22s cubic-bezier(0.4, 0, 0.2, 1),\n    width 0.22s cubic-bezier(0.4, 0, 0.2, 1);z-index:1}.tab-header button.disabled{opacity:0.5;cursor:not-allowed}.tab-header button.disabled.active{color:#757575;opacity:0.5}";
-
-const UdpTabs = /*@__PURE__*/ proxyCustomElement(class UdpTabs extends H {
-    constructor(registerHost) {
-        super();
-        if (registerHost !== false) {
-            this.__registerHost();
-        }
-        this.__attachShadow();
-        this.udpTabChange = createEvent(this, "udpTabChange");
-        /**
-         * 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';
-        /**
-         * (Optional) An array of tab configuration objects.
-         * If provided, this will be used to render tabs instead of slotted `<udp-tab>` components.
-         * This mode is typically used with controlled tabs.
-         */
-        this.tabs = [];
-        this.internalActiveTab = 0; // For uncontrolled mode
-        this.tabDetails = []; // Unified details from prop or slot
-        this.sliderStyle = {
-            width: '0',
-            transform: 'translateX(0)',
-        };
-        this.showScrollLeft = false;
-        this.showScrollRight = false;
-        this.slottedTabs = []; // Renamed from `tabs`
-        this.buttonRefs = [];
-    }
-    /**
-     * Returns true if the component is in controlled mode.
-     */
-    get isControlled() {
-        return this.value != null;
-    }
-    /**
-     * Returns true if tabs are being provided by the `tabs` prop.
-     */
-    get useTabsProp() {
-        return this.tabs && this.tabs.length > 0;
-    }
-    /**
-     * Returns the currently active tab index,
-     * respecting controlled or uncontrolled mode.
-     */
-    get activeTab() {
-        return this.isControlled ? this.value : this.internalActiveTab;
-    }
-    handleSlotChange() {
-        // If we're using the tabs prop, slot changes are irrelevant
-        if (this.useTabsProp)
-            return;
-        this.initializeTabs();
-    }
-    handleResize() {
-        requestAnimationFrame(() => {
-            this.updateSliderPosition();
-            this.checkScroll();
-        });
-    }
-    componentDidLoad() {
-        this.initializeTabs();
-    }
-    /**
-     * Watcher for uncontrolled state changes.
-     */
-    onActiveTabChange(newValue) {
-        this.updateActiveTabs();
-        this.updateSliderPosition();
-        this.scrollTabIntoView(newValue);
-    }
-    /**
-     * Watcher for controlled state changes.
-     */
-    onValueChange(newValue) {
-        this.updateActiveTabs();
-        this.updateSliderPosition();
-        this.scrollTabIntoView(newValue);
-    }
-    /**
-     * Watcher for tabs prop changes.
-     */
-    onTabsPropChange() {
-        this.initializeTabs();
-    }
-    onVariantChange() {
-        requestAnimationFrame(() => {
-            this.updateSliderPosition();
-            this.checkScroll();
-        });
-    }
-    initializeTabs() {
-        var _a, _b;
-        this.buttonRefs = [];
-        if (this.useTabsProp) {
-            // --- Prop-based ---
-            this.tabDetails = this.tabs.map(t => (Object.assign({}, t))); // Use data from prop
-            this.slottedTabs = []; // Ensure we're not tracking slotted tabs
-        }
-        else {
-            // --- Slot-based ---
-            this.slottedTabs = Array.from(this.el.children).filter((child) => child.tagName.toLowerCase() === 'udp-tab');
-            this.tabDetails = this.slottedTabs.map(tab => ({
-                label: tab.label,
-                icon: tab.icon,
-                iconPlacement: tab.iconPlacement,
-                hidden: tab.hidden,
-                disabled: tab.disabled,
-            }));
-        }
-        // --- Common Logic ---
-        // In uncontrolled mode, check if the default active tab is invalid.
-        if (!this.isControlled) {
-            if (((_a = this.tabDetails[this.internalActiveTab]) === null || _a === void 0 ? void 0 : _a.hidden) || ((_b = this.tabDetails[this.internalActiveTab]) === null || _b === void 0 ? void 0 : _b.disabled)) {
-                const firstValidIndex = this.tabDetails.findIndex(tab => !tab.hidden && !tab.disabled);
-                this.internalActiveTab = firstValidIndex > -1 ? firstValidIndex : 0;
-            }
-        }
-        this.updateActiveTabs();
-        requestAnimationFrame(() => {
-            this.updateSliderPosition();
-            this.checkScroll();
-        });
-    }
-    updateActiveTabs() {
-        // Only update slotted tabs if we're in slot mode
-        if (!this.useTabsProp) {
-            const currentActiveTab = this.activeTab;
-            this.slottedTabs.forEach((tab, index) => {
-                tab.active = index === currentActiveTab;
-            });
-        }
-        // If in prop mode, the <button> 'active' class is handled by render()
-    }
-    updateSliderPosition() {
-        const activeButton = this.buttonRefs[this.activeTab]; // Use getter
-        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;
-        }
-        if (this.isControlled) {
-            // In controlled mode, emit the event for the parent to handle.
-            // The `onValueChange` watcher will handle UI updates when the prop changes.
-            this.udpTabChange.emit(tabIndex);
-        }
-        else {
-            // In uncontrolled mode, update state directly.
-            // The `onActiveTabChange` watcher will handle UI updates.
-            this.internalActiveTab = tabIndex;
-        }
-    }
-    scrollTabIntoView(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;
-        if (tabLeft < safeZoneLeft) {
-            container.scrollTo({
-                left: tabLeft - safeZonePadding,
-                behavior: 'smooth',
-            });
-        }
-        else if (tabRight > safeZoneRight) {
-            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() {
-        const currentActiveTab = this.activeTab; // Use getter
-        return (h("div", { key: '5300dbcdc9fff54d87fe64e3bbcc3b6a1f04c331', class: "tab-container" }, h("div", { key: '83041e378183364889aa8d14114c9315ead1028c', class: `tab-header ${this.variant}` }, this.showScrollLeft && (h("button", { key: '87d95478e27c13440e15e3d6b8cf4047d3e97e53', class: "scroll-arrow left", onClick: () => this.scrollToStart(), "aria-label": "Scroll to first tab" }, h("udp-icon", { key: 'a81987c97a0459533f17b68103788af401f06378', iconName: "chevronLeft16", color: "inherit" }))), this.showScrollLeft && h("div", { key: 'a52b3b7fba6022c4864f0cb89d24e34ade18a969', class: "scroll-fade left" }), h("div", { key: '0dc7ce8d4269539cfcd011736df876e6a64feebe', 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 labelEl = h("span", null, tab.label);
-            return (h("button", { class: {
-                    'active': index === currentActiveTab,
-                    'has-icon': !!tab.icon,
-                    [`icon-${tab.iconPlacement}`]: !!tab.icon,
-                    'disabled': tab.disabled,
-                }, disabled: tab.disabled, onClick: () => this.tabClicked(index), role: "tab", "aria-selected": index === currentActiveTab ? 'true' : 'false', "aria-disabled": tab.disabled ? 'true' : 'false', ref: el => (this.buttonRefs[index] = el) }, iconEl, labelEl));
-        }), h("div", { key: '0892dff1735729462a927e9f7d0127b402a43918', class: "slider", style: this.sliderStyle })), this.showScrollRight && h("div", { key: 'edf6fc21360de9fd919e4d71aefec6e3c7ed9fdd', class: "scroll-fade right" }), this.showScrollRight && (h("button", { key: '88adff5cab4b8baff5a1e4c6ed5f2fe44064f05e', class: "scroll-arrow right", onClick: () => this.scrollToEnd(), "aria-label": "Scroll to last tab" }, h("udp-icon", { key: '7704e98608f492cb4f599b706b302e003d84bb46', iconName: "chevronRight16", color: "inherit" })))), !this.isControlled && !this.useTabsProp && (h("div", { key: 'fd61baeb3e79a387c1367813fbaa99f496ae4d62' }, h("slot", { key: '872c0a2ead48abea1c946b7389c307a53d560705' })))));
-    }
-    get el() { return this; }
-    static get watchers() { return {
-        "internalActiveTab": ["onActiveTabChange"],
-        "value": ["onValueChange"],
-        "tabs": ["onTabsPropChange"],
-        "variant": ["onVariantChange"]
-    }; }
-    static get style() { return udpTabsCss; }
-}, [257, "udp-tabs", {
-        "variant": [1],
-        "value": [2],
-        "tabs": [16],
-        "internalActiveTab": [32],
-        "tabDetails": [32],
-        "sliderStyle": [32],
-        "showScrollLeft": [32],
-        "showScrollRight": [32]
-    }, [[0, "slotchange", "handleSlotChange"], [9, "resize", "handleResize"]], {
-        "internalActiveTab": ["onActiveTabChange"],
-        "value": ["onValueChange"],
-        "tabs": ["onTabsPropChange"],
-        "variant": ["onVariantChange"]
-    }]);
-function defineCustomElement() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["udp-tabs", "udp-icon"];
-    components.forEach(tagName => { switch (tagName) {
-        case "udp-tabs":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, UdpTabs);
-            }
-            break;
-        case "udp-icon":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$1();
-            }
-            break;
-    } });
-}
-
-export { UdpTabs as U, defineCustomElement as d };
-//# sourceMappingURL=udp-tabs2.js.map
-
-//# sourceMappingURL=udp-tabs2.js.map
+import{p as t,H as e,c as i,h as a,t as o}from"./index2.js";import{d as r}from"./udp-icon2.js";const s=t(class extends e{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.udpTabChange=i(this,"udpTabChange"),this.variant="fill",this.tabs=[],this.internalActiveTab=0,this.tabDetails=[],this.sliderStyle={width:"0",transform:"translateX(0)"},this.showScrollLeft=!1,this.showScrollRight=!1,this.slottedTabs=[],this.buttonRefs=[]}get isControlled(){return null!=this.value}get useTabsProp(){return this.tabs&&this.tabs.length>0}get activeTab(){return this.isControlled?this.value:this.internalActiveTab}handleSlotChange(){this.useTabsProp||this.initializeTabs()}handleResize(){requestAnimationFrame((()=>{this.updateSliderPosition(),this.checkScroll()}))}componentDidLoad(){this.initializeTabs()}onActiveTabChange(t){this.updateActiveTabs(),this.updateSliderPosition(),this.scrollTabIntoView(t)}onValueChange(t){this.updateActiveTabs(),this.updateSliderPosition(),this.scrollTabIntoView(t)}onTabsPropChange(){this.initializeTabs()}onVariantChange(){requestAnimationFrame((()=>{this.updateSliderPosition(),this.checkScroll()}))}initializeTabs(){var t,e;if(this.buttonRefs=[],this.useTabsProp?(this.tabDetails=this.tabs.map((t=>Object.assign({},t))),this.slottedTabs=[]):(this.slottedTabs=Array.from(this.el.children).filter((t=>"udp-tab"===t.tagName.toLowerCase())),this.tabDetails=this.slottedTabs.map((t=>({label:t.label,icon:t.icon,iconPlacement:t.iconPlacement,hidden:t.hidden,disabled:t.disabled})))),!this.isControlled&&((null===(t=this.tabDetails[this.internalActiveTab])||void 0===t?void 0:t.hidden)||(null===(e=this.tabDetails[this.internalActiveTab])||void 0===e?void 0:e.disabled))){const t=this.tabDetails.findIndex((t=>!t.hidden&&!t.disabled));this.internalActiveTab=t>-1?t:0}this.updateActiveTabs(),requestAnimationFrame((()=>{this.updateSliderPosition(),this.checkScroll()}))}updateActiveTabs(){if(!this.useTabsProp){const t=this.activeTab;this.slottedTabs.forEach(((e,i)=>{e.active=i===t}))}}updateSliderPosition(){const t=this.buttonRefs[this.activeTab];this.sliderStyle=t?{width:`${t.offsetWidth}px`,transform:`translateX(${t.offsetLeft}px)`}:{width:"0px",transform:"translateX(0px)"}}checkScroll(){if(!this.scrollContainerRef)return;const{scrollLeft:t,scrollWidth:e,clientWidth:i}=this.scrollContainerRef,a=e>i;this.showScrollLeft=a&&t>1,this.showScrollRight=a&&t<e-i-1}tabClicked(t){var e;(null===(e=this.tabDetails[t])||void 0===e?void 0:e.disabled)||(this.isControlled?this.udpTabChange.emit(t):this.internalActiveTab=t)}scrollTabIntoView(t){const e=this.buttonRefs[t],i=this.scrollContainerRef;if(!e||!i)return;const{scrollLeft:a,clientWidth:o}=i,r=e.offsetLeft,s=r+e.offsetWidth,n=a+o-70;r<a+70?i.scrollTo({left:r-70,behavior:"smooth"}):s>n&&i.scrollTo({left:s-o+70,behavior:"smooth"})}scrollToStart(){this.scrollContainerRef&&this.scrollContainerRef.scrollTo({left:0,behavior:"smooth"})}scrollToEnd(){if(!this.scrollContainerRef)return;const t=this.scrollContainerRef,{scrollWidth:e,clientWidth:i}=t;t.scrollTo({left:e-i,behavior:"smooth"})}render(){const t=this.activeTab;return a("div",{key:"39658d24754621f8b22e718d126894451a4919d8",class:"tab-container"},a("div",{key:"49afc82bdbfafb7292c450bdd76c3e6fd5b9e9aa",class:`tab-header ${this.variant}`},this.showScrollLeft&&a("button",{key:"ade7254e3b26254f12e3aedfc6e6656904b188e6",class:"scroll-arrow left",onClick:()=>this.scrollToStart(),"aria-label":"Scroll to first tab"},a("udp-icon",{key:"095dcdf5234ef669ea45bc28d0fb9f025eba5326",iconName:"chevronLeft16",color:"inherit"})),this.showScrollLeft&&a("div",{key:"79c3ebfd7e482c60596fe92d42757d93dfb4e2b6",class:"scroll-fade left"}),a("div",{key:"7bac2bd5f30bb120284814b05ea4da8150c4cc40",class:"tab-scroll-container",ref:t=>this.scrollContainerRef=t,onScroll:()=>this.checkScroll()},this.tabDetails.map(((e,i)=>{if(e.hidden)return null;const o=e.icon?a("udp-icon",{iconName:e.icon,color:"inherit"}):null,r=a("span",null,e.label);return a("button",{class:{active:i===t,"has-icon":!!e.icon,[`icon-${e.iconPlacement}`]:!!e.icon,disabled:e.disabled},disabled:e.disabled,onClick:()=>this.tabClicked(i),role:"tab","aria-selected":i===t?"true":"false","aria-disabled":e.disabled?"true":"false",ref:t=>this.buttonRefs[i]=t},o,r)})),a("div",{key:"f2c322a5bc7fe5c5e0aaace452727ddb287a17da",class:"slider",style:this.sliderStyle})),this.showScrollRight&&a("div",{key:"08399f60df57432e46b7365c0d5f653f512edc46",class:"scroll-fade right"}),this.showScrollRight&&a("button",{key:"9be19443a7c996472714beb53d9e3534b000c62e",class:"scroll-arrow right",onClick:()=>this.scrollToEnd(),"aria-label":"Scroll to last tab"},a("udp-icon",{key:"e4c5baf6a8e0ae67adb82c0b8be48ca277b25ce4",iconName:"chevronRight16",color:"inherit"}))),!this.isControlled&&!this.useTabsProp&&a("div",{key:"4b33abce9f558a0d0fb22533d81f11fc1dc18849"},a("slot",{key:"1ebca6515b93f563f063c5832e31e2d17a8dbcd8"})))}get el(){return this}static get watchers(){return{internalActiveTab:[{onActiveTabChange:0}],value:[{onValueChange:0}],tabs:[{onTabsPropChange:0}],variant:[{onVariantChange:0}]}}static get style(){return".tab-container{display:flex;flex-direction:column}.tab-header{background-color:#ffffff;position:relative;display:flex;align-items:center}.tab-scroll-container{display:flex;position:relative;overflow-x:auto;overflow-y:hidden;flex:1;min-width:0}.tab-scroll-container::-webkit-scrollbar{height:4px}.tab-scroll-container::-webkit-scrollbar-track{background:transparent}.tab-scroll-container::-webkit-scrollbar-thumb{background-color:rgba(0, 0, 0, 0.2);border-radius:4px}.tab-scroll-container::-webkit-scrollbar-thumb:hover{background-color:rgba(0, 0, 0, 0.3)}.tab-header::after{content:'';position:absolute;bottom:0;left:0;width:100%;height:1px;background-color:var(--divider-color, #e0e0e0)}.tab-header button{padding:16px;font-size:14px;text-align:center;border:none;background:none;cursor:pointer;outline:none;transition:all 0.22s ease;color:#555555;font-weight:600;opacity:0.9;white-space:nowrap;display:flex;align-items:center;justify-content:center;gap:8px}.tab-header.fill .tab-scroll-container{width:100%}.tab-header.fill .tab-scroll-container button{flex-grow:1}.tab-header button.active{color:var(--secondary-color, #344861);opacity:1.0}.tab-header button.scroll-arrow{position:absolute;top:0;bottom:0;display:flex;align-items:center;justify-content:center;width:40px;padding:0;background:#ffffff;cursor:pointer;font-size:16px;font-weight:bold;color:#757575;z-index:2;transition:color 0.2s ease;flex-shrink:0;opacity:1;gap:0}.tab-header button.scroll-arrow:hover{color:#000}.tab-header button.scroll-arrow.left{left:0}.tab-header button.scroll-arrow.right{right:0}.scroll-fade{position:absolute;top:0;bottom:0;width:30px;z-index:1;pointer-events:none}.scroll-fade.left{left:40px;background:linear-gradient(     to right,     #ffffff,     rgba(255, 255, 255, 0)   )}.scroll-fade.right{right:40px;background:linear-gradient(     to left,     #ffffff,     rgba(255, 255, 255, 0)   )}.tab-header button udp-icon{font-size:1.2em;line-height:1}.tab-header button.icon-start{flex-direction:row}.tab-header button.icon-end{flex-direction:row-reverse}.tab-header button.icon-top{flex-direction:column;gap:4px}.tab-header button.icon-bottom{flex-direction:column-reverse;gap:4px}.slider{position:absolute;bottom:0;left:0;height:2px;background-color:var(--secondary-color, #344861);transition:transform 0.22s cubic-bezier(0.4, 0, 0.2, 1),     width 0.22s cubic-bezier(0.4, 0, 0.2, 1);z-index:1}.tab-header button.disabled{opacity:0.5;cursor:not-allowed}.tab-header button.disabled.active{color:#757575;opacity:0.5}"}},[257,"udp-tabs",{variant:[1],value:[2],tabs:[16],internalActiveTab:[32],tabDetails:[32],sliderStyle:[32],showScrollLeft:[32],showScrollRight:[32]},[[0,"slotchange","handleSlotChange"],[9,"resize","handleResize"]],{internalActiveTab:[{onActiveTabChange:0}],value:[{onValueChange:0}],tabs:[{onTabsPropChange:0}],variant:[{onVariantChange:0}]}]);function n(){"undefined"!=typeof customElements&&["udp-tabs","udp-icon"].forEach((t=>{switch(t){case"udp-tabs":customElements.get(o(t))||customElements.define(o(t),s);break;case"udp-icon":customElements.get(o(t))||r()}}))}export{s as U,n as d}

package/dist/components/udp-time-selector.js

@@ -1,9 +1 @@
-import { U as UdpTimeSelector$1, d as defineCustomElement$1 } from './udp-time-selector2.js';
-
-const UdpTimeSelector = UdpTimeSelector$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { UdpTimeSelector, defineCustomElement };
-//# sourceMappingURL=udp-time-selector.js.map
-
-//# sourceMappingURL=udp-time-selector.js.map
+import{U as o,d as s}from"./udp-time-selector2.js";const t=o,e=s;export{t as UdpTimeSelector,e as defineCustomElement}

package/dist/components/udp-time-selector2.js

@@ -1,296 +1 @@
-import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './index2.js';
-import { d as defineCustomElement$1 } from './unity-typography2.js';
-
-const udpTimeSelectorCss = ":host(.udp-input){display:block;box-sizing:border-box;position:relative}:host(.udp-input--full-width){width:100%}:host(.udp-input--error){--input-border-color:var(--input-underline-color-error)}:host(.udp-input--disabled){pointer-events:none;opacity:0.5;cursor:not-allowed}:host(.udp-input--required){position:relative}:host(.udp-input--readonly){--input-background:var(--gray-02)}:host(.udp-input--hidden){display:none}:host(.udp-input--checked){--input-accent-color:var(--primary-color)}:host(.udp-input--multi-select){--list-max-height:200px}:host(.udp-input) .bx--text-input:focus{outline:none;}:host(.udp-input) .bx--form-item{margin-bottom:var(--spacing-05)}:host(.udp-input) .bx--label{display:block;margin-bottom:var(--spacing-03);color:var(--text-main);font-size:var(--caption-text-font-size);font-weight:var(--caption-text-font-weight);line-height:var(--caption-text-line-height)}@media (max-width: var(--breakpoint-xs-max)){:host(.udp-input){margin-bottom:var(--spacing-04)}:host(.udp-input) .bx--form-item{margin-bottom:var(--spacing-04)}}@media (min-width: var(--breakpoint-sm-min)){:host(.udp-input){min-height:2.5rem;}}:host(.udp-input--size-small) .bx--text-input,:host(.udp-input--size-small) textarea,:host(.udp-input--size-small) input[type=\"text\"],:host(.udp-input--size-small) input[type=\"number\"],:host(.udp-input--size-small) input[type=\"email\"],:host(.udp-input--size-small) input[type=\"password\"],:host(.udp-input--size-small) input[type=\"tel\"],:host(.udp-input--size-small) input[type=\"url\"],:host(.udp-input--size-small) input[type=\"search\"]{padding:var(--spacing-02);padding-bottom:6px;font-size:var(--caption-font-size, 0.875rem)}:host(.udp-input--size-normal) .bx--text-input,:host(.udp-input--size-normal) textarea,:host(.udp-input--size-normal) input[type=\"text\"],:host(.udp-input--size-normal) input[type=\"number\"],:host(.udp-input--size-normal) input[type=\"email\"],:host(.udp-input--size-normal) input[type=\"password\"],:host(.udp-input--size-normal) input[type=\"tel\"],:host(.udp-input--size-normal) input[type=\"url\"],:host(.udp-input--size-normal) input[type=\"search\"]{padding:var(--spacing-03);padding-bottom:9px;font-size:var(--body-font-size)}:host(.udp-input--size-large) .bx--text-input,:host(.udp-input--size-large) textarea,:host(.udp-input--size-large) input[type=\"text\"],:host(.udp-input--size-large) input[type=\"number\"],:host(.udp-input--size-large) input[type=\"email\"],:host(.udp-input--size-large) input[type=\"password\"],:host(.udp-input--size-large) input[type=\"tel\"],:host(.udp-input--size-large) input[type=\"url\"],:host(.udp-input--size-large) input[type=\"search\"]{padding:var(--spacing-04);padding-bottom:12px;font-size:var(--body-font-size)}:host(.udp-input--margin-none){margin:0}:host(.udp-input--margin-dense){margin:var(--spacing-02) 0}:host(.udp-input--margin-normal){margin:var(--spacing-03) 0}:host(.udp-input--margin-comfortable){margin:var(--spacing-04) 0}:host(.udp-input--size-small) .bx--label{margin-bottom:var(--spacing-02);font-size:var(--caption-font-size, 0.875rem)}:host(.udp-input--size-normal) .bx--label{margin-bottom:var(--spacing-03);font-size:var(--body-font-size)}:host(.udp-input--size-large) .bx--label{margin-bottom:var(--spacing-04);font-size:var(--body-font-size)}.bx--text-input,textarea,input[type=\"text\"],input[type=\"number\"],input[type=\"email\"],input[type=\"password\"],input[type=\"tel\"],input[type=\"url\"],input[type=\"search\"]{display:inline-block;padding:var(--spacing-03);padding-bottom:9px;box-sizing:border-box;border:none;font-size:var(--body-font-size);background:var(--input-background);border-bottom:var(--underline-standard) solid var(--input-underline-color, var(--gray-08));width:100%;font-family:var(--font-family);transition:border-bottom-color 0.15s ease-in-out}.bx--text-input:focus,textarea:focus,input[type=\"text\"]:focus,input[type=\"number\"]:focus,input[type=\"email\"]:focus,input[type=\"password\"]:focus,input[type=\"tel\"]:focus,input[type=\"url\"]:focus,input[type=\"search\"]:focus{border-bottom-color:var(--input-underline-color-focus, var(--primary-color));border-bottom-width:2px}.bx--text-input--error,.bx--text-input:user-invalid,:host(.udp-input--error) .bx--text-input,:host(.udp-input--error) textarea,:host(.udp-input--error) input[type=\"text\"],:host(.udp-input--error) input[type=\"number\"],:host(.udp-input--error) input[type=\"email\"],:host(.udp-input--error) input[type=\"password\"],:host(.udp-input--error) input[type=\"tel\"],:host(.udp-input--error) input[type=\"url\"],:host(.udp-input--error) input[type=\"search\"],input[type=\"text\"]:user-invalid,input[type=\"number\"]:user-invalid,input[type=\"email\"]:user-invalid,input[type=\"password\"]:user-invalid,input[type=\"tel\"]:user-invalid,input[type=\"url\"]:user-invalid,input[type=\"search\"]:user-invalid{border-bottom-color:var(--input-underline-color-error, var(--error-color-main)) !important}:host(.udp-input--disabled) .bx--text-input,:host(.udp-input--disabled) textarea,:host(.udp-input--disabled) input[type=\"text\"],:host(.udp-input--disabled) input[type=\"number\"],:host(.udp-input--disabled) input[type=\"email\"],:host(.udp-input--disabled) input[type=\"password\"],:host(.udp-input--disabled) input[type=\"tel\"],:host(.udp-input--disabled) input[type=\"url\"],:host(.udp-input--disabled) input[type=\"search\"]{border-bottom-color:var(--input-underline-color-disabled, var(--gray-08))}textarea.bx--text-input{resize:vertical;min-height:var(--spacing-08)}.bx--text-input::placeholder,textarea::placeholder,input[type=\"text\"]::placeholder,input[type=\"number\"]::placeholder,input[type=\"email\"]::placeholder,input[type=\"password\"]::placeholder,input[type=\"tel\"]::placeholder,input[type=\"url\"]::placeholder,input[type=\"search\"]::placeholder{color:var(--placeholder-color, #999);opacity:1}:host(.udp-input),:host{display:block;width:100%;box-sizing:border-box}.bx--form-item{margin-bottom:var(--spacing-05)}.bx--label{display:block;margin-bottom:var(--spacing-03)}.error-message,.bx--form-requirement,:host(.udp-input--error) .error-message,:host(.udp-input--error) .bx--form-requirement{color:var(--error-color-main, #d32f2f) !important;margin-top:var(--spacing-02);font-size:var(--caption-font-size, 0.875rem);--unity-typography-inherit-color:var(--error-color-main, #d32f2f)}.helper-text{color:var(--text-02, #525252);margin-top:var(--spacing-02);font-size:var(--caption-font-size, 0.875rem)}:host(.udp-input--disabled) .bx--text-input,:host(.udp-input--disabled) textarea,:host(.udp-input--disabled) input,:host(.udp-input--disabled){cursor:not-allowed;opacity:0.6}:host(.udp-input--readonly) .bx--text-input,:host(.udp-input--readonly) textarea,:host(.udp-input--readonly) input{background-color:var(--field-01, #f4f4f4);cursor:default}";
-
-const UdpTimeSelector = /*@__PURE__*/ proxyCustomElement(class UdpTimeSelector extends H {
-    constructor(registerHost) {
-        super();
-        if (registerHost !== false) {
-            this.__registerHost();
-        }
-        this.__attachShadow();
-        this.change = createEvent(this, "change");
-        this.input = createEvent(this, "input");
-        this.errorEvent = createEvent(this, "error");
-        /**
-         * Current value of the time selector. When provided, makes this a controlled component.
-         * Uses HH:mm format (e.g., "14:30"). The component will use this value and update it through events.
-         */
-        this.value = '';
-        /**
-         * Whether the input is readonly.
-         */
-        this.readonly = false;
-        /**
-         * Whether the input should take the full width of its container.
-         */
-        this.fullWidth = false;
-        /**
-         * Size variant controlling the padding and spacing of the input.
-         * - 'small': Compact spacing for data-heavy interfaces
-         * - 'normal': Standard spacing (default)
-         * - 'large': Generous spacing for accessibility
-         */
-        this.size = 'normal';
-        /**
-         * Margin variant for the input spacing.
-         * - 'none': No margin
-         * - 'dense': Minimal margin spacing
-         * - 'normal': Standard margin spacing (default)
-         */
-        this.margin = 'normal';
-        this.internalValue = ''; // Internal state for value management
-        /**
-         * Handles the invalid event from the native input element
-         * @param event - The invalid event from the time input
-         */
-        this.handleInvalid = (event) => {
-            const target = event.target;
-            const validationMessage = target.validationMessage;
-            this.setAndDispatchError(validationMessage);
-        };
-        /**
-         * Handles when the input becomes valid (clears errors)
-         * @param event - The input event
-         */
-        this.handleValid = (event) => {
-            const target = event.target;
-            // Always validate with our custom logic first
-            const customError = this.validateTime(target.value);
-            if (customError) {
-                // Custom validation failed
-                this.setAndDispatchError(customError);
-            }
-            else if (target.validity.valid) {
-                // Both custom and native validation passed
-                this.setAndDispatchError('');
-            }
-        };
-        /**
-         * Handles input events (real-time typing). Updates internal state and provides immediate validation feedback.
-         * @param event - The input event from the time input
-         */
-        this.handleTimeInput = (event) => {
-            const target = event.target;
-            const newValue = target.value;
-            // Update internal value
-            this.internalValue = newValue;
-            // Update controlled value if this is a controlled component
-            if (this.value !== undefined) {
-                this.value = newValue;
-            }
-            // Re-evaluate validation on input if there's currently an error
-            // This provides immediate feedback when user corrects the error
-            if (this.errorMessage) {
-                const validationError = this.validateTime(newValue);
-                if (validationError !== this.errorMessage) {
-                    // Error state has changed, update it
-                    this.setAndDispatchError(validationError);
-                }
-            }
-            // Emit input event for real-time updates
-            this.input.emit(newValue);
-        };
-        /**
-         * Handles changes to the time input value. Updates internal state and emits standard events.
-         * @param event - The change event from the time input
-         */
-        this.handleTimeChange = (event) => {
-            const target = event.target;
-            const newValue = target.value;
-            // Update internal value
-            this.internalValue = newValue;
-            // Update controlled value if this is a controlled component
-            if (this.value !== undefined) {
-                this.value = newValue;
-            }
-            // Validate the new value
-            const customError = this.validateTime(newValue);
-            if (customError) {
-                // Custom validation failed
-                this.setAndDispatchError(customError);
-            }
-            else {
-                // Custom validation passed, clear any existing error
-                this.setAndDispatchError('');
-            }
-            // Emit change event for committed changes
-            this.change.emit(newValue);
-        };
-    }
-    /**
-     * Component lifecycle method called when the component is about to load.
-     * Initializes the internal value from either the value prop or initialValue prop.
-     */
-    componentWillLoad() {
-        // Initialize from controlled value or initial value
-        this.internalValue = this.value || this.initialValue || '';
-        this.errorMessage = this.error;
-    }
-    /**
-     * Watcher for the error prop. Updates the internal error message when the error prop changes.
-     */
-    updateError() {
-        console.log('Error prop changed:', this.error);
-        this.errorMessage = this.error;
-    }
-    /**
-     * Watcher for the initialValue prop. Updates the internal value when initialValue changes
-     * (useful for form resets, dynamic initial values, etc.).
-     * @param newValue - The new initial value
-     */
-    initialValueChanged(newValue) {
-        if (newValue !== undefined) {
-            this.internalValue = newValue;
-            const newError = this.validateTime(newValue);
-            if (newError)
-                this.setAndDispatchError(newError);
-        }
-    }
-    /**
-     * Watcher for the value prop. Updates the internal value when the value prop changes
-     * (controlled component behavior).
-     * @param newValue - The new controlled value
-     */
-    valueChanged(newValue) {
-        if (newValue !== undefined) {
-            this.internalValue = newValue;
-        }
-    }
-    /**
-     * Handles the blur event on the time input. Standard focus events bubble naturally.
-     */
-    handleBlur() {
-        // Standard focus events bubble naturally - no custom emission needed
-    }
-    /**
-     * Handles the focus event on the time input. Standard focus events bubble naturally.
-     */
-    handleFocus() {
-        // Standard focus events bubble naturally - no custom emission needed
-    }
-    /**
-     * Validates the time value against min/max constraints
-     * @param value - The time value to validate
-     * @returns Error message if invalid, empty string if valid
-     */
-    validateTime(value) {
-        if (!value)
-            return '';
-        // Convert time strings to minutes for comparison
-        const timeToMinutes = (time) => {
-            const [hours, minutes] = time.split(':').map(Number);
-            return hours * 60 + minutes;
-        };
-        const valueMinutes = timeToMinutes(value);
-        if (this.min) {
-            const minMinutes = timeToMinutes(this.min);
-            if (valueMinutes < minMinutes) {
-                return `Time must be after ${this.min}`;
-            }
-        }
-        if (this.max) {
-            const maxMinutes = timeToMinutes(this.max);
-            if (valueMinutes > maxMinutes) {
-                return `Time must be before ${this.max}`;
-            }
-        }
-        return '';
-    }
-    /**
-     * Sets error state and dispatches error event that bubbles to stencil-field
-     * @param errorMessage - The error message to set and dispatch
-     */
-    setAndDispatchError(errorMessage) {
-        console.log('Setting error:', errorMessage);
-        // Update internal error state
-        this.errorMessage = errorMessage;
-        // Emit Stencil error event
-        this.errorEvent.emit(errorMessage);
-        // Dispatch custom error event that bubbles up to stencil-field
-        const errorEvent = new CustomEvent('error', {
-            detail: errorMessage,
-            bubbles: true,
-            composed: true
-        });
-        this.el.dispatchEvent(errorEvent);
-    }
-    render() {
-        const isError = !!this.errorMessage;
-        const classNames = ['bx--text-input'];
-        if (isError) {
-            classNames.push('bx--text-input--error');
-        }
-        if (this.disabled) {
-            classNames.push('time-selector--disabled');
-        }
-        if (this.fullWidth) {
-            classNames.push('bx--text-input--full-width');
-        }
-        const inputClass = classNames.join(' ');
-        return (h(Host, { key: 'd2249c774eaa3b6e0e9423581083d59b1bfc4336', class: {
-                'udp-input': true,
-                'udp-input--error': isError,
-                'udp-input--disabled': this.disabled,
-                'udp-input--readonly': this.readonly,
-                'udp-input--full-width': this.fullWidth,
-                'udp-input--required': this.required,
-                [`udp-input--size-${this.size}`]: true,
-                [`udp-input--margin-${this.margin}`]: true,
-            }, "aria-invalid": isError ? 'true' : 'false', "aria-required": this.required ? 'true' : 'false' }, h("div", { key: 'fe18b74861a9f5d1739317bbd357cce48ac81176', class: "bx--form-item" }, h("unity-typography", { key: '5afab9726865da75b9b4f228ecd0ad553825a40a', variant: "caption-text" }, h("label", { key: '46ff7f80e88357c25d86ac11a8835733bf19853e', htmlFor: this.id, class: "bx--label" }, this.label, this.required ? '*' : '')), h("input", { key: 'e74de46ca5f386f91320f16af6f5b5fa9d61a9cf', type: "time", id: this.id, name: this.name, class: inputClass, value: this.internalValue, min: this.min, max: this.max, onInput: this.handleTimeInput, onChange: this.handleTimeChange, onBlur: this.handleBlur, onFocus: this.handleFocus, onInvalid: this.handleInvalid, disabled: this.disabled, readonly: this.readonly, required: this.required,
-            //@ts-ignore
-            udprecordid: 'udpRecord-udp-time-selector-' + this.id }), h("unity-typography", { key: 'd1ec82959fd633a6a297a1cd3523432454afec52', class: "error-message", variant: "caption-text", color: "error" }, this.errorMessage))));
-    }
-    get el() { return this; }
-    static get watchers() { return {
-        "error": ["updateError"],
-        "initialValue": ["initialValueChanged"],
-        "value": ["valueChanged"]
-    }; }
-    static get style() { return udpTimeSelectorCss; }
-}, [257, "udp-time-selector", {
-        "id": [1],
-        "name": [1],
-        "label": [1],
-        "min": [1],
-        "max": [1],
-        "required": [4],
-        "error": [1],
-        "initialValue": [1, "initial-value"],
-        "value": [1025],
-        "disabled": [4],
-        "readonly": [4],
-        "fullWidth": [4, "full-width"],
-        "size": [1],
-        "margin": [1],
-        "internalValue": [32],
-        "errorMessage": [32]
-    }, undefined, {
-        "error": ["updateError"],
-        "initialValue": ["initialValueChanged"],
-        "value": ["valueChanged"]
-    }]);
-function defineCustomElement() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["udp-time-selector", "unity-typography"];
-    components.forEach(tagName => { switch (tagName) {
-        case "udp-time-selector":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, UdpTimeSelector);
-            }
-            break;
-        case "unity-typography":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$1();
-            }
-            break;
-    } });
-}
-
-export { UdpTimeSelector as U, defineCustomElement as d };
-//# sourceMappingURL=udp-time-selector2.js.map
-
-//# sourceMappingURL=udp-time-selector2.js.map
+import{p as t,H as i,c as e,h as p,d as r,t as n}from"./index2.js";import{d as o}from"./unity-typography2.js";const s=t(class extends i{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.change=e(this,"change"),this.input=e(this,"input"),this.errorEvent=e(this,"error"),this.value="",this.readonly=!1,this.fullWidth=!1,this.size="normal",this.margin="normal",this.internalValue="",this.handleInvalid=t=>{this.setAndDispatchError(t.target.validationMessage)},this.handleValid=t=>{const i=t.target,e=this.validateTime(i.value);e?this.setAndDispatchError(e):i.validity.valid&&this.setAndDispatchError("")},this.handleTimeInput=t=>{const i=t.target.value;if(this.internalValue=i,void 0!==this.value&&(this.value=i),this.errorMessage){const t=this.validateTime(i);t!==this.errorMessage&&this.setAndDispatchError(t)}this.input.emit(i)},this.handleTimeChange=t=>{const i=t.target.value;this.internalValue=i,void 0!==this.value&&(this.value=i);const e=this.validateTime(i);this.setAndDispatchError(e||""),this.change.emit(i)}}componentWillLoad(){this.internalValue=this.value||this.initialValue||"",this.errorMessage=this.error}updateError(){console.log("Error prop changed:",this.error),this.errorMessage=this.error}initialValueChanged(t){if(void 0!==t){this.internalValue=t;const i=this.validateTime(t);i&&this.setAndDispatchError(i)}}valueChanged(t){void 0!==t&&(this.internalValue=t)}handleBlur(){}handleFocus(){}validateTime(t){if(!t)return"";const i=t=>{const[i,e]=t.split(":").map(Number);return 60*i+e},e=i(t);return this.min&&e<i(this.min)?`Time must be after ${this.min}`:this.max&&e>i(this.max)?`Time must be before ${this.max}`:""}setAndDispatchError(t){console.log("Setting error:",t),this.errorMessage=t,this.errorEvent.emit(t);const i=new CustomEvent("error",{detail:t,bubbles:!0,composed:!0});this.el.dispatchEvent(i)}render(){const t=!!this.errorMessage,i=["bx--text-input"];t&&i.push("bx--text-input--error"),this.disabled&&i.push("time-selector--disabled"),this.fullWidth&&i.push("bx--text-input--full-width");const e=i.join(" ");return p(r,{key:"b926488bd2c3d8bc4223cf3583dcb88ecdd39395",class:{"udp-input":!0,"udp-input--error":t,"udp-input--disabled":this.disabled,"udp-input--readonly":this.readonly,"udp-input--full-width":this.fullWidth,"udp-input--required":this.required,[`udp-input--size-${this.size}`]:!0,[`udp-input--margin-${this.margin}`]:!0},"aria-invalid":t?"true":"false","aria-required":this.required?"true":"false"},p("div",{key:"ba157e23a87f0a3cdf29b4f0e6dc4c3182d9dfee",class:"bx--form-item"},p("unity-typography",{key:"92bbe45ec95441bc92699cdc4b08d7bd3599d645",variant:"caption-text"},p("label",{key:"ff966556d6d5d6cd7bf501d527bc78e4c4e631eb",htmlFor:this.id,class:"bx--label"},this.label,this.required?"*":"")),p("input",{key:"ea13d4b4853f7338ce576aaba30b74d834ab77ca",type:"time",id:this.id,name:this.name,class:e,value:this.internalValue,min:this.min,max:this.max,onInput:this.handleTimeInput,onChange:this.handleTimeChange,onBlur:this.handleBlur,onFocus:this.handleFocus,onInvalid:this.handleInvalid,disabled:this.disabled,readonly:this.readonly,required:this.required,udprecordid:"udpRecord-udp-time-selector-"+this.id}),p("unity-typography",{key:"b3124e90f0b568f668c4a49afa4b1d4afe70bccc",class:"error-message",variant:"caption-text",color:"error"},this.errorMessage)))}get el(){return this}static get watchers(){return{error:[{updateError:0}],initialValue:[{initialValueChanged:0}],value:[{valueChanged:0}]}}static get style(){return':host(.udp-input){display:block;box-sizing:border-box;position:relative}:host(.udp-input--full-width){width:100%}:host(.udp-input--error){--input-border-color:var(--input-underline-color-error)}:host(.udp-input--disabled){pointer-events:none;opacity:0.5;cursor:not-allowed}:host(.udp-input--required){position:relative}:host(.udp-input--readonly){--input-background:var(--gray-02)}:host(.udp-input--hidden){display:none}:host(.udp-input--checked){--input-accent-color:var(--primary-color)}:host(.udp-input--multi-select){--list-max-height:200px}:host(.udp-input) .bx--text-input:focus{outline:none;}:host(.udp-input) .bx--form-item{margin-bottom:var(--spacing-05)}:host(.udp-input) .bx--label{display:block;margin-bottom:var(--spacing-03);color:var(--text-main);font-size:var(--caption-text-font-size);font-weight:var(--caption-text-font-weight);line-height:var(--caption-text-line-height)}@media (max-width: var(--breakpoint-xs-max)){:host(.udp-input){margin-bottom:var(--spacing-04)}:host(.udp-input) .bx--form-item{margin-bottom:var(--spacing-04)}}@media (min-width: var(--breakpoint-sm-min)){:host(.udp-input){min-height:2.5rem;}}:host(.udp-input--size-small) .bx--text-input,:host(.udp-input--size-small) textarea,:host(.udp-input--size-small) input[type="text"],:host(.udp-input--size-small) input[type="number"],:host(.udp-input--size-small) input[type="email"],:host(.udp-input--size-small) input[type="password"],:host(.udp-input--size-small) input[type="tel"],:host(.udp-input--size-small) input[type="url"],:host(.udp-input--size-small) input[type="search"]{padding:var(--spacing-02);padding-bottom:6px;font-size:var(--caption-font-size, 0.875rem)}:host(.udp-input--size-normal) .bx--text-input,:host(.udp-input--size-normal) textarea,:host(.udp-input--size-normal) input[type="text"],:host(.udp-input--size-normal) input[type="number"],:host(.udp-input--size-normal) input[type="email"],:host(.udp-input--size-normal) input[type="password"],:host(.udp-input--size-normal) input[type="tel"],:host(.udp-input--size-normal) input[type="url"],:host(.udp-input--size-normal) input[type="search"]{padding:var(--spacing-03);padding-bottom:9px;font-size:var(--body-font-size)}:host(.udp-input--size-large) .bx--text-input,:host(.udp-input--size-large) textarea,:host(.udp-input--size-large) input[type="text"],:host(.udp-input--size-large) input[type="number"],:host(.udp-input--size-large) input[type="email"],:host(.udp-input--size-large) input[type="password"],:host(.udp-input--size-large) input[type="tel"],:host(.udp-input--size-large) input[type="url"],:host(.udp-input--size-large) input[type="search"]{padding:var(--spacing-04);padding-bottom:12px;font-size:var(--body-font-size)}:host(.udp-input--margin-none){margin:0}:host(.udp-input--margin-dense){margin:var(--spacing-02) 0}:host(.udp-input--margin-normal){margin:var(--spacing-03) 0}:host(.udp-input--margin-comfortable){margin:var(--spacing-04) 0}:host(.udp-input--size-small) .bx--label{margin-bottom:var(--spacing-02);font-size:var(--caption-font-size, 0.875rem)}:host(.udp-input--size-normal) .bx--label{margin-bottom:var(--spacing-03);font-size:var(--body-font-size)}:host(.udp-input--size-large) .bx--label{margin-bottom:var(--spacing-04);font-size:var(--body-font-size)}.bx--text-input,textarea,input[type="text"],input[type="number"],input[type="email"],input[type="password"],input[type="tel"],input[type="url"],input[type="search"]{display:inline-block;padding:var(--spacing-03);padding-bottom:9px;box-sizing:border-box;border:none;font-size:var(--body-font-size);background:var(--input-background);border-bottom:var(--underline-standard) solid var(--input-underline-color, var(--gray-08));width:100%;font-family:var(--font-family);transition:border-bottom-color 0.15s ease-in-out}.bx--text-input:focus,textarea:focus,input[type="text"]:focus,input[type="number"]:focus,input[type="email"]:focus,input[type="password"]:focus,input[type="tel"]:focus,input[type="url"]:focus,input[type="search"]:focus{border-bottom-color:var(--input-underline-color-focus, var(--primary-color));border-bottom-width:2px}.bx--text-input--error,.bx--text-input:user-invalid,:host(.udp-input--error) .bx--text-input,:host(.udp-input--error) textarea,:host(.udp-input--error) input[type="text"],:host(.udp-input--error) input[type="number"],:host(.udp-input--error) input[type="email"],:host(.udp-input--error) input[type="password"],:host(.udp-input--error) input[type="tel"],:host(.udp-input--error) input[type="url"],:host(.udp-input--error) input[type="search"],input[type="text"]:user-invalid,input[type="number"]:user-invalid,input[type="email"]:user-invalid,input[type="password"]:user-invalid,input[type="tel"]:user-invalid,input[type="url"]:user-invalid,input[type="search"]:user-invalid{border-bottom-color:var(--input-underline-color-error, var(--error-color-main)) !important}:host(.udp-input--disabled) .bx--text-input,:host(.udp-input--disabled) textarea,:host(.udp-input--disabled) input[type="text"],:host(.udp-input--disabled) input[type="number"],:host(.udp-input--disabled) input[type="email"],:host(.udp-input--disabled) input[type="password"],:host(.udp-input--disabled) input[type="tel"],:host(.udp-input--disabled) input[type="url"],:host(.udp-input--disabled) input[type="search"]{border-bottom-color:var(--input-underline-color-disabled, var(--gray-08))}textarea.bx--text-input{resize:vertical;min-height:var(--spacing-08)}.bx--text-input::placeholder,textarea::placeholder,input[type="text"]::placeholder,input[type="number"]::placeholder,input[type="email"]::placeholder,input[type="password"]::placeholder,input[type="tel"]::placeholder,input[type="url"]::placeholder,input[type="search"]::placeholder{color:var(--placeholder-color, #999);opacity:1}:host(.udp-input),:host{display:block;width:100%;box-sizing:border-box}.bx--form-item{margin-bottom:var(--spacing-05)}.bx--label{display:block;margin-bottom:var(--spacing-03)}.error-message,.bx--form-requirement,:host(.udp-input--error) .error-message,:host(.udp-input--error) .bx--form-requirement{color:var(--error-color-main, #d32f2f) !important;margin-top:var(--spacing-02);font-size:var(--caption-font-size, 0.875rem);--unity-typography-inherit-color:var(--error-color-main, #d32f2f)}.helper-text{color:var(--text-02, #525252);margin-top:var(--spacing-02);font-size:var(--caption-font-size, 0.875rem)}:host(.udp-input--disabled) .bx--text-input,:host(.udp-input--disabled) textarea,:host(.udp-input--disabled) input,:host(.udp-input--disabled){cursor:not-allowed;opacity:0.6}:host(.udp-input--readonly) .bx--text-input,:host(.udp-input--readonly) textarea,:host(.udp-input--readonly) input{background-color:var(--field-01, #f4f4f4);cursor:default}'}},[1,"udp-time-selector",{id:[1],name:[1],label:[1],min:[1],max:[1],required:[4],error:[1],initialValue:[1,"initial-value"],value:[1025],disabled:[4],readonly:[4],fullWidth:[4,"full-width"],size:[1],margin:[1],internalValue:[32],errorMessage:[32]},void 0,{error:[{updateError:0}],initialValue:[{initialValueChanged:0}],value:[{valueChanged:0}]}]);function a(){"undefined"!=typeof customElements&&["udp-time-selector","unity-typography"].forEach((t=>{switch(t){case"udp-time-selector":customElements.get(n(t))||customElements.define(n(t),s);break;case"unity-typography":customElements.get(n(t))||o()}}))}export{s as U,a as d}