udp-stencil-component-library 1.0.0

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

@@ -0,0 +1,133 @@
+import { h } from "@stencil/core";
+/**
+ * A comprehensive example component showcasing all input components in different patterns:
+ * 1. Controlled components - where the parent manages the state
+ * 2. Uncontrolled components - where the component manages its own state
+ * 3. Form-wrapped components - using stencil-form and stencil-field for validation
+ *
+ * This component demonstrates proper usage patterns and integration approaches
+ * for all available input components including UDP selector.
+ */
+export class InputsExample {
+    constructor() {
+        // State for controlled components
+        this.controlledTextValue = '';
+        this.controlledNumericValue = '';
+        this.controlledTextAreaValue = '';
+        this.controlledCheckboxValue = false;
+        this.controlledToggleValue = false;
+        this.controlledDateValue = '';
+        this.controlledTimeValue = '';
+        this.controlledDateTimeValue = '';
+        this.controlledSelectorValue = '';
+        this.controlledFileValue = [];
+        // State for form values
+        this.formValues = {};
+        // Sample data for selector components
+        this.selectorOptions = [
+            { value: 'option1', label: 'Option 1' },
+            { value: 'option2', label: 'Option 2' },
+            { value: 'option3', label: 'Option 3' },
+            { value: 'option4', label: 'Option 4' },
+        ];
+        // Event handlers for controlled components
+        // private handleControlledTextChange = (event: CustomEvent) => {
+        //   this.controlledTextValue = event.detail;
+        // };
+        this.handleControlledNumericChange = (event) => {
+            this.controlledNumericValue = event.detail;
+        };
+        this.handleControlledCheckboxChange = (event) => {
+            this.controlledCheckboxValue = event.detail === 'true';
+        };
+        this.handleControlledToggleChange = (event) => {
+            this.controlledToggleValue = event.detail === 'true';
+        };
+        this.handleControlledDateChange = (event) => {
+            console.log(event);
+            this.controlledDateValue = event.detail;
+        };
+        this.handleControlledTimeChange = (event) => {
+            this.controlledTimeValue = event.detail;
+        };
+        this.handleControlledDateTimeChange = (event) => {
+            this.controlledDateTimeValue = event.detail;
+        };
+        this.handleControlledSelectorChange = (event) => {
+            this.controlledSelectorValue = event.detail;
+        };
+        this.handleControlledFileChange = (event) => {
+            this.controlledFileValue = event.detail.files || [];
+        };
+        // Form event handlers
+        this.handleFormSubmit = (values) => {
+            console.log('Form submitted with values:', values);
+            alert('Form submitted! Check console for values.');
+        };
+        this.handleFormChange = (values) => {
+            this.formValues = Object.assign({}, values);
+        };
+        this.validateForm = (values) => {
+            const errors = {};
+            if (!values.formTextField) {
+                errors.formTextField = 'This field is required';
+            }
+            if (!values.formNumericField || parseFloat(values.formNumericField) < 0) {
+                errors.formNumericField = 'Must be a positive number';
+            }
+            if (!values.formTextArea) {
+                errors.formTextArea = 'Description is required';
+            }
+            if (!values.formCheckbox) {
+                errors.formCheckbox = 'You must accept the terms';
+            }
+            if (!values.formDate) {
+                errors.formDate = 'Please select a date';
+            }
+            if (!values.formSelector) {
+                errors.formSelector = 'Please make a selection';
+            }
+            return errors;
+        };
+    }
+    render() {
+        return (h("div", { key: '3da74abd70421539a2554b616acda1c50738de0b', class: "inputs-example" }, h("h1", { key: '6b124bbb5bde6369765580637998bf877f02607f' }, "Input Components Examples"), h("section", { key: '56cbe49c48fbcd9eec1c88e79baa9552594be36b', class: "example-section" }, h("h2", { key: 'aefa4ad3ebbc3838731ba8115e6441b8c1238523' }, "Controlled Components"), h("p", { key: '17ab51e86479fe629d7a3dd3f6b1abfb3f2f2822' }, "Parent component manages state and passes values to child components."), h("div", { key: '6a71ae111dc885542cacf85c756003cb230fbe1a', class: "input-grid" }, h("div", { key: '3915c8183ea7f065f8c6441ca9098998e391cd06', class: "input-example" }, h("h3", { key: '5abe6609618301097c2d1d3a2457d2f5c1dbf243' }, "Text Field"), h("text-field", { key: '1a64f66e4f596451e9fa6b378d52166b0cace7b4', label: "Controlled Text Input", placeholder: "Enter text...", value: this.controlledTextValue }), h("p", { key: '7f5960677cfd0b6f0d604213b82aa33ac9595f5c', class: "value-display" }, "Value: ", this.controlledTextValue)), h("div", { key: 'f9cb96184968cfb82769dc1d376e541172621b51', class: "input-example" }, h("h3", { key: 'f8ad419e60394c3a45388f034994b9d31b4a15e1' }, "Numeric Field"), h("numeric-field", { key: '18d809d114b884257f8e88a50188fe48801fb69c', label: "Controlled Numeric Input", placeholder: "Enter number...", value: this.controlledNumericValue, min: "0", max: "100", step: "1", onChange: this.handleControlledNumericChange }), h("p", { key: '0b2a65793ce4b2cabef45f94bc5a7dce23cd6bf9', class: "value-display" }, "Value: ", this.controlledNumericValue)), h("div", { key: '6b1fbffd593cd44d6deec99a6351f158222d4b3c', class: "input-example" }, h("h3", { key: 'fcddddb4f84395f8a2fff6293d8c7ded1157039f' }, "Text Area"), h("text-area", { key: '2bed16a99dce7686437f38de00d590bbb48964cf', label: "Controlled Text Area", placeholder: "Enter description...", value: this.controlledTextAreaValue, minRows: 3, maxRows: 6 }), h("p", { key: 'fd7222589f3c2f81baf7bfeae9267e98115f1590', class: "value-display" }, "Value: ", this.controlledTextAreaValue)), h("div", { key: '0204af33e78cdd8ce9d241385baf5890b860ce8a', class: "input-example" }, h("h3", { key: 'f53529e5d4ff512d254ad6f4948cc456ab24f230' }, "Checkbox"), h("check-box", { key: '962f9b58bb23b0b6e8edcd9c721753c0c4eeaa01', label: "Controlled Checkbox", checked: this.controlledCheckboxValue, onChange: this.handleControlledCheckboxChange }), h("p", { key: '118ce754d245b93771a455a7f038b7c638463b3f', class: "value-display" }, "Checked: ", this.controlledCheckboxValue.toString())), h("div", { key: 'd0815932200fe2c446987b21460409fdd038c46a', class: "input-example" }, h("h3", { key: 'f23c2a571ddb1c5ab978eb143588a4747a18d6b9' }, "Toggle"), h("stencil-toggle", { key: '47fa3979ebd7d410f18975ae08763893e4f925e9', label: "Controlled Toggle", checked: this.controlledToggleValue, onChange: this.handleControlledToggleChange }), h("p", { key: '1e899302889f5cd5058f5cab42e6a90a3d83dbd1', class: "value-display" }, "Toggled: ", this.controlledToggleValue.toString())), h("div", { key: 'aa77a78e558a82f238655f191a69b2de225f5734', class: "input-example" }, h("h3", { key: 'c574c32e806b99b125bd9784e55bc313e1a0e954' }, "Date Selector"), h("udp-date-selector", { key: '3eecbaf877ec8986e40aebaf3f2f63737c5b9b2c', label: "Controlled Date", value: this.controlledDateValue, onChange: this.handleControlledDateChange }), h("p", { key: '51a534bdff6e3734d7df715c0915af4880ba1d2d', class: "value-display" }, "Date: ", this.controlledDateValue)), h("div", { key: 'c0629f951d65d8fbbfa9306fd7272cfa29565f19', class: "input-example" }, h("h3", { key: '1add3ae80c37d13269819e9162f7f256750a2425' }, "DateTime Selector"), h("udp-datetime-selector", { key: '82933433a98afd8beb56c37eea3529a3a34fa66a', label: "Controlled DateTime", value: this.controlledDateTimeValue, onChange: this.handleControlledDateTimeChange }), h("p", { key: 'ebb07a9d5adc1d908587b5a34e780b3bfa485e29', class: "value-display" }, "DateTime: ", this.controlledDateTimeValue)), h("div", { key: '32c429bc109743aa5458d34e47d8f3adb502b45d', class: "input-example" }, h("h3", { key: '71bc03520824c4a0c85bf8f012bdddcf0c15c1a2' }, "Time Selector"), h("udp-time-selector", { key: 'af39b54f0c6785c96b5a6246e3171121e4c47968', label: "Controlled Time", value: this.controlledTimeValue, onChange: this.handleControlledTimeChange }), h("p", { key: 'abffca27579f0dfc0f65a9a640d8fa012b9cb1b9', class: "value-display" }, "Time: ", this.controlledTimeValue)), h("div", { key: '5fdcf36214c29a2d53d2de0dd0f94e09e5015cd7', class: "input-example" }, h("h3", { key: '8c4b6a80ab47b17d2671f2f806a1a6d9b0c2db33' }, "UDP Selector"), h("udp-selector", { key: '0dc456a87611cf09e7f5af4b8b95d35a2bb6cc8b', label: "Controlled Selector", options: this.selectorOptions, value: this.controlledSelectorValue, onChange: this.handleControlledSelectorChange }), h("p", { key: '071e343d9475c2c503fa4edbf4ca7062fc56d2b5', class: "value-display" }, "Selected: ", this.controlledSelectorValue)), h("div", { key: '128ec36c602be405f10b89f489400e432dc340ec', class: "input-example" }, h("h3", { key: '4fd74753a727f134834709001fcab1e4b65ec117' }, "File Upload"), h("file-upload", { key: '0773e51006ee1308ea861b256f627add48379b3f', label: "Controlled File Upload", allowMultiple: true, onChange: this.handleControlledFileChange }), h("p", { key: 'd577ace30ad502dc9db8639113d2289759ab5abe', class: "value-display" }, "Files: ", this.controlledFileValue.length, " selected")))), h("section", { key: 'a289b904dbbb9e8b9bfeb585415da1b295e473bf', class: "example-section" }, h("h2", { key: '07b0ace272dd425eae4a457356b34cd18c088af6' }, "Uncontrolled Components"), h("p", { key: '45ce4ba3e1c2e053ecee690f11051370dbac5b07' }, "Components manage their own state with initial values."), h("div", { key: '4885ea9b96a1d27a96f617855dfab55d55be088a', class: "input-grid" }, h("div", { key: '34e764b1aa05440a95ab7283b7626af242511b5b', class: "input-example" }, h("h3", { key: 'a4decaaaea8ed21e4e551ad5c25da13cdffd4641' }, "Text Field"), h("text-field", { key: 'd35baca4b8227893f800ab5b6761caa22c9addbb', label: "Uncontrolled Text Input", placeholder: "Enter text...", initialValue: "Initial text value", onChange: (e) => console.log('Text changed:', e.detail) })), h("div", { key: '6c207288b022b801a1c6273c788479e39d0dd3dc', class: "input-example" }, h("h3", { key: 'afb387e64e9577c44bc5ac580a2d5168bbdeb65c' }, "Numeric Field"), h("numeric-field", { key: '23b7954993d174ad77c1f208808c793c6659f4f9', label: "Uncontrolled Numeric Input", placeholder: "Enter number...", initialValue: "42", min: "0", max: "100", onChange: (e) => console.log('Number changed:', e.detail) })), h("div", { key: '913cdc01241431cbc612ef97b93ffd247492b167', class: "input-example" }, h("h3", { key: '9fd3d84a5e69982b680d1509c6a24e8d419a863c' }, "Text Area"), h("text-area", { key: 'b0fe697d2b58d4c304040cc64f73b34b750ff148', label: "Uncontrolled Text Area", placeholder: "Enter description...", initialValue: "Initial description text", minRows: 3, onChange: (e) => console.log('Text area changed:', e.detail) })), h("div", { key: '3b4ea7e8d56424eca907df640ad9df9bb83964ad', class: "input-example" }, h("h3", { key: 'daeab74f385d8d6198ab7eae204a998b5024f3b6' }, "Checkbox"), h("check-box", { key: '2908d9f77b731709d5881f412b5504a0a23209b1', label: "Uncontrolled Checkbox", initialValue: "true", onChange: (e) => console.log('Checkbox changed:', e.detail) })), h("div", { key: '1c083453c6b11c36257cf27dbe4710372a7017a0', class: "input-example" }, h("h3", { key: '99e5b72f9c943e3cfc1846ff045a935f301f1016' }, "Toggle"), h("stencil-toggle", { key: '4d8c20ce82212cc5f062bbbe856bd763d1b23f4e', label: "Uncontrolled Toggle", initialValue: "false", onChange: (e) => console.log('Toggle changed:', e.detail) })), h("div", { key: '106a44f6a5f9812b88c32dc6aa72caef49f30125', class: "input-example" }, h("h3", { key: 'eaf94d261fe7220566e59357c291f2659f821c08' }, "Date Selector"), h("udp-date-selector", { key: '823fe73f71e3564a49a929cf369a0cbc334849f5', label: "Uncontrolled Date", initialValue: "2024-01-15", onChange: (e) => console.log('Date changed:', e.detail) })), h("div", { key: '28d33e652929d7989811013268c7c2d7c0197c49', class: "input-example" }, h("h3", { key: '656651e303fd381cdc807c786248c3ec11f5091c' }, "Time Selector"), h("udp-time-selector", { key: 'db9e3944ee19f32ab948b654d15aecec5462a261', label: "Uncontrolled Time", initialValue: "14:30", onChange: (e) => console.log('Time changed:', e.detail) })), h("div", { key: '53961440c87b212e982368d2b05d203ef9c88d6d', class: "input-example" }, h("h3", { key: '362ece32eec73eb856b044fec8115398deb07386' }, "DateTime Selector"), h("udp-datetime-selector", { key: 'cb0e2e6bb174fa626ed756ed22d7b7848545d330', label: "Uncontrolled DateTime", initialValue: "2024-01-15T14:30", onChange: (e) => console.log('DateTime changed:', e.detail) })), h("div", { key: '2c4af29b165784793e0702ce3de707e38d170158', class: "input-example" }, h("h3", { key: 'ca82a6fc1dd9594a07b1aa59ddb14020b496a502' }, "UDP Selector"), h("udp-selector", { key: '7292caef7362066e068f3f226bf99beef47e415a', label: "Uncontrolled Selector", options: this.selectorOptions, initialValue: "option2", onChange: (e) => console.log('Selector changed:', e.detail) })))), h("section", { key: '6c6eba045d0d19222b38add5f13e6581944c3aa0', class: "example-section" }, h("h2", { key: '4af634c988bd224ab879e3cc0ec2272403cc9c70' }, "Form-wrapped Components"), h("p", { key: '331b6ddfabc8dfa7994f174f9ad699812c880972' }, "Components integrated with stencil-form and stencil-field for validation and state management."), h("stencil-form", { key: '48e3707af3ff9398730a268e0df1096a7e514ca5', handleSubmit: this.handleFormSubmit, handleFormChange: this.handleFormChange, validate: this.validateForm, initialValues: {
+                formTextField: 'Initial form text',
+                formNumericField: '25',
+                formTextArea: 'Initial form description',
+                formCheckbox: 'false',
+                formToggle: 'true',
+                formDate: '2024-02-01',
+                formTime: '09:00',
+                formSelector: 'option1'
+            } }, h("div", { key: '406a9b8aad0cd70187652a74b06a5408464f1ed9', class: "form-grid" }, h("stencil-field", { key: 'ee0ec91b3b02379578126dd19359aecc9dd43d97', name: "formTextField" }, h("text-field", { key: '809f80d5d9ef213564767c659b1c8e1bbc8c1962', label: "Form Text Field", placeholder: "Enter text...", required: true })), h("stencil-field", { key: 'a0f753026f60f8d66398899fb4579b9e8f55515a', name: "formNumericField" }, h("numeric-field", { key: '561dfd7c599f0d53efe53a2e0414269909a785cc', label: "Form Numeric Field", placeholder: "Enter number...", min: "0", max: "100", required: true })), h("stencil-field", { key: '46b66b26f1f6060d56b10fa0a90f55f302501f76', name: "formTextArea" }, h("text-area", { key: '0d5066d982b6a72dc0dd18f2c8a40f5d8519c5c3', label: "Form Text Area", placeholder: "Enter description...", required: true, minRows: 3 })), h("stencil-field", { key: '7bf05749de097d8af284b13624e2834a33d1d8a0', name: "formCheckbox" }, h("check-box", { key: 'ab071b27f99abf7c75b0c13480a0feadfcf1501b', label: "Accept Terms and Conditions", required: true })), h("stencil-field", { key: 'db30574e852a7e00bde20874a8afdd4625f9425e', name: "formToggle" }, h("stencil-toggle", { key: '9d2b403ec71af278cf92eb28ba8d11ae26aea813', label: "Enable Notifications" })), h("stencil-field", { key: 'a6957abfc4bee75bcd927bfb4fc2f6c44431f98c', name: "formDate" }, h("udp-date-selector", { key: '125abde94c7db388f5816dd10c1ca78ad5c674fd', label: "Form Date", required: true })), h("stencil-field", { key: '97f5c0697b5d6eb0ae8cd43f6eeb286cab3abf8e', name: "formTime" }, h("udp-time-selector", { key: '7f8a6aa921109069cdbfc86a7a293624d1f35859', label: "Form Time" })), h("stencil-field", { key: '4ccfab4a17394c86cf888a337d2426f1034f5e71', name: "formSelector" }, h("udp-selector", { key: 'e136dbc1c2ab03a246b63ea967a7a84a13683ab5', label: "Form Selector", options: this.selectorOptions, required: true })), h("stencil-field", { key: 'ee4d8f995e5e96fff5280a8cd45ca0460be75154', name: "formFiles" }, h("file-upload", { key: '6917c8f392f5e88b8423d0b0bc06cc5c153006ce', label: "Form File Upload", allowMultiple: true }))), h("div", { key: 'd0aafc03ce52f80c10b3fe51b100c33df974a38b', class: "form-actions" }, h("button", { key: 'd1c8b43f02da4918ec0da0d1fc295722582c8a33', type: "submit", class: "submit-button" }, "Submit Form"))), h("div", { key: '8262d7c5c14474b79b5f6f263fa0a880d5784cc7', class: "form-values" }, h("h3", { key: '2afa6b14651bc272359b961cbb4c237f424d5141' }, "Current Form Values:"), h("pre", { key: 'cc8a77322f3c6600985e8c872ab39f5111dd6f36' }, JSON.stringify(this.formValues, null, 2)))), h("section", { key: '99feaf1b06ee86ec2f271c18349944aa97ab197d', class: "example-section" }, h("h2", { key: 'bab84945d739afb223a0b2d8e0ff412ca53fe8c9' }, "Additional Examples"), h("p", { key: '134b4cde6168df79436cb27f9bdf922a670fb860' }, "More complex configurations and specialized use cases."), h("div", { key: 'f2a427f9ea0310556b41f62ed80ec58ca75e68b5', class: "input-grid" }, h("div", { key: '9d382516d2a892ede82de059ff6fdb32c183691f', class: "input-example" }, h("h3", { key: 'd066408ed3ef697c1a4d38ca130b750559d9bedb' }, "Multi-Select UDP Selector"), h("udp-selector", { key: '9432670ce1246c5eab8ed2c0eb15f9c1c918e151', label: "Multi-Select Selector", options: this.selectorOptions, multiSelect: true, initialValue: "option1,option3", onChange: (e) => console.log('Multi-select changed:', e.detail) })), h("div", { key: '83e24f9a3fc553086045bcdc8bf46dd2cec2eb1b', class: "input-example" }, h("h3", { key: '8b570daba866f2839731e5dbb9068bd673aed22d' }, "Large UDP Selector"), h("udp-selector", { key: 'c46458671306eced8e0e719446f89241815bea19', label: "Large Selector", options: this.selectorOptions, large: true, initialValue: "option2", onChange: (e) => console.log('Large selector changed:', e.detail) })), h("div", { key: '5169bff3ee24ec56bef21835aca69146ef4add54', class: "input-example" }, h("h3", { key: '8dc631c2959c38b48d0f6e08cad4c4ea4bc39161' }, "File Upload with Type Restrictions"), h("file-upload", { key: 'd60626605a75ab74d21b4b4589696bf58b4884a9', label: "Image Upload Only", allowedFileTypes: ['jpg', 'jpeg', 'png', 'gif'], allowMultiple: false, browseFileMessage: "Select an Image", onChange: (e) => console.log('Image upload changed:', e.detail) })), h("div", { key: 'ec9b1d400843d30ecef41ba24025971f6e2e5dc9', class: "input-example" }, h("h3", { key: '9e0a742f3b25f72b4e91eee5b05f8879116a7569' }, "Disabled Components"), h("div", { key: '58ae11ee1c1e479269d14ce4b4086c374f7050e7', class: "disabled-examples" }, h("text-field", { key: '724e9eaff26b99475df3949e222ef5fa174832ad', label: "Disabled Text Field", value: "Cannot edit this", disabled: true }), h("check-box", { key: 'f62d486fc6f3b9b301e052b18e2cefd8780c1037', label: "Disabled Checkbox", checked: true, disabled: true }), h("udp-selector", { key: 'bdb758a8492457bcf97ac0455982635875337615', label: "Disabled Selector", options: this.selectorOptions, value: "option1", disabled: true })))))));
+    }
+    static get is() { return "inputs-example"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["inputs-example.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["inputs-example.css"]
+        };
+    }
+    static get states() {
+        return {
+            "controlledTextValue": {},
+            "controlledNumericValue": {},
+            "controlledTextAreaValue": {},
+            "controlledCheckboxValue": {},
+            "controlledToggleValue": {},
+            "controlledDateValue": {},
+            "controlledTimeValue": {},
+            "controlledDateTimeValue": {},
+            "controlledSelectorValue": {},
+            "controlledFileValue": {},
+            "formValues": {}
+        };
+    }
+}
+//# sourceMappingURL=inputs-example.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"inputs-example.js","sourceRoot":"","sources":["../../../../src/components/test-component/inputs-example/inputs-example.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAEpD;;;;;;;;GAQG;AAMH,MAAM,OAAO,aAAa;IAL1B;QAQE,kCAAkC;QACzB,wBAAmB,GAAW,EAAE,CAAC;QACjC,2BAAsB,GAAW,EAAE,CAAC;QACpC,4BAAuB,GAAW,EAAE,CAAC;QACrC,4BAAuB,GAAY,KAAK,CAAC;QACzC,0BAAqB,GAAY,KAAK,CAAC;QACvC,wBAAmB,GAAW,EAAE,CAAC;QACjC,wBAAmB,GAAW,EAAE,CAAC;QACjC,4BAAuB,GAAW,EAAE,CAAC;QACrC,4BAAuB,GAAW,EAAE,CAAC;QACrC,wBAAmB,GAAW,EAAE,CAAC;QAE1C,wBAAwB;QACf,eAAU,GAAQ,EAAE,CAAC;QAE9B,sCAAsC;QAC9B,oBAAe,GAAG;YACxB,EAAE,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,UAAU,EAAE;YACvC,EAAE,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,UAAU,EAAE;YACvC,EAAE,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,UAAU,EAAE;YACvC,EAAE,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,UAAU,EAAE;SACxC,CAAC;QAEF,2CAA2C;QAC3C,iEAAiE;QACjE,6CAA6C;QAC7C,KAAK;QACG,kCAA6B,GAAG,CAAC,KAAkB,EAAE,EAAE;YAC7D,IAAI,CAAC,sBAAsB,GAAG,KAAK,CAAC,MAAM,CAAC;QAC7C,CAAC,CAAC;QAEM,mCAA8B,GAAG,CAAC,KAAkB,EAAE,EAAE;YAC9D,IAAI,CAAC,uBAAuB,GAAG,KAAK,CAAC,MAAM,KAAK,MAAM,CAAC;QACzD,CAAC,CAAC;QACM,iCAA4B,GAAG,CAAC,KAAkB,EAAE,EAAE;YAC5D,IAAI,CAAC,qBAAqB,GAAG,KAAK,CAAC,MAAM,KAAK,MAAM,CAAC;QACvD,CAAC,CAAC;QACM,+BAA0B,GAAG,CAAC,KAAkB,EAAE,EAAE;YAC1D,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC,CAAA;YAClB,IAAI,CAAC,mBAAmB,GAAG,KAAK,CAAC,MAAM,CAAC;QAC1C,CAAC,CAAC;QACM,+BAA0B,GAAG,CAAC,KAAkB,EAAE,EAAE;YAC1D,IAAI,CAAC,mBAAmB,GAAG,KAAK,CAAC,MAAM,CAAC;QAC1C,CAAC,CAAC;QACM,mCAA8B,GAAG,CAAC,KAAkB,EAAE,EAAE;YAC9D,IAAI,CAAC,uBAAuB,GAAG,KAAK,CAAC,MAAM,CAAC;QAC9C,CAAC,CAAC;QACM,mCAA8B,GAAG,CAAC,KAAkB,EAAE,EAAE;YAC9D,IAAI,CAAC,uBAAuB,GAAG,KAAK,CAAC,MAAM,CAAC;QAC9C,CAAC,CAAC;QACM,+BAA0B,GAAG,CAAC,KAAkB,EAAE,EAAE;YAC1D,IAAI,CAAC,mBAAmB,GAAG,KAAK,CAAC,MAAM,CAAC,KAAK,IAAI,EAAE,CAAC;QACtD,CAAC,CAAC;QAEF,sBAAsB;QACd,qBAAgB,GAAG,CAAC,MAAW,EAAE,EAAE;YACzC,OAAO,CAAC,GAAG,CAAC,6BAA6B,EAAE,MAAM,CAAC,CAAC;YACnD,KAAK,CAAC,2CAA2C,CAAC,CAAC;QACrD,CAAC,CAAC;QAEM,qBAAgB,GAAG,CAAC,MAAW,EAAE,EAAE;YACzC,IAAI,CAAC,UAAU,qBAAQ,MAAM,CAAE,CAAC;QAClC,CAAC,CAAC;QAEM,iBAAY,GAAG,CAAC,MAAW,EAAE,EAAE;YACrC,MAAM,MAAM,GAAQ,EAAE,CAAC;YAEvB,IAAI,CAAC,MAAM,CAAC,aAAa,EAAE,CAAC;gBAC1B,MAAM,CAAC,aAAa,GAAG,wBAAwB,CAAC;YAClD,CAAC;YAED,IAAI,CAAC,MAAM,CAAC,gBAAgB,IAAI,UAAU,CAAC,MAAM,CAAC,gBAAgB,CAAC,GAAG,CAAC,EAAE,CAAC;gBACxE,MAAM,CAAC,gBAAgB,GAAG,2BAA2B,CAAC;YACxD,CAAC;YAED,IAAI,CAAC,MAAM,CAAC,YAAY,EAAE,CAAC;gBACzB,MAAM,CAAC,YAAY,GAAG,yBAAyB,CAAC;YAClD,CAAC;YAED,IAAI,CAAC,MAAM,CAAC,YAAY,EAAE,CAAC;gBACzB,MAAM,CAAC,YAAY,GAAG,2BAA2B,CAAC;YACpD,CAAC;YAED,IAAI,CAAC,MAAM,CAAC,QAAQ,EAAE,CAAC;gBACrB,MAAM,CAAC,QAAQ,GAAG,sBAAsB,CAAC;YAC3C,CAAC;YAED,IAAI,CAAC,MAAM,CAAC,YAAY,EAAE,CAAC;gBACzB,MAAM,CAAC,YAAY,GAAG,yBAAyB,CAAC;YAClD,CAAC;YAED,OAAO,MAAM,CAAC;QAChB,CAAC,CAAC;KAiYH;IA/XC,MAAM;QACJ,OAAO,CACL,4DAAK,KAAK,EAAC,gBAAgB;YACzB,yFAAkC;YAGlC,gEAAS,KAAK,EAAC,iBAAiB;gBAC9B,qFAA8B;gBAC9B,oIAA4E;gBAE5E,4DAAK,KAAK,EAAC,YAAY;oBACrB,4DAAK,KAAK,EAAC,eAAe;wBACxB,0EAAmB;wBACnB,mEACE,KAAK,EAAC,uBAAuB,EAC7B,WAAW,EAAC,eAAe,EAC3B,KAAK,EAAE,IAAI,CAAC,mBAAmB,GAC/B;wBACF,0DAAG,KAAK,EAAC,eAAe;;4BAAS,IAAI,CAAC,mBAAmB,CAAK,CAC1D;oBAEN,4DAAK,KAAK,EAAC,eAAe;wBACxB,6EAAsB;wBACtB,sEACE,KAAK,EAAC,0BAA0B,EAChC,WAAW,EAAC,iBAAiB,EAC7B,KAAK,EAAE,IAAI,CAAC,sBAAsB,EAClC,GAAG,EAAC,GAAG,EACP,GAAG,EAAC,KAAK,EACT,IAAI,EAAC,GAAG,EACR,QAAQ,EAAE,IAAI,CAAC,6BAA6B,GAC5C;wBACF,0DAAG,KAAK,EAAC,eAAe;;4BAAS,IAAI,CAAC,sBAAsB,CAAK,CAC7D;oBAEN,4DAAK,KAAK,EAAC,eAAe;wBACxB,yEAAkB;wBAClB,kEACE,KAAK,EAAC,sBAAsB,EAC5B,WAAW,EAAC,sBAAsB,EAClC,KAAK,EAAE,IAAI,CAAC,uBAAuB,EACnC,OAAO,EAAE,CAAC,EACV,OAAO,EAAE,CAAC,GACV;wBACF,0DAAG,KAAK,EAAC,eAAe;;4BAAS,IAAI,CAAC,uBAAuB,CAAK,CAC9D;oBAEN,4DAAK,KAAK,EAAC,eAAe;wBACxB,wEAAiB;wBACjB,kEACE,KAAK,EAAC,qBAAqB,EAC3B,OAAO,EAAE,IAAI,CAAC,uBAAuB,EACrC,QAAQ,EAAE,IAAI,CAAC,8BAA8B,GAC7C;wBACF,0DAAG,KAAK,EAAC,eAAe;;4BAAW,IAAI,CAAC,uBAAuB,CAAC,QAAQ,EAAE,CAAK,CAC3E;oBAEN,4DAAK,KAAK,EAAC,eAAe;wBACxB,sEAAe;wBACf,uEACE,KAAK,EAAC,mBAAmB,EACzB,OAAO,EAAE,IAAI,CAAC,qBAAqB,EACnC,QAAQ,EAAE,IAAI,CAAC,4BAA4B,GAC3C;wBACF,0DAAG,KAAK,EAAC,eAAe;;4BAAW,IAAI,CAAC,qBAAqB,CAAC,QAAQ,EAAE,CAAK,CACzE;oBAEN,4DAAK,KAAK,EAAC,eAAe;wBACxB,6EAAsB;wBACtB,0EACE,KAAK,EAAC,iBAAiB,EACvB,KAAK,EAAE,IAAI,CAAC,mBAAmB,EAC/B,QAAQ,EAAE,IAAI,CAAC,0BAA0B,GACzC;wBACF,0DAAG,KAAK,EAAC,eAAe;;4BAAQ,IAAI,CAAC,mBAAmB,CAAK,CACzD;oBAEN,4DAAK,KAAK,EAAC,eAAe;wBACxB,iFAA0B;wBAC1B,8EACE,KAAK,EAAC,qBAAqB,EAC3B,KAAK,EAAE,IAAI,CAAC,uBAAuB,EACnC,QAAQ,EAAE,IAAI,CAAC,8BAA8B,GAC7C;wBACF,0DAAG,KAAK,EAAC,eAAe;;4BAAY,IAAI,CAAC,uBAAuB,CAAK,CACjE;oBAEN,4DAAK,KAAK,EAAC,eAAe;wBACxB,6EAAsB;wBACtB,0EACE,KAAK,EAAC,iBAAiB,EACvB,KAAK,EAAE,IAAI,CAAC,mBAAmB,EAC/B,QAAQ,EAAE,IAAI,CAAC,0BAA0B,GACzC;wBACF,0DAAG,KAAK,EAAC,eAAe;;4BAAQ,IAAI,CAAC,mBAAmB,CAAK,CACzD;oBAEN,4DAAK,KAAK,EAAC,eAAe;wBACxB,4EAAqB;wBACrB,qEACE,KAAK,EAAC,qBAAqB,EAC3B,OAAO,EAAE,IAAI,CAAC,eAAe,EAC7B,KAAK,EAAE,IAAI,CAAC,uBAAuB,EACnC,QAAQ,EAAE,IAAI,CAAC,8BAA8B,GAC7C;wBACF,0DAAG,KAAK,EAAC,eAAe;;4BAAY,IAAI,CAAC,uBAAuB,CAAK,CACjE;oBAEN,4DAAK,KAAK,EAAC,eAAe;wBACxB,2EAAoB;wBACpB,oEACE,KAAK,EAAC,wBAAwB,EAC9B,aAAa,EAAE,IAAI,EACnB,QAAQ,EAAE,IAAI,CAAC,0BAA0B,GACzC;wBACF,0DAAG,KAAK,EAAC,eAAe;;4BAAS,IAAI,CAAC,mBAAmB,CAAC,MAAM;wCAAc,CAC1E,CACF,CACE;YAGV,gEAAS,KAAK,EAAC,iBAAiB;gBAC9B,uFAAgC;gBAChC,qHAA6D;gBAE7D,4DAAK,KAAK,EAAC,YAAY;oBACrB,4DAAK,KAAK,EAAC,eAAe;wBACxB,0EAAmB;wBACnB,mEACE,KAAK,EAAC,yBAAyB,EAC/B,WAAW,EAAC,eAAe,EAC3B,YAAY,EAAC,oBAAoB,EACjC,QAAQ,EAAE,CAAC,CAAc,EAAE,EAAE,CAAC,OAAO,CAAC,GAAG,CAAC,eAAe,EAAE,CAAC,CAAC,MAAM,CAAC,GACpE,CACE;oBAEN,4DAAK,KAAK,EAAC,eAAe;wBACxB,6EAAsB;wBACtB,sEACE,KAAK,EAAC,4BAA4B,EAClC,WAAW,EAAC,iBAAiB,EAC7B,YAAY,EAAC,IAAI,EACjB,GAAG,EAAC,GAAG,EACP,GAAG,EAAC,KAAK,EACT,QAAQ,EAAE,CAAC,CAAc,EAAE,EAAE,CAAC,OAAO,CAAC,GAAG,CAAC,iBAAiB,EAAE,CAAC,CAAC,MAAM,CAAC,GACtE,CACE;oBAEN,4DAAK,KAAK,EAAC,eAAe;wBACxB,yEAAkB;wBAClB,kEACE,KAAK,EAAC,wBAAwB,EAC9B,WAAW,EAAC,sBAAsB,EAClC,YAAY,EAAC,0BAA0B,EACvC,OAAO,EAAE,CAAC,EACV,QAAQ,EAAE,CAAC,CAAc,EAAE,EAAE,CAAC,OAAO,CAAC,GAAG,CAAC,oBAAoB,EAAE,CAAC,CAAC,MAAM,CAAC,GACzE,CACE;oBAEN,4DAAK,KAAK,EAAC,eAAe;wBACxB,wEAAiB;wBACjB,kEACE,KAAK,EAAC,uBAAuB,EAC7B,YAAY,EAAC,MAAM,EACnB,QAAQ,EAAE,CAAC,CAAc,EAAE,EAAE,CAAC,OAAO,CAAC,GAAG,CAAC,mBAAmB,EAAE,CAAC,CAAC,MAAM,CAAC,GACxE,CACE;oBAEN,4DAAK,KAAK,EAAC,eAAe;wBACxB,sEAAe;wBACf,uEACE,KAAK,EAAC,qBAAqB,EAC3B,YAAY,EAAC,OAAO,EACpB,QAAQ,EAAE,CAAC,CAAc,EAAE,EAAE,CAAC,OAAO,CAAC,GAAG,CAAC,iBAAiB,EAAE,CAAC,CAAC,MAAM,CAAC,GACtE,CACE;oBAGN,4DAAK,KAAK,EAAC,eAAe;wBACxB,6EAAsB;wBACtB,0EACE,KAAK,EAAC,mBAAmB,EACzB,YAAY,EAAC,YAAY,EACzB,QAAQ,EAAE,CAAC,CAAc,EAAE,EAAE,CAAC,OAAO,CAAC,GAAG,CAAC,eAAe,EAAE,CAAC,CAAC,MAAM,CAAC,GACpE,CACE;oBAEN,4DAAK,KAAK,EAAC,eAAe;wBACxB,6EAAsB;wBACtB,0EACE,KAAK,EAAC,mBAAmB,EACzB,YAAY,EAAC,OAAO,EACpB,QAAQ,EAAE,CAAC,CAAc,EAAE,EAAE,CAAC,OAAO,CAAC,GAAG,CAAC,eAAe,EAAE,CAAC,CAAC,MAAM,CAAC,GACpE,CACE;oBAEN,4DAAK,KAAK,EAAC,eAAe;wBACxB,iFAA0B;wBAC1B,8EACE,KAAK,EAAC,uBAAuB,EAC7B,YAAY,EAAC,kBAAkB,EAC/B,QAAQ,EAAE,CAAC,CAAc,EAAE,EAAE,CAAC,OAAO,CAAC,GAAG,CAAC,mBAAmB,EAAE,CAAC,CAAC,MAAM,CAAC,GACxE,CACE;oBAEN,4DAAK,KAAK,EAAC,eAAe;wBACxB,4EAAqB;wBACrB,qEACE,KAAK,EAAC,uBAAuB,EAC7B,OAAO,EAAE,IAAI,CAAC,eAAe,EAC7B,YAAY,EAAC,SAAS,EACtB,QAAQ,EAAE,CAAC,CAAc,EAAE,EAAE,CAAC,OAAO,CAAC,GAAG,CAAC,mBAAmB,EAAE,CAAC,CAAC,MAAM,CAAC,GACxE,CACE,CACF,CACE;YAGV,gEAAS,KAAK,EAAC,iBAAiB;gBAC9B,uFAAgC;gBAChC,6JAAqG;gBAErG,qEACE,YAAY,EAAE,IAAI,CAAC,gBAAgB,EACnC,gBAAgB,EAAE,IAAI,CAAC,gBAAgB,EACvC,QAAQ,EAAE,IAAI,CAAC,YAAY,EAC3B,aAAa,EAAE;wBACb,aAAa,EAAE,mBAAmB;wBAClC,gBAAgB,EAAE,IAAI;wBACtB,YAAY,EAAE,0BAA0B;wBACxC,YAAY,EAAE,OAAO;wBACrB,UAAU,EAAE,MAAM;wBAClB,QAAQ,EAAE,YAAY;wBACtB,QAAQ,EAAE,OAAO;wBACjB,YAAY,EAAE,SAAS;qBACxB;oBAED,4DAAK,KAAK,EAAC,WAAW;wBACpB,sEAAe,IAAI,EAAC,eAAe;4BACjC,mEACE,KAAK,EAAC,iBAAiB,EACvB,WAAW,EAAC,eAAe,EAC3B,QAAQ,EAAE,IAAI,GACd,CACY;wBAEhB,sEAAe,IAAI,EAAC,kBAAkB;4BACpC,sEACE,KAAK,EAAC,oBAAoB,EAC1B,WAAW,EAAC,iBAAiB,EAC7B,GAAG,EAAC,GAAG,EACP,GAAG,EAAC,KAAK,EACT,QAAQ,EAAE,IAAI,GACd,CACY;wBAEhB,sEAAe,IAAI,EAAC,cAAc;4BAChC,kEACE,KAAK,EAAC,gBAAgB,EACtB,WAAW,EAAC,sBAAsB,EAClC,QAAQ,EAAE,IAAI,EACd,OAAO,EAAE,CAAC,GACV,CACY;wBAEhB,sEAAe,IAAI,EAAC,cAAc;4BAChC,kEACE,KAAK,EAAC,6BAA6B,EACnC,QAAQ,EAAE,IAAI,GACd,CACY;wBAEhB,sEAAe,IAAI,EAAC,YAAY;4BAC9B,uEACE,KAAK,EAAC,sBAAsB,GAC5B,CACY;wBAEhB,sEAAe,IAAI,EAAC,UAAU;4BAC5B,0EACE,KAAK,EAAC,WAAW,EACjB,QAAQ,EAAE,IAAI,GACd,CACY;wBAEhB,sEAAe,IAAI,EAAC,UAAU;4BAC5B,0EACE,KAAK,EAAC,WAAW,GACjB,CACY;wBAEhB,sEAAe,IAAI,EAAC,cAAc;4BAChC,qEACE,KAAK,EAAC,eAAe,EACrB,OAAO,EAAE,IAAI,CAAC,eAAe,EAC7B,QAAQ,EAAE,IAAI,GACd,CACY;wBAEhB,sEAAe,IAAI,EAAC,WAAW;4BAC7B,oEACE,KAAK,EAAC,kBAAkB,EACxB,aAAa,EAAE,IAAI,GACnB,CACY,CACZ;oBAEN,4DAAK,KAAK,EAAC,cAAc;wBACvB,+DAAQ,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAC,eAAe,kBAAqB,CAC5D,CACO;gBAEf,4DAAK,KAAK,EAAC,aAAa;oBACtB,oFAA6B;oBAC7B,8DAAM,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,UAAU,EAAE,IAAI,EAAE,CAAC,CAAC,CAAO,CACjD,CACE;YAGV,gEAAS,KAAK,EAAC,iBAAiB;gBAC9B,mFAA4B;gBAC5B,qHAA6D;gBAE7D,4DAAK,KAAK,EAAC,YAAY;oBACrB,4DAAK,KAAK,EAAC,eAAe;wBACxB,yFAAkC;wBAClC,qEACE,KAAK,EAAC,uBAAuB,EAC7B,OAAO,EAAE,IAAI,CAAC,eAAe,EAC7B,WAAW,EAAE,IAAI,EACjB,YAAY,EAAC,iBAAiB,EAC9B,QAAQ,EAAE,CAAC,CAAc,EAAE,EAAE,CAAC,OAAO,CAAC,GAAG,CAAC,uBAAuB,EAAE,CAAC,CAAC,MAAM,CAAC,GAC5E,CACE;oBAEN,4DAAK,KAAK,EAAC,eAAe;wBACxB,kFAA2B;wBAC3B,qEACE,KAAK,EAAC,gBAAgB,EACtB,OAAO,EAAE,IAAI,CAAC,eAAe,EAC7B,KAAK,EAAE,IAAI,EACX,YAAY,EAAC,SAAS,EACtB,QAAQ,EAAE,CAAC,CAAc,EAAE,EAAE,CAAC,OAAO,CAAC,GAAG,CAAC,yBAAyB,EAAE,CAAC,CAAC,MAAM,CAAC,GAC9E,CACE;oBAEN,4DAAK,KAAK,EAAC,eAAe;wBACxB,kGAA2C;wBAC3C,oEACE,KAAK,EAAC,mBAAmB,EACzB,gBAAgB,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,KAAK,CAAC,EAC/C,aAAa,EAAE,KAAK,EACpB,iBAAiB,EAAC,iBAAiB,EACnC,QAAQ,EAAE,CAAC,CAAc,EAAE,EAAE,CAAC,OAAO,CAAC,GAAG,CAAC,uBAAuB,EAAE,CAAC,CAAC,MAAM,CAAC,GAC5E,CACE;oBAEN,4DAAK,KAAK,EAAC,eAAe;wBACxB,mFAA4B;wBAC5B,4DAAK,KAAK,EAAC,mBAAmB;4BAC5B,mEACE,KAAK,EAAC,qBAAqB,EAC3B,KAAK,EAAC,kBAAkB,EACxB,QAAQ,EAAE,IAAI,GACd;4BACF,kEACE,KAAK,EAAC,mBAAmB,EACzB,OAAO,EAAE,IAAI,EACb,QAAQ,EAAE,IAAI,GACd;4BACF,qEACE,KAAK,EAAC,mBAAmB,EACzB,OAAO,EAAE,IAAI,CAAC,eAAe,EAC7B,KAAK,EAAC,SAAS,EACf,QAAQ,EAAE,IAAI,GACd,CACE,CACF,CACF,CACE,CACN,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, State, h } from '@stencil/core';\n\n/**\n * A comprehensive example component showcasing all input components in different patterns:\n * 1. Controlled components - where the parent manages the state\n * 2. Uncontrolled components - where the component manages its own state\n * 3. Form-wrapped components - using stencil-form and stencil-field for validation\n *\n * This component demonstrates proper usage patterns and integration approaches\n * for all available input components including UDP selector.\n */\n@Component({\n  tag: 'inputs-example',\n  styleUrl: 'inputs-example.css',\n  shadow: true,\n})\nexport class InputsExample {\n\n\n  // State for controlled components\n  @State() controlledTextValue: string = '';\n  @State() controlledNumericValue: string = '';\n  @State() controlledTextAreaValue: string = '';\n  @State() controlledCheckboxValue: boolean = false;\n  @State() controlledToggleValue: boolean = false;\n  @State() controlledDateValue: string = '';\n  @State() controlledTimeValue: string = '';\n  @State() controlledDateTimeValue: string = '';\n  @State() controlledSelectorValue: string = '';\n  @State() controlledFileValue: File[] = [];\n\n  // State for form values\n  @State() formValues: any = {};\n\n  // Sample data for selector components\n  private selectorOptions = [\n    { value: 'option1', label: 'Option 1' },\n    { value: 'option2', label: 'Option 2' },\n    { value: 'option3', label: 'Option 3' },\n    { value: 'option4', label: 'Option 4' },\n  ];\n\n  // Event handlers for controlled components\n  // private handleControlledTextChange = (event: CustomEvent) => {\n  //   this.controlledTextValue = event.detail;\n  // };\n  private handleControlledNumericChange = (event: CustomEvent) => {\n    this.controlledNumericValue = event.detail;\n  };\n\n  private handleControlledCheckboxChange = (event: CustomEvent) => {\n    this.controlledCheckboxValue = event.detail === 'true';\n  };\n  private handleControlledToggleChange = (event: CustomEvent) => {\n    this.controlledToggleValue = event.detail === 'true';\n  };\n  private handleControlledDateChange = (event: CustomEvent) => {\n    console.log(event)\n    this.controlledDateValue = event.detail;\n  };\n  private handleControlledTimeChange = (event: CustomEvent) => {\n    this.controlledTimeValue = event.detail;\n  };\n  private handleControlledDateTimeChange = (event: CustomEvent) => {\n    this.controlledDateTimeValue = event.detail;\n  };\n  private handleControlledSelectorChange = (event: CustomEvent) => {\n    this.controlledSelectorValue = event.detail;\n  };\n  private handleControlledFileChange = (event: CustomEvent) => {\n    this.controlledFileValue = event.detail.files || [];\n  };\n\n  // Form event handlers\n  private handleFormSubmit = (values: any) => {\n    console.log('Form submitted with values:', values);\n    alert('Form submitted! Check console for values.');\n  };\n\n  private handleFormChange = (values: any) => {\n    this.formValues = { ...values };\n  };\n\n  private validateForm = (values: any) => {\n    const errors: any = {};\n\n    if (!values.formTextField) {\n      errors.formTextField = 'This field is required';\n    }\n\n    if (!values.formNumericField || parseFloat(values.formNumericField) < 0) {\n      errors.formNumericField = 'Must be a positive number';\n    }\n\n    if (!values.formTextArea) {\n      errors.formTextArea = 'Description is required';\n    }\n\n    if (!values.formCheckbox) {\n      errors.formCheckbox = 'You must accept the terms';\n    }\n\n    if (!values.formDate) {\n      errors.formDate = 'Please select a date';\n    }\n\n    if (!values.formSelector) {\n      errors.formSelector = 'Please make a selection';\n    }\n\n    return errors;\n  };\n\n  render() {\n    return (\n      <div class=\"inputs-example\">\n        <h1>Input Components Examples</h1>\n\n        {/* Controlled Components Section */}\n        <section class=\"example-section\">\n          <h2>Controlled Components</h2>\n          <p>Parent component manages state and passes values to child components.</p>\n\n          <div class=\"input-grid\">\n            <div class=\"input-example\">\n              <h3>Text Field</h3>\n              <text-field\n                label=\"Controlled Text Input\"\n                placeholder=\"Enter text...\"\n                value={this.controlledTextValue}\n              />\n              <p class=\"value-display\">Value: {this.controlledTextValue}</p>\n            </div>\n\n            <div class=\"input-example\">\n              <h3>Numeric Field</h3>\n              <numeric-field\n                label=\"Controlled Numeric Input\"\n                placeholder=\"Enter number...\"\n                value={this.controlledNumericValue}\n                min=\"0\"\n                max=\"100\"\n                step=\"1\"\n                onChange={this.handleControlledNumericChange}\n              />\n              <p class=\"value-display\">Value: {this.controlledNumericValue}</p>\n            </div>\n\n            <div class=\"input-example\">\n              <h3>Text Area</h3>\n              <text-area\n                label=\"Controlled Text Area\"\n                placeholder=\"Enter description...\"\n                value={this.controlledTextAreaValue}\n                minRows={3}\n                maxRows={6}\n              />\n              <p class=\"value-display\">Value: {this.controlledTextAreaValue}</p>\n            </div>\n\n            <div class=\"input-example\">\n              <h3>Checkbox</h3>\n              <check-box\n                label=\"Controlled Checkbox\"\n                checked={this.controlledCheckboxValue}\n                onChange={this.handleControlledCheckboxChange}\n              />\n              <p class=\"value-display\">Checked: {this.controlledCheckboxValue.toString()}</p>\n            </div>\n\n            <div class=\"input-example\">\n              <h3>Toggle</h3>\n              <stencil-toggle\n                label=\"Controlled Toggle\"\n                checked={this.controlledToggleValue}\n                onChange={this.handleControlledToggleChange}\n              />\n              <p class=\"value-display\">Toggled: {this.controlledToggleValue.toString()}</p>\n            </div>\n\n            <div class=\"input-example\">\n              <h3>Date Selector</h3>\n              <udp-date-selector\n                label=\"Controlled Date\"\n                value={this.controlledDateValue}\n                onChange={this.handleControlledDateChange}\n              />\n              <p class=\"value-display\">Date: {this.controlledDateValue}</p>\n            </div>\n\n            <div class=\"input-example\">\n              <h3>DateTime Selector</h3>\n              <udp-datetime-selector\n                label=\"Controlled DateTime\"\n                value={this.controlledDateTimeValue}\n                onChange={this.handleControlledDateTimeChange}\n              />\n              <p class=\"value-display\">DateTime: {this.controlledDateTimeValue}</p>\n            </div>\n\n            <div class=\"input-example\">\n              <h3>Time Selector</h3>\n              <udp-time-selector\n                label=\"Controlled Time\"\n                value={this.controlledTimeValue}\n                onChange={this.handleControlledTimeChange}\n              />\n              <p class=\"value-display\">Time: {this.controlledTimeValue}</p>\n            </div>\n\n            <div class=\"input-example\">\n              <h3>UDP Selector</h3>\n              <udp-selector\n                label=\"Controlled Selector\"\n                options={this.selectorOptions}\n                value={this.controlledSelectorValue}\n                onChange={this.handleControlledSelectorChange}\n              />\n              <p class=\"value-display\">Selected: {this.controlledSelectorValue}</p>\n            </div>\n\n            <div class=\"input-example\">\n              <h3>File Upload</h3>\n              <file-upload\n                label=\"Controlled File Upload\"\n                allowMultiple={true}\n                onChange={this.handleControlledFileChange}\n              />\n              <p class=\"value-display\">Files: {this.controlledFileValue.length} selected</p>\n            </div>\n          </div>\n        </section>\n\n        {/* Uncontrolled Components Section */}\n        <section class=\"example-section\">\n          <h2>Uncontrolled Components</h2>\n          <p>Components manage their own state with initial values.</p>\n\n          <div class=\"input-grid\">\n            <div class=\"input-example\">\n              <h3>Text Field</h3>\n              <text-field\n                label=\"Uncontrolled Text Input\"\n                placeholder=\"Enter text...\"\n                initialValue=\"Initial text value\"\n                onChange={(e: CustomEvent) => console.log('Text changed:', e.detail)}\n              />\n            </div>\n\n            <div class=\"input-example\">\n              <h3>Numeric Field</h3>\n              <numeric-field\n                label=\"Uncontrolled Numeric Input\"\n                placeholder=\"Enter number...\"\n                initialValue=\"42\"\n                min=\"0\"\n                max=\"100\"\n                onChange={(e: CustomEvent) => console.log('Number changed:', e.detail)}\n              />\n            </div>\n\n            <div class=\"input-example\">\n              <h3>Text Area</h3>\n              <text-area\n                label=\"Uncontrolled Text Area\"\n                placeholder=\"Enter description...\"\n                initialValue=\"Initial description text\"\n                minRows={3}\n                onChange={(e: CustomEvent) => console.log('Text area changed:', e.detail)}\n              />\n            </div>\n\n            <div class=\"input-example\">\n              <h3>Checkbox</h3>\n              <check-box\n                label=\"Uncontrolled Checkbox\"\n                initialValue=\"true\"\n                onChange={(e: CustomEvent) => console.log('Checkbox changed:', e.detail)}\n              />\n            </div>\n\n            <div class=\"input-example\">\n              <h3>Toggle</h3>\n              <stencil-toggle\n                label=\"Uncontrolled Toggle\"\n                initialValue=\"false\"\n                onChange={(e: CustomEvent) => console.log('Toggle changed:', e.detail)}\n              />\n            </div>\n\n\n            <div class=\"input-example\">\n              <h3>Date Selector</h3>\n              <udp-date-selector\n                label=\"Uncontrolled Date\"\n                initialValue=\"2024-01-15\"\n                onChange={(e: CustomEvent) => console.log('Date changed:', e.detail)}\n              />\n            </div>\n\n            <div class=\"input-example\">\n              <h3>Time Selector</h3>\n              <udp-time-selector\n                label=\"Uncontrolled Time\"\n                initialValue=\"14:30\"\n                onChange={(e: CustomEvent) => console.log('Time changed:', e.detail)}\n              />\n            </div>\n\n            <div class=\"input-example\">\n              <h3>DateTime Selector</h3>\n              <udp-datetime-selector\n                label=\"Uncontrolled DateTime\"\n                initialValue=\"2024-01-15T14:30\"\n                onChange={(e: CustomEvent) => console.log('DateTime changed:', e.detail)}\n              />\n            </div>\n\n            <div class=\"input-example\">\n              <h3>UDP Selector</h3>\n              <udp-selector\n                label=\"Uncontrolled Selector\"\n                options={this.selectorOptions}\n                initialValue=\"option2\"\n                onChange={(e: CustomEvent) => console.log('Selector changed:', e.detail)}\n              />\n            </div>\n          </div>\n        </section>\n\n        {/* Form-wrapped Components Section */}\n        <section class=\"example-section\">\n          <h2>Form-wrapped Components</h2>\n          <p>Components integrated with stencil-form and stencil-field for validation and state management.</p>\n\n          <stencil-form\n            handleSubmit={this.handleFormSubmit}\n            handleFormChange={this.handleFormChange}\n            validate={this.validateForm}\n            initialValues={{\n              formTextField: 'Initial form text',\n              formNumericField: '25',\n              formTextArea: 'Initial form description',\n              formCheckbox: 'false',\n              formToggle: 'true',\n              formDate: '2024-02-01',\n              formTime: '09:00',\n              formSelector: 'option1'\n            }}\n          >\n            <div class=\"form-grid\">\n              <stencil-field name=\"formTextField\">\n                <text-field\n                  label=\"Form Text Field\"\n                  placeholder=\"Enter text...\"\n                  required={true}\n                />\n              </stencil-field>\n\n              <stencil-field name=\"formNumericField\">\n                <numeric-field\n                  label=\"Form Numeric Field\"\n                  placeholder=\"Enter number...\"\n                  min=\"0\"\n                  max=\"100\"\n                  required={true}\n                />\n              </stencil-field>\n\n              <stencil-field name=\"formTextArea\">\n                <text-area\n                  label=\"Form Text Area\"\n                  placeholder=\"Enter description...\"\n                  required={true}\n                  minRows={3}\n                />\n              </stencil-field>\n\n              <stencil-field name=\"formCheckbox\">\n                <check-box\n                  label=\"Accept Terms and Conditions\"\n                  required={true}\n                />\n              </stencil-field>\n\n              <stencil-field name=\"formToggle\">\n                <stencil-toggle\n                  label=\"Enable Notifications\"\n                />\n              </stencil-field>\n\n              <stencil-field name=\"formDate\">\n                <udp-date-selector\n                  label=\"Form Date\"\n                  required={true}\n                />\n              </stencil-field>\n\n              <stencil-field name=\"formTime\">\n                <udp-time-selector\n                  label=\"Form Time\"\n                />\n              </stencil-field>\n\n              <stencil-field name=\"formSelector\">\n                <udp-selector\n                  label=\"Form Selector\"\n                  options={this.selectorOptions}\n                  required={true}\n                />\n              </stencil-field>\n\n              <stencil-field name=\"formFiles\">\n                <file-upload\n                  label=\"Form File Upload\"\n                  allowMultiple={true}\n                />\n              </stencil-field>\n            </div>\n\n            <div class=\"form-actions\">\n              <button type=\"submit\" class=\"submit-button\">Submit Form</button>\n            </div>\n          </stencil-form>\n\n          <div class=\"form-values\">\n            <h3>Current Form Values:</h3>\n            <pre>{JSON.stringify(this.formValues, null, 2)}</pre>\n          </div>\n        </section>\n\n        {/* Additional Examples Section */}\n        <section class=\"example-section\">\n          <h2>Additional Examples</h2>\n          <p>More complex configurations and specialized use cases.</p>\n\n          <div class=\"input-grid\">\n            <div class=\"input-example\">\n              <h3>Multi-Select UDP Selector</h3>\n              <udp-selector\n                label=\"Multi-Select Selector\"\n                options={this.selectorOptions}\n                multiSelect={true}\n                initialValue=\"option1,option3\"\n                onChange={(e: CustomEvent) => console.log('Multi-select changed:', e.detail)}\n              />\n            </div>\n\n            <div class=\"input-example\">\n              <h3>Large UDP Selector</h3>\n              <udp-selector\n                label=\"Large Selector\"\n                options={this.selectorOptions}\n                large={true}\n                initialValue=\"option2\"\n                onChange={(e: CustomEvent) => console.log('Large selector changed:', e.detail)}\n              />\n            </div>\n\n            <div class=\"input-example\">\n              <h3>File Upload with Type Restrictions</h3>\n              <file-upload\n                label=\"Image Upload Only\"\n                allowedFileTypes={['jpg', 'jpeg', 'png', 'gif']}\n                allowMultiple={false}\n                browseFileMessage=\"Select an Image\"\n                onChange={(e: CustomEvent) => console.log('Image upload changed:', e.detail)}\n              />\n            </div>\n\n            <div class=\"input-example\">\n              <h3>Disabled Components</h3>\n              <div class=\"disabled-examples\">\n                <text-field\n                  label=\"Disabled Text Field\"\n                  value=\"Cannot edit this\"\n                  disabled={true}\n                />\n                <check-box\n                  label=\"Disabled Checkbox\"\n                  checked={true}\n                  disabled={true}\n                />\n                <udp-selector\n                  label=\"Disabled Selector\"\n                  options={this.selectorOptions}\n                  value=\"option1\"\n                  disabled={true}\n                />\n              </div>\n            </div>\n          </div>\n        </section>\n      </div>\n    );\n  }\n}\n"]}

package/dist/collection/global/ag-grid.js

@@ -0,0 +1,20 @@
+let agGridLibraryPromise;
+async function loadAgGridLibrary() {
+    try {
+        window['agGrid'] = await import('ag-grid-enterprise');
+    }
+    catch (e) {
+        throw new Error('Failed to load ag-Grid script:\n' + e.message);
+    }
+}
+export async function lazySetupAgGridLibrary({ LicenseKey }) {
+    // Lazy-load the ag-grid library only once
+    if (!agGridLibraryPromise)
+        agGridLibraryPromise = loadAgGridLibrary();
+    await agGridLibraryPromise;
+    // Set the ag-Grid license key
+    if (window['agGrid'] && window['agGrid'].LicenseManager) {
+        window['agGrid'].LicenseManager.setLicenseKey(LicenseKey);
+    }
+}
+//# sourceMappingURL=ag-grid.js.map

package/dist/collection/global/ag-grid.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ag-grid.js","sourceRoot":"","sources":["../../src/global/ag-grid.ts"],"names":[],"mappings":"AAAA,IAAI,oBAAmC,CAAC;AAExC,KAAK,UAAU,iBAAiB;IAC9B,IAAI,CAAC;QACH,MAAM,CAAC,QAAQ,CAAC,GAAG,MAAM,MAAM,CAAC,oBAAoB,CAAC,CAAC;IACxD,CAAC;IAAC,OAAO,CAAC,EAAE,CAAC;QACX,MAAM,IAAI,KAAK,CAAC,kCAAkC,GAAG,CAAC,CAAC,OAAO,CAAC,CAAC;IAClE,CAAC;AACH,CAAC;AAED,MAAM,CAAC,KAAK,UAAU,sBAAsB,CAAC,EAAE,UAAU,EAA0B;IACjF,0CAA0C;IAC1C,IAAI,CAAC,oBAAoB;QAAE,oBAAoB,GAAG,iBAAiB,EAAE,CAAC;IACtE,MAAM,oBAAoB,CAAC;IAE3B,8BAA8B;IAC9B,IAAI,MAAM,CAAC,QAAQ,CAAC,IAAI,MAAM,CAAC,QAAQ,CAAC,CAAC,cAAc,EAAE,CAAC;QACxD,MAAM,CAAC,QAAQ,CAAC,CAAC,cAAc,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC;IAC5D,CAAC;AACH,CAAC","sourcesContent":["let agGridLibraryPromise: Promise<void>;\n\nasync function loadAgGridLibrary() {\n  try {\n    window['agGrid'] = await import('ag-grid-enterprise');\n  } catch (e) {\n    throw new Error('Failed to load ag-Grid script:\\n' + e.message);\n  }\n}\n\nexport async function lazySetupAgGridLibrary({ LicenseKey }: { LicenseKey: string }) {\n  // Lazy-load the ag-grid library only once\n  if (!agGridLibraryPromise) agGridLibraryPromise = loadAgGridLibrary();\n  await agGridLibraryPromise;\n\n  // Set the ag-Grid license key\n  if (window['agGrid'] && window['agGrid'].LicenseManager) {\n    window['agGrid'].LicenseManager.setLicenseKey(LicenseKey);\n  }\n}\n"]}

package/dist/collection/global/app.js

@@ -0,0 +1,11 @@
+// export const environment = {
+//     baseURL: 'https://az-api-unity-gateway-dev.azurewebsites.net/IntegrationService/api/v1',
+//     baseURLV2: 'https://az-api-unity-gateway-dev.azurewebsites.net/TenantService/api/v2',
+//     baseURLINT: 'https://az-api-unity-gateway-dev.azurewebsites.net/IntegrationService/api/v2'
+// };
+export const environment = {
+    baseURL: 'https://gateway.unitydev.ca/IntegrationService/api/v1',
+    baseURLV2: 'https://gateway.unitydev.ca/TenantService/api/v2',
+    baseURLINT: 'https://gateway.unitydev.ca/IntegrationService/api/v2'
+};
+//# sourceMappingURL=app.js.map

package/dist/collection/global/app.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"app.js","sourceRoot":"","sources":["../../src/global/app.ts"],"names":[],"mappings":"AACA,+BAA+B;AAC/B,+FAA+F;AAC/F,4FAA4F;AAC5F,iGAAiG;AACjG,KAAK;AAEL,MAAM,CAAC,MAAM,WAAW,GAAG;IACvB,OAAO,EAAE,uDAAuD;IAChE,SAAS,EAAE,kDAAkD;IAC7D,UAAU,EAAE,uDAAuD;CACtE,CAAC","sourcesContent":["\n// export const environment = {\n//     baseURL: 'https://az-api-unity-gateway-dev.azurewebsites.net/IntegrationService/api/v1',\n//     baseURLV2: 'https://az-api-unity-gateway-dev.azurewebsites.net/TenantService/api/v2',\n//     baseURLINT: 'https://az-api-unity-gateway-dev.azurewebsites.net/IntegrationService/api/v2'\n// };\n\nexport const environment = {\n    baseURL: 'https://gateway.unitydev.ca/IntegrationService/api/v1',\n    baseURLV2: 'https://gateway.unitydev.ca/TenantService/api/v2',\n    baseURLINT: 'https://gateway.unitydev.ca/IntegrationService/api/v2'\n};\n"]}

package/dist/collection/global/configService.js

@@ -0,0 +1,37 @@
+var _a;
+export class ConfigService {
+    static set config(config) {
+        console.log('Current config:', this._config);
+        console.log('New config:', config);
+        this._config = Object.assign(Object.assign({}, this._config), config);
+        console.log('Updated config:', this._config);
+        this._isConfigSet = true;
+        this._resolveConfigPromise();
+    }
+    static get config() {
+        return this._config;
+    }
+    static async waitForConfig() {
+        if (!this._isConfigSet) {
+            await this._configPromise;
+        }
+    }
+}
+_a = ConfigService;
+ConfigService._config = {
+    UNITY_API_DOMAIN: 'https://gateway.unitydev.ca',
+    // MINDSCOPE_API_DOMAIN: 'https://unitystart-mindscope-api.unitydev.ca',
+    HOST_API_DOMAIN: '',
+    INTEGRATION_V1_API_BASE: '/IntegrationService/api/v1',
+    INTEGRATION_V2_API_BASE: '/IntegrationService/api/v2',
+    SECURITY_SERVICE_V1_API_BASE: '/SecurityService/api/v1',
+    TENANT_V2_API_BASE: '/TenantService/api/v2',
+    V1_API_BASE: '/api/v1',
+};
+ConfigService._isConfigSet = false;
+(() => {
+    _a._configPromise = new Promise((resolve) => {
+        _a._resolveConfigPromise = resolve;
+    });
+})();
+//# sourceMappingURL=configService.js.map

package/dist/collection/global/configService.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"configService.js","sourceRoot":"","sources":["../../src/global/configService.ts"],"names":[],"mappings":";AAAA,MAAM,OAAO,aAAa;IAsBxB,MAAM,KAAK,MAAM,CAAC,MAQjB;QACC,OAAO,CAAC,GAAG,CAAC,iBAAiB,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC;QAC7C,OAAO,CAAC,GAAG,CAAC,aAAa,EAAE,MAAM,CAAC,CAAC;QACnC,IAAI,CAAC,OAAO,mCAAQ,IAAI,CAAC,OAAO,GAAK,MAAM,CAAE,CAAC;QAC9C,OAAO,CAAC,GAAG,CAAC,iBAAiB,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC;QAC7C,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC;QACzB,IAAI,CAAC,qBAAqB,EAAE,CAAC;IAC/B,CAAC;IAED,MAAM,KAAK,MAAM;QACf,OAAO,IAAI,CAAC,OAAO,CAAC;IACtB,CAAC;IAED,MAAM,CAAC,KAAK,CAAC,aAAa;QACxB,IAAI,CAAC,IAAI,CAAC,YAAY,EAAE,CAAC;YACvB,MAAM,IAAI,CAAC,cAAc,CAAC;QAC5B,CAAC;IACH,CAAC;;;AA9Cc,qBAAO,GAAG;IACvB,gBAAgB,EAAE,6BAA6B;IAC/C,wEAAwE;IACxE,eAAe,EAAE,EAAE;IACnB,uBAAuB,EAAE,4BAA4B;IACrD,uBAAuB,EAAE,4BAA4B;IACrD,4BAA4B,EAAE,yBAAyB;IACvD,kBAAkB,EAAE,uBAAuB;IAC3C,WAAW,EAAE,SAAS;CACvB,AATqB,CASpB;AAEa,0BAAY,GAAG,KAAK,AAAR,CAAS;AAIpC;IACE,GAAK,cAAc,GAAG,IAAI,OAAO,CAAO,CAAC,OAAO,EAAE,EAAE;QAClD,GAAK,qBAAqB,GAAG,OAAO,CAAC;IACvC,CAAC,CAAC,CAAC;AACL,CAAC,GAAA,CAAA","sourcesContent":["export class ConfigService {\n  private static _config = {\n    UNITY_API_DOMAIN: 'https://gateway.unitydev.ca',\n    // MINDSCOPE_API_DOMAIN: 'https://unitystart-mindscope-api.unitydev.ca',\n    HOST_API_DOMAIN: '',\n    INTEGRATION_V1_API_BASE: '/IntegrationService/api/v1',\n    INTEGRATION_V2_API_BASE: '/IntegrationService/api/v2',\n    SECURITY_SERVICE_V1_API_BASE: '/SecurityService/api/v1',\n    TENANT_V2_API_BASE: '/TenantService/api/v2',\n    V1_API_BASE: '/api/v1',\n  };\n\n  private static _isConfigSet = false;\n  private static _configPromise: Promise<void>;\n  private static _resolveConfigPromise: () => void;\n\n  static {\n    this._configPromise = new Promise<void>((resolve) => {\n      this._resolveConfigPromise = resolve;\n    });\n  }\n\n  static set config(config: { \n    UNITY_API_DOMAIN?: string; \n    INTEGRATION_V1_API_BASE?: string; \n    INTEGRATION_V2_API_BASE?: string;\n    SECURITY_SERVICE_V1_API_BASE?: string;\n    TENANT_V2_API_BASE?: string;\n    HOST_API_DOMAIN?: string;\n    V1_API_BASE?: string;\n  }) {\n    console.log('Current config:', this._config);\n    console.log('New config:', config);\n    this._config = { ...this._config, ...config };\n    console.log('Updated config:', this._config);\n    this._isConfigSet = true;\n    this._resolveConfigPromise();\n  }\n\n  static get config() {\n    return this._config;\n  }\n\n  static async waitForConfig() {\n    if (!this._isConfigSet) {\n      await this._configPromise;\n    }\n  }\n}\n"]}

package/dist/collection/global/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

package/dist/collection/global/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../src/global/types.ts"],"names":[],"mappings":"","sourcesContent":["export type Nullable<T> = T | null | undefined;\nexport type Guid = string; // a Guid is represented as a string in ts, but better to declare it as a Guid rather than string\n\nexport interface UdpObject {\n  businessObjectKey?: string;\n  udpTags?: UdpTag[];\n}\n\nexport interface UdpTag {\n  businessObjectKey: string;\n  tagId: Guid;\n  entityBusinessKey: string;\n  udpTagAssociationUdpTag: any; // This can be typed more specifically based on your needs\n}\n\n/**\n * Represents a file stored in UDP Drive system\n * Extends the native File interface with UDP-specific metadata\n */\nexport interface UdpDriveFile extends File {\n  /** Unique identifier for the drive file */\n  driveFileId: Guid;\n  /** Tenant identifier */\n  tenantId: Guid;\n  /** Product identifier */\n  productId: number;\n  /** Path/entity category for the file */\n  path: string;\n  /** Whether the file is deleted */\n  isDeleted?: boolean;\n  /** External object identifier */\n  externalObjectId?: Guid;\n  /** File extension */\n  extension: string;\n  /** Direct link to the file (if available) */\n  link?: string;\n  /** Last updated timestamp */\n  lastUpdated?: Date;\n  /** Whether the file is archived */\n  isArchived?: boolean;\n}\n"]}

package/dist/collection/index.js

@@ -0,0 +1,14 @@
+export * from './components';
+export { setTheme } from './theme/theme-utils';
+export * from './udp-utilities/api/api-services';
+export * from './udp-utilities/api-udp/get-user';
+export * from './udp-utilities/api-udp/apiMutate';
+export * from './udp-utilities/api-udp/udp-fetch';
+export * from './udp-utilities/grid/convertToAgGridColumns';
+export * from './udp-utilities/grid/data-converters/transformSearchData';
+export { SearchBuilder, SearchUtilities, LogicalSearchOperator, SearchGroupingType, SearchOperators as SqlFilterOperators } from './udp-utilities/search';
+export * from './store/catalog-store';
+export * from './udp-utilities/api-config';
+export { useMatchBreakpoint } from './udp-utilities/layout/breakpoints/useMatchBreakpoint';
+// export { initializeUrls } from './udp-utilities/api-udp/apiUtils'
+//# sourceMappingURL=index.js.map

package/dist/collection/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC;AAC7B,OAAO,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAA;AAC9C,cAAc,kCAAkC,CAAA;AAChD,cAAc,kCAAkC,CAAA;AAChD,cAAc,mCAAmC,CAAA;AACjD,cAAc,mCAAmC,CAAA;AACjD,cAAc,6CAA6C,CAAA;AAC3D,cAAc,0DAA0D,CAAA;AACxE,OAAO,EACL,aAAa,EACb,eAAe,EACf,qBAAqB,EACrB,kBAAkB,EAClB,eAAe,IAAI,kBAAkB,EACtC,MAAM,wBAAwB,CAAA;AAQ/B,cAAc,uBAAuB,CAAA;AACrC,cAAc,4BAA4B,CAAA;AAC1C,OAAO,EAAE,kBAAkB,EAAE,MAAM,uDAAuD,CAAA;AAE1F,oEAAoE","sourcesContent":["export * from './components';\nexport { setTheme } from './theme/theme-utils'\nexport * from './udp-utilities/api/api-services'\nexport * from './udp-utilities/api-udp/get-user'\nexport * from './udp-utilities/api-udp/apiMutate'\nexport * from './udp-utilities/api-udp/udp-fetch'\nexport * from './udp-utilities/grid/convertToAgGridColumns'\nexport * from './udp-utilities/grid/data-converters/transformSearchData'\nexport {\n  SearchBuilder,\n  SearchUtilities,\n  LogicalSearchOperator,\n  SearchGroupingType,\n  SearchOperators as SqlFilterOperators\n} from './udp-utilities/search'\nexport type {\n  Search as SearchInterface,\n  SearchFilters,\n  SearchFilterGroups,\n  GroupOperation,\n  OrderElement\n} from './udp-utilities/search'\nexport * from './store/catalog-store'\nexport * from './udp-utilities/api-config'\nexport { useMatchBreakpoint } from './udp-utilities/layout/breakpoints/useMatchBreakpoint'\n\n// export { initializeUrls } from './udp-utilities/api-udp/apiUtils'\n"]}

package/dist/collection/page-renderer/page-renderer.js

@@ -0,0 +1,159 @@
+import { h } from "@stencil/core";
+export class PageRenderer {
+    renderUnknownComponent(componentName) {
+        // Log a detailed error message for developers in the console
+        console.error(`Error rendering ${componentName}. No matching component found. Please check your component mappings and passed properties.`);
+        // Render a user-friendly message
+        return (h("div", { style: { border: '1px solid #ff6a00', padding: '10px', margin: '10px 0', borderRadius: '5px', color: '#ff6a00', backgroundColor: '#fff3e0' } }, h("unity-typography", null, "Content currently unavailable ( ", h("span", { style: { fontWeight: '700' } }, componentName), " ). We're working to make this available to you soon!")));
+    }
+    render() {
+        return (h("div", { key: '53b8b91fa931d81d8f92314f5a921b7e58212119' }, this.pageData.map((data) => {
+            // Prepare properties from metaData, ensuring any existing keys that
+            // match your direct props are overridden.
+            const gridProps = Object.assign(Object.assign({}, data.properties), {
+                // Directly set/override specific props afterwards
+                'access-token': this.accessToken, tenantId: this.tenantId,
+                //productId: this.productId, This is for the product id. Currently this will be set in the meta data but can be set here as well
+                //gridId: this.gridId, This is for the grid id. Currently this will be set in the meta data but can be set here as well
+                userId: this.userId
+            });
+            switch (data.componentName) {
+                case 'AmbientGrid':
+                    return h("ambient-template-grid", Object.assign({ key: data.id }, gridProps));
+                default:
+                    return this.renderUnknownComponent(data.componentName);
+            }
+        })));
+    }
+    static get is() { return "page-renderer"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["page-renderer.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["page-renderer.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "pageData": {
+                "type": "any",
+                "attribute": "page-data",
+                "mutable": false,
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "accessToken": {
+                "type": "string",
+                "attribute": "access-token",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "tenantId": {
+                "type": "string",
+                "attribute": "tenant-id",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "productId": {
+                "type": "string",
+                "attribute": "product-id",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "gridId": {
+                "type": "string",
+                "attribute": "grid-id",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "userId": {
+                "type": "string",
+                "attribute": "user-id",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            }
+        };
+    }
+}
+//# sourceMappingURL=page-renderer.js.map

package/dist/collection/page-renderer/page-renderer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"page-renderer.js","sourceRoot":"","sources":["../../src/page-renderer/page-renderer.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAOnD,MAAM,OAAO,YAAY;IAWf,sBAAsB,CAAC,aAAqB;QAClD,6DAA6D;QAC7D,OAAO,CAAC,KAAK,CAAC,mBAAmB,aAAa,4FAA4F,CAAC,CAAC;QAE5I,iCAAiC;QACjC,OAAO,CACL,WAAK,KAAK,EAAE,EAAE,MAAM,EAAE,mBAAmB,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,YAAY,EAAE,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,eAAe,EAAE,SAAS,EAAE;YAC/I;;gBAAkD,YAAM,KAAK,EAAE,EAAC,UAAU,EAAE,KAAK,EAAC,IAAI,aAAa,CAAQ;wEAAwE,CAC/K,CACP,CAAC;IACJ,CAAC;IAED,MAAM;QACJ,OAAO,CACL,8DACG,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE;YAC1B,oEAAoE;YACpE,0CAA0C;YAC1C,MAAM,SAAS,mCACV,IAAI,CAAC,UAAU;gBAClB,kDAAkD;gBAClD,cAAc,EAAE,IAAI,CAAC,WAAW,EAChC,QAAQ,EAAE,IAAI,CAAC,QAAQ;gBACvB,gIAAgI;gBAChI,uHAAuH;gBACvH,MAAM,EAAE,IAAI,CAAC,MAAM,GACpB,CAAC;YAEF,QAAQ,IAAI,CAAC,aAAa,EAAE,CAAC;gBAC3B,KAAK,aAAa;oBAChB,OAAO,2CAAuB,GAAG,EAAE,IAAI,CAAC,EAAE,IAAM,SAAS,EAA0B,CAAC;gBACtF;oBACI,OAAO,IAAI,CAAC,sBAAsB,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;YAC7D,CAAC;QACH,CAAC,CAAC,CACE,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Prop, h } from '@stencil/core';\n\n@Component({\n  tag: 'page-renderer',\n  styleUrl: 'page-renderer.css',\n  shadow: true,\n})\nexport class PageRenderer {\n  @Prop() pageData: any;\n  @Prop() accessToken: string;\n  @Prop() tenantId: string;\n  @Prop() productId: string;\n  @Prop() gridId: string;\n\n  @Prop() userId: string;\n\n\n\n  private renderUnknownComponent(componentName: string) {\n    // Log a detailed error message for developers in the console\n    console.error(`Error rendering ${componentName}. No matching component found. Please check your component mappings and passed properties.`);\n\n    // Render a user-friendly message\n    return (\n      <div style={{ border: '1px solid #ff6a00', padding: '10px', margin: '10px 0', borderRadius: '5px', color: '#ff6a00', backgroundColor: '#fff3e0' }}>\n        <unity-typography>Content currently unavailable ( <span style={{fontWeight: '700'}} >{componentName}</span> ). We're working to make this available to you soon!</unity-typography>\n      </div>\n    );\n  }\n\n  render() {\n    return (\n      <div>\n        {this.pageData.map((data) => {\n          // Prepare properties from metaData, ensuring any existing keys that\n          // match your direct props are overridden.\n          const gridProps = {\n            ...data.properties, // Spread metaData properties first\n            // Directly set/override specific props afterwards\n            'access-token': this.accessToken, // Ensure custom elements use kebab-case for attributes\n            tenantId: this.tenantId,\n            //productId: this.productId, This is for the product id. Currently this will be set in the meta data but can be set here as well\n            //gridId: this.gridId, This is for the grid id. Currently this will be set in the meta data but can be set here as well\n            userId: this.userId,\n          };\n\n          switch (data.componentName) {\n            case 'AmbientGrid':\n              return <ambient-template-grid key={data.id} {...gridProps}></ambient-template-grid>;\n            default:\n                return this.renderUnknownComponent(data.componentName);\n          }\n        })}\n      </div>\n    );\n  }\n}\n"]}

package/dist/collection/store/catalog-store.js

@@ -0,0 +1,27 @@
+// src/global/state.ts
+import { createStore } from "@stencil/store";
+import { getApiCatalogById } from "../udp-utilities/api-udp/apiUtils";
+const { state, onChange } = createStore({
+    catalogData: null,
+    isLoadingCatalogData: false,
+    hotListActive: ''
+});
+async function loadCatalogData(apiCatalogId) {
+    state.isLoadingCatalogData = true;
+    try {
+        // const apiCatalogData = localStorage.getItem('apiCatalogId') || await getApiCatalogById(apiCatalogId, accessToken);
+        const apiCatalogData = await getApiCatalogById(apiCatalogId);
+        console.log('store state was');
+        state.catalogData = apiCatalogData;
+    }
+    catch (error) {
+        console.error('Error loading catalog data:', error);
+        state.catalogData = null; // Reset the catalog data on error
+    }
+    finally {
+        state.isLoadingCatalogData = false;
+    }
+}
+//export default state;
+export { state, onChange, loadCatalogData };
+//# sourceMappingURL=catalog-store.js.map

package/dist/collection/store/catalog-store.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"catalog-store.js","sourceRoot":"","sources":["../../src/store/catalog-store.ts"],"names":[],"mappings":"AAAA,sBAAsB;AACtB,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAC7C,OAAO,EAAE,iBAAiB,EAAE,MAAM,mCAAmC,CAAC;AAEtE,MAAM,EAAE,KAAK,EAAE,QAAQ,EAAE,GAAG,WAAW,CAAC;IACtC,WAAW,EAAE,IAAI;IACjB,oBAAoB,EAAE,KAAK;IAC3B,aAAa,EAAE,EAAE;CAClB,CAAC,CAAC;AAEH,KAAK,UAAU,eAAe,CAAC,YAAY;IACzC,KAAK,CAAC,oBAAoB,GAAG,IAAI,CAAC;IAElC,IAAI,CAAC;QACH,qHAAqH;QACrH,MAAM,cAAc,GAAG,MAAM,iBAAiB,CAAC,YAAY,CAAC,CAAC;QAC7D,OAAO,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAA;QAC9B,KAAK,CAAC,WAAW,GAAG,cAAc,CAAC;IACrC,CAAC;IAAC,OAAO,KAAK,EAAE,CAAC;QACf,OAAO,CAAC,KAAK,CAAC,6BAA6B,EAAE,KAAK,CAAC,CAAC;QACpD,KAAK,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC,kCAAkC;IAC9D,CAAC;YAAS,CAAC;QACT,KAAK,CAAC,oBAAoB,GAAG,KAAK,CAAC;IACrC,CAAC;AACH,CAAC;AAED,uBAAuB;AACvB,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,eAAe,EAAE,CAAC","sourcesContent":["// src/global/state.ts\nimport { createStore } from '@stencil/store';\nimport { getApiCatalogById } from '../udp-utilities/api-udp/apiUtils';\n\nconst { state, onChange } = createStore({\n  catalogData: null,\n  isLoadingCatalogData: false,\n  hotListActive: ''\n});\n\nasync function loadCatalogData(apiCatalogId) {\n  state.isLoadingCatalogData = true;\n\n  try {\n    // const apiCatalogData = localStorage.getItem('apiCatalogId') || await getApiCatalogById(apiCatalogId, accessToken);\n    const apiCatalogData = await getApiCatalogById(apiCatalogId);\n    console.log('store state was')\n    state.catalogData = apiCatalogData;\n  } catch (error) {\n    console.error('Error loading catalog data:', error);\n    state.catalogData = null; // Reset the catalog data on error\n  } finally {\n    state.isLoadingCatalogData = false;\n  }\n}\n\n//export default state;\nexport { state, onChange, loadCatalogData };\n"]}

package/dist/collection/store/internal.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=internal.js.map

package/dist/collection/store/internal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"internal.js","sourceRoot":"","sources":["../../src/store/internal.ts"],"names":[],"mappings":"","sourcesContent":["\nimport { User } from \"../udp-utilities/user\";\n\nexport type UserAction = { type: 'SET_USER'; payload: User | null };\nexport type AccessTokenAction = { type: 'SET_ACCESS_TOKEN'; payload: string | null };\nexport type UserActionTypes = UserAction | AccessTokenAction;\n"]}

package/dist/collection/store/lookups-store.js

@@ -0,0 +1,14 @@
+import { createStore } from "@stencil/store";
+const { state, onChange } = createStore({
+    lookupsDataMap: null,
+});
+function setLookupsDataMap(lookupsDataMap, replace = false) {
+    if (replace) {
+        state.lookupsDataMap = lookupsDataMap;
+    }
+    else {
+        state.lookupsDataMap = Object.assign(Object.assign({}, state.lookupsDataMap), lookupsDataMap);
+    }
+}
+export { state, onChange, setLookupsDataMap };
+//# sourceMappingURL=lookups-store.js.map

package/dist/collection/store/lookups-store.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"lookups-store.js","sourceRoot":"","sources":["../../src/store/lookups-store.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAE7C,MAAM,EAAE,KAAK,EAAE,QAAQ,EAAE,GAAG,WAAW,CAAC;IACtC,cAAc,EAAE,IAAI;CACrB,CAAC,CAAC;AAEH,SAAS,iBAAiB,CAAC,cAAc,EAAE,OAAO,GAAG,KAAK;IACxD,IAAI,OAAO,EAAE,CAAC;QACZ,KAAK,CAAC,cAAc,GAAG,cAAc,CAAC;IACxC,CAAC;SAAM,CAAC;QACN,KAAK,CAAC,cAAc,mCAAQ,KAAK,CAAC,cAAc,GAAK,cAAc,CAAE,CAAC;IACxE,CAAC;AACH,CAAC;AAED,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,iBAAiB,EAAE,CAAC","sourcesContent":["import { createStore } from '@stencil/store';\n\nconst { state, onChange } = createStore({\n  lookupsDataMap: null,\n});\n\nfunction setLookupsDataMap(lookupsDataMap, replace = false) {\n  if (replace) {\n    state.lookupsDataMap = lookupsDataMap;\n  } else {\n    state.lookupsDataMap = { ...state.lookupsDataMap, ...lookupsDataMap };\n  }\n}\n\nexport { state, onChange, setLookupsDataMap };\n"]}

package/dist/collection/store/user-store.js

@@ -0,0 +1,22 @@
+import { createStore } from "@stencil/store";
+const initialState = { user: null };
+const { state } = createStore(initialState);
+export function updateState(action) {
+    switch (action.type) {
+        case 'SET_USER':
+            state.user = action.payload;
+            break;
+        case 'SET_ACCESS_TOKEN':
+            if (state.user) {
+                state.user.accessToken = action.payload;
+            }
+            break;
+        default:
+            break;
+    }
+}
+export default {
+    state,
+    updateState,
+};
+//# sourceMappingURL=user-store.js.map