udp-stencil-component-library 25.18.1-beta.5 → 25.18.1-beta.6

package/dist/cjs/index.cjs.js

@@ -1,13 +1,13 @@
 'use strict';
 
 var apiServices = require('./api-services-NWeAzI4X.js');
-var getUser = require('./get-user-CljYNKAA.js');
-var udpFetch = require('./udp-fetch-Bw6LGKaF.js');
+var getUser = require('./get-user-DFb8yrQ2.js');
+var udpFetch = require('./udp-fetch-C9800dwI.js');
 var catalogStore = require('./catalog-store-yJKDPXXM.js');
 var SearchBuilder = require('./SearchBuilder-C1sUitjQ.js');
 var configService = require('./configService-BmGAegZf.js');
 require('axios');
-require('./index-Ci0lUvCK.js');
+require('./index-DrMNAZCL.js');
 require('jwt-decode');
 require('@stencil/store');
 require('./apiUtils-DT-fLJOw.js');

package/dist/cjs/inputs-example.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-Ci0lUvCK.js');
+var index = require('./index-DrMNAZCL.js');
 
 const inputsExampleCss = ":host{display:block;font-family:var(--font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);line-height:1.6;color:var(--text-color, #333);max-width:1200px;margin:0 auto;padding:2rem}h1{font-size:2.5rem;font-weight:700;margin-bottom:2rem;color:var(--primary-color, #007acc);text-align:center;border-bottom:3px solid var(--primary-color, #007acc);padding-bottom:1rem}.example-section{margin-bottom:4rem;padding:2rem;background:var(--section-background, #f8f9fa);border-radius:12px;border:1px solid var(--border-color, #e9ecef)}.example-section h2{font-size:1.8rem;font-weight:600;margin-bottom:1rem;color:var(--secondary-color, #495057);display:flex;align-items:center;gap:0.5rem}.example-section h2::before{content:'';width:4px;height:1.5rem;background:var(--primary-color, #007acc);border-radius:2px}.example-section p{margin-bottom:1.5rem;color:var(--text-muted, #6c757d);font-size:1.1rem}.input-grid{display:grid;grid-template-columns:repeat(auto-fit, minmax(300px, 1fr));gap:2rem;margin-bottom:2rem}.form-grid{display:grid;grid-template-columns:repeat(auto-fit, minmax(300px, 1fr));gap:2rem;margin-bottom:2rem}.input-example{background:var(--input-example-background, #ffffff);padding:1.5rem;border-radius:8px;border:1px solid var(--border-color, #e9ecef);box-shadow:0 2px 4px rgba(0, 0, 0, 0.1);transition:transform 0.2s ease, box-shadow 0.2s ease}.input-example:hover{transform:translateY(-2px);box-shadow:0 4px 8px rgba(0, 0, 0, 0.15)}.input-example h3{font-size:1.2rem;font-weight:600;margin-bottom:1rem;color:var(--heading-color, #343a40);border-bottom:2px solid var(--accent-color, #dee2e6);padding-bottom:0.5rem}.value-display{margin-top:1rem;padding:0.75rem;background:var(--value-display-background, #e7f3ff);border-radius:6px;font-family:'Courier New', monospace;font-size:0.9rem;color:var(--value-display-color, #0066cc);border-left:4px solid var(--primary-color, #007acc)}.form-actions{display:flex;justify-content:center;margin-top:2rem;padding-top:2rem;border-top:2px solid var(--border-color, #e9ecef)}.submit-button{background:var(--primary-color, #007acc);color:white;border:none;padding:1rem 2rem;font-size:1.1rem;font-weight:600;border-radius:6px;cursor:pointer;transition:background-color 0.2s ease, transform 0.2s ease;box-shadow:0 2px 4px rgba(0, 0, 0, 0.1)}.submit-button:hover{background:var(--primary-color-hover, #0056b3);transform:translateY(-1px);box-shadow:0 4px 8px rgba(0, 0, 0, 0.15)}.submit-button:active{transform:translateY(0)}.form-values{margin-top:2rem;padding:1.5rem;background:var(--code-background, #f8f9fa);border-radius:8px;border:1px solid var(--border-color, #e9ecef)}.form-values h3{margin-bottom:1rem;color:var(--heading-color, #343a40);font-size:1.2rem}.form-values pre{background:var(--pre-background, #ffffff);padding:1rem;border-radius:6px;border:1px solid var(--border-color, #e9ecef);font-size:0.9rem;overflow-x:auto;color:var(--code-color, #495057);white-space:pre-wrap;word-wrap:break-word}.disabled-examples{display:flex;flex-direction:column;gap:1rem}@media (max-width: 768px){:host{padding:1rem}h1{font-size:2rem}.input-grid,.form-grid{grid-template-columns:1fr;gap:1rem}.input-example{padding:1rem}.example-section{padding:1rem}}@media (prefers-color-scheme: dark){:host{--text-color:#f8f9fa;--section-background:#2d3748;--input-example-background:#4a5568;--border-color:#4a5568;--heading-color:#e2e8f0;--text-muted:#a0aec0;--value-display-background:#2c5282;--value-display-color:#90cdf4;--code-background:#2d3748;--pre-background:#4a5568;--code-color:#e2e8f0}}*{transition:color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease}.submit-button:focus{outline:2px solid var(--primary-color, #007acc);outline-offset:2px}@media print{:host{padding:0}.input-example{break-inside:avoid;box-shadow:none;border:1px solid #ccc}.submit-button{display:none}}";
 
@@ -88,7 +88,7 @@ const InputsExample = class {
         };
     }
     render() {
-        return (index.h("div", { key: '0efd3f4460ea20ff10f2aaf00ca70770237da618', class: "inputs-example" }, index.h("h1", { key: '006277abe860f17193251d59d60008947ca2bf77' }, "Input Components Examples"), index.h("section", { key: '252130c2af84ca1c16251db183209c1651d3ca71', class: "example-section" }, index.h("h2", { key: '589f7b01a7de725ace061f317bb054c99f278c18' }, "Controlled Components"), index.h("p", { key: '5275e91ce1928c7db447882ecc648069870b93e4' }, "Parent component manages state and passes values to child components."), index.h("div", { key: '551f424a12c6dc3bcc141ea0cc6c7a0b3be0c96d', class: "input-grid" }, index.h("div", { key: '55de1d2ad83636052b2a5f49544f3c416eb969b6', class: "input-example" }, index.h("h3", { key: '5d8184f1650a3f13cba35ba894a3fb68ed5f943b' }, "Text Field"), index.h("text-field", { key: '8bd05080a978920bde77bccffc53368e26369d22', label: "Controlled Text Input", placeholder: "Enter text...", value: this.controlledTextValue }), index.h("p", { key: '9f931a1a2e6a94f879d440902fc1ce304337b3a1', class: "value-display" }, "Value: ", this.controlledTextValue)), index.h("div", { key: '3a71f26e7ef8b27ef987fab993f9f68d8a74dd25', class: "input-example" }, index.h("h3", { key: '3c4869186abcf344b1f098092ec75c7084fa28e0' }, "Numeric Field"), index.h("numeric-field", { key: '4a94e0557e2524b918b9b9c712758b8b2705078d', label: "Controlled Numeric Input", placeholder: "Enter number...", value: this.controlledNumericValue, min: "0", max: "100", step: "1", onChange: this.handleControlledNumericChange }), index.h("p", { key: '26344fd447d79233dd3d176fad21b4d736325475', class: "value-display" }, "Value: ", this.controlledNumericValue)), index.h("div", { key: '2c35fe41a275c18c18e4340e00589d95c9240af0', class: "input-example" }, index.h("h3", { key: '8a7ac8119188ba1d0681196d7207147eb76501d2' }, "Text Area"), index.h("text-area", { key: 'fb554b6b21bb51901013981d3b2bd9360839dce9', label: "Controlled Text Area", placeholder: "Enter description...", value: this.controlledTextAreaValue, minRows: 3, maxRows: 6 }), index.h("p", { key: '5622e978387b0a8c31b24173f4839b2d9b9a088b', class: "value-display" }, "Value: ", this.controlledTextAreaValue)), index.h("div", { key: 'd957c4002d97bd3cee3fca6e734260098504ecb0', class: "input-example" }, index.h("h3", { key: 'a51d7312e52943c3b21e2d99881b73e7858ef36e' }, "Checkbox"), index.h("check-box", { key: 'a76b891c6ec232a20f3ba7053db0cf02e48831c9', label: "Controlled Checkbox", checked: this.controlledCheckboxValue, onChange: this.handleControlledCheckboxChange }), index.h("p", { key: '54866fd5d3b00875f5b763a80cc78556b2d719fd', class: "value-display" }, "Checked: ", this.controlledCheckboxValue.toString())), index.h("div", { key: '4d4ce6273c9f75b95a27fd60c10c8c1bfbc6dde5', class: "input-example" }, index.h("h3", { key: 'cdce4e97bb3577a77509fa9c7ef28c65a1056992' }, "Toggle"), index.h("stencil-toggle", { key: 'bb9c014216ec1d4573f03fed25cc82344baac92e', label: "Controlled Toggle", checked: this.controlledToggleValue, onChange: this.handleControlledToggleChange }), index.h("p", { key: '1019191b0934529d856bf4f4114c5733fd01424b', class: "value-display" }, "Toggled: ", this.controlledToggleValue.toString())), index.h("div", { key: '95ed43eede6b66422a906c4a5c055c956bf537f1', class: "input-example" }, index.h("h3", { key: '6b0c3368be18c6c328572b027ccfc08006c3e4ef' }, "Date Selector"), index.h("udp-date-selector", { key: '45a9903e034e034add2500f4374cebb9b098cffc', label: "Controlled Date", value: this.controlledDateValue, onChange: this.handleControlledDateChange }), index.h("p", { key: '25b075ba6a748e19cf060258947d1b69b0865e9a', class: "value-display" }, "Date: ", this.controlledDateValue)), index.h("div", { key: '041b10ba312b9c0b595201687e034e169e8c502b', class: "input-example" }, index.h("h3", { key: '8df015893dc9d297c8fdd1acb2673c3541637c94' }, "DateTime Selector"), index.h("udp-datetime-selector", { key: '562e3908a61c3739732b51bf9711426b89bcaef0', label: "Controlled DateTime", value: this.controlledDateTimeValue, onChange: this.handleControlledDateTimeChange }), index.h("p", { key: 'e46ad5ca14b6038d5f2470fba4f5ccf6bac23a5c', class: "value-display" }, "DateTime: ", this.controlledDateTimeValue)), index.h("div", { key: '7d1a01e4d73932cfc26c9782bd19388e4650971e', class: "input-example" }, index.h("h3", { key: '76e4b9a5dde26015293c54f06ea84cae0408c630' }, "Time Selector"), index.h("udp-time-selector", { key: 'f5ceb2da3facc5f268da85891e1f3b0bd5e8b061', label: "Controlled Time", value: this.controlledTimeValue, onChange: this.handleControlledTimeChange }), index.h("p", { key: '8e061f37c0a0ecd7eba9496a9a441cc2d0397e18', class: "value-display" }, "Time: ", this.controlledTimeValue)), index.h("div", { key: 'eb8d7f5e9d6e11eda3fa33f4c35671c8146816ed', class: "input-example" }, index.h("h3", { key: 'bc4f419f561d4ea816331ce4e922fc7e7ce25b18' }, "UDP Selector"), index.h("udp-selector", { key: 'c6a2153a88b7470d799bf9ef1df6c858f19dc78d', label: "Controlled Selector", options: this.selectorOptions, value: this.controlledSelectorValue, onChange: this.handleControlledSelectorChange }), index.h("p", { key: '7a653cec33c7202ea2468eaad37da12746f11d82', class: "value-display" }, "Selected: ", this.controlledSelectorValue)), index.h("div", { key: '9a4836a07e6f0f9c69d9e76515003ea993411ec4', class: "input-example" }, index.h("h3", { key: 'fc06320104a8d51ca49638933371a77083ac20bf' }, "File Upload"), index.h("file-upload", { key: '2821b6f36940ddc513dd89e233f4afb6a98b07d2', label: "Controlled File Upload", allowMultiple: true, onChange: this.handleControlledFileChange }), index.h("p", { key: '823341c790042bf0a2df0fde691eb715478f86d9', class: "value-display" }, "Files: ", this.controlledFileValue.length, " selected")))), index.h("section", { key: '400893e3266665c8a63a286ddaad6bb64ad9efd6', class: "example-section" }, index.h("h2", { key: 'a11bc8c2ea72e3394a32ef537f064d1d027b7567' }, "Uncontrolled Components"), index.h("p", { key: '6faec1e2ceb7d17c4f7e21226dc0ffdeed3ae039' }, "Components manage their own state with initial values."), index.h("div", { key: '72b6fc67bfcae5d60b41d87a8dbcafb9fd4bc982', class: "input-grid" }, index.h("div", { key: '0e5d40d18c610b8dcdc8c90944892d8179b726e3', class: "input-example" }, index.h("h3", { key: '3f01b543c41d0dc276caaeb67be4e66a39dded4e' }, "Text Field"), index.h("text-field", { key: 'f9c7ca2d4b98af3fb67f3ae74d7e936d87ef9c3c', label: "Uncontrolled Text Input", placeholder: "Enter text...", initialValue: "Initial text value", onChange: (e) => console.log('Text changed:', e.detail) })), index.h("div", { key: '55db82562b3c1e5371784f4aa052741e5edf9607', class: "input-example" }, index.h("h3", { key: 'bd8b8ab64beb7523966d21e0cacd5afa60f3105a' }, "Numeric Field"), index.h("numeric-field", { key: '116da3d99fe20151b37e77068dce0f2cb9ae0917', label: "Uncontrolled Numeric Input", placeholder: "Enter number...", initialValue: "42", min: "0", max: "100", onChange: (e) => console.log('Number changed:', e.detail) })), index.h("div", { key: 'fdddde6cdf4ff4285fa067720be6925cdc1e3830', class: "input-example" }, index.h("h3", { key: '40acfb74b91565f64072dbe13975d96c945b5a8e' }, "Text Area"), index.h("text-area", { key: '7d0da30788f2b76c50767296a4de85691c83c170', label: "Uncontrolled Text Area", placeholder: "Enter description...", initialValue: "Initial description text", minRows: 3, onChange: (e) => console.log('Text area changed:', e.detail) })), index.h("div", { key: '3f843afb917770a01e6291f50f20fac007821e0a', class: "input-example" }, index.h("h3", { key: '6ad479fa8bd9cee5dc5f67aecfd6018a27953877' }, "Checkbox"), index.h("check-box", { key: '0ad746a68cbdae97e953073bea1dfc4574b1da43', label: "Uncontrolled Checkbox", initialValue: "true", onChange: (e) => console.log('Checkbox changed:', e.detail) })), index.h("div", { key: '5c2d036874db447f8cf058a5a511e0272bedc1a7', class: "input-example" }, index.h("h3", { key: 'dac3a19d667510cd27cc55ff5e466a1f4469e007' }, "Toggle"), index.h("stencil-toggle", { key: '90603832ed57ea3fa5b0a7115868343003d1d084', label: "Uncontrolled Toggle", initialValue: "false", onChange: (e) => console.log('Toggle changed:', e.detail) })), index.h("div", { key: '49af9584417e30c4c82821eb5d0261a45577c83e', class: "input-example" }, index.h("h3", { key: 'ed380270ff7aa432c482c5d3f9239982c1222776' }, "Date Selector"), index.h("udp-date-selector", { key: '5ff1824a24a6c89939218c2283ca80f399b90198', label: "Uncontrolled Date", initialValue: "2024-01-15", onChange: (e) => console.log('Date changed:', e.detail) })), index.h("div", { key: 'bd352b08b5a9249939748f6a93aa4ead16d8db6a', class: "input-example" }, index.h("h3", { key: '0962ed467ab9357aa073d222f33d5eeb11c892d5' }, "Time Selector"), index.h("udp-time-selector", { key: '4a7bfb3d1f6c6a118034c0bddff26978f5836c1d', label: "Uncontrolled Time", initialValue: "14:30", onChange: (e) => console.log('Time changed:', e.detail) })), index.h("div", { key: '748568382a7d6144b2e0d878b06d46eaa82977ac', class: "input-example" }, index.h("h3", { key: '0750049de540a9a0d659af161e1b14d3f294eb40' }, "DateTime Selector"), index.h("udp-datetime-selector", { key: '778a0408dd43ea048171596a4eb0de6353a470ff', label: "Uncontrolled DateTime", initialValue: "2024-01-15T14:30", onChange: (e) => console.log('DateTime changed:', e.detail) })), index.h("div", { key: '593afaf38ef12585cf35998f6684590e683872f5', class: "input-example" }, index.h("h3", { key: '1cfe0ba353fee26bfd2216b1da8a297aebfb83fb' }, "UDP Selector"), index.h("udp-selector", { key: '5b0a4ed94f3998482572fd9351544e03f3ddd964', label: "Uncontrolled Selector", options: this.selectorOptions, initialValue: "option2", onChange: (e) => console.log('Selector changed:', e.detail) })))), index.h("section", { key: '8cdecea2dff7eeacae58ef8a00f28fe1ae0be3ca', class: "example-section" }, index.h("h2", { key: '85929c1cc99ba5379c49ba6479df2e3f17d4c7dc' }, "Form-wrapped Components"), index.h("p", { key: '0596694a262ab286ac612339279df96b391e4104' }, "Components integrated with stencil-form and stencil-field for validation and state management."), index.h("stencil-form", { key: '0cad6aef3d8738a1bf4b2d944152e591fa185b08', handleSubmit: this.handleFormSubmit, handleChange: this.handleFormChange, handleValidate: this.validateForm, initialValues: {
+        return (index.h("div", { key: '568318c42e44cab4a6a750a4c5819953328887dd', class: "inputs-example" }, index.h("h1", { key: '5637becd6a248192914e63c9c6e8dfc3714f3a15' }, "Input Components Examples"), index.h("section", { key: 'e9dc7d661c548210421400385a404b952d9f1956', class: "example-section" }, index.h("h2", { key: '1577a2c0eae0bcaa0bbfefea1bf186403162c407' }, "Controlled Components"), index.h("p", { key: '3c98d8f5a0c50d3180edf77c89b14b58df9f5d7c' }, "Parent component manages state and passes values to child components."), index.h("div", { key: '93c0227504b3e7b41fa17674883796401951f7e0', class: "input-grid" }, index.h("div", { key: '299b926df1c5146758d10ad3ffc9400b9ee45539', class: "input-example" }, index.h("h3", { key: 'f20a59ab4a449e86c9c2608819bdb548437a361a' }, "Text Field"), index.h("text-field", { key: '8d73d9be252b05655a321a25a1faf13d51087158', label: "Controlled Text Input", placeholder: "Enter text...", value: this.controlledTextValue }), index.h("p", { key: '74ebcbc54fb2892e31709485bf4ec754fbcf0838', class: "value-display" }, "Value: ", this.controlledTextValue)), index.h("div", { key: '572728243b33fae1872160456ea22230450f98d0', class: "input-example" }, index.h("h3", { key: 'd82edbf3ddca5e0ea1cba3a335c7bc7b0bf47e37' }, "Numeric Field"), index.h("numeric-field", { key: '54c858e75aaea42ef52580f31e89e6cfb2872e58', label: "Controlled Numeric Input", placeholder: "Enter number...", value: this.controlledNumericValue, min: "0", max: "100", step: "1", onChange: this.handleControlledNumericChange }), index.h("p", { key: '0fb607f8d5d2890c9d777792ec86eaf47aa8d467', class: "value-display" }, "Value: ", this.controlledNumericValue)), index.h("div", { key: 'a7f8e537d6c769129a66d98ad88306ebcda48da6', class: "input-example" }, index.h("h3", { key: '43cac26cb5a7c97e81d6cb079c853df67b93bc32' }, "Text Area"), index.h("text-area", { key: 'bf6fa1b6edc51798d6db4c8261c3114b62f922e1', label: "Controlled Text Area", placeholder: "Enter description...", value: this.controlledTextAreaValue, minRows: 3, maxRows: 6 }), index.h("p", { key: '4eab773e3ff0faec1bed1b7f06437fc44b370f70', class: "value-display" }, "Value: ", this.controlledTextAreaValue)), index.h("div", { key: 'b046957511aead089862c702264ba0e742f1b68d', class: "input-example" }, index.h("h3", { key: 'ff62fc57987c3bdbd727bce422df26c4d3bbda8a' }, "Checkbox"), index.h("check-box", { key: '4b4fe082b6215c11575f5cabc385ef45ca4e7bd6', label: "Controlled Checkbox", checked: this.controlledCheckboxValue, onChange: this.handleControlledCheckboxChange }), index.h("p", { key: '4c65f141f2a8a7477205f6084d69200346bb0755', class: "value-display" }, "Checked: ", this.controlledCheckboxValue.toString())), index.h("div", { key: 'a48006413538b9981670434ae6c944e7e58271f9', class: "input-example" }, index.h("h3", { key: '45383efba3e427ff11d43044fa01e57ed471fdc5' }, "Toggle"), index.h("stencil-toggle", { key: '44848de53876d025aec88a2860eb9e60b579f568', label: "Controlled Toggle", checked: this.controlledToggleValue, onChange: this.handleControlledToggleChange }), index.h("p", { key: '3d629c545ba9202e853093ee999ce4eec10601f6', class: "value-display" }, "Toggled: ", this.controlledToggleValue.toString())), index.h("div", { key: '4241e9b1fd8664e728d04f3b17ce76b08ccce7b8', class: "input-example" }, index.h("h3", { key: 'd83a696d7301047672071daa973056c379aa174c' }, "Date Selector"), index.h("udp-date-selector", { key: 'd1fdf59f30ad9b4640f614078f718e2e37957f50', label: "Controlled Date", value: this.controlledDateValue, onChange: this.handleControlledDateChange }), index.h("p", { key: '109f4a7821a45bb4f9e63807db0f456d71bb79e5', class: "value-display" }, "Date: ", this.controlledDateValue)), index.h("div", { key: '38844d4720ddc7c7ffcf3611ec264aaf82771ef9', class: "input-example" }, index.h("h3", { key: '40479e7e8704d9672a55642806d5d9adf76ad5b5' }, "DateTime Selector"), index.h("udp-datetime-selector", { key: '88028b3e9499217f4df97f5fc6186891bcd95b18', label: "Controlled DateTime", value: this.controlledDateTimeValue, onChange: this.handleControlledDateTimeChange }), index.h("p", { key: '41f26787189f9e38213ab5c12d5e23090e4b73fc', class: "value-display" }, "DateTime: ", this.controlledDateTimeValue)), index.h("div", { key: '72d82de355d314169aa1786dba5e314a4a3c2780', class: "input-example" }, index.h("h3", { key: '13d248566f080175992873afbce91e0776425351' }, "Time Selector"), index.h("udp-time-selector", { key: '4eef41d123a13fed720ddb5d6f1ff502d12b3382', label: "Controlled Time", value: this.controlledTimeValue, onChange: this.handleControlledTimeChange }), index.h("p", { key: '09b646081621e5bbc0ea04e1a6082e2aeecb8ce2', class: "value-display" }, "Time: ", this.controlledTimeValue)), index.h("div", { key: 'ebed47a9e2ff7fe2f88726c433e2b9a581dbac2c', class: "input-example" }, index.h("h3", { key: '9a294a5894d1e29b036bc6b773acad0091a7b98b' }, "UDP Selector"), index.h("udp-selector", { key: 'd3a6adf65d0d4a93677b2fa887fda79c726ef819', label: "Controlled Selector", options: this.selectorOptions, value: this.controlledSelectorValue, onChange: this.handleControlledSelectorChange }), index.h("p", { key: '68a33dabe7906580dbc91deab34595aaa6439903', class: "value-display" }, "Selected: ", this.controlledSelectorValue)), index.h("div", { key: '3319c740db491c5eb68011418cac7c7c8551123c', class: "input-example" }, index.h("h3", { key: 'e6d760ebd7e941267da381e1b763d4529a0940ea' }, "File Upload"), index.h("file-upload", { key: 'a1726d26e4d3de052646de14cd9fdaf4d6cc2a34', label: "Controlled File Upload", allowMultiple: true, onChange: this.handleControlledFileChange }), index.h("p", { key: '286df59dbec522a45bb0498b0274c9d5b60da51d', class: "value-display" }, "Files: ", this.controlledFileValue.length, " selected")))), index.h("section", { key: '92e1995b075a1d6a8b08d7121df729b676e0f254', class: "example-section" }, index.h("h2", { key: '99b8b95638ee6289736fe31c9f92de4fc915ab66' }, "Uncontrolled Components"), index.h("p", { key: 'ce0ec4155a0d4e0c578cf310a36054b898046e12' }, "Components manage their own state with initial values."), index.h("div", { key: 'b6be0f3f1de8e43d7d2e3176c9bd0fa80fe41839', class: "input-grid" }, index.h("div", { key: 'f863c9c473e10a46118792f3b1d4f90c0468f312', class: "input-example" }, index.h("h3", { key: '76c13a12b2cf46b786a5c6fd6e7ab09a114422ce' }, "Text Field"), index.h("text-field", { key: '2f002aa2965ba1592614e19cdaf41685eff27a74', label: "Uncontrolled Text Input", placeholder: "Enter text...", initialValue: "Initial text value", onChange: (e) => console.log('Text changed:', e.detail) })), index.h("div", { key: '7a72540333aa14e138b0776a037c9499218b48a1', class: "input-example" }, index.h("h3", { key: 'fe756740f658a568b6b025f801472c88d5a2ff69' }, "Numeric Field"), index.h("numeric-field", { key: '5602a4cfb1439d79b323e7e990c77701fad43c1e', label: "Uncontrolled Numeric Input", placeholder: "Enter number...", initialValue: "42", min: "0", max: "100", onChange: (e) => console.log('Number changed:', e.detail) })), index.h("div", { key: '8b01079941128dc419490ae9268f3de12f64bbec', class: "input-example" }, index.h("h3", { key: 'f3bb19ebe3f1eb7860c8670fa05e56100083100c' }, "Text Area"), index.h("text-area", { key: '77b84fd065898b3f53b4f29d49175ca69d0e9a0c', label: "Uncontrolled Text Area", placeholder: "Enter description...", initialValue: "Initial description text", minRows: 3, onChange: (e) => console.log('Text area changed:', e.detail) })), index.h("div", { key: '18108e76b0d3cba4d17cb240d991e557e45a4cf0', class: "input-example" }, index.h("h3", { key: 'd7a8665af975ccfc51fdd6637c65cf090b3e64ee' }, "Checkbox"), index.h("check-box", { key: '51c64943d73cae575b8354e63a723ce42a4da7a8', label: "Uncontrolled Checkbox", initialValue: "true", onChange: (e) => console.log('Checkbox changed:', e.detail) })), index.h("div", { key: 'd850416de27eb55f014f91245ab38658f645ec5e', class: "input-example" }, index.h("h3", { key: '1181811e2e29035b7ebdca214c77fe6994f0f85a' }, "Toggle"), index.h("stencil-toggle", { key: 'f1f911a89e6a325fa136cfef4a8706bf6f7ca0bf', label: "Uncontrolled Toggle", initialValue: "false", onChange: (e) => console.log('Toggle changed:', e.detail) })), index.h("div", { key: '78138f2afb3865b8b726c871d5b66c0a765fdc3b', class: "input-example" }, index.h("h3", { key: '737ebb728f6dc1c3667ee4797470f2b4253ac531' }, "Date Selector"), index.h("udp-date-selector", { key: '46794fcb28892c784028b112e23017f68688fe71', label: "Uncontrolled Date", initialValue: "2024-01-15", onChange: (e) => console.log('Date changed:', e.detail) })), index.h("div", { key: '7d4321f22573a578f3c97f42ff909c8dba89c239', class: "input-example" }, index.h("h3", { key: 'f5bea7039842c10d1d18c12dbf148a7e4406aaf0' }, "Time Selector"), index.h("udp-time-selector", { key: '59bc40ac5ff2cb5ce2d5cac649456761e4acd024', label: "Uncontrolled Time", initialValue: "14:30", onChange: (e) => console.log('Time changed:', e.detail) })), index.h("div", { key: 'd38663af248b165fd945b435d139645778dd15a6', class: "input-example" }, index.h("h3", { key: '4a71a7d7ab4fc85b882a7ad510f106ef8af845e2' }, "DateTime Selector"), index.h("udp-datetime-selector", { key: '0e50bb043a1e29c1b1196099182f2cfbe4d5780e', label: "Uncontrolled DateTime", initialValue: "2024-01-15T14:30", onChange: (e) => console.log('DateTime changed:', e.detail) })), index.h("div", { key: 'b0018485ce72a2e345e4324df645c167d605e270', class: "input-example" }, index.h("h3", { key: 'a476c75bee67f99b8190c2eee40bcf3f3681e0f5' }, "UDP Selector"), index.h("udp-selector", { key: '8734d212c8e57b566331ce9a5a3658673979e496', label: "Uncontrolled Selector", options: this.selectorOptions, initialValue: "option2", onChange: (e) => console.log('Selector changed:', e.detail) })))), index.h("section", { key: '182dc382da022fea80addb395b7e73d0e686db75', class: "example-section" }, index.h("h2", { key: '0e74791316e43917b64aa88437d3195c7e01d518' }, "Form-wrapped Components"), index.h("p", { key: '22f0b0ad471b5a64e6f1e2dd560c4591381deb1d' }, "Components integrated with stencil-form and stencil-field for validation and state management."), index.h("stencil-form", { key: '7d6510a9ac5a7f4b3ff67d6e23d6a61a803cfefa', handleSubmit: this.handleFormSubmit, handleChange: this.handleFormChange, handleValidate: this.validateForm, initialValues: {
                 formTextField: 'Initial form text',
                 formNumericField: '25',
                 formTextArea: 'Initial form description',
@@ -97,7 +97,7 @@ const InputsExample = class {
                 formDate: '2024-02-01',
                 formTime: '09:00',
                 formSelector: 'option1'
-            } }, index.h("div", { key: 'efcf2196b2603a552bfedd3591b3ca6b1b5a71f1', class: "form-grid" }, index.h("stencil-field", { key: '5231c6f402747272e1e89b26d110ff86f0aa7a3b', name: "formTextField" }, index.h("text-field", { key: 'c8e245f52997e27f27f93454ab24cbff224cc583', label: "Form Text Field", placeholder: "Enter text...", required: true })), index.h("stencil-field", { key: 'ca91becfc791148116d60d0e905b1a3daa5b9db3', name: "formNumericField" }, index.h("numeric-field", { key: '44347c0895f0f8b501a421cf761cadacd0932c6f', label: "Form Numeric Field", placeholder: "Enter number...", min: "0", max: "100", required: true })), index.h("stencil-field", { key: 'c7b4b216d3106c9af75392e54725e8a21f8ca3b3', name: "formTextArea" }, index.h("text-area", { key: '9de49a3341b5987f0bde64ce14c3ebc7e88cc74a', label: "Form Text Area", placeholder: "Enter description...", required: true, minRows: 3 })), index.h("stencil-field", { key: '56d39f44ea989beed99ad8d7c5bdd645e5c817aa', name: "formCheckbox" }, index.h("check-box", { key: 'ef7c6aafba7e06b2774088c4f5ac98edbf367a7c', label: "Accept Terms and Conditions", required: true })), index.h("stencil-field", { key: '54e05f275558330b2c37afa140a8f6926e726180', name: "formToggle" }, index.h("stencil-toggle", { key: '8c8b1925bd17463429b5badcac307857bc84cec2', label: "Enable Notifications" })), index.h("stencil-field", { key: '1415837b1d0fa0e092fc40b40929b87cddf47410', name: "formDate" }, index.h("udp-date-selector", { key: '9ebbe59d298c8648c10b9e7f6ed39de46715b6b2', label: "Form Date", required: true })), index.h("stencil-field", { key: 'f48570db700715597bf2e45fd9c2892d023e6897', name: "formTime" }, index.h("udp-time-selector", { key: 'edbdbff32cc3c225ed56c3b94c613005dfdcde39', label: "Form Time" })), index.h("stencil-field", { key: '8437d71e061aa088e4cba83225a521c44a4ca3d2', name: "formSelector" }, index.h("udp-selector", { key: '6d1983d097f69466060cd3278d6ec58e220e8d77', label: "Form Selector", options: this.selectorOptions, required: true })), index.h("stencil-field", { key: '41ab83071b303dfd1c8763a46895c792344a0f1e', name: "formFiles" }, index.h("file-upload", { key: '7d9a05439319655c232bd27ab6961c1f6db8d883', label: "Form File Upload", allowMultiple: true }))), index.h("div", { key: 'ca241b12f04441dbf884d57d13e84f0dbccb7f65', class: "form-actions" }, index.h("button", { key: '9ab10fa33f12f8c376e95c97732b40717dd2b0b5', type: "submit", class: "submit-button" }, "Submit Form"))), index.h("div", { key: '0c80c817538bd6bd0f00c6197cb3c2793daaf910', class: "form-values" }, index.h("h3", { key: 'dfd5d67e510aa606c99450d4f4f08342a0661319' }, "Current Form Values:"), index.h("pre", { key: 'a10e287b7066a43cc69130830ded4da6aa0c1556' }, JSON.stringify(this.formValues, null, 2)))), index.h("section", { key: 'd099ca8f995aa1f7262af5338873bf94754811f3', class: "example-section" }, index.h("h2", { key: '7cb065039260f3e516133e32d6253240aece1a35' }, "Additional Examples"), index.h("p", { key: '62617e685432dde1d659eca861b554f064ec24fa' }, "More complex configurations and specialized use cases."), index.h("div", { key: 'c533b992028051734003b0be0bd5d0985806358a', class: "input-grid" }, index.h("div", { key: 'fce996f18ec7e4bc7f159047c97fd1066f45a8a9', class: "input-example" }, index.h("h3", { key: 'c94a1ba5d9cd5156cfd7ef1f4015a057d710e0a5' }, "Multi-Select UDP Selector"), index.h("udp-selector", { key: '53b28993b382889d27919e3a7d9405a5fd32aaf8', label: "Multi-Select Selector", options: this.selectorOptions, multiSelect: true, initialValue: "option1,option3", onChange: (e) => console.log('Multi-select changed:', e.detail) })), index.h("div", { key: 'ce2255624cb7db841d30dda4cca5af6f1024cd7d', class: "input-example" }, index.h("h3", { key: '69d19bcd69cf2bebff41c872eb582a32a594900a' }, "Large UDP Selector"), index.h("udp-selector", { key: '559044cb64b37d8e08effe91bb1950990085e82b', label: "Large Selector", options: this.selectorOptions, large: true, initialValue: "option2", onChange: (e) => console.log('Large selector changed:', e.detail) })), index.h("div", { key: '0947306acbc6628996b3ad444fe0b2849590bb3b', class: "input-example" }, index.h("h3", { key: 'da9050afe5f7be2d078fcf3d5f7e0987cc26cda5' }, "File Upload with Type Restrictions"), index.h("file-upload", { key: '3f57ad462161a807e56cba39d3b68f8cb287e851', label: "Image Upload Only", allowedFileTypes: ['jpg', 'jpeg', 'png', 'gif'], allowMultiple: false, browseFileMessage: "Select an Image", onChange: (e) => console.log('Image upload changed:', e.detail) })), index.h("div", { key: '16217dff92f04c11145583b6c3879828bb63de18', class: "input-example" }, index.h("h3", { key: 'ad5625e7ffb1ef843f8831be4e4a5b65be32ba76' }, "Disabled Components"), index.h("div", { key: '22f9b761b49d601000d39a64ea698115ded20a17', class: "disabled-examples" }, index.h("text-field", { key: '35b8b2c6e57f555633c523a09db515666af3178f', label: "Disabled Text Field", value: "Cannot edit this", disabled: true }), index.h("check-box", { key: '73df91016a0cecb031e4d6b4c82b7b8bbd320589', label: "Disabled Checkbox", checked: true, disabled: true }), index.h("udp-selector", { key: '42cd089facfb8bd98e2ec5419ff5d32d18055bb7', label: "Disabled Selector", options: this.selectorOptions, value: "option1", disabled: true })))))));
+            } }, index.h("div", { key: '4c3acd2264ca5a61bbf40917e742d55be678c5da', class: "form-grid" }, index.h("stencil-field", { key: 'b4ca78596d2aef8cc0f2c5a85adfa8df147f9bef', name: "formTextField" }, index.h("text-field", { key: '2728029a47760daa7a67d4144b6c1647e2934dd7', label: "Form Text Field", placeholder: "Enter text...", required: true })), index.h("stencil-field", { key: '28a17c16e33499b7ec208cc0459e075ec5a76c9b', name: "formNumericField" }, index.h("numeric-field", { key: '7c6edb230784665a312c82901bda77fc876697a1', label: "Form Numeric Field", placeholder: "Enter number...", min: "0", max: "100", required: true })), index.h("stencil-field", { key: 'eb5947f21056c3cbbc53d063340527d8dae96365', name: "formTextArea" }, index.h("text-area", { key: '760c3553c309f2c132179d4bc6323fc6492c3837', label: "Form Text Area", placeholder: "Enter description...", required: true, minRows: 3 })), index.h("stencil-field", { key: 'e31f53fbbce59a7d49fa99f321888bc874b01972', name: "formCheckbox" }, index.h("check-box", { key: '3771e81b0f4430f9cca07f1457ec0b75f1031eff', label: "Accept Terms and Conditions", required: true })), index.h("stencil-field", { key: '9ca02ff8c5c067a3288ce13bcb9347359f9195f3', name: "formToggle" }, index.h("stencil-toggle", { key: '10f7bde9a8edde29d638a5592787c415654e6368', label: "Enable Notifications" })), index.h("stencil-field", { key: 'd30d821fedd9f94a5c816203522db312e5861bc6', name: "formDate" }, index.h("udp-date-selector", { key: 'e73f814ec0bc86dbd3538af31306c797479c476d', label: "Form Date", required: true })), index.h("stencil-field", { key: 'f8180949e6d0c3aec19b0c4b206f004f9aa2e258', name: "formTime" }, index.h("udp-time-selector", { key: '59c0e0bbcec7e0c59f7bfe43d4571507926d08f5', label: "Form Time" })), index.h("stencil-field", { key: 'ddb1f59940d2ffb2cdd02ddd64593be6923bf4b7', name: "formSelector" }, index.h("udp-selector", { key: '09e82dda4fe421b68b12848ac162240104e4dd6a', label: "Form Selector", options: this.selectorOptions, required: true })), index.h("stencil-field", { key: 'b836ed682cb45ec90b78821cb82f10ca5ea676c3', name: "formFiles" }, index.h("file-upload", { key: 'a8337a623851b31c4acf2f294828ed9ec76b4739', label: "Form File Upload", allowMultiple: true }))), index.h("div", { key: 'e6b81aecf417b8077197a2925a57275eb2407764', class: "form-actions" }, index.h("button", { key: 'bc47fe7038b8f224745ae1ce101da82e5772b4b3', type: "submit", class: "submit-button" }, "Submit Form"))), index.h("div", { key: '752745e88a81808a7874bea7dcf13070d964761f', class: "form-values" }, index.h("h3", { key: 'ba70a02c4f3c4c5840e89dce5c8333e3f98027e6' }, "Current Form Values:"), index.h("pre", { key: '5bfc90a17f885e7e41b47e73eaf2a0d01ba8e9e2' }, JSON.stringify(this.formValues, null, 2)))), index.h("section", { key: '1778db0713a491b61b75293f6ee57b90c6fecf20', class: "example-section" }, index.h("h2", { key: '94d8d772e3f49e0cbc43796f67505f01494ba890' }, "Additional Examples"), index.h("p", { key: 'ef4ce8b2bebb9fa6a94b965066fe2b7d6703e96f' }, "More complex configurations and specialized use cases."), index.h("div", { key: 'f45dd83e6894913b7cc22da8730f3bc9abada5a5', class: "input-grid" }, index.h("div", { key: '92c270c05d1747340f2cb2b6a0bce7adade5baef', class: "input-example" }, index.h("h3", { key: '3ff494f9ccd9f1df461927f4b58d39c71e07171d' }, "Multi-Select UDP Selector"), index.h("udp-selector", { key: 'f9d5d28836a2a0e0694775655f07f2cd1b17cd06', label: "Multi-Select Selector", options: this.selectorOptions, multiSelect: true, initialValue: "option1,option3", onChange: (e) => console.log('Multi-select changed:', e.detail) })), index.h("div", { key: 'cdc145e98cf83ae5ff4a5b1599eb0ac5c5cfe04a', class: "input-example" }, index.h("h3", { key: 'c8321fbcb13460216d415b6f6086c01fc837faf9' }, "Large UDP Selector"), index.h("udp-selector", { key: '30daad81514fcbc8cd1ae7b8ca4ebe57f19b33b0', label: "Large Selector", options: this.selectorOptions, large: true, initialValue: "option2", onChange: (e) => console.log('Large selector changed:', e.detail) })), index.h("div", { key: '7d703caa09925ac7221296422c6bfe7415187646', class: "input-example" }, index.h("h3", { key: '7a7b5e085594c15dc11bb01e786e18c4edafbd64' }, "File Upload with Type Restrictions"), index.h("file-upload", { key: 'e2941cb3e03bc86696bbce3146b77fd5a311e6c6', label: "Image Upload Only", allowedFileTypes: ['jpg', 'jpeg', 'png', 'gif'], allowMultiple: false, browseFileMessage: "Select an Image", onChange: (e) => console.log('Image upload changed:', e.detail) })), index.h("div", { key: '216b5c93bb960345ac62770a8bda5c85c527f1fa', class: "input-example" }, index.h("h3", { key: '91faff234095fdbf962c39b8101c1d2e89f0f8d3' }, "Disabled Components"), index.h("div", { key: 'f1b1e093a0cebf1999d5c2332ca95fe7748b9d6a', class: "disabled-examples" }, index.h("text-field", { key: '225dca34033c0b6c3dd86461cb8b2e64cee24a2b', label: "Disabled Text Field", value: "Cannot edit this", disabled: true }), index.h("check-box", { key: '64dcf3f40a5b1abe44fb32a29059469c89128bba', label: "Disabled Checkbox", checked: true, disabled: true }), index.h("udp-selector", { key: '86827b73670a641b2eba08196c54f2051a696911', label: "Disabled Selector", options: this.selectorOptions, value: "option1", disabled: true })))))));
     }
 };
 InputsExample.style = inputsExampleCss;