@softpak/components 21.0.2 → 21.0.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (33) hide show
  1. package/fesm2022/softpak-components-spx-404-page.mjs +3 -3
  2. package/fesm2022/softpak-components-spx-alert.mjs +3 -3
  3. package/fesm2022/softpak-components-spx-app-expiry.mjs +3 -3
  4. package/fesm2022/softpak-components-spx-button.mjs +3 -3
  5. package/fesm2022/softpak-components-spx-capitalize.mjs +3 -3
  6. package/fesm2022/softpak-components-spx-card.mjs +12 -12
  7. package/fesm2022/softpak-components-spx-change-details.mjs +3 -3
  8. package/fesm2022/softpak-components-spx-channel-selection.mjs +15 -15
  9. package/fesm2022/softpak-components-spx-channel-selection.mjs.map +1 -1
  10. package/fesm2022/softpak-components-spx-check-digit.mjs +3 -3
  11. package/fesm2022/softpak-components-spx-confirm.mjs +9 -9
  12. package/fesm2022/softpak-components-spx-form-section.mjs +3 -3
  13. package/fesm2022/softpak-components-spx-form-view.mjs +6 -6
  14. package/fesm2022/softpak-components-spx-inputs.mjs +36 -36
  15. package/fesm2022/softpak-components-spx-navigation.mjs +9 -9
  16. package/fesm2022/softpak-components-spx-number-check.mjs +3 -3
  17. package/fesm2022/softpak-components-spx-pagination.mjs +3 -3
  18. package/fesm2022/softpak-components-spx-patch.mjs +3 -3
  19. package/fesm2022/softpak-components-spx-pipes.mjs +3 -3
  20. package/fesm2022/softpak-components-spx-progress-bar.mjs +3 -3
  21. package/fesm2022/softpak-components-spx-spinner.mjs +3 -3
  22. package/fesm2022/softpak-components-spx-stock-info.mjs +3 -3
  23. package/fesm2022/softpak-components-spx-suggestion.mjs +3 -3
  24. package/fesm2022/softpak-components-spx-tabs.mjs +3 -3
  25. package/fesm2022/softpak-components-spx-toaster.mjs +3 -3
  26. package/fesm2022/softpak-components-spx-toggle.mjs +3 -3
  27. package/fesm2022/softpak-components-spx-update.mjs +12 -12
  28. package/fesm2022/softpak-components-spx-validation-messages.mjs +3 -3
  29. package/fesm2022/softpak-components-spx-validation.mjs +3 -3
  30. package/fesm2022/softpak-components-spx-welcome.mjs +3 -3
  31. package/package.json +1 -1
  32. package/tailwind.css +1 -1
  33. package/types/softpak-components-spx-update.d.ts +6 -6
@@ -8,10 +8,10 @@ class SpxFormSectionComponent {
8
8
  this.spxTitle = input(...(ngDevMode ? [undefined, { debugName: "spxTitle" }] : []));
9
9
  this.spxShowTitle = input(true, ...(ngDevMode ? [{ debugName: "spxShowTitle" }] : []));
10
10
  }
11
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: SpxFormSectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
12
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: SpxFormSectionComponent, isStandalone: true, selector: "spx-form-section", inputs: { spxIndex: { classPropertyName: "spxIndex", publicName: "spxIndex", isSignal: true, isRequired: false, transformFunction: null }, spxIndexSecondary: { classPropertyName: "spxIndexSecondary", publicName: "spxIndexSecondary", isSignal: true, isRequired: false, transformFunction: null }, spxTitle: { classPropertyName: "spxTitle", publicName: "spxTitle", isSignal: true, isRequired: false, transformFunction: null }, spxShowTitle: { classPropertyName: "spxShowTitle", publicName: "spxShowTitle", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (this.spxShowTitle()) {\n <div class=\"spx-form-section__title mb-3 flex gap-3 items-center\">\n <div class=\"spx-form-section__title-index flex content-center text-center text-sm h-[30px] w-[30px] font-bold rounded\">{{this.spxIndex()}}@if (this.spxIndexSecondary()) {\n {{ this.spxIndexSecondary() }}\n }</div>\n <div class=\"spx-form-section__content font-bold grow text-black dark:text-white\">{{this.spxTitle()}}</div>\n </div>\n}\n<div class=\"flex flex-col gap-3\">\n <ng-content></ng-content>\n</div>", styles: [":host{display:block}.spx-form-section__title-index{background-color:#000;display:inline-block;vertical-align:middle}.spx-form-section__title{color:var(--spx-form-section--color, #FFFFFF)}.spx-form-section__content{color:#000}@media(prefers-color-scheme:dark){.spx-form-section__title-index{background-color:var(--spx-form-section--color, #FFFFFF);color:#000}.spx-form-section__content{color:var(--spx-form-section--color, #FFFFFF)}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
11
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SpxFormSectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
12
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: SpxFormSectionComponent, isStandalone: true, selector: "spx-form-section", inputs: { spxIndex: { classPropertyName: "spxIndex", publicName: "spxIndex", isSignal: true, isRequired: false, transformFunction: null }, spxIndexSecondary: { classPropertyName: "spxIndexSecondary", publicName: "spxIndexSecondary", isSignal: true, isRequired: false, transformFunction: null }, spxTitle: { classPropertyName: "spxTitle", publicName: "spxTitle", isSignal: true, isRequired: false, transformFunction: null }, spxShowTitle: { classPropertyName: "spxShowTitle", publicName: "spxShowTitle", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (this.spxShowTitle()) {\n <div class=\"spx-form-section__title mb-3 flex gap-3 items-center\">\n <div class=\"spx-form-section__title-index flex content-center text-center text-sm h-[30px] w-[30px] font-bold rounded\">{{this.spxIndex()}}@if (this.spxIndexSecondary()) {\n {{ this.spxIndexSecondary() }}\n }</div>\n <div class=\"spx-form-section__content font-bold grow text-black dark:text-white\">{{this.spxTitle()}}</div>\n </div>\n}\n<div class=\"flex flex-col gap-3\">\n <ng-content></ng-content>\n</div>", styles: [":host{display:block}.spx-form-section__title-index{background-color:#000;display:inline-block;vertical-align:middle}.spx-form-section__title{color:var(--spx-form-section--color, #FFFFFF)}.spx-form-section__content{color:#000}@media(prefers-color-scheme:dark){.spx-form-section__title-index{background-color:var(--spx-form-section--color, #FFFFFF);color:#000}.spx-form-section__content{color:var(--spx-form-section--color, #FFFFFF)}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
13
13
  }
14
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: SpxFormSectionComponent, decorators: [{
14
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SpxFormSectionComponent, decorators: [{
15
15
  type: Component,
16
16
  args: [{ selector: 'spx-form-section', imports: [], changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, template: "@if (this.spxShowTitle()) {\n <div class=\"spx-form-section__title mb-3 flex gap-3 items-center\">\n <div class=\"spx-form-section__title-index flex content-center text-center text-sm h-[30px] w-[30px] font-bold rounded\">{{this.spxIndex()}}@if (this.spxIndexSecondary()) {\n {{ this.spxIndexSecondary() }}\n }</div>\n <div class=\"spx-form-section__content font-bold grow text-black dark:text-white\">{{this.spxTitle()}}</div>\n </div>\n}\n<div class=\"flex flex-col gap-3\">\n <ng-content></ng-content>\n</div>", styles: [":host{display:block}.spx-form-section__title-index{background-color:#000;display:inline-block;vertical-align:middle}.spx-form-section__title{color:var(--spx-form-section--color, #FFFFFF)}.spx-form-section__content{color:#000}@media(prefers-color-scheme:dark){.spx-form-section__title-index{background-color:var(--spx-form-section--color, #FFFFFF);color:#000}.spx-form-section__content{color:var(--spx-form-section--color, #FFFFFF)}}\n"] }]
17
17
  }], propDecorators: { spxIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "spxIndex", required: false }] }], spxIndexSecondary: [{ type: i0.Input, args: [{ isSignal: true, alias: "spxIndexSecondary", required: false }] }], spxTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "spxTitle", required: false }] }], spxShowTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "spxShowTitle", required: false }] }] } });
@@ -96,10 +96,10 @@ class SpxAutocompleteSearchComponent {
96
96
  this.ctrlQuery().setValue(valuePair);
97
97
  });
98
98
  }
99
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: SpxAutocompleteSearchComponent, deps: [{ token: i1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
100
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: SpxAutocompleteSearchComponent, isStandalone: true, selector: "spx-autocomplete-search", inputs: { spxSuggestions: { classPropertyName: "spxSuggestions", publicName: "spxSuggestions", isSignal: true, isRequired: false, transformFunction: null }, spxField: { classPropertyName: "spxField", publicName: "spxField", isSignal: true, isRequired: true, transformFunction: null }, txtOptions: { classPropertyName: "txtOptions", publicName: "txtOptions", isSignal: true, isRequired: true, transformFunction: null }, txtQuery: { classPropertyName: "txtQuery", publicName: "txtQuery", isSignal: true, isRequired: true, transformFunction: null }, txtSubmit: { classPropertyName: "txtSubmit", publicName: "txtSubmit", isSignal: true, isRequired: true, transformFunction: null }, spxValuePair: { classPropertyName: "spxValuePair", publicName: "spxValuePair", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { spxCancel: "spxCancel", spxSearch: "spxSearch", spxSubmit: "spxSubmit" }, ngImport: i0, template: "@if(formGroup()) {\n <form class=\"bg-black fixed pt-16 z-50 top-0 left-0 right-0 bottom-0\" [formGroup]=\"formGroup()!\" (ngSubmit)=\"onSubmit()\">\n <div class=\"h-full w-full px-3 flex flex-col gap-3\">\n <div class=\"grow flex flex-col gap-3 overflow-y-auto\">\n <spx-input [formControl]=\"ctrlQuery()\" [spxLabel]=\"txtQuery()\" [spxType]=\"inputTypeText\">\n </spx-input>\n <spx-input [formControl]=\"ctrlOptions()\" [spxLabel]=\"txtOptions()\" [spxSuggestions]=\"spxSuggestions()\"\n [spxType]=\"inputTypeRadio\">\n </spx-input>\n </div>\n <div class=\"py-3 flex flex-col gap-3\">\n <spx-button [spxFullWidth]=\"true\" [spxSeverity]=\"SpxSeverity.success\">\n Save\n </spx-button>\n <spx-button [spxFullWidth]=\"true\" [spxSeverity]=\"SpxSeverity.error\" [spxType]=\"'button'\" (spxClick)=\"onCancel()\">\n Cancel\n </spx-button>\n </div>\n </div>\n </form>\n}\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: SpxButtonComponent, selector: "spx-button", inputs: ["spxDisabled", "spxClass", "spxClassObject", "spxForm", "spxFullHeight", "spxFullWidth", "spxSeverity", "spxSize", "spxTabIndex", "spxType", "spxName"], outputs: ["spxClick"] }, { kind: "component", type: SpxInputComponent, selector: "spx-input", inputs: ["spxSpeedDial", "spxLabel", "spxMax", "spxMin", "spxName", "spxReadonly", "spxAutocomplete", "spxAutofocus", "spxInputMode", "spxPattern", "spxRequired", "spxSelectMonth", "spxSelectDay", "spxShowEdit", "spxShowHelp", "spxShowLabel", "spxCompact", "spxShowClear", "spxShowSearch", "spxAlert", "spxShowValidationMessages", "spxStep", "spxSuggestions", "spxType", "spxValidators", "spxCapitalize", "spxCycleConfig"], outputs: ["spxClear", "spxEdit", "spxHelp", "spxSearch", "spxBlur"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
99
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SpxAutocompleteSearchComponent, deps: [{ token: i1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
100
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: SpxAutocompleteSearchComponent, isStandalone: true, selector: "spx-autocomplete-search", inputs: { spxSuggestions: { classPropertyName: "spxSuggestions", publicName: "spxSuggestions", isSignal: true, isRequired: false, transformFunction: null }, spxField: { classPropertyName: "spxField", publicName: "spxField", isSignal: true, isRequired: true, transformFunction: null }, txtOptions: { classPropertyName: "txtOptions", publicName: "txtOptions", isSignal: true, isRequired: true, transformFunction: null }, txtQuery: { classPropertyName: "txtQuery", publicName: "txtQuery", isSignal: true, isRequired: true, transformFunction: null }, txtSubmit: { classPropertyName: "txtSubmit", publicName: "txtSubmit", isSignal: true, isRequired: true, transformFunction: null }, spxValuePair: { classPropertyName: "spxValuePair", publicName: "spxValuePair", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { spxCancel: "spxCancel", spxSearch: "spxSearch", spxSubmit: "spxSubmit" }, ngImport: i0, template: "@if(formGroup()) {\n <form class=\"bg-black fixed pt-16 z-50 top-0 left-0 right-0 bottom-0\" [formGroup]=\"formGroup()!\" (ngSubmit)=\"onSubmit()\">\n <div class=\"h-full w-full px-3 flex flex-col gap-3\">\n <div class=\"grow flex flex-col gap-3 overflow-y-auto\">\n <spx-input [formControl]=\"ctrlQuery()\" [spxLabel]=\"txtQuery()\" [spxType]=\"inputTypeText\">\n </spx-input>\n <spx-input [formControl]=\"ctrlOptions()\" [spxLabel]=\"txtOptions()\" [spxSuggestions]=\"spxSuggestions()\"\n [spxType]=\"inputTypeRadio\">\n </spx-input>\n </div>\n <div class=\"py-3 flex flex-col gap-3\">\n <spx-button [spxFullWidth]=\"true\" [spxSeverity]=\"SpxSeverity.success\">\n Save\n </spx-button>\n <spx-button [spxFullWidth]=\"true\" [spxSeverity]=\"SpxSeverity.error\" [spxType]=\"'button'\" (spxClick)=\"onCancel()\">\n Cancel\n </spx-button>\n </div>\n </div>\n </form>\n}\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: SpxButtonComponent, selector: "spx-button", inputs: ["spxDisabled", "spxClass", "spxClassObject", "spxForm", "spxFullHeight", "spxFullWidth", "spxSeverity", "spxSize", "spxTabIndex", "spxType", "spxName"], outputs: ["spxClick"] }, { kind: "component", type: SpxInputComponent, selector: "spx-input", inputs: ["spxSpeedDial", "spxLabel", "spxMax", "spxMin", "spxName", "spxReadonly", "spxAutocomplete", "spxAutofocus", "spxInputMode", "spxPattern", "spxRequired", "spxSelectMonth", "spxSelectDay", "spxShowEdit", "spxShowHelp", "spxShowLabel", "spxCompact", "spxShowClear", "spxShowSearch", "spxAlert", "spxShowValidationMessages", "spxStep", "spxSuggestions", "spxType", "spxValidators", "spxCapitalize", "spxCycleConfig"], outputs: ["spxClear", "spxEdit", "spxHelp", "spxSearch", "spxBlur"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
101
101
  }
102
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: SpxAutocompleteSearchComponent, decorators: [{
102
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SpxAutocompleteSearchComponent, decorators: [{
103
103
  type: Component,
104
104
  args: [{ selector: 'spx-autocomplete-search', imports: [
105
105
  FormsModule,
@@ -199,10 +199,10 @@ class SpxFormViewComponent {
199
199
  }, {});
200
200
  return new FormGroup(controls);
201
201
  }
202
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: SpxFormViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
203
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: SpxFormViewComponent, isStandalone: true, selector: "spx-form-view", inputs: { spxFormGroup: { classPropertyName: "spxFormGroup", publicName: "spxFormGroup", isSignal: true, isRequired: true, transformFunction: null }, spxForm: { classPropertyName: "spxForm", publicName: "spxForm", isSignal: true, isRequired: true, transformFunction: null }, spxSuggestions: { classPropertyName: "spxSuggestions", publicName: "spxSuggestions", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { spxBlur: "spxBlur", spxClick: "spxClick", spxSearch: "spxSearch" }, viewQueries: [{ propertyName: "spxInputs", predicate: (ElementRef), descendants: true, isSignal: true }], ngImport: i0, template: "@if (autoCompleteField()) {\n <spx-autocomplete-search\n [spxField]=\"autoCompleteField()!\"\n [spxSuggestions]=\"this.spxSuggestions()[autoCompleteField()!.key]\"\n [spxValuePair]=\"$any(this.spxFormGroup().get(autoCompleteField()!.key)).value\"\n [txtOptions]=\"'Options'\"\n [txtQuery]=\"'Query'\"\n [txtSubmit]=\"'Save'\"\n (spxCancel)=\"onAutocompleteCancel()\"\n (spxSearch)=\"onAutocompleteSearch($event)\"\n (spxSubmit)=\"onAutocompleteSave($event)\">\n </spx-autocomplete-search>\n}\n<div class=\"flex flex-col gap-3\">\n @for (spxSection of spxForm().sections; track spxSection; let spxSectionIndex = $index) {\n <spx-form-section\n [spxShowTitle]=\"!spxSection.showTitle || spxSection.showTitle()\"\n [spxIndex]=\"spxSectionIndex + 1\"\n [spxTitle]=\"spxSection.title ? (spxSection.title() | translate | capitalize) : undefined\">\n @for (spxField of spxSection.fields; track spxField; let spxFieldIndex = $index) {\n @if (spxField.show === undefined || spxField.show()) {\n @if (spxField.type() === typeButton) {\n <spx-button\n [spxDisabled]=\"spxField.readonly ? spxField.readonly() : false\"\n [spxFullWidth]=\"true\"\n [spxSeverity]=\"spxField.severity ? spxField.severity() : undefined\"\n [spxType]=\"'button'\"\n (spxClick)=\"onClick(spxField)\"\n >{{ (spxField.label ? spxField.label() : spxField.key) | translate | capitalize }}</spx-button>\n }\n @if (spxField.type() === typeOverlay || spxField.type() === typeOverlayNumber || spxField.type() === typeFloat || spxField.type() === typeNumber || spxField.type() === typeText || spxField.type() === typeAutocomplete || spxField.type() === typeNumericKeyboard) {\n <spx-input\n [formControl]=\"$any(this.spxFormGroup().get(spxField.key))\"\n [spxAutofocus]=\"spxField.autofocus ? spxField.autofocus() : false\"\n [spxCapitalize]=\"spxField.capitalize ? spxField.capitalize() : false\"\n [spxLabel]=\"(spxField.label ? spxField.label() : spxField.key) | translate | capitalize\"\n [spxName]=\"spxField.key\"\n [spxPattern]=\"spxField.type() === typeNumericKeyboard ? '\\\\d*' : undefined\"\n [spxReadonly]=\"spxField.readonly ? spxField.readonly() : false\"\n [spxRequired]=\"checkRequired(this.spxFormGroup().get(spxField.key)!)\"\n [spxShowSearch]=\"spxField.type() === typeAutocomplete\"\n [spxShowHelp]=\"false\"\n [spxShowValidationMessages]=\"this.spxFormGroup().get(spxField.key)! && this.spxFormGroup().get(spxField.key)!.errors && this.spxFormGroup().get(spxField.key)!.touched\"\n [spxStep]=\"spxField.step ? spxField.step() : undefined\"\n [spxType]=\"spxField.type()\"\n [spxValidators]=\"getRawValidators(this.spxFormGroup().get(spxField.key)!)\"\n [spxSuggestions]=\"spxField.suggestionsFixed ? spxField.suggestionsFixed() : this.spxSuggestions()[spxField.key]\"\n (spxBlur)=\"onBlur(spxField)\"\n (spxSearch)=\"onSearch(spxField)\">\n <spx-validate-control [errors]=\"$any(this.spxFormGroup().get(spxField.key)).errors\" [touched]=\"$any(this.spxFormGroup().get(spxField.key)).touched\" [control]=\"$any(this.spxFormGroup().get(spxField.key))\" [label]=\"(spxField.label ? spxField.label() : spxField.key)| translate | capitalize\"></spx-validate-control>\n </spx-input>\n }\n @if (spxField.type() === typeRadio) {\n <spx-input\n [formControl]=\"$any(this.spxFormGroup().get(spxField.key))\"\n [spxLabel]=\"(spxField.label ? spxField.label() : spxField.key) | translate | capitalize\"\n [spxName]=\"spxField.key\"\n [spxReadonly]=\"spxField.readonly ? spxField.readonly() : false\"\n [spxRequired]=\"checkRequired(this.spxFormGroup().get(spxField.key)!)\"\n [spxShowHelp]=\"false\"\n [spxShowValidationMessages]=\"this.spxFormGroup().get(spxField.key)! && this.spxFormGroup().get(spxField.key)!.errors && this.spxFormGroup().get(spxField.key)!.touched\"\n [spxSuggestions]=\"spxField.suggestionsFixed ? spxField.suggestionsFixed() : this.spxSuggestions()[spxField.key]\"\n [spxType]=\"typeRadio\"\n [spxValidators]=\"getRawValidators(this.spxFormGroup().get(spxField.key)!)\">\n <spx-validate-control [errors]=\"$any(this.spxFormGroup().get(spxField.key)).errors\" [touched]=\"$any(this.spxFormGroup().get(spxField.key)).touched\" [control]=\"$any(this.spxFormGroup().get(spxField.key))\" [label]=\"(spxField.label ? spxField.label() : spxField.key) | translate | capitalize\"></spx-validate-control>\n </spx-input>\n }\n }\n \n }\n </spx-form-section>\n }\n\n @for (spxButton of spxForm().buttons; track spxButton) {\n <spx-button\n [spxFullWidth]=\"true\"\n [spxSeverity]=\"spxButton.severity\"\n [spxType]=\"spxButton.type\"\n (spxClick)=\"spxButton.onClick ? spxButton.onClick() : undefined\">\n {{ ((spxButton && spxButton.label) ? spxButton.label() : '') | translate | capitalize }}\n </spx-button>\n }\n</div>", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: SpxAutocompleteSearchComponent, selector: "spx-autocomplete-search", inputs: ["spxSuggestions", "spxField", "txtOptions", "txtQuery", "txtSubmit", "spxValuePair"], outputs: ["spxCancel", "spxSearch", "spxSubmit"] }, { kind: "component", type: SpxButtonComponent, selector: "spx-button", inputs: ["spxDisabled", "spxClass", "spxClassObject", "spxForm", "spxFullHeight", "spxFullWidth", "spxSeverity", "spxSize", "spxTabIndex", "spxType", "spxName"], outputs: ["spxClick"] }, { kind: "component", type: SpxFormSectionComponent, selector: "spx-form-section", inputs: ["spxIndex", "spxIndexSecondary", "spxTitle", "spxShowTitle"] }, { kind: "component", type: SpxInputComponent, selector: "spx-input", inputs: ["spxSpeedDial", "spxLabel", "spxMax", "spxMin", "spxName", "spxReadonly", "spxAutocomplete", "spxAutofocus", "spxInputMode", "spxPattern", "spxRequired", "spxSelectMonth", "spxSelectDay", "spxShowEdit", "spxShowHelp", "spxShowLabel", "spxCompact", "spxShowClear", "spxShowSearch", "spxAlert", "spxShowValidationMessages", "spxStep", "spxSuggestions", "spxType", "spxValidators", "spxCapitalize", "spxCycleConfig"], outputs: ["spxClear", "spxEdit", "spxHelp", "spxSearch", "spxBlur"] }, { kind: "component", type: SpxValidateControlComponent, selector: "spx-validate-control", inputs: ["control", "label", "submitTried", "errors", "touched"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: SpxCapitalizePipe, name: "capitalize" }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
202
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SpxFormViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
203
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: SpxFormViewComponent, isStandalone: true, selector: "spx-form-view", inputs: { spxFormGroup: { classPropertyName: "spxFormGroup", publicName: "spxFormGroup", isSignal: true, isRequired: true, transformFunction: null }, spxForm: { classPropertyName: "spxForm", publicName: "spxForm", isSignal: true, isRequired: true, transformFunction: null }, spxSuggestions: { classPropertyName: "spxSuggestions", publicName: "spxSuggestions", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { spxBlur: "spxBlur", spxClick: "spxClick", spxSearch: "spxSearch" }, viewQueries: [{ propertyName: "spxInputs", predicate: (ElementRef), descendants: true, isSignal: true }], ngImport: i0, template: "@if (autoCompleteField()) {\n <spx-autocomplete-search\n [spxField]=\"autoCompleteField()!\"\n [spxSuggestions]=\"this.spxSuggestions()[autoCompleteField()!.key]\"\n [spxValuePair]=\"$any(this.spxFormGroup().get(autoCompleteField()!.key)).value\"\n [txtOptions]=\"'Options'\"\n [txtQuery]=\"'Query'\"\n [txtSubmit]=\"'Save'\"\n (spxCancel)=\"onAutocompleteCancel()\"\n (spxSearch)=\"onAutocompleteSearch($event)\"\n (spxSubmit)=\"onAutocompleteSave($event)\">\n </spx-autocomplete-search>\n}\n<div class=\"flex flex-col gap-3\">\n @for (spxSection of spxForm().sections; track spxSection; let spxSectionIndex = $index) {\n <spx-form-section\n [spxShowTitle]=\"!spxSection.showTitle || spxSection.showTitle()\"\n [spxIndex]=\"spxSectionIndex + 1\"\n [spxTitle]=\"spxSection.title ? (spxSection.title() | translate | capitalize) : undefined\">\n @for (spxField of spxSection.fields; track spxField; let spxFieldIndex = $index) {\n @if (spxField.show === undefined || spxField.show()) {\n @if (spxField.type() === typeButton) {\n <spx-button\n [spxDisabled]=\"spxField.readonly ? spxField.readonly() : false\"\n [spxFullWidth]=\"true\"\n [spxSeverity]=\"spxField.severity ? spxField.severity() : undefined\"\n [spxType]=\"'button'\"\n (spxClick)=\"onClick(spxField)\"\n >{{ (spxField.label ? spxField.label() : spxField.key) | translate | capitalize }}</spx-button>\n }\n @if (spxField.type() === typeOverlay || spxField.type() === typeOverlayNumber || spxField.type() === typeFloat || spxField.type() === typeNumber || spxField.type() === typeText || spxField.type() === typeAutocomplete || spxField.type() === typeNumericKeyboard) {\n <spx-input\n [formControl]=\"$any(this.spxFormGroup().get(spxField.key))\"\n [spxAutofocus]=\"spxField.autofocus ? spxField.autofocus() : false\"\n [spxCapitalize]=\"spxField.capitalize ? spxField.capitalize() : false\"\n [spxLabel]=\"(spxField.label ? spxField.label() : spxField.key) | translate | capitalize\"\n [spxName]=\"spxField.key\"\n [spxPattern]=\"spxField.type() === typeNumericKeyboard ? '\\\\d*' : undefined\"\n [spxReadonly]=\"spxField.readonly ? spxField.readonly() : false\"\n [spxRequired]=\"checkRequired(this.spxFormGroup().get(spxField.key)!)\"\n [spxShowSearch]=\"spxField.type() === typeAutocomplete\"\n [spxShowHelp]=\"false\"\n [spxShowValidationMessages]=\"this.spxFormGroup().get(spxField.key)! && this.spxFormGroup().get(spxField.key)!.errors && this.spxFormGroup().get(spxField.key)!.touched\"\n [spxStep]=\"spxField.step ? spxField.step() : undefined\"\n [spxType]=\"spxField.type()\"\n [spxValidators]=\"getRawValidators(this.spxFormGroup().get(spxField.key)!)\"\n [spxSuggestions]=\"spxField.suggestionsFixed ? spxField.suggestionsFixed() : this.spxSuggestions()[spxField.key]\"\n (spxBlur)=\"onBlur(spxField)\"\n (spxSearch)=\"onSearch(spxField)\">\n <spx-validate-control [errors]=\"$any(this.spxFormGroup().get(spxField.key)).errors\" [touched]=\"$any(this.spxFormGroup().get(spxField.key)).touched\" [control]=\"$any(this.spxFormGroup().get(spxField.key))\" [label]=\"(spxField.label ? spxField.label() : spxField.key)| translate | capitalize\"></spx-validate-control>\n </spx-input>\n }\n @if (spxField.type() === typeRadio) {\n <spx-input\n [formControl]=\"$any(this.spxFormGroup().get(spxField.key))\"\n [spxLabel]=\"(spxField.label ? spxField.label() : spxField.key) | translate | capitalize\"\n [spxName]=\"spxField.key\"\n [spxReadonly]=\"spxField.readonly ? spxField.readonly() : false\"\n [spxRequired]=\"checkRequired(this.spxFormGroup().get(spxField.key)!)\"\n [spxShowHelp]=\"false\"\n [spxShowValidationMessages]=\"this.spxFormGroup().get(spxField.key)! && this.spxFormGroup().get(spxField.key)!.errors && this.spxFormGroup().get(spxField.key)!.touched\"\n [spxSuggestions]=\"spxField.suggestionsFixed ? spxField.suggestionsFixed() : this.spxSuggestions()[spxField.key]\"\n [spxType]=\"typeRadio\"\n [spxValidators]=\"getRawValidators(this.spxFormGroup().get(spxField.key)!)\">\n <spx-validate-control [errors]=\"$any(this.spxFormGroup().get(spxField.key)).errors\" [touched]=\"$any(this.spxFormGroup().get(spxField.key)).touched\" [control]=\"$any(this.spxFormGroup().get(spxField.key))\" [label]=\"(spxField.label ? spxField.label() : spxField.key) | translate | capitalize\"></spx-validate-control>\n </spx-input>\n }\n }\n \n }\n </spx-form-section>\n }\n\n @for (spxButton of spxForm().buttons; track spxButton) {\n <spx-button\n [spxFullWidth]=\"true\"\n [spxSeverity]=\"spxButton.severity\"\n [spxType]=\"spxButton.type\"\n (spxClick)=\"spxButton.onClick ? spxButton.onClick() : undefined\">\n {{ ((spxButton && spxButton.label) ? spxButton.label() : '') | translate | capitalize }}\n </spx-button>\n }\n</div>", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: SpxAutocompleteSearchComponent, selector: "spx-autocomplete-search", inputs: ["spxSuggestions", "spxField", "txtOptions", "txtQuery", "txtSubmit", "spxValuePair"], outputs: ["spxCancel", "spxSearch", "spxSubmit"] }, { kind: "component", type: SpxButtonComponent, selector: "spx-button", inputs: ["spxDisabled", "spxClass", "spxClassObject", "spxForm", "spxFullHeight", "spxFullWidth", "spxSeverity", "spxSize", "spxTabIndex", "spxType", "spxName"], outputs: ["spxClick"] }, { kind: "component", type: SpxFormSectionComponent, selector: "spx-form-section", inputs: ["spxIndex", "spxIndexSecondary", "spxTitle", "spxShowTitle"] }, { kind: "component", type: SpxInputComponent, selector: "spx-input", inputs: ["spxSpeedDial", "spxLabel", "spxMax", "spxMin", "spxName", "spxReadonly", "spxAutocomplete", "spxAutofocus", "spxInputMode", "spxPattern", "spxRequired", "spxSelectMonth", "spxSelectDay", "spxShowEdit", "spxShowHelp", "spxShowLabel", "spxCompact", "spxShowClear", "spxShowSearch", "spxAlert", "spxShowValidationMessages", "spxStep", "spxSuggestions", "spxType", "spxValidators", "spxCapitalize", "spxCycleConfig"], outputs: ["spxClear", "spxEdit", "spxHelp", "spxSearch", "spxBlur"] }, { kind: "component", type: SpxValidateControlComponent, selector: "spx-validate-control", inputs: ["control", "label", "submitTried", "errors", "touched"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: SpxCapitalizePipe, name: "capitalize" }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
204
204
  }
205
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: SpxFormViewComponent, decorators: [{
205
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SpxFormViewComponent, decorators: [{
206
206
  type: Component,
207
207
  args: [{ selector: 'spx-form-view', imports: [
208
208
  FormsModule,
@@ -42,10 +42,10 @@ class SelectedInputService {
42
42
  setSelectedElementId(id) {
43
43
  this.focusedElement.next(id);
44
44
  }
45
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: SelectedInputService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
46
- static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: SelectedInputService, providedIn: 'root' }); }
45
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SelectedInputService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
46
+ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SelectedInputService, providedIn: 'root' }); }
47
47
  }
48
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: SelectedInputService, decorators: [{
48
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SelectedInputService, decorators: [{
49
49
  type: Injectable,
50
50
  args: [{
51
51
  providedIn: 'root', // Ensure the service is available globally
@@ -110,10 +110,10 @@ class SpxInputBoxComponent {
110
110
  onHelp() {
111
111
  this.spxHelp.emit();
112
112
  }
113
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: SpxInputBoxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
114
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", 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 }, spxName: { classPropertyName: "spxName", publicName: "spxName", 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($event)", "focusin": "handleFocusIn($event)", "focusout": "handleFocusOut($event)" } }, ngImport: i0, template: "<div class=\"flex rounded w-full gap-1\" [class.rounded-none]=\"this.spxShowValidationMessages()\"\n [class.rounded-t]=\"this.spxShowValidationMessages()\" [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()\" [class.bg-white]=\"!this.spxReadonly()\"\n [class.bg-gray-300]=\"this.spxReadonly()\" [class.cursor-not-allowed]=\"this.spxReadonly()\">\n <div class=\"flex-auto p-3\" [class.p-0]=\"this.spxCompact()\" [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\" [class.mb-0]=\"this.spxCompact()\" [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 (spxClick)=\"onEdit()\" [spxFullHeight]=\"true\" [spxSize]=\"'xl'\" [spxType]=\"'button'\">\n <fa-icon [icon]=\"faEdit\" class=\"block text-xl\"></fa-icon>\n </spx-button>\n }\n @if (this.spxShowHelp()) {\n <spx-button (spxClick)=\"onHelp()\" [spxFullHeight]=\"true\" [spxDisabled]=\"this.spxReadonly()\" [spxSize]=\"'xl'\"\n [spxTabIndex]=\"-1\" [spxType]=\"'button'\">\n <fa-icon [icon]=\"faQuestion\" class=\"block text-xl\"></fa-icon>\n </spx-button>\n }\n @if (this.spxShowSearch()) {\n <spx-button (spxClick)=\"onSearch()\" [spxFullHeight]=\"true\" [spxDisabled]=\"this.spxReadonly()\"\n [spxName]=\"searchButtonName()\" [spxSize]=\"'xl'\" [spxTabIndex]=\"-1\" [spxType]=\"'button'\">\n <fa-icon [icon]=\"faSearch\" class=\"block text-xl\"></fa-icon>\n </spx-button>\n }\n @if (this.spxShowClear()) {\n <spx-button (spxClick)=\"onClear()\"\n [spxDisabled]=\"this.spxReadonly() || (this.spxValue()?.description !== 'No' && !this.spxValue()?.value)\"\n [spxFullHeight]=\"true\" [spxName]=\"clearButtonName()\" [spxSize]=\"'xl'\" [spxTabIndex]=\"-1\" [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<ng-content select=\"[validation-messages]\"></ng-content>\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\" 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", "spxName"], 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"], outputs: ["iconChange", "titleChange", "animationChange", "maskChange", "flipChange", "sizeChange", "pullChange", "borderChange", "inverseChange", "symbolChange", "rotateChange", "fixedWidthChange", "transformChange", "a11yRoleChange"] }, { kind: "pipe", type: IsSeverityPipe, name: "isSeverity" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
113
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SpxInputBoxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
114
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", 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 }, spxName: { classPropertyName: "spxName", publicName: "spxName", 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($event)", "focusin": "handleFocusIn($event)", "focusout": "handleFocusOut($event)" } }, ngImport: i0, template: "<div class=\"flex rounded w-full gap-1\" [class.rounded-none]=\"this.spxShowValidationMessages()\"\n [class.rounded-t]=\"this.spxShowValidationMessages()\" [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()\" [class.bg-white]=\"!this.spxReadonly()\"\n [class.bg-gray-300]=\"this.spxReadonly()\" [class.cursor-not-allowed]=\"this.spxReadonly()\">\n <div class=\"flex-auto p-3\" [class.p-0]=\"this.spxCompact()\" [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\" [class.mb-0]=\"this.spxCompact()\" [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 (spxClick)=\"onEdit()\" [spxFullHeight]=\"true\" [spxSize]=\"'xl'\" [spxType]=\"'button'\">\n <fa-icon [icon]=\"faEdit\" class=\"block text-xl\"></fa-icon>\n </spx-button>\n }\n @if (this.spxShowHelp()) {\n <spx-button (spxClick)=\"onHelp()\" [spxFullHeight]=\"true\" [spxDisabled]=\"this.spxReadonly()\" [spxSize]=\"'xl'\"\n [spxTabIndex]=\"-1\" [spxType]=\"'button'\">\n <fa-icon [icon]=\"faQuestion\" class=\"block text-xl\"></fa-icon>\n </spx-button>\n }\n @if (this.spxShowSearch()) {\n <spx-button (spxClick)=\"onSearch()\" [spxFullHeight]=\"true\" [spxDisabled]=\"this.spxReadonly()\"\n [spxName]=\"searchButtonName()\" [spxSize]=\"'xl'\" [spxTabIndex]=\"-1\" [spxType]=\"'button'\">\n <fa-icon [icon]=\"faSearch\" class=\"block text-xl\"></fa-icon>\n </spx-button>\n }\n @if (this.spxShowClear()) {\n <spx-button (spxClick)=\"onClear()\"\n [spxDisabled]=\"this.spxReadonly() || (this.spxValue()?.description !== 'No' && !this.spxValue()?.value)\"\n [spxFullHeight]=\"true\" [spxName]=\"clearButtonName()\" [spxSize]=\"'xl'\" [spxTabIndex]=\"-1\" [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<ng-content select=\"[validation-messages]\"></ng-content>\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\" 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", "spxName"], 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"], outputs: ["iconChange", "titleChange", "animationChange", "maskChange", "flipChange", "sizeChange", "pullChange", "borderChange", "inverseChange", "symbolChange", "rotateChange", "fixedWidthChange", "transformChange", "a11yRoleChange"] }, { kind: "pipe", type: IsSeverityPipe, name: "isSeverity" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
115
115
  }
116
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: SpxInputBoxComponent, decorators: [{
116
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SpxInputBoxComponent, decorators: [{
117
117
  type: Component,
118
118
  args: [{ selector: 'spx-input-box', imports: [
119
119
  SpxButtonComponent,
@@ -168,10 +168,10 @@ class SpxDropdownComponent {
168
168
  this.focusPosition.set(0);
169
169
  this.spxSelect.emit(valuePair);
170
170
  }
171
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: SpxDropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
172
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", 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", "spxName"], outputs: ["spxClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
171
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SpxDropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
172
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", 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", "spxName"], outputs: ["spxClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
173
173
  }
174
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: SpxDropdownComponent, decorators: [{
174
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SpxDropdownComponent, decorators: [{
175
175
  type: Component,
176
176
  args: [{ selector: 'spx-dropdown', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
177
177
  SpxButtonComponent
@@ -257,10 +257,10 @@ class SpxInputTextComponent {
257
257
  this.spxSetFocus();
258
258
  }
259
259
  }
260
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: SpxInputTextComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
261
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: SpxInputTextComponent, isStandalone: true, selector: "spx-input-text", inputs: { spxSpeedDial: { classPropertyName: "spxSpeedDial", publicName: "spxSpeedDial", isSignal: true, isRequired: false, transformFunction: null }, 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 #input class=\"font-bold text-lg w-full outline-none\" autocomplete=\"off\" spellcheck=\"false\"\n [attr.autocomplete]=\"this.spxAutocomplete()\" [attr.autofocus]=\"this.spxAutofocus()\"\n [attr.inputMode]=\"this.spxInputMode()\" [attr.pattern]=\"this.spxPattern()\" [attr.name]=\"this.spxName()\"\n [attr.type]=\"this.spxType()\" [class.bg-white]=\"!this.spxReadonly()\" [class.bg-gray-300]=\"this.spxReadonly()\"\n [class.cursor-not-allowed]=\"this.spxReadonly()\" [class.uppercase]=\"this.spxCapitalize()\"\n [disabled]=\"this.mappedReadonly()\" [ngModel]=\"\n this.value()?.description\n ? this.value()?.description\n : this.value()?.value\n \" (ngModelChange)=\"this.handleChange($event)\" />\n @if (this.value()?.description && this.value()?.value &&\n this.value()?.description?.valueOf() !== this.value()?.value?.valueOf()) {\n <span>{{ this.value()?.value }}</span>\n } @if (this.spxIsFocused() && (this.spxType() === 'overlay' || this.spxType()\n === 'overlaynumber')) {\n <spx-dropdown [spxSuggestions]=\"this.spxSuggestions()\" (spxSelect)=\"this.handleSuggestionClick($event)\">\n </spx-dropdown>\n } @if (this.spxSpeedDial()) {\n <div class=\"flex flex-wrap gap-3\">\n @for (speedDial of this.spxSpeedDial(); track $index) {\n <button class=\"px-3 px-1\" [ngClass]=\"'bg-' + speedDial.backgroundColor\" (click)=\"doSelect(speedDial)\">\n {{ speedDial.valuePair.description }}\n </button>\n }\n </div>\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"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
260
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SpxInputTextComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
261
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: SpxInputTextComponent, isStandalone: true, selector: "spx-input-text", inputs: { spxSpeedDial: { classPropertyName: "spxSpeedDial", publicName: "spxSpeedDial", isSignal: true, isRequired: false, transformFunction: null }, 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 #input class=\"font-bold text-lg w-full outline-none\" autocomplete=\"off\" spellcheck=\"false\"\n [attr.autocomplete]=\"this.spxAutocomplete()\" [attr.autofocus]=\"this.spxAutofocus()\"\n [attr.inputMode]=\"this.spxInputMode()\" [attr.pattern]=\"this.spxPattern()\" [attr.name]=\"this.spxName()\"\n [attr.type]=\"this.spxType()\" [class.bg-white]=\"!this.spxReadonly()\" [class.bg-gray-300]=\"this.spxReadonly()\"\n [class.cursor-not-allowed]=\"this.spxReadonly()\" [class.uppercase]=\"this.spxCapitalize()\"\n [disabled]=\"this.mappedReadonly()\" [ngModel]=\"\n this.value()?.description\n ? this.value()?.description\n : this.value()?.value\n \" (ngModelChange)=\"this.handleChange($event)\" />\n @if (this.value()?.description && this.value()?.value &&\n this.value()?.description?.valueOf() !== this.value()?.value?.valueOf()) {\n <span>{{ this.value()?.value }}</span>\n } @if (this.spxIsFocused() && (this.spxType() === 'overlay' || this.spxType()\n === 'overlaynumber')) {\n <spx-dropdown [spxSuggestions]=\"this.spxSuggestions()\" (spxSelect)=\"this.handleSuggestionClick($event)\">\n </spx-dropdown>\n } @if (this.spxSpeedDial()) {\n <div class=\"flex flex-wrap gap-3\">\n @for (speedDial of this.spxSpeedDial(); track $index) {\n <button class=\"px-3 px-1\" [ngClass]=\"'bg-' + speedDial.backgroundColor\" (click)=\"doSelect(speedDial)\">\n {{ speedDial.valuePair.description }}\n </button>\n }\n </div>\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"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
262
262
  }
263
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: SpxInputTextComponent, decorators: [{
263
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SpxInputTextComponent, decorators: [{
264
264
  type: Component,
265
265
  args: [{ selector: 'spx-input-text', imports: [
266
266
  SpxDropdownComponent,
@@ -621,10 +621,10 @@ class SpxInputCycleComponent {
621
621
  if (el.value)
622
622
  this.setT(() => el.select()); // selection guarded
623
623
  }
624
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: SpxInputCycleComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
625
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: SpxInputCycleComponent, isStandalone: true, selector: "spx-input-cycle", inputs: { spxSpeedDial: { classPropertyName: "spxSpeedDial", publicName: "spxSpeedDial", isSignal: true, isRequired: false, transformFunction: null }, 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 }, spxCycleConfig: { classPropertyName: "spxCycleConfig", publicName: "spxCycleConfig", isSignal: true, isRequired: true, 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 }, 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", completeInput: "completeInput" }, host: { listeners: { "document:pointerdown": "onDocPointerDown($event)", "document:pointerup": "onDocPointerUp()" } }, viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["input"], descendants: true, isSignal: true }, { propertyName: "inputBoxes", predicate: ["inputBox"], descendants: true }], ngImport: i0, template: "<div class=\"relative text-black flex gap-1 w-full\">\n @for (val of values; track $index) {\n <input #inputBox type=\"text\" maxlength=\"1\" pattern=\"\\d*\" [value]=\"val\" (focus)=\"onFocus($index, $event)\"\n (compositionstart)=\"onCompositionStart()\" (compositionend)=\"onCompositionEnd()\" (input)=\"onInput($index, $event)\"\n (keydown)=\"onKeydown($index, $event)\" (mouseup)=\"onMouseUp($event)\"\n [attr.inputMode]=\"this.spxInputMode()\" [attr.pattern]=\"spxCycleConfig().fieldPattern\"\n [class.opacity-50]=\"spxCycleConfig().requiredPositions[$index] === false\"\n [class.bg-sky-100]=\"!this.spxReadonly() && !this.spxSeverity()\"\n [class.bg-red-100]=\"!this.spxReadonly() && this.spxSeverity() === severityError\"\n [class.bg-amber-100]=\"!this.spxReadonly() && this.spxSeverity() === severityWarning\"\n [class.bg-teal-100]=\"!this.spxReadonly() && this.spxSeverity() === severitySuccess\"\n [class.bg-gray-400]=\"this.spxReadonly()\" [class.cursor-not-allowed]=\"this.spxReadonly()\"\n [class.uppercase]=\"this.spxCapitalize()\" [disabled]=\"this.mappedReadonly()\"\n class=\"rounded text-center px-1 py-3 font-bold text-lg w-full\" />\n }\n</div>\n", dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: FormsModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
624
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SpxInputCycleComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
625
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: SpxInputCycleComponent, isStandalone: true, selector: "spx-input-cycle", inputs: { spxSpeedDial: { classPropertyName: "spxSpeedDial", publicName: "spxSpeedDial", isSignal: true, isRequired: false, transformFunction: null }, 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 }, spxCycleConfig: { classPropertyName: "spxCycleConfig", publicName: "spxCycleConfig", isSignal: true, isRequired: true, 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 }, 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", completeInput: "completeInput" }, host: { listeners: { "document:pointerdown": "onDocPointerDown($event)", "document:pointerup": "onDocPointerUp()" } }, viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["input"], descendants: true, isSignal: true }, { propertyName: "inputBoxes", predicate: ["inputBox"], descendants: true }], ngImport: i0, template: "<div class=\"relative text-black flex gap-1 w-full\">\n @for (val of values; track $index) {\n <input #inputBox type=\"text\" maxlength=\"1\" pattern=\"\\d*\" [value]=\"val\" (focus)=\"onFocus($index, $event)\"\n (compositionstart)=\"onCompositionStart()\" (compositionend)=\"onCompositionEnd()\" (input)=\"onInput($index, $event)\"\n (keydown)=\"onKeydown($index, $event)\" (mouseup)=\"onMouseUp($event)\"\n [attr.inputMode]=\"this.spxInputMode()\" [attr.pattern]=\"spxCycleConfig().fieldPattern\"\n [class.opacity-50]=\"spxCycleConfig().requiredPositions[$index] === false\"\n [class.bg-sky-100]=\"!this.spxReadonly() && !this.spxSeverity()\"\n [class.bg-red-100]=\"!this.spxReadonly() && this.spxSeverity() === severityError\"\n [class.bg-amber-100]=\"!this.spxReadonly() && this.spxSeverity() === severityWarning\"\n [class.bg-teal-100]=\"!this.spxReadonly() && this.spxSeverity() === severitySuccess\"\n [class.bg-gray-400]=\"this.spxReadonly()\" [class.cursor-not-allowed]=\"this.spxReadonly()\"\n [class.uppercase]=\"this.spxCapitalize()\" [disabled]=\"this.mappedReadonly()\"\n class=\"rounded text-center px-1 py-3 font-bold text-lg w-full\" />\n }\n</div>\n", dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: FormsModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
626
626
  }
627
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: SpxInputCycleComponent, decorators: [{
627
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SpxInputCycleComponent, decorators: [{
628
628
  type: Component,
629
629
  args: [{ selector: 'spx-input-cycle', imports: [
630
630
  ReactiveFormsModule,
@@ -866,10 +866,10 @@ class SpxInputDateComponent {
866
866
  this.selectedMonth.set(null);
867
867
  this.selectedDay.set(null);
868
868
  }
869
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: SpxInputDateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
870
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", 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 }); }
869
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SpxInputDateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
870
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", 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 }); }
871
871
  }
872
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: SpxInputDateComponent, decorators: [{
872
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SpxInputDateComponent, decorators: [{
873
873
  type: Component,
874
874
  args: [{ selector: 'spx-input-date', standalone: true, imports: [
875
875
  SpxSuggestionComponent,
@@ -965,10 +965,10 @@ class SpxInputFloatComponent {
965
965
  isNumeric(value) {
966
966
  return /^[+-]?\d+(\.\d+)?$/.test(value);
967
967
  }
968
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: SpxInputFloatComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
969
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.0.3", 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.mappedReadonly()\"\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.mappedReadonly()\" />\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 }); }
968
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SpxInputFloatComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
969
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.0.8", 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.mappedReadonly()\"\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.mappedReadonly()\" />\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 }); }
970
970
  }
971
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: SpxInputFloatComponent, decorators: [{
971
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SpxInputFloatComponent, decorators: [{
972
972
  type: Component,
973
973
  args: [{ selector: 'spx-input-float', imports: [
974
974
  FormsModule,
@@ -1009,10 +1009,10 @@ class SpxInputNumberComponent {
1009
1009
  this.spxSetFocus();
1010
1010
  }
1011
1011
  }
1012
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: SpxInputNumberComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
1013
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.0.3", 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.mappedReadonly()\"\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 }); }
1012
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SpxInputNumberComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
1013
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.0.8", 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.mappedReadonly()\"\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 }); }
1014
1014
  }
1015
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: SpxInputNumberComponent, decorators: [{
1015
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SpxInputNumberComponent, decorators: [{
1016
1016
  type: Component,
1017
1017
  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.mappedReadonly()\"\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"] }]
1018
1018
  }], propDecorators: { spxName: [{ type: i0.Input, args: [{ isSignal: true, alias: "spxName", required: false }] }], spxAutofocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "spxAutofocus", required: false }] }], spxInputMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "spxInputMode", required: false }] }], spxReadonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "spxReadonly", required: false }] }], spxValidators: [{ type: i0.Input, args: [{ isSignal: true, alias: "spxValidators", required: false }] }], spxFocused: [{ type: i0.Input, args: [{ isSignal: true, alias: "spxFocused", required: false }] }], spxStep: [{ type: i0.Input, args: [{ isSignal: true, alias: "spxStep", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }, { type: i0.Output, args: ["valueChange"] }], inputRef: [{ type: i0.ViewChild, args: ['input', { isSignal: true }] }], spxElementId: [{ type: i0.Input, args: [{ isSignal: true, alias: "spxElementId", required: false }] }] } });
@@ -1094,10 +1094,10 @@ class SpxInputRadioComponent {
1094
1094
  }
1095
1095
  });
1096
1096
  }
1097
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: SpxInputRadioComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
1098
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", 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 }); }
1097
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SpxInputRadioComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
1098
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", 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 }); }
1099
1099
  }
1100
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: SpxInputRadioComponent, decorators: [{
1100
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SpxInputRadioComponent, decorators: [{
1101
1101
  type: Component,
1102
1102
  args: [{ selector: 'spx-input-radio', standalone: true, imports: [
1103
1103
  SpxSuggestionComponent
@@ -1124,10 +1124,10 @@ class SpxInputTimeModalComponent {
1124
1124
  this.change.emit(value);
1125
1125
  this.modalController.dismiss(value);
1126
1126
  }
1127
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: SpxInputTimeModalComponent, deps: [{ token: i1$2.ModalController }], target: i0.ɵɵFactoryTarget.Component }); }
1128
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", 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"], outputs: ["iconChange", "titleChange", "animationChange", "maskChange", "flipChange", "sizeChange", "pullChange", "borderChange", "inverseChange", "symbolChange", "rotateChange", "fixedWidthChange", "transformChange", "a11yRoleChange"] }, { 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", "spxName"], outputs: ["spxClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
1127
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SpxInputTimeModalComponent, deps: [{ token: i1$2.ModalController }], target: i0.ɵɵFactoryTarget.Component }); }
1128
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", 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"], outputs: ["iconChange", "titleChange", "animationChange", "maskChange", "flipChange", "sizeChange", "pullChange", "borderChange", "inverseChange", "symbolChange", "rotateChange", "fixedWidthChange", "transformChange", "a11yRoleChange"] }, { 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", "spxName"], outputs: ["spxClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
1129
1129
  }
1130
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: SpxInputTimeModalComponent, decorators: [{
1130
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SpxInputTimeModalComponent, decorators: [{
1131
1131
  type: Component,
1132
1132
  args: [{ selector: 'spx-input-time-modal', imports: [
1133
1133
  FontAwesomeModule,
@@ -1217,10 +1217,10 @@ class SpxInputTimeComponent {
1217
1217
  });
1218
1218
  }
1219
1219
  }
1220
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: SpxInputTimeComponent, deps: [{ token: i1$2.ModalController }], target: i0.ɵɵFactoryTarget.Component }); }
1221
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.0.3", 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 }); }
1220
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SpxInputTimeComponent, deps: [{ token: i1$2.ModalController }], target: i0.ɵɵFactoryTarget.Component }); }
1221
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.0.8", 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 }); }
1222
1222
  }
1223
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: SpxInputTimeComponent, decorators: [{
1223
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SpxInputTimeComponent, decorators: [{
1224
1224
  type: Component,
1225
1225
  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"] }]
1226
1226
  }], ctorParameters: () => [{ type: i1$2.ModalController }], propDecorators: { spxName: [{ type: i0.Input, args: [{ isSignal: true, alias: "spxName", required: false }] }], spxAutofocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "spxAutofocus", required: false }] }], spxInputMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "spxInputMode", required: false }] }], spxPattern: [{ type: i0.Input, args: [{ isSignal: true, alias: "spxPattern", required: false }] }], spxSuggestions: [{ type: i0.Input, args: [{ isSignal: true, alias: "spxSuggestions", required: false }] }], spxReadonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "spxReadonly", required: false }] }], spxValidators: [{ type: i0.Input, args: [{ isSignal: true, alias: "spxValidators", required: false }] }], spxCapitalize: [{ type: i0.Input, args: [{ isSignal: true, alias: "spxCapitalize", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }, { type: i0.Output, args: ["valueChange"] }], inputRef: [{ type: i0.ViewChild, args: ['input', { isSignal: true }] }] } });
@@ -1383,8 +1383,8 @@ class SpxInputComponent {
1383
1383
  registerOnTouched(fn) {
1384
1384
  this.onTouched = fn;
1385
1385
  }
1386
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: SpxInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
1387
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: SpxInputComponent, isStandalone: true, selector: "spx-input", inputs: { spxSpeedDial: { classPropertyName: "spxSpeedDial", publicName: "spxSpeedDial", isSignal: true, isRequired: false, transformFunction: null }, spxLabel: { classPropertyName: "spxLabel", publicName: "spxLabel", isSignal: true, isRequired: false, transformFunction: null }, spxMax: { classPropertyName: "spxMax", publicName: "spxMax", isSignal: true, isRequired: false, transformFunction: null }, spxMin: { classPropertyName: "spxMin", publicName: "spxMin", isSignal: true, isRequired: false, transformFunction: null }, spxName: { classPropertyName: "spxName", publicName: "spxName", isSignal: true, isRequired: false, transformFunction: null }, spxReadonly: { classPropertyName: "spxReadonly", publicName: "spxReadonly", isSignal: true, isRequired: false, transformFunction: null }, spxAutocomplete: { classPropertyName: "spxAutocomplete", publicName: "spxAutocomplete", 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 }, spxRequired: { classPropertyName: "spxRequired", publicName: "spxRequired", isSignal: true, isRequired: false, transformFunction: null }, spxSelectMonth: { classPropertyName: "spxSelectMonth", publicName: "spxSelectMonth", isSignal: true, isRequired: false, transformFunction: null }, spxSelectDay: { classPropertyName: "spxSelectDay", publicName: "spxSelectDay", 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 }, spxCompact: { classPropertyName: "spxCompact", publicName: "spxCompact", isSignal: true, isRequired: false, transformFunction: null }, spxShowClear: { classPropertyName: "spxShowClear", publicName: "spxShowClear", isSignal: true, isRequired: false, transformFunction: null }, spxShowSearch: { classPropertyName: "spxShowSearch", publicName: "spxShowSearch", isSignal: true, isRequired: false, transformFunction: null }, spxAlert: { classPropertyName: "spxAlert", publicName: "spxAlert", isSignal: true, isRequired: false, transformFunction: null }, spxShowValidationMessages: { classPropertyName: "spxShowValidationMessages", publicName: "spxShowValidationMessages", isSignal: true, isRequired: false, transformFunction: null }, spxStep: { classPropertyName: "spxStep", publicName: "spxStep", isSignal: true, isRequired: false, transformFunction: null }, spxSuggestions: { classPropertyName: "spxSuggestions", publicName: "spxSuggestions", isSignal: true, isRequired: false, transformFunction: null }, spxType: { classPropertyName: "spxType", publicName: "spxType", 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 }, spxCycleConfig: { classPropertyName: "spxCycleConfig", publicName: "spxCycleConfig", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { spxClear: "spxClear", spxEdit: "spxEdit", spxHelp: "spxHelp", spxSearch: "spxSearch", spxBlur: "spxBlur" }, host: { listeners: { "spxChange": "handleChangeEvent($event)", "focusout": "_handleBlurEvent()" } }, providers: [
1386
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SpxInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
1387
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: SpxInputComponent, isStandalone: true, selector: "spx-input", inputs: { spxSpeedDial: { classPropertyName: "spxSpeedDial", publicName: "spxSpeedDial", isSignal: true, isRequired: false, transformFunction: null }, spxLabel: { classPropertyName: "spxLabel", publicName: "spxLabel", isSignal: true, isRequired: false, transformFunction: null }, spxMax: { classPropertyName: "spxMax", publicName: "spxMax", isSignal: true, isRequired: false, transformFunction: null }, spxMin: { classPropertyName: "spxMin", publicName: "spxMin", isSignal: true, isRequired: false, transformFunction: null }, spxName: { classPropertyName: "spxName", publicName: "spxName", isSignal: true, isRequired: false, transformFunction: null }, spxReadonly: { classPropertyName: "spxReadonly", publicName: "spxReadonly", isSignal: true, isRequired: false, transformFunction: null }, spxAutocomplete: { classPropertyName: "spxAutocomplete", publicName: "spxAutocomplete", 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 }, spxRequired: { classPropertyName: "spxRequired", publicName: "spxRequired", isSignal: true, isRequired: false, transformFunction: null }, spxSelectMonth: { classPropertyName: "spxSelectMonth", publicName: "spxSelectMonth", isSignal: true, isRequired: false, transformFunction: null }, spxSelectDay: { classPropertyName: "spxSelectDay", publicName: "spxSelectDay", 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 }, spxCompact: { classPropertyName: "spxCompact", publicName: "spxCompact", isSignal: true, isRequired: false, transformFunction: null }, spxShowClear: { classPropertyName: "spxShowClear", publicName: "spxShowClear", isSignal: true, isRequired: false, transformFunction: null }, spxShowSearch: { classPropertyName: "spxShowSearch", publicName: "spxShowSearch", isSignal: true, isRequired: false, transformFunction: null }, spxAlert: { classPropertyName: "spxAlert", publicName: "spxAlert", isSignal: true, isRequired: false, transformFunction: null }, spxShowValidationMessages: { classPropertyName: "spxShowValidationMessages", publicName: "spxShowValidationMessages", isSignal: true, isRequired: false, transformFunction: null }, spxStep: { classPropertyName: "spxStep", publicName: "spxStep", isSignal: true, isRequired: false, transformFunction: null }, spxSuggestions: { classPropertyName: "spxSuggestions", publicName: "spxSuggestions", isSignal: true, isRequired: false, transformFunction: null }, spxType: { classPropertyName: "spxType", publicName: "spxType", 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 }, spxCycleConfig: { classPropertyName: "spxCycleConfig", publicName: "spxCycleConfig", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { spxClear: "spxClear", spxEdit: "spxEdit", spxHelp: "spxHelp", spxSearch: "spxSearch", spxBlur: "spxBlur" }, host: { listeners: { "spxChange": "handleChangeEvent($event)", "focusout": "_handleBlurEvent()" } }, providers: [
1388
1388
  {
1389
1389
  provide: NG_VALUE_ACCESSOR,
1390
1390
  useExisting: SpxInputComponent,
@@ -1392,7 +1392,7 @@ class SpxInputComponent {
1392
1392
  }
1393
1393
  ], 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 }, { propertyName: "cycleInput", first: true, predicate: ["spxInputCycle"], 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 [spxName]=\"this.mappedName()\"\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.showInputText()) {\n <spx-input-text\n (valueChange)=\"handleChangeEvent($event)\"\n [spxAutocomplete]=\"this.spxAutocomplete() ? this.spxAutocomplete() : undefined\"\n [spxSpeedDial]=\"this.spxSpeedDial()\"\n [spxAutofocus]=\"this.spxAutofocus()\"\n [spxCapitalize]=\"this.spxCapitalize()\"\n [spxElementId]=\"this.spxElementId()\"\n [spxInputMode]=\"this.spxType() === 'overlaynumber' ? 'numeric' : this.spxInputMode()\"\n [spxName]=\"this.mappedName()\"\n [spxPattern]=\"this.spxType() === 'overlaynumber' ? '[0-9]*' : this.spxPattern()\"\n [spxReadonly]=\"this.mappedReadonly()\"\n [spxSuggestions]=\"this.spxSuggestions()\"\n [spxType]=\"this.spxType()\"\n [spxValidators]=\"this.spxValidators()\"\n [value]=\"value()\"\n #spxInputText\n ></spx-input-text>\n } @if (this.showInputCycle()) {\n <spx-input-cycle\n (valueChange)=\"handleChangeEvent($event)\"\n [spxCycleConfig]=\"this.spxCycleConfig()!\"\n [spxSpeedDial]=\"this.spxSpeedDial()\"\n [spxAutofocus]=\"this.spxAutofocus()\"\n [spxCapitalize]=\"this.spxCapitalize()\"\n [spxElementId]=\"this.spxElementId()\"\n [spxInputMode]=\"this.spxType() === 'cycleNumeric' ? 'numeric' : 'text'\"\n [spxName]=\"this.mappedName()\"\n [spxReadonly]=\"this.mappedReadonly()\"\n [spxType]=\"this.spxType()\"\n [spxValidators]=\"this.spxValidators()\"\n [value]=\"value()\"\n #spxInputText\n ></spx-input-cycle>\n } @if (this.showInputDate()) {\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.mappedReadonly()\"\n [spxSelectDay]=\"this.spxSelectDay()\"\n [spxSelectMonth]=\"this.spxSelectMonth()\"\n [spxValidators]=\"this.spxValidators()\"\n [value]=\"value()\"\n #spxInputDate\n ></spx-input-date>\n } @if (this.showInputFloat()) {\n <spx-input-float\n (valueChange)=\"handleChangeEvent($event)\"\n [spxAutofocus]=\"this.spxAutofocus()\"\n [spxElementId]=\"this.spxElementId()\"\n [spxName]=\"this.mappedName()\"\n [spxReadonly]=\"this.mappedReadonly()\"\n [spxStep]=\"this.spxStep()\"\n [spxValidators]=\"this.spxValidators()\"\n [value]=\"value()\"\n #spxInputFloat\n ></spx-input-float>\n } @if (this.showInputNumber()) {\n <spx-input-number\n (valueChange)=\"handleChangeEvent($event)\"\n [spxAutofocus]=\"this.spxAutofocus()\"\n [spxElementId]=\"this.spxElementId()\"\n [spxInputMode]=\"this.spxInputMode()\"\n [spxName]=\"this.mappedName()\"\n [spxReadonly]=\"this.mappedReadonly()\"\n [spxStep]=\"this.spxStep()\"\n [spxValidators]=\"this.spxValidators()\"\n [value]=\"value()\"\n #spxInputNumber\n ></spx-input-number>\n } @if (this.showInputRadio()) {\n <spx-input-radio\n (valueChange)=\"handleChangeEvent($event)\"\n [spxElementId]=\"this.spxElementId()\"\n [spxName]=\"this.mappedName()\"\n [spxReadonly]=\"this.mappedReadonly()\"\n [spxShowLabel]=\"this.spxShowLabel()\"\n [spxSuggestions]=\"this.spxSuggestions()\"\n [spxValidators]=\"this.spxValidators()\"\n [value]=\"value()\"\n #spxInputRadio\n ></spx-input-radio>\n } @if (this.showInputTime()) {\n <spx-input-time\n (valueChange)=\"handleChangeEvent($event)\"\n [spxName]=\"this.mappedName()\"\n [spxReadonly]=\"this.mappedReadonly()\"\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", "spxName", "spxReadonly", "spxRequired", "spxShowClear", "spxShowEdit", "spxShowHelp", "spxShowLabel", "spxShowSearch", "spxShowValidationMessages", "spxAlert", "spxValue"], outputs: ["spxValueChange", "spxClear", "spxSearch", "spxEdit", "spxHelp", "spxSetIdInParent"] }, { kind: "component", type: SpxInputCycleComponent, selector: "spx-input-cycle", inputs: ["spxSpeedDial", "spxName", "spxAutofocus", "spxAutocomplete", "spxCycleConfig", "spxInputMode", "spxReadonly", "spxValidators", "spxCapitalize", "spxType", "spxWasInternalUpdate", "value", "spxElementId"], outputs: ["valueChange", "completeInput"] }, { 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: ["spxSpeedDial", "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 }); }
1394
1394
  }
1395
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: SpxInputComponent, decorators: [{
1395
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SpxInputComponent, decorators: [{
1396
1396
  type: Component,
1397
1397
  args: [{ selector: 'spx-input', host: {
1398
1398
  '(spxChange)': 'handleChangeEvent($event)'