udp-stencil-component-library 25.18.1-beta.8 → 25.18.1-beta.9

package/dist/cjs/index.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs.js","sources":["src/theme/theme-utils.ts","src/udp-utilities/layout/breakpoints/breakpoints.ts","src/udp-utilities/layout/breakpoints/useMatchBreakpoint.ts"],"sourcesContent":["export function setTheme(themeName: string): void {\n    document.documentElement.setAttribute('data-theme', themeName);\n}","// Helper function to get the value of a CSS variable from the :root\nfunction getCssVariableValue(variable) {\n  return getComputedStyle(document.documentElement).getPropertyValue(variable);\n}\n\nexport const breakpoints = {\n  xs: `(max-width: ${getCssVariableValue('--breakpoint-xs-max')}px)`,\n  sm: `(min-width: ${getCssVariableValue('--breakpoint-sm-min')}px) and (max-width: ${getCssVariableValue('--breakpoint-sm-max')}px)`,\n  md: `(min-width: ${getCssVariableValue('--breakpoint-md-min')}px) and (max-width: ${getCssVariableValue('--breakpoint-md-max')}px)`,\n  lg: `(min-width: ${getCssVariableValue('--breakpoint-lg-min')}px) and (max-width: ${getCssVariableValue('--breakpoint-lg-max')}px)`,\n  xl: `(min-width: ${getCssVariableValue('--breakpoint-xl-min')}px)`,\n};\n\n\n\n\n// export const breakpoints = {\n//     xs: '(max-width: 599px)',\n//     sm: '(min-width: 600px) and (max-width: 959px)',\n//     md: '(min-width: 960px) and (max-width: 1279px)',\n//     lg: '(min-width: 1280px) and (max-width: 1919px)',\n//     xl: '(min-width: 1920px)',\n//   };\n  ","import { breakpoints } from './breakpoints';\n\nexport function useMatchBreakpoint(breakpointKey: keyof typeof breakpoints): boolean {\n  if (typeof window === 'undefined') return false; // SSR or build-time rendering\n\n  const query = breakpoints[breakpointKey];\n  const mediaQueryList = window.matchMedia(query);\n  return mediaQueryList.matches;\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAAM,SAAU,QAAQ,CAAC,SAAiB,EAAA;IACtC,QAAQ,CAAC,eAAe,CAAC,YAAY,CAAC,YAAY,EAAE,SAAS,CAAC;AAClE;;ACFA;AACA,SAAS,mBAAmB,CAAC,QAAQ,EAAA;IACnC,OAAO,gBAAgB,CAAC,QAAQ,CAAC,eAAe,CAAC,CAAC,gBAAgB,CAAC,QAAQ,CAAC;AAC9E;AAEO,MAAM,WAAW,GAAG;AACzB,IAAA,EAAE,EAAE,CAAe,YAAA,EAAA,mBAAmB,CAAC,qBAAqB,CAAC,CAAK,GAAA,CAAA;IAClE,EAAE,EAAE,CAAe,YAAA,EAAA,mBAAmB,CAAC,qBAAqB,CAAC,CAAA,oBAAA,EAAuB,mBAAmB,CAAC,qBAAqB,CAAC,CAAK,GAAA,CAAA;IACnI,EAAE,EAAE,CAAe,YAAA,EAAA,mBAAmB,CAAC,qBAAqB,CAAC,CAAA,oBAAA,EAAuB,mBAAmB,CAAC,qBAAqB,CAAC,CAAK,GAAA,CAAA;IACnI,EAAE,EAAE,CAAe,YAAA,EAAA,mBAAmB,CAAC,qBAAqB,CAAC,CAAA,oBAAA,EAAuB,mBAAmB,CAAC,qBAAqB,CAAC,CAAK,GAAA,CAAA;AACnI,IAAA,EAAE,EAAE,CAAe,YAAA,EAAA,mBAAmB,CAAC,qBAAqB,CAAC,CAAK,GAAA,CAAA;CACnE;AAKD;AACA;AACA;AACA;AACA;AACA;AACA;;ACpBM,SAAU,kBAAkB,CAAC,aAAuC,EAAA;IACxE,IAAI,OAAO,MAAM,KAAK,WAAW;QAAE,OAAO,KAAK,CAAC;AAEhD,IAAA,MAAM,KAAK,GAAG,WAAW,CAAC,aAAa,CAAC;IACxC,MAAM,cAAc,GAAG,MAAM,CAAC,UAAU,CAAC,KAAK,CAAC;IAC/C,OAAO,cAAc,CAAC,OAAO;AAC/B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.cjs.js","sources":["src/theme/theme-utils.ts","src/udp-utilities/api-udp/apiMutate.ts","src/udp-utilities/layout/breakpoints/breakpoints.ts","src/udp-utilities/layout/breakpoints/useMatchBreakpoint.ts"],"sourcesContent":["export function setTheme(themeName: string): void {\n    document.documentElement.setAttribute('data-theme', themeName);\n}","\nimport Axios from 'axios';\n\n/**\n * @deprecated This component is deprecated and will be removed in a future version.\n * Use 'makeApiCall' instead\n */\n\ninterface Config {\n    headers?: {\n      [key: string]: string;\n    };\n    [key: string]: any;\n  }\n\n\n// export const getAccessToken = async () => {\n//     return 'eyJhbGciOiJSUzI1NiIsImtpZCI6Ik1Bc2V1MXplcmJDaVA0cW5UNUtkRlFjaFNpTHpiVDJieFdCVVBVXzYtNGMiLCJ0eXAiOiJKV1QifQ.eyJzdWIiOiI5YzI0MTNiZS1hNTZiLTQ5NzAtOWVmMC0wZTNmMDI4Y2E1YWEiLCJlbWFpbCI6ImdyZWdvcnlAcmVkd2Vya3Mub3JnIiwibmFtZSI6IkdyZWdvcnkgVGhvbWFzIiwiZ2l2ZW5fbmFtZSI6IkdyZWdvcnkiLCJmYW1pbHlfbmFtZSI6IlRob21hcyIsInVuaXR5VXNlcklkIjoiOGZlM2I1Y2UtNmE5NC00ZmY0LWIzNWMtYmUyNTk2ZWExMzgwIiwidGVuYW50c0xpc3QiOiJbe1wiVGVuYW50SWRcIjpcImY4NmE5YjdjLWJhYjAtNDI4MS04OWEyLTUyYjRjYWY4OWZhYlwiLFwiVGVuYW50TmFtZVwiOlwiVW5pdmVydXMgU29mdHdhcmUgSW5jXCIsXCJQcm9kdWN0c1wiOlszNiwzNywzNCwzNSwxLDMsNCw1LDYsNyw4LDksMTAsMTEsMTIsMTMsMTQsMTUsMTYsMTcsMTgsMTksMjAsMjEsMjIsMjMsMjQsMjUsMjYsMjcsMjgsMjksMiw0MSw1Ml0sXCJSb2xlc1wiOltcIjYyMzRiNzQwLWIyNmYtNDE4MS05Yjk1LTRjNDA2MzQ1MzhjMVwiXX0se1wiVGVuYW50SWRcIjpcIjk4ZjUwYTUxLTdjNjEtNDMxMC1iNWI0LTNhOWZlMDJjODEyM1wiLFwiVGVuYW50TmFtZVwiOlwiU21hcnRHcmlkQ0lTXCIsXCJQcm9kdWN0c1wiOlsxLDMsNCw1LDQxLDYsOCw3LDksMTEsMTAsMTUsMTYsMTQsMTcsMTgsMTksMjAsMjEsMjIsMjMsMjQsMjUsMjYsMTMsMTIsMjgsMjksMjcsMzBdLFwiUm9sZXNcIjpbXCI2MjM0Yjc0MC1iMjZmLTQxODEtOWI5NS00YzQwNjM0NTM4YzFcIl19XSIsInRpZCI6IjIxODg2NTI4LTM2MDItNGJmMi1hMzZiLTI5YjFkMTUyZTExYiIsImlzRm9yZ290UGFzc3dvcmQiOmZhbHNlLCJub25jZSI6IjQ3NDdkMTJhLWEzMGItNDRlMC1iNDllLTVmYmY0YjZhOTdmNiIsInNjcCI6ImFwaV9hY2Nlc3MiLCJhenAiOiJmYzUxNGZkOC01NGIzLTRmYWItYmRjOC1hZTdkY2Q4YzY1NzUiLCJ2ZXIiOiIxLjAiLCJpYXQiOjE2OTYzNTMzMTMsImF1ZCI6IjNmOTY2NDFmLTk0NDItNDUzMi1iNWJiLTdkYmM5Y2EzZjNhNSIsImV4cCI6MTY5NjM1NjkxMywiaXNzIjoiaHR0cHM6Ly91bml2ZXJ1c3VuaXR5ZGV2LmIyY2xvZ2luLmNvbS8yMTg4NjUyOC0zNjAyLTRiZjItYTM2Yi0yOWIxZDE1MmUxMWIvdjIuMC8iLCJuYmYiOjE2OTYzNTMzMTN9.Xcp8JSrF9mT3O3DSdqYmGRSAjo5Km4-XkLUDEuk3fXJnAPPF7vKtApSvA65iAlhqtyB4JY6idDrzWG5zgpyEvpTvc6Kvj6RjHXEkqMmsY6H1nFxAsIvfL72Sl8U4lBD9c4MOO1r5itfjsPkdZhV7ZtQi9xbFO0KTZmtLpET0hC0e8DA61uKAq2R5olfXi8pJThJGRRWleWFXwyatyjXIOfRpvuTfE5ls1zYSo62_7_FXOVAyAf-CrDLZFga8QYd4y5oncUAkbP4Lja0jDkHvvJhBRz67FePcWhJWo_6ofqGLRFBpFneduwgVgDMf6RY5mJa-5dlwDWE8YTqcuNMmlg'\n//   };\n\n// export const getMergedConfig = (accessToken: string | null, config?: Config): Config => {\n//     const headers = config?.headers ? { ...config.headers } : {};\n\n//     headers.currentTenantId = headers.currentTenantId || \"f86a9b7c-bab0-4281-89a2-52b4caf89fab\"; // Your currentTenantId\n//     if (accessToken) headers.Authorization = headers.Authorization || `Bearer ${accessToken}`;\n\n//     return { ...config, headers };\n//   };\n\n\n//   export const apiMutate = async (\n//     baseURL: string,\n//     url: string,\n//     config: Config,\n//     data: any,\n//     accessToken: string | null\n//   ) => {\n//     const fullURL = { url: `${baseURL}/${url}` };\n//     const mergedConfig = getMergedConfig(accessToken, config);\n//     return Axios({ ...fullURL, ...mergedConfig, ...data });\n//   };\n\n\nexport const getMergedConfig = (tenantId: string, config?: Config): Config => {\n  const headers = config?.headers ? { ...config.headers } : {};\n  headers.currentTenantId = tenantId;\n  //if (accessToken) headers.Authorization = headers.Authorization || `Bearer ${accessToken}`;\n\n  return { ...config, headers };\n};\n\n// export const apiMutate = async (\n//   baseURL: string,\n//   url: string,\n//   config: Config,\n//   data: any,\n//   accessToken: string | null,\n//   tenantId: string // New tenantId parameter\n// ) => {\n//   const fullURL = { url: `${baseURL}/${url}` };\n//   const mergedConfig = getMergedConfig(tenantId, accessToken, config); // Pass the tenantId\n//   return Axios({ ...fullURL, ...mergedConfig, ...data });\n// };\n\nexport const apiMutate = async (\n  baseURL: string,\n  url: string,\n  config: Config,\n  data: any\n) => {\n  const fullURL = { url: `${baseURL}/${url}` };\n  return Axios({ ...fullURL, ...config, ...data });\n};\n\n\n","// Helper function to get the value of a CSS variable from the :root\nfunction getCssVariableValue(variable) {\n  return getComputedStyle(document.documentElement).getPropertyValue(variable);\n}\n\nexport const breakpoints = {\n  xs: `(max-width: ${getCssVariableValue('--breakpoint-xs-max')}px)`,\n  sm: `(min-width: ${getCssVariableValue('--breakpoint-sm-min')}px) and (max-width: ${getCssVariableValue('--breakpoint-sm-max')}px)`,\n  md: `(min-width: ${getCssVariableValue('--breakpoint-md-min')}px) and (max-width: ${getCssVariableValue('--breakpoint-md-max')}px)`,\n  lg: `(min-width: ${getCssVariableValue('--breakpoint-lg-min')}px) and (max-width: ${getCssVariableValue('--breakpoint-lg-max')}px)`,\n  xl: `(min-width: ${getCssVariableValue('--breakpoint-xl-min')}px)`,\n};\n\n\n\n\n// export const breakpoints = {\n//     xs: '(max-width: 599px)',\n//     sm: '(min-width: 600px) and (max-width: 959px)',\n//     md: '(min-width: 960px) and (max-width: 1279px)',\n//     lg: '(min-width: 1280px) and (max-width: 1919px)',\n//     xl: '(min-width: 1920px)',\n//   };\n  ","import { breakpoints } from './breakpoints';\n\nexport function useMatchBreakpoint(breakpointKey: keyof typeof breakpoints): boolean {\n  if (typeof window === 'undefined') return false; // SSR or build-time rendering\n\n  const query = breakpoints[breakpointKey];\n  const mediaQueryList = window.matchMedia(query);\n  return mediaQueryList.matches;\n}\n"],"names":["Axios"],"mappings":";;;;;;;;;;;;;;;;;AAAM,SAAU,QAAQ,CAAC,SAAiB,EAAA;IACtC,QAAQ,CAAC,eAAe,CAAC,YAAY,CAAC,YAAY,EAAE,SAAS,CAAC;AAClE;;ACcA;AACA;AACA;AAEA;AACA;AAEA;AACA;AAEA;AACA;AAGA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;MAGa,eAAe,GAAG,CAAC,QAAgB,EAAE,MAAe,KAAY;AAC3E,IAAA,MAAM,OAAO,GAAG,CAAA,MAAM,aAAN,MAAM,KAAA,MAAA,GAAA,MAAA,GAAN,MAAM,CAAE,OAAO,IAAE,MAAA,CAAA,MAAA,CAAA,EAAA,EAAM,MAAM,CAAC,OAAO,IAAK,EAAE;AAC5D,IAAA,OAAO,CAAC,eAAe,GAAG,QAAQ;;AAGlC,IAAA,OAAY,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EAAA,MAAM,CAAE,EAAA,EAAA,OAAO,EAAG,CAAA;AAChC;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEO,MAAM,SAAS,GAAG,OACvB,OAAe,EACf,GAAW,EACX,MAAc,EACd,IAAS,KACP;IACF,MAAM,OAAO,GAAG,EAAE,GAAG,EAAE,CAAG,EAAA,OAAO,CAAI,CAAA,EAAA,GAAG,CAAE,CAAA,EAAE;IAC5C,OAAOA,sBAAK,+CAAM,OAAO,CAAA,EAAK,MAAM,CAAK,EAAA,IAAI,EAAG;AAClD;;ACxEA;AACA,SAAS,mBAAmB,CAAC,QAAQ,EAAA;IACnC,OAAO,gBAAgB,CAAC,QAAQ,CAAC,eAAe,CAAC,CAAC,gBAAgB,CAAC,QAAQ,CAAC;AAC9E;AAEO,MAAM,WAAW,GAAG;AACzB,IAAA,EAAE,EAAE,CAAe,YAAA,EAAA,mBAAmB,CAAC,qBAAqB,CAAC,CAAK,GAAA,CAAA;IAClE,EAAE,EAAE,CAAe,YAAA,EAAA,mBAAmB,CAAC,qBAAqB,CAAC,CAAA,oBAAA,EAAuB,mBAAmB,CAAC,qBAAqB,CAAC,CAAK,GAAA,CAAA;IACnI,EAAE,EAAE,CAAe,YAAA,EAAA,mBAAmB,CAAC,qBAAqB,CAAC,CAAA,oBAAA,EAAuB,mBAAmB,CAAC,qBAAqB,CAAC,CAAK,GAAA,CAAA;IACnI,EAAE,EAAE,CAAe,YAAA,EAAA,mBAAmB,CAAC,qBAAqB,CAAC,CAAA,oBAAA,EAAuB,mBAAmB,CAAC,qBAAqB,CAAC,CAAK,GAAA,CAAA;AACnI,IAAA,EAAE,EAAE,CAAe,YAAA,EAAA,mBAAmB,CAAC,qBAAqB,CAAC,CAAK,GAAA,CAAA;CACnE;AAKD;AACA;AACA;AACA;AACA;AACA;AACA;;ACpBM,SAAU,kBAAkB,CAAC,aAAuC,EAAA;IACxE,IAAI,OAAO,MAAM,KAAK,WAAW;QAAE,OAAO,KAAK,CAAC;AAEhD,IAAA,MAAM,KAAK,GAAG,WAAW,CAAC,aAAa,CAAC;IACxC,MAAM,cAAc,GAAG,MAAM,CAAC,UAAU,CAAC,KAAK,CAAC;IAC/C,OAAO,cAAc,CAAC,OAAO;AAC/B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

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

@@ -88,7 +88,7 @@ const InputsExample = class {
         };
     }
     render() {
-        return (index.h("div", { key: '6b50ded2b5937f9d1c0a103393b99e2a6f48c6e8', class: "inputs-example" }, index.h("h1", { key: '7b2298487532b8508bc4fe15e7b46879fd60399d' }, "Input Components Examples"), index.h("section", { key: '475beb2ff7e6f0d2a94f545efc068c93ebcbd6e8', class: "example-section" }, index.h("h2", { key: 'bb8636068a53c2be053bba146de8d6a079f5df2d' }, "Controlled Components"), index.h("p", { key: '2d29719a77cafa91d6daf88380dacd0978e1915a' }, "Parent component manages state and passes values to child components."), index.h("div", { key: '293c65cb3f38c26cabe875d9ab104d2e276b4b3c', class: "input-grid" }, index.h("div", { key: 'b88953b136c63c09704ae12a864997a6899c3d6f', class: "input-example" }, index.h("h3", { key: '8d27f5037a4064c4ae7df9622fd2a42314782fc0' }, "Text Field"), index.h("text-field", { key: '19190ab403f17711e8a4f344ac44d4542ac127fc', label: "Controlled Text Input", placeholder: "Enter text...", value: this.controlledTextValue }), index.h("p", { key: 'feaeed71f390846c35eee957cafb60fc1600d98b', class: "value-display" }, "Value: ", this.controlledTextValue)), index.h("div", { key: '20c5515f35e06ad1648682ea752ec0561008150a', class: "input-example" }, index.h("h3", { key: '4345172c87f8c427166b2e5533007470513e5c7f' }, "Numeric Field"), index.h("numeric-field", { key: '27556ce43e88bb47073731c8383bcd4f8eb741be', label: "Controlled Numeric Input", placeholder: "Enter number...", value: this.controlledNumericValue, min: "0", max: "100", step: "1", onChange: this.handleControlledNumericChange }), index.h("p", { key: 'cfd7b6473c71ae63e2d337a0ed38cac7fe488249', class: "value-display" }, "Value: ", this.controlledNumericValue)), index.h("div", { key: '1a5ab5c84878d698b23129dc8f8b7f2a46a74488', class: "input-example" }, index.h("h3", { key: '8ff0bd3644b2027f1ccf4607a001fa896ee74809' }, "Text Area"), index.h("text-area", { key: '8b54d457a09424321443dc4e48e140431ae45a1a', label: "Controlled Text Area", placeholder: "Enter description...", value: this.controlledTextAreaValue, minRows: 3, maxRows: 6 }), index.h("p", { key: 'e24c877d209de29cbb9aa8596d022036182388c4', class: "value-display" }, "Value: ", this.controlledTextAreaValue)), index.h("div", { key: 'cb3d16fcfef9bd860c9c789cdde68990c91735c4', class: "input-example" }, index.h("h3", { key: '8e91f172f4e98d293845738a8afb9584bb5198bf' }, "Checkbox"), index.h("check-box", { key: '676dbaabea69be3f5f91d17c7986adca52b06da1', label: "Controlled Checkbox", checked: this.controlledCheckboxValue, onChange: this.handleControlledCheckboxChange }), index.h("p", { key: '43a8f4032222fd5368f7fca421ff66f2f292b26c', class: "value-display" }, "Checked: ", this.controlledCheckboxValue.toString())), index.h("div", { key: '17a38692b2912c00977d22a89cf900fe4db8413f', class: "input-example" }, index.h("h3", { key: '3715bf330765086639bc0980352f1c826a7e54db' }, "Toggle"), index.h("stencil-toggle", { key: 'b62845365cf967114fc651ec4588cdb5af35994f', label: "Controlled Toggle", checked: this.controlledToggleValue, onChange: this.handleControlledToggleChange }), index.h("p", { key: '97565ba674f96a56f053c15ee4b305b00fca3cd9', class: "value-display" }, "Toggled: ", this.controlledToggleValue.toString())), index.h("div", { key: '7f52b0eb5bf59430918c4742de2d90a24bb22b72', class: "input-example" }, index.h("h3", { key: 'd8648dd0e8239f2f8e15e7177048b2586930e1aa' }, "Date Selector"), index.h("udp-date-selector", { key: '8e8bc3b6eba6dc91cb2ba8f19b8c16f810fa101b', label: "Controlled Date", value: this.controlledDateValue, onChange: this.handleControlledDateChange }), index.h("p", { key: '5e0f507d8f80e3a5506eb03a50e00341fb7f089d', class: "value-display" }, "Date: ", this.controlledDateValue)), index.h("div", { key: 'f96eee6cc3a0035c4d170b4675ce4b42ae0316f2', class: "input-example" }, index.h("h3", { key: '869940774405ef3881864c796082b6748b9d312b' }, "DateTime Selector"), index.h("udp-datetime-selector", { key: 'c7359174b839e386b879fce4bdbcbc94bc16f47f', label: "Controlled DateTime", value: this.controlledDateTimeValue, onChange: this.handleControlledDateTimeChange }), index.h("p", { key: '89f0e05b0becbfe819f400614efe04a3ba0146d0', class: "value-display" }, "DateTime: ", this.controlledDateTimeValue)), index.h("div", { key: 'fe08bb2860efc4214cd1c84a01324153fd42a6d6', class: "input-example" }, index.h("h3", { key: '9cc8d81ee4f85a69a8f15eb5daa16dbfd92b9f7a' }, "Time Selector"), index.h("udp-time-selector", { key: 'fae61e563015df43d76b31b6cb46e6518d45bc04', label: "Controlled Time", value: this.controlledTimeValue, onChange: this.handleControlledTimeChange }), index.h("p", { key: '62315ae45eb080ea450f35fee1f2fe76e83bd829', class: "value-display" }, "Time: ", this.controlledTimeValue)), index.h("div", { key: '571735fe6c7a126591c891da131bc6484e161bbc', class: "input-example" }, index.h("h3", { key: 'bbdba518d050d2442a6a2f55978e45f49ddf6e3f' }, "UDP Selector"), index.h("udp-selector", { key: '85bbdda76d8029a9bd0984484f57732aa7b66f67', label: "Controlled Selector", options: this.selectorOptions, value: this.controlledSelectorValue, onChange: this.handleControlledSelectorChange }), index.h("p", { key: 'c4d6858e679bafdb072c6e2f24df9fe979e9a2b1', class: "value-display" }, "Selected: ", this.controlledSelectorValue)), index.h("div", { key: '086135c1f8cfeb2eb5f9cd54436356856f6594b0', class: "input-example" }, index.h("h3", { key: '342be830da34c811266d9a467faa011f07c17c10' }, "File Upload"), index.h("file-upload", { key: '9344549ecc1570026cd900d6a80d3eb1975f0f94', label: "Controlled File Upload", allowMultiple: true, onChange: this.handleControlledFileChange }), index.h("p", { key: 'd5c32410a303357356be7710ac8bc51c3f6d8d71', class: "value-display" }, "Files: ", this.controlledFileValue.length, " selected")))), index.h("section", { key: '90a91939cbf4b5cd5d0e714ec6dbc572148a2530', class: "example-section" }, index.h("h2", { key: '40c14e1baae2826964bc2e41bb6230c6ece00d31' }, "Uncontrolled Components"), index.h("p", { key: '0216bbfb7442780936edc44866341ec2d1b7b996' }, "Components manage their own state with initial values."), index.h("div", { key: '75fc67742f1edf4fafe87417bcfcbde428f86d44', class: "input-grid" }, index.h("div", { key: 'dc2f84e6792250d96d4e82b0474701e568540375', class: "input-example" }, index.h("h3", { key: '6d17fcce74341e47330f203a1251a37ecc3c6498' }, "Text Field"), index.h("text-field", { key: '436a46aa93ffa40592380ea36be25e5ad78ac913', label: "Uncontrolled Text Input", placeholder: "Enter text...", initialValue: "Initial text value", onChange: (e) => console.log('Text changed:', e.detail) })), index.h("div", { key: '013560293f04950fd08cd1d9829830adc9050c42', class: "input-example" }, index.h("h3", { key: '54d50556c57fec37819b0a64ed6c58788ad8dcda' }, "Numeric Field"), index.h("numeric-field", { key: 'de05429463b1619df59ccbb378610ead45276acd', 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: 'ccdd65e720e78172bbdf79223807fde6fce10b2c', class: "input-example" }, index.h("h3", { key: '4bc9cb7c8a5473cc35e25955dd755be1b13c0748' }, "Text Area"), index.h("text-area", { key: 'e6620c10db672e8184ccf43895bd6805808c2cf4', 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: '352cfd880f026ff7a14d596599aa665734ff21a0', class: "input-example" }, index.h("h3", { key: '7c6b5e8b1d83b85fb02d4107a5598a696e0bdc86' }, "Checkbox"), index.h("check-box", { key: '171a78ba1b898c08cf73e84e1aa91e24c20ae1c0', label: "Uncontrolled Checkbox", initialValue: "true", onChange: (e) => console.log('Checkbox changed:', e.detail) })), index.h("div", { key: 'ff81933cfb80a36b515ca5c0ebed3a8172bcf152', class: "input-example" }, index.h("h3", { key: '06d7c7657af8c0d0b57fbf301bf675b6f401f1d8' }, "Toggle"), index.h("stencil-toggle", { key: 'c3fa6566984d2f8efa177f336d9c4b21400753e3', label: "Uncontrolled Toggle", initialValue: "false", onChange: (e) => console.log('Toggle changed:', e.detail) })), index.h("div", { key: '52428a2236893246268e976eccefc5d0ed420077', class: "input-example" }, index.h("h3", { key: '4bd154912f6328e88fae791898b0a74942b7e948' }, "Date Selector"), index.h("udp-date-selector", { key: 'a206c079f63dc834363c1a13df8593571ef31924', label: "Uncontrolled Date", initialValue: "2024-01-15", onChange: (e) => console.log('Date changed:', e.detail) })), index.h("div", { key: '797b0a55e6cb4c66e642bab72e68da01c212bb73', class: "input-example" }, index.h("h3", { key: '20b438beff287b412d2e692e12f1b96f8c8fa5aa' }, "Time Selector"), index.h("udp-time-selector", { key: '74e861d9f070225bdc7b8b7b9d6f9fb87a27fb1e', label: "Uncontrolled Time", initialValue: "14:30", onChange: (e) => console.log('Time changed:', e.detail) })), index.h("div", { key: '8a43ae37f986fd8c81d091be946e9d3407b593a1', class: "input-example" }, index.h("h3", { key: 'bdbf60f7deddef385c78a9bf7f05e50ef788792c' }, "DateTime Selector"), index.h("udp-datetime-selector", { key: 'f3917bebe83cc1a55d7caa1acec5ec991fab115c', label: "Uncontrolled DateTime", initialValue: "2024-01-15T14:30", onChange: (e) => console.log('DateTime changed:', e.detail) })), index.h("div", { key: '1782c0c0af9bf367d5a65748da1b5f4882ff478f', class: "input-example" }, index.h("h3", { key: 'a530d1d5750b4e6927bafb056211d420cd86cb02' }, "UDP Selector"), index.h("udp-selector", { key: 'e6935be37209f2872a10429544651ed8ae3ae9eb', label: "Uncontrolled Selector", options: this.selectorOptions, initialValue: "option2", onChange: (e) => console.log('Selector changed:', e.detail) })))), index.h("section", { key: '526277689a5ab71c53aea1a15dc1e005e3513337', class: "example-section" }, index.h("h2", { key: '52b1138ff192ed102b15db303cd565a64d2bfe40' }, "Form-wrapped Components"), index.h("p", { key: 'd7e086a0b2a635d184c324219e6fa2137da4c717' }, "Components integrated with stencil-form and stencil-field for validation and state management."), index.h("stencil-form", { key: 'b9914d0287d025ce6065f5985d49fbfc230b2b7f', handleSubmit: this.handleFormSubmit, handleChange: this.handleFormChange, handleValidate: this.validateForm, initialValues: {
+        return (index.h("div", { key: 'abe574b3dd1ee9e8b5555c053d7a0d1795ecf3d2', class: "inputs-example" }, index.h("h1", { key: '3f9736c2634d1240445325f074550a697628c392' }, "Input Components Examples"), index.h("section", { key: 'ef2adb1eabd987a4f0911c565a60706ef0861838', class: "example-section" }, index.h("h2", { key: '985471cff514932a6119efa86c249e134c58cce9' }, "Controlled Components"), index.h("p", { key: '44b5615e94e430a2ae93e3fd5e67508cd1b827a7' }, "Parent component manages state and passes values to child components."), index.h("div", { key: 'c882daf38f8176964782426a4a47b1a50976ba56', class: "input-grid" }, index.h("div", { key: 'c1ea02fa5fb830a673d64373c076168f0c33e3d3', class: "input-example" }, index.h("h3", { key: '8cbd4d2a65d59ade7fb327a067f53c555978091c' }, "Text Field"), index.h("text-field", { key: '61bac0b58709a914da2743471059e56e825823f3', label: "Controlled Text Input", placeholder: "Enter text...", value: this.controlledTextValue }), index.h("p", { key: 'dcf347abd7e620abbf82272e72cdae3e89c854b8', class: "value-display" }, "Value: ", this.controlledTextValue)), index.h("div", { key: '0cd0ba9649a57a2a8e67783ebd9db655968ccd5a', class: "input-example" }, index.h("h3", { key: 'fc30ac3caf640e17970e0a671454d697603b6896' }, "Numeric Field"), index.h("numeric-field", { key: '4525bbcec3dad6efb51ad1a5b1a9d0670846bc29', label: "Controlled Numeric Input", placeholder: "Enter number...", value: this.controlledNumericValue, min: "0", max: "100", step: "1", onChange: this.handleControlledNumericChange }), index.h("p", { key: '46ec9b30518bf1ccee57e9cc157aa96d2145070e', class: "value-display" }, "Value: ", this.controlledNumericValue)), index.h("div", { key: '02432f038d8578704fa49728dc467ce7517b00d5', class: "input-example" }, index.h("h3", { key: '5afeb54ebe9bf80c0ec7f6e6d1d6c8fa58ac6555' }, "Text Area"), index.h("text-area", { key: '89571b2150d69e9357c9b35ee0dc3012bba1d2e2', label: "Controlled Text Area", placeholder: "Enter description...", value: this.controlledTextAreaValue, minRows: 3, maxRows: 6 }), index.h("p", { key: '399f0b7c25c51938f6ce8d20ef3525cda914f41a', class: "value-display" }, "Value: ", this.controlledTextAreaValue)), index.h("div", { key: '976a4f288abd9da3fac5cd90779da562eb1f07ba', class: "input-example" }, index.h("h3", { key: 'feefcc2fdd89f4c091e2201793154006eaa4ca53' }, "Checkbox"), index.h("check-box", { key: '093bdbaaad8215105d3c9da538283ebfd6fcc11b', label: "Controlled Checkbox", checked: this.controlledCheckboxValue, onChange: this.handleControlledCheckboxChange }), index.h("p", { key: '667b7b7d0e3f7f4e51810187492cd4fa5fadcbdf', class: "value-display" }, "Checked: ", this.controlledCheckboxValue.toString())), index.h("div", { key: 'fc1ca95d79dbbcb89afe5603a4f8883672cb436a', class: "input-example" }, index.h("h3", { key: '965039e721923d437dbb6c0902cb6b8b2510d655' }, "Toggle"), index.h("stencil-toggle", { key: '7277efc340ab67a278b6f757b3c14f9ff33a24ca', label: "Controlled Toggle", checked: this.controlledToggleValue, onChange: this.handleControlledToggleChange }), index.h("p", { key: '52102651ff84c1d153f2a0696936692ff131c939', class: "value-display" }, "Toggled: ", this.controlledToggleValue.toString())), index.h("div", { key: '67ab2eab1bbd6a6cef77e6023059380203549f23', class: "input-example" }, index.h("h3", { key: 'bbf9adab02f8dfdac8e4c239e7a141bec81c066d' }, "Date Selector"), index.h("udp-date-selector", { key: '8bedfbe54bb13a41da3d53dddbb0c010e6e0235b', label: "Controlled Date", value: this.controlledDateValue, onChange: this.handleControlledDateChange }), index.h("p", { key: '8ffc0601166cde3f2fee27717cb16d63faa18dbc', class: "value-display" }, "Date: ", this.controlledDateValue)), index.h("div", { key: 'd709b2c64bc0a947cbf84e1f7323f6c089a182e9', class: "input-example" }, index.h("h3", { key: '42570f2b76fa18c3a06bb03a4128e45345b1d684' }, "DateTime Selector"), index.h("udp-datetime-selector", { key: '9989a6608780b43c8483124b565e6a3107995a02', label: "Controlled DateTime", value: this.controlledDateTimeValue, onChange: this.handleControlledDateTimeChange }), index.h("p", { key: '8a6c073b570582335819610fe57b6b61897c8387', class: "value-display" }, "DateTime: ", this.controlledDateTimeValue)), index.h("div", { key: 'a8ba282442bcdcb4798e9bcc2e838dc55eaeed12', class: "input-example" }, index.h("h3", { key: 'ccc07b9aafc75da0b61a3398540cfe08e215e6a5' }, "Time Selector"), index.h("udp-time-selector", { key: '40bfc386f6755e56dfbc4729b06b1113a8e6dae7', label: "Controlled Time", value: this.controlledTimeValue, onChange: this.handleControlledTimeChange }), index.h("p", { key: 'f466b67b1b1505046ffaad2bba6923d5b3591c1b', class: "value-display" }, "Time: ", this.controlledTimeValue)), index.h("div", { key: 'ea8db02e6b30a60216f190167a416daf766413e6', class: "input-example" }, index.h("h3", { key: 'b8f9eb9738a90b9c3cbc6d0aad442e2d6de72f67' }, "UDP Selector"), index.h("udp-selector", { key: '1f6a4746cd9993cb22839836e81324d0a0dac46e', label: "Controlled Selector", options: this.selectorOptions, value: this.controlledSelectorValue, onChange: this.handleControlledSelectorChange }), index.h("p", { key: '71cbdcf34a2173262a05eec7e23bd0a4cdf32890', class: "value-display" }, "Selected: ", this.controlledSelectorValue)), index.h("div", { key: '6d5e79fe14b0c3e61082e0c66b15e42defbd7dfe', class: "input-example" }, index.h("h3", { key: '44c56123a225141f587c842e661a8220704cbfe2' }, "File Upload"), index.h("file-upload", { key: '0639032ddae96c0bf84c999f539186fcfbb92584', label: "Controlled File Upload", allowMultiple: true, onChange: this.handleControlledFileChange }), index.h("p", { key: '7d38b179ef0c273297d86ec87a2f2aa092d92a4c', class: "value-display" }, "Files: ", this.controlledFileValue.length, " selected")))), index.h("section", { key: '83721d6d04e915185fa2b1ec50e34cec4d59c046', class: "example-section" }, index.h("h2", { key: 'ecddf27279957c4fe5bae08fb24ecbc08ecbb3da' }, "Uncontrolled Components"), index.h("p", { key: '93a297887f6e409ffaaab3e7812da15501300a9b' }, "Components manage their own state with initial values."), index.h("div", { key: '4d194aac8a2b5eb8fe42e49007360f17d137c683', class: "input-grid" }, index.h("div", { key: 'a09c44a6dac38b8f659deaf936007ce7cc214a13', class: "input-example" }, index.h("h3", { key: '2baa46d8fa9302f02c6d86cf20ffef291620ad83' }, "Text Field"), index.h("text-field", { key: '36a99de8d0234cba87f18687753daa4dfe1df024', label: "Uncontrolled Text Input", placeholder: "Enter text...", initialValue: "Initial text value", onChange: (e) => console.log('Text changed:', e.detail) })), index.h("div", { key: 'edb2fab456f22e1a5cb21763716665ba84c1f9ab', class: "input-example" }, index.h("h3", { key: 'cfcb677a6e04f6a390adc3bc90354c03ab98e0d7' }, "Numeric Field"), index.h("numeric-field", { key: 'bbd691def478dedbfaa9eccfc1a360ca71062bbd', 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: 'f383a974e5d5013f9ff66a2b1467041764a25b3b', class: "input-example" }, index.h("h3", { key: 'b75c1110dee252c2f3b9cc6aa17853fab53a224c' }, "Text Area"), index.h("text-area", { key: 'bead59b231e55ace7c2c1526a41e15b960b8e589', 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: '1ffc58531976a94b7841828b158f20feb24533d6', class: "input-example" }, index.h("h3", { key: '85c1f83c5e36800138e6f9fc0a3455758269f8e5' }, "Checkbox"), index.h("check-box", { key: '485549b469db06cf06d7df72d2b70dbee642ed72', label: "Uncontrolled Checkbox", initialValue: "true", onChange: (e) => console.log('Checkbox changed:', e.detail) })), index.h("div", { key: '9c51bfd29db2b28522139a014f5ebe3d467b544f', class: "input-example" }, index.h("h3", { key: 'aede99484605af827cfe923d5d4419077d7a039a' }, "Toggle"), index.h("stencil-toggle", { key: '6ba3250373b30a98ebdfd6dfa12eccce62a8a6d1', label: "Uncontrolled Toggle", initialValue: "false", onChange: (e) => console.log('Toggle changed:', e.detail) })), index.h("div", { key: 'bc42bda9a39d3a8a275375d07253db09b8702326', class: "input-example" }, index.h("h3", { key: '81009826ecfa308fa57dda17569ec68870320517' }, "Date Selector"), index.h("udp-date-selector", { key: 'ae5560bf99c290fefbb9f0811d62821d8ed5794e', label: "Uncontrolled Date", initialValue: "2024-01-15", onChange: (e) => console.log('Date changed:', e.detail) })), index.h("div", { key: '5b7d02ca49b220eed707782140bbe351c6b81b26', class: "input-example" }, index.h("h3", { key: 'e436cb22a6acc962482ab5e5b5e3ab75f03f35c9' }, "Time Selector"), index.h("udp-time-selector", { key: '97d803f67a41154901ec7bd383873d7f598f7ea6', label: "Uncontrolled Time", initialValue: "14:30", onChange: (e) => console.log('Time changed:', e.detail) })), index.h("div", { key: 'e009a51f1822f659c9186a4f799e30db09e6fc69', class: "input-example" }, index.h("h3", { key: '01d6323eb9c95f06dd107087f40607ba3d19a13f' }, "DateTime Selector"), index.h("udp-datetime-selector", { key: 'e382cec5ae925a43aa2e93082640b40ab00e620a', label: "Uncontrolled DateTime", initialValue: "2024-01-15T14:30", onChange: (e) => console.log('DateTime changed:', e.detail) })), index.h("div", { key: '6c067ddb9ca71d9f123278cf8863196a2373c8e1', class: "input-example" }, index.h("h3", { key: 'b2d5b2440c379a36b656c9f9943d94c5fcf280b3' }, "UDP Selector"), index.h("udp-selector", { key: '4ec419aa4fe540b1ae7ce6b8b68e2cc312bf345d', label: "Uncontrolled Selector", options: this.selectorOptions, initialValue: "option2", onChange: (e) => console.log('Selector changed:', e.detail) })))), index.h("section", { key: '3d3acc421c6265b86f3d25610da860cbbc9c96bf', class: "example-section" }, index.h("h2", { key: '861e50880024ed20ad848a24b1e3fd4adefad106' }, "Form-wrapped Components"), index.h("p", { key: '866753115f082c69d4878ee415395cdcdc6a8a32' }, "Components integrated with stencil-form and stencil-field for validation and state management."), index.h("stencil-form", { key: 'd326ec45efbe5baada989d806adab38fb9fc6c90', 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: 'c988f4199f89b9d28a444ca6f262d0f7a4d7086f', class: "form-grid" }, index.h("stencil-field", { key: 'e61edacce18a1080604cca6c83a47eb9bf853dca', name: "formTextField" }, index.h("text-field", { key: '52a4fb8ad33fb5eb5f4c03a6b34f0352daecb227', label: "Form Text Field", placeholder: "Enter text...", required: true })), index.h("stencil-field", { key: '2fde12d1bc8562d727b9c16486f3cebc8d0ef0a1', name: "formNumericField" }, index.h("numeric-field", { key: 'cce90a03f97a7ce519e769cbf5568557e8da5172', label: "Form Numeric Field", placeholder: "Enter number...", min: "0", max: "100", required: true })), index.h("stencil-field", { key: '483c179ef0e6e057b0038c44ad35d758e8da72c0', name: "formTextArea" }, index.h("text-area", { key: '54bf5a7d1a29f00a4db885e70a4fff18c25ccc8b', label: "Form Text Area", placeholder: "Enter description...", required: true, minRows: 3 })), index.h("stencil-field", { key: '5b9b92bc986d8247e0d29580d16ea1af1d6dd811', name: "formCheckbox" }, index.h("check-box", { key: '9b697664e89f5e88964e740cb713e783cb7e5eaf', label: "Accept Terms and Conditions", required: true })), index.h("stencil-field", { key: '04e214cc1e402cd5d8cc4a902530ce3e5abfab93', name: "formToggle" }, index.h("stencil-toggle", { key: '90264b08f1fde534454cc62bbbc94148de7d357b', label: "Enable Notifications" })), index.h("stencil-field", { key: 'c2b32a971b1ff98067606c621cde478eddf532dc', name: "formDate" }, index.h("udp-date-selector", { key: '38d4277f734bfe478a07f3137424608646a48848', label: "Form Date", required: true })), index.h("stencil-field", { key: 'be40b541a17d729c6140931d05fce1baf2db7273', name: "formTime" }, index.h("udp-time-selector", { key: 'f3c10e03320cbd983b5573cee4ec99c737a0d389', label: "Form Time" })), index.h("stencil-field", { key: 'f0ec76807e7ac9caae2c216665934d5668abee6d', name: "formSelector" }, index.h("udp-selector", { key: 'a887013efc6d25c8119ec1ead75de3e3779e1d20', label: "Form Selector", options: this.selectorOptions, required: true })), index.h("stencil-field", { key: '662c9e1b54e9eb2926dd5405c17e7c9774bddba5', name: "formFiles" }, index.h("file-upload", { key: '08c9b118f3582f93086a5da3fa4d45446a967f5e', label: "Form File Upload", allowMultiple: true }))), index.h("div", { key: '951a514199520009da7df0798a6b9a6a8c8fb696', class: "form-actions" }, index.h("button", { key: '8550d0b23137a65a279390fcd083b75280e5c2ff', type: "submit", class: "submit-button" }, "Submit Form"))), index.h("div", { key: '194547ea02a3a71691c9721456def235b1ca0aa1', class: "form-values" }, index.h("h3", { key: '9f2237ad72e7dc8a89a3b76eb2a85489ef784b0f' }, "Current Form Values:"), index.h("pre", { key: 'b9e2cbee72e21f3640dba65eab05d2af47c4a284' }, JSON.stringify(this.formValues, null, 2)))), index.h("section", { key: '58723614fb40ff513d99eb984324848e68e26690', class: "example-section" }, index.h("h2", { key: '1c3528c6fa28d8c47bddd005523b2b2203433c24' }, "Additional Examples"), index.h("p", { key: '663507cd004a87e188acd89611a6f719dc236a0d' }, "More complex configurations and specialized use cases."), index.h("div", { key: 'c09839477af2b59587589b71730736fbe11f10f6', class: "input-grid" }, index.h("div", { key: '05be4e05ea40a32b44f8486ac36ec648617667ce', class: "input-example" }, index.h("h3", { key: '1a55bc8af2155bb961dd087ec28f1894604cf181' }, "Multi-Select UDP Selector"), index.h("udp-selector", { key: 'e39700fb3d1c54346e51ba22408c677ccc00fa93', 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: '8f18b41bb0f8fde3e7ea57e0a127885d3888039e', class: "input-example" }, index.h("h3", { key: '2627a3d0bfdcd7dc23fd67f4563733f2300c27de' }, "Large UDP Selector"), index.h("udp-selector", { key: '33c8e46f5e98b732c8e861de3fa1a8dadf8e75e1', label: "Large Selector", options: this.selectorOptions, large: true, initialValue: "option2", onChange: (e) => console.log('Large selector changed:', e.detail) })), index.h("div", { key: 'e74f1ccfac444c1058b03006c7516a90090704fc', class: "input-example" }, index.h("h3", { key: 'c13665d87d1ab26ce42084f5b497514df758336b' }, "File Upload with Type Restrictions"), index.h("file-upload", { key: 'fdbcbce5f0ad21427b10c69b1ff14faa5ff5bcd6', 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: 'e485136314ce4c0ea095ad532a3729e72d731e79', class: "input-example" }, index.h("h3", { key: 'fd9026adbfe0a0da04dba6d8e58d096e0e88cda1' }, "Disabled Components"), index.h("div", { key: '1a35bfda54b5bf67f50c460a028cec1e9a7979dd', class: "disabled-examples" }, index.h("text-field", { key: '163bd27c789de9fadaf4e7a509f59d36ef41a35e', label: "Disabled Text Field", value: "Cannot edit this", disabled: true }), index.h("check-box", { key: '6d94b2842459b07cd8a093c17555613e02ecdc27', label: "Disabled Checkbox", checked: true, disabled: true }), index.h("udp-selector", { key: 'db1da592947e1f072f2fc88026a3643059f8e405', label: "Disabled Selector", options: this.selectorOptions, value: "option1", disabled: true })))))));
+            } }, index.h("div", { key: '3404e02d07838a570bb5c7481677e8ea02d0dbb0', class: "form-grid" }, index.h("stencil-field", { key: '4ecf959603a2ddfc14a87f02ced4a4fb003ee01c', name: "formTextField" }, index.h("text-field", { key: '8fdd03c93ae359032536e659f353539bdc3ae803', label: "Form Text Field", placeholder: "Enter text...", required: true })), index.h("stencil-field", { key: '748457f0d3d6534e7d5193eb291d81006b5c2de7', name: "formNumericField" }, index.h("numeric-field", { key: '31ac100387a041b219ee1566536bdd46d435f94b', label: "Form Numeric Field", placeholder: "Enter number...", min: "0", max: "100", required: true })), index.h("stencil-field", { key: '6dbee7b024057c61a788e51e832f58f32f9fee34', name: "formTextArea" }, index.h("text-area", { key: 'a1f82c50209df578d1f3f24b69b7c6dcda9fa66c', label: "Form Text Area", placeholder: "Enter description...", required: true, minRows: 3 })), index.h("stencil-field", { key: '80cad39ff02f2a0c023ec768f5f3649cda59e99f', name: "formCheckbox" }, index.h("check-box", { key: '851e5d29bec0677aa98caeb004d32326b0bd2176', label: "Accept Terms and Conditions", required: true })), index.h("stencil-field", { key: '46d97d62d0ed7a9858a5517358a7af7f653883eb', name: "formToggle" }, index.h("stencil-toggle", { key: 'a81ee453445f68d09e2cfd5a3eb550ba3807749d', label: "Enable Notifications" })), index.h("stencil-field", { key: '33a75fa40de10461c2729c1ba44b8087abc7d9a0', name: "formDate" }, index.h("udp-date-selector", { key: 'c00a78855e64d77b7af5f71b46d000f0cb4010aa', label: "Form Date", required: true })), index.h("stencil-field", { key: '5ff0c620188762adf2c33593ad4a53c09572860d', name: "formTime" }, index.h("udp-time-selector", { key: '61ef6e62830b611c13c41f5d06157be965507c90', label: "Form Time" })), index.h("stencil-field", { key: 'c80881c110642b91537edf88ac3f3d8566191543', name: "formSelector" }, index.h("udp-selector", { key: 'a88ed4209d8ab05a99f3739ab96219550349e2c1', label: "Form Selector", options: this.selectorOptions, required: true })), index.h("stencil-field", { key: '93b79a8855c505a064decce4e8e4eeb0119c8c85', name: "formFiles" }, index.h("file-upload", { key: 'c9aea49be28887288c265a0c8bba70ca57a3a28b', label: "Form File Upload", allowMultiple: true }))), index.h("div", { key: '6ea9bfd7d40198066baf052303e0073814bcd8a0', class: "form-actions" }, index.h("button", { key: 'd10606ee72f906d91ece0678803c714fba1867e1', type: "submit", class: "submit-button" }, "Submit Form"))), index.h("div", { key: 'bdb9ee546def68ccc683ab2b47d6d6654def9121', class: "form-values" }, index.h("h3", { key: '0badd2abe8683260ab76354ce5cfa2d86ef20d8f' }, "Current Form Values:"), index.h("pre", { key: '72322f22cf56dc104f5304ea35ccd8ecc51f2da4' }, JSON.stringify(this.formValues, null, 2)))), index.h("section", { key: '6d37fab5fee2c40376e55f3983f3b1e2d608182e', class: "example-section" }, index.h("h2", { key: '9610b8dd0070106043760075d23eb0e15923bd09' }, "Additional Examples"), index.h("p", { key: '2d988efe1068b7a97b209554fb51c1870acdccbb' }, "More complex configurations and specialized use cases."), index.h("div", { key: '3a969b4936267869ebe8e058b23071d9e9928368', class: "input-grid" }, index.h("div", { key: '9c20b6c5f6bc0adc57f218bffddcdd2d9e684a8a', class: "input-example" }, index.h("h3", { key: '8696ea07b2b35a7bb8ff36b8c01f0bb75f8b1063' }, "Multi-Select UDP Selector"), index.h("udp-selector", { key: 'a16955a67400e39e1a592c94cb803a69e2fa54a0', 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: 'f940514861fd547841097ce5b9acf79a7d358783', class: "input-example" }, index.h("h3", { key: '9e66970e236a9bc0609863442f3d243ceee4d5f8' }, "Large UDP Selector"), index.h("udp-selector", { key: '5ef4f73e2559fafaaa0536c241ccddd799c0558c', label: "Large Selector", options: this.selectorOptions, large: true, initialValue: "option2", onChange: (e) => console.log('Large selector changed:', e.detail) })), index.h("div", { key: '68d2d3af2d381a45ac3455e12ad9a1005e5214d5', class: "input-example" }, index.h("h3", { key: 'cf3fe633b88c2ead8a63fb5b1078f3c0fd01dd8b' }, "File Upload with Type Restrictions"), index.h("file-upload", { key: '4a82a2f0b1dfc4756e9fbf40778fa99ea6447511', 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: '66a2dfc4f6e34818e070e92ef5ee5066c3abb0de', class: "input-example" }, index.h("h3", { key: '1a51b6e43caac7fcb717df520a6d8429846e826e' }, "Disabled Components"), index.h("div", { key: '8c46d6ba7bdf4bbdaadb7a05952582a887f1f6a7', class: "disabled-examples" }, index.h("text-field", { key: '056903f9c1151252e2b7e923969643cbd27092ac', label: "Disabled Text Field", value: "Cannot edit this", disabled: true }), index.h("check-box", { key: 'efc82460a07bf66f66f8a0d5a07fa3fcf034e9b3', label: "Disabled Checkbox", checked: true, disabled: true }), index.h("udp-selector", { key: '39e1b245c972ee8976b3feb5cd19906e62217635', label: "Disabled Selector", options: this.selectorOptions, value: "option1", disabled: true })))))));
     }
 };
 InputsExample.style = inputsExampleCss;