udp-stencil-component-library 1.0.2 → 1.0.3

package/dist/components/{p-CTn3c76I.js → p-1uly65Sv.js}

@@ -1,5 +1,5 @@
 import { p as proxyCustomElement, H, h } from './p-DPon6DDX.js';
-import { d as defineCustomElement$2 } from './p-HrsHnWeG.js';
+import { d as defineCustomElement$2 } from './p-6EzLtNtq.js';
 import { d as defineCustomElement$1 } from './p-DkppmXNM.js';
 
 const fileUploadRendererCss = ".file-upload-input-container{display:flex;flex-direction:column;gap:var(--spacing-04, 16px);}";
@@ -61,6 +61,6 @@ function defineCustomElement() {
 }
 
 export { FileUploadRenderer as F, defineCustomElement as d };
-//# sourceMappingURL=p-CTn3c76I.js.map
+//# sourceMappingURL=p-1uly65Sv.js.map
 
-//# sourceMappingURL=p-CTn3c76I.js.map
+//# sourceMappingURL=p-1uly65Sv.js.map

package/dist/components/{p-CTn3c76I.js.map → p-1uly65Sv.js.map}

@@ -1 +1 @@
-{"file":"p-CTn3c76I.js","mappings":";;;;AAAA,MAAM,qBAAqB,GAAG,+FAA+F;;MCShH,kBAAkB,iBAAAA,kBAAA,CAAA,MAAA,kBAAA,SAAAC,CAAA,CAAA;;;;;;IAS7B,MAAM,GAAA;;AACJ,QAAA,QACE,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,6BAA6B,EAAA,EACtC,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACE,CAAA,CAAA,gBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAC,oBAAoB,EAC1B,QAAQ,EAAE,IAAI,CAAC,UAAU,EACzB,OAAO,EAAE,CAAC,EAAC,CAAA,EAAA,GAAA,IAAI,CAAC,QAAQ,CAAC,eAAe,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAE,eAAe,CAAA,EACzD,eAAe,EAAE,MAAK;gBACpB,IAAI,IAAI,CAAC,UAAU;oBAAE;AACrB,gBAAA,MAAM,OAAO,GAAG,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,QAAQ,CAAC,WAAW,EAAE,kCAAkC,CAAC;AAC9F,gBAAA,MAAM,OAAO,GAAG,OAAO,CAAC,IAAI,CAAC,iBAAiB,EAAE,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,iBAAiB,CAAC;AAC5F,gBAAA,IAAI,CAAC,yBAAyB,CAAC,OAAO,CAAC;AACzC,aAAC,EACD,aAAa,EAAC,OAAO,GACL,CACd,EACN,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACE,CAAA,CAAA,gBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAC,aAAa,EACnB,QAAQ,EAAE,IAAI,CAAC,UAAU,EACzB,OAAO,EAAE,CAAC,EAAC,CAAA,EAAA,GAAA,IAAI,CAAC,QAAQ,CAAC,eAAe,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAE,UAAU,CAAA,EACpD,eAAe,EAAE,MAAK;gBACpB,IAAI,IAAI,CAAC,UAAU;oBAAE;AACrB,gBAAA,MAAM,OAAO,GAAG,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,QAAQ,CAAC,WAAW,EAAE,kCAAkC,CAAC;AAC9F,gBAAA,MAAM,OAAO,GAAG,OAAO,CAAC,IAAI,CAAC,iBAAiB,EAAE,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,YAAY,CAAC;AACvF,gBAAA,IAAI,CAAC,yBAAyB,CAAC,OAAO,CAAC;aACxC,EACD,aAAa,EAAC,OAAO,GACL,CACd,CACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/my-component/UI/forms/udp-forms/udp-forms-builder/udp-forms-builder-item/question_type_renderers/file-upload-renderer.css?tag=file-upload-renderer&encapsulation=shadow","src/components/my-component/UI/forms/udp-forms/udp-forms-builder/udp-forms-builder-item/question_type_renderers/file-upload-renderer.tsx"],"sourcesContent":["/* Styles for file-upload-renderer */\n.file-upload-input-container {\n  display: flex;\n  flex-direction: column; /* Stack toggles vertically */\n  gap: var(--spacing-04, 16px); /* Consistent spacing with other components */\n}\n\n/* Add any other specific styles for file upload inputs here */ ","import { Component, h, Prop } from '@stencil/core';\nimport { UdpFormQuestion } from 'src/components/my-component/UI/forms/udp-forms/types';\n// stencil-toggle should be globally available or imported if necessary\n\n@Component({\n  tag: 'file-upload-renderer',\n  styleUrl: 'file-upload-renderer.css',\n  shadow: true,\n})\nexport class FileUploadRenderer {\n  @Prop() question: UdpFormQuestion;\n  @Prop() isViewOnly: boolean;\n  @Prop() formSectionsDraft: any[][];\n  @Prop() sIndex: number;\n  @Prop() qIndex: number;\n  @Prop() onFormSectionsDraftChange: (updatedSections: any[][]) => void;\n  @Prop() getHandler: (fieldTypeId: number, handlerName: string) => any;\n\n  render() {\n    return (\n      <div class=\"file-upload-input-container\">\n        <div>\n          <stencil-toggle\n            label=\"Hide Drag And Drop\"\n            disabled={this.isViewOnly}\n            checked={!!this.question.fieldProperties?.hideDragAndDrop}\n            onToggledChange={() => {\n              if (this.isViewOnly) return;\n              const handler = this.getHandler(this.question.fieldTypeId, 'handleFieldPropertyBooleanToggle');\n              const updated = handler(this.formSectionsDraft, this.sIndex, this.qIndex, 'hideDragAndDrop');\n              this.onFormSectionsDraftChange(updated);\n            }}\n            labelPosition=\"right\"\n          ></stencil-toggle>\n        </div>\n        <div>\n          <stencil-toggle\n            label=\"Hide Button\"\n            disabled={this.isViewOnly}\n            checked={!!this.question.fieldProperties?.hideButton}\n            onToggledChange={() => {\n              if (this.isViewOnly) return;\n              const handler = this.getHandler(this.question.fieldTypeId, 'handleFieldPropertyBooleanToggle');\n              const updated = handler(this.formSectionsDraft, this.sIndex, this.qIndex, 'hideButton');\n              this.onFormSectionsDraftChange(updated);\n            }}\n            labelPosition=\"right\"\n          ></stencil-toggle>\n        </div>\n      </div>\n    );\n  }\n}\n"],"version":3}
+{"file":"p-1uly65Sv.js","mappings":";;;;AAAA,MAAM,qBAAqB,GAAG,+FAA+F;;MCShH,kBAAkB,iBAAAA,kBAAA,CAAA,MAAA,kBAAA,SAAAC,CAAA,CAAA;;;;;;IAS7B,MAAM,GAAA;;AACJ,QAAA,QACE,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,6BAA6B,EAAA,EACtC,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACE,CAAA,CAAA,gBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAC,oBAAoB,EAC1B,QAAQ,EAAE,IAAI,CAAC,UAAU,EACzB,OAAO,EAAE,CAAC,EAAC,CAAA,EAAA,GAAA,IAAI,CAAC,QAAQ,CAAC,eAAe,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAE,eAAe,CAAA,EACzD,eAAe,EAAE,MAAK;gBACpB,IAAI,IAAI,CAAC,UAAU;oBAAE;AACrB,gBAAA,MAAM,OAAO,GAAG,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,QAAQ,CAAC,WAAW,EAAE,kCAAkC,CAAC;AAC9F,gBAAA,MAAM,OAAO,GAAG,OAAO,CAAC,IAAI,CAAC,iBAAiB,EAAE,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,iBAAiB,CAAC;AAC5F,gBAAA,IAAI,CAAC,yBAAyB,CAAC,OAAO,CAAC;AACzC,aAAC,EACD,aAAa,EAAC,OAAO,GACL,CACd,EACN,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACE,CAAA,CAAA,gBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAC,aAAa,EACnB,QAAQ,EAAE,IAAI,CAAC,UAAU,EACzB,OAAO,EAAE,CAAC,EAAC,CAAA,EAAA,GAAA,IAAI,CAAC,QAAQ,CAAC,eAAe,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAE,UAAU,CAAA,EACpD,eAAe,EAAE,MAAK;gBACpB,IAAI,IAAI,CAAC,UAAU;oBAAE;AACrB,gBAAA,MAAM,OAAO,GAAG,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,QAAQ,CAAC,WAAW,EAAE,kCAAkC,CAAC;AAC9F,gBAAA,MAAM,OAAO,GAAG,OAAO,CAAC,IAAI,CAAC,iBAAiB,EAAE,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,YAAY,CAAC;AACvF,gBAAA,IAAI,CAAC,yBAAyB,CAAC,OAAO,CAAC;aACxC,EACD,aAAa,EAAC,OAAO,GACL,CACd,CACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/my-component/UI/forms/udp-forms/udp-forms-builder/udp-forms-builder-item/question_type_renderers/file-upload-renderer.css?tag=file-upload-renderer&encapsulation=shadow","src/components/my-component/UI/forms/udp-forms/udp-forms-builder/udp-forms-builder-item/question_type_renderers/file-upload-renderer.tsx"],"sourcesContent":["/* Styles for file-upload-renderer */\n.file-upload-input-container {\n  display: flex;\n  flex-direction: column; /* Stack toggles vertically */\n  gap: var(--spacing-04, 16px); /* Consistent spacing with other components */\n}\n\n/* Add any other specific styles for file upload inputs here */ ","import { Component, h, Prop } from '@stencil/core';\nimport { UdpFormQuestion } from 'src/components/my-component/UI/forms/udp-forms/types';\n// stencil-toggle should be globally available or imported if necessary\n\n@Component({\n  tag: 'file-upload-renderer',\n  styleUrl: 'file-upload-renderer.css',\n  shadow: true,\n})\nexport class FileUploadRenderer {\n  @Prop() question: UdpFormQuestion;\n  @Prop() isViewOnly: boolean;\n  @Prop() formSectionsDraft: any[][];\n  @Prop() sIndex: number;\n  @Prop() qIndex: number;\n  @Prop() onFormSectionsDraftChange: (updatedSections: any[][]) => void;\n  @Prop() getHandler: (fieldTypeId: number, handlerName: string) => any;\n\n  render() {\n    return (\n      <div class=\"file-upload-input-container\">\n        <div>\n          <stencil-toggle\n            label=\"Hide Drag And Drop\"\n            disabled={this.isViewOnly}\n            checked={!!this.question.fieldProperties?.hideDragAndDrop}\n            onToggledChange={() => {\n              if (this.isViewOnly) return;\n              const handler = this.getHandler(this.question.fieldTypeId, 'handleFieldPropertyBooleanToggle');\n              const updated = handler(this.formSectionsDraft, this.sIndex, this.qIndex, 'hideDragAndDrop');\n              this.onFormSectionsDraftChange(updated);\n            }}\n            labelPosition=\"right\"\n          ></stencil-toggle>\n        </div>\n        <div>\n          <stencil-toggle\n            label=\"Hide Button\"\n            disabled={this.isViewOnly}\n            checked={!!this.question.fieldProperties?.hideButton}\n            onToggledChange={() => {\n              if (this.isViewOnly) return;\n              const handler = this.getHandler(this.question.fieldTypeId, 'handleFieldPropertyBooleanToggle');\n              const updated = handler(this.formSectionsDraft, this.sIndex, this.qIndex, 'hideButton');\n              this.onFormSectionsDraftChange(updated);\n            }}\n            labelPosition=\"right\"\n          ></stencil-toggle>\n        </div>\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/components/{p-C8cWVxBF.js → p-26jyxB7s.js}

@@ -8,8 +8,10 @@ const StencilForm = /*@__PURE__*/ proxyCustomElement(class StencilForm extends H
         this.__registerHost();
         this.__attachShadow();
         this.stencilFormInvalidEvent = createEvent(this, "stencilFormInvalidEvent");
+        this.dirtyChange = createEvent(this, "dirtyChange");
         this.validateOnBlur = true;
         this.registeredFields = {};
+        this.customErrors = {};
         /**
          * The event handler for slot changes. It kicks off the recursive processing.
          */
@@ -25,14 +27,15 @@ const StencilForm = /*@__PURE__*/ proxyCustomElement(class StencilForm extends H
         this.submit = this.submit.bind(this);
         this.onFormChange = this.onFormChange.bind(this);
     }
-    /**
-     * Connects a field to the form API.
-     */
     connectField(field) {
+        if (field.__connectedToForm)
+            return;
         field.setFormApi({
             api: this.api,
             registeredFields: this.registeredFields,
+            customErrors: this.customErrors,
         });
+        field.__connectedToForm = true;
     }
     /**
      * Asynchronously and recursively traverses a node and all of its light DOM
@@ -80,9 +83,8 @@ const StencilForm = /*@__PURE__*/ proxyCustomElement(class StencilForm extends H
             // Avoid duplicate event listeners
             if (!htmlElement.dataset.stencilFormConnected) {
                 htmlElement.dataset.stencilFormConnected = 'true';
-                element.addEventListener('click', (e) => {
+                element.addEventListener('click', e => {
                     e.preventDefault();
-                    console.log('Submit button clicked, triggering form submit');
                     this.submit(e);
                 });
             }
@@ -94,9 +96,8 @@ const StencilForm = /*@__PURE__*/ proxyCustomElement(class StencilForm extends H
             // Avoid duplicate event listeners
             if (!htmlButton.dataset.stencilFormConnected) {
                 htmlButton.dataset.stencilFormConnected = 'true';
-                button.addEventListener('click', (e) => {
+                button.addEventListener('click', e => {
                     e.preventDefault();
-                    console.log('Submit button clicked, triggering form submit');
                     this.submit(e);
                 });
             }
@@ -109,16 +110,41 @@ const StencilForm = /*@__PURE__*/ proxyCustomElement(class StencilForm extends H
             validate: this.defaultValidation,
             validateOnBlur: this.validateOnBlur,
         });
-        if (this.handleFormChange) {
+        if (this.handleChange) {
             this.api.subscribe(this.onFormChange, { values: true });
         }
+        // Subscription for the dirty state change event
+        this.api.subscribe(formState => {
+            this.dirtyChange.emit(formState.dirty);
+        }, { dirty: true });
     }
     componentDidLoad() {
         const slot = this.el.shadowRoot.querySelector('slot');
+        // Create the observer first
+        this.observer = new MutationObserver(mutations => {
+            for (const mutation of mutations) {
+                mutation.addedNodes.forEach(node => {
+                    this.processNodeRecursively(node);
+                });
+            }
+        });
+        // Function to handle slot changes or initial processing
+        const observeAssignedNodes = () => {
+            const assignedNodes = (slot === null || slot === void 0 ? void 0 : slot.assignedNodes({ flatten: true })) || [];
+            assignedNodes.forEach(node => {
+                if (node.nodeType === Node.ELEMENT_NODE) {
+                    this.observer.observe(node, { childList: true, subtree: true });
+                    this.processNodeRecursively(node); // Process immediately in case nodes are already present
+                }
+            });
+        };
         if (slot) {
-            this.handleSlotChange(); // Run once for initial content
-            slot.addEventListener('slotchange', this.handleSlotChange);
+            observeAssignedNodes(); // Initial
+            slot.addEventListener('slotchange', observeAssignedNodes); // Handle dynamic slot content
         }
+        // If you're also rendering some fields directly in this.el (not through slot), you can keep this:
+        this.observer.observe(this.el, { childList: true, subtree: true });
+        this.el.dispatchEvent(new CustomEvent('stencilFormReady', { bubbles: true, composed: true }));
     }
     disconnectedCallback() {
         var _a;
@@ -130,12 +156,11 @@ const StencilForm = /*@__PURE__*/ proxyCustomElement(class StencilForm extends H
         }
     }
     onFormChange(formState) {
-        if (this.handleFormChange && formState.values) {
-            this.handleFormChange(formState.values);
+        if (this.handleChange && formState.values) {
+            this.handleChange(formState.values);
         }
     }
     async submitWithValidation(values) {
-        console.log('Submitting form with values:', values);
         const errors = this.defaultValidation(values);
         if (Object.keys(errors).length === 0) {
             this.handleSubmit(values);
@@ -145,25 +170,37 @@ const StencilForm = /*@__PURE__*/ proxyCustomElement(class StencilForm extends H
         }
     }
     defaultValidation(values) {
-        var _a;
-        const { registeredFields } = this;
+        const { registeredFields, customErrors } = this;
         const errors = {};
-        console.log(registeredFields);
+        // Check for required field validation
         Object.keys(registeredFields).forEach(field => {
             var _a;
-            if (registeredFields[field].required && (!values[field] || ((_a = values[field]) === null || _a === void 0 ? void 0 : _a.length) === 0)) {
-                errors[field] = 'Required';
+            if (registeredFields[field].required && (!values[field] || ((_a = values[field]) === null || _a === void 0 ? void 0 : _a.length) === 0 || values[field] === 'false')) {
+                errors[field] = 'This field is required';
             }
         });
-        if (this === null || this === void 0 ? void 0 : this.validate)
-            return (_a = this.validate) === null || _a === void 0 ? void 0 : _a.call(this, values, errors);
+        // Include custom errors from stencil-field components (like min/max validation)
+        if (customErrors) {
+            Object.keys(customErrors).forEach(field => {
+                if (customErrors[field]) {
+                    errors[field] = customErrors[field];
+                }
+            });
+        }
+        // If custom validation is provided, merge with default validation
+        if (this === null || this === void 0 ? void 0 : this.handleValidate) {
+            const customErrors = this.handleValidate(values, errors);
+            return Object.assign(Object.assign({}, errors), customErrors);
+        }
         return errors;
     }
     getValues() {
         const values = {};
         this.api.getRegisteredFields().forEach((fieldName) => {
-            values[fieldName] = this.api.getFieldState(fieldName).value;
+            var _a;
+            values[fieldName] = (_a = this.api.getFieldState(fieldName).value) !== null && _a !== void 0 ? _a : '';
         });
+        console.log(values);
         return values;
     }
     async getApi() {
@@ -171,11 +208,12 @@ const StencilForm = /*@__PURE__*/ proxyCustomElement(class StencilForm extends H
             console.error('❌ Form API not initialized yet.');
             return null;
         }
+        // @ts-ignore
+        this.api.getValues = () => this.getValues();
         return this.api;
     }
     submit(e) {
         var _a;
-        console.log('Submitting form');
         (_a = e === null || e === void 0 ? void 0 : e.preventDefault) === null || _a === void 0 ? void 0 : _a.call(e);
         const submitFunction = () => {
             var _a;
@@ -189,17 +227,18 @@ const StencilForm = /*@__PURE__*/ proxyCustomElement(class StencilForm extends H
         debounce(submitFunction, 1000, { leading: true, trailing: false })();
     }
     render() {
-        return (h("form", { key: 'f87005b56d8889878fefed08e1ff84c77867e935', onSubmit: this.submit }, h("slot", { key: '742c816b3720a11e78d8825e87364b1dd8ed3b37' })));
+        return (h("form", { key: '57fac6a8c5a18c89ab72307a66c9bde0c601018c', onSubmit: this.submit }, h("slot", { key: '4759a58068ac592dfeaab1d88a7f42547be8b3ec' })));
     }
     get el() { return this; }
 }, [1, "stencil-form", {
         "handleSubmit": [16, "handle-submit"],
         "initialValues": [16, "initial-values"],
-        "validate": [16],
+        "handleValidate": [16, "handle-validate"],
         "validateOnBlur": [4, "validate-on-blur"],
-        "handleFormChange": [16, "handle-form-change"],
+        "handleChange": [16, "handle-change"],
         "api": [32],
         "registeredFields": [32],
+        "customErrors": [32],
         "getApi": [64]
     }]);
 function defineCustomElement() {
@@ -217,6 +256,6 @@ function defineCustomElement() {
 }
 
 export { StencilForm as S, defineCustomElement as d };
-//# sourceMappingURL=p-C8cWVxBF.js.map
+//# sourceMappingURL=p-26jyxB7s.js.map
 
-//# sourceMappingURL=p-C8cWVxBF.js.map
+//# sourceMappingURL=p-26jyxB7s.js.map

package/dist/components/p-26jyxB7s.js.map

@@ -0,0 +1 @@
+{"file":"p-26jyxB7s.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/my-component/UI/forms/form/stencil-form.tsx"],"sourcesContent":["import { Component, h, Prop, Event as StencilEvent, EventEmitter, State, Element, Method } from '@stencil/core';\nimport { createForm, FormApi } from 'final-form';\nimport debounce from 'lodash.debounce';\n\n@Component({\n  tag: 'stencil-form',\n  shadow: true,\n})\nexport class StencilForm {\n  @Element() el: HTMLElement;\n  @Prop() handleSubmit: (values: Object) => void;\n  @Prop() initialValues: Object;\n  @Prop() handleValidate: (values: Object, errors: Object) => Object;\n  @Prop() validateOnBlur: boolean = true;\n  @Prop() handleChange: (values: Object) => void;\n  @StencilEvent() stencilFormInvalidEvent: EventEmitter<Object>;\n  @StencilEvent() dirtyChange: EventEmitter<boolean>;\n\n  private observer: MutationObserver;\n\n  @State() api: FormApi;\n  @State() registeredFields: { [key: string]: { required: boolean } } = {};\n  @State() customErrors: { [key: string]: string } = {};\n\n  constructor() {\n    this.submitWithValidation = this.submitWithValidation.bind(this);\n    this.defaultValidation = this.defaultValidation.bind(this);\n    this.submit = this.submit.bind(this);\n    this.onFormChange = this.onFormChange.bind(this);\n  }\n\n  private connectField(field: HTMLStencilFieldElement) {\n    if ((field as any).__connectedToForm) return;\n\n    field.setFormApi({\n      api: this.api,\n      registeredFields: this.registeredFields,\n      customErrors: this.customErrors,\n    });\n\n    (field as any).__connectedToForm = true;\n  }\n\n  /**\n   * Asynchronously and recursively traverses a node and all of its light DOM\n   * and shadow DOM descendants, connecting any stencil-fields it finds.\n   */\n  private async processNodeRecursively(node: Node) {\n    // 1. Skip anything that isn't an element\n    if (node.nodeType !== Node.ELEMENT_NODE) {\n      return;\n    }\n    const element = node as Element;\n\n    // 2. If the element is a custom component, wait for it to be defined.\n    // This ensures its shadowRoot is available if it has one.\n    if (element.localName.includes('-')) {\n      await customElements.whenDefined(element.localName);\n    }\n\n    // 3. Process the element itself\n    if (element.matches('stencil-field')) {\n      this.connectField(element as HTMLStencilFieldElement);\n    }\n\n    // 4. Connect submit buttons\n    this.connectSubmitButtons(element);\n\n    // 5. If the element has a shadowRoot, recursively process its children\n    if (element.shadowRoot) {\n      for (const child of Array.from(element.shadowRoot.childNodes)) {\n        await this.processNodeRecursively(child);\n      }\n    }\n\n    // 6. Recursively process all light DOM children\n    for (const child of Array.from(element.childNodes)) {\n      await this.processNodeRecursively(child);\n    }\n  }\n\n  /**\n   * The event handler for slot changes. It kicks off the recursive processing.\n   */\n  private handleSlotChange = () => {\n    const slot = this.el.shadowRoot.querySelector('slot');\n    if (!slot) return;\n\n    // Process every node assigned to the slot\n    slot.assignedNodes().forEach(node => this.processNodeRecursively(node));\n  };\n\n  /**\n   * Connect submit buttons in slotted content to this form\n   */\n  private connectSubmitButtons(node: Node) {\n    if (node.nodeType !== Node.ELEMENT_NODE) {\n      return;\n    }\n    const element = node as Element;\n\n    // Check if the element itself is a submit button\n    if (element.matches('input[type=\"submit\"], button[type=\"submit\"]')) {\n      const htmlElement = element as HTMLElement;\n      // Avoid duplicate event listeners\n      if (!htmlElement.dataset.stencilFormConnected) {\n        htmlElement.dataset.stencilFormConnected = 'true';\n        element.addEventListener('click', e => {\n          e.preventDefault();\n          this.submit(e);\n        });\n      }\n    }\n\n    // Find submit buttons in descendants and connect them\n    const submitButtons = element.querySelectorAll('input[type=\"submit\"], button[type=\"submit\"]');\n    submitButtons.forEach((button: Element) => {\n      const htmlButton = button as HTMLElement;\n      // Avoid duplicate event listeners\n      if (!htmlButton.dataset.stencilFormConnected) {\n        htmlButton.dataset.stencilFormConnected = 'true';\n        button.addEventListener('click', e => {\n          e.preventDefault();\n          this.submit(e);\n        });\n      }\n    });\n  }\n\n  componentWillLoad() {\n    this.api = createForm({\n      onSubmit: this.submitWithValidation,\n      initialValues: this.initialValues,\n      validate: this.defaultValidation,\n      validateOnBlur: this.validateOnBlur,\n    });\n\n    if (this.handleChange) {\n      this.api.subscribe(this.onFormChange, { values: true });\n    }\n\n    // Subscription for the dirty state change event\n    this.api.subscribe(\n      formState => {\n        this.dirtyChange.emit(formState.dirty);\n      },\n      { dirty: true },\n    );\n  }\n\n  componentDidLoad() {\n    const slot = this.el.shadowRoot.querySelector('slot');\n\n    // Create the observer first\n    this.observer = new MutationObserver(mutations => {\n      for (const mutation of mutations) {\n        mutation.addedNodes.forEach(node => {\n          this.processNodeRecursively(node);\n        });\n      }\n    });\n\n    // Function to handle slot changes or initial processing\n    const observeAssignedNodes = () => {\n      const assignedNodes = slot?.assignedNodes({ flatten: true }) || [];\n\n      assignedNodes.forEach(node => {\n        if (node.nodeType === Node.ELEMENT_NODE) {\n          this.observer.observe(node, { childList: true, subtree: true });\n          this.processNodeRecursively(node); // Process immediately in case nodes are already present\n        }\n      });\n    };\n\n    if (slot) {\n      observeAssignedNodes(); // Initial\n      slot.addEventListener('slotchange', observeAssignedNodes); // Handle dynamic slot content\n    }\n\n    // If you're also rendering some fields directly in this.el (not through slot), you can keep this:\n    this.observer.observe(this.el, { childList: true, subtree: true });\n\n    this.el.dispatchEvent(new CustomEvent('stencilFormReady', { bubbles: true, composed: true }));\n  }\n\n  disconnectedCallback() {\n    this.api = null;\n    this.registeredFields = {};\n\n    const slot = this.el.shadowRoot?.querySelector('slot');\n    if (slot) {\n      slot.removeEventListener('slotchange', this.handleSlotChange);\n    }\n  }\n\n  onFormChange(formState: any): void {\n    if (this.handleChange && formState.values) {\n      this.handleChange(formState.values);\n    }\n  }\n\n  async submitWithValidation(values: { [key: string]: any }): Promise<void> {\n    const errors = this.defaultValidation(values);\n    if (Object.keys(errors).length === 0) {\n      this.handleSubmit(values);\n    } else {\n      this.stencilFormInvalidEvent.emit(errors);\n    }\n  }\n\n  defaultValidation(values: Object): Object {\n    const { registeredFields, customErrors } = this;\n    const errors = {};\n\n    // Check for required field validation\n    Object.keys(registeredFields).forEach(field => {\n      if (registeredFields[field].required && (!values[field] || values[field]?.length === 0 || values[field] === 'false')) {\n        errors[field] = 'This field is required';\n      }\n    });\n\n    // Include custom errors from stencil-field components (like min/max validation)\n    if (customErrors) {\n      Object.keys(customErrors).forEach(field => {\n        if (customErrors[field]) {\n          errors[field] = customErrors[field];\n        }\n      });\n    }\n\n    // If custom validation is provided, merge with default validation\n    if (this?.handleValidate) {\n      const customErrors = this.handleValidate(values, errors);\n      return { ...errors, ...customErrors };\n    }\n\n    return errors;\n  }\n\n  getValues() {\n    const values = {};\n    this.api.getRegisteredFields().forEach((fieldName: string) => {\n      values[fieldName] = this.api.getFieldState(fieldName).value ?? '';\n    });\n    console.log(values);\n    return values;\n  }\n  @Method()\n  async getApi(): Promise<FormApi> {\n    if (!this.api) {\n      console.error('❌ Form API not initialized yet.');\n      return null;\n    }\n    // @ts-ignore\n    this.api.getValues = () => this.getValues();\n    return this.api;\n  }\n\n  submit(e) {\n    e?.preventDefault?.();\n    const submitFunction = () => {\n      const errors = this.defaultValidation(this.getValues());\n\n      if (Object.keys(errors).length) {\n        this.stencilFormInvalidEvent.emit(errors);\n        return;\n      }\n      this.api?.submit();\n    };\n    debounce(submitFunction, 1000, { leading: true, trailing: false })();\n  }\n\n  render() {\n    return (\n      <form onSubmit={this.submit}>\n        <slot />\n      </form>\n    );\n  }\n}\n"],"version":3}

package/dist/components/{p-GQEOUb0c.js → p-4hWvEEZf.js}

@@ -1,10 +1,10 @@
 import { p as proxyCustomElement, H, c as createEvent, h } from './p-DPon6DDX.js';
 import Close24 from '@carbon/icons/es/close/24';
-import { d as defineCustomElement$6 } from './p-hRee3qYx.js';
-import { d as defineCustomElement$5 } from './p-BYsLvu6g.js';
+import { d as defineCustomElement$6 } from './p-D6Wo7quX.js';
+import { d as defineCustomElement$5 } from './p-CpMdhv3j.js';
 import { d as defineCustomElement$4 } from './p-ZeWoGdjP.js';
 import { d as defineCustomElement$3 } from './p-C-wDzVCk.js';
-import { d as defineCustomElement$2 } from './p-BTIWOttf.js';
+import { d as defineCustomElement$2 } from './p-W_kxEzVl.js';
 import { d as defineCustomElement$1 } from './p-DkppmXNM.js';
 
 const searchListItemCss = ".list-item{display:flex;gap:8px;align-items:center;background-color:white;border-bottom:1px solid rgba(0,0,0,.12)}.list-body{display:flex;padding-left:16px;gap:8px;align-items:center;flex:1}.input{margin-top:5.5px}.list-inputs{display:flex;flex:1;gap:24px;align-items:center}.close-button{display:flex;align-items:center}.name{min-width:215px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:215px}.select-container{width:\"200px\"}";
@@ -169,6 +169,6 @@ function defineCustomElement() {
 }
 
 export { SearchListItem as S, defineCustomElement as d };
-//# sourceMappingURL=p-GQEOUb0c.js.map
+//# sourceMappingURL=p-4hWvEEZf.js.map
 
-//# sourceMappingURL=p-GQEOUb0c.js.map
+//# sourceMappingURL=p-4hWvEEZf.js.map

package/dist/components/{p-GQEOUb0c.js.map → p-4hWvEEZf.js.map}

@@ -1 +1 @@
-{"file":"p-GQEOUb0c.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/my-component/UI/data-display/tree/tree-list-item/search-item/search-list-item.css?tag=search-list-item&encapsulation=shadow","src/components/my-component/UI/data-display/tree/tree-list-item/search-item/search-list-item.tsx"],"sourcesContent":[".list-item {\n    display: flex;\n    gap: 8px;\n    align-items: center;\n    background-color: white;\n    border-bottom: 1px solid rgba(0,0,0,.12);\n}\n.list-body {\n    display: flex;\n    padding-left: 16px;\n    gap: 8px;\n    align-items: center;\n    flex: 1;\n}\n\n.input {\n    margin-top: 5.5px;\n}\n\n\n.list-inputs {\n    display: flex;\n    flex: 1;\n    gap: 24px;\n    align-items: center;\n}\n\n.close-button {\n    display: flex;\n    align-items: center;\n}\n\n.name {\n    min-width: 215px;\n    white-space: nowrap;      \n    overflow: hidden;        \n    text-overflow: ellipsis;  \n    max-width: 215px;  \n}\n\n.select-container {\n    width: \"200px\";\n}","import { Component, Prop, State, Watch, Event, EventEmitter, h, Element } from '@stencil/core';\nimport Close24 from '@carbon/icons/es/close/24';\n\n@Component({\n  tag: 'search-list-item',\n  styleUrl: 'search-list-item.css',\n  shadow: true,\n})\nexport class SearchListItem {\n  @Element() el: HTMLElement;\n\n  @Prop() id: string;\n  @Prop() isDefault: boolean = false;\n  @Prop() filterGroupId: string;\n  @Prop() label: string;\n  @Prop() name: string;\n  @Prop() handleDelete: (event: MouseEvent) => void;\n  @Prop() operator: string; // Prop to receive the current operator\n  @Prop() isInitialSearchItem: boolean | undefined | null;\n\n  @State() searchOperator: string = '='; // Default value\n\n  @Event({ bubbles: true, composed: true }) searchItemChanged: EventEmitter;\n\n  @Watch('operator')\n  operatorChanged(newValue: string) {\n    if (newValue !== this.searchOperator && newValue !== null) {\n      this.searchOperator = newValue;\n      console.log('Operator changed:', newValue);\n    }\n  }\n\n  componentWillUpdate() {\n    if (this.operator && this.operator.length > 0) {\n      this.searchOperator = this.operator; // Manually sync inside lifecycle if @Watch doesn't catch\n    }\n  }\n\n  conponentDidLoad() {\n    console.log('Component did load:', this.operator);\n  }\n\n  handleOperatorSelected(event: CustomEvent) {\n    console.log('event.detail', event.detail.value);\n    // const newOperator = newOperator;\n    this.searchOperator = event.detail.value;\n    this.emitChange(); // Emit the change to ensure it is captured\n  }\n\n  emitChange(newValue = this.name) {\n    // Ensure the operator is passed as a string, not an object\n    this.searchItemChanged.emit({\n      id: this.id,\n      searchField: this.label,\n      filterGroupId: this.filterGroupId,\n      searchOperator: this.searchOperator || '=', // Ensure default to '=' if undefined\n      searchValue: newValue,\n    });\n  }\n\n  handleInputBlur = (event: Event) => {\n    const inputElement = event.target as HTMLInputElement;\n    const inputVal = inputElement.value;\n\n    if (inputVal !== this.name) {\n      this.searchItemChanged.emit({\n        id: this.id,\n        searchField: this.label,\n        filterGroupId: this.filterGroupId,\n        searchOperator: this.searchOperator,\n        searchValue: inputVal,\n      });\n    }\n  }\n\n  private selectorOptions = [\n    {\n      value: '=',\n      label: 'Equals',\n    },\n    {\n      value: 'IN',\n      label: 'Contains',\n    },\n    {\n      value: '<>',\n      label: 'Does not Equal',\n    },\n    {\n      value: '>',\n      label: 'Greater Than',\n    },\n    {\n      value: '<',\n      label: 'Less Than',\n    },\n    {\n      value: '>=',\n      label: 'Greater Than or Equal To',\n    },\n    {\n      value: '<=',\n      label: 'Less Than or Equal To',\n    },\n    {\n      value: 'LIKE',\n      label: 'Like',\n    },\n    {\n      value: 'STARTSWITH',\n      label: 'Starts With',\n    },\n    {\n      value: 'BETWEEN',\n      label: 'Between',\n    },\n  ];\n\n  render() {\n    return (\n      <div class=\"list-item\">\n        <div class=\"list-body\">\n          <div class=\"name\">\n            <unity-typography variant=\"button\">{this.label}</unity-typography>\n          </div>\n          <div style={{ width: '200px' }}>\n            <udp-selector\n              key={this.searchOperator}\n              initialValue={this.searchOperator}\n              options={this.selectorOptions}\n              disabled={this.isInitialSearchItem || this.isDefault}\n              onChange={(event: CustomEvent) => this.handleOperatorSelected(event)}\n            ></udp-selector>\n          </div>\n          <div class=\"input\">\n            <text-field\n              value={this.name}\n              disabled={this.isInitialSearchItem}\n              onBlur={this.handleInputBlur}\n            ></text-field>\n          </div>\n        </div>\n\n        {(!this.isInitialSearchItem || !this.isDefault) && <stencil-icon-button icon={Close24} onClick={this.handleDelete}></stencil-icon-button>}\n      </div>\n    );\n  }\n}\n"],"version":3}
+{"file":"p-4hWvEEZf.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/my-component/UI/data-display/tree/tree-list-item/search-item/search-list-item.css?tag=search-list-item&encapsulation=shadow","src/components/my-component/UI/data-display/tree/tree-list-item/search-item/search-list-item.tsx"],"sourcesContent":[".list-item {\n    display: flex;\n    gap: 8px;\n    align-items: center;\n    background-color: white;\n    border-bottom: 1px solid rgba(0,0,0,.12);\n}\n.list-body {\n    display: flex;\n    padding-left: 16px;\n    gap: 8px;\n    align-items: center;\n    flex: 1;\n}\n\n.input {\n    margin-top: 5.5px;\n}\n\n\n.list-inputs {\n    display: flex;\n    flex: 1;\n    gap: 24px;\n    align-items: center;\n}\n\n.close-button {\n    display: flex;\n    align-items: center;\n}\n\n.name {\n    min-width: 215px;\n    white-space: nowrap;      \n    overflow: hidden;        \n    text-overflow: ellipsis;  \n    max-width: 215px;  \n}\n\n.select-container {\n    width: \"200px\";\n}","import { Component, Prop, State, Watch, Event, EventEmitter, h, Element } from '@stencil/core';\nimport Close24 from '@carbon/icons/es/close/24';\n\n@Component({\n  tag: 'search-list-item',\n  styleUrl: 'search-list-item.css',\n  shadow: true,\n})\nexport class SearchListItem {\n  @Element() el: HTMLElement;\n\n  @Prop() id: string;\n  @Prop() isDefault: boolean = false;\n  @Prop() filterGroupId: string;\n  @Prop() label: string;\n  @Prop() name: string;\n  @Prop() handleDelete: (event: MouseEvent) => void;\n  @Prop() operator: string; // Prop to receive the current operator\n  @Prop() isInitialSearchItem: boolean | undefined | null;\n\n  @State() searchOperator: string = '='; // Default value\n\n  @Event({ bubbles: true, composed: true }) searchItemChanged: EventEmitter;\n\n  @Watch('operator')\n  operatorChanged(newValue: string) {\n    if (newValue !== this.searchOperator && newValue !== null) {\n      this.searchOperator = newValue;\n      console.log('Operator changed:', newValue);\n    }\n  }\n\n  componentWillUpdate() {\n    if (this.operator && this.operator.length > 0) {\n      this.searchOperator = this.operator; // Manually sync inside lifecycle if @Watch doesn't catch\n    }\n  }\n\n  conponentDidLoad() {\n    console.log('Component did load:', this.operator);\n  }\n\n  handleOperatorSelected(event: CustomEvent) {\n    console.log('event.detail', event.detail.value);\n    // const newOperator = newOperator;\n    this.searchOperator = event.detail.value;\n    this.emitChange(); // Emit the change to ensure it is captured\n  }\n\n  emitChange(newValue = this.name) {\n    // Ensure the operator is passed as a string, not an object\n    this.searchItemChanged.emit({\n      id: this.id,\n      searchField: this.label,\n      filterGroupId: this.filterGroupId,\n      searchOperator: this.searchOperator || '=', // Ensure default to '=' if undefined\n      searchValue: newValue,\n    });\n  }\n\n  handleInputBlur = (event: Event) => {\n    const inputElement = event.target as HTMLInputElement;\n    const inputVal = inputElement.value;\n\n    if (inputVal !== this.name) {\n      this.searchItemChanged.emit({\n        id: this.id,\n        searchField: this.label,\n        filterGroupId: this.filterGroupId,\n        searchOperator: this.searchOperator,\n        searchValue: inputVal,\n      });\n    }\n  }\n\n  private selectorOptions = [\n    {\n      value: '=',\n      label: 'Equals',\n    },\n    {\n      value: 'IN',\n      label: 'Contains',\n    },\n    {\n      value: '<>',\n      label: 'Does not Equal',\n    },\n    {\n      value: '>',\n      label: 'Greater Than',\n    },\n    {\n      value: '<',\n      label: 'Less Than',\n    },\n    {\n      value: '>=',\n      label: 'Greater Than or Equal To',\n    },\n    {\n      value: '<=',\n      label: 'Less Than or Equal To',\n    },\n    {\n      value: 'LIKE',\n      label: 'Like',\n    },\n    {\n      value: 'STARTSWITH',\n      label: 'Starts With',\n    },\n    {\n      value: 'BETWEEN',\n      label: 'Between',\n    },\n  ];\n\n  render() {\n    return (\n      <div class=\"list-item\">\n        <div class=\"list-body\">\n          <div class=\"name\">\n            <unity-typography variant=\"button\">{this.label}</unity-typography>\n          </div>\n          <div style={{ width: '200px' }}>\n            <udp-selector\n              key={this.searchOperator}\n              initialValue={this.searchOperator}\n              options={this.selectorOptions}\n              disabled={this.isInitialSearchItem || this.isDefault}\n              onChange={(event: CustomEvent) => this.handleOperatorSelected(event)}\n            ></udp-selector>\n          </div>\n          <div class=\"input\">\n            <text-field\n              value={this.name}\n              disabled={this.isInitialSearchItem}\n              onBlur={this.handleInputBlur}\n            ></text-field>\n          </div>\n        </div>\n\n        {(!this.isInitialSearchItem || !this.isDefault) && <stencil-icon-button icon={Close24} onClick={this.handleDelete}></stencil-icon-button>}\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/components/{p-HrsHnWeG.js → p-6EzLtNtq.js}

@@ -125,16 +125,16 @@ const StencilToggle = /*@__PURE__*/ proxyCustomElement(class StencilToggle exten
         const buttonId = `${baseId}-button`;
         const labelId = `${baseId}-label`;
         const isError = !!this.errorMessage;
-        const labelElement = this.label && (h("label", { key: '341526d9314f607359ebd7b5e90f73b1988c23b1', id: labelId, class: `toggle-label label-${this.labelPosition}`, htmlFor: !this.disabled ? buttonId : undefined }, h("unity-typography", { key: '8734cfda781a94caa91f886091f793a971013955', variant: "caption-text" }, this.label)));
-        const toggleElement = (h("div", { key: 'd2c189b591fcb4a52992aa7a78a744addb607b62', class: `toggle-container ${this.toggled ? 'toggled' : ''}` }, h("button", { key: '960e42e77c12a68a580c7e896eab05362e17f419', id: buttonId, onClick: () => this.toggleButton(), disabled: this.disabled, "aria-checked": this.toggled.toString(), "aria-labelledby": labelId, role: "switch" }, h("span", { key: 'd7719fdfe0b563c8a75cc1d5ad8338aae4c41cba', class: "toggle-knob" }))));
-        return (h(Host, { key: '3c82fe1006cb50b2b558b4ff7b5dfa857bddcd28', class: {
+        const labelElement = this.label && (h("label", { key: '5bab829756552a4ca27ad67089dbcb764bda2de1', id: labelId, class: `toggle-label label-${this.labelPosition}`, htmlFor: !this.disabled ? buttonId : undefined }, h("unity-typography", { key: '1f1f400380c31913441255264eb6d0af35e1c421', variant: "caption-text" }, this.label)));
+        const toggleElement = (h("div", { key: '6c54df6caf5b3f294cae26d2ca3615c7e1bb05cd', class: `toggle-container ${this.toggled ? 'toggled' : ''}` }, h("button", { key: 'e060117671835f2e6a47597a926a2f9512d4f8d7', id: buttonId, onClick: () => this.toggleButton(), disabled: this.disabled, "aria-checked": this.toggled.toString(), "aria-labelledby": labelId, role: "switch" }, h("span", { key: 'fcab0a5fd5bcf15e02a13fc160ceca872034eb69', class: "toggle-knob" }))));
+        return (h(Host, { key: '3f90cb01c6032b87310837aead982a41b0078bad', class: {
                 'udp-input': true,
                 'udp-input--error': isError,
                 'udp-input--disabled': this.disabled,
                 'udp-input--checked': this.toggled,
                 [`udp-input--margin-${this.margin}`]: true,
                 [`udp-input--size-${this.size}`]: true,
-            }, "aria-invalid": isError ? 'true' : 'false' }, h("div", { key: '9ef1da957d0aa0530ab9c22425ef76174570dcec', class: `toggle-wrapper position-${this.labelPosition}` }, this.labelPosition === 'left' && labelElement, toggleElement, this.labelPosition === 'right' && labelElement, this.labelPosition === 'bottom' && labelElement, this.errorMessage && h("div", { key: '0b8d86a08cd1b4aae45a61ad10c209c69ffdc953', class: "error-message" }, this.errorMessage))));
+            }, "aria-invalid": isError ? 'true' : 'false' }, h("div", { key: '14fbbb34b5dee8da92375cabd8ddb050772318a3', class: `toggle-wrapper position-${this.labelPosition}` }, this.labelPosition === 'left' && labelElement, toggleElement, this.labelPosition === 'right' && labelElement, this.labelPosition === 'bottom' && labelElement, this.errorMessage && h("div", { key: 'bdee0f654adb087590d9bcf45daf35d0ffe12bb6', class: "error-message" }, this.errorMessage))));
     }
     get el() { return this; }
     static get watchers() { return {
@@ -185,6 +185,6 @@ function defineCustomElement() {
 }
 
 export { StencilToggle as S, defineCustomElement as d };
-//# sourceMappingURL=p-HrsHnWeG.js.map
+//# sourceMappingURL=p-6EzLtNtq.js.map
 
-//# sourceMappingURL=p-HrsHnWeG.js.map
+//# sourceMappingURL=p-6EzLtNtq.js.map

package/dist/components/{p-HrsHnWeG.js.map → p-6EzLtNtq.js.map}

@@ -1 +1 @@
-{"file":"p-HrsHnWeG.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/my-component/UI/inputs/toggle/stencil-toggle.css?tag=stencil-toggle&encapsulation=shadow","src/components/my-component/UI/inputs/toggle/stencil-toggle.tsx"],"sourcesContent":["@import '../inputs.css';\n\n/* Size variants for toggle sizing */\n:host(.udp-input--size-small) .toggle-container {\n  width: 32px;\n  height: 18px;\n}\n\n:host(.udp-input--size-small) button {\n  border-radius: 18px;\n}\n\n:host(.udp-input--size-small) .toggle-knob {\n  width: 14px;\n  height: 14px;\n  top: 2px;\n  left: 2px;\n}\n\n:host(.udp-input--size-small) .toggled .toggle-knob {\n  left: 16px;\n}\n\n:host(.udp-input--size-normal) .toggle-container {\n  width: 38px;\n  height: 22px;\n}\n\n:host(.udp-input--size-normal) button {\n  border-radius: 22px;\n}\n\n:host(.udp-input--size-normal) .toggle-knob {\n  position: absolute;\n  top: 2px;\n  left: 2px;\n  width: 18px;\n  height: 18px;\n}\n\n:host(.udp-input--size-normal) .toggled .toggle-knob {\n  left: 18px;\n}\n\n:host(.udp-input--size-large) .toggle-container {\n  width: 44px;\n  height: 26px;\n}\n\n:host(.udp-input--size-large) button {\n  border-radius: 26px;\n}\n\n:host(.udp-input--size-large) .toggle-knob {\n  width: 22px;\n  height: 22px;\n  top: 2px;\n  left: 2px;\n}\n\n:host(.udp-input--size-large) .toggled .toggle-knob {\n  left: 20px;\n}\n\n.toggle-container {\n  position: relative;\n  display: inline-block;\n}\n\nbutton {\n  appearance: none;\n  background-color: var(--gray-04, #ccc);\n  width: 100%;\n  height: 100%;\n  position: relative;\n  outline: none;\n  border: none;\n  cursor: pointer;\n  transition: background-color 0.2s ease;\n}\n\n.toggled button {\n  background-color: var(--primary-color, #344861);\n}\n\n.toggle-knob {\n  position: absolute;\n  background-color: var(--white, #ffffff);\n  border-radius: 50%;\n  transition: left 0.2s ease;\n}\n\n/* Size variants for label spacing */\n:host(.udp-input--size-small) .label-left {\n  margin-right: var(--spacing-02);\n}\n\n:host(.udp-input--size-small) .label-right {\n  margin-left: var(--spacing-02);\n}\n\n:host(.udp-input--size-small) .label-bottom {\n  margin-top: var(--spacing-02);\n}\n\n:host(.udp-input--size-normal) .label-left {\n  margin-right: var(--spacing-03);\n}\n\n:host(.udp-input--size-normal) .label-right {\n  margin-left: var(--spacing-03);\n}\n\n:host(.udp-input--size-normal) .label-bottom {\n  margin-top: var(--spacing-03);\n}\n\n:host(.udp-input--size-large) .label-left {\n  margin-right: var(--spacing-04);\n}\n\n:host(.udp-input--size-large) .label-right {\n  margin-left: var(--spacing-04);\n}\n\n:host(.udp-input--size-large) .label-bottom {\n  margin-top: var(--spacing-04);\n}\n\n.toggle-wrapper {\n  display: flex;\n  align-items: center;\n}\n\n.toggle-wrapper.position-left {\n  flex-direction: row;\n}\n\n.toggle-wrapper.position-right {\n  flex-direction: row;\n}\n\n.toggle-wrapper.position-bottom {\n  flex-direction: column;\n  align-items: flex-start;\n}\n\n.toggle-label {\n  font-size: var(--caption-font-size, 0.875rem);\n}\n\n.label-left {\n  margin-right: var(--spacing-03);\n}\n\n.label-right {\n  margin-left: var(--spacing-03);\n}\n\n.label-bottom {\n  margin-top: var(--spacing-03);\n}\n","import { Component, Prop, State, h, Host, Event, EventEmitter, Watch, Element } from '@stencil/core';\nimport { InputMargin, InputSize } from '../input-types';\n\n/**\n * A standardized toggle/switch component with customizable positioning and comprehensive state management.\n * Supports both controlled and uncontrolled modes with proper accessibility features and standard DOM events.\n *\n * **Toggle States:**\n * - Uses boolean internal state with string value emission for form compatibility\n * - Accepts various string formats for initial values ('true', '1', 'on')\n * - Emits string values ('true'/'false') for consistent form integration\n *\n * **Accessibility:**\n * - Proper ARIA attributes (role=\"switch\", aria-checked, aria-labelledby)\n * - Keyboard navigation support\n * - Semantic label association with htmlFor attribute\n *\n * @example\n * ```tsx\n * // Uncontrolled component with initial value\n * <stencil-toggle\n *   label=\"Enable notifications\"\n *   initialValue=\"false\"\n *   onChange={(e) => console.log('Toggled:', e.detail)}\n * />\n *\n * // Controlled component\n * <stencil-toggle\n *   label=\"Dark mode\"\n *   checked={isDarkMode}\n *   onChange={(e) => setIsDarkMode(e.detail === 'true')}\n * />\n *\n * // With custom positioning and validation\n * <stencil-toggle\n *   label=\"Accept terms\"\n *   labelPosition=\"right\"\n *   required={true}\n *   error={termsError}\n *   checked={acceptTerms}\n *   onChange={handleTermsChange}\n * />\n * ```\n */\n@Component({\n  tag: 'stencil-toggle',\n  styleUrl: 'stencil-toggle.css',\n  shadow: true,\n})\nexport class StencilToggle {\n  @Element() el: HTMLElement;\n\n  @State() toggled: boolean = false;\n\n  /**\n   * Initial value for the toggle. Used for uncontrolled components to set the default state.\n   * Accepts string values: 'true', '1', 'on' for true state, anything else for false.\n   * Only used when `checked` prop is not provided.\n   */\n  @Prop() initialValue: string;\n\n  /**\n   * Current checked state of the toggle. When provided, makes this a controlled component.\n   * The component will use this value and update it through events.\n   */\n  @Prop({ mutable: true }) checked: boolean;\n\n  /**\n   * Label text displayed next to the toggle. Used for accessibility and user guidance.\n   */\n  @Prop() label: string;\n\n  /**\n   * Position of the label relative to the toggle switch.\n   * - 'left': Label appears to the left of the toggle (default)\n   * - 'right': Label appears to the right of the toggle\n   * - 'bottom': Label appears below the toggle\n   */\n  @Prop() labelPosition: 'left' | 'right' | 'bottom' = 'left';\n\n  /**\n   * Whether the toggle is disabled. Users cannot interact with the toggle when disabled.\n   */\n  @Prop() disabled: boolean = false;\n\n  /**\n   * Legacy ID property for the toggle element. Use `id` prop instead for new implementations.\n   * @deprecated Use the standard `id` prop instead\n   */\n  @Prop() idItem: string;\n\n  /**\n   * Unique identifier for the toggle element. Used for form association and accessibility.\n   */\n  @Prop() id: string;\n\n  /**\n   * Name attribute for the toggle element. Used for form submission.\n   */\n  @Prop() name: string;\n\n  /**\n   * Error message to display below the toggle. Shows validation errors or other issues.\n   */\n  @Prop() error: string;\n\n  /**\n   * Whether the toggle is required for form submission. Adds visual indicator and validation.\n   */\n  @Prop() required: boolean;\n\n  /**\n   * Margin spacing around the component. Affects vertical spacing in form layouts.\n   * - 'none': No margin\n   * - 'dense': Reduced margin for compact layouts\n   * - 'normal': Standard margin spacing (default)\n   */\n  @Prop() margin: InputMargin = 'normal';\n\n  /**\n   * Size variant for the toggle component.\n   * - 'small': Smaller toggle size.\n   * - 'normal': Standard toggle size (default).\n   * - 'large': Larger toggle size.\n   */\n  @Prop() size: InputSize = 'normal';\n\n  @State() errorMessage: string;\n\n  /**\n   * Emitted when the toggle state changes through user interaction.\n   * Contains the new state as a string value ('true' or 'false') for form compatibility.\n   * @deprecated Use standard 'change' event instead for better integration\n   */\n  @Event() toggledChange: EventEmitter;\n\n  // Static counter to ensure unique IDs for generated fallbacks\n  private static S_TOGGLE_ID_COUNTER = 0;\n  // Internally generated ID if no idItem is provided\n  private _internalId: string;\n\n  /**\n   * Watcher for the error prop. Updates the internal error message when the error prop changes.\n   */\n  @Watch('error')\n  updateError() {\n    this.errorMessage = this.error;\n  }\n\n  /**\n   * Watcher for the initialValue prop. Updates the toggle state when initialValue changes\n   * (useful for form resets, dynamic initial values, etc.).\n   * @param newValue - The new initial value\n   */\n  @Watch('initialValue')\n  initialValueChanged(newValue: string) {\n    // Update toggled when initialValue changes (for form resets, etc.)\n    if (newValue !== undefined) {\n      this.toggled = newValue === 'true' || newValue === '1' || newValue === 'on';\n    }\n  }\n\n  /**\n   * Watcher for the checked prop. Updates the toggle state when the checked prop changes\n   * (controlled component behavior).\n   */\n  @Watch('checked')\n  checkedChanged() {\n    // Backward compatibility: if checked prop is set directly, use it\n    if (this.checked !== undefined && this.checked !== this.toggled) {\n      this.toggled = this.checked;\n    }\n  }\n\n  /**\n   * Component lifecycle method called when the component is about to load.\n   * Initializes the toggle state from either the checked prop or initialValue prop.\n   */\n  componentWillLoad() {\n    // Initialize toggled from initialValue or checked prop (backward compatibility)\n    if (this.initialValue !== undefined) {\n      this.toggled = this.initialValue === 'true' || this.initialValue === '1' || this.initialValue === 'on';\n    } else {\n      this.toggled = this.checked || false;\n    }\n\n    if (this.error) {\n      this.errorMessage = this.error;\n    }\n\n    // Generate a unique ID for the toggle instance if idItem is not provided.\n    // This ensures the label's htmlFor can always link to the button's id.\n    this._internalId = `stencil-toggle-generated-${StencilToggle.S_TOGGLE_ID_COUNTER++}`;\n  }\n\n  /**\n   * Legacy lifecycle method - no longer needed with current state management.\n   * @deprecated This method is no longer used\n   */\n  componentWillUpdate() {\n    // Remove this since we're handling state differently now\n  }\n\n  /**\n   * Handles toggle button clicks and keyboard interactions.\n   * Updates internal state and emits both legacy and standard DOM events.\n   */\n  toggleButton() {\n    if (this.disabled) return;\n\n    this.toggled = !this.toggled;\n\n    // Update controlled value if this is a controlled component\n    if (this.checked !== undefined) {\n      this.checked = this.toggled;\n    }\n\n    // Emit for backward compatibility\n    this.toggledChange.emit(this.toggled);\n\n    // Emit standard DOM events that stencil-field and form libraries can handle\n    const changeEvent = new CustomEvent('change', {\n      detail: this.toggled ? 'true' : 'false',\n      bubbles: true\n    });\n    this.el.dispatchEvent(changeEvent);\n\n    const inputEvent = new CustomEvent('input', {\n      detail: this.toggled ? 'true' : 'false',\n      bubbles: true\n    });\n    this.el.dispatchEvent(inputEvent);\n  }\n\n  /**\n   * Renders the toggle component with proper accessibility attributes and layout.\n   * Handles label positioning and generates unique IDs for form association.\n   */\n  render() {\n    // Use the provided idItem, id, or fall back to the internally generated ID\n    const baseId = this.idItem || this.id || this._internalId;\n    const buttonId = `${baseId}-button`;\n    const labelId = `${baseId}-label`;\n    const isError = !!this.errorMessage;\n\n    const labelElement = this.label && (\n      <label id={labelId} class={`toggle-label label-${this.labelPosition}`} htmlFor={!this.disabled ? buttonId : undefined}>\n        <unity-typography variant=\"caption-text\">{this.label}</unity-typography>\n      </label>\n    );\n\n    const toggleElement = (\n      <div class={`toggle-container ${this.toggled ? 'toggled' : ''}`}>\n        <button\n          id={buttonId}\n          onClick={() => this.toggleButton()}\n          disabled={this.disabled}\n          aria-checked={this.toggled.toString()}\n          aria-labelledby={labelId}\n          role=\"switch\"\n        >\n          <span class=\"toggle-knob\"></span>\n        </button>\n      </div>\n    );\n\n    return (\n      <Host\n        class={{\n          'udp-input': true,\n          'udp-input--error': isError,\n          'udp-input--disabled': this.disabled,\n          'udp-input--checked': this.toggled,\n          [`udp-input--margin-${this.margin}`]: true,\n          [`udp-input--size-${this.size}`]: true,\n        }}\n        aria-invalid={isError ? 'true' : 'false'}\n      >\n        <div class={`toggle-wrapper position-${this.labelPosition}`}>\n          {this.labelPosition === 'left' && labelElement}\n          {toggleElement}\n          {this.labelPosition === 'right' && labelElement}\n          {this.labelPosition === 'bottom' && labelElement}\n          {this.errorMessage && <div class=\"error-message\">{this.errorMessage}</div>}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"p-6EzLtNtq.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/my-component/UI/inputs/toggle/stencil-toggle.css?tag=stencil-toggle&encapsulation=shadow","src/components/my-component/UI/inputs/toggle/stencil-toggle.tsx"],"sourcesContent":["@import '../inputs.css';\n\n/* Size variants for toggle sizing */\n:host(.udp-input--size-small) .toggle-container {\n  width: 32px;\n  height: 18px;\n}\n\n:host(.udp-input--size-small) button {\n  border-radius: 18px;\n}\n\n:host(.udp-input--size-small) .toggle-knob {\n  width: 14px;\n  height: 14px;\n  top: 2px;\n  left: 2px;\n}\n\n:host(.udp-input--size-small) .toggled .toggle-knob {\n  left: 16px;\n}\n\n:host(.udp-input--size-normal) .toggle-container {\n  width: 38px;\n  height: 22px;\n}\n\n:host(.udp-input--size-normal) button {\n  border-radius: 22px;\n}\n\n:host(.udp-input--size-normal) .toggle-knob {\n  position: absolute;\n  top: 2px;\n  left: 2px;\n  width: 18px;\n  height: 18px;\n}\n\n:host(.udp-input--size-normal) .toggled .toggle-knob {\n  left: 18px;\n}\n\n:host(.udp-input--size-large) .toggle-container {\n  width: 44px;\n  height: 26px;\n}\n\n:host(.udp-input--size-large) button {\n  border-radius: 26px;\n}\n\n:host(.udp-input--size-large) .toggle-knob {\n  width: 22px;\n  height: 22px;\n  top: 2px;\n  left: 2px;\n}\n\n:host(.udp-input--size-large) .toggled .toggle-knob {\n  left: 20px;\n}\n\n.toggle-container {\n  position: relative;\n  display: inline-block;\n}\n\nbutton {\n  appearance: none;\n  background-color: var(--gray-04, #ccc);\n  width: 100%;\n  height: 100%;\n  position: relative;\n  outline: none;\n  border: none;\n  cursor: pointer;\n  transition: background-color 0.2s ease;\n}\n\n.toggled button {\n  background-color: var(--primary-color, #344861);\n}\n\n.toggle-knob {\n  position: absolute;\n  background-color: var(--white, #ffffff);\n  border-radius: 50%;\n  transition: left 0.2s ease;\n}\n\n/* Size variants for label spacing */\n:host(.udp-input--size-small) .label-left {\n  margin-right: var(--spacing-02);\n}\n\n:host(.udp-input--size-small) .label-right {\n  margin-left: var(--spacing-02);\n}\n\n:host(.udp-input--size-small) .label-bottom {\n  margin-top: var(--spacing-02);\n}\n\n:host(.udp-input--size-normal) .label-left {\n  margin-right: var(--spacing-03);\n}\n\n:host(.udp-input--size-normal) .label-right {\n  margin-left: var(--spacing-03);\n}\n\n:host(.udp-input--size-normal) .label-bottom {\n  margin-top: var(--spacing-03);\n}\n\n:host(.udp-input--size-large) .label-left {\n  margin-right: var(--spacing-04);\n}\n\n:host(.udp-input--size-large) .label-right {\n  margin-left: var(--spacing-04);\n}\n\n:host(.udp-input--size-large) .label-bottom {\n  margin-top: var(--spacing-04);\n}\n\n.toggle-wrapper {\n  display: flex;\n  align-items: center;\n}\n\n.toggle-wrapper.position-left {\n  flex-direction: row;\n}\n\n.toggle-wrapper.position-right {\n  flex-direction: row;\n}\n\n.toggle-wrapper.position-bottom {\n  flex-direction: column;\n  align-items: flex-start;\n}\n\n.toggle-label {\n  font-size: var(--caption-font-size, 0.875rem);\n}\n\n.label-left {\n  margin-right: var(--spacing-03);\n}\n\n.label-right {\n  margin-left: var(--spacing-03);\n}\n\n.label-bottom {\n  margin-top: var(--spacing-03);\n}\n","import { Component, Prop, State, h, Host, Event, EventEmitter, Watch, Element } from '@stencil/core';\nimport { InputMargin, InputSize } from '../input-types';\n\n/**\n * A standardized toggle/switch component with customizable positioning and comprehensive state management.\n * Supports both controlled and uncontrolled modes with proper accessibility features and standard DOM events.\n *\n * **Toggle States:**\n * - Uses boolean internal state with string value emission for form compatibility\n * - Accepts various string formats for initial values ('true', '1', 'on')\n * - Emits string values ('true'/'false') for consistent form integration\n *\n * **Accessibility:**\n * - Proper ARIA attributes (role=\"switch\", aria-checked, aria-labelledby)\n * - Keyboard navigation support\n * - Semantic label association with htmlFor attribute\n *\n * @example\n * ```tsx\n * // Uncontrolled component with initial value\n * <stencil-toggle\n *   label=\"Enable notifications\"\n *   initialValue=\"false\"\n *   onChange={(e) => console.log('Toggled:', e.detail)}\n * />\n *\n * // Controlled component\n * <stencil-toggle\n *   label=\"Dark mode\"\n *   checked={isDarkMode}\n *   onChange={(e) => setIsDarkMode(e.detail === 'true')}\n * />\n *\n * // With custom positioning and validation\n * <stencil-toggle\n *   label=\"Accept terms\"\n *   labelPosition=\"right\"\n *   required={true}\n *   error={termsError}\n *   checked={acceptTerms}\n *   onChange={handleTermsChange}\n * />\n * ```\n */\n@Component({\n  tag: 'stencil-toggle',\n  styleUrl: 'stencil-toggle.css',\n  shadow: true,\n})\nexport class StencilToggle {\n  @Element() el: HTMLElement;\n\n  @State() toggled: boolean = false;\n\n  /**\n   * Initial value for the toggle. Used for uncontrolled components to set the default state.\n   * Accepts string values: 'true', '1', 'on' for true state, anything else for false.\n   * Only used when `checked` prop is not provided.\n   */\n  @Prop() initialValue: string;\n\n  /**\n   * Current checked state of the toggle. When provided, makes this a controlled component.\n   * The component will use this value and update it through events.\n   */\n  @Prop({ mutable: true }) checked: boolean;\n\n  /**\n   * Label text displayed next to the toggle. Used for accessibility and user guidance.\n   */\n  @Prop() label: string;\n\n  /**\n   * Position of the label relative to the toggle switch.\n   * - 'left': Label appears to the left of the toggle (default)\n   * - 'right': Label appears to the right of the toggle\n   * - 'bottom': Label appears below the toggle\n   */\n  @Prop() labelPosition: 'left' | 'right' | 'bottom' = 'left';\n\n  /**\n   * Whether the toggle is disabled. Users cannot interact with the toggle when disabled.\n   */\n  @Prop() disabled: boolean = false;\n\n  /**\n   * Legacy ID property for the toggle element. Use `id` prop instead for new implementations.\n   * @deprecated Use the standard `id` prop instead\n   */\n  @Prop() idItem: string;\n\n  /**\n   * Unique identifier for the toggle element. Used for form association and accessibility.\n   */\n  @Prop() id: string;\n\n  /**\n   * Name attribute for the toggle element. Used for form submission.\n   */\n  @Prop() name: string;\n\n  /**\n   * Error message to display below the toggle. Shows validation errors or other issues.\n   */\n  @Prop() error: string;\n\n  /**\n   * Whether the toggle is required for form submission. Adds visual indicator and validation.\n   */\n  @Prop() required: boolean;\n\n  /**\n   * Margin spacing around the component. Affects vertical spacing in form layouts.\n   * - 'none': No margin\n   * - 'dense': Reduced margin for compact layouts\n   * - 'normal': Standard margin spacing (default)\n   */\n  @Prop() margin: InputMargin = 'normal';\n\n  /**\n   * Size variant for the toggle component.\n   * - 'small': Smaller toggle size.\n   * - 'normal': Standard toggle size (default).\n   * - 'large': Larger toggle size.\n   */\n  @Prop() size: InputSize = 'normal';\n\n  @State() errorMessage: string;\n\n  /**\n   * Emitted when the toggle state changes through user interaction.\n   * Contains the new state as a string value ('true' or 'false') for form compatibility.\n   * @deprecated Use standard 'change' event instead for better integration\n   */\n  @Event() toggledChange: EventEmitter;\n\n  // Static counter to ensure unique IDs for generated fallbacks\n  private static S_TOGGLE_ID_COUNTER = 0;\n  // Internally generated ID if no idItem is provided\n  private _internalId: string;\n\n  /**\n   * Watcher for the error prop. Updates the internal error message when the error prop changes.\n   */\n  @Watch('error')\n  updateError() {\n    this.errorMessage = this.error;\n  }\n\n  /**\n   * Watcher for the initialValue prop. Updates the toggle state when initialValue changes\n   * (useful for form resets, dynamic initial values, etc.).\n   * @param newValue - The new initial value\n   */\n  @Watch('initialValue')\n  initialValueChanged(newValue: string) {\n    // Update toggled when initialValue changes (for form resets, etc.)\n    if (newValue !== undefined) {\n      this.toggled = newValue === 'true' || newValue === '1' || newValue === 'on';\n    }\n  }\n\n  /**\n   * Watcher for the checked prop. Updates the toggle state when the checked prop changes\n   * (controlled component behavior).\n   */\n  @Watch('checked')\n  checkedChanged() {\n    // Backward compatibility: if checked prop is set directly, use it\n    if (this.checked !== undefined && this.checked !== this.toggled) {\n      this.toggled = this.checked;\n    }\n  }\n\n  /**\n   * Component lifecycle method called when the component is about to load.\n   * Initializes the toggle state from either the checked prop or initialValue prop.\n   */\n  componentWillLoad() {\n    // Initialize toggled from initialValue or checked prop (backward compatibility)\n    if (this.initialValue !== undefined) {\n      this.toggled = this.initialValue === 'true' || this.initialValue === '1' || this.initialValue === 'on';\n    } else {\n      this.toggled = this.checked || false;\n    }\n\n    if (this.error) {\n      this.errorMessage = this.error;\n    }\n\n    // Generate a unique ID for the toggle instance if idItem is not provided.\n    // This ensures the label's htmlFor can always link to the button's id.\n    this._internalId = `stencil-toggle-generated-${StencilToggle.S_TOGGLE_ID_COUNTER++}`;\n  }\n\n  /**\n   * Legacy lifecycle method - no longer needed with current state management.\n   * @deprecated This method is no longer used\n   */\n  componentWillUpdate() {\n    // Remove this since we're handling state differently now\n  }\n\n  /**\n   * Handles toggle button clicks and keyboard interactions.\n   * Updates internal state and emits both legacy and standard DOM events.\n   */\n  toggleButton() {\n    if (this.disabled) return;\n\n    this.toggled = !this.toggled;\n\n    // Update controlled value if this is a controlled component\n    if (this.checked !== undefined) {\n      this.checked = this.toggled;\n    }\n\n    // Emit for backward compatibility\n    this.toggledChange.emit(this.toggled);\n\n    // Emit standard DOM events that stencil-field and form libraries can handle\n    const changeEvent = new CustomEvent('change', {\n      detail: this.toggled ? 'true' : 'false',\n      bubbles: true\n    });\n    this.el.dispatchEvent(changeEvent);\n\n    const inputEvent = new CustomEvent('input', {\n      detail: this.toggled ? 'true' : 'false',\n      bubbles: true\n    });\n    this.el.dispatchEvent(inputEvent);\n  }\n\n  /**\n   * Renders the toggle component with proper accessibility attributes and layout.\n   * Handles label positioning and generates unique IDs for form association.\n   */\n  render() {\n    // Use the provided idItem, id, or fall back to the internally generated ID\n    const baseId = this.idItem || this.id || this._internalId;\n    const buttonId = `${baseId}-button`;\n    const labelId = `${baseId}-label`;\n    const isError = !!this.errorMessage;\n\n    const labelElement = this.label && (\n      <label id={labelId} class={`toggle-label label-${this.labelPosition}`} htmlFor={!this.disabled ? buttonId : undefined}>\n        <unity-typography variant=\"caption-text\">{this.label}</unity-typography>\n      </label>\n    );\n\n    const toggleElement = (\n      <div class={`toggle-container ${this.toggled ? 'toggled' : ''}`}>\n        <button\n          id={buttonId}\n          onClick={() => this.toggleButton()}\n          disabled={this.disabled}\n          aria-checked={this.toggled.toString()}\n          aria-labelledby={labelId}\n          role=\"switch\"\n        >\n          <span class=\"toggle-knob\"></span>\n        </button>\n      </div>\n    );\n\n    return (\n      <Host\n        class={{\n          'udp-input': true,\n          'udp-input--error': isError,\n          'udp-input--disabled': this.disabled,\n          'udp-input--checked': this.toggled,\n          [`udp-input--margin-${this.margin}`]: true,\n          [`udp-input--size-${this.size}`]: true,\n        }}\n        aria-invalid={isError ? 'true' : 'false'}\n      >\n        <div class={`toggle-wrapper position-${this.labelPosition}`}>\n          {this.labelPosition === 'left' && labelElement}\n          {toggleElement}\n          {this.labelPosition === 'right' && labelElement}\n          {this.labelPosition === 'bottom' && labelElement}\n          {this.errorMessage && <div class=\"error-message\">{this.errorMessage}</div>}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/{p-syf9yo9-.js → p-8avkq8Fj.js}

@@ -1,5 +1,5 @@
 import { p as proxyCustomElement, H, h } from './p-DPon6DDX.js';
-import { d as defineCustomElement$2 } from './p-BTIWOttf.js';
+import { d as defineCustomElement$2 } from './p-W_kxEzVl.js';
 import { d as defineCustomElement$1 } from './p-DkppmXNM.js';
 
 const mapPopupCss = ".popoverContent{display:flex;flex-direction:column;column-gap:var(--spacing-04);padding:var(--spacing-04);z-index:1}.featureDetailsPopOverContent{min-width:300px;z-index:1}.data-row{display:flex;column-gap:var(--spacing-04)}.data-section{display:flex;flex-direction:column;column-gap:var(--spacing-02)}.key{font-weight:bold;color:var(--accent-color-two)}.header{display:flex;background-color:var(--accent-color-three);color:var(--accent-color-two);padding-left:var(--spacing-02);margin-bottom:var(--spacing-04)}.closeButton{display:flex;align-items:center;justify-content:flex-end}.options{display:flex;justify-content:flex-end;column-gap:var(--spacing-04)}.mapType{margin-bottom:var(--spacing-02)}";
@@ -14,7 +14,7 @@ const SplitLinePopup = /*@__PURE__*/ proxyCustomElement(class SplitLinePopup ext
     }
     render() {
         var _a;
-        return (h("div", { key: '2f02b75d0bdfeae2840362952345b5948f6ad5e2', class: "popoverContent" }, h("udp-selector", { key: '9b41da41768b4f38287f2700e1f4a42891a650c5', id: "layer", options: (_a = this.vectorLayerOptions.map((layer) => {
+        return (h("div", { key: 'b81c0a9d5583868fc78ca3377ffd0c3958e7d549', class: "popoverContent" }, h("udp-selector", { key: '43f2b19438893e5fd1b881d19e98cc88ac27340f', id: "layer", options: (_a = this.vectorLayerOptions.map((layer) => {
                 return {
                     label: layer,
                     value: layer
@@ -52,6 +52,6 @@ function defineCustomElement() {
 }
 
 export { SplitLinePopup as S, defineCustomElement as d };
-//# sourceMappingURL=p-syf9yo9-.js.map
+//# sourceMappingURL=p-8avkq8Fj.js.map
 
-//# sourceMappingURL=p-syf9yo9-.js.map
+//# sourceMappingURL=p-8avkq8Fj.js.map

package/dist/components/{p-syf9yo9-.js.map → p-8avkq8Fj.js.map}

@@ -1 +1 @@
-{"file":"p-syf9yo9-.js","mappings":";;;;AAAA,MAAM,WAAW,GAAG,4rBAA4rB;;MCOnsB,cAAc,iBAAAA,kBAAA,CAAA,MAAA,cAAA,SAAAC,CAAA,CAAA;AAL3B,IAAA,WAAA,GAAA;;;;AAMU,QAAA,IAAkB,CAAA,kBAAA,GAAW,EAAE;AAE/B,QAAA,IAAa,CAAA,aAAA,GAAS,IAAI;AAsBnC;IAnBC,MAAM,GAAA;;AACJ,QAAA,QACE,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,gBAAgB,EAAA,EACxB,CAAA,CAAA,cAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACC,EAAE,EAAE,OAAO,EACX,OAAO,EAAG,CAAA,EAAA,GAAA,IAAI,CAAC,kBAAkB,CAAC,GAAG,CAAC,CAAC,KAAK,KAAG;gBAC7C,OAAO;AACL,oBAAA,KAAK,EAAG,KAAK;AACb,oBAAA,KAAK,EAAE;iBACR;aACF,CAAC,MAAI,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,EAAA,GAAA,EAAE,EACR,YAAY,EAAE,IAAI,CAAC,aAAa,EAChC,KAAK,EAAE,OAAO,EACd,QAAQ,EAAE,CAAC,CAAc,KAAI,EAAA,IAAI,CAAC,oBAAoB,CAAC,CAAC,CAAC,CAAA,EAAC,EAC1D,KAAK,EAAE,KAAK,EACV,CAAA,CACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/my-component/UI/map/udp-map/popups/map-popup.css?tag=split-line-popup&encapsulation=shadow","src/components/my-component/UI/map/udp-map/popups/split-line-popup.tsx"],"sourcesContent":["  \n  .popoverContent{\n    display: flex;\n    flex-direction: column;\n    column-gap: var(--spacing-04);\n    padding: var(--spacing-04);\n    z-index: 1\n  }\n  .featureDetailsPopOverContent{\n    min-width: 300px;\n    z-index: 1\n  }\n  .data-row {\n    display: flex;\n    column-gap: var(--spacing-04);\n   }\n  .data-section {\n    display: flex;\n    flex-direction: column;\n    column-gap: var(--spacing-02);\n  }\n  .key{\n    font-weight: bold;\n    color: var(--accent-color-two);\n  }\n  .header{\n    display: flex;\n    background-color: var(--accent-color-three);\n    color: var(--accent-color-two);\n    padding-left: var(--spacing-02);\n    margin-bottom: var(--spacing-04);\n  }\n  .closeButton{\n    display: flex;\n    align-items: center;\n    justify-content: flex-end;\n  }\n  .options{\n    display: flex;\n    justify-content: flex-end;\n    column-gap: var(--spacing-04);\n  }\n  .mapType{\n    margin-bottom: var(--spacing-02);\n  }"," import { Component, h, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'split-line-popup',\n  styleUrl: 'map-popup.css',\n  shadow: true,\n})\nexport class SplitLinePopup {\n  @Prop() vectorLayerOptions : any[] = []\n  @Prop() handleStartSplitting : any\n  @Prop() selectedLayer : any = null\n  \n\n  render() {\n    return (\n      <div class=\"popoverContent\">\n         <udp-selector\n          id={\"layer\"}\n          options= {this.vectorLayerOptions.map((layer)=>{\n            return {\n              label : layer,\n              value: layer\n            }\n          }) ?? []}         \n          initialValue={this.selectedLayer}               \n          label={\"Layer\"} \n          onChange={(e: CustomEvent)=>{this.handleStartSplitting(e)}}\n          large={false}\n          />\n      </div>\n    );\n  }\n}\n "],"version":3}
+{"file":"p-8avkq8Fj.js","mappings":";;;;AAAA,MAAM,WAAW,GAAG,4rBAA4rB;;MCOnsB,cAAc,iBAAAA,kBAAA,CAAA,MAAA,cAAA,SAAAC,CAAA,CAAA;AAL3B,IAAA,WAAA,GAAA;;;;AAMU,QAAA,IAAkB,CAAA,kBAAA,GAAW,EAAE;AAE/B,QAAA,IAAa,CAAA,aAAA,GAAS,IAAI;AAsBnC;IAnBC,MAAM,GAAA;;AACJ,QAAA,QACE,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,gBAAgB,EAAA,EACxB,CAAA,CAAA,cAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACC,EAAE,EAAE,OAAO,EACX,OAAO,EAAG,CAAA,EAAA,GAAA,IAAI,CAAC,kBAAkB,CAAC,GAAG,CAAC,CAAC,KAAK,KAAG;gBAC7C,OAAO;AACL,oBAAA,KAAK,EAAG,KAAK;AACb,oBAAA,KAAK,EAAE;iBACR;aACF,CAAC,MAAI,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,EAAA,GAAA,EAAE,EACR,YAAY,EAAE,IAAI,CAAC,aAAa,EAChC,KAAK,EAAE,OAAO,EACd,QAAQ,EAAE,CAAC,CAAc,KAAI,EAAA,IAAI,CAAC,oBAAoB,CAAC,CAAC,CAAC,CAAA,EAAC,EAC1D,KAAK,EAAE,KAAK,EACV,CAAA,CACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/my-component/UI/map/udp-map/popups/map-popup.css?tag=split-line-popup&encapsulation=shadow","src/components/my-component/UI/map/udp-map/popups/split-line-popup.tsx"],"sourcesContent":["  \n  .popoverContent{\n    display: flex;\n    flex-direction: column;\n    column-gap: var(--spacing-04);\n    padding: var(--spacing-04);\n    z-index: 1\n  }\n  .featureDetailsPopOverContent{\n    min-width: 300px;\n    z-index: 1\n  }\n  .data-row {\n    display: flex;\n    column-gap: var(--spacing-04);\n   }\n  .data-section {\n    display: flex;\n    flex-direction: column;\n    column-gap: var(--spacing-02);\n  }\n  .key{\n    font-weight: bold;\n    color: var(--accent-color-two);\n  }\n  .header{\n    display: flex;\n    background-color: var(--accent-color-three);\n    color: var(--accent-color-two);\n    padding-left: var(--spacing-02);\n    margin-bottom: var(--spacing-04);\n  }\n  .closeButton{\n    display: flex;\n    align-items: center;\n    justify-content: flex-end;\n  }\n  .options{\n    display: flex;\n    justify-content: flex-end;\n    column-gap: var(--spacing-04);\n  }\n  .mapType{\n    margin-bottom: var(--spacing-02);\n  }"," import { Component, h, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'split-line-popup',\n  styleUrl: 'map-popup.css',\n  shadow: true,\n})\nexport class SplitLinePopup {\n  @Prop() vectorLayerOptions : any[] = []\n  @Prop() handleStartSplitting : any\n  @Prop() selectedLayer : any = null\n  \n\n  render() {\n    return (\n      <div class=\"popoverContent\">\n         <udp-selector\n          id={\"layer\"}\n          options= {this.vectorLayerOptions.map((layer)=>{\n            return {\n              label : layer,\n              value: layer\n            }\n          }) ?? []}         \n          initialValue={this.selectedLayer}               \n          label={\"Layer\"} \n          onChange={(e: CustomEvent)=>{this.handleStartSplitting(e)}}\n          large={false}\n          />\n      </div>\n    );\n  }\n}\n "],"version":3}

package/dist/components/{p-B8k9GGZB.js → p-8paOuPay.js}

@@ -1,8 +1,8 @@
 import { p as proxyCustomElement, H, h } from './p-DPon6DDX.js';
 import { d as defineCustomElement$5 } from './p-DpLtIIwx.js';
 import { d as defineCustomElement$4 } from './p-BuRv3dp5.js';
-import { d as defineCustomElement$3 } from './p-HrsHnWeG.js';
-import { d as defineCustomElement$2 } from './p-BYsLvu6g.js';
+import { d as defineCustomElement$3 } from './p-6EzLtNtq.js';
+import { d as defineCustomElement$2 } from './p-CpMdhv3j.js';
 import { d as defineCustomElement$1 } from './p-DkppmXNM.js';
 
 const saveViewFormDialogCss = ".info-columns{display:flex}.column{width:100px}.toggle-options{display:flex;gap:16px;align-items:center;margin-bottom:16px}";
@@ -129,6 +129,6 @@ function defineCustomElement() {
 }
 
 export { SaveViewFormDialog as S, defineCustomElement as d };
-//# sourceMappingURL=p-B8k9GGZB.js.map
+//# sourceMappingURL=p-8paOuPay.js.map
 
-//# sourceMappingURL=p-B8k9GGZB.js.map
+//# sourceMappingURL=p-8paOuPay.js.map

package/dist/components/{p-B8k9GGZB.js.map → p-8paOuPay.js.map}

@@ -1 +1 @@
-{"file":"p-B8k9GGZB.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/my-component/UI/forms/save-view-form/save-view-form-dialog.css?tag=save-view-form-dialog&encapsulation=shadow","src/components/my-component/UI/forms/save-view-form/save-view-form.tsx"],"sourcesContent":[".info-columns{\n    display: flex;\n}\n\n.column{\n    width: 100px\n}\n\n.toggle-options {\n    display: flex;\n    gap: 16px;\n    align-items: center;\n    margin-bottom: 16px;\n}","import { Component, Prop, h, State, Element, Watch } from '@stencil/core';\n\n@Component({\n  tag: 'save-view-form-dialog',\n  styleUrl: 'save-view-form-dialog.css',\n  shadow: true,\n})\nexport class SaveViewFormDialog {\n  @Element() el: HTMLElement;\n  @Prop() open: boolean;\n  @Prop() title: string;\n  @Prop() handleClose: Function;\n  @Prop() tenant: string;\n  @Prop() application: string;\n  @Prop() entity: string;\n  @Prop() user: any;\n  @Prop() refetchViews: () => void;\n  @Prop() gApi: any;\n  @Prop() gcApi: any;\n  @Prop() gridId: any;\n  @Prop() domain: any;\n  @Prop() apiCatalogId: any;\n  @Prop() closeDialog: any;\n  // Adjust the handleFormSubmit to accept a number for isPrivate\n  @Prop() handleFormSubmit: (name: string, isPrivate: number, isDefault: boolean) => void;\n  @Prop() handleViewAndConfigurationSubmit: (name: string, isPrivate: number, isDefault: boolean) => void;\n  @Prop() currentName: string;\n  @Prop() currentIsPrivate: number;\n  @Prop() currentIsDefault: boolean;\n  @Prop() currentGridViewId: string;\n\n  @State() name: string = '';\n  // Change isPrivate to be a number, defaulting to 2 (false/not private)\n  @State() isPrivate: number = 2;\n  @State() isDefault: boolean = false;\n  @State() gridViewId: string = '';\n  @State() fetchedCurrentView: boolean = false;\n\n  @Watch(\"open\")\n  handleModalOpen(newValue: boolean) {\n    if (newValue) {\n      // Reset the state every time the modal opens\n      this.name = this.currentName || '';\n      this.isPrivate = this.currentIsPrivate ?? 2; // Set to 2 if null/undefined\n      this.isDefault = this.currentIsDefault ?? false;\n      this.gridViewId = this.currentGridViewId || '';\n    }\n  }\n\n  handleNameChange = (event) => {\n    this.name = event.target.value;\n  };\n\n  // Update the toggle method to flip between 1 (true/private) and 2 (false/not private)\n  handlePrivateChange = () => {\n    this.isPrivate = this.isPrivate === 1 ? 2 : 1;\n  };\n\n  handleDefaultChange = () => {\n    this.isDefault = !this.isDefault;\n  };\n\n  // Ensure handleSubmit correctly handles the isPrivate number\n  handleSubmit = () => {\n    this.handleFormSubmit(this.name, this.isPrivate, this.isDefault );\n    this.resetForm();\n  };\n\n  handleViewUpdate = () => {\n    this.handleViewAndConfigurationSubmit(this.name, this.isPrivate, this.isDefault);\n  };\n\n  resetForm = () => {\n    this.name = '';\n    this.isPrivate = 2;\n    this.isDefault = false;\n  }\n\n  render() {\n    return (\n      <fluent-dialog\n        open={this.open}\n        actionOne={() => { this.handleSubmit();}}\n        actionTwo={this.closeDialog}\n        actionThree={() => { this.handleViewUpdate();}}\n        handleClose={this.handleClose}\n        labelOne=\"Save Copy\"\n        labelTwo=\"Cancel\"\n        labelThree=\"Save View\"\n        title={this.title}\n        disableOne={!this.name}\n        buttonThreeHidden={!this.gridViewId} // Hidden when no view has been loaded into the grid\n      >\n        <form class=\"save-form\">\n          <text-field\n            label=\"View Name\"\n            placeholder=\"Create a name for your view\"\n            value={this.name}\n            onInput={(event: any) => this.handleNameChange(event)}\n          ></text-field>\n          {/* Adjust the toggle to reflect isPrivate's state accurately, might need custom handling based on stencil-toggle's API */}\n\n         <div class=\"toggle-options\" >\n          <div><stencil-toggle label=\"Private\" checked={this.isPrivate === 1} onToggledChange={this.handlePrivateChange}></stencil-toggle> </div>\n          <div><stencil-toggle label=\"Default\" checked={this.isDefault} onToggledChange={this.handleDefaultChange} style={{ marginTop: '10px' }}></stencil-toggle></div>\n        </div>\n\n        </form>\n      </fluent-dialog>\n    );\n  }\n}\n"],"version":3}
+{"file":"p-8paOuPay.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/my-component/UI/forms/save-view-form/save-view-form-dialog.css?tag=save-view-form-dialog&encapsulation=shadow","src/components/my-component/UI/forms/save-view-form/save-view-form.tsx"],"sourcesContent":[".info-columns{\n    display: flex;\n}\n\n.column{\n    width: 100px\n}\n\n.toggle-options {\n    display: flex;\n    gap: 16px;\n    align-items: center;\n    margin-bottom: 16px;\n}","import { Component, Prop, h, State, Element, Watch } from '@stencil/core';\n\n@Component({\n  tag: 'save-view-form-dialog',\n  styleUrl: 'save-view-form-dialog.css',\n  shadow: true,\n})\nexport class SaveViewFormDialog {\n  @Element() el: HTMLElement;\n  @Prop() open: boolean;\n  @Prop() title: string;\n  @Prop() handleClose: Function;\n  @Prop() tenant: string;\n  @Prop() application: string;\n  @Prop() entity: string;\n  @Prop() user: any;\n  @Prop() refetchViews: () => void;\n  @Prop() gApi: any;\n  @Prop() gcApi: any;\n  @Prop() gridId: any;\n  @Prop() domain: any;\n  @Prop() apiCatalogId: any;\n  @Prop() closeDialog: any;\n  // Adjust the handleFormSubmit to accept a number for isPrivate\n  @Prop() handleFormSubmit: (name: string, isPrivate: number, isDefault: boolean) => void;\n  @Prop() handleViewAndConfigurationSubmit: (name: string, isPrivate: number, isDefault: boolean) => void;\n  @Prop() currentName: string;\n  @Prop() currentIsPrivate: number;\n  @Prop() currentIsDefault: boolean;\n  @Prop() currentGridViewId: string;\n\n  @State() name: string = '';\n  // Change isPrivate to be a number, defaulting to 2 (false/not private)\n  @State() isPrivate: number = 2;\n  @State() isDefault: boolean = false;\n  @State() gridViewId: string = '';\n  @State() fetchedCurrentView: boolean = false;\n\n  @Watch(\"open\")\n  handleModalOpen(newValue: boolean) {\n    if (newValue) {\n      // Reset the state every time the modal opens\n      this.name = this.currentName || '';\n      this.isPrivate = this.currentIsPrivate ?? 2; // Set to 2 if null/undefined\n      this.isDefault = this.currentIsDefault ?? false;\n      this.gridViewId = this.currentGridViewId || '';\n    }\n  }\n\n  handleNameChange = (event) => {\n    this.name = event.target.value;\n  };\n\n  // Update the toggle method to flip between 1 (true/private) and 2 (false/not private)\n  handlePrivateChange = () => {\n    this.isPrivate = this.isPrivate === 1 ? 2 : 1;\n  };\n\n  handleDefaultChange = () => {\n    this.isDefault = !this.isDefault;\n  };\n\n  // Ensure handleSubmit correctly handles the isPrivate number\n  handleSubmit = () => {\n    this.handleFormSubmit(this.name, this.isPrivate, this.isDefault );\n    this.resetForm();\n  };\n\n  handleViewUpdate = () => {\n    this.handleViewAndConfigurationSubmit(this.name, this.isPrivate, this.isDefault);\n  };\n\n  resetForm = () => {\n    this.name = '';\n    this.isPrivate = 2;\n    this.isDefault = false;\n  }\n\n  render() {\n    return (\n      <fluent-dialog\n        open={this.open}\n        actionOne={() => { this.handleSubmit();}}\n        actionTwo={this.closeDialog}\n        actionThree={() => { this.handleViewUpdate();}}\n        handleClose={this.handleClose}\n        labelOne=\"Save Copy\"\n        labelTwo=\"Cancel\"\n        labelThree=\"Save View\"\n        title={this.title}\n        disableOne={!this.name}\n        buttonThreeHidden={!this.gridViewId} // Hidden when no view has been loaded into the grid\n      >\n        <form class=\"save-form\">\n          <text-field\n            label=\"View Name\"\n            placeholder=\"Create a name for your view\"\n            value={this.name}\n            onInput={(event: any) => this.handleNameChange(event)}\n          ></text-field>\n          {/* Adjust the toggle to reflect isPrivate's state accurately, might need custom handling based on stencil-toggle's API */}\n\n         <div class=\"toggle-options\" >\n          <div><stencil-toggle label=\"Private\" checked={this.isPrivate === 1} onToggledChange={this.handlePrivateChange}></stencil-toggle> </div>\n          <div><stencil-toggle label=\"Default\" checked={this.isDefault} onToggledChange={this.handleDefaultChange} style={{ marginTop: '10px' }}></stencil-toggle></div>\n        </div>\n\n        </form>\n      </fluent-dialog>\n    );\n  }\n}\n"],"version":3}

package/dist/components/{p-DntePo7I.js → p-B2mj8zmp.js}

@@ -2,7 +2,7 @@ import { p as proxyCustomElement, H, h } from './p-DPon6DDX.js';
 import Close24 from '@carbon/icons/es/close/24';
 import { d as defineCustomElement$6 } from './p-DpLtIIwx.js';
 import { d as defineCustomElement$5 } from './p-D8BxImYi.js';
-import { d as defineCustomElement$4 } from './p-hRee3qYx.js';
+import { d as defineCustomElement$4 } from './p-D6Wo7quX.js';
 import { d as defineCustomElement$3 } from './p-ZeWoGdjP.js';
 import { d as defineCustomElement$2 } from './p-C-wDzVCk.js';
 import { d as defineCustomElement$1 } from './p-DkppmXNM.js';
@@ -83,6 +83,6 @@ function defineCustomElement() {
 }
 
 export { SideSheet as S, defineCustomElement as d };
-//# sourceMappingURL=p-DntePo7I.js.map
+//# sourceMappingURL=p-B2mj8zmp.js.map
 
-//# sourceMappingURL=p-DntePo7I.js.map
+//# sourceMappingURL=p-B2mj8zmp.js.map