@softpak/components 19.18.0 → 19.21.0-beta.1

package/fesm2022/softpak-components-spx-helpers.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"softpak-components-spx-helpers.mjs","sources":["../../../../projects/softpak/components/spx-helpers/calc-check-digit.function.ts","../../../../projects/softpak/components/spx-helpers/spx-severity.enum.ts","../../../../projects/softpak/components/spx-helpers/unsubscribe-subscriptions.function.ts","../../../../projects/softpak/components/spx-helpers/value-pair-to-value.function.ts","../../../../projects/softpak/components/spx-helpers/softpak-components-spx-helpers.ts"],"sourcesContent":["export const calcCheckDigit = (container: string): string => {\r\n  container = container.toUpperCase();\r\n\r\n  const mapping = {\r\n    0: 0, 1: 1, 2: 2, 3: 3, 4: 4, 5: 5, 6: 6, 7: 7, 8: 8, 9: 9,\r\n    A: 10, B: 12, C: 13, D: 14, E: 15, F: 16, G: 17, H: 18, I: 19, J: 20, K: 21, L: 23, M: 24,\r\n    N: 25, O: 26, P: 27, Q: 28, R: 29, S: 30, T: 31, U: 32, V: 34, W: 35, X: 36, Y: 37, Z: 38\r\n  };\r\n\r\n  let total = 0;\r\n\r\n  for (let i = 0; i < container.length; i++) {\r\n    const cChar = container.substr(i, 1);\r\n    const value = (mapping as any)[cChar];\r\n    const multiplier = Math.pow(2, i);\r\n    total = total + (value * multiplier);\r\n  }\r\n\r\n  let outcome = total % 11;\r\n  if (outcome === 10) {\r\n    outcome = 0;\r\n  }\r\n\r\n  return outcome.toString();\r\n}\r\n","export enum SpxSeverityEnum {\r\n  error = 'error',\r\n  info = 'info',\r\n  success = 'success',\r\n  unknown = 'unknown',\r\n  warning = 'warning',\r\n  primary = 'primary',\r\n}\r\n","import { Subscription } from \"rxjs\";\r\n\r\nexport function unsubscribeSubscriptions(subscriptionObject: object): void {\r\n    for (const key in subscriptionObject) {\r\n        if ((subscriptionObject as any)[key]) {\r\n            ((subscriptionObject as any)[key] as Subscription).unsubscribe();\r\n        }\r\n    }\r\n}","export const valuePairToValue = (pair: any) => {\r\n    if (pair === null || (typeof pair === 'object' && pair.value === undefined)) {\r\n        return null;\r\n    }\r\n    return pair?.value || pair?.value === false || pair?.value === null || pair?.value === '' || pair?.value === 0 ? pair?.value : pair;\r\n};\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"AAAa,MAAA,cAAc,GAAG,CAAC,SAAiB,KAAY;AAC1D,IAAA,SAAS,GAAG,SAAS,CAAC,WAAW,EAAE;AAEnC,IAAA,MAAM,OAAO,GAAG;AACd,QAAA,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC;QAC1D,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,EAAE;QACzF,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE;KACxF;IAED,IAAI,KAAK,GAAG,CAAC;AAEb,IAAA,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,SAAS,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;QACzC,MAAM,KAAK,GAAG,SAAS,CAAC,MAAM,CAAC,CAAC,EAAE,CAAC,CAAC;AACpC,QAAA,MAAM,KAAK,GAAI,OAAe,CAAC,KAAK,CAAC;QACrC,MAAM,UAAU,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC,CAAC;QACjC,KAAK,GAAG,KAAK,IAAI,KAAK,GAAG,UAAU,CAAC;;AAGtC,IAAA,IAAI,OAAO,GAAG,KAAK,GAAG,EAAE;AACxB,IAAA,IAAI,OAAO,KAAK,EAAE,EAAE;QAClB,OAAO,GAAG,CAAC;;AAGb,IAAA,OAAO,OAAO,CAAC,QAAQ,EAAE;AAC3B;;ICxBY;AAAZ,CAAA,UAAY,eAAe,EAAA;AACzB,IAAA,eAAA,CAAA,OAAA,CAAA,GAAA,OAAe;AACf,IAAA,eAAA,CAAA,MAAA,CAAA,GAAA,MAAa;AACb,IAAA,eAAA,CAAA,SAAA,CAAA,GAAA,SAAmB;AACnB,IAAA,eAAA,CAAA,SAAA,CAAA,GAAA,SAAmB;AACnB,IAAA,eAAA,CAAA,SAAA,CAAA,GAAA,SAAmB;AACnB,IAAA,eAAA,CAAA,SAAA,CAAA,GAAA,SAAmB;AACrB,CAAC,EAPW,eAAe,KAAf,eAAe,GAO1B,EAAA,CAAA,CAAA;;ACLK,SAAU,wBAAwB,CAAC,kBAA0B,EAAA;AAC/D,IAAA,KAAK,MAAM,GAAG,IAAI,kBAAkB,EAAE;AAClC,QAAA,IAAK,kBAA0B,CAAC,GAAG,CAAC,EAAE;AAChC,YAAA,kBAA0B,CAAC,GAAG,CAAkB,CAAC,WAAW,EAAE;;;AAG5E;;ACRa,MAAA,gBAAgB,GAAG,CAAC,IAAS,KAAI;AAC1C,IAAA,IAAI,IAAI,KAAK,IAAI,KAAK,OAAO,IAAI,KAAK,QAAQ,IAAI,IAAI,CAAC,KAAK,KAAK,SAAS,CAAC,EAAE;AACzE,QAAA,OAAO,IAAI;;AAEf,IAAA,OAAO,IAAI,EAAE,KAAK,IAAI,IAAI,EAAE,KAAK,KAAK,KAAK,IAAI,IAAI,EAAE,KAAK,KAAK,IAAI,IAAI,IAAI,EAAE,KAAK,KAAK,EAAE,IAAI,IAAI,EAAE,KAAK,KAAK,CAAC,GAAG,IAAI,EAAE,KAAK,GAAG,IAAI;AACvI;;ACLA;;AAEG;;;;"}
+{"version":3,"file":"softpak-components-spx-helpers.mjs","sources":["../../../../projects/softpak/components/spx-helpers/calc-check-digit.function.ts","../../../../projects/softpak/components/spx-helpers/spx-severity.enum.ts","../../../../projects/softpak/components/spx-helpers/unsubscribe-subscriptions.function.ts","../../../../projects/softpak/components/spx-helpers/value-pair-to-value.function.ts","../../../../projects/softpak/components/spx-helpers/softpak-components-spx-helpers.ts"],"sourcesContent":["export const calcCheckDigit = (container: string): string => {\n  container = container.toUpperCase();\n\n  const mapping = {\n    0: 0, 1: 1, 2: 2, 3: 3, 4: 4, 5: 5, 6: 6, 7: 7, 8: 8, 9: 9,\n    A: 10, B: 12, C: 13, D: 14, E: 15, F: 16, G: 17, H: 18, I: 19, J: 20, K: 21, L: 23, M: 24,\n    N: 25, O: 26, P: 27, Q: 28, R: 29, S: 30, T: 31, U: 32, V: 34, W: 35, X: 36, Y: 37, Z: 38\n  };\n\n  let total = 0;\n\n  for (let i = 0; i < container.length; i++) {\n    const cChar = container.substr(i, 1);\n    const value = (mapping as any)[cChar];\n    const multiplier = Math.pow(2, i);\n    total = total + (value * multiplier);\n  }\n\n  let outcome = total % 11;\n  if (outcome === 10) {\n    outcome = 0;\n  }\n\n  return outcome.toString();\n}\n","export enum SpxSeverityEnum {\n  error = 'error',\n  info = 'info',\n  success = 'success',\n  unknown = 'unknown',\n  warning = 'warning',\n  primary = 'primary',\n}\n","import { Subscription } from \"rxjs\";\n\nexport function unsubscribeSubscriptions(subscriptionObject: object): void {\n    for (const key in subscriptionObject) {\n        if ((subscriptionObject as any)[key]) {\n            ((subscriptionObject as any)[key] as Subscription).unsubscribe();\n        }\n    }\n}","export const valuePairToValue = (pair: any) => {\n    if (pair === null || (typeof pair === 'object' && pair.value === undefined)) {\n        return null;\n    }\n    return pair?.value || pair?.value === false || pair?.value === null || pair?.value === '' || pair?.value === 0 ? pair?.value : pair;\n};\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"AAAa,MAAA,cAAc,GAAG,CAAC,SAAiB,KAAY;AAC1D,IAAA,SAAS,GAAG,SAAS,CAAC,WAAW,EAAE;AAEnC,IAAA,MAAM,OAAO,GAAG;AACd,QAAA,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC;QAC1D,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,EAAE;QACzF,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE;KACxF;IAED,IAAI,KAAK,GAAG,CAAC;AAEb,IAAA,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,SAAS,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;QACzC,MAAM,KAAK,GAAG,SAAS,CAAC,MAAM,CAAC,CAAC,EAAE,CAAC,CAAC;AACpC,QAAA,MAAM,KAAK,GAAI,OAAe,CAAC,KAAK,CAAC;QACrC,MAAM,UAAU,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC,CAAC;QACjC,KAAK,GAAG,KAAK,IAAI,KAAK,GAAG,UAAU,CAAC;;AAGtC,IAAA,IAAI,OAAO,GAAG,KAAK,GAAG,EAAE;AACxB,IAAA,IAAI,OAAO,KAAK,EAAE,EAAE;QAClB,OAAO,GAAG,CAAC;;AAGb,IAAA,OAAO,OAAO,CAAC,QAAQ,EAAE;AAC3B;;ICxBY;AAAZ,CAAA,UAAY,eAAe,EAAA;AACzB,IAAA,eAAA,CAAA,OAAA,CAAA,GAAA,OAAe;AACf,IAAA,eAAA,CAAA,MAAA,CAAA,GAAA,MAAa;AACb,IAAA,eAAA,CAAA,SAAA,CAAA,GAAA,SAAmB;AACnB,IAAA,eAAA,CAAA,SAAA,CAAA,GAAA,SAAmB;AACnB,IAAA,eAAA,CAAA,SAAA,CAAA,GAAA,SAAmB;AACnB,IAAA,eAAA,CAAA,SAAA,CAAA,GAAA,SAAmB;AACrB,CAAC,EAPW,eAAe,KAAf,eAAe,GAO1B,EAAA,CAAA,CAAA;;ACLK,SAAU,wBAAwB,CAAC,kBAA0B,EAAA;AAC/D,IAAA,KAAK,MAAM,GAAG,IAAI,kBAAkB,EAAE;AAClC,QAAA,IAAK,kBAA0B,CAAC,GAAG,CAAC,EAAE;AAChC,YAAA,kBAA0B,CAAC,GAAG,CAAkB,CAAC,WAAW,EAAE;;;AAG5E;;ACRa,MAAA,gBAAgB,GAAG,CAAC,IAAS,KAAI;AAC1C,IAAA,IAAI,IAAI,KAAK,IAAI,KAAK,OAAO,IAAI,KAAK,QAAQ,IAAI,IAAI,CAAC,KAAK,KAAK,SAAS,CAAC,EAAE;AACzE,QAAA,OAAO,IAAI;;AAEf,IAAA,OAAO,IAAI,EAAE,KAAK,IAAI,IAAI,EAAE,KAAK,KAAK,KAAK,IAAI,IAAI,EAAE,KAAK,KAAK,IAAI,IAAI,IAAI,EAAE,KAAK,KAAK,EAAE,IAAI,IAAI,EAAE,KAAK,KAAK,CAAC,GAAG,IAAI,EAAE,KAAK,GAAG,IAAI;AACvI;;ACLA;;AAEG;;;;"}

package/fesm2022/softpak-components-spx-inputs.mjs

@@ -9,6 +9,7 @@ import { IsSeverityPipe } from '@softpak/components/spx-pipes';
 import { SpxSeverityEnum, valuePairToValue } from '@softpak/components/spx-helpers';
 import * as i1$1 from '@angular/forms';
 import { ReactiveFormsModule, FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
+import { JsonPipe } from '@angular/common';
 import { SpxSuggestionComponent } from '@softpak/components/spx-suggestion';
 import { DateTime } from 'luxon';
 import * as i1$2 from '@ionic/angular/standalone';
@@ -107,7 +108,7 @@ class SpxInputBoxComponent {
         this.spxHelp.emit();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SpxInputBoxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: SpxInputBoxComponent, isStandalone: true, selector: "spx-input-box", inputs: { spxCompact: { classPropertyName: "spxCompact", publicName: "spxCompact", isSignal: true, isRequired: false, transformFunction: null }, spxLabel: { classPropertyName: "spxLabel", publicName: "spxLabel", isSignal: true, isRequired: false, transformFunction: null }, spxReadonly: { classPropertyName: "spxReadonly", publicName: "spxReadonly", isSignal: true, isRequired: false, transformFunction: null }, spxRequired: { classPropertyName: "spxRequired", publicName: "spxRequired", isSignal: true, isRequired: false, transformFunction: null }, spxShowClear: { classPropertyName: "spxShowClear", publicName: "spxShowClear", isSignal: true, isRequired: false, transformFunction: null }, spxShowEdit: { classPropertyName: "spxShowEdit", publicName: "spxShowEdit", isSignal: true, isRequired: false, transformFunction: null }, spxShowHelp: { classPropertyName: "spxShowHelp", publicName: "spxShowHelp", isSignal: true, isRequired: false, transformFunction: null }, spxShowLabel: { classPropertyName: "spxShowLabel", publicName: "spxShowLabel", isSignal: true, isRequired: false, transformFunction: null }, spxShowSearch: { classPropertyName: "spxShowSearch", publicName: "spxShowSearch", isSignal: true, isRequired: false, transformFunction: null }, spxShowValidationMessages: { classPropertyName: "spxShowValidationMessages", publicName: "spxShowValidationMessages", isSignal: true, isRequired: false, transformFunction: null }, spxAlert: { classPropertyName: "spxAlert", publicName: "spxAlert", isSignal: true, isRequired: false, transformFunction: null }, spxValue: { classPropertyName: "spxValue", publicName: "spxValue", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { spxValue: "spxValueChange", spxClear: "spxClear", spxSearch: "spxSearch", spxEdit: "spxEdit", spxHelp: "spxHelp", spxSetIdInParent: "spxSetIdInParent" }, host: { listeners: { "click": "handleFocusIn()", "focusin": "handleFocusIn($event)", "focusout": "handleFocusOut($event)" } }, ngImport: i0, template: "<div class=\"flex rounded w-full gap-3\"\r\n  [class.rounded-none]=\"this.spxShowValidationMessages()\"\r\n  [class.rounded-t]=\"this.spxShowValidationMessages()\"\r\n  [class.outline-none]=\"this.spxIsFocused() && !this.spxReadonly()\"\r\n  [class.ring-2]=\"this.spxIsFocused() && !this.spxReadonly()\"\r\n  [class.ring-offset-2]=\"this.spxIsFocused() && !this.spxReadonly()\"\r\n  [class.ring-blue-500]=\"this.spxIsFocused() && !this.spxReadonly()\"\r\n  [class.bg-white]=\"!this.spxReadonly()\"\r\n  [class.bg-gray-300]=\"this.spxReadonly()\"\r\n  [class.cursor-not-allowed]=\"this.spxReadonly()\"\r\n  \r\n  >\r\n  <div class=\"flex-auto p-3\"\r\n    [class.p-0]=\"this.spxCompact()\"\r\n    [class.flex]=\"this.spxCompact()\"\r\n    [class.items-center]=\"this.spxCompact()\">\r\n    @if (this.spxShowLabel()) {\r\n      <div class=\"font-bold text-sm mb-1 text-gray-800\"\r\n        [class.mb-0]=\"this.spxCompact()\"\r\n        [class.px-3]=\"this.spxCompact()\">\r\n        {{this.spxLabel()}} @if (spxRequired()) {\r\n        <span class=\"text-red-800\">*</span>\r\n      }\r\n    </div>\r\n  }\r\n\r\n  <ng-content select=\"[controls]\"></ng-content>\r\n</div>\r\n<div class=\"flex flex-none gap-1 p-1\">\r\n  @if (this.spxShowEdit()) {\r\n    <spx-button\r\n      (spxClick)=\"onEdit()\"\r\n      [spxFullHeight]=\"true\"\r\n      [spxSize]=\"'xl'\"\r\n      [spxType]=\"'button'\">\r\n      <fa-icon [icon]=\"faEdit\" class=\"block text-xl\"></fa-icon>\r\n    </spx-button>\r\n  }\r\n  @if (this.spxShowHelp()) {\r\n    <spx-button\r\n      (spxClick)=\"onHelp()\"\r\n      [spxFullHeight]=\"true\"\r\n      [spxDisabled]=\"this.spxReadonly()\"\r\n      [spxSize]=\"'xl'\"\r\n      [spxTabIndex]=\"-1\"\r\n      [spxType]=\"'button'\">\r\n      <fa-icon [icon]=\"faQuestion\" class=\"block text-xl\"></fa-icon>\r\n    </spx-button>\r\n  }\r\n  @if (this.spxShowSearch()) {\r\n    <spx-button\r\n      (spxClick)=\"onSearch()\"\r\n      [spxFullHeight]=\"true\"\r\n      [spxDisabled]=\"this.spxReadonly()\"\r\n      [spxSize]=\"'xl'\"\r\n      [spxTabIndex]=\"-1\"\r\n      [spxType]=\"'button'\">\r\n      <fa-icon [icon]=\"faSearch\" class=\"block text-xl\"></fa-icon>\r\n    </spx-button>\r\n  }\r\n  @if (this.spxShowClear()) {\r\n    <spx-button\r\n      (spxClick)=\"onClear()\"\r\n      [spxDisabled]=\"this.spxReadonly() || (this.spxValue()?.description !== 'No' && !this.spxValue()?.value)\"\r\n      [spxFullHeight]=\"true\"\r\n      [spxSize]=\"'xl'\"\r\n      [spxTabIndex]=\"-1\"\r\n      [spxType]=\"'button'\">\r\n      <fa-icon [icon]=\"faTimes\" class=\"block text-xl\"></fa-icon>\r\n    </spx-button>\r\n  }\r\n</div>\r\n</div>\r\n@if (this.spxShowValidationMessages()) {\r\n  <div class=\"bg-red-600 rounded-b text-white p-3\">\r\n    <ng-content select=\"[validation-messages]\"></ng-content>\r\n  </div>\r\n}\r\n@else if (this.spxAlert()) {\r\n  <div  [class.bg-red-700]=\"this.spxAlert()?.severity | isSeverity: SpxSeverity.error\"\r\n  [class.bg-green-700]=\"this.spxAlert()?.severity | isSeverity: SpxSeverity.success\"\r\n  [class.bg-blue-700]=\"this.spxAlert()?.severity | isSeverity: SpxSeverity.info\"\r\n  [class.bg-gray-400]=\"this.spxAlert()?.severity | isSeverity: SpxSeverity.unknown\"\r\n  [class.bg-amber-700]=\"this.spxAlert()?.severity | isSeverity: SpxSeverity.warning\"\r\n  class=\"rounded-b text-white p-3\">\r\n  <div>\r\n    {{this.spxAlert()?.text}}\r\n  </div>\r\n</div>\r\n}", dependencies: [{ kind: "component", type: SpxButtonComponent, selector: "spx-button", inputs: ["spxDisabled", "spxClass", "spxClassObject", "spxForm", "spxFullHeight", "spxFullWidth", "spxSeverity", "spxSize", "spxTabIndex", "spxType"], outputs: ["spxClick"] }, { kind: "ngmodule", type: FontAwesomeModule }, { kind: "component", type: i1.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "mask", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "transform", "a11yRole"] }, { kind: "pipe", type: IsSeverityPipe, name: "isSeverity" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: SpxInputBoxComponent, isStandalone: true, selector: "spx-input-box", inputs: { spxCompact: { classPropertyName: "spxCompact", publicName: "spxCompact", isSignal: true, isRequired: false, transformFunction: null }, spxLabel: { classPropertyName: "spxLabel", publicName: "spxLabel", isSignal: true, isRequired: false, transformFunction: null }, spxReadonly: { classPropertyName: "spxReadonly", publicName: "spxReadonly", isSignal: true, isRequired: false, transformFunction: null }, spxRequired: { classPropertyName: "spxRequired", publicName: "spxRequired", isSignal: true, isRequired: false, transformFunction: null }, spxShowClear: { classPropertyName: "spxShowClear", publicName: "spxShowClear", isSignal: true, isRequired: false, transformFunction: null }, spxShowEdit: { classPropertyName: "spxShowEdit", publicName: "spxShowEdit", isSignal: true, isRequired: false, transformFunction: null }, spxShowHelp: { classPropertyName: "spxShowHelp", publicName: "spxShowHelp", isSignal: true, isRequired: false, transformFunction: null }, spxShowLabel: { classPropertyName: "spxShowLabel", publicName: "spxShowLabel", isSignal: true, isRequired: false, transformFunction: null }, spxShowSearch: { classPropertyName: "spxShowSearch", publicName: "spxShowSearch", isSignal: true, isRequired: false, transformFunction: null }, spxShowValidationMessages: { classPropertyName: "spxShowValidationMessages", publicName: "spxShowValidationMessages", isSignal: true, isRequired: false, transformFunction: null }, spxAlert: { classPropertyName: "spxAlert", publicName: "spxAlert", isSignal: true, isRequired: false, transformFunction: null }, spxValue: { classPropertyName: "spxValue", publicName: "spxValue", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { spxValue: "spxValueChange", spxClear: "spxClear", spxSearch: "spxSearch", spxEdit: "spxEdit", spxHelp: "spxHelp", spxSetIdInParent: "spxSetIdInParent" }, host: { listeners: { "click": "handleFocusIn()", "focusin": "handleFocusIn($event)", "focusout": "handleFocusOut($event)" } }, ngImport: i0, template: "<div class=\"flex rounded w-full gap-3\"\n  [class.rounded-none]=\"this.spxShowValidationMessages()\"\n  [class.rounded-t]=\"this.spxShowValidationMessages()\"\n  [class.outline-none]=\"this.spxIsFocused() && !this.spxReadonly()\"\n  [class.ring-2]=\"this.spxIsFocused() && !this.spxReadonly()\"\n  [class.ring-offset-2]=\"this.spxIsFocused() && !this.spxReadonly()\"\n  [class.ring-blue-500]=\"this.spxIsFocused() && !this.spxReadonly()\"\n  [class.bg-white]=\"!this.spxReadonly()\"\n  [class.bg-gray-300]=\"this.spxReadonly()\"\n  [class.cursor-not-allowed]=\"this.spxReadonly()\"\n  \n  >\n  <div class=\"flex-auto p-3\"\n    [class.p-0]=\"this.spxCompact()\"\n    [class.flex]=\"this.spxCompact()\"\n    [class.items-center]=\"this.spxCompact()\">\n    @if (this.spxShowLabel()) {\n      <div class=\"font-bold text-sm mb-1 text-gray-800\"\n        [class.mb-0]=\"this.spxCompact()\"\n        [class.px-3]=\"this.spxCompact()\">\n        {{this.spxLabel()}} @if (spxRequired()) {\n        <span class=\"text-red-800\">*</span>\n      }\n    </div>\n  }\n\n  <ng-content select=\"[controls]\"></ng-content>\n</div>\n<div class=\"flex flex-none gap-1 p-1\">\n  @if (this.spxShowEdit()) {\n    <spx-button\n      (spxClick)=\"onEdit()\"\n      [spxFullHeight]=\"true\"\n      [spxSize]=\"'xl'\"\n      [spxType]=\"'button'\">\n      <fa-icon [icon]=\"faEdit\" class=\"block text-xl\"></fa-icon>\n    </spx-button>\n  }\n  @if (this.spxShowHelp()) {\n    <spx-button\n      (spxClick)=\"onHelp()\"\n      [spxFullHeight]=\"true\"\n      [spxDisabled]=\"this.spxReadonly()\"\n      [spxSize]=\"'xl'\"\n      [spxTabIndex]=\"-1\"\n      [spxType]=\"'button'\">\n      <fa-icon [icon]=\"faQuestion\" class=\"block text-xl\"></fa-icon>\n    </spx-button>\n  }\n  @if (this.spxShowSearch()) {\n    <spx-button\n      (spxClick)=\"onSearch()\"\n      [spxFullHeight]=\"true\"\n      [spxDisabled]=\"this.spxReadonly()\"\n      [spxSize]=\"'xl'\"\n      [spxTabIndex]=\"-1\"\n      [spxType]=\"'button'\">\n      <fa-icon [icon]=\"faSearch\" class=\"block text-xl\"></fa-icon>\n    </spx-button>\n  }\n  @if (this.spxShowClear()) {\n    <spx-button\n      (spxClick)=\"onClear()\"\n      [spxDisabled]=\"this.spxReadonly() || (this.spxValue()?.description !== 'No' && !this.spxValue()?.value)\"\n      [spxFullHeight]=\"true\"\n      [spxSize]=\"'xl'\"\n      [spxTabIndex]=\"-1\"\n      [spxType]=\"'button'\">\n      <fa-icon [icon]=\"faTimes\" class=\"block text-xl\"></fa-icon>\n    </spx-button>\n  }\n</div>\n</div>\n@if (this.spxShowValidationMessages()) {\n  <div class=\"bg-red-600 rounded-b text-white p-3\">\n    <ng-content select=\"[validation-messages]\"></ng-content>\n  </div>\n}\n@else if (this.spxAlert()) {\n  <div  [class.bg-red-700]=\"this.spxAlert()?.severity | isSeverity: SpxSeverity.error\"\n  [class.bg-green-700]=\"this.spxAlert()?.severity | isSeverity: SpxSeverity.success\"\n  [class.bg-blue-700]=\"this.spxAlert()?.severity | isSeverity: SpxSeverity.info\"\n  [class.bg-gray-400]=\"this.spxAlert()?.severity | isSeverity: SpxSeverity.unknown\"\n  [class.bg-amber-700]=\"this.spxAlert()?.severity | isSeverity: SpxSeverity.warning\"\n  class=\"rounded-b text-white p-3\">\n  <div>\n    {{this.spxAlert()?.text}}\n  </div>\n</div>\n}", dependencies: [{ kind: "component", type: SpxButtonComponent, selector: "spx-button", inputs: ["spxDisabled", "spxClass", "spxClassObject", "spxForm", "spxFullHeight", "spxFullWidth", "spxSeverity", "spxSize", "spxTabIndex", "spxType"], outputs: ["spxClick"] }, { kind: "ngmodule", type: FontAwesomeModule }, { kind: "component", type: i1.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "mask", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "transform", "a11yRole"] }, { kind: "pipe", type: IsSeverityPipe, name: "isSeverity" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SpxInputBoxComponent, decorators: [{
             type: Component,
@@ -117,7 +118,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
                         IsSeverityPipe
                     ], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         "(click)": "handleFocusIn()"
-                    }, template: "<div class=\"flex rounded w-full gap-3\"\r\n  [class.rounded-none]=\"this.spxShowValidationMessages()\"\r\n  [class.rounded-t]=\"this.spxShowValidationMessages()\"\r\n  [class.outline-none]=\"this.spxIsFocused() && !this.spxReadonly()\"\r\n  [class.ring-2]=\"this.spxIsFocused() && !this.spxReadonly()\"\r\n  [class.ring-offset-2]=\"this.spxIsFocused() && !this.spxReadonly()\"\r\n  [class.ring-blue-500]=\"this.spxIsFocused() && !this.spxReadonly()\"\r\n  [class.bg-white]=\"!this.spxReadonly()\"\r\n  [class.bg-gray-300]=\"this.spxReadonly()\"\r\n  [class.cursor-not-allowed]=\"this.spxReadonly()\"\r\n  \r\n  >\r\n  <div class=\"flex-auto p-3\"\r\n    [class.p-0]=\"this.spxCompact()\"\r\n    [class.flex]=\"this.spxCompact()\"\r\n    [class.items-center]=\"this.spxCompact()\">\r\n    @if (this.spxShowLabel()) {\r\n      <div class=\"font-bold text-sm mb-1 text-gray-800\"\r\n        [class.mb-0]=\"this.spxCompact()\"\r\n        [class.px-3]=\"this.spxCompact()\">\r\n        {{this.spxLabel()}} @if (spxRequired()) {\r\n        <span class=\"text-red-800\">*</span>\r\n      }\r\n    </div>\r\n  }\r\n\r\n  <ng-content select=\"[controls]\"></ng-content>\r\n</div>\r\n<div class=\"flex flex-none gap-1 p-1\">\r\n  @if (this.spxShowEdit()) {\r\n    <spx-button\r\n      (spxClick)=\"onEdit()\"\r\n      [spxFullHeight]=\"true\"\r\n      [spxSize]=\"'xl'\"\r\n      [spxType]=\"'button'\">\r\n      <fa-icon [icon]=\"faEdit\" class=\"block text-xl\"></fa-icon>\r\n    </spx-button>\r\n  }\r\n  @if (this.spxShowHelp()) {\r\n    <spx-button\r\n      (spxClick)=\"onHelp()\"\r\n      [spxFullHeight]=\"true\"\r\n      [spxDisabled]=\"this.spxReadonly()\"\r\n      [spxSize]=\"'xl'\"\r\n      [spxTabIndex]=\"-1\"\r\n      [spxType]=\"'button'\">\r\n      <fa-icon [icon]=\"faQuestion\" class=\"block text-xl\"></fa-icon>\r\n    </spx-button>\r\n  }\r\n  @if (this.spxShowSearch()) {\r\n    <spx-button\r\n      (spxClick)=\"onSearch()\"\r\n      [spxFullHeight]=\"true\"\r\n      [spxDisabled]=\"this.spxReadonly()\"\r\n      [spxSize]=\"'xl'\"\r\n      [spxTabIndex]=\"-1\"\r\n      [spxType]=\"'button'\">\r\n      <fa-icon [icon]=\"faSearch\" class=\"block text-xl\"></fa-icon>\r\n    </spx-button>\r\n  }\r\n  @if (this.spxShowClear()) {\r\n    <spx-button\r\n      (spxClick)=\"onClear()\"\r\n      [spxDisabled]=\"this.spxReadonly() || (this.spxValue()?.description !== 'No' && !this.spxValue()?.value)\"\r\n      [spxFullHeight]=\"true\"\r\n      [spxSize]=\"'xl'\"\r\n      [spxTabIndex]=\"-1\"\r\n      [spxType]=\"'button'\">\r\n      <fa-icon [icon]=\"faTimes\" class=\"block text-xl\"></fa-icon>\r\n    </spx-button>\r\n  }\r\n</div>\r\n</div>\r\n@if (this.spxShowValidationMessages()) {\r\n  <div class=\"bg-red-600 rounded-b text-white p-3\">\r\n    <ng-content select=\"[validation-messages]\"></ng-content>\r\n  </div>\r\n}\r\n@else if (this.spxAlert()) {\r\n  <div  [class.bg-red-700]=\"this.spxAlert()?.severity | isSeverity: SpxSeverity.error\"\r\n  [class.bg-green-700]=\"this.spxAlert()?.severity | isSeverity: SpxSeverity.success\"\r\n  [class.bg-blue-700]=\"this.spxAlert()?.severity | isSeverity: SpxSeverity.info\"\r\n  [class.bg-gray-400]=\"this.spxAlert()?.severity | isSeverity: SpxSeverity.unknown\"\r\n  [class.bg-amber-700]=\"this.spxAlert()?.severity | isSeverity: SpxSeverity.warning\"\r\n  class=\"rounded-b text-white p-3\">\r\n  <div>\r\n    {{this.spxAlert()?.text}}\r\n  </div>\r\n</div>\r\n}" }]
+                    }, template: "<div class=\"flex rounded w-full gap-3\"\n  [class.rounded-none]=\"this.spxShowValidationMessages()\"\n  [class.rounded-t]=\"this.spxShowValidationMessages()\"\n  [class.outline-none]=\"this.spxIsFocused() && !this.spxReadonly()\"\n  [class.ring-2]=\"this.spxIsFocused() && !this.spxReadonly()\"\n  [class.ring-offset-2]=\"this.spxIsFocused() && !this.spxReadonly()\"\n  [class.ring-blue-500]=\"this.spxIsFocused() && !this.spxReadonly()\"\n  [class.bg-white]=\"!this.spxReadonly()\"\n  [class.bg-gray-300]=\"this.spxReadonly()\"\n  [class.cursor-not-allowed]=\"this.spxReadonly()\"\n  \n  >\n  <div class=\"flex-auto p-3\"\n    [class.p-0]=\"this.spxCompact()\"\n    [class.flex]=\"this.spxCompact()\"\n    [class.items-center]=\"this.spxCompact()\">\n    @if (this.spxShowLabel()) {\n      <div class=\"font-bold text-sm mb-1 text-gray-800\"\n        [class.mb-0]=\"this.spxCompact()\"\n        [class.px-3]=\"this.spxCompact()\">\n        {{this.spxLabel()}} @if (spxRequired()) {\n        <span class=\"text-red-800\">*</span>\n      }\n    </div>\n  }\n\n  <ng-content select=\"[controls]\"></ng-content>\n</div>\n<div class=\"flex flex-none gap-1 p-1\">\n  @if (this.spxShowEdit()) {\n    <spx-button\n      (spxClick)=\"onEdit()\"\n      [spxFullHeight]=\"true\"\n      [spxSize]=\"'xl'\"\n      [spxType]=\"'button'\">\n      <fa-icon [icon]=\"faEdit\" class=\"block text-xl\"></fa-icon>\n    </spx-button>\n  }\n  @if (this.spxShowHelp()) {\n    <spx-button\n      (spxClick)=\"onHelp()\"\n      [spxFullHeight]=\"true\"\n      [spxDisabled]=\"this.spxReadonly()\"\n      [spxSize]=\"'xl'\"\n      [spxTabIndex]=\"-1\"\n      [spxType]=\"'button'\">\n      <fa-icon [icon]=\"faQuestion\" class=\"block text-xl\"></fa-icon>\n    </spx-button>\n  }\n  @if (this.spxShowSearch()) {\n    <spx-button\n      (spxClick)=\"onSearch()\"\n      [spxFullHeight]=\"true\"\n      [spxDisabled]=\"this.spxReadonly()\"\n      [spxSize]=\"'xl'\"\n      [spxTabIndex]=\"-1\"\n      [spxType]=\"'button'\">\n      <fa-icon [icon]=\"faSearch\" class=\"block text-xl\"></fa-icon>\n    </spx-button>\n  }\n  @if (this.spxShowClear()) {\n    <spx-button\n      (spxClick)=\"onClear()\"\n      [spxDisabled]=\"this.spxReadonly() || (this.spxValue()?.description !== 'No' && !this.spxValue()?.value)\"\n      [spxFullHeight]=\"true\"\n      [spxSize]=\"'xl'\"\n      [spxTabIndex]=\"-1\"\n      [spxType]=\"'button'\">\n      <fa-icon [icon]=\"faTimes\" class=\"block text-xl\"></fa-icon>\n    </spx-button>\n  }\n</div>\n</div>\n@if (this.spxShowValidationMessages()) {\n  <div class=\"bg-red-600 rounded-b text-white p-3\">\n    <ng-content select=\"[validation-messages]\"></ng-content>\n  </div>\n}\n@else if (this.spxAlert()) {\n  <div  [class.bg-red-700]=\"this.spxAlert()?.severity | isSeverity: SpxSeverity.error\"\n  [class.bg-green-700]=\"this.spxAlert()?.severity | isSeverity: SpxSeverity.success\"\n  [class.bg-blue-700]=\"this.spxAlert()?.severity | isSeverity: SpxSeverity.info\"\n  [class.bg-gray-400]=\"this.spxAlert()?.severity | isSeverity: SpxSeverity.unknown\"\n  [class.bg-amber-700]=\"this.spxAlert()?.severity | isSeverity: SpxSeverity.warning\"\n  class=\"rounded-b text-white p-3\">\n  <div>\n    {{this.spxAlert()?.text}}\n  </div>\n</div>\n}" }]
         }], propDecorators: { handleFocusIn: [{
                 type: HostListener,
                 args: ['focusin', ["$event"]]
@@ -165,13 +166,13 @@ class SpxDropdownComponent {
         this.spxSelect.emit(valuePair);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SpxDropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: SpxDropdownComponent, isStandalone: true, selector: "spx-dropdown", inputs: { spxSuggestions: { classPropertyName: "spxSuggestions", publicName: "spxSuggestions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { spxSelect: "spxSelect" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"relative text-black\">\r\n  <div\r\n    class=\"absolute bg-gray-100 left-0 right-0 z-20\">\r\n    @for (valuePair of this.spxSuggestions(); track valuePair; let i = $index) {\r\n      <button\r\n        class=\"text-black block w-full p-2 border border-gray-200 rounded-lg shadow hover:bg-gray-200 flex items-center text-left\"\r\n        [class.bg-gray-100]=\"i === this.focusPosition()\"\r\n        [class.bg-white]=\"i !== this.focusPosition()\"\r\n        (click)=\"this.handleSuggestionClick(valuePair)\"\r\n        [attr.tabindex]=\"-1\"\r\n        [attr.type]=\"'button'\">\r\n        <div class=\"flex-1 p-1 font-bold text-lg\">{{valuePair?.description}}</div>\r\n        <spx-button (spxClick)=\"this.handleSuggestionClick(valuePair)\" [spxType]=\"'button'\" [spxTabIndex]=\"-1\">Select</spx-button>\r\n      </button>\r\n    }\r\n  </div>\r\n</div>", dependencies: [{ kind: "component", type: SpxButtonComponent, selector: "spx-button", inputs: ["spxDisabled", "spxClass", "spxClassObject", "spxForm", "spxFullHeight", "spxFullWidth", "spxSeverity", "spxSize", "spxTabIndex", "spxType"], outputs: ["spxClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: SpxDropdownComponent, isStandalone: true, selector: "spx-dropdown", inputs: { spxSuggestions: { classPropertyName: "spxSuggestions", publicName: "spxSuggestions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { spxSelect: "spxSelect" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"relative text-black\">\n  <div\n    class=\"absolute bg-gray-100 left-0 right-0 z-20\">\n    @for (valuePair of this.spxSuggestions(); track valuePair; let i = $index) {\n      <button\n        class=\"text-black block w-full p-2 border border-gray-200 rounded-lg shadow hover:bg-gray-200 flex items-center text-left\"\n        [class.bg-gray-100]=\"i === this.focusPosition()\"\n        [class.bg-white]=\"i !== this.focusPosition()\"\n        (click)=\"this.handleSuggestionClick(valuePair)\"\n        [attr.tabindex]=\"-1\"\n        [attr.type]=\"'button'\">\n        <div class=\"flex-1 p-1 font-bold text-lg\">{{valuePair?.description}}</div>\n        <spx-button (spxClick)=\"this.handleSuggestionClick(valuePair)\" [spxType]=\"'button'\" [spxTabIndex]=\"-1\">Select</spx-button>\n      </button>\n    }\n  </div>\n</div>", dependencies: [{ kind: "component", type: SpxButtonComponent, selector: "spx-button", inputs: ["spxDisabled", "spxClass", "spxClassObject", "spxForm", "spxFullHeight", "spxFullWidth", "spxSeverity", "spxSize", "spxTabIndex", "spxType"], outputs: ["spxClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SpxDropdownComponent, decorators: [{
             type: Component,
             args: [{ selector: 'spx-dropdown', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
                         SpxButtonComponent
-                    ], template: "<div class=\"relative text-black\">\r\n  <div\r\n    class=\"absolute bg-gray-100 left-0 right-0 z-20\">\r\n    @for (valuePair of this.spxSuggestions(); track valuePair; let i = $index) {\r\n      <button\r\n        class=\"text-black block w-full p-2 border border-gray-200 rounded-lg shadow hover:bg-gray-200 flex items-center text-left\"\r\n        [class.bg-gray-100]=\"i === this.focusPosition()\"\r\n        [class.bg-white]=\"i !== this.focusPosition()\"\r\n        (click)=\"this.handleSuggestionClick(valuePair)\"\r\n        [attr.tabindex]=\"-1\"\r\n        [attr.type]=\"'button'\">\r\n        <div class=\"flex-1 p-1 font-bold text-lg\">{{valuePair?.description}}</div>\r\n        <spx-button (spxClick)=\"this.handleSuggestionClick(valuePair)\" [spxType]=\"'button'\" [spxTabIndex]=\"-1\">Select</spx-button>\r\n      </button>\r\n    }\r\n  </div>\r\n</div>" }]
+                    ], template: "<div class=\"relative text-black\">\n  <div\n    class=\"absolute bg-gray-100 left-0 right-0 z-20\">\n    @for (valuePair of this.spxSuggestions(); track valuePair; let i = $index) {\n      <button\n        class=\"text-black block w-full p-2 border border-gray-200 rounded-lg shadow hover:bg-gray-200 flex items-center text-left\"\n        [class.bg-gray-100]=\"i === this.focusPosition()\"\n        [class.bg-white]=\"i !== this.focusPosition()\"\n        (click)=\"this.handleSuggestionClick(valuePair)\"\n        [attr.tabindex]=\"-1\"\n        [attr.type]=\"'button'\">\n        <div class=\"flex-1 p-1 font-bold text-lg\">{{valuePair?.description}}</div>\n        <spx-button (spxClick)=\"this.handleSuggestionClick(valuePair)\" [spxType]=\"'button'\" [spxTabIndex]=\"-1\">Select</spx-button>\n      </button>\n    }\n  </div>\n</div>" }]
         }] });
 
 var SpxInputTypeEnum;
@@ -193,7 +194,8 @@ var SpxInputTypeEnum;
 })(SpxInputTypeEnum || (SpxInputTypeEnum = {}));
 
 class SpxInputTextComponent {
-    constructor() {
+    constructor(changeDetectorRef) {
+        this.changeDetectorRef = changeDetectorRef;
         this.spxName = input();
         this.spxAutofocus = input(false);
         this.spxAutocomplete = input();
@@ -221,6 +223,9 @@ class SpxInputTextComponent {
             this.spxSetFocus();
         });
     }
+    triggerChangeDetection() {
+        this.changeDetectorRef.detectChanges();
+    }
     spxSetFocus() {
         this.inputRef().nativeElement?.focus();
     }
@@ -242,17 +247,18 @@ class SpxInputTextComponent {
             this.spxSetFocus();
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SpxInputTextComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: SpxInputTextComponent, isStandalone: true, selector: "spx-input-text", inputs: { spxName: { classPropertyName: "spxName", publicName: "spxName", isSignal: true, isRequired: false, transformFunction: null }, spxAutofocus: { classPropertyName: "spxAutofocus", publicName: "spxAutofocus", isSignal: true, isRequired: false, transformFunction: null }, spxAutocomplete: { classPropertyName: "spxAutocomplete", publicName: "spxAutocomplete", isSignal: true, isRequired: false, transformFunction: null }, spxInputMode: { classPropertyName: "spxInputMode", publicName: "spxInputMode", isSignal: true, isRequired: false, transformFunction: null }, spxPattern: { classPropertyName: "spxPattern", publicName: "spxPattern", isSignal: true, isRequired: false, transformFunction: null }, spxSuggestions: { classPropertyName: "spxSuggestions", publicName: "spxSuggestions", isSignal: true, isRequired: false, transformFunction: null }, spxReadonly: { classPropertyName: "spxReadonly", publicName: "spxReadonly", isSignal: true, isRequired: false, transformFunction: null }, spxValidators: { classPropertyName: "spxValidators", publicName: "spxValidators", isSignal: true, isRequired: false, transformFunction: null }, spxCapitalize: { classPropertyName: "spxCapitalize", publicName: "spxCapitalize", isSignal: true, isRequired: false, transformFunction: null }, spxType: { classPropertyName: "spxType", publicName: "spxType", isSignal: true, isRequired: false, transformFunction: null }, spxWasInternalUpdate: { classPropertyName: "spxWasInternalUpdate", publicName: "spxWasInternalUpdate", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, spxElementId: { classPropertyName: "spxElementId", publicName: "spxElementId", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["input"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"relative text-black\">\r\n  <input\r\n    #input\r\n    class=\"font-bold text-lg w-full outline-none\"\r\n    autocomplete=\"off\"\r\n    spellcheck=\"false\"\r\n    [attr.autocomplete]=\"this.spxAutocomplete()\"\r\n    [attr.autofocus]=\"this.spxAutofocus()\"\r\n    [attr.disabled]=\"this.spxReadonly()\"\r\n    [attr.inputMode]=\"this.spxInputMode()\"\r\n    [attr.pattern]=\"this.spxPattern()\"\r\n    [attr.name]=\"this.spxName()\"\r\n    [attr.type]=\"this.spxType()\"\r\n    [class.bg-white]=\"!this.spxReadonly()\"\r\n    [class.bg-gray-300]=\"this.spxReadonly()\"\r\n    [class.cursor-not-allowed]=\"this.spxReadonly()\"\r\n    [class.uppercase]=\"this.spxCapitalize()\"\r\n    [disabled]=\"this.spxReadonly()\"\r\n    [ngModel]=\"this.value()?.description ? this.value()?.description : this.value()?.value\"\r\n    (ngModelChange)=\"this.handleChange($event)\"\r\n    />\r\n\r\n\r\n  @if (this.value()?.description && this.value()?.value && this.value()?.description?.valueOf() !== this.value()?.value?.valueOf()) {\r\n    <span>{{this.value()?.value}}</span>\r\n  }\r\n  @if (this.spxIsFocused() && (this.spxType() === 'overlay' || this.spxType() === 'overlaynumber')) {\r\n    <spx-dropdown\r\n      [spxSuggestions]=\"this.spxSuggestions()\" (spxSelect)=\"this.handleSuggestionClick($event)\">\r\n    </spx-dropdown>\r\n  }\r\n</div>", dependencies: [{ kind: "component", type: SpxDropdownComponent, selector: "spx-dropdown", inputs: ["spxSuggestions"], outputs: ["spxSelect"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SpxInputTextComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: SpxInputTextComponent, isStandalone: true, selector: "spx-input-text", inputs: { spxName: { classPropertyName: "spxName", publicName: "spxName", isSignal: true, isRequired: false, transformFunction: null }, spxAutofocus: { classPropertyName: "spxAutofocus", publicName: "spxAutofocus", isSignal: true, isRequired: false, transformFunction: null }, spxAutocomplete: { classPropertyName: "spxAutocomplete", publicName: "spxAutocomplete", isSignal: true, isRequired: false, transformFunction: null }, spxInputMode: { classPropertyName: "spxInputMode", publicName: "spxInputMode", isSignal: true, isRequired: false, transformFunction: null }, spxPattern: { classPropertyName: "spxPattern", publicName: "spxPattern", isSignal: true, isRequired: false, transformFunction: null }, spxSuggestions: { classPropertyName: "spxSuggestions", publicName: "spxSuggestions", isSignal: true, isRequired: false, transformFunction: null }, spxReadonly: { classPropertyName: "spxReadonly", publicName: "spxReadonly", isSignal: true, isRequired: false, transformFunction: null }, spxValidators: { classPropertyName: "spxValidators", publicName: "spxValidators", isSignal: true, isRequired: false, transformFunction: null }, spxCapitalize: { classPropertyName: "spxCapitalize", publicName: "spxCapitalize", isSignal: true, isRequired: false, transformFunction: null }, spxType: { classPropertyName: "spxType", publicName: "spxType", isSignal: true, isRequired: false, transformFunction: null }, spxWasInternalUpdate: { classPropertyName: "spxWasInternalUpdate", publicName: "spxWasInternalUpdate", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, spxElementId: { classPropertyName: "spxElementId", publicName: "spxElementId", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["input"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"relative text-black\">\n  <input\n    #input\n    class=\"font-bold text-lg w-full outline-none\"\n    autocomplete=\"off\"\n    spellcheck=\"false\"\n    [attr.autocomplete]=\"this.spxAutocomplete()\"\n    [attr.autofocus]=\"this.spxAutofocus()\"\n    [attr.disabled]=\"this.spxReadonly()\"\n    [attr.inputMode]=\"this.spxInputMode()\"\n    [attr.pattern]=\"this.spxPattern()\"\n    [attr.name]=\"this.spxName()\"\n    [attr.type]=\"this.spxType()\"\n    [class.bg-white]=\"!this.spxReadonly()\"\n    [class.bg-gray-300]=\"this.spxReadonly()\"\n    [class.cursor-not-allowed]=\"this.spxReadonly()\"\n    [class.uppercase]=\"this.spxCapitalize()\"\n    [disabled]=\"this.spxReadonly()\"\n    [ngModel]=\"this.value()?.description ? this.value()?.description : this.value()?.value\"\n    (ngModelChange)=\"this.handleChange($event)\"\n    />\n  @if (this.value()?.description && this.value()?.value && this.value()?.description?.valueOf() !== this.value()?.value?.valueOf()) {\n    <span>{{this.value()?.value}}</span>\n  }\n  @if (this.spxIsFocused() && (this.spxType() === 'overlay' || this.spxType() === 'overlaynumber')) {\n    <spx-dropdown\n      [spxSuggestions]=\"this.spxSuggestions()\" (spxSelect)=\"this.handleSuggestionClick($event)\">\n    </spx-dropdown>\n  }\n</div>", dependencies: [{ kind: "component", type: SpxDropdownComponent, selector: "spx-dropdown", inputs: ["spxSuggestions"], outputs: ["spxSelect"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SpxInputTextComponent, decorators: [{
             type: Component,
             args: [{ selector: 'spx-input-text', imports: [
                         SpxDropdownComponent,
                         ReactiveFormsModule,
-                        FormsModule
-                    ], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"relative text-black\">\r\n  <input\r\n    #input\r\n    class=\"font-bold text-lg w-full outline-none\"\r\n    autocomplete=\"off\"\r\n    spellcheck=\"false\"\r\n    [attr.autocomplete]=\"this.spxAutocomplete()\"\r\n    [attr.autofocus]=\"this.spxAutofocus()\"\r\n    [attr.disabled]=\"this.spxReadonly()\"\r\n    [attr.inputMode]=\"this.spxInputMode()\"\r\n    [attr.pattern]=\"this.spxPattern()\"\r\n    [attr.name]=\"this.spxName()\"\r\n    [attr.type]=\"this.spxType()\"\r\n    [class.bg-white]=\"!this.spxReadonly()\"\r\n    [class.bg-gray-300]=\"this.spxReadonly()\"\r\n    [class.cursor-not-allowed]=\"this.spxReadonly()\"\r\n    [class.uppercase]=\"this.spxCapitalize()\"\r\n    [disabled]=\"this.spxReadonly()\"\r\n    [ngModel]=\"this.value()?.description ? this.value()?.description : this.value()?.value\"\r\n    (ngModelChange)=\"this.handleChange($event)\"\r\n    />\r\n\r\n\r\n  @if (this.value()?.description && this.value()?.value && this.value()?.description?.valueOf() !== this.value()?.value?.valueOf()) {\r\n    <span>{{this.value()?.value}}</span>\r\n  }\r\n  @if (this.spxIsFocused() && (this.spxType() === 'overlay' || this.spxType() === 'overlaynumber')) {\r\n    <spx-dropdown\r\n      [spxSuggestions]=\"this.spxSuggestions()\" (spxSelect)=\"this.handleSuggestionClick($event)\">\r\n    </spx-dropdown>\r\n  }\r\n</div>" }]
-        }] });
+                        FormsModule,
+                        JsonPipe
+                    ], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"relative text-black\">\n  <input\n    #input\n    class=\"font-bold text-lg w-full outline-none\"\n    autocomplete=\"off\"\n    spellcheck=\"false\"\n    [attr.autocomplete]=\"this.spxAutocomplete()\"\n    [attr.autofocus]=\"this.spxAutofocus()\"\n    [attr.disabled]=\"this.spxReadonly()\"\n    [attr.inputMode]=\"this.spxInputMode()\"\n    [attr.pattern]=\"this.spxPattern()\"\n    [attr.name]=\"this.spxName()\"\n    [attr.type]=\"this.spxType()\"\n    [class.bg-white]=\"!this.spxReadonly()\"\n    [class.bg-gray-300]=\"this.spxReadonly()\"\n    [class.cursor-not-allowed]=\"this.spxReadonly()\"\n    [class.uppercase]=\"this.spxCapitalize()\"\n    [disabled]=\"this.spxReadonly()\"\n    [ngModel]=\"this.value()?.description ? this.value()?.description : this.value()?.value\"\n    (ngModelChange)=\"this.handleChange($event)\"\n    />\n  @if (this.value()?.description && this.value()?.value && this.value()?.description?.valueOf() !== this.value()?.value?.valueOf()) {\n    <span>{{this.value()?.value}}</span>\n  }\n  @if (this.spxIsFocused() && (this.spxType() === 'overlay' || this.spxType() === 'overlaynumber')) {\n    <spx-dropdown\n      [spxSuggestions]=\"this.spxSuggestions()\" (spxSelect)=\"this.handleSuggestionClick($event)\">\n    </spx-dropdown>\n  }\n</div>" }]
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }] });
 
 class SpxInputFloatComponent {
     constructor() {
@@ -339,13 +345,13 @@ class SpxInputFloatComponent {
         return /^[+-]?\d+(\.\d+)?$/.test(value);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SpxInputFloatComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.0.5", type: SpxInputFloatComponent, isStandalone: true, selector: "spx-input-float", inputs: { spxName: { classPropertyName: "spxName", publicName: "spxName", isSignal: true, isRequired: false, transformFunction: null }, spxAutofocus: { classPropertyName: "spxAutofocus", publicName: "spxAutofocus", isSignal: true, isRequired: false, transformFunction: null }, spxElementId: { classPropertyName: "spxElementId", publicName: "spxElementId", isSignal: true, isRequired: false, transformFunction: null }, spxReadonly: { classPropertyName: "spxReadonly", publicName: "spxReadonly", isSignal: true, isRequired: false, transformFunction: null }, spxValidators: { classPropertyName: "spxValidators", publicName: "spxValidators", isSignal: true, isRequired: false, transformFunction: null }, spxStep: { classPropertyName: "spxStep", publicName: "spxStep", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, spxWasInternalUpdate: { classPropertyName: "spxWasInternalUpdate", publicName: "spxWasInternalUpdate", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, viewQueries: [{ propertyName: "firstInputRef", first: true, predicate: ["firstInputRef"], descendants: true, isSignal: true }, { propertyName: "secondInputRef", first: true, predicate: ["secondInputRef"], descendants: true, isSignal: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"flex items-end\">\r\n  <input\r\n    #firstInputRef\r\n    class=\"spx-input-float__input\"\r\n    [attr.autofocus]=\"this.spxAutofocus() ? this.spxAutofocus() : undefined\"\r\n    [attr.disabled]=\"this.spxReadonly()\"\r\n    [attr.pattern]=\"'[0-9]*'\"\r\n    [attr.step]=\"1\"\r\n    [attr.type]=\"'text'\"\r\n    [class.spx-input-float--readonly]=\"this.spxReadonly() ? this.spxReadonly() : undefined\"\r\n    [disabled]=\"this.spxReadonly()\"\r\n    [ngModel]=\"this.internalValue().first ? this.internalValue().first : undefined\"\r\n    (ngModelChange)=\"this.handleInput($event, 1)\" />\r\n  <span class=\"text-black font-bold text-2xl mx-4\">,</span>\r\n  <input #secondInputRef\r\n    [attr.autofocus]=\"this.spxAutofocus() ? this.spxAutofocus() : undefined\"\r\n    class=\"spx-input-float__input\"\r\n    [class.spx-input-float--readonly]=\"this.spxReadonly() ? this.spxReadonly() : undefined\"\r\n    [attr.disabled]=\"this.spxReadonly()\"\r\n    [ngModel]=\"this.internalValue().second ? this.internalValue().second : undefined\"\r\n    (ngModelChange)=\"this.handleInput($event, 2)\"\r\n    [attr.step]=\"1\"\r\n    [attr.type]=\"'text'\"\r\n    [attr.pattern]=\"'[0-9]*'\"\r\n    [disabled]=\"this.spxReadonly()\" />\r\n</div>", styles: [":host{display:block}.spx-input-float__input{border:1px solid #333333;border-radius:8px;background-color:transparent;box-sizing:border-box;color:var(--spx-input--color, rgba(0, 0, 0, .9));flex:1;font-size:20px;font-weight:700;padding:8px;width:100%}.spx-input-float__input:focus{outline:none}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.0.5", type: SpxInputFloatComponent, isStandalone: true, selector: "spx-input-float", inputs: { spxName: { classPropertyName: "spxName", publicName: "spxName", isSignal: true, isRequired: false, transformFunction: null }, spxAutofocus: { classPropertyName: "spxAutofocus", publicName: "spxAutofocus", isSignal: true, isRequired: false, transformFunction: null }, spxElementId: { classPropertyName: "spxElementId", publicName: "spxElementId", isSignal: true, isRequired: false, transformFunction: null }, spxReadonly: { classPropertyName: "spxReadonly", publicName: "spxReadonly", isSignal: true, isRequired: false, transformFunction: null }, spxValidators: { classPropertyName: "spxValidators", publicName: "spxValidators", isSignal: true, isRequired: false, transformFunction: null }, spxStep: { classPropertyName: "spxStep", publicName: "spxStep", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, spxWasInternalUpdate: { classPropertyName: "spxWasInternalUpdate", publicName: "spxWasInternalUpdate", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, viewQueries: [{ propertyName: "firstInputRef", first: true, predicate: ["firstInputRef"], descendants: true, isSignal: true }, { propertyName: "secondInputRef", first: true, predicate: ["secondInputRef"], descendants: true, isSignal: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"flex items-end\">\n  <input\n    #firstInputRef\n    class=\"spx-input-float__input\"\n    [attr.autofocus]=\"this.spxAutofocus() ? this.spxAutofocus() : undefined\"\n    [attr.disabled]=\"this.spxReadonly()\"\n    [attr.pattern]=\"'[0-9]*'\"\n    [attr.step]=\"1\"\n    [attr.type]=\"'text'\"\n    [class.spx-input-float--readonly]=\"this.spxReadonly() ? this.spxReadonly() : undefined\"\n    [disabled]=\"this.spxReadonly()\"\n    [ngModel]=\"this.internalValue().first ? this.internalValue().first : undefined\"\n    (ngModelChange)=\"this.handleInput($event, 1)\" />\n  <span class=\"text-black font-bold text-2xl mx-4\">,</span>\n  <input #secondInputRef\n    [attr.autofocus]=\"this.spxAutofocus() ? this.spxAutofocus() : undefined\"\n    class=\"spx-input-float__input\"\n    [class.spx-input-float--readonly]=\"this.spxReadonly() ? this.spxReadonly() : undefined\"\n    [attr.disabled]=\"this.spxReadonly()\"\n    [ngModel]=\"this.internalValue().second ? this.internalValue().second : undefined\"\n    (ngModelChange)=\"this.handleInput($event, 2)\"\n    [attr.step]=\"1\"\n    [attr.type]=\"'text'\"\n    [attr.pattern]=\"'[0-9]*'\"\n    [disabled]=\"this.spxReadonly()\" />\n</div>", styles: [":host{display:block}.spx-input-float__input{border:1px solid #333333;border-radius:8px;background-color:transparent;box-sizing:border-box;color:var(--spx-input--color, rgba(0, 0, 0, .9));flex:1;font-size:20px;font-weight:700;padding:8px;width:100%}.spx-input-float__input:focus{outline:none}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SpxInputFloatComponent, decorators: [{
             type: Component,
             args: [{ selector: 'spx-input-float', imports: [
                         FormsModule,
-                    ], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"flex items-end\">\r\n  <input\r\n    #firstInputRef\r\n    class=\"spx-input-float__input\"\r\n    [attr.autofocus]=\"this.spxAutofocus() ? this.spxAutofocus() : undefined\"\r\n    [attr.disabled]=\"this.spxReadonly()\"\r\n    [attr.pattern]=\"'[0-9]*'\"\r\n    [attr.step]=\"1\"\r\n    [attr.type]=\"'text'\"\r\n    [class.spx-input-float--readonly]=\"this.spxReadonly() ? this.spxReadonly() : undefined\"\r\n    [disabled]=\"this.spxReadonly()\"\r\n    [ngModel]=\"this.internalValue().first ? this.internalValue().first : undefined\"\r\n    (ngModelChange)=\"this.handleInput($event, 1)\" />\r\n  <span class=\"text-black font-bold text-2xl mx-4\">,</span>\r\n  <input #secondInputRef\r\n    [attr.autofocus]=\"this.spxAutofocus() ? this.spxAutofocus() : undefined\"\r\n    class=\"spx-input-float__input\"\r\n    [class.spx-input-float--readonly]=\"this.spxReadonly() ? this.spxReadonly() : undefined\"\r\n    [attr.disabled]=\"this.spxReadonly()\"\r\n    [ngModel]=\"this.internalValue().second ? this.internalValue().second : undefined\"\r\n    (ngModelChange)=\"this.handleInput($event, 2)\"\r\n    [attr.step]=\"1\"\r\n    [attr.type]=\"'text'\"\r\n    [attr.pattern]=\"'[0-9]*'\"\r\n    [disabled]=\"this.spxReadonly()\" />\r\n</div>", styles: [":host{display:block}.spx-input-float__input{border:1px solid #333333;border-radius:8px;background-color:transparent;box-sizing:border-box;color:var(--spx-input--color, rgba(0, 0, 0, .9));flex:1;font-size:20px;font-weight:700;padding:8px;width:100%}.spx-input-float__input:focus{outline:none}\n"] }]
+                    ], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"flex items-end\">\n  <input\n    #firstInputRef\n    class=\"spx-input-float__input\"\n    [attr.autofocus]=\"this.spxAutofocus() ? this.spxAutofocus() : undefined\"\n    [attr.disabled]=\"this.spxReadonly()\"\n    [attr.pattern]=\"'[0-9]*'\"\n    [attr.step]=\"1\"\n    [attr.type]=\"'text'\"\n    [class.spx-input-float--readonly]=\"this.spxReadonly() ? this.spxReadonly() : undefined\"\n    [disabled]=\"this.spxReadonly()\"\n    [ngModel]=\"this.internalValue().first ? this.internalValue().first : undefined\"\n    (ngModelChange)=\"this.handleInput($event, 1)\" />\n  <span class=\"text-black font-bold text-2xl mx-4\">,</span>\n  <input #secondInputRef\n    [attr.autofocus]=\"this.spxAutofocus() ? this.spxAutofocus() : undefined\"\n    class=\"spx-input-float__input\"\n    [class.spx-input-float--readonly]=\"this.spxReadonly() ? this.spxReadonly() : undefined\"\n    [attr.disabled]=\"this.spxReadonly()\"\n    [ngModel]=\"this.internalValue().second ? this.internalValue().second : undefined\"\n    (ngModelChange)=\"this.handleInput($event, 2)\"\n    [attr.step]=\"1\"\n    [attr.type]=\"'text'\"\n    [attr.pattern]=\"'[0-9]*'\"\n    [disabled]=\"this.spxReadonly()\" />\n</div>", styles: [":host{display:block}.spx-input-float__input{border:1px solid #333333;border-radius:8px;background-color:transparent;box-sizing:border-box;color:var(--spx-input--color, rgba(0, 0, 0, .9));flex:1;font-size:20px;font-weight:700;padding:8px;width:100%}.spx-input-float__input:focus{outline:none}\n"] }]
         }] });
 
 class SpxInputNumberComponent {
@@ -382,11 +388,11 @@ class SpxInputNumberComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SpxInputNumberComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.0.5", type: SpxInputNumberComponent, isStandalone: true, selector: "spx-input-number", inputs: { spxName: { classPropertyName: "spxName", publicName: "spxName", isSignal: true, isRequired: false, transformFunction: null }, spxAutofocus: { classPropertyName: "spxAutofocus", publicName: "spxAutofocus", isSignal: true, isRequired: false, transformFunction: null }, spxInputMode: { classPropertyName: "spxInputMode", publicName: "spxInputMode", isSignal: true, isRequired: false, transformFunction: null }, spxReadonly: { classPropertyName: "spxReadonly", publicName: "spxReadonly", isSignal: true, isRequired: false, transformFunction: null }, spxValidators: { classPropertyName: "spxValidators", publicName: "spxValidators", isSignal: true, isRequired: false, transformFunction: null }, spxFocused: { classPropertyName: "spxFocused", publicName: "spxFocused", isSignal: true, isRequired: false, transformFunction: null }, spxStep: { classPropertyName: "spxStep", publicName: "spxStep", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, spxElementId: { classPropertyName: "spxElementId", publicName: "spxElementId", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["input"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"spx-input-number__controls\">\r\n  <input\r\n    #input\r\n    class=\"spx-input-number__input\"\r\n    [attr.autofocus]=\"this.spxAutofocus() ? this.spxAutofocus() : undefined\"\r\n    [class.spx-input-number--readonly]=\"this.spxReadonly() ? this.spxReadonly() : undefined\"\r\n    [attr.disabled]=\"this.spxReadonly()\"\r\n    [attr.inputMode]=\"this.spxInputMode() ? this.spxInputMode() : undefined\"\r\n    [attr.step]=\"this.spxStep() ? this.spxStep() : undefined\"\r\n    [attr.type]=\"'number'\"\r\n    [disabled]=\"this.spxReadonly()\"\r\n    [ngModel]=\"this.value() ? this.value().value : undefined\"\r\n    (ngModelChange)=\"this.handleChange($event)\" />\r\n</div>  ", styles: [":host{display:block}.spx-input-number__input{border:0;background-color:transparent;box-sizing:border-box;color:var(--spx-input--color, rgba(0, 0, 0, .9));font-size:20px;font-weight:700;margin-right:10px;padding:0;width:100%}.spx-input-number__input:focus{outline:none}.spx-input-number__value{color:#0009;font-size:14px}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.0.5", type: SpxInputNumberComponent, isStandalone: true, selector: "spx-input-number", inputs: { spxName: { classPropertyName: "spxName", publicName: "spxName", isSignal: true, isRequired: false, transformFunction: null }, spxAutofocus: { classPropertyName: "spxAutofocus", publicName: "spxAutofocus", isSignal: true, isRequired: false, transformFunction: null }, spxInputMode: { classPropertyName: "spxInputMode", publicName: "spxInputMode", isSignal: true, isRequired: false, transformFunction: null }, spxReadonly: { classPropertyName: "spxReadonly", publicName: "spxReadonly", isSignal: true, isRequired: false, transformFunction: null }, spxValidators: { classPropertyName: "spxValidators", publicName: "spxValidators", isSignal: true, isRequired: false, transformFunction: null }, spxFocused: { classPropertyName: "spxFocused", publicName: "spxFocused", isSignal: true, isRequired: false, transformFunction: null }, spxStep: { classPropertyName: "spxStep", publicName: "spxStep", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, spxElementId: { classPropertyName: "spxElementId", publicName: "spxElementId", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["input"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"spx-input-number__controls\">\n  <input\n    #input\n    class=\"spx-input-number__input\"\n    [attr.autofocus]=\"this.spxAutofocus() ? this.spxAutofocus() : undefined\"\n    [class.spx-input-number--readonly]=\"this.spxReadonly() ? this.spxReadonly() : undefined\"\n    [attr.disabled]=\"this.spxReadonly()\"\n    [attr.inputMode]=\"this.spxInputMode() ? this.spxInputMode() : undefined\"\n    [attr.step]=\"this.spxStep() ? this.spxStep() : undefined\"\n    [attr.type]=\"'number'\"\n    [disabled]=\"this.spxReadonly()\"\n    [ngModel]=\"this.value() ? this.value().value : undefined\"\n    (ngModelChange)=\"this.handleChange($event)\" />\n</div>  ", styles: [":host{display:block}.spx-input-number__input{border:0;background-color:transparent;box-sizing:border-box;color:var(--spx-input--color, rgba(0, 0, 0, .9));font-size:20px;font-weight:700;margin-right:10px;padding:0;width:100%}.spx-input-number__input:focus{outline:none}.spx-input-number__value{color:#0009;font-size:14px}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SpxInputNumberComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'spx-input-number', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [FormsModule], template: "<div class=\"spx-input-number__controls\">\r\n  <input\r\n    #input\r\n    class=\"spx-input-number__input\"\r\n    [attr.autofocus]=\"this.spxAutofocus() ? this.spxAutofocus() : undefined\"\r\n    [class.spx-input-number--readonly]=\"this.spxReadonly() ? this.spxReadonly() : undefined\"\r\n    [attr.disabled]=\"this.spxReadonly()\"\r\n    [attr.inputMode]=\"this.spxInputMode() ? this.spxInputMode() : undefined\"\r\n    [attr.step]=\"this.spxStep() ? this.spxStep() : undefined\"\r\n    [attr.type]=\"'number'\"\r\n    [disabled]=\"this.spxReadonly()\"\r\n    [ngModel]=\"this.value() ? this.value().value : undefined\"\r\n    (ngModelChange)=\"this.handleChange($event)\" />\r\n</div>  ", styles: [":host{display:block}.spx-input-number__input{border:0;background-color:transparent;box-sizing:border-box;color:var(--spx-input--color, rgba(0, 0, 0, .9));font-size:20px;font-weight:700;margin-right:10px;padding:0;width:100%}.spx-input-number__input:focus{outline:none}.spx-input-number__value{color:#0009;font-size:14px}\n"] }]
+            args: [{ selector: 'spx-input-number', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [FormsModule], template: "<div class=\"spx-input-number__controls\">\n  <input\n    #input\n    class=\"spx-input-number__input\"\n    [attr.autofocus]=\"this.spxAutofocus() ? this.spxAutofocus() : undefined\"\n    [class.spx-input-number--readonly]=\"this.spxReadonly() ? this.spxReadonly() : undefined\"\n    [attr.disabled]=\"this.spxReadonly()\"\n    [attr.inputMode]=\"this.spxInputMode() ? this.spxInputMode() : undefined\"\n    [attr.step]=\"this.spxStep() ? this.spxStep() : undefined\"\n    [attr.type]=\"'number'\"\n    [disabled]=\"this.spxReadonly()\"\n    [ngModel]=\"this.value() ? this.value().value : undefined\"\n    (ngModelChange)=\"this.handleChange($event)\" />\n</div>  ", styles: [":host{display:block}.spx-input-number__input{border:0;background-color:transparent;box-sizing:border-box;color:var(--spx-input--color, rgba(0, 0, 0, .9));font-size:20px;font-weight:700;margin-right:10px;padding:0;width:100%}.spx-input-number__input:focus{outline:none}.spx-input-number__value{color:#0009;font-size:14px}\n"] }]
         }] });
 
 class SpxInputRadioComponent {
@@ -467,13 +473,13 @@ class SpxInputRadioComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SpxInputRadioComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: SpxInputRadioComponent, isStandalone: true, selector: "spx-input-radio", inputs: { spxName: { classPropertyName: "spxName", publicName: "spxName", isSignal: true, isRequired: false, transformFunction: null }, spxValidators: { classPropertyName: "spxValidators", publicName: "spxValidators", isSignal: true, isRequired: false, transformFunction: null }, spxShowLabel: { classPropertyName: "spxShowLabel", publicName: "spxShowLabel", isSignal: true, isRequired: false, transformFunction: null }, spxReadonly: { classPropertyName: "spxReadonly", publicName: "spxReadonly", isSignal: true, isRequired: false, transformFunction: null }, spxSuggestions: { classPropertyName: "spxSuggestions", publicName: "spxSuggestions", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, spxElementId: { classPropertyName: "spxElementId", publicName: "spxElementId", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"grid grid-cols-2 gap-2\" [class.mt-3]=\"this.spxShowLabel()\">\r\n  @for (valuePair of this.cachedSuggestions(); track valuePair; let i = $index) {\r\n    <spx-suggestion\r\n      [spxDisabled]=\"this.spxReadonly()\"\r\n      [spxSelected]=\"this.value()?.value === valuePair?.value\"\r\n      [spxTabbable]=\"this.focusPosition() === i\"\r\n      [spxFocused]=\"(this.focusPosition() === i && this.spxIsFocused())\"\r\n      (click)=\"this.handleSuggestionClick(valuePair)\">\r\n      {{valuePair?.description}}\r\n    </spx-suggestion>\r\n  }\r\n</div>", dependencies: [{ kind: "component", type: SpxSuggestionComponent, selector: "spx-suggestion", inputs: ["spxDisabled", "spxFocused", "spxSelected", "spxTabbable"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: SpxInputRadioComponent, isStandalone: true, selector: "spx-input-radio", inputs: { spxName: { classPropertyName: "spxName", publicName: "spxName", isSignal: true, isRequired: false, transformFunction: null }, spxValidators: { classPropertyName: "spxValidators", publicName: "spxValidators", isSignal: true, isRequired: false, transformFunction: null }, spxShowLabel: { classPropertyName: "spxShowLabel", publicName: "spxShowLabel", isSignal: true, isRequired: false, transformFunction: null }, spxReadonly: { classPropertyName: "spxReadonly", publicName: "spxReadonly", isSignal: true, isRequired: false, transformFunction: null }, spxSuggestions: { classPropertyName: "spxSuggestions", publicName: "spxSuggestions", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, spxElementId: { classPropertyName: "spxElementId", publicName: "spxElementId", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"grid grid-cols-2 gap-2\" [class.mt-3]=\"this.spxShowLabel()\">\n  @for (valuePair of this.cachedSuggestions(); track valuePair; let i = $index) {\n    <spx-suggestion\n      [spxDisabled]=\"this.spxReadonly()\"\n      [spxSelected]=\"this.value()?.value === valuePair?.value\"\n      [spxTabbable]=\"this.focusPosition() === i\"\n      [spxFocused]=\"(this.focusPosition() === i && this.spxIsFocused())\"\n      (click)=\"this.handleSuggestionClick(valuePair)\">\n      {{valuePair?.description}}\n    </spx-suggestion>\n  }\n</div>", dependencies: [{ kind: "component", type: SpxSuggestionComponent, selector: "spx-suggestion", inputs: ["spxDisabled", "spxFocused", "spxSelected", "spxTabbable"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SpxInputRadioComponent, decorators: [{
             type: Component,
             args: [{ selector: 'spx-input-radio', standalone: true, imports: [
                         SpxSuggestionComponent
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"grid grid-cols-2 gap-2\" [class.mt-3]=\"this.spxShowLabel()\">\r\n  @for (valuePair of this.cachedSuggestions(); track valuePair; let i = $index) {\r\n    <spx-suggestion\r\n      [spxDisabled]=\"this.spxReadonly()\"\r\n      [spxSelected]=\"this.value()?.value === valuePair?.value\"\r\n      [spxTabbable]=\"this.focusPosition() === i\"\r\n      [spxFocused]=\"(this.focusPosition() === i && this.spxIsFocused())\"\r\n      (click)=\"this.handleSuggestionClick(valuePair)\">\r\n      {{valuePair?.description}}\r\n    </spx-suggestion>\r\n  }\r\n</div>" }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"grid grid-cols-2 gap-2\" [class.mt-3]=\"this.spxShowLabel()\">\n  @for (valuePair of this.cachedSuggestions(); track valuePair; let i = $index) {\n    <spx-suggestion\n      [spxDisabled]=\"this.spxReadonly()\"\n      [spxSelected]=\"this.value()?.value === valuePair?.value\"\n      [spxTabbable]=\"this.focusPosition() === i\"\n      [spxFocused]=\"(this.focusPosition() === i && this.spxIsFocused())\"\n      (click)=\"this.handleSuggestionClick(valuePair)\">\n      {{valuePair?.description}}\n    </spx-suggestion>\n  }\n</div>" }]
         }] });
 
 class SpxInputTimeModalComponent {
@@ -497,7 +503,7 @@ class SpxInputTimeModalComponent {
         this.modalController.dismiss(value);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SpxInputTimeModalComponent, deps: [{ token: i1$2.ModalController }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: SpxInputTimeModalComponent, isStandalone: true, selector: "spx-input-time-modal", inputs: { view: { classPropertyName: "view", publicName: "view", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { change: "change" }, ngImport: i0, template: "<ion-header>\r\n  <ion-toolbar>\r\n    <ion-title>Select {{view()}}</ion-title>\r\n    <ion-buttons slot=\"end\">\r\n      <spx-button [spxSeverity]=\"typeError\" (spxClick)=\"closeDialog()\">\r\n        <fa-icon [icon]=\"faXmark\"></fa-icon>\r\n      </spx-button>\r\n    </ion-buttons>\r\n  </ion-toolbar>\r\n</ion-header>\r\n<ion-content class=\"ion-padding bg-white\">\r\n  <!-- Uren -->\r\n  <div class=\"custom-bg grid grid-cols-1 gap-3\">\r\n    @if (view() === 'hours') {\r\n      <div class=\"flex-wrap gap-2\">\r\n        <div class=\"grid grid-cols-3 md:grid-cols-4 gap-3\">\r\n          @for (hour of hourOptions(); track hour) {\r\n            <div  class=\"text-center font-bold custom-square rounded text-gray-900 text-lg p-3 w-full truncate outline-none bg-sky-100 focus:ring-sky-300 hover:bg-sky-300 active:bg-sky-300\" [class.selected]=\"value() === hour\" (click)=\"onChange(hour)\">\r\n              {{ hour }}\r\n            </div>\r\n          }\r\n        </div>\r\n      </div>\r\n    }\r\n    <!-- Minuten -->\r\n    @if (view() === 'minutes') {\r\n      <div class=\"grid grid-cols-1 gap-3\">\r\n        <div class=\"grid grid-cols-4 md:grid-cols-5 gap-3\">\r\n          @for (minute of minuteOptions(); track minute) {\r\n            <div class=\"text-center font-bold custom-square rounded text-gray-900 text-lg p-3 w-ful truncate outline-none bg-sky-100 focus:ring-sky-300 hover:bg-sky-300 active:bg-sky-300\" [class.selected]=\"value() === minute\" (click)=\"onChange(minute)\">\r\n              {{ minute }}\r\n            </div>\r\n          }\r\n        </div>\r\n      </div>\r\n    }\r\n  </div>\r\n</ion-content>", dependencies: [{ kind: "ngmodule", type: FontAwesomeModule }, { kind: "component", type: i1.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "mask", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "transform", "a11yRole"] }, { kind: "component", type: IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: IonContent, selector: "ion-content", inputs: ["color", "fixedSlotPlacement", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "component", type: SpxButtonComponent, selector: "spx-button", inputs: ["spxDisabled", "spxClass", "spxClassObject", "spxForm", "spxFullHeight", "spxFullWidth", "spxSeverity", "spxSize", "spxTabIndex", "spxType"], outputs: ["spxClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: SpxInputTimeModalComponent, isStandalone: true, selector: "spx-input-time-modal", inputs: { view: { classPropertyName: "view", publicName: "view", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { change: "change" }, ngImport: i0, template: "<ion-header>\n  <ion-toolbar>\n    <ion-title>Select {{view()}}</ion-title>\n    <ion-buttons slot=\"end\">\n      <spx-button [spxSeverity]=\"typeError\" (spxClick)=\"closeDialog()\">\n        <fa-icon [icon]=\"faXmark\"></fa-icon>\n      </spx-button>\n    </ion-buttons>\n  </ion-toolbar>\n</ion-header>\n<ion-content class=\"ion-padding bg-white\">\n  <!-- Uren -->\n  <div class=\"custom-bg grid grid-cols-1 gap-3\">\n    @if (view() === 'hours') {\n      <div class=\"flex-wrap gap-2\">\n        <div class=\"grid grid-cols-3 md:grid-cols-4 gap-3\">\n          @for (hour of hourOptions(); track hour) {\n            <div  class=\"text-center font-bold custom-square rounded text-gray-900 text-lg p-3 w-full truncate outline-none bg-sky-100 focus:ring-sky-300 hover:bg-sky-300 active:bg-sky-300\" [class.selected]=\"value() === hour\" (click)=\"onChange(hour)\">\n              {{ hour }}\n            </div>\n          }\n        </div>\n      </div>\n    }\n    <!-- Minuten -->\n    @if (view() === 'minutes') {\n      <div class=\"grid grid-cols-1 gap-3\">\n        <div class=\"grid grid-cols-4 md:grid-cols-5 gap-3\">\n          @for (minute of minuteOptions(); track minute) {\n            <div class=\"text-center font-bold custom-square rounded text-gray-900 text-lg p-3 w-ful truncate outline-none bg-sky-100 focus:ring-sky-300 hover:bg-sky-300 active:bg-sky-300\" [class.selected]=\"value() === minute\" (click)=\"onChange(minute)\">\n              {{ minute }}\n            </div>\n          }\n        </div>\n      </div>\n    }\n  </div>\n</ion-content>", dependencies: [{ kind: "ngmodule", type: FontAwesomeModule }, { kind: "component", type: i1.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "mask", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "transform", "a11yRole"] }, { kind: "component", type: IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: IonContent, selector: "ion-content", inputs: ["color", "fixedSlotPlacement", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "component", type: SpxButtonComponent, selector: "spx-button", inputs: ["spxDisabled", "spxClass", "spxClassObject", "spxForm", "spxFullHeight", "spxFullWidth", "spxSeverity", "spxSize", "spxTabIndex", "spxType"], outputs: ["spxClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SpxInputTimeModalComponent, decorators: [{
             type: Component,
@@ -509,7 +515,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
                         IonTitle,
                         IonToolbar,
                         SpxButtonComponent,
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ion-header>\r\n  <ion-toolbar>\r\n    <ion-title>Select {{view()}}</ion-title>\r\n    <ion-buttons slot=\"end\">\r\n      <spx-button [spxSeverity]=\"typeError\" (spxClick)=\"closeDialog()\">\r\n        <fa-icon [icon]=\"faXmark\"></fa-icon>\r\n      </spx-button>\r\n    </ion-buttons>\r\n  </ion-toolbar>\r\n</ion-header>\r\n<ion-content class=\"ion-padding bg-white\">\r\n  <!-- Uren -->\r\n  <div class=\"custom-bg grid grid-cols-1 gap-3\">\r\n    @if (view() === 'hours') {\r\n      <div class=\"flex-wrap gap-2\">\r\n        <div class=\"grid grid-cols-3 md:grid-cols-4 gap-3\">\r\n          @for (hour of hourOptions(); track hour) {\r\n            <div  class=\"text-center font-bold custom-square rounded text-gray-900 text-lg p-3 w-full truncate outline-none bg-sky-100 focus:ring-sky-300 hover:bg-sky-300 active:bg-sky-300\" [class.selected]=\"value() === hour\" (click)=\"onChange(hour)\">\r\n              {{ hour }}\r\n            </div>\r\n          }\r\n        </div>\r\n      </div>\r\n    }\r\n    <!-- Minuten -->\r\n    @if (view() === 'minutes') {\r\n      <div class=\"grid grid-cols-1 gap-3\">\r\n        <div class=\"grid grid-cols-4 md:grid-cols-5 gap-3\">\r\n          @for (minute of minuteOptions(); track minute) {\r\n            <div class=\"text-center font-bold custom-square rounded text-gray-900 text-lg p-3 w-ful truncate outline-none bg-sky-100 focus:ring-sky-300 hover:bg-sky-300 active:bg-sky-300\" [class.selected]=\"value() === minute\" (click)=\"onChange(minute)\">\r\n              {{ minute }}\r\n            </div>\r\n          }\r\n        </div>\r\n      </div>\r\n    }\r\n  </div>\r\n</ion-content>" }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ion-header>\n  <ion-toolbar>\n    <ion-title>Select {{view()}}</ion-title>\n    <ion-buttons slot=\"end\">\n      <spx-button [spxSeverity]=\"typeError\" (spxClick)=\"closeDialog()\">\n        <fa-icon [icon]=\"faXmark\"></fa-icon>\n      </spx-button>\n    </ion-buttons>\n  </ion-toolbar>\n</ion-header>\n<ion-content class=\"ion-padding bg-white\">\n  <!-- Uren -->\n  <div class=\"custom-bg grid grid-cols-1 gap-3\">\n    @if (view() === 'hours') {\n      <div class=\"flex-wrap gap-2\">\n        <div class=\"grid grid-cols-3 md:grid-cols-4 gap-3\">\n          @for (hour of hourOptions(); track hour) {\n            <div  class=\"text-center font-bold custom-square rounded text-gray-900 text-lg p-3 w-full truncate outline-none bg-sky-100 focus:ring-sky-300 hover:bg-sky-300 active:bg-sky-300\" [class.selected]=\"value() === hour\" (click)=\"onChange(hour)\">\n              {{ hour }}\n            </div>\n          }\n        </div>\n      </div>\n    }\n    <!-- Minuten -->\n    @if (view() === 'minutes') {\n      <div class=\"grid grid-cols-1 gap-3\">\n        <div class=\"grid grid-cols-4 md:grid-cols-5 gap-3\">\n          @for (minute of minuteOptions(); track minute) {\n            <div class=\"text-center font-bold custom-square rounded text-gray-900 text-lg p-3 w-ful truncate outline-none bg-sky-100 focus:ring-sky-300 hover:bg-sky-300 active:bg-sky-300\" [class.selected]=\"value() === minute\" (click)=\"onChange(minute)\">\n              {{ minute }}\n            </div>\n          }\n        </div>\n      </div>\n    }\n  </div>\n</ion-content>" }]
         }], ctorParameters: () => [{ type: i1$2.ModalController }] });
 
 class SpxInputTimeComponent {
@@ -590,11 +596,11 @@ class SpxInputTimeComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SpxInputTimeComponent, deps: [{ token: i1$2.ModalController }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.0.5", type: SpxInputTimeComponent, isStandalone: true, selector: "spx-input-time", inputs: { spxName: { classPropertyName: "spxName", publicName: "spxName", isSignal: true, isRequired: false, transformFunction: null }, spxAutofocus: { classPropertyName: "spxAutofocus", publicName: "spxAutofocus", isSignal: true, isRequired: false, transformFunction: null }, spxInputMode: { classPropertyName: "spxInputMode", publicName: "spxInputMode", isSignal: true, isRequired: false, transformFunction: null }, spxPattern: { classPropertyName: "spxPattern", publicName: "spxPattern", isSignal: true, isRequired: false, transformFunction: null }, spxSuggestions: { classPropertyName: "spxSuggestions", publicName: "spxSuggestions", isSignal: true, isRequired: false, transformFunction: null }, spxReadonly: { classPropertyName: "spxReadonly", publicName: "spxReadonly", isSignal: true, isRequired: false, transformFunction: null }, spxValidators: { classPropertyName: "spxValidators", publicName: "spxValidators", isSignal: true, isRequired: false, transformFunction: null }, spxCapitalize: { classPropertyName: "spxCapitalize", publicName: "spxCapitalize", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { value: "valueChange" }, viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["input"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"relative text-black\">\r\n  <div class=\"flex items-center justify-around gap-3\">\r\n    <div class=\"grow rounded bg-gray-100 p-3 text-xl text-center font-bold\" (click)=\"openDialog('hours')\">{{ formattedHour() ?? '--' }}</div>\r\n    <div class=\"text-gray text-xl\">:</div>\r\n    <div class=\"grow rounded bg-gray-100 p-3 text-xl text-center font-bold\" (click)=\"openDialog('minutes')\">{{ formattedMinute() ?? '--' }}</div>\r\n  </div>\r\n</div>", styles: [".custom-square.selected{background-color:#007bff;color:#fff;border-color:#007bff}.custom-bg{--background: #FFFFFF}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.0.5", type: SpxInputTimeComponent, isStandalone: true, selector: "spx-input-time", inputs: { spxName: { classPropertyName: "spxName", publicName: "spxName", isSignal: true, isRequired: false, transformFunction: null }, spxAutofocus: { classPropertyName: "spxAutofocus", publicName: "spxAutofocus", isSignal: true, isRequired: false, transformFunction: null }, spxInputMode: { classPropertyName: "spxInputMode", publicName: "spxInputMode", isSignal: true, isRequired: false, transformFunction: null }, spxPattern: { classPropertyName: "spxPattern", publicName: "spxPattern", isSignal: true, isRequired: false, transformFunction: null }, spxSuggestions: { classPropertyName: "spxSuggestions", publicName: "spxSuggestions", isSignal: true, isRequired: false, transformFunction: null }, spxReadonly: { classPropertyName: "spxReadonly", publicName: "spxReadonly", isSignal: true, isRequired: false, transformFunction: null }, spxValidators: { classPropertyName: "spxValidators", publicName: "spxValidators", isSignal: true, isRequired: false, transformFunction: null }, spxCapitalize: { classPropertyName: "spxCapitalize", publicName: "spxCapitalize", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { value: "valueChange" }, viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["input"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"relative text-black\">\n  <div class=\"flex items-center justify-around gap-3\">\n    <div class=\"grow rounded bg-gray-100 p-3 text-xl text-center font-bold\" (click)=\"openDialog('hours')\">{{ formattedHour() ?? '--' }}</div>\n    <div class=\"text-gray text-xl\">:</div>\n    <div class=\"grow rounded bg-gray-100 p-3 text-xl text-center font-bold\" (click)=\"openDialog('minutes')\">{{ formattedMinute() ?? '--' }}</div>\n  </div>\n</div>", styles: [".custom-square.selected{background-color:#007bff;color:#fff;border-color:#007bff}.custom-bg{--background: #FFFFFF}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SpxInputTimeComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'spx-input-time', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"relative text-black\">\r\n  <div class=\"flex items-center justify-around gap-3\">\r\n    <div class=\"grow rounded bg-gray-100 p-3 text-xl text-center font-bold\" (click)=\"openDialog('hours')\">{{ formattedHour() ?? '--' }}</div>\r\n    <div class=\"text-gray text-xl\">:</div>\r\n    <div class=\"grow rounded bg-gray-100 p-3 text-xl text-center font-bold\" (click)=\"openDialog('minutes')\">{{ formattedMinute() ?? '--' }}</div>\r\n  </div>\r\n</div>", styles: [".custom-square.selected{background-color:#007bff;color:#fff;border-color:#007bff}.custom-bg{--background: #FFFFFF}\n"] }]
+            args: [{ selector: 'spx-input-time', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"relative text-black\">\n  <div class=\"flex items-center justify-around gap-3\">\n    <div class=\"grow rounded bg-gray-100 p-3 text-xl text-center font-bold\" (click)=\"openDialog('hours')\">{{ formattedHour() ?? '--' }}</div>\n    <div class=\"text-gray text-xl\">:</div>\n    <div class=\"grow rounded bg-gray-100 p-3 text-xl text-center font-bold\" (click)=\"openDialog('minutes')\">{{ formattedMinute() ?? '--' }}</div>\n  </div>\n</div>", styles: [".custom-square.selected{background-color:#007bff;color:#fff;border-color:#007bff}.custom-bg{--background: #FFFFFF}\n"] }]
         }], ctorParameters: () => [{ type: i1$2.ModalController }] });
 
 var stepType;
@@ -829,14 +835,14 @@ class SpxInputDateComponent {
         this.selectedDay.set(null);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SpxInputDateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: SpxInputDateComponent, isStandalone: true, selector: "spx-input-date", inputs: { spxMax: { classPropertyName: "spxMax", publicName: "spxMax", isSignal: true, isRequired: true, transformFunction: null }, spxMin: { classPropertyName: "spxMin", publicName: "spxMin", isSignal: true, isRequired: true, transformFunction: null }, spxReadonly: { classPropertyName: "spxReadonly", publicName: "spxReadonly", isSignal: true, isRequired: false, transformFunction: null }, spxValidators: { classPropertyName: "spxValidators", publicName: "spxValidators", isSignal: true, isRequired: false, transformFunction: null }, spxAutoFocus: { classPropertyName: "spxAutoFocus", publicName: "spxAutoFocus", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, spxSelectDay: { classPropertyName: "spxSelectDay", publicName: "spxSelectDay", isSignal: true, isRequired: false, transformFunction: null }, spxSelectMonth: { classPropertyName: "spxSelectMonth", publicName: "spxSelectMonth", isSignal: true, isRequired: false, transformFunction: null }, spxElementId: { classPropertyName: "spxElementId", publicName: "spxElementId", isSignal: true, isRequired: false, transformFunction: null }, spxSuggestions: { classPropertyName: "spxSuggestions", publicName: "spxSuggestions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { listeners: { "keydown": "handleTabKey($event)" } }, viewQueries: [{ propertyName: "yearInputComponent", first: true, predicate: stepType.years, descendants: true, isSignal: true }, { propertyName: "monthInputComponent", first: true, predicate: stepType.months, descendants: true, isSignal: true }, { propertyName: "dayInputComponent", first: true, predicate: stepType.days, descendants: true, isSignal: true }], usesOnChanges: true, ngImport: i0, template: "<div class='spx-input-date__controls'>\r\n  <input #years\r\n    class='spx-input-date__input'\r\n    [ngModel]=\"selectedYear()\"\r\n    (ngModelChange)=\"onModelChange($event, 'years')\"\r\n    [attr.type]=\"'number'\"\r\n    (click)=\"this.handleFocus('years')\"\r\n    [attr.min]=\"1900\"\r\n    [attr.max]=\"2100\"\r\n    [attr.step]=\"1\"\r\n    />\r\n  <div class='spx-input-date__control-label'>Year</div>\r\n  @if (this.spxSelectMonth()) {\r\n    <input #months\r\n      class='spx-input-date__input'\r\n      [ngModel]=\"selectedMonth()\"\r\n      (ngModelChange)=\"onModelChange($event, 'months')\"\r\n      (click)=\"this.handleFocus('months')\"\r\n      [attr.type]=\"'number'\"\r\n      [attr.min]=\"1\"\r\n      [attr.max]=\"12\"\r\n      [attr.step]=\"1\" />\r\n  }\r\n  <div class='spx-input-date__control-label'>Month</div>\r\n  @if (this.spxSelectDay()) {\r\n    <input #days\r\n      class='spx-input-date__input'\r\n      [ngModel]=\"selectedDay()\"\r\n      (ngModelChange)=\"onModelChange($event, 'days')\"\r\n      (click)=\"this.handleFocus('days')\"\r\n      [attr.type]=\"'number'\"\r\n      [attr.min]=\"1\"\r\n      [attr.max]=\"31\"\r\n      [attr.step]=\"1\" />\r\n    <div class='spx-input-date__control-label'>Days</div>\r\n  }\r\n</div>\r\n<div class='spx-input-date__suggestions'>\r\n  @for (valuePair of spxSuggestionC(); track valuePair.value) {\r\n    <spx-suggestion [spxSelected]=\"\r\n    (selectedYear() === valuePair.value && this.spxSelectedStep() === 'years') ||\r\n    (selectedMonth() === valuePair.value && this.spxSelectedStep() === 'months') ||  \r\n    (selectedDay() === valuePair.value && this.spxSelectedStep() === 'days')\"\r\n    (click)=\"this.handleSuggestionClick(valuePair.value)\">{{valuePair?.description}}</spx-suggestion>\r\n  }\r\n</div>", styles: [":host{display:block}.spx-input-date__input{background-color:transparent;border:1px solid #979797;border-radius:4px;color:var(--spx-input--color, rgba(0, 0, 0, .9));box-sizing:border-box;font-size:16px;margin-right:10px;padding:6px;text-align:center;width:100%}.spx-input-date__input:active{transform:scale(.95)}.spx-input-date__input:focus{border:var(--spx-input-box--focus--border, 1px solid rgb(115, 168, 210));border-radius:4px;outline:none}.spx-input-date__control-label{align-items:center;color:#000000b3;display:inline-grid;font-size:13px;letter-spacing:1px}.spx-input-date__input::-webkit-outer-spin-button,.spx-input-date__input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.spx-input-date__input[type=number]{-moz-appearance:textfield}.spx-input-date__suggestions,.spx-input-date__controls{display:grid;grid-gap:8px;grid-template-columns:repeat(4,1fr);margin-top:8px}\n"], dependencies: [{ kind: "component", type: SpxSuggestionComponent, selector: "spx-suggestion", inputs: ["spxDisabled", "spxFocused", "spxSelected", "spxTabbable"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: SpxInputDateComponent, isStandalone: true, selector: "spx-input-date", inputs: { spxMax: { classPropertyName: "spxMax", publicName: "spxMax", isSignal: true, isRequired: true, transformFunction: null }, spxMin: { classPropertyName: "spxMin", publicName: "spxMin", isSignal: true, isRequired: true, transformFunction: null }, spxReadonly: { classPropertyName: "spxReadonly", publicName: "spxReadonly", isSignal: true, isRequired: false, transformFunction: null }, spxValidators: { classPropertyName: "spxValidators", publicName: "spxValidators", isSignal: true, isRequired: false, transformFunction: null }, spxAutoFocus: { classPropertyName: "spxAutoFocus", publicName: "spxAutoFocus", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, spxSelectDay: { classPropertyName: "spxSelectDay", publicName: "spxSelectDay", isSignal: true, isRequired: false, transformFunction: null }, spxSelectMonth: { classPropertyName: "spxSelectMonth", publicName: "spxSelectMonth", isSignal: true, isRequired: false, transformFunction: null }, spxElementId: { classPropertyName: "spxElementId", publicName: "spxElementId", isSignal: true, isRequired: false, transformFunction: null }, spxSuggestions: { classPropertyName: "spxSuggestions", publicName: "spxSuggestions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { listeners: { "keydown": "handleTabKey($event)" } }, viewQueries: [{ propertyName: "yearInputComponent", first: true, predicate: stepType.years, descendants: true, isSignal: true }, { propertyName: "monthInputComponent", first: true, predicate: stepType.months, descendants: true, isSignal: true }, { propertyName: "dayInputComponent", first: true, predicate: stepType.days, descendants: true, isSignal: true }], usesOnChanges: true, ngImport: i0, template: "<div class='spx-input-date__controls'>\n  <input #years\n    class='spx-input-date__input'\n    [ngModel]=\"selectedYear()\"\n    (ngModelChange)=\"onModelChange($event, 'years')\"\n    [attr.type]=\"'number'\"\n    (click)=\"this.handleFocus('years')\"\n    [attr.min]=\"1900\"\n    [attr.max]=\"2100\"\n    [attr.step]=\"1\"\n    />\n  <div class='spx-input-date__control-label'>Year</div>\n  @if (this.spxSelectMonth()) {\n    <input #months\n      class='spx-input-date__input'\n      [ngModel]=\"selectedMonth()\"\n      (ngModelChange)=\"onModelChange($event, 'months')\"\n      (click)=\"this.handleFocus('months')\"\n      [attr.type]=\"'number'\"\n      [attr.min]=\"1\"\n      [attr.max]=\"12\"\n      [attr.step]=\"1\" />\n  }\n  <div class='spx-input-date__control-label'>Month</div>\n  @if (this.spxSelectDay()) {\n    <input #days\n      class='spx-input-date__input'\n      [ngModel]=\"selectedDay()\"\n      (ngModelChange)=\"onModelChange($event, 'days')\"\n      (click)=\"this.handleFocus('days')\"\n      [attr.type]=\"'number'\"\n      [attr.min]=\"1\"\n      [attr.max]=\"31\"\n      [attr.step]=\"1\" />\n    <div class='spx-input-date__control-label'>Days</div>\n  }\n</div>\n<div class='spx-input-date__suggestions'>\n  @for (valuePair of spxSuggestionC(); track valuePair.value) {\n    <spx-suggestion [spxSelected]=\"\n    (selectedYear() === valuePair.value && this.spxSelectedStep() === 'years') ||\n    (selectedMonth() === valuePair.value && this.spxSelectedStep() === 'months') ||  \n    (selectedDay() === valuePair.value && this.spxSelectedStep() === 'days')\"\n    (click)=\"this.handleSuggestionClick(valuePair.value)\">{{valuePair?.description}}</spx-suggestion>\n  }\n</div>", styles: [":host{display:block}.spx-input-date__input{background-color:transparent;border:1px solid #979797;border-radius:4px;color:var(--spx-input--color, rgba(0, 0, 0, .9));box-sizing:border-box;font-size:16px;margin-right:10px;padding:6px;text-align:center;width:100%}.spx-input-date__input:active{transform:scale(.95)}.spx-input-date__input:focus{border:var(--spx-input-box--focus--border, 1px solid rgb(115, 168, 210));border-radius:4px;outline:none}.spx-input-date__control-label{align-items:center;color:#000000b3;display:inline-grid;font-size:13px;letter-spacing:1px}.spx-input-date__input::-webkit-outer-spin-button,.spx-input-date__input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.spx-input-date__input[type=number]{-moz-appearance:textfield}.spx-input-date__suggestions,.spx-input-date__controls{display:grid;grid-gap:8px;grid-template-columns:repeat(4,1fr);margin-top:8px}\n"], dependencies: [{ kind: "component", type: SpxSuggestionComponent, selector: "spx-suggestion", inputs: ["spxDisabled", "spxFocused", "spxSelected", "spxTabbable"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SpxInputDateComponent, decorators: [{
             type: Component,
             args: [{ selector: 'spx-input-date', standalone: true, imports: [
                         SpxSuggestionComponent,
                         FormsModule
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class='spx-input-date__controls'>\r\n  <input #years\r\n    class='spx-input-date__input'\r\n    [ngModel]=\"selectedYear()\"\r\n    (ngModelChange)=\"onModelChange($event, 'years')\"\r\n    [attr.type]=\"'number'\"\r\n    (click)=\"this.handleFocus('years')\"\r\n    [attr.min]=\"1900\"\r\n    [attr.max]=\"2100\"\r\n    [attr.step]=\"1\"\r\n    />\r\n  <div class='spx-input-date__control-label'>Year</div>\r\n  @if (this.spxSelectMonth()) {\r\n    <input #months\r\n      class='spx-input-date__input'\r\n      [ngModel]=\"selectedMonth()\"\r\n      (ngModelChange)=\"onModelChange($event, 'months')\"\r\n      (click)=\"this.handleFocus('months')\"\r\n      [attr.type]=\"'number'\"\r\n      [attr.min]=\"1\"\r\n      [attr.max]=\"12\"\r\n      [attr.step]=\"1\" />\r\n  }\r\n  <div class='spx-input-date__control-label'>Month</div>\r\n  @if (this.spxSelectDay()) {\r\n    <input #days\r\n      class='spx-input-date__input'\r\n      [ngModel]=\"selectedDay()\"\r\n      (ngModelChange)=\"onModelChange($event, 'days')\"\r\n      (click)=\"this.handleFocus('days')\"\r\n      [attr.type]=\"'number'\"\r\n      [attr.min]=\"1\"\r\n      [attr.max]=\"31\"\r\n      [attr.step]=\"1\" />\r\n    <div class='spx-input-date__control-label'>Days</div>\r\n  }\r\n</div>\r\n<div class='spx-input-date__suggestions'>\r\n  @for (valuePair of spxSuggestionC(); track valuePair.value) {\r\n    <spx-suggestion [spxSelected]=\"\r\n    (selectedYear() === valuePair.value && this.spxSelectedStep() === 'years') ||\r\n    (selectedMonth() === valuePair.value && this.spxSelectedStep() === 'months') ||  \r\n    (selectedDay() === valuePair.value && this.spxSelectedStep() === 'days')\"\r\n    (click)=\"this.handleSuggestionClick(valuePair.value)\">{{valuePair?.description}}</spx-suggestion>\r\n  }\r\n</div>", styles: [":host{display:block}.spx-input-date__input{background-color:transparent;border:1px solid #979797;border-radius:4px;color:var(--spx-input--color, rgba(0, 0, 0, .9));box-sizing:border-box;font-size:16px;margin-right:10px;padding:6px;text-align:center;width:100%}.spx-input-date__input:active{transform:scale(.95)}.spx-input-date__input:focus{border:var(--spx-input-box--focus--border, 1px solid rgb(115, 168, 210));border-radius:4px;outline:none}.spx-input-date__control-label{align-items:center;color:#000000b3;display:inline-grid;font-size:13px;letter-spacing:1px}.spx-input-date__input::-webkit-outer-spin-button,.spx-input-date__input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.spx-input-date__input[type=number]{-moz-appearance:textfield}.spx-input-date__suggestions,.spx-input-date__controls{display:grid;grid-gap:8px;grid-template-columns:repeat(4,1fr);margin-top:8px}\n"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class='spx-input-date__controls'>\n  <input #years\n    class='spx-input-date__input'\n    [ngModel]=\"selectedYear()\"\n    (ngModelChange)=\"onModelChange($event, 'years')\"\n    [attr.type]=\"'number'\"\n    (click)=\"this.handleFocus('years')\"\n    [attr.min]=\"1900\"\n    [attr.max]=\"2100\"\n    [attr.step]=\"1\"\n    />\n  <div class='spx-input-date__control-label'>Year</div>\n  @if (this.spxSelectMonth()) {\n    <input #months\n      class='spx-input-date__input'\n      [ngModel]=\"selectedMonth()\"\n      (ngModelChange)=\"onModelChange($event, 'months')\"\n      (click)=\"this.handleFocus('months')\"\n      [attr.type]=\"'number'\"\n      [attr.min]=\"1\"\n      [attr.max]=\"12\"\n      [attr.step]=\"1\" />\n  }\n  <div class='spx-input-date__control-label'>Month</div>\n  @if (this.spxSelectDay()) {\n    <input #days\n      class='spx-input-date__input'\n      [ngModel]=\"selectedDay()\"\n      (ngModelChange)=\"onModelChange($event, 'days')\"\n      (click)=\"this.handleFocus('days')\"\n      [attr.type]=\"'number'\"\n      [attr.min]=\"1\"\n      [attr.max]=\"31\"\n      [attr.step]=\"1\" />\n    <div class='spx-input-date__control-label'>Days</div>\n  }\n</div>\n<div class='spx-input-date__suggestions'>\n  @for (valuePair of spxSuggestionC(); track valuePair.value) {\n    <spx-suggestion [spxSelected]=\"\n    (selectedYear() === valuePair.value && this.spxSelectedStep() === 'years') ||\n    (selectedMonth() === valuePair.value && this.spxSelectedStep() === 'months') ||  \n    (selectedDay() === valuePair.value && this.spxSelectedStep() === 'days')\"\n    (click)=\"this.handleSuggestionClick(valuePair.value)\">{{valuePair?.description}}</spx-suggestion>\n  }\n</div>", styles: [":host{display:block}.spx-input-date__input{background-color:transparent;border:1px solid #979797;border-radius:4px;color:var(--spx-input--color, rgba(0, 0, 0, .9));box-sizing:border-box;font-size:16px;margin-right:10px;padding:6px;text-align:center;width:100%}.spx-input-date__input:active{transform:scale(.95)}.spx-input-date__input:focus{border:var(--spx-input-box--focus--border, 1px solid rgb(115, 168, 210));border-radius:4px;outline:none}.spx-input-date__control-label{align-items:center;color:#000000b3;display:inline-grid;font-size:13px;letter-spacing:1px}.spx-input-date__input::-webkit-outer-spin-button,.spx-input-date__input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.spx-input-date__input[type=number]{-moz-appearance:textfield}.spx-input-date__suggestions,.spx-input-date__controls{display:grid;grid-gap:8px;grid-template-columns:repeat(4,1fr);margin-top:8px}\n"] }]
         }], propDecorators: { handleTabKey: [{
                 type: HostListener,
                 args: ['keydown', ['$event']]
@@ -903,6 +909,9 @@ class SpxInputComponent {
     handleChange(event) {
         this.value.set(event);
     }
+    triggerChangeDetection() {
+        this.textInput()?.triggerChangeDetection();
+    }
     handleClear() {
         this.spxClear.emit();
         this.passFocusToControl();
@@ -973,7 +982,7 @@ class SpxInputComponent {
                 useExisting: SpxInputComponent,
                 multi: true
             }
-        ], viewQueries: [{ propertyName: "floatInput", first: true, predicate: ["spxInputFloat"], descendants: true, isSignal: true }, { propertyName: "numberInput", first: true, predicate: ["spxInputNumber"], descendants: true, isSignal: true }, { propertyName: "textInput", first: true, predicate: ["spxInputText"], descendants: true, isSignal: true }, { propertyName: "timeInput", first: true, predicate: ["spxInputTime"], descendants: true, isSignal: true }, { propertyName: "radioInput", first: true, predicate: ["spxInputRadio"], descendants: true, isSignal: true }, { propertyName: "dateInput", first: true, predicate: ["spxInputDate"], descendants: true, isSignal: true }], ngImport: i0, template: "<spx-input-box\r\n    [spxAlert]=\"this.spxAlert()\"\r\n    [spxLabel]=\"this.spxLabel()\"\r\n    [spxReadonly]=\"this.spxReadonly()\"\r\n    [spxRequired]=\"this.spxRequired()\"\r\n    [spxValue]=\"this.value()\"\r\n    [spxShowHelp]=\"this.spxShowHelp()\"\r\n    [spxCompact]=\"this.spxCompact()\"\r\n    [spxShowClear]=\"this.spxShowClear()\"\r\n    [spxShowEdit]=\"this.spxShowEdit()\"\r\n    [spxShowLabel]=\"this.spxShowLabel()\"\r\n    [spxShowSearch]=\"this.spxShowSearch() ? this.spxShowSearch() : this.spxType() === 'autocomplete'\"\r\n    [spxShowValidationMessages]=\"this.spxShowValidationMessages()\"\r\n    (spxClear)=\"this.handleClear()\"\r\n    (spxEdit)=\"this.handleEdit()\"\r\n    (spxHelp)=\"this.handleHelp()\"\r\n    (spxSearch)=\"this.handleSearch()\"\r\n    (spxSetIdInParent)=\"handleSpxElementIdSet($event)\"\r\n    >\r\n    <div controls>\r\n      @if (this.spxType() === 'autocomplete' || this.spxType() === 'overlay' || this.spxType() === 'overlaynumber' || this.spxType() === 'text' || this.spxType() === 'password') {\r\n        <spx-input-text #spxInputText\r\n          [spxAutocomplete]=\"this.spxAutocomplete() ? this.spxAutocomplete() : undefined\"\r\n          [spxAutofocus]=\"this.spxAutofocus()\"\r\n          [spxCapitalize]=\"this.spxCapitalize()\"\r\n          [spxInputMode]=\"this.spxType() === 'overlaynumber' ? 'numeric' : this.spxInputMode()\"\r\n          [spxName]=\"this.spxName()\"\r\n          [spxPattern]=\"this.spxType() === 'overlaynumber' ? '[0-9]*' : this.spxPattern()\"\r\n          [spxReadonly]=\"this.spxReadonly()\"\r\n          [spxSuggestions]=\"this.spxSuggestions()\"\r\n          [spxType]=\"this.spxType()\"\r\n          [spxValidators]=\"this.spxValidators()\"\r\n          [spxElementId]=\"this.spxElementId()\"\r\n          [value]=\"value()\"\r\n          (valueChange)=\"handleChangeEvent($event)\"\r\n        ></spx-input-text>\r\n      }\r\n      @if (this.spxType() === 'date') {\r\n        <spx-input-date #spxInputDate\r\n          [spxMax]=\"this.spxMax()!\"\r\n          [spxMin]=\"this.spxMin()!\"\r\n          [spxReadonly]=\"this.spxReadonly()\"\r\n          [spxSelectDay]=\"this.spxSelectDay()\"\r\n          [spxSelectMonth]=\"this.spxSelectMonth()\"\r\n          [spxValidators]=\"this.spxValidators()\"\r\n          [value]=\"value()\"\r\n          [spxElementId]=\"this.spxElementId()\"\r\n          [spxAutoFocus]=\"this.spxAutofocus()\"\r\n          (valueChange)=\"handleChangeEvent($event)\"\r\n        ></spx-input-date>\r\n      }\r\n      @if (this.spxType() === 'float') {\r\n        <spx-input-float #spxInputFloat\r\n          [spxName]=\"this.spxName()\"\r\n          [spxReadonly]=\"this.spxReadonly()\"\r\n          [spxStep]=\"this.spxStep()\"\r\n          [spxValidators]=\"this.spxValidators()\"\r\n          [spxAutofocus]=\"this.spxAutofocus()\"\r\n          [spxElementId]=\"this.spxElementId()\"\r\n          [value]=\"value()\"\r\n          (valueChange)=\"handleChangeEvent($event)\"\r\n        ></spx-input-float>\r\n      }\r\n      @if (this.spxType() === 'number') {\r\n        <spx-input-number #spxInputNumber\r\n          [spxInputMode]=\"this.spxInputMode()\"\r\n          [spxAutofocus]=\"this.spxAutofocus()\"\r\n          [spxElementId]=\"this.spxElementId()\"\r\n          [spxName]=\"this.spxName()\"\r\n          [spxReadonly]=\"this.spxReadonly()\"\r\n          [spxStep]=\"this.spxStep()\"\r\n          [spxValidators]=\"this.spxValidators()\"\r\n          [value]=\"value()\"\r\n          (valueChange)=\"handleChangeEvent($event)\"\r\n        ></spx-input-number>\r\n      }\r\n      @if (this.spxType() === 'radio') {\r\n        <spx-input-radio\r\n          #spxInputRadio\r\n          [spxName]=\"this.spxName()\"\r\n          [spxReadonly]=\"this.spxReadonly()\"\r\n          [spxShowLabel]=\"this.spxShowLabel()\"\r\n          [spxSuggestions]=\"this.spxSuggestions()\"\r\n          [spxValidators]=\"this.spxValidators()\"\r\n          [spxElementId]=\"this.spxElementId()\"\r\n          [value]=\"value()\"\r\n          (valueChange)=\"handleChangeEvent($event)\"\r\n        ></spx-input-radio>\r\n      }\r\n      @if (this.spxType() === 'time') {\r\n        <spx-input-time\r\n          #spxInputTime\r\n          [spxName]=\"this.spxName()\"\r\n          [spxReadonly]=\"this.spxReadonly()\"\r\n          [spxValidators]=\"this.spxValidators()\"\r\n          [value]=\"value()\"\r\n          (valueChange)=\"handleChangeEvent($event)\"\r\n        ></spx-input-time>\r\n      }\r\n    </div>\r\n    <div validation-messages>\r\n      <ng-content></ng-content>\r\n    </div>\r\n  </spx-input-box>", dependencies: [{ kind: "component", type: SpxInputBoxComponent, selector: "spx-input-box", inputs: ["spxCompact", "spxLabel", "spxReadonly", "spxRequired", "spxShowClear", "spxShowEdit", "spxShowHelp", "spxShowLabel", "spxShowSearch", "spxShowValidationMessages", "spxAlert", "spxValue"], outputs: ["spxValueChange", "spxClear", "spxSearch", "spxEdit", "spxHelp", "spxSetIdInParent"] }, { kind: "component", type: SpxInputDateComponent, selector: "spx-input-date", inputs: ["spxMax", "spxMin", "spxReadonly", "spxValidators", "spxAutoFocus", "value", "spxSelectDay", "spxSelectMonth", "spxElementId", "spxSuggestions"], outputs: ["valueChange"] }, { kind: "component", type: SpxInputFloatComponent, selector: "spx-input-float", inputs: ["spxName", "spxAutofocus", "spxElementId", "spxReadonly", "spxValidators", "spxStep", "value", "spxWasInternalUpdate"], outputs: ["valueChange"] }, { kind: "component", type: SpxInputNumberComponent, selector: "spx-input-number", inputs: ["spxName", "spxAutofocus", "spxInputMode", "spxReadonly", "spxValidators", "spxFocused", "spxStep", "value", "spxElementId"], outputs: ["valueChange"] }, { kind: "component", type: SpxInputRadioComponent, selector: "spx-input-radio", inputs: ["spxName", "spxValidators", "spxShowLabel", "spxReadonly", "spxSuggestions", "value", "spxElementId"], outputs: ["valueChange"] }, { kind: "component", type: SpxInputTextComponent, selector: "spx-input-text", inputs: ["spxName", "spxAutofocus", "spxAutocomplete", "spxInputMode", "spxPattern", "spxSuggestions", "spxReadonly", "spxValidators", "spxCapitalize", "spxType", "spxWasInternalUpdate", "value", "spxElementId"], outputs: ["valueChange"] }, { kind: "component", type: SpxInputTimeComponent, selector: "spx-input-time", inputs: ["spxName", "spxAutofocus", "spxInputMode", "spxPattern", "spxSuggestions", "spxReadonly", "spxValidators", "spxCapitalize", "value"], outputs: ["valueChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], viewQueries: [{ propertyName: "floatInput", first: true, predicate: ["spxInputFloat"], descendants: true, isSignal: true }, { propertyName: "numberInput", first: true, predicate: ["spxInputNumber"], descendants: true, isSignal: true }, { propertyName: "textInput", first: true, predicate: ["spxInputText"], descendants: true, isSignal: true }, { propertyName: "timeInput", first: true, predicate: ["spxInputTime"], descendants: true, isSignal: true }, { propertyName: "radioInput", first: true, predicate: ["spxInputRadio"], descendants: true, isSignal: true }, { propertyName: "dateInput", first: true, predicate: ["spxInputDate"], descendants: true, isSignal: true }], ngImport: i0, template: "<spx-input-box\n  (spxClear)=\"this.handleClear()\"\n  (spxEdit)=\"this.handleEdit()\"\n  (spxHelp)=\"this.handleHelp()\"\n  (spxSearch)=\"this.handleSearch()\"\n  (spxSetIdInParent)=\"handleSpxElementIdSet($event)\"\n  [spxAlert]=\"this.spxAlert()\"\n  [spxCompact]=\"this.spxCompact()\"\n  [spxLabel]=\"this.spxLabel()\"\n  [spxReadonly]=\"this.spxReadonly()\"\n  [spxRequired]=\"this.spxRequired()\"\n  [spxShowClear]=\"this.spxShowClear()\"\n  [spxShowEdit]=\"this.spxShowEdit()\"\n  [spxShowHelp]=\"this.spxShowHelp()\"\n  [spxShowLabel]=\"this.spxShowLabel()\"\n  [spxShowSearch]=\"this.spxShowSearch() ? this.spxShowSearch() : this.spxType() === 'autocomplete'\"\n  [spxShowValidationMessages]=\"this.spxShowValidationMessages()\"\n  [spxValue]=\"this.value()\"\n>\n  <div controls>\n    @if (this.spxType() === 'autocomplete' || this.spxType() === 'overlay' ||\n    this.spxType() === 'overlaynumber' || this.spxType() === 'text' ||\n    this.spxType() === 'password') {\n    <spx-input-text\n      (valueChange)=\"handleChangeEvent($event)\"\n      [spxAutocomplete]=\"this.spxAutocomplete() ? this.spxAutocomplete() : undefined\"\n      [spxAutofocus]=\"this.spxAutofocus()\"\n      [spxCapitalize]=\"this.spxCapitalize()\"\n      [spxElementId]=\"this.spxElementId()\"\n      [spxInputMode]=\"this.spxType() === 'overlaynumber' ? 'numeric' : this.spxInputMode()\"\n      [spxName]=\"this.spxName()\"\n      [spxPattern]=\"this.spxType() === 'overlaynumber' ? '[0-9]*' : this.spxPattern()\"\n      [spxReadonly]=\"this.spxReadonly()\"\n      [spxSuggestions]=\"this.spxSuggestions()\"\n      [spxType]=\"this.spxType()\"\n      [spxValidators]=\"this.spxValidators()\"\n      [value]=\"value()\"\n      #spxInputText\n    ></spx-input-text>\n    } @if (this.spxType() === 'date') {\n    <spx-input-date\n      (valueChange)=\"handleChangeEvent($event)\"\n      [spxAutoFocus]=\"this.spxAutofocus()\"\n      [spxElementId]=\"this.spxElementId()\"\n      [spxMax]=\"this.spxMax()!\"\n      [spxMin]=\"this.spxMin()!\"\n      [spxReadonly]=\"this.spxReadonly()\"\n      [spxSelectDay]=\"this.spxSelectDay()\"\n      [spxSelectMonth]=\"this.spxSelectMonth()\"\n      [spxValidators]=\"this.spxValidators()\"\n      [value]=\"value()\"\n      #spxInputDate\n    ></spx-input-date>\n    } @if (this.spxType() === 'float') {\n    <spx-input-float\n      (valueChange)=\"handleChangeEvent($event)\"\n      [spxAutofocus]=\"this.spxAutofocus()\"\n      [spxElementId]=\"this.spxElementId()\"\n      [spxName]=\"this.spxName()\"\n      [spxReadonly]=\"this.spxReadonly()\"\n      [spxStep]=\"this.spxStep()\"\n      [spxValidators]=\"this.spxValidators()\"\n      [value]=\"value()\"\n      #spxInputFloat\n    ></spx-input-float>\n    } @if (this.spxType() === 'number') {\n    <spx-input-number\n      (valueChange)=\"handleChangeEvent($event)\"\n      [spxAutofocus]=\"this.spxAutofocus()\"\n      [spxElementId]=\"this.spxElementId()\"\n      [spxInputMode]=\"this.spxInputMode()\"\n      [spxName]=\"this.spxName()\"\n      [spxReadonly]=\"this.spxReadonly()\"\n      [spxStep]=\"this.spxStep()\"\n      [spxValidators]=\"this.spxValidators()\"\n      [value]=\"value()\"\n      #spxInputNumber\n    ></spx-input-number>\n    } @if (this.spxType() === 'radio') {\n    <spx-input-radio\n      (valueChange)=\"handleChangeEvent($event)\"\n      [spxElementId]=\"this.spxElementId()\"\n      [spxName]=\"this.spxName()\"\n      [spxReadonly]=\"this.spxReadonly()\"\n      [spxShowLabel]=\"this.spxShowLabel()\"\n      [spxSuggestions]=\"this.spxSuggestions()\"\n      [spxValidators]=\"this.spxValidators()\"\n      [value]=\"value()\"\n      #spxInputRadio\n    ></spx-input-radio>\n    } @if (this.spxType() === 'time') {\n    <spx-input-time\n      (valueChange)=\"handleChangeEvent($event)\"\n      [spxName]=\"this.spxName()\"\n      [spxReadonly]=\"this.spxReadonly()\"\n      [spxValidators]=\"this.spxValidators()\"\n      [value]=\"value()\"\n      #spxInputTime\n    ></spx-input-time>\n    }\n  </div>\n  <div validation-messages>\n    <ng-content></ng-content>\n  </div>\n</spx-input-box>\n", dependencies: [{ kind: "component", type: SpxInputBoxComponent, selector: "spx-input-box", inputs: ["spxCompact", "spxLabel", "spxReadonly", "spxRequired", "spxShowClear", "spxShowEdit", "spxShowHelp", "spxShowLabel", "spxShowSearch", "spxShowValidationMessages", "spxAlert", "spxValue"], outputs: ["spxValueChange", "spxClear", "spxSearch", "spxEdit", "spxHelp", "spxSetIdInParent"] }, { kind: "component", type: SpxInputDateComponent, selector: "spx-input-date", inputs: ["spxMax", "spxMin", "spxReadonly", "spxValidators", "spxAutoFocus", "value", "spxSelectDay", "spxSelectMonth", "spxElementId", "spxSuggestions"], outputs: ["valueChange"] }, { kind: "component", type: SpxInputFloatComponent, selector: "spx-input-float", inputs: ["spxName", "spxAutofocus", "spxElementId", "spxReadonly", "spxValidators", "spxStep", "value", "spxWasInternalUpdate"], outputs: ["valueChange"] }, { kind: "component", type: SpxInputNumberComponent, selector: "spx-input-number", inputs: ["spxName", "spxAutofocus", "spxInputMode", "spxReadonly", "spxValidators", "spxFocused", "spxStep", "value", "spxElementId"], outputs: ["valueChange"] }, { kind: "component", type: SpxInputRadioComponent, selector: "spx-input-radio", inputs: ["spxName", "spxValidators", "spxShowLabel", "spxReadonly", "spxSuggestions", "value", "spxElementId"], outputs: ["valueChange"] }, { kind: "component", type: SpxInputTextComponent, selector: "spx-input-text", inputs: ["spxName", "spxAutofocus", "spxAutocomplete", "spxInputMode", "spxPattern", "spxSuggestions", "spxReadonly", "spxValidators", "spxCapitalize", "spxType", "spxWasInternalUpdate", "value", "spxElementId"], outputs: ["valueChange"] }, { kind: "component", type: SpxInputTimeComponent, selector: "spx-input-time", inputs: ["spxName", "spxAutofocus", "spxInputMode", "spxPattern", "spxSuggestions", "spxReadonly", "spxValidators", "spxCapitalize", "value"], outputs: ["valueChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SpxInputComponent, decorators: [{
             type: Component,
@@ -993,7 +1002,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
                             useExisting: SpxInputComponent,
                             multi: true
                         }
-                    ], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<spx-input-box\r\n    [spxAlert]=\"this.spxAlert()\"\r\n    [spxLabel]=\"this.spxLabel()\"\r\n    [spxReadonly]=\"this.spxReadonly()\"\r\n    [spxRequired]=\"this.spxRequired()\"\r\n    [spxValue]=\"this.value()\"\r\n    [spxShowHelp]=\"this.spxShowHelp()\"\r\n    [spxCompact]=\"this.spxCompact()\"\r\n    [spxShowClear]=\"this.spxShowClear()\"\r\n    [spxShowEdit]=\"this.spxShowEdit()\"\r\n    [spxShowLabel]=\"this.spxShowLabel()\"\r\n    [spxShowSearch]=\"this.spxShowSearch() ? this.spxShowSearch() : this.spxType() === 'autocomplete'\"\r\n    [spxShowValidationMessages]=\"this.spxShowValidationMessages()\"\r\n    (spxClear)=\"this.handleClear()\"\r\n    (spxEdit)=\"this.handleEdit()\"\r\n    (spxHelp)=\"this.handleHelp()\"\r\n    (spxSearch)=\"this.handleSearch()\"\r\n    (spxSetIdInParent)=\"handleSpxElementIdSet($event)\"\r\n    >\r\n    <div controls>\r\n      @if (this.spxType() === 'autocomplete' || this.spxType() === 'overlay' || this.spxType() === 'overlaynumber' || this.spxType() === 'text' || this.spxType() === 'password') {\r\n        <spx-input-text #spxInputText\r\n          [spxAutocomplete]=\"this.spxAutocomplete() ? this.spxAutocomplete() : undefined\"\r\n          [spxAutofocus]=\"this.spxAutofocus()\"\r\n          [spxCapitalize]=\"this.spxCapitalize()\"\r\n          [spxInputMode]=\"this.spxType() === 'overlaynumber' ? 'numeric' : this.spxInputMode()\"\r\n          [spxName]=\"this.spxName()\"\r\n          [spxPattern]=\"this.spxType() === 'overlaynumber' ? '[0-9]*' : this.spxPattern()\"\r\n          [spxReadonly]=\"this.spxReadonly()\"\r\n          [spxSuggestions]=\"this.spxSuggestions()\"\r\n          [spxType]=\"this.spxType()\"\r\n          [spxValidators]=\"this.spxValidators()\"\r\n          [spxElementId]=\"this.spxElementId()\"\r\n          [value]=\"value()\"\r\n          (valueChange)=\"handleChangeEvent($event)\"\r\n        ></spx-input-text>\r\n      }\r\n      @if (this.spxType() === 'date') {\r\n        <spx-input-date #spxInputDate\r\n          [spxMax]=\"this.spxMax()!\"\r\n          [spxMin]=\"this.spxMin()!\"\r\n          [spxReadonly]=\"this.spxReadonly()\"\r\n          [spxSelectDay]=\"this.spxSelectDay()\"\r\n          [spxSelectMonth]=\"this.spxSelectMonth()\"\r\n          [spxValidators]=\"this.spxValidators()\"\r\n          [value]=\"value()\"\r\n          [spxElementId]=\"this.spxElementId()\"\r\n          [spxAutoFocus]=\"this.spxAutofocus()\"\r\n          (valueChange)=\"handleChangeEvent($event)\"\r\n        ></spx-input-date>\r\n      }\r\n      @if (this.spxType() === 'float') {\r\n        <spx-input-float #spxInputFloat\r\n          [spxName]=\"this.spxName()\"\r\n          [spxReadonly]=\"this.spxReadonly()\"\r\n          [spxStep]=\"this.spxStep()\"\r\n          [spxValidators]=\"this.spxValidators()\"\r\n          [spxAutofocus]=\"this.spxAutofocus()\"\r\n          [spxElementId]=\"this.spxElementId()\"\r\n          [value]=\"value()\"\r\n          (valueChange)=\"handleChangeEvent($event)\"\r\n        ></spx-input-float>\r\n      }\r\n      @if (this.spxType() === 'number') {\r\n        <spx-input-number #spxInputNumber\r\n          [spxInputMode]=\"this.spxInputMode()\"\r\n          [spxAutofocus]=\"this.spxAutofocus()\"\r\n          [spxElementId]=\"this.spxElementId()\"\r\n          [spxName]=\"this.spxName()\"\r\n          [spxReadonly]=\"this.spxReadonly()\"\r\n          [spxStep]=\"this.spxStep()\"\r\n          [spxValidators]=\"this.spxValidators()\"\r\n          [value]=\"value()\"\r\n          (valueChange)=\"handleChangeEvent($event)\"\r\n        ></spx-input-number>\r\n      }\r\n      @if (this.spxType() === 'radio') {\r\n        <spx-input-radio\r\n          #spxInputRadio\r\n          [spxName]=\"this.spxName()\"\r\n          [spxReadonly]=\"this.spxReadonly()\"\r\n          [spxShowLabel]=\"this.spxShowLabel()\"\r\n          [spxSuggestions]=\"this.spxSuggestions()\"\r\n          [spxValidators]=\"this.spxValidators()\"\r\n          [spxElementId]=\"this.spxElementId()\"\r\n          [value]=\"value()\"\r\n          (valueChange)=\"handleChangeEvent($event)\"\r\n        ></spx-input-radio>\r\n      }\r\n      @if (this.spxType() === 'time') {\r\n        <spx-input-time\r\n          #spxInputTime\r\n          [spxName]=\"this.spxName()\"\r\n          [spxReadonly]=\"this.spxReadonly()\"\r\n          [spxValidators]=\"this.spxValidators()\"\r\n          [value]=\"value()\"\r\n          (valueChange)=\"handleChangeEvent($event)\"\r\n        ></spx-input-time>\r\n      }\r\n    </div>\r\n    <div validation-messages>\r\n      <ng-content></ng-content>\r\n    </div>\r\n  </spx-input-box>" }]
+                    ], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<spx-input-box\n  (spxClear)=\"this.handleClear()\"\n  (spxEdit)=\"this.handleEdit()\"\n  (spxHelp)=\"this.handleHelp()\"\n  (spxSearch)=\"this.handleSearch()\"\n  (spxSetIdInParent)=\"handleSpxElementIdSet($event)\"\n  [spxAlert]=\"this.spxAlert()\"\n  [spxCompact]=\"this.spxCompact()\"\n  [spxLabel]=\"this.spxLabel()\"\n  [spxReadonly]=\"this.spxReadonly()\"\n  [spxRequired]=\"this.spxRequired()\"\n  [spxShowClear]=\"this.spxShowClear()\"\n  [spxShowEdit]=\"this.spxShowEdit()\"\n  [spxShowHelp]=\"this.spxShowHelp()\"\n  [spxShowLabel]=\"this.spxShowLabel()\"\n  [spxShowSearch]=\"this.spxShowSearch() ? this.spxShowSearch() : this.spxType() === 'autocomplete'\"\n  [spxShowValidationMessages]=\"this.spxShowValidationMessages()\"\n  [spxValue]=\"this.value()\"\n>\n  <div controls>\n    @if (this.spxType() === 'autocomplete' || this.spxType() === 'overlay' ||\n    this.spxType() === 'overlaynumber' || this.spxType() === 'text' ||\n    this.spxType() === 'password') {\n    <spx-input-text\n      (valueChange)=\"handleChangeEvent($event)\"\n      [spxAutocomplete]=\"this.spxAutocomplete() ? this.spxAutocomplete() : undefined\"\n      [spxAutofocus]=\"this.spxAutofocus()\"\n      [spxCapitalize]=\"this.spxCapitalize()\"\n      [spxElementId]=\"this.spxElementId()\"\n      [spxInputMode]=\"this.spxType() === 'overlaynumber' ? 'numeric' : this.spxInputMode()\"\n      [spxName]=\"this.spxName()\"\n      [spxPattern]=\"this.spxType() === 'overlaynumber' ? '[0-9]*' : this.spxPattern()\"\n      [spxReadonly]=\"this.spxReadonly()\"\n      [spxSuggestions]=\"this.spxSuggestions()\"\n      [spxType]=\"this.spxType()\"\n      [spxValidators]=\"this.spxValidators()\"\n      [value]=\"value()\"\n      #spxInputText\n    ></spx-input-text>\n    } @if (this.spxType() === 'date') {\n    <spx-input-date\n      (valueChange)=\"handleChangeEvent($event)\"\n      [spxAutoFocus]=\"this.spxAutofocus()\"\n      [spxElementId]=\"this.spxElementId()\"\n      [spxMax]=\"this.spxMax()!\"\n      [spxMin]=\"this.spxMin()!\"\n      [spxReadonly]=\"this.spxReadonly()\"\n      [spxSelectDay]=\"this.spxSelectDay()\"\n      [spxSelectMonth]=\"this.spxSelectMonth()\"\n      [spxValidators]=\"this.spxValidators()\"\n      [value]=\"value()\"\n      #spxInputDate\n    ></spx-input-date>\n    } @if (this.spxType() === 'float') {\n    <spx-input-float\n      (valueChange)=\"handleChangeEvent($event)\"\n      [spxAutofocus]=\"this.spxAutofocus()\"\n      [spxElementId]=\"this.spxElementId()\"\n      [spxName]=\"this.spxName()\"\n      [spxReadonly]=\"this.spxReadonly()\"\n      [spxStep]=\"this.spxStep()\"\n      [spxValidators]=\"this.spxValidators()\"\n      [value]=\"value()\"\n      #spxInputFloat\n    ></spx-input-float>\n    } @if (this.spxType() === 'number') {\n    <spx-input-number\n      (valueChange)=\"handleChangeEvent($event)\"\n      [spxAutofocus]=\"this.spxAutofocus()\"\n      [spxElementId]=\"this.spxElementId()\"\n      [spxInputMode]=\"this.spxInputMode()\"\n      [spxName]=\"this.spxName()\"\n      [spxReadonly]=\"this.spxReadonly()\"\n      [spxStep]=\"this.spxStep()\"\n      [spxValidators]=\"this.spxValidators()\"\n      [value]=\"value()\"\n      #spxInputNumber\n    ></spx-input-number>\n    } @if (this.spxType() === 'radio') {\n    <spx-input-radio\n      (valueChange)=\"handleChangeEvent($event)\"\n      [spxElementId]=\"this.spxElementId()\"\n      [spxName]=\"this.spxName()\"\n      [spxReadonly]=\"this.spxReadonly()\"\n      [spxShowLabel]=\"this.spxShowLabel()\"\n      [spxSuggestions]=\"this.spxSuggestions()\"\n      [spxValidators]=\"this.spxValidators()\"\n      [value]=\"value()\"\n      #spxInputRadio\n    ></spx-input-radio>\n    } @if (this.spxType() === 'time') {\n    <spx-input-time\n      (valueChange)=\"handleChangeEvent($event)\"\n      [spxName]=\"this.spxName()\"\n      [spxReadonly]=\"this.spxReadonly()\"\n      [spxValidators]=\"this.spxValidators()\"\n      [value]=\"value()\"\n      #spxInputTime\n    ></spx-input-time>\n    }\n  </div>\n  <div validation-messages>\n    <ng-content></ng-content>\n  </div>\n</spx-input-box>\n" }]
         }], propDecorators: { _handleBlurEvent: [{
                 type: HostListener,
                 args: ['focusout']