udp-stencil-component-library 25.18.2-beta.9 → 25.18.3-beta.1

package/dist/components/udp-stepper-demo.js

@@ -1,143 +1 @@
-import { p as proxyCustomElement, H, h } from './index2.js';
-import { d as defineCustomElement$4 } from './custom-button2.js';
-import { d as defineCustomElement$3 } from './udp-stepper2.js';
-import { d as defineCustomElement$2 } from './unity-typography2.js';
-
-const UdpStepperDemo$1 = /*@__PURE__*/ proxyCustomElement(class UdpStepperDemo extends H {
-    constructor(registerHost) {
-        super();
-        if (registerHost !== false) {
-            this.__registerHost();
-        }
-        this.__attachShadow();
-        this.activeStep = 0;
-        this.completed = {};
-        this.step1 = (h("div", null, "This is step 1 content - Try clicking next!"));
-        this.step2 = (h("div", null, "This is step 2 content - You can go back or forward"));
-        this.step3 = (h("div", null, "This is step 3 content - Final step!"));
-        this.steps = [
-            {
-                stepDisplay: {
-                    inProcessIcon: '1',
-                    completeIcon: '✓',
-                    title: 'First Step',
-                    subTitle: 'Start here',
-                },
-                stepTitle: 'Step 1',
-                showTitle: true,
-                buttons: [
-                    {
-                        title: 'Next',
-                        action: 2,
-                        variant: 'default',
-                        customAction: () => {
-                            this.completed = Object.assign(Object.assign({}, this.completed), { [0]: true });
-                            this.activeStep = 1;
-                        },
-                    },
-                ],
-                content: this.step1,
-            },
-            {
-                stepDisplay: {
-                    inProcessIcon: '2',
-                    completeIcon: '✓',
-                    title: 'Second Step',
-                    subTitle: 'Middle step',
-                },
-                stepTitle: 'Step 2',
-                showTitle: true,
-                buttons: [
-                    {
-                        title: 'Back',
-                        action: 1,
-                        variant: 'outline',
-                        customAction: () => (this.activeStep = 0),
-                    },
-                    {
-                        title: 'Next',
-                        action: 3,
-                        variant: 'default',
-                        customAction: () => {
-                            this.completed = Object.assign(Object.assign({}, this.completed), { [1]: true });
-                            this.activeStep = 2;
-                        },
-                    },
-                ],
-                content: this.step2,
-            },
-            {
-                stepDisplay: {
-                    inProcessIcon: '3',
-                    completeIcon: '✓',
-                    title: 'Final Step',
-                    subTitle: 'Complete the process',
-                },
-                stepTitle: 'Step 3',
-                showTitle: true,
-                buttons: [
-                    {
-                        title: 'Back',
-                        action: 2,
-                        customAction: () => (this.activeStep = 1),
-                    },
-                    {
-                        title: 'Finish',
-                        action: 3,
-                        variant: 'default',
-                        customAction: () => {
-                            this.completed = Object.assign(Object.assign({}, this.completed), { [2]: true });
-                            console.log('Process completed!');
-                        },
-                    },
-                ],
-                content: this.step3,
-            },
-        ];
-        this.handleStepChange = (event) => {
-            this.activeStep = event;
-        };
-    }
-    render() {
-        return (h("div", { key: '2319255e5746720f12f3e09b1218c2165ef8d817', style: { padding: '2rem' } }, h("unity-typography", { key: '656c99db41764cbb769d8082e5a45c042c669976', variant: "h2" }, "Horizontal Stepper with Labels bottom"), h("udp-stepper", { key: '16e00a0cab21bdf462a8750b19f18e6168fc90ac', steps: this.steps, activeStep: this.activeStep, completed: this.completed, stepChange: this.handleStepChange, orientation: "horizontal", labelDisplay: "all", labelPosition: "bottom" }), h("unity-typography", { key: '27a78441510baf5aa6dfc80d8919a34529617ad3', variant: "h2" }, "Horizontal Stepper without Labels"), h("udp-stepper", { key: '1d1a41d4454e7b73c87ebd4b336ebdc64aa9522b', steps: this.steps, activeStep: this.activeStep, completed: this.completed, stepChange: this.handleStepChange, orientation: "horizontal", labelDisplay: "none", labelPosition: "bottom" }), h("unity-typography", { key: '43b1a72c4a8a97aef8158b28cdd9b21def43763a', variant: "h2" }, "Horizontal Stepper with Labels to Right"), h("udp-stepper", { key: '5d5fe67789189f33101e8bfb936d4cfe15bbd7c7', steps: this.steps, activeStep: this.activeStep, completed: this.completed, stepChange: this.handleStepChange, orientation: "horizontal", labelDisplay: "all", labelPosition: "right" }), h("unity-typography", { key: '89680789dc23b5c0d995d6064278e9f634a62bec', variant: "h2" }, "Vertical Stepper"), h("udp-stepper", { key: '3df6a59fb672ff752d8f03626651a37388773646', steps: this.steps, activeStep: this.activeStep, completed: this.completed, stepChange: this.handleStepChange, orientation: "vertical", labelDisplay: "all", labelPosition: "right" })));
-    }
-}, [257, "udp-stepper-demo", {
-        "activeStep": [32],
-        "completed": [32]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["udp-stepper-demo", "custom-button", "udp-stepper", "unity-typography"];
-    components.forEach(tagName => { switch (tagName) {
-        case "udp-stepper-demo":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, UdpStepperDemo$1);
-            }
-            break;
-        case "custom-button":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$4();
-            }
-            break;
-        case "udp-stepper":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$3();
-            }
-            break;
-        case "unity-typography":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
-    } });
-}
-
-const UdpStepperDemo = UdpStepperDemo$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { UdpStepperDemo, defineCustomElement };
-//# sourceMappingURL=udp-stepper-demo.js.map
-
-//# sourceMappingURL=udp-stepper-demo.js.map
+import{p as t,H as e,h as s,t as i}from"./index2.js";import{d as o}from"./custom-button2.js";import{d as a}from"./udp-stepper2.js";import{d as p}from"./unity-typography2.js";const n=t(class extends e{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.activeStep=0,this.completed={},this.step1=s("div",null,"This is step 1 content - Try clicking next!"),this.step2=s("div",null,"This is step 2 content - You can go back or forward"),this.step3=s("div",null,"This is step 3 content - Final step!"),this.steps=[{stepDisplay:{inProcessIcon:"1",completeIcon:"✓",title:"First Step",subTitle:"Start here"},stepTitle:"Step 1",showTitle:!0,buttons:[{title:"Next",action:2,variant:"default",customAction:()=>{this.completed=Object.assign(Object.assign({},this.completed),{0:!0}),this.activeStep=1}}],content:this.step1},{stepDisplay:{inProcessIcon:"2",completeIcon:"✓",title:"Second Step",subTitle:"Middle step"},stepTitle:"Step 2",showTitle:!0,buttons:[{title:"Back",action:1,variant:"outline",customAction:()=>this.activeStep=0},{title:"Next",action:3,variant:"default",customAction:()=>{this.completed=Object.assign(Object.assign({},this.completed),{1:!0}),this.activeStep=2}}],content:this.step2},{stepDisplay:{inProcessIcon:"3",completeIcon:"✓",title:"Final Step",subTitle:"Complete the process"},stepTitle:"Step 3",showTitle:!0,buttons:[{title:"Back",action:2,customAction:()=>this.activeStep=1},{title:"Finish",action:3,variant:"default",customAction:()=>{this.completed=Object.assign(Object.assign({},this.completed),{2:!0}),console.log("Process completed!")}}],content:this.step3}],this.handleStepChange=t=>{this.activeStep=t}}render(){return s("div",{key:"2319255e5746720f12f3e09b1218c2165ef8d817",style:{padding:"2rem"}},s("unity-typography",{key:"656c99db41764cbb769d8082e5a45c042c669976",variant:"h2"},"Horizontal Stepper with Labels bottom"),s("udp-stepper",{key:"16e00a0cab21bdf462a8750b19f18e6168fc90ac",steps:this.steps,activeStep:this.activeStep,completed:this.completed,stepChange:this.handleStepChange,orientation:"horizontal",labelDisplay:"all",labelPosition:"bottom"}),s("unity-typography",{key:"27a78441510baf5aa6dfc80d8919a34529617ad3",variant:"h2"},"Horizontal Stepper without Labels"),s("udp-stepper",{key:"1d1a41d4454e7b73c87ebd4b336ebdc64aa9522b",steps:this.steps,activeStep:this.activeStep,completed:this.completed,stepChange:this.handleStepChange,orientation:"horizontal",labelDisplay:"none",labelPosition:"bottom"}),s("unity-typography",{key:"43b1a72c4a8a97aef8158b28cdd9b21def43763a",variant:"h2"},"Horizontal Stepper with Labels to Right"),s("udp-stepper",{key:"5d5fe67789189f33101e8bfb936d4cfe15bbd7c7",steps:this.steps,activeStep:this.activeStep,completed:this.completed,stepChange:this.handleStepChange,orientation:"horizontal",labelDisplay:"all",labelPosition:"right"}),s("unity-typography",{key:"89680789dc23b5c0d995d6064278e9f634a62bec",variant:"h2"},"Vertical Stepper"),s("udp-stepper",{key:"3df6a59fb672ff752d8f03626651a37388773646",steps:this.steps,activeStep:this.activeStep,completed:this.completed,stepChange:this.handleStepChange,orientation:"vertical",labelDisplay:"all",labelPosition:"right"}))}},[1,"udp-stepper-demo",{activeStep:[32],completed:[32]}]),c=n,l=function(){"undefined"!=typeof customElements&&["udp-stepper-demo","custom-button","udp-stepper","unity-typography"].forEach((t=>{switch(t){case"udp-stepper-demo":customElements.get(i(t))||customElements.define(i(t),n);break;case"custom-button":customElements.get(i(t))||o();break;case"udp-stepper":customElements.get(i(t))||a();break;case"unity-typography":customElements.get(i(t))||p()}}))};export{c as UdpStepperDemo,l as defineCustomElement}

package/dist/components/udp-stepper.js

@@ -1,9 +1 @@
-import { U as UdpStepper$1, d as defineCustomElement$1 } from './udp-stepper2.js';
-
-const UdpStepper = UdpStepper$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { UdpStepper, defineCustomElement };
-//# sourceMappingURL=udp-stepper.js.map
-
-//# sourceMappingURL=udp-stepper.js.map
+import{U as p,d as s}from"./udp-stepper2.js";const o=p,r=s;export{o as UdpStepper,r as defineCustomElement}

package/dist/components/udp-stepper2.js

@@ -1,154 +1 @@
-import { p as proxyCustomElement, H, h } from './index2.js';
-import { d as defineCustomElement$2 } from './custom-button2.js';
-import { d as defineCustomElement$1 } from './unity-typography2.js';
-
-const udpStepperCss = ":host{display:block;width:100%;contain:content}.stepper-container{display:flex;width:100%}.stepper-container.horizontal{flex-direction:column}.stepper-container.vertical{flex-direction:column;width:100%;overflow:visible}.step-headers{position:relative;display:flex;flex-direction:row;width:100%;margin-bottom:1rem;align-items:flex-start}.step-header{position:relative;flex:1;display:flex;align-items:flex-start;justify-content:center;padding:0.5rem;transition:padding 0.3s, background-color 0.3s;cursor:pointer}.step-header:not(.label-bottom):not(.label-right){flex-direction:row;align-items:center}.step-header.label-bottom{flex-direction:column;align-items:center;gap:0.5rem;text-align:center;position:relative;padding-top:8px}.step-header.label-bottom .step-icon{margin-right:0}.step-header.label-right{flex-direction:row;align-items:center;justify-content:flex-start;position:relative;padding-right:16px}.step-header:hover:not(.disabled){background-color:rgba(25, 118, 210, 0.1)}.step-header.disabled{cursor:not-allowed;opacity:0.6}.step-header.active{flex:1}.step-header.active.active-only{flex:2}.step-header.icons-only{justify-content:center;flex-direction:column;gap:0.5rem}.step-content-container{width:100%;position:relative;min-height:150px;display:flex;flex-direction:column}.step-content-wrapper{display:flex;flex-direction:column;gap:1rem;width:100%;visibility:visible;opacity:1;transition:opacity 0.2s ease-in-out, visibility 0.2s ease-in-out}.step-content-wrapper[style*=\"display: none\"]{visibility:hidden;opacity:0;position:absolute;pointer-events:none}.step-content-wrapper[style*=\"display: none\"]{overflow:hidden}.step-buttons{display:flex;gap:0.5rem;justify-content:flex-end;padding:1rem;width:100%;box-sizing:border-box;will-change:transform}.step{display:flex;position:relative;border:1px solid #e0e0e0;border-radius:4px;background-color:#fff}.step.horizontal{flex:1;min-width:0;padding:1rem}.step.horizontal.active{flex:2}.step.alternative-label{flex-direction:column;align-items:center}.step.clickable{cursor:pointer}.step-icon{display:flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;margin-right:8px;border:2px solid var(--divider-color, #ccc);flex-shrink:0;position:relative;z-index:1}.step-icon.completed{background-color:var(--success-color, #4caf50);border-color:var(--success-color, #4caf50)}.step-icon.completed unity-typography{color:var(--text-inverse, #ffffff)}.step-icon.active{background-color:transparent;border-color:var(--primary-color, #1976d2)}.step-icon.active unity-typography{color:var(--primary-color, #1976d2)}.step-icon:not(.active):not(.completed) unity-typography{color:var(--text-secondary, rgba(0, 0, 0, 0.6))}.step-content{flex:1}.step-title{font-weight:bold;margin-bottom:4px}.step-subtitle{font-size:0.875rem;color:#666}.step-content-display{padding:1rem;width:100%;box-sizing:border-box;overflow:hidden}.step-labels{display:flex;flex-direction:column}.label-bottom .step-labels{text-align:center}.label-right .step-labels{margin-left:8px}.step-header{position:relative}.step-header:not(:last-child)::after{content:'';position:absolute;background-color:var(--divider-color, #e0e0e0);height:1px}.step-icon{position:relative;z-index:1}.step.vertical{display:flex;flex-direction:column;width:100%;border:1px solid var(--divider-color, #e0e0e0);border-radius:4px;background-color:#fff;margin-bottom:1rem;overflow:visible;box-sizing:border-box}.step-content-vertical{width:100%;box-sizing:border-box;overflow:visible}.step-header-container{display:flex}.step.vertical .step-header{width:100%;padding:1rem}.step.vertical .step-header.label-right{flex-direction:row;align-items:center;justify-content:flex-start}.step.vertical .step-labels{margin-left:8px}.step.vertical .step-content-wrapper{margin:0;padding:0;border:none}";
-
-const UdpStepper = /*@__PURE__*/ proxyCustomElement(class UdpStepper extends H {
-    constructor(registerHost) {
-        super();
-        if (registerHost !== false) {
-            this.__registerHost();
-        }
-        this.__attachShadow();
-        this.activeStep = 0;
-        this.orientation = 'horizontal';
-        this.alternativeLabel = false;
-        this.nonLinear = false;
-        this.completed = {};
-        this.disableStrictStepCompletion = false;
-        this.labelDisplay = 'all';
-        this.labelPosition = 'default';
-    }
-    validateActiveStep(newValue) {
-        if (newValue < 0 || newValue >= this.steps.length) {
-            console.warn('Invalid active step value');
-            return;
-        }
-    }
-    handleStepClick(index) {
-        if (this.canNavigateToStep(index) && this.stepChange) {
-            this.stepChange(index);
-        }
-    }
-    canNavigateToStep(stepIndex) {
-        if (this.disableStrictStepCompletion || this.nonLinear) {
-            return true;
-        }
-        for (let i = 0; i < stepIndex; i++) {
-            if (!this.completed[i]) {
-                return false;
-            }
-        }
-        return true;
-    }
-    // ? This is the original renderIcon method - Unused at the moment
-    // private renderIcon(step: Step, index: number) {
-    //   const isCompleted = this.completed[index];
-    //   const isActive = this.activeStep === index;
-    //   const icon = isCompleted ? step.stepDisplay.completeIcon : step.stepDisplay.inProcessIcon;
-    //   return (
-    //     <div
-    //       class={{
-    //         'step-icon': true,
-    //         'completed': isCompleted,
-    //         'active': isActive,
-    //       }}
-    //     >
-    //       {icon}
-    //     </div>
-    //   );
-    // }
-    renderStepHeader(step, index) {
-        const isCompleted = this.completed[index];
-        const isActive = this.activeStep === index;
-        const isClickable = this.canNavigateToStep(index);
-        return (h("div", { class: {
-                'step-header': true,
-                'icons-only': this.labelDisplay === 'none',
-                'active': isActive && this.labelDisplay === 'active-only',
-                'completed': isCompleted,
-                'active-only': this.labelDisplay === 'active-only' && isActive,
-                'disabled': !isClickable,
-                'label-bottom': this.labelPosition === 'bottom',
-                'label-right': this.labelPosition === 'right',
-            }, onClick: () => {
-                if (isClickable) {
-                    this.handleStepClick(index);
-                }
-            } }, h("div", { class: {
-                'step-icon': true,
-                'active': isActive,
-                'completed': isCompleted,
-            } }, h("unity-typography", { variant: "body1", color: isCompleted ? 'inherit' : isActive ? 'primary' : 'textSecondary' }, isCompleted ? step.stepDisplay.completeIcon : step.stepDisplay.inProcessIcon)), this.labelDisplay === 'all' && (h("div", { class: "step-labels" }, h("unity-typography", { variant: "body1", bold: true }, step.stepDisplay.title), step.stepDisplay.subTitle && (h("unity-typography", { variant: "caption-text", color: "textSecondary" }, step.stepDisplay.subTitle)))), this.labelDisplay === 'active-only' && isActive && (h("div", { class: "step-labels" }, h("unity-typography", { variant: "body1", bold: true }, step.stepDisplay.title), step.stepDisplay.subTitle && (h("unity-typography", { variant: "caption-text", color: "textSecondary" }, step.stepDisplay.subTitle))))));
-    }
-    renderStepContent(step, index) {
-        const isActive = this.activeStep === index;
-        if (!isActive) {
-            return h("div", { style: { display: 'none' }, class: "step-content-wrapper" });
-        }
-        return (h("div", { class: "step-content-wrapper" }, h("div", { class: "step-content-display" }, (step === null || step === void 0 ? void 0 : step.content) ? step === null || step === void 0 ? void 0 : step.content : h("slot", null)), step.buttons && (h("div", { class: "step-buttons" }, step.buttons.map(button => (h("custom-button", { variant: button.variant || 'default', disabled: button.disabled, onClick: e => {
-                e.stopPropagation();
-                if (button.customAction) {
-                    button.customAction();
-                }
-                else {
-                    this.handleStepClick(button.action - 1);
-                }
-            } }, button.title)))))));
-    }
-    renderHorizontalStepper() {
-        return (h("div", { class: "stepper-container horizontal" }, h("div", { class: "step-headers" }, this.steps.map((step, index) => this.renderStepHeader(step, index))), h("div", { class: "step-content-container" }, this.steps.map((step, index) => this.renderStepContent(step, index)))));
-    }
-    renderVerticalStepper() {
-        return (h("div", { class: "stepper-container vertical" }, this.steps.map((step, index) => (h("div", { class: "step vertical" }, h("div", { class: "step-header-container" }, this.renderStepHeader(step, index)), h("div", { class: "step-content-vertical" }, this.activeStep === index && this.renderStepContent(step, index)))))));
-    }
-    render() {
-        return this.orientation === 'horizontal' ? this.renderHorizontalStepper() : this.renderVerticalStepper();
-    }
-    static get watchers() { return {
-        "activeStep": ["validateActiveStep"]
-    }; }
-    static get style() { return udpStepperCss; }
-}, [257, "udp-stepper", {
-        "steps": [16],
-        "activeStep": [2, "active-step"],
-        "orientation": [1],
-        "alternativeLabel": [4, "alternative-label"],
-        "nonLinear": [4, "non-linear"],
-        "completed": [16],
-        "disableStrictStepCompletion": [4, "disable-strict-step-completion"],
-        "labelDisplay": [1, "label-display"],
-        "labelPosition": [1, "label-position"],
-        "stepChange": [16]
-    }, undefined, {
-        "activeStep": ["validateActiveStep"]
-    }]);
-function defineCustomElement() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["udp-stepper", "custom-button", "unity-typography"];
-    components.forEach(tagName => { switch (tagName) {
-        case "udp-stepper":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, UdpStepper);
-            }
-            break;
-        case "custom-button":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
-        case "unity-typography":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$1();
-            }
-            break;
-    } });
-}
-
-export { UdpStepper as U, defineCustomElement as d };
-//# sourceMappingURL=udp-stepper2.js.map
-
-//# sourceMappingURL=udp-stepper2.js.map
+import{p as e,H as t,h as i,t as o}from"./index2.js";import{d as r}from"./custom-button2.js";import{d as s}from"./unity-typography2.js";const n=e(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.activeStep=0,this.orientation="horizontal",this.alternativeLabel=!1,this.nonLinear=!1,this.completed={},this.disableStrictStepCompletion=!1,this.labelDisplay="all",this.labelPosition="default"}validateActiveStep(e){(e<0||e>=this.steps.length)&&console.warn("Invalid active step value")}handleStepClick(e){this.canNavigateToStep(e)&&this.stepChange&&this.stepChange(e)}canNavigateToStep(e){if(this.disableStrictStepCompletion||this.nonLinear)return!0;for(let t=0;t<e;t++)if(!this.completed[t])return!1;return!0}renderStepHeader(e,t){const o=this.completed[t],r=this.activeStep===t,s=this.canNavigateToStep(t);return i("div",{class:{"step-header":!0,"icons-only":"none"===this.labelDisplay,active:r&&"active-only"===this.labelDisplay,completed:o,"active-only":"active-only"===this.labelDisplay&&r,disabled:!s,"label-bottom":"bottom"===this.labelPosition,"label-right":"right"===this.labelPosition},onClick:()=>{s&&this.handleStepClick(t)}},i("div",{class:{"step-icon":!0,active:r,completed:o}},i("unity-typography",{variant:"body1",color:o?"inherit":r?"primary":"textSecondary"},o?e.stepDisplay.completeIcon:e.stepDisplay.inProcessIcon)),"all"===this.labelDisplay&&i("div",{class:"step-labels"},i("unity-typography",{variant:"body1",bold:!0},e.stepDisplay.title),e.stepDisplay.subTitle&&i("unity-typography",{variant:"caption-text",color:"textSecondary"},e.stepDisplay.subTitle)),"active-only"===this.labelDisplay&&r&&i("div",{class:"step-labels"},i("unity-typography",{variant:"body1",bold:!0},e.stepDisplay.title),e.stepDisplay.subTitle&&i("unity-typography",{variant:"caption-text",color:"textSecondary"},e.stepDisplay.subTitle)))}renderStepContent(e,t){return this.activeStep===t?i("div",{class:"step-content-wrapper"},i("div",{class:"step-content-display"},(null==e?void 0:e.content)?null==e?void 0:e.content:i("slot",null)),e.buttons&&i("div",{class:"step-buttons"},e.buttons.map((e=>i("custom-button",{variant:e.variant||"default",disabled:e.disabled,onClick:t=>{t.stopPropagation(),e.customAction?e.customAction():this.handleStepClick(e.action-1)}},e.title))))):i("div",{style:{display:"none"},class:"step-content-wrapper"})}renderHorizontalStepper(){return i("div",{class:"stepper-container horizontal"},i("div",{class:"step-headers"},this.steps.map(((e,t)=>this.renderStepHeader(e,t)))),i("div",{class:"step-content-container"},this.steps.map(((e,t)=>this.renderStepContent(e,t)))))}renderVerticalStepper(){return i("div",{class:"stepper-container vertical"},this.steps.map(((e,t)=>i("div",{class:"step vertical"},i("div",{class:"step-header-container"},this.renderStepHeader(e,t)),i("div",{class:"step-content-vertical"},this.activeStep===t&&this.renderStepContent(e,t))))))}render(){return"horizontal"===this.orientation?this.renderHorizontalStepper():this.renderVerticalStepper()}static get watchers(){return{activeStep:[{validateActiveStep:0}]}}static get style(){return':host{display:block;width:100%;contain:content}.stepper-container{display:flex;width:100%}.stepper-container.horizontal{flex-direction:column}.stepper-container.vertical{flex-direction:column;width:100%;overflow:visible}.step-headers{position:relative;display:flex;flex-direction:row;width:100%;margin-bottom:1rem;align-items:flex-start}.step-header{position:relative;flex:1;display:flex;align-items:flex-start;justify-content:center;padding:0.5rem;transition:padding 0.3s, background-color 0.3s;cursor:pointer}.step-header:not(.label-bottom):not(.label-right){flex-direction:row;align-items:center}.step-header.label-bottom{flex-direction:column;align-items:center;gap:0.5rem;text-align:center;position:relative;padding-top:8px}.step-header.label-bottom .step-icon{margin-right:0}.step-header.label-right{flex-direction:row;align-items:center;justify-content:flex-start;position:relative;padding-right:16px}.step-header:hover:not(.disabled){background-color:rgba(25, 118, 210, 0.1)}.step-header.disabled{cursor:not-allowed;opacity:0.6}.step-header.active{flex:1}.step-header.active.active-only{flex:2}.step-header.icons-only{justify-content:center;flex-direction:column;gap:0.5rem}.step-content-container{width:100%;position:relative;min-height:150px;display:flex;flex-direction:column}.step-content-wrapper{display:flex;flex-direction:column;gap:1rem;width:100%;visibility:visible;opacity:1;transition:opacity 0.2s ease-in-out, visibility 0.2s ease-in-out}.step-content-wrapper[style*="display: none"]{visibility:hidden;opacity:0;position:absolute;pointer-events:none}.step-content-wrapper[style*="display: none"]{overflow:hidden}.step-buttons{display:flex;gap:0.5rem;justify-content:flex-end;padding:1rem;width:100%;box-sizing:border-box;will-change:transform}.step{display:flex;position:relative;border:1px solid #e0e0e0;border-radius:4px;background-color:#fff}.step.horizontal{flex:1;min-width:0;padding:1rem}.step.horizontal.active{flex:2}.step.alternative-label{flex-direction:column;align-items:center}.step.clickable{cursor:pointer}.step-icon{display:flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;margin-right:8px;border:2px solid var(--divider-color, #ccc);flex-shrink:0;position:relative;z-index:1}.step-icon.completed{background-color:var(--success-color, #4caf50);border-color:var(--success-color, #4caf50)}.step-icon.completed unity-typography{color:var(--text-inverse, #ffffff)}.step-icon.active{background-color:transparent;border-color:var(--primary-color, #1976d2)}.step-icon.active unity-typography{color:var(--primary-color, #1976d2)}.step-icon:not(.active):not(.completed) unity-typography{color:var(--text-secondary, rgba(0, 0, 0, 0.6))}.step-content{flex:1}.step-title{font-weight:bold;margin-bottom:4px}.step-subtitle{font-size:0.875rem;color:#666}.step-content-display{padding:1rem;width:100%;box-sizing:border-box;overflow:hidden}.step-labels{display:flex;flex-direction:column}.label-bottom .step-labels{text-align:center}.label-right .step-labels{margin-left:8px}.step-header{position:relative}.step-header:not(:last-child)::after{content:\'\';position:absolute;background-color:var(--divider-color, #e0e0e0);height:1px}.step-icon{position:relative;z-index:1}.step.vertical{display:flex;flex-direction:column;width:100%;border:1px solid var(--divider-color, #e0e0e0);border-radius:4px;background-color:#fff;margin-bottom:1rem;overflow:visible;box-sizing:border-box}.step-content-vertical{width:100%;box-sizing:border-box;overflow:visible}.step-header-container{display:flex}.step.vertical .step-header{width:100%;padding:1rem}.step.vertical .step-header.label-right{flex-direction:row;align-items:center;justify-content:flex-start}.step.vertical .step-labels{margin-left:8px}.step.vertical .step-content-wrapper{margin:0;padding:0;border:none}'}},[257,"udp-stepper",{steps:[16],activeStep:[2,"active-step"],orientation:[1],alternativeLabel:[4,"alternative-label"],nonLinear:[4,"non-linear"],completed:[16],disableStrictStepCompletion:[4,"disable-strict-step-completion"],labelDisplay:[1,"label-display"],labelPosition:[1,"label-position"],stepChange:[16]},void 0,{activeStep:[{validateActiveStep:0}]}]);function a(){"undefined"!=typeof customElements&&["udp-stepper","custom-button","unity-typography"].forEach((e=>{switch(e){case"udp-stepper":customElements.get(o(e))||customElements.define(o(e),n);break;case"custom-button":customElements.get(o(e))||r();break;case"unity-typography":customElements.get(o(e))||s()}}))}export{n as U,a as d}

package/dist/components/udp-tab-panel.js

@@ -1,45 +1 @@
-import { p as proxyCustomElement, H, h } from './index2.js';
-
-const udpTabPanelCss = ":host{display:block}.tab-panel{display:none}.tab-panel.active{display:block}";
-
-const UdpTabPanel$1 = /*@__PURE__*/ proxyCustomElement(class UdpTabPanel extends H {
-    constructor(registerHost) {
-        super();
-        if (registerHost !== false) {
-            this.__registerHost();
-        }
-        this.__attachShadow();
-    }
-    render() {
-        const isActive = this.value === this.index;
-        return (h("div", { key: '189ebf853b69a4f543aaafc450003f4a046c823d', class: {
-                'tab-panel': true,
-                'active': isActive,
-            }, role: "tabpanel", "aria-hidden": !isActive ? 'true' : 'false' }, h("slot", { key: '7b9a7830280bf62f9bce753f6ab83b68e198a5df' })));
-    }
-    static get style() { return udpTabPanelCss; }
-}, [257, "udp-tab-panel", {
-        "value": [2],
-        "index": [2]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["udp-tab-panel"];
-    components.forEach(tagName => { switch (tagName) {
-        case "udp-tab-panel":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, UdpTabPanel$1);
-            }
-            break;
-    } });
-}
-
-const UdpTabPanel = UdpTabPanel$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { UdpTabPanel, defineCustomElement };
-//# sourceMappingURL=udp-tab-panel.js.map
-
-//# sourceMappingURL=udp-tab-panel.js.map
+import{p as e,H as t,h as a,t as s}from"./index2.js";const n=e(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow()}render(){const e=this.value===this.index;return a("div",{key:"189ebf853b69a4f543aaafc450003f4a046c823d",class:{"tab-panel":!0,active:e},role:"tabpanel","aria-hidden":e?"false":"true"},a("slot",{key:"7b9a7830280bf62f9bce753f6ab83b68e198a5df"}))}static get style(){return":host{display:block}.tab-panel{display:none}.tab-panel.active{display:block}"}},[257,"udp-tab-panel",{value:[2],index:[2]}]),l=n,c=function(){"undefined"!=typeof customElements&&["udp-tab-panel"].forEach((e=>{"udp-tab-panel"===e&&(customElements.get(s(e))||customElements.define(s(e),n))}))};export{l as UdpTabPanel,c as defineCustomElement}

package/dist/components/udp-tab.js

@@ -1,64 +1 @@
-import { p as proxyCustomElement, H, h } from './index2.js';
-
-const udpTabCss = ".tab-panel{display:none}.tab-panel.active{display:block}";
-
-const UdpTab$1 = /*@__PURE__*/ proxyCustomElement(class UdpTab extends H {
-    constructor(registerHost) {
-        super();
-        if (registerHost !== false) {
-            this.__registerHost();
-        }
-        /**
-         * True if this is the active tab.
-         * This is set by the parent <udp-tabs> component.
-         */
-        this.active = false;
-        /**
-         * Placement of the icon relative to the title.
-         * @default 'start'
-         */
-        this.iconPlacement = 'start';
-        /**
-         * If true, the tab will be hidden from the tab list.
-         * @default false
-         */
-        this.hidden = false;
-        /**
-         * If true, the tab will be unselectable.
-         * @default false
-         */
-        this.disabled = false;
-    }
-    render() {
-        return (h("div", { key: 'f11315932e2e200997d557729b171223fa98f4b0', class: { 'tab-panel': true, 'active': this.active }, role: "tabpanel" }, h("slot", { key: '73b9ef3b7dfeda69ae130fdefb39e8179d891818' })));
-    }
-    static get style() { return udpTabCss; }
-}, [260, "udp-tab", {
-        "label": [1],
-        "active": [516],
-        "icon": [1],
-        "iconPlacement": [1, "icon-placement"],
-        "hidden": [4],
-        "disabled": [4]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["udp-tab"];
-    components.forEach(tagName => { switch (tagName) {
-        case "udp-tab":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, UdpTab$1);
-            }
-            break;
-    } });
-}
-
-const UdpTab = UdpTab$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { UdpTab, defineCustomElement };
-//# sourceMappingURL=udp-tab.js.map
-
-//# sourceMappingURL=udp-tab.js.map
+import{p as e,H as t,h as s,t as a}from"./index2.js";const n=e(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.active=!1,this.iconPlacement="start",this.hidden=!1,this.disabled=!1}render(){return s("div",{key:"f11315932e2e200997d557729b171223fa98f4b0",class:{"tab-panel":!0,active:this.active},role:"tabpanel"},s("slot",{key:"73b9ef3b7dfeda69ae130fdefb39e8179d891818"}))}static get style(){return".tab-panel{display:none}.tab-panel.active{display:block}"}},[260,"udp-tab",{label:[1],active:[516],icon:[1],iconPlacement:[1,"icon-placement"],hidden:[4],disabled:[4]}]),i=n,d=function(){"undefined"!=typeof customElements&&["udp-tab"].forEach((e=>{"udp-tab"===e&&(customElements.get(a(e))||customElements.define(a(e),n))}))};export{i as UdpTab,d as defineCustomElement}

package/dist/components/udp-tabs.js

@@ -1,9 +1 @@
-import { U as UdpTabs$1, d as defineCustomElement$1 } from './udp-tabs2.js';
-
-const UdpTabs = UdpTabs$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { UdpTabs, defineCustomElement };
-//# sourceMappingURL=udp-tabs.js.map
-
-//# sourceMappingURL=udp-tabs.js.map
+import{U as s,d as o}from"./udp-tabs2.js";const t=s,a=o;export{t as UdpTabs,a as defineCustomElement}