udp-stencil-component-library 25.18.1-beta.7 → 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: '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: {
+        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: '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 })))))));
+            } }, 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;