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

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: '2c9774c01a36f857e6433aba926627a1257791c7', class: "inputs-example" }, index.h("h1", { key: '5c19b71a3f023b51f0c34ed8e7c5f37434ad091b' }, "Input Components Examples"), index.h("section", { key: 'f2447d8dfe430b466c61a2574ca753b9d5319ee9', class: "example-section" }, index.h("h2", { key: '818dcaa4f4c7dc505cdcccc3ffc484f70a3fb071' }, "Controlled Components"), index.h("p", { key: 'ea4ef0d9251996f67b861638238de0ad0a940e81' }, "Parent component manages state and passes values to child components."), index.h("div", { key: 'ee6a1e5c706fdb5f944e83624337a01331cc8d95', class: "input-grid" }, index.h("div", { key: '3ea82c30422559f59d4a0e10dddd02d918077eca', class: "input-example" }, index.h("h3", { key: '6c5ae1f68f5fa8e43a2b93176e610d88936982dd' }, "Text Field"), index.h("text-field", { key: '72ee35e0669b46c6c1707c079e87205c99155b00', label: "Controlled Text Input", placeholder: "Enter text...", value: this.controlledTextValue }), index.h("p", { key: '6c7607e7b5cd9e0d942d2a890e90a1c43d8b1089', class: "value-display" }, "Value: ", this.controlledTextValue)), index.h("div", { key: '4d1b4ee2ccdd1f1da7568de5c33c6180dbac9a73', class: "input-example" }, index.h("h3", { key: '378a2d4ae669e03703cc9296529812ca7f0e7afc' }, "Numeric Field"), index.h("numeric-field", { key: '8827d06eeb38b3658909dbbe20cbed16aef1ded7', label: "Controlled Numeric Input", placeholder: "Enter number...", value: this.controlledNumericValue, min: "0", max: "100", step: "1", onChange: this.handleControlledNumericChange }), index.h("p", { key: '11797ec1b07020faee2cf620597c29b7ec3c91e3', class: "value-display" }, "Value: ", this.controlledNumericValue)), index.h("div", { key: 'c49569a4b48b03d0ba2846acd84a20ee0474f9e5', class: "input-example" }, index.h("h3", { key: '655878f8956003849b894125c2fb876c4e787acb' }, "Text Area"), index.h("text-area", { key: '3e3045fed0d2e5230a84658a7d7acb2d3a6bc3c8', label: "Controlled Text Area", placeholder: "Enter description...", value: this.controlledTextAreaValue, minRows: 3, maxRows: 6 }), index.h("p", { key: 'b6a093c2a16379f854f8ec1890aca57d6b841685', class: "value-display" }, "Value: ", this.controlledTextAreaValue)), index.h("div", { key: 'f00587ad5255ac95ca7ef73ad525c9f2b7ad2e32', class: "input-example" }, index.h("h3", { key: '9e0ff081e371c2877d432d2e5c99e9b3447e1d73' }, "Checkbox"), index.h("check-box", { key: '1b3039be849d1fc56ee1b3cb35fde57d90dbe9b2', label: "Controlled Checkbox", checked: this.controlledCheckboxValue, onChange: this.handleControlledCheckboxChange }), index.h("p", { key: 'a5a2487cb7a5ece6ef34cafd22886aa3bb180682', class: "value-display" }, "Checked: ", this.controlledCheckboxValue.toString())), index.h("div", { key: '5297030b195b03b2a0406ee4578f458e787abf6a', class: "input-example" }, index.h("h3", { key: '58004f9d68fa3c844424b4f7365a0cca9479f968' }, "Toggle"), index.h("stencil-toggle", { key: '8b8f04ab81e681ab9520f89fa82e32a3d4250409', label: "Controlled Toggle", checked: this.controlledToggleValue, onChange: this.handleControlledToggleChange }), index.h("p", { key: 'd2492200be23d7444fe71267e11c549f16d8bc9a', class: "value-display" }, "Toggled: ", this.controlledToggleValue.toString())), index.h("div", { key: '698863a621af9c58672847f4505aaa5e2482bd05', class: "input-example" }, index.h("h3", { key: '39e0bcc2b2f04b9730352bd305823d6b5a9f8e6a' }, "Date Selector"), index.h("udp-date-selector", { key: 'b3338f8cf609764338d6be2a7b87dbf1d2b70f7f', label: "Controlled Date", value: this.controlledDateValue, onChange: this.handleControlledDateChange }), index.h("p", { key: '09904cafd32d18a5cd7f576e576c6269f47dab94', class: "value-display" }, "Date: ", this.controlledDateValue)), index.h("div", { key: '13ec4f54ac0fbbaa74c67b56a5cadd6a9fc45252', class: "input-example" }, index.h("h3", { key: '5b899dea25c2f3cad64165988817c9d78afd6049' }, "DateTime Selector"), index.h("udp-datetime-selector", { key: '531b20feccea342c3308a373bb920f4060179f0f', label: "Controlled DateTime", value: this.controlledDateTimeValue, onChange: this.handleControlledDateTimeChange }), index.h("p", { key: '60d6d1e1e93897d5ff04fa269b8d79105e95e2fa', class: "value-display" }, "DateTime: ", this.controlledDateTimeValue)), index.h("div", { key: '29fefc86c4645769ce32ef9312518dd681eeeaf6', class: "input-example" }, index.h("h3", { key: '3cc3d33c55281e80a2a447bf68412aec3f0ba527' }, "Time Selector"), index.h("udp-time-selector", { key: 'b7bf0408622231fc893f7f5c5a8746e95775c8a7', label: "Controlled Time", value: this.controlledTimeValue, onChange: this.handleControlledTimeChange }), index.h("p", { key: '34234c591167b563554a6671ee294a1a3b426510', class: "value-display" }, "Time: ", this.controlledTimeValue)), index.h("div", { key: '6632d633fcdaf187024a726b95a4b67decb44126', class: "input-example" }, index.h("h3", { key: '6c35d09bda887f3128fe648392faffd00f8e2514' }, "UDP Selector"), index.h("udp-selector", { key: '03b8b44a84c3db73b74b0738e602d09e91f5f228', label: "Controlled Selector", options: this.selectorOptions, value: this.controlledSelectorValue, onChange: this.handleControlledSelectorChange }), index.h("p", { key: '73d475e90a204b46a15383d0e6b74269f29e59e4', class: "value-display" }, "Selected: ", this.controlledSelectorValue)), index.h("div", { key: 'd470e5bd6e16be2a67bdba2fca5fe0f494dabc12', class: "input-example" }, index.h("h3", { key: '703cadb6d041bc560fd72c60bfd562d409c4b653' }, "File Upload"), index.h("file-upload", { key: '94b4d3a82bc92353d5ebb8f3c7bc8b321902eb59', label: "Controlled File Upload", allowMultiple: true, onChange: this.handleControlledFileChange }), index.h("p", { key: '1b9eaac708bbd6ea3a13b1f405e70c717de4361c', class: "value-display" }, "Files: ", this.controlledFileValue.length, " selected")))), index.h("section", { key: '0a017099bef0d138db8311c2607aa96e829f2db9', class: "example-section" }, index.h("h2", { key: '3a299379ae5f9d8b66b723aaa151514c9664e147' }, "Uncontrolled Components"), index.h("p", { key: '62b6c718844eb84971a5e8533fe51ae4ce9185d7' }, "Components manage their own state with initial values."), index.h("div", { key: 'b0270fdf7b8d96560fc49c7830e6192d9b34c583', class: "input-grid" }, index.h("div", { key: '52af146f389abe67d9c6edf239b80dbb553f4b48', class: "input-example" }, index.h("h3", { key: '5f5e36b240ad4f7f5e952d91c7ab08d907180738' }, "Text Field"), index.h("text-field", { key: '779daef1e8f1f0184b7ed60e3432c4bbb6d78aa5', label: "Uncontrolled Text Input", placeholder: "Enter text...", initialValue: "Initial text value", onChange: (e) => console.log('Text changed:', e.detail) })), index.h("div", { key: '925845b446b549ae12d3f67f40153ff88c1237ec', class: "input-example" }, index.h("h3", { key: '7b6eb7dfac92fcef0972f61bed2cc14c65c35a1f' }, "Numeric Field"), index.h("numeric-field", { key: 'f9e990f8a8b24fff7eda8513c0f33bb62c7a2522', 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: 'dc700898e6043c871e81ba4215775e0b8ad86e64', class: "input-example" }, index.h("h3", { key: '89025e16958ad38e0de9a4fd2784617a434bb7b4' }, "Text Area"), index.h("text-area", { key: 'f89870ede0138fbd4c451de97b442a5eb440674d', 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: '840cdd4c554cb6f30a9660136586744e4df8391b', class: "input-example" }, index.h("h3", { key: '4af04e761094cf33faeda3366718ed912caa7d74' }, "Checkbox"), index.h("check-box", { key: '9263a3e6db5684bf304111ff8e7b7b12a6ed247b', label: "Uncontrolled Checkbox", initialValue: "true", onChange: (e) => console.log('Checkbox changed:', e.detail) })), index.h("div", { key: 'e2ee60bd202d614335a35ad0344c2117061f40ca', class: "input-example" }, index.h("h3", { key: 'e8af0e815f5a89de6ec1596c6f0b457c0a413bd7' }, "Toggle"), index.h("stencil-toggle", { key: 'f6231a4394eb6d0f6b35c48b8850b98139df413e', label: "Uncontrolled Toggle", initialValue: "false", onChange: (e) => console.log('Toggle changed:', e.detail) })), index.h("div", { key: 'bc457a401665ddcd8761555d1e664448ae240029', class: "input-example" }, index.h("h3", { key: '27c031274e7b4eefb1f629c9499d1f9d028714f6' }, "Date Selector"), index.h("udp-date-selector", { key: '0d001fa6aea835854f59a5adce3f86e91ecedad9', label: "Uncontrolled Date", initialValue: "2024-01-15", onChange: (e) => console.log('Date changed:', e.detail) })), index.h("div", { key: '2adb1279494c4bef294fc4cdfab08a1e9d5dd51f', class: "input-example" }, index.h("h3", { key: 'b345f7f9dd7613ae3c90af685c6d7363b1fa5694' }, "Time Selector"), index.h("udp-time-selector", { key: '0b81754404c91875178909823c51a77821ba713c', label: "Uncontrolled Time", initialValue: "14:30", onChange: (e) => console.log('Time changed:', e.detail) })), index.h("div", { key: 'e612112a0cfbad0378ce23559301468bbab528dd', class: "input-example" }, index.h("h3", { key: '58e3be8c3091b4375728653aa1025dd0800dea3a' }, "DateTime Selector"), index.h("udp-datetime-selector", { key: 'a66319f6db6bc35756b3cf0ed3f224024eecf0c4', label: "Uncontrolled DateTime", initialValue: "2024-01-15T14:30", onChange: (e) => console.log('DateTime changed:', e.detail) })), index.h("div", { key: '1b71ad2e2c0b7e8087202fa03abdd0ec68a3f397', class: "input-example" }, index.h("h3", { key: '1b4818d107d60a9fca534ccba3c858860078b371' }, "UDP Selector"), index.h("udp-selector", { key: 'b53bdbabed328bc79fb7ea4597ffe36a26474d93', label: "Uncontrolled Selector", options: this.selectorOptions, initialValue: "option2", onChange: (e) => console.log('Selector changed:', e.detail) })))), index.h("section", { key: 'beaa194b45bd4fac58599a4a5e0d373c8101a743', class: "example-section" }, index.h("h2", { key: '05164bd4b352c81513d5c4c41fdd8998e5426534' }, "Form-wrapped Components"), index.h("p", { key: '0c4485a9dacf1f32b9c80f17d2521bf50fab2029' }, "Components integrated with stencil-form and stencil-field for validation and state management."), index.h("stencil-form", { key: '05de0c6af9963c337286a07a7058dc19174dd69a', 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: 'd35fe74a1e26cf0b8f398e9c894c8f1a5da45a48', class: "form-grid" }, index.h("stencil-field", { key: 'd77c0d4cc9d9cffb255eff419a5b0af8b561947e', name: "formTextField" }, index.h("text-field", { key: '0410f7248f9b229be53fcd674caeda0c65b05fe2', label: "Form Text Field", placeholder: "Enter text...", required: true })), index.h("stencil-field", { key: '48fba9a081504e2a0bea41f27ce0325dc914991d', name: "formNumericField" }, index.h("numeric-field", { key: '7f9ec15a7f6f0dbe373edff972efb2c81e2b558d', label: "Form Numeric Field", placeholder: "Enter number...", min: "0", max: "100", required: true })), index.h("stencil-field", { key: '2825b9b6932a7d66869f9ec08c60dc86a7d913da', name: "formTextArea" }, index.h("text-area", { key: '34b58939f90b746909880b22902bd7329d236cf4', label: "Form Text Area", placeholder: "Enter description...", required: true, minRows: 3 })), index.h("stencil-field", { key: '8ee8d90cf1c56d1a8f5f6d0dfd87fb8369a474e3', name: "formCheckbox" }, index.h("check-box", { key: 'f63e26765d059b3d950b06e00cb1e3f398247e9e', label: "Accept Terms and Conditions", required: true })), index.h("stencil-field", { key: '9c3412c4e9b54d1ef35b53af12246e81af00ff1b', name: "formToggle" }, index.h("stencil-toggle", { key: '700b07f98704353b99c936b26eb0b4142ff6a62a', label: "Enable Notifications" })), index.h("stencil-field", { key: '1698b7eee1656bf216498f09f7817307b74666b8', name: "formDate" }, index.h("udp-date-selector", { key: '8e8fc86fa7d371fabc6bf9eb72fbdd6e5e798102', label: "Form Date", required: true })), index.h("stencil-field", { key: 'b38b2317b83b226d34c0dc9491b8357ea8db261c', name: "formTime" }, index.h("udp-time-selector", { key: '570831455cbdc786acb1c06cff4c0089364999a9', label: "Form Time" })), index.h("stencil-field", { key: '71fc5f623dc700cfe77456d012dfa6e53a9d169e', name: "formSelector" }, index.h("udp-selector", { key: '22573dcbcb86203b9fe3ba0e79679225ad93eed8', label: "Form Selector", options: this.selectorOptions, required: true })), index.h("stencil-field", { key: '3455ddb62d6e341a58c78dd2a9820d2eb326399c', name: "formFiles" }, index.h("file-upload", { key: '2ca7724c7443075b94da339efdf7b23e404a72d8', label: "Form File Upload", allowMultiple: true }))), index.h("div", { key: '6d070a36e05b2bdf3928fce96d51a8e7bc42e9e0', class: "form-actions" }, index.h("button", { key: '7233a784011bd65fd5fe25105a4afa36cfad9bbd', type: "submit", class: "submit-button" }, "Submit Form"))), index.h("div", { key: 'b9b2382fa2f27d159a7e586479e2325b385b3163', class: "form-values" }, index.h("h3", { key: 'fc96b6c576f8198514a7c7aee5ae953eb8a752cd' }, "Current Form Values:"), index.h("pre", { key: '8fdc93279968950235a62a5b4022b0f578bbe993' }, JSON.stringify(this.formValues, null, 2)))), index.h("section", { key: '2731e1a0beedccacb1bbb34efb3608855769bbcb', class: "example-section" }, index.h("h2", { key: 'bb06ef8c5593615f101046e448291d512d6b4375' }, "Additional Examples"), index.h("p", { key: 'ab93ddb0de3d6606cc6285a0ec2e397f453846b5' }, "More complex configurations and specialized use cases."), index.h("div", { key: 'b1d7de6e2daa82f758e147e93831f4c3a327756e', class: "input-grid" }, index.h("div", { key: 'a65e4e5ff0a7950743529e441eeb6c0c67d16774', class: "input-example" }, index.h("h3", { key: '787e43f64af484ea59ad6a860be0aae3ea8ec95d' }, "Multi-Select UDP Selector"), index.h("udp-selector", { key: '0b79b2f43a252f631176f73403aac729f69c5af6', 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: '270209ebf674a2c4ce1b8211e11254f92c581735', class: "input-example" }, index.h("h3", { key: '967bc8d45e1c62d6a019f179a957f8e496160ba3' }, "Large UDP Selector"), index.h("udp-selector", { key: 'dbcd9fb9acf787233a62c4ff3bba8fbdbc982a71', label: "Large Selector", options: this.selectorOptions, large: true, initialValue: "option2", onChange: (e) => console.log('Large selector changed:', e.detail) })), index.h("div", { key: 'bc60bade3cb2b8b71f3cd7c55ce41faac4ad1d5f', class: "input-example" }, index.h("h3", { key: 'a9e11f6c997cd208d46f13e9aa7a74343d0c6e58' }, "File Upload with Type Restrictions"), index.h("file-upload", { key: '7dff9c55cf4741c542c4aae3dc60e36e4a9caa3e', 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: 'cc464aa2b13e6a7852c735279094097675f68a71', class: "input-example" }, index.h("h3", { key: 'd06ed109dc3967f56f369a2806514d4c3987c2ca' }, "Disabled Components"), index.h("div", { key: 'f7295d2fdd1a89191aba44a0948e74228a8f056b', class: "disabled-examples" }, index.h("text-field", { key: '9cafed2788920b6f772abb0cda0006f94c7f7076', label: "Disabled Text Field", value: "Cannot edit this", disabled: true }), index.h("check-box", { key: 'f7189fc4fd08c68970c5d97a1cc6516eb927e75c', label: "Disabled Checkbox", checked: true, disabled: true }), index.h("udp-selector", { key: 'b34905240d9b8f957a32791f3cba99cdf1128eb9', label: "Disabled Selector", options: this.selectorOptions, value: "option1", disabled: true })))))));
     }
 };
 InputsExample.style = inputsExampleCss;