udp-stencil-component-library 1.0.0

package/dist/components/udp-radio-button.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface UdpRadioButton extends Components.UdpRadioButton, HTMLElement {}
+export const UdpRadioButton: {
+    prototype: UdpRadioButton;
+    new (): UdpRadioButton;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/udp-radio-button.js

@@ -0,0 +1,9 @@
+import { U as UdpRadioButton$1, d as defineCustomElement$1 } from './p-C7DS5naX.js';
+
+const UdpRadioButton = UdpRadioButton$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { UdpRadioButton, defineCustomElement };
+//# sourceMappingURL=udp-radio-button.js.map
+
+//# sourceMappingURL=udp-radio-button.js.map

package/dist/components/udp-radio-button.js.map

@@ -0,0 +1 @@
+{"file":"udp-radio-button.js","mappings":";;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

package/dist/components/udp-selector.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface UdpSelector extends Components.UdpSelector, HTMLElement {}
+export const UdpSelector: {
+    prototype: UdpSelector;
+    new (): UdpSelector;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/udp-selector.js

@@ -0,0 +1,9 @@
+import { U as UdpSelector$1, d as defineCustomElement$1 } from './p-BoD1tv2h.js';
+
+const UdpSelector = UdpSelector$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { UdpSelector, defineCustomElement };
+//# sourceMappingURL=udp-selector.js.map
+
+//# sourceMappingURL=udp-selector.js.map

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

@@ -0,0 +1 @@
+{"file":"udp-selector.js","mappings":";;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

package/dist/components/udp-side-sheet.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface UdpSideSheet extends Components.UdpSideSheet, HTMLElement {}
+export const UdpSideSheet: {
+    prototype: UdpSideSheet;
+    new (): UdpSideSheet;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/udp-side-sheet.js

@@ -0,0 +1,9 @@
+import { U as UdpSideSheet$1, d as defineCustomElement$1 } from './p-DIPIddaO.js';
+
+const UdpSideSheet = UdpSideSheet$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { UdpSideSheet, defineCustomElement };
+//# sourceMappingURL=udp-side-sheet.js.map
+
+//# sourceMappingURL=udp-side-sheet.js.map

package/dist/components/udp-side-sheet.js.map

@@ -0,0 +1 @@
+{"file":"udp-side-sheet.js","mappings":";;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

package/dist/components/udp-skeleton-loading.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface UdpSkeletonLoading extends Components.UdpSkeletonLoading, HTMLElement {}
+export const UdpSkeletonLoading: {
+    prototype: UdpSkeletonLoading;
+    new (): UdpSkeletonLoading;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/udp-skeleton-loading.js

@@ -0,0 +1,9 @@
+import { U as UdpSkeletonLoading$1, d as defineCustomElement$1 } from './p-CzgDLAcK.js';
+
+const UdpSkeletonLoading = UdpSkeletonLoading$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { UdpSkeletonLoading, defineCustomElement };
+//# sourceMappingURL=udp-skeleton-loading.js.map
+
+//# sourceMappingURL=udp-skeleton-loading.js.map

package/dist/components/udp-skeleton-loading.js.map

@@ -0,0 +1 @@
+{"file":"udp-skeleton-loading.js","mappings":";;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

package/dist/components/udp-split-screen.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface UdpSplitScreen extends Components.UdpSplitScreen, HTMLElement {}
+export const UdpSplitScreen: {
+    prototype: UdpSplitScreen;
+    new (): UdpSplitScreen;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/udp-split-screen.js

@@ -0,0 +1,90 @@
+import { p as proxyCustomElement, H, h } from './p-DPon6DDX.js';
+
+const udpSplitScreenCss = ".container{display:flex;height:100%;width:100%}.container:not(.open){display:none}.panel{flex-grow:1;overflow:auto;cursor:default;}.resizer{background-color:transparent;height:100vh;cursor:ew-resize;position:relative;display:flex;align-items:center;justify-content:center;padding:0 2px;box-sizing:content-box;transition:background-color 0.3s ease;}.resizer:hover{background-color:var(--primary-color);cursor:ew-resize;}.resizer:hover::before{background-color:transparent;}.resizer::before{content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);width:2px;height:100%;background-color:rgb(219, 219, 219);transition:background-color 0.3s ease;}.drag-handle{content:'';font-size:24px;color:#666;user-select:none;position:absolute;top:50%;left:50%;transform:translate(-50%, -50%)}";
+
+const UdpSplitScreen$1 = /*@__PURE__*/ proxyCustomElement(class UdpSplitScreen extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.isOpen = true;
+        this.panelWidth = 75;
+        this.isDragging = false; // Track dragging state
+        this.handleDrag = (event) => {
+            console.log("Dragging");
+            const bounds = this.element.getBoundingClientRect();
+            const newWidth = ((event.clientX - bounds.left) / bounds.width) * 100;
+            const adjustedWidth = Math.max(2, Math.min(newWidth, 98)); // Keep your existing constraints
+            localStorage.setItem('panelWidth', this.panelWidth.toString());
+            if (this.panelWidth !== adjustedWidth) {
+                this.panelWidth = adjustedWidth;
+                localStorage.setItem('panelWidth', this.panelWidth.toString());
+            }
+        };
+    }
+    async toggleOpen() {
+        this.isOpen = !this.isOpen;
+    }
+    componentDidLoad() {
+        this.element.addEventListener('mousedown', (event) => {
+            this.isDragging = true;
+            //this.element.style.cursor = 'grabbing'; // Change to grabbing when dragging starts
+            // Prevent default to avoid any text selection or other default actions
+            event.preventDefault();
+        });
+        // Attach mousemove and mouseup at the document level to ensure smooth dragging
+        document.addEventListener('mousemove', (event) => {
+            if (!this.isDragging)
+                return;
+            if (this.isDragging) {
+                const bounds = this.element.getBoundingClientRect();
+                const newWidth = ((event.clientX - bounds.left) / bounds.width) * 100;
+                this.panelWidth = Math.max(2, Math.min(newWidth, 98)); // Adjusted for a bit of margin
+            }
+            this.handleDrag(event);
+        });
+        document.addEventListener('mouseup', () => {
+            if (this.isDragging) {
+                this.isDragging = false;
+                //this.element.style.cursor = 'ew-resize'; // Revert cursor when dragging ends
+            }
+        });
+    }
+    async componentWillLoad() {
+        const savedWidth = localStorage.getItem('panelWidth');
+        if (savedWidth) {
+            this.panelWidth = parseFloat(savedWidth);
+        }
+    }
+    render() {
+        return (h("div", { key: '650c1c8f3b971d9dec3991558cb0b88c03927af7', ref: (el) => this.element = el, class: { 'container': true, 'open': this.isOpen } }, h("div", { key: '8d8dd66d64831701d3876dbaf0f7867fe6afe863', class: "panel", style: { width: `${this.panelWidth}%` } }, h("slot", { key: '6dee576ef8c8a1da71127bc211c238e15dfa357c', name: "first-panel" })), h("div", { key: 'b16b575a13ecb6217061f0742b8f5e112f5c1839', class: "resizer", onMouseDown: (event) => event.preventDefault() }, h("div", { key: '8e1a8eeefced7a857677405e39971ffc8ae3d0e4', class: "drag-handle" })), h("div", { key: 'b63d6dd429c4964f149adf8267780333db81f2b0', class: "panel", style: { width: `${100 - this.panelWidth}%` } }, h("slot", { key: 'd36f38b1a7b551371dbc17e092a8651b558ea338', name: "second-panel" }, this.panelContent))));
+    }
+    static get style() { return udpSplitScreenCss; }
+}, [1, "udp-split-screen", {
+        "panelContent": [1, "panel-content"],
+        "isOpen": [32],
+        "panelWidth": [32],
+        "isDragging": [32],
+        "toggleOpen": [64]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["udp-split-screen"];
+    components.forEach(tagName => { switch (tagName) {
+        case "udp-split-screen":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, UdpSplitScreen$1);
+            }
+            break;
+    } });
+}
+
+const UdpSplitScreen = UdpSplitScreen$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { UdpSplitScreen, defineCustomElement };
+//# sourceMappingURL=udp-split-screen.js.map
+
+//# sourceMappingURL=udp-split-screen.js.map

package/dist/components/udp-split-screen.js.map

@@ -0,0 +1 @@
+{"file":"udp-split-screen.js","mappings":"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","names":["UdpSplitScreen","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/my-component/UI/layout/udp-split-screen/udp-split-screen.css?tag=udp-split-screen&encapsulation=shadow","src/components/my-component/UI/layout/udp-split-screen/udp-split-screen.tsx"],"sourcesContent":["/* udp-split-screen.css adjustments */\n\n.container {\n    display: flex;\n    height: 100%;\n    width: 100%;\n}\n\n.container:not(.open) {\n    display: none;\n}\n\n.panel {\n    flex-grow: 1;\n    overflow: auto;\n    /* Remove hover styles from .panel */\n    /* border-left: 1px solid rgb(219, 219, 219);  */\n    cursor: default; /* Ensure default cursor for panels */\n}\n\n/* Adjustments for better hover interaction */\n.resizer {\n    background-color: transparent; /* Keeps the resizer background transparent */\n    height: 100vh;\n    cursor: ew-resize; /* Indicates a resize cursor */\n    position: relative;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding: 0 2px; /* Increase interactive area without affecting visual line */\n    box-sizing: content-box; /* Ensures padding doesn't add to the width */\n    transition: background-color 0.3s ease; /* Smooth transition for background color */\n}\n\n.resizer:hover {\n    background-color: var(--primary-color); /* Change to primary color on hover */\n    cursor: ew-resize;\n    /* Optionally, if you want to keep the visual line visible on hover, adjust here */\n}\n\n.resizer:hover::before {\n    background-color: transparent; /* Makes the grey line transparent on hover */\n}\n\n/* Visual indicator for the draggable area - a centered line */\n.resizer::before {\n    content: '';\n    position: absolute;\n    top: 0;\n    left: 50%; /* Keeps the line visually centered */\n    transform: translateX(-50%);\n    width: 2px; /* Visual line width */\n    height: 100%;\n    background-color: rgb(219, 219, 219); /* Default color */\n    transition: background-color 0.3s ease; /* Smooth transition for the line color */\n}\n\n\n\n\n.drag-handle {\n    content: ''; /* Adjust if using an icon or symbol */\n    font-size: 24px;\n    color: #666;\n    user-select: none;\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%);\n}\n","import { Component, Prop, State, Method, h } from '@stencil/core';\n\n@Component({\n  tag: 'udp-split-screen',\n  styleUrl: 'udp-split-screen.css',\n  shadow: true,\n})\nexport class UdpSplitScreen {\n  @Prop() panelContent: string;\n  @State() isOpen: boolean = true;\n  @State() panelWidth: number = 75;\n  @State() isDragging: boolean = false; // Track dragging state\n\n  private element: HTMLElement;\n\n  @Method()\n  async toggleOpen() {\n    this.isOpen = !this.isOpen;\n  }\n\n  componentDidLoad() {\n    this.element.addEventListener('mousedown', (event: MouseEvent) => {\n      this.isDragging = true;\n      //this.element.style.cursor = 'grabbing'; // Change to grabbing when dragging starts\n      // Prevent default to avoid any text selection or other default actions\n      event.preventDefault();\n    });\n\n    // Attach mousemove and mouseup at the document level to ensure smooth dragging\n    document.addEventListener('mousemove', (event: MouseEvent) => {\n      if (!this.isDragging) return;\n      if (this.isDragging) {\n        const bounds = this.element.getBoundingClientRect();\n        const newWidth = ((event.clientX - bounds.left) / bounds.width) * 100;\n        this.panelWidth = Math.max(2, Math.min(newWidth, 98)); // Adjusted for a bit of margin\n      }\n      this.handleDrag(event);\n    });\n\n    document.addEventListener('mouseup', () => {\n      if (this.isDragging) {\n        this.isDragging = false;\n        //this.element.style.cursor = 'ew-resize'; // Revert cursor when dragging ends\n      }\n    });\n  }\n\n\n  private handleDrag = (event: MouseEvent) => {\n    console.log(\"Dragging\");\n    const bounds = this.element.getBoundingClientRect();\n    const newWidth = ((event.clientX - bounds.left) / bounds.width) * 100;\n    const adjustedWidth = Math.max(2, Math.min(newWidth, 98)); // Keep your existing constraints\n  \n\n    localStorage.setItem('panelWidth', this.panelWidth.toString()); \n\n    if (this.panelWidth !== adjustedWidth) {\n      this.panelWidth = adjustedWidth;\n      localStorage.setItem('panelWidth', this.panelWidth.toString()); \n    }\n  };\n  \n\n  async componentWillLoad() {\n    const savedWidth = localStorage.getItem('panelWidth');\n    if (savedWidth) {\n      this.panelWidth = parseFloat(savedWidth);\n    }\n  }\n  \n\n  render() {\n    return (\n      <div ref={(el) => this.element = el as HTMLElement} class={{ 'container': true, 'open': this.isOpen }}>\n        <div class=\"panel\" style={{ width: `${this.panelWidth}%` }}>\n          <slot name=\"first-panel\"></slot>\n        </div>\n        <div class=\"resizer\" onMouseDown={(event) => event.preventDefault()}>\n          <div class=\"drag-handle\"></div>\n        </div>\n        <div class=\"panel\" style={{ width: `${100 - this.panelWidth}%` }}>\n          <slot name=\"second-panel\">{this.panelContent}</slot>\n        </div>\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/components/udp-stepper-demo.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface UdpStepperDemo extends Components.UdpStepperDemo, HTMLElement {}
+export const UdpStepperDemo: {
+    prototype: UdpStepperDemo;
+    new (): UdpStepperDemo;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

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

@@ -0,0 +1,141 @@
+import { p as proxyCustomElement, H, h } from './p-DPon6DDX.js';
+import { d as defineCustomElement$4 } from './p-DpLtIIwx.js';
+import { d as defineCustomElement$3 } from './p-BSO-aueo.js';
+import { d as defineCustomElement$2 } from './p-DkppmXNM.js';
+
+const UdpStepperDemo$1 = /*@__PURE__*/ proxyCustomElement(class UdpStepperDemo extends H {
+    constructor() {
+        super();
+        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: 'f829a15e4e3f758c3388f53a6ddb4c12d0647659', style: { padding: '2rem' } }, h("unity-typography", { key: '46742e823e79d58fee43e528db3b592010602d19', variant: "h2" }, "Horizontal Stepper with Labels bottom"), h("udp-stepper", { key: 'f3f523f22e663906897a4ea946768dd7cce79010', steps: this.steps, activeStep: this.activeStep, completed: this.completed, stepChange: this.handleStepChange, orientation: "horizontal", labelDisplay: "all", labelPosition: "bottom" }), h("unity-typography", { key: 'c72d98d7562c4f41bd059e293855ea0ae0055bf1', variant: "h2" }, "Horizontal Stepper without Labels"), h("udp-stepper", { key: 'fb7bffd7a6879a26d8c58c719b4d039e0ef09f88', steps: this.steps, activeStep: this.activeStep, completed: this.completed, stepChange: this.handleStepChange, orientation: "horizontal", labelDisplay: "none", labelPosition: "bottom" }), h("unity-typography", { key: 'b9f5edd2eaf06d5c1ef6108ceabcdde9dda2e577', variant: "h2" }, "Horizontal Stepper with Labels to Right"), h("udp-stepper", { key: '811a30038f98dcfae3819117d5314f18e521953c', steps: this.steps, activeStep: this.activeStep, completed: this.completed, stepChange: this.handleStepChange, orientation: "horizontal", labelDisplay: "all", labelPosition: "right" }), h("unity-typography", { key: '77e87af301a3d633d89df12786dfe27179bcc110', variant: "h2" }, "Vertical Stepper"), h("udp-stepper", { key: 'b6df31858927a713e2d1c50273c136f4f9dc91de', 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]
+    }]);
+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

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

@@ -0,0 +1 @@
+{"file":"udp-stepper-demo.js","mappings":";;;;;MAQaA,gBAAc,iBAAAC,kBAAA,CAAA,MAAA,cAAA,SAAAC,CAAA,CAAA;AAL3B,IAAA,WAAA,GAAA;;;;AAMW,QAAA,IAAU,CAAA,UAAA,GAAW,CAAC;AACtB,QAAA,IAAS,CAAA,SAAA,GAA+B,EAAE;AAE3C,QAAA,IAAA,CAAA,KAAK,IAAI,CAAsD,CAAA,KAAA,EAAA,IAAA,EAAA,6CAAA,CAAA,CAAC;AAChE,QAAA,IAAA,CAAA,KAAK,IAAI,CAA8D,CAAA,KAAA,EAAA,IAAA,EAAA,qDAAA,CAAA,CAAC;AACxE,QAAA,IAAA,CAAA,KAAK,IAAI,CAA+C,CAAA,KAAA,EAAA,IAAA,EAAA,sCAAA,CAAA,CAAC;QAEzD,IAAA,CAAA,KAAK,GAAW;AACtB,YAAA;AACE,gBAAA,WAAW,EAAE;AACX,oBAAA,aAAa,EAAE,GAAG;AAClB,oBAAA,YAAY,EAAE,GAAG;AACjB,oBAAA,KAAK,EAAE,YAAY;AACnB,oBAAA,QAAQ,EAAE,YAAY;AACvB,iBAAA;AACD,gBAAA,SAAS,EAAE,QAAQ;AACnB,gBAAA,SAAS,EAAE,IAAI;AACf,gBAAA,OAAO,EAAE;AACP,oBAAA;AACE,wBAAA,KAAK,EAAE,MAAM;AACb,wBAAA,MAAM,EAAE,CAAC;AACT,wBAAA,OAAO,EAAE,SAAS;wBAClB,YAAY,EAAE,MAAK;4BACjB,IAAI,CAAC,SAAS,GAAQ,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EAAA,IAAI,CAAC,SAAS,CAAE,EAAA,EAAA,CAAC,CAAC,GAAG,IAAI,GAAE;AACjD,4BAAA,IAAI,CAAC,UAAU,GAAG,CAAC;yBACpB;AACF,qBAAA;AACF,iBAAA;gBACD,OAAO,EAAE,IAAI,CAAC,KAAK;AACpB,aAAA;AACD,YAAA;AACE,gBAAA,WAAW,EAAE;AACX,oBAAA,aAAa,EAAE,GAAG;AAClB,oBAAA,YAAY,EAAE,GAAG;AACjB,oBAAA,KAAK,EAAE,aAAa;AACpB,oBAAA,QAAQ,EAAE,aAAa;AACxB,iBAAA;AACD,gBAAA,SAAS,EAAE,QAAQ;AACnB,gBAAA,SAAS,EAAE,IAAI;AACf,gBAAA,OAAO,EAAE;AACP,oBAAA;AACE,wBAAA,KAAK,EAAE,MAAM;AACb,wBAAA,MAAM,EAAE,CAAC;AACT,wBAAA,OAAO,EAAE,SAAS;wBAClB,YAAY,EAAE,OAAO,IAAI,CAAC,UAAU,GAAG,CAAC,CAAC;AAC1C,qBAAA;AACD,oBAAA;AACE,wBAAA,KAAK,EAAE,MAAM;AACb,wBAAA,MAAM,EAAE,CAAC;AACT,wBAAA,OAAO,EAAE,SAAS;wBAClB,YAAY,EAAE,MAAK;4BACjB,IAAI,CAAC,SAAS,GAAQ,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EAAA,IAAI,CAAC,SAAS,CAAE,EAAA,EAAA,CAAC,CAAC,GAAG,IAAI,GAAE;AACjD,4BAAA,IAAI,CAAC,UAAU,GAAG,CAAC;yBACpB;AACF,qBAAA;AACF,iBAAA;gBACD,OAAO,EAAE,IAAI,CAAC,KAAK;AACpB,aAAA;AACD,YAAA;AACE,gBAAA,WAAW,EAAE;AACX,oBAAA,aAAa,EAAE,GAAG;AAClB,oBAAA,YAAY,EAAE,GAAG;AACjB,oBAAA,KAAK,EAAE,YAAY;AACnB,oBAAA,QAAQ,EAAE,sBAAsB;AACjC,iBAAA;AACD,gBAAA,SAAS,EAAE,QAAQ;AACnB,gBAAA,SAAS,EAAE,IAAI;AACf,gBAAA,OAAO,EAAE;AACP,oBAAA;AACE,wBAAA,KAAK,EAAE,MAAM;AACb,wBAAA,MAAM,EAAE,CAAC;wBACT,YAAY,EAAE,OAAO,IAAI,CAAC,UAAU,GAAG,CAAC,CAAC;AAC1C,qBAAA;AACD,oBAAA;AACE,wBAAA,KAAK,EAAE,QAAQ;AACf,wBAAA,MAAM,EAAE,CAAC;AACT,wBAAA,OAAO,EAAE,SAAS;wBAClB,YAAY,EAAE,MAAK;4BACjB,IAAI,CAAC,SAAS,GAAQ,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EAAA,IAAI,CAAC,SAAS,CAAE,EAAA,EAAA,CAAC,CAAC,GAAG,IAAI,GAAE;AACjD,4BAAA,OAAO,CAAC,GAAG,CAAC,oBAAoB,CAAC;yBAClC;AACF,qBAAA;AACF,iBAAA;gBACD,OAAO,EAAE,IAAI,CAAC,KAAK;AACpB,aAAA;SACF;AAEO,QAAA,IAAA,CAAA,gBAAgB,GAAG,CAAC,KAAa,KAAI;AAC3C,YAAA,IAAI,CAAC,UAAU,GAAG,KAAK;AAEzB,SAAC;AAoDF;IAlDC,MAAM,GAAA;AACJ,QAAA,QACE,4DAAK,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,EAAA,EAC7B,CAAkB,CAAA,kBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,OAAO,EAAC,IAAI,EAAyD,EAAA,uCAAA,CAAA,EACvF,CAAA,CAAA,aAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,UAAU,EAAE,IAAI,CAAC,gBAAgB,EACjC,WAAW,EAAC,YAAY,EACxB,YAAY,EAAC,KAAK,EAClB,aAAa,EAAC,QAAQ,EACtB,CAAA,EAEF,CAAkB,CAAA,kBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,OAAO,EAAC,IAAI,EAAqD,EAAA,mCAAA,CAAA,EAEnF,CAAA,CAAA,aAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,UAAU,EAAE,IAAI,CAAC,gBAAgB,EACjC,WAAW,EAAC,YAAY,EACxB,YAAY,EAAC,MAAM,EACnB,aAAa,EAAC,QAAQ,EACtB,CAAA,EAEF,CAAkB,CAAA,kBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,OAAO,EAAC,IAAI,EAA2D,EAAA,yCAAA,CAAA,EACzF,CAAA,CAAA,aAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,UAAU,EAAE,IAAI,CAAC,gBAAgB,EACjC,WAAW,EAAC,YAAY,EACxB,YAAY,EAAC,KAAK,EAClB,aAAa,EAAC,OAAO,EACrB,CAAA,EAEF,CAAkB,CAAA,kBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,OAAO,EAAC,IAAI,EAAoC,EAAA,kBAAA,CAAA,EAClE,CAAA,CAAA,aAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,UAAU,EAAE,IAAI,CAAC,gBAAgB,EACjC,WAAW,EAAC,UAAU,EACtB,YAAY,EAAC,KAAK,EAClB,aAAa,EAAC,OAAO,EACrB,CAAA,CACE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["UdpStepperDemo","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/my-component/UI/stepper/udp-stepper-demo.tsx"],"sourcesContent":["import { Component, h, State } from '@stencil/core';\nimport { Step } from './types';\n\n@Component({\n  tag: 'udp-stepper-demo',\n  // styleUrl: 'udp-stepper.css',\n  shadow: true,\n})\nexport class UdpStepperDemo {\n  @State() activeStep: number = 0;\n  @State() completed: { [key: number]: boolean } = {};\n\n  private step1 = (<div>This is step 1 content - Try clicking next!</div>);\n  private step2 = (<div>This is step 2 content - You can go back or forward</div>);\n  private step3 = (<div>This is step 3 content - Final step!</div>);\n\n  private steps: Step[] = [\n    {\n      stepDisplay: {\n        inProcessIcon: '1',\n        completeIcon: '✓',\n        title: 'First Step',\n        subTitle: 'Start here',\n      },\n      stepTitle: 'Step 1',\n      showTitle: true,\n      buttons: [\n        {\n          title: 'Next',\n          action: 2,\n          variant: 'default',\n          customAction: () => {\n            this.completed = { ...this.completed, [0]: true };\n            this.activeStep = 1;\n          },\n        },\n      ],\n      content: this.step1,\n    },\n    {\n      stepDisplay: {\n        inProcessIcon: '2',\n        completeIcon: '✓',\n        title: 'Second Step',\n        subTitle: 'Middle step',\n      },\n      stepTitle: 'Step 2',\n      showTitle: true,\n      buttons: [\n        {\n          title: 'Back',\n          action: 1,\n          variant: 'outline',\n          customAction: () => (this.activeStep = 0),\n        },\n        {\n          title: 'Next',\n          action: 3,\n          variant: 'default',\n          customAction: () => {\n            this.completed = { ...this.completed, [1]: true };\n            this.activeStep = 2;\n          },\n        },\n      ],\n      content: this.step2,\n    },\n    {\n      stepDisplay: {\n        inProcessIcon: '3',\n        completeIcon: '✓',\n        title: 'Final Step',\n        subTitle: 'Complete the process',\n      },\n      stepTitle: 'Step 3',\n      showTitle: true,\n      buttons: [\n        {\n          title: 'Back',\n          action: 2,\n          customAction: () => (this.activeStep = 1),\n        },\n        {\n          title: 'Finish',\n          action: 3,\n          variant: 'default',\n          customAction: () => {\n            this.completed = { ...this.completed, [2]: true };\n            console.log('Process completed!');\n          },\n        },\n      ],\n      content: this.step3,\n    },\n  ];\n\n  private handleStepChange = (event: number) => {\n    this.activeStep = event;\n\n  };\n\n  render() {\n    return (\n      <div style={{ padding: '2rem' }}>\n        <unity-typography variant=\"h2\">Horizontal Stepper with Labels bottom</unity-typography>\n        <udp-stepper\n          steps={this.steps}\n          activeStep={this.activeStep}\n          completed={this.completed}\n          stepChange={this.handleStepChange}\n          orientation=\"horizontal\"\n          labelDisplay=\"all\"\n          labelPosition=\"bottom\"\n        />\n\n        <unity-typography variant=\"h2\">Horizontal Stepper without Labels</unity-typography>\n\n        <udp-stepper\n          steps={this.steps}\n          activeStep={this.activeStep}\n          completed={this.completed}\n          stepChange={this.handleStepChange}\n          orientation=\"horizontal\"\n          labelDisplay=\"none\"\n          labelPosition=\"bottom\"\n        />\n\n        <unity-typography variant=\"h2\">Horizontal Stepper with Labels to Right</unity-typography>\n        <udp-stepper\n          steps={this.steps}\n          activeStep={this.activeStep}\n          completed={this.completed}\n          stepChange={this.handleStepChange}\n          orientation=\"horizontal\"\n          labelDisplay=\"all\"\n          labelPosition=\"right\"\n        />\n\n        <unity-typography variant=\"h2\">Vertical Stepper</unity-typography>\n        <udp-stepper\n          steps={this.steps}\n          activeStep={this.activeStep}\n          completed={this.completed}\n          stepChange={this.handleStepChange}\n          orientation=\"vertical\"\n          labelDisplay=\"all\"\n          labelPosition=\"right\"\n        />\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/components/udp-stepper.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface UdpStepper extends Components.UdpStepper, HTMLElement {}
+export const UdpStepper: {
+    prototype: UdpStepper;
+    new (): UdpStepper;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/udp-stepper.js

@@ -0,0 +1,9 @@
+import { U as UdpStepper$1, d as defineCustomElement$1 } from './p-BSO-aueo.js';
+
+const UdpStepper = UdpStepper$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { UdpStepper, defineCustomElement };
+//# sourceMappingURL=udp-stepper.js.map
+
+//# sourceMappingURL=udp-stepper.js.map

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

@@ -0,0 +1 @@
+{"file":"udp-stepper.js","mappings":";;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

package/dist/components/udp-tab.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface UdpTab extends Components.UdpTab, HTMLElement {}
+export const UdpTab: {
+    prototype: UdpTab;
+    new (): UdpTab;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/udp-tab.js

@@ -0,0 +1,9 @@
+import { U as UdpTab$1, d as defineCustomElement$1 } from './p-DhvewUwP.js';
+
+const UdpTab = UdpTab$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { UdpTab, defineCustomElement };
+//# sourceMappingURL=udp-tab.js.map
+
+//# sourceMappingURL=udp-tab.js.map

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

@@ -0,0 +1 @@
+{"file":"udp-tab.js","mappings":";;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

package/dist/components/udp-tabs.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface UdpTabs extends Components.UdpTabs, HTMLElement {}
+export const UdpTabs: {
+    prototype: UdpTabs;
+    new (): UdpTabs;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/udp-tabs.js

@@ -0,0 +1,9 @@
+import { U as UdpTabs$1, d as defineCustomElement$1 } from './p-C0UDJI6E.js';
+
+const UdpTabs = UdpTabs$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { UdpTabs, defineCustomElement };
+//# sourceMappingURL=udp-tabs.js.map
+
+//# sourceMappingURL=udp-tabs.js.map

package/dist/components/udp-tabs.js.map

@@ -0,0 +1 @@
+{"file":"udp-tabs.js","mappings":";;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

package/dist/components/udp-time-selector.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface UdpTimeSelector extends Components.UdpTimeSelector, HTMLElement {}
+export const UdpTimeSelector: {
+    prototype: UdpTimeSelector;
+    new (): UdpTimeSelector;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

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

@@ -0,0 +1,9 @@
+import { U as UdpTimeSelector$1, d as defineCustomElement$1 } from './p-e0GmP80t.js';
+
+const UdpTimeSelector = UdpTimeSelector$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { UdpTimeSelector, defineCustomElement };
+//# sourceMappingURL=udp-time-selector.js.map
+
+//# sourceMappingURL=udp-time-selector.js.map

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

@@ -0,0 +1 @@
+{"file":"udp-time-selector.js","mappings":";;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

package/dist/components/udp-user-creator.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface UdpUserCreator extends Components.UdpUserCreator, HTMLElement {}
+export const UdpUserCreator: {
+    prototype: UdpUserCreator;
+    new (): UdpUserCreator;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/udp-user-creator.js

@@ -0,0 +1,9 @@
+import { U as UserCreator, d as defineCustomElement$1 } from './p-D9qssFgq.js';
+
+const UdpUserCreator = UserCreator;
+const defineCustomElement = defineCustomElement$1;
+
+export { UdpUserCreator, defineCustomElement };
+//# sourceMappingURL=udp-user-creator.js.map
+
+//# sourceMappingURL=udp-user-creator.js.map

package/dist/components/udp-user-creator.js.map

@@ -0,0 +1 @@
+{"file":"udp-user-creator.js","mappings":";;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

package/dist/components/udp-vertical-spacer.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface UdpVerticalSpacer extends Components.UdpVerticalSpacer, HTMLElement {}
+export const UdpVerticalSpacer: {
+    prototype: UdpVerticalSpacer;
+    new (): UdpVerticalSpacer;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/udp-vertical-spacer.js

@@ -0,0 +1,44 @@
+import { p as proxyCustomElement, H, h } from './p-DPon6DDX.js';
+
+const udpVerticalSpacerCss = ":host{display:block;width:100%}.spacing-01{height:var(--spacing-01)}.spacing-07{height:var(--spacing-07)}.spacing-13{height:var(--spacing-13)}";
+
+const UdpVerticalSpacer$1 = /*@__PURE__*/ proxyCustomElement(class UdpVerticalSpacer extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+    }
+    render() {
+        const sizeMap = {
+            small: 'spacing-01', // Assuming this corresponds to --spacing-01
+            medium: 'spacing-07', // Assuming this corresponds to --spacing-07
+            large: 'spacing-13', // Assuming this corresponds to --spacing-13
+        };
+        const spacingClass = sizeMap[this.unit] || 'spacing-01';
+        return (h("div", { key: '28af7877ac82800122bca8a398170cbffa195523', class: spacingClass }));
+    }
+    static get style() { return udpVerticalSpacerCss; }
+}, [1, "udp-vertical-spacer", {
+        "unit": [1]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["udp-vertical-spacer"];
+    components.forEach(tagName => { switch (tagName) {
+        case "udp-vertical-spacer":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, UdpVerticalSpacer$1);
+            }
+            break;
+    } });
+}
+
+const UdpVerticalSpacer = UdpVerticalSpacer$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { UdpVerticalSpacer, defineCustomElement };
+//# sourceMappingURL=udp-vertical-spacer.js.map
+
+//# sourceMappingURL=udp-vertical-spacer.js.map

package/dist/components/udp-vertical-spacer.js.map

@@ -0,0 +1 @@
+{"file":"udp-vertical-spacer.js","mappings":";;AAAA,MAAM,oBAAoB,GAAG,gJAAgJ;;MCOhKA,mBAAiB,iBAAAC,kBAAA,CAAA,MAAA,iBAAA,SAAAC,CAAA,CAAA;;;;;;IAG5B,MAAM,GAAA;AACJ,QAAA,MAAM,OAAO,GAAG;YACd,KAAK,EAAE,YAAY;YACnB,MAAM,EAAE,YAAY;YACpB,KAAK,EAAE,YAAY;SACpB;QAED,MAAM,YAAY,GAAG,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,YAAY;AAEvD,QAAA,QACE,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,YAAY,EAAA,CAAQ;;;;;;;;;;;;;;;;;;;;;;;;;","names":["UdpVerticalSpacer","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/my-component/UI/layout/udp-vertical-spacer.css?tag=udp-vertical-spacer&encapsulation=shadow","src/components/my-component/UI/layout/udp-vertical-spacer.tsx"],"sourcesContent":["/* udp-vertical-spacer.css */\n:host {\n    display: block;\n    width: 100%;\n  }\n  \n  .spacing-01 { height: var(--spacing-01); }\n  .spacing-07 { height: var(--spacing-07); }\n  .spacing-13 { height: var(--spacing-13); }\n  ","import { Component, Prop, h } from '@stencil/core';\n\n@Component({\n  tag: 'udp-vertical-spacer',\n  styleUrl: 'udp-vertical-spacer.css',\n  shadow: true,\n})\nexport class UdpVerticalSpacer {\n  @Prop() unit: 'small' | 'medium' | 'large';\n\n  render() {\n    const sizeMap = {\n      small: 'spacing-01', // Assuming this corresponds to --spacing-01\n      medium: 'spacing-07', // Assuming this corresponds to --spacing-07\n      large: 'spacing-13', // Assuming this corresponds to --spacing-13\n    };\n\n    const spacingClass = sizeMap[this.unit] || 'spacing-01';\n\n    return (\n      <div class={spacingClass}></div>\n    );\n  }\n}\n"],"version":3}

package/dist/components/unity-typography.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface UnityTypography extends Components.UnityTypography, HTMLElement {}
+export const UnityTypography: {
+    prototype: UnityTypography;
+    new (): UnityTypography;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/unity-typography.js

@@ -0,0 +1,9 @@
+import { t as typography, d as defineCustomElement$1 } from './p-DkppmXNM.js';
+
+const UnityTypography = typography;
+const defineCustomElement = defineCustomElement$1;
+
+export { UnityTypography, defineCustomElement };
+//# sourceMappingURL=unity-typography.js.map
+
+//# sourceMappingURL=unity-typography.js.map

package/dist/components/unity-typography.js.map

@@ -0,0 +1 @@
+{"file":"unity-typography.js","mappings":";;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}