@softpak/components 19.14.6 → 19.14.8
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.
- package/fesm2022/softpak-components-spx-check-digit.mjs +1 -1
- package/fesm2022/softpak-components-spx-check-digit.mjs.map +1 -1
- package/fesm2022/softpak-components-spx-form-view.mjs +2 -2
- package/fesm2022/softpak-components-spx-form-view.mjs.map +1 -1
- package/fesm2022/softpak-components-spx-inputs.mjs +12 -7
- package/fesm2022/softpak-components-spx-inputs.mjs.map +1 -1
- package/package.json +28 -28
- package/spx-inputs/public-api.d.ts +1 -0
- package/spx-inputs/spx-input-alert-interface.d.ts +5 -0
- package/spx-inputs/spx-input-box/spx-input-box.component.d.ts +5 -1
- package/spx-inputs/spx-input.component.d.ts +3 -1
|
@@ -69,7 +69,7 @@ class SpxCheckDigitComponent {
|
|
|
69
69
|
return formControl._rawValidators;
|
|
70
70
|
}
|
|
71
71
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SpxCheckDigitComponent, deps: [{ token: i1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
72
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: SpxCheckDigitComponent, isStandalone: true, selector: "spx-check-digit", inputs: { txtCheckDigit: "txtCheckDigit", txtContainer: "txtContainer", txtPrefix: "txtPrefix" }, viewQueries: [{ propertyName: "ctrlContainerNumberRef", first: true, predicate: ["ctrlContainerNumberRef"], descendants: true }], ngImport: i0, template: "<form [formGroup]=\"formGroup\" class=\"max-w-lg mx-auto flex flex-col gap-3\">\r\n <spx-input\r\n #ctrlContainerNumberRef\r\n [formControl]=\"ctrlContainerNumber\"\r\n [spxAutofocus]=\"true\"\r\n [spxCapitalize]=\"true\"\r\n [spxLabel]=\"txtContainer\"\r\n [spxPattern]=\"'[0-9]*'\"\r\n [spxRequired]=\"true\"\r\n [spxShowValidationMessages]=\"ctrlContainerNumber && ctrlContainerNumber.errors && ctrlContainerNumber.touched\"\r\n [spxType]=\"inputTypeOverlayNumber\"\r\n [spxValidators]=\"getRawValidators(ctrlContainerNumber)\">\r\n <spx-validate-control [control]=\"ctrlContainerNumber\" [label]=\"txtContainer\"></spx-validate-control>\r\n </spx-input>\r\n <spx-input\r\n [formControl]=\"ctrlContainerPrefix\"\r\n [spxCapitalize]=\"true\"\r\n [spxLabel]=\"txtPrefix\"\r\n [spxRequired]=\"true\"\r\n [spxShowValidationMessages]=\"ctrlContainerPrefix && ctrlContainerPrefix.errors && ctrlContainerPrefix.touched\"\r\n [spxType]=\"inputTypeText\"\r\n [spxValidators]=\"getRawValidators(ctrlContainerPrefix)\">\r\n <spx-validate-control [control]=\"ctrlContainerPrefix\" [label]=\"txtPrefix\"></spx-validate-control>\r\n </spx-input>\r\n @if (ctrlCheckDigit.value) {\r\n <spx-input\r\n [formControl]=\"ctrlCheckDigit\"\r\n [spxLabel]=\"txtCheckDigit\"\r\n [spxReadonly]=\"true\"\r\n [spxType]=\"inputTypeText\">\r\n </spx-input>\r\n }\r\n</form>", 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],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: SpxValidateControlComponent, selector: "spx-validate-control", inputs: ["control", "label", "submitTried"] }, { kind: "component", type: SpxInputComponent, selector: "spx-input", inputs: ["spxLabel", "spxMax", "spxMin", "spxName", "spxReadonly", "spxAutocomplete", "spxAutofocus", "spxInputMode", "spxPattern", "spxRequired", "spxSelectMonth", "spxSelectDay", "spxShowEdit", "spxShowHelp", "spxShowLabel", "spxCompact", "spxShowClear", "spxShowSearch", "spxShowValidationMessages", "spxStep", "spxSuggestions", "spxType", "spxValidators", "spxCapitalize"], outputs: ["spxClear", "spxEdit", "spxHelp", "spxSearch", "spxBlur"] }] }); }
|
|
72
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: SpxCheckDigitComponent, isStandalone: true, selector: "spx-check-digit", inputs: { txtCheckDigit: "txtCheckDigit", txtContainer: "txtContainer", txtPrefix: "txtPrefix" }, viewQueries: [{ propertyName: "ctrlContainerNumberRef", first: true, predicate: ["ctrlContainerNumberRef"], descendants: true }], ngImport: i0, template: "<form [formGroup]=\"formGroup\" class=\"max-w-lg mx-auto flex flex-col gap-3\">\r\n <spx-input\r\n #ctrlContainerNumberRef\r\n [formControl]=\"ctrlContainerNumber\"\r\n [spxAutofocus]=\"true\"\r\n [spxCapitalize]=\"true\"\r\n [spxLabel]=\"txtContainer\"\r\n [spxPattern]=\"'[0-9]*'\"\r\n [spxRequired]=\"true\"\r\n [spxShowValidationMessages]=\"ctrlContainerNumber && ctrlContainerNumber.errors && ctrlContainerNumber.touched\"\r\n [spxType]=\"inputTypeOverlayNumber\"\r\n [spxValidators]=\"getRawValidators(ctrlContainerNumber)\">\r\n <spx-validate-control [control]=\"ctrlContainerNumber\" [label]=\"txtContainer\"></spx-validate-control>\r\n </spx-input>\r\n <spx-input\r\n [formControl]=\"ctrlContainerPrefix\"\r\n [spxCapitalize]=\"true\"\r\n [spxLabel]=\"txtPrefix\"\r\n [spxRequired]=\"true\"\r\n [spxShowValidationMessages]=\"ctrlContainerPrefix && ctrlContainerPrefix.errors && ctrlContainerPrefix.touched\"\r\n [spxType]=\"inputTypeText\"\r\n [spxValidators]=\"getRawValidators(ctrlContainerPrefix)\">\r\n <spx-validate-control [control]=\"ctrlContainerPrefix\" [label]=\"txtPrefix\"></spx-validate-control>\r\n </spx-input>\r\n @if (ctrlCheckDigit.value) {\r\n <spx-input\r\n [formControl]=\"ctrlCheckDigit\"\r\n [spxLabel]=\"txtCheckDigit\"\r\n [spxReadonly]=\"true\"\r\n [spxType]=\"inputTypeText\">\r\n </spx-input>\r\n }\r\n</form>", 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],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: SpxValidateControlComponent, selector: "spx-validate-control", inputs: ["control", "label", "submitTried"] }, { kind: "component", type: SpxInputComponent, selector: "spx-input", inputs: ["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"], outputs: ["spxClear", "spxEdit", "spxHelp", "spxSearch", "spxBlur"] }] }); }
|
|
73
73
|
}
|
|
74
74
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SpxCheckDigitComponent, decorators: [{
|
|
75
75
|
type: Component,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"softpak-components-spx-check-digit.mjs","sources":["../../../../projects/softpak/components/spx-check-digit/spx-check-digit.component.ts","../../../../projects/softpak/components/spx-check-digit/spx-check-digit.component.html","../../../../projects/softpak/components/spx-check-digit/softpak-components-spx-check-digit.ts"],"sourcesContent":["import { Component, Input, ViewChild } from '@angular/core';\r\nimport { FormBuilder, FormControl, FormGroup, FormsModule, ReactiveFormsModule } from '@angular/forms';\r\nimport { Subscription, combineLatest, map, startWith } from 'rxjs';\r\nimport { valuePairToValue, calcCheckDigit } from '@softpak/components/spx-helpers';\r\nimport { SpxInputComponent, SpxInputTypeEnum } from '@softpak/components/spx-inputs';\r\nimport { SpxValidateControlComponent, spxValidatorRequired, spxValidatorMaxLength, spxValidatorMinLength, spxValidatorPattern } from '@softpak/components/spx-validation';\r\n\r\nconst ctrlCheckDigit = 'checkDigit';\r\nconst ctrlContainerNumber = 'containerNumber';\r\nconst ctrlPrefix = 'prefix';\r\n\r\n@Component({\r\n selector: 'spx-check-digit',\r\n templateUrl: './spx-check-digit.component.html',\r\n imports: [\r\n FormsModule,\r\n ReactiveFormsModule,\r\n SpxValidateControlComponent,\r\n SpxInputComponent\r\n ]\r\n})\r\nexport class SpxCheckDigitComponent {\r\n @Input() txtCheckDigit!: string;\r\n @Input() txtContainer!: string;\r\n @Input() txtPrefix!: string;\r\n @ViewChild('ctrlContainerNumberRef') ctrlContainerNumberRef?: SpxInputComponent;\r\n inputTypeOverlayNumber = SpxInputTypeEnum.overlayNumber;\r\n inputTypeText = SpxInputTypeEnum.text;\r\n formGroup: FormGroup;\r\n\r\n get ctrlCheckDigit(): FormControl { return this.formGroup.get(ctrlCheckDigit) as FormControl; }\r\n get ctrlContainerNumber(): FormControl { return this.formGroup.get(ctrlContainerNumber) as FormControl; }\r\n get ctrlContainerPrefix(): FormControl { return this.formGroup.get(ctrlPrefix) as FormControl; }\r\n\r\n private inputChanges?: Subscription;\r\n\r\n constructor(\r\n private readonly formBuilder: FormBuilder,\r\n ) {\r\n this.formGroup = this.formBuilder.group({\r\n [ctrlCheckDigit]: [null, []],\r\n [ctrlContainerNumber]: [null, [\r\n spxValidatorRequired(),\r\n spxValidatorMaxLength(6),\r\n spxValidatorMinLength(6),\r\n spxValidatorPattern(/[0-9]{6}/),\r\n ]],\r\n [ctrlPrefix]: [null, [\r\n spxValidatorRequired(),\r\n spxValidatorMaxLength(4),\r\n spxValidatorMinLength(4),\r\n spxValidatorPattern(/[a-zA-Z]{4}/),\r\n ]],\r\n })\r\n }\r\n\r\n ngOnInit(): void {\r\n this.inputChanges = combineLatest([\r\n this.ctrlContainerNumber.valueChanges.pipe(startWith(this.ctrlContainerNumber.value)),\r\n this.ctrlContainerPrefix.valueChanges.pipe(startWith(this.ctrlContainerPrefix.value)),\r\n ])\r\n .pipe(map(([containerNumber$, prefix$]) => ({\r\n containerNumber: containerNumber$,\r\n prefix: prefix$\r\n })))\r\n .subscribe((v) => {\r\n if (this.ctrlContainerNumber.invalid || this.ctrlContainerPrefix.invalid) {\r\n this.ctrlCheckDigit.setValue(null, { emitEvent: false });\r\n } else {\r\n const prefix = valuePairToValue(this.ctrlContainerPrefix.value);\r\n const containerNumber = valuePairToValue(this.ctrlContainerNumber.value);\r\n const checkDigit = calcCheckDigit(`${prefix}${containerNumber}`);\r\n this.ctrlCheckDigit.setValue({ value: checkDigit }, { emitEvent: false });\r\n }\r\n });\r\n }\r\n\r\n ngAfterViewInit(): void {\r\n setTimeout(() => {\r\n this.ctrlContainerNumberRef?.setFocusIn(); \r\n }, 250);\r\n }\r\n\r\n ngOnDestroy(): void {\r\n if (this.inputChanges) {\r\n this.inputChanges.unsubscribe();\r\n }\r\n }\r\n\r\n getRawValidators(formControl: FormControl) {\r\n return (formControl as any)._rawValidators;\r\n }\r\n}\r\n","<form [formGroup]=\"formGroup\" class=\"max-w-lg mx-auto flex flex-col gap-3\">\r\n <spx-input\r\n #ctrlContainerNumberRef\r\n [formControl]=\"ctrlContainerNumber\"\r\n [spxAutofocus]=\"true\"\r\n [spxCapitalize]=\"true\"\r\n [spxLabel]=\"txtContainer\"\r\n [spxPattern]=\"'[0-9]*'\"\r\n [spxRequired]=\"true\"\r\n [spxShowValidationMessages]=\"ctrlContainerNumber && ctrlContainerNumber.errors && ctrlContainerNumber.touched\"\r\n [spxType]=\"inputTypeOverlayNumber\"\r\n [spxValidators]=\"getRawValidators(ctrlContainerNumber)\">\r\n <spx-validate-control [control]=\"ctrlContainerNumber\" [label]=\"txtContainer\"></spx-validate-control>\r\n </spx-input>\r\n <spx-input\r\n [formControl]=\"ctrlContainerPrefix\"\r\n [spxCapitalize]=\"true\"\r\n [spxLabel]=\"txtPrefix\"\r\n [spxRequired]=\"true\"\r\n [spxShowValidationMessages]=\"ctrlContainerPrefix && ctrlContainerPrefix.errors && ctrlContainerPrefix.touched\"\r\n [spxType]=\"inputTypeText\"\r\n [spxValidators]=\"getRawValidators(ctrlContainerPrefix)\">\r\n <spx-validate-control [control]=\"ctrlContainerPrefix\" [label]=\"txtPrefix\"></spx-validate-control>\r\n </spx-input>\r\n @if (ctrlCheckDigit.value) {\r\n <spx-input\r\n [formControl]=\"ctrlCheckDigit\"\r\n [spxLabel]=\"txtCheckDigit\"\r\n [spxReadonly]=\"true\"\r\n [spxType]=\"inputTypeText\">\r\n </spx-input>\r\n }\r\n</form>","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"softpak-components-spx-check-digit.mjs","sources":["../../../../projects/softpak/components/spx-check-digit/spx-check-digit.component.ts","../../../../projects/softpak/components/spx-check-digit/spx-check-digit.component.html","../../../../projects/softpak/components/spx-check-digit/softpak-components-spx-check-digit.ts"],"sourcesContent":["import { Component, Input, ViewChild } from '@angular/core';\r\nimport { FormBuilder, FormControl, FormGroup, FormsModule, ReactiveFormsModule } from '@angular/forms';\r\nimport { Subscription, combineLatest, map, startWith } from 'rxjs';\r\nimport { valuePairToValue, calcCheckDigit } from '@softpak/components/spx-helpers';\r\nimport { SpxInputComponent, SpxInputTypeEnum } from '@softpak/components/spx-inputs';\r\nimport { SpxValidateControlComponent, spxValidatorRequired, spxValidatorMaxLength, spxValidatorMinLength, spxValidatorPattern } from '@softpak/components/spx-validation';\r\n\r\nconst ctrlCheckDigit = 'checkDigit';\r\nconst ctrlContainerNumber = 'containerNumber';\r\nconst ctrlPrefix = 'prefix';\r\n\r\n@Component({\r\n selector: 'spx-check-digit',\r\n templateUrl: './spx-check-digit.component.html',\r\n imports: [\r\n FormsModule,\r\n ReactiveFormsModule,\r\n SpxValidateControlComponent,\r\n SpxInputComponent\r\n ]\r\n})\r\nexport class SpxCheckDigitComponent {\r\n @Input() txtCheckDigit!: string;\r\n @Input() txtContainer!: string;\r\n @Input() txtPrefix!: string;\r\n @ViewChild('ctrlContainerNumberRef') ctrlContainerNumberRef?: SpxInputComponent;\r\n inputTypeOverlayNumber = SpxInputTypeEnum.overlayNumber;\r\n inputTypeText = SpxInputTypeEnum.text;\r\n formGroup: FormGroup;\r\n\r\n get ctrlCheckDigit(): FormControl { return this.formGroup.get(ctrlCheckDigit) as FormControl; }\r\n get ctrlContainerNumber(): FormControl { return this.formGroup.get(ctrlContainerNumber) as FormControl; }\r\n get ctrlContainerPrefix(): FormControl { return this.formGroup.get(ctrlPrefix) as FormControl; }\r\n\r\n private inputChanges?: Subscription;\r\n\r\n constructor(\r\n private readonly formBuilder: FormBuilder,\r\n ) {\r\n this.formGroup = this.formBuilder.group({\r\n [ctrlCheckDigit]: [null, []],\r\n [ctrlContainerNumber]: [null, [\r\n spxValidatorRequired(),\r\n spxValidatorMaxLength(6),\r\n spxValidatorMinLength(6),\r\n spxValidatorPattern(/[0-9]{6}/),\r\n ]],\r\n [ctrlPrefix]: [null, [\r\n spxValidatorRequired(),\r\n spxValidatorMaxLength(4),\r\n spxValidatorMinLength(4),\r\n spxValidatorPattern(/[a-zA-Z]{4}/),\r\n ]],\r\n })\r\n }\r\n\r\n ngOnInit(): void {\r\n this.inputChanges = combineLatest([\r\n this.ctrlContainerNumber.valueChanges.pipe(startWith(this.ctrlContainerNumber.value)),\r\n this.ctrlContainerPrefix.valueChanges.pipe(startWith(this.ctrlContainerPrefix.value)),\r\n ])\r\n .pipe(map(([containerNumber$, prefix$]) => ({\r\n containerNumber: containerNumber$,\r\n prefix: prefix$\r\n })))\r\n .subscribe((v) => {\r\n if (this.ctrlContainerNumber.invalid || this.ctrlContainerPrefix.invalid) {\r\n this.ctrlCheckDigit.setValue(null, { emitEvent: false });\r\n } else {\r\n const prefix = valuePairToValue(this.ctrlContainerPrefix.value);\r\n const containerNumber = valuePairToValue(this.ctrlContainerNumber.value);\r\n const checkDigit = calcCheckDigit(`${prefix}${containerNumber}`);\r\n this.ctrlCheckDigit.setValue({ value: checkDigit }, { emitEvent: false });\r\n }\r\n });\r\n }\r\n\r\n ngAfterViewInit(): void {\r\n setTimeout(() => {\r\n this.ctrlContainerNumberRef?.setFocusIn(); \r\n }, 250);\r\n }\r\n\r\n ngOnDestroy(): void {\r\n if (this.inputChanges) {\r\n this.inputChanges.unsubscribe();\r\n }\r\n }\r\n\r\n getRawValidators(formControl: FormControl) {\r\n return (formControl as any)._rawValidators;\r\n }\r\n}\r\n","<form [formGroup]=\"formGroup\" class=\"max-w-lg mx-auto flex flex-col gap-3\">\r\n <spx-input\r\n #ctrlContainerNumberRef\r\n [formControl]=\"ctrlContainerNumber\"\r\n [spxAutofocus]=\"true\"\r\n [spxCapitalize]=\"true\"\r\n [spxLabel]=\"txtContainer\"\r\n [spxPattern]=\"'[0-9]*'\"\r\n [spxRequired]=\"true\"\r\n [spxShowValidationMessages]=\"ctrlContainerNumber && ctrlContainerNumber.errors && ctrlContainerNumber.touched\"\r\n [spxType]=\"inputTypeOverlayNumber\"\r\n [spxValidators]=\"getRawValidators(ctrlContainerNumber)\">\r\n <spx-validate-control [control]=\"ctrlContainerNumber\" [label]=\"txtContainer\"></spx-validate-control>\r\n </spx-input>\r\n <spx-input\r\n [formControl]=\"ctrlContainerPrefix\"\r\n [spxCapitalize]=\"true\"\r\n [spxLabel]=\"txtPrefix\"\r\n [spxRequired]=\"true\"\r\n [spxShowValidationMessages]=\"ctrlContainerPrefix && ctrlContainerPrefix.errors && ctrlContainerPrefix.touched\"\r\n [spxType]=\"inputTypeText\"\r\n [spxValidators]=\"getRawValidators(ctrlContainerPrefix)\">\r\n <spx-validate-control [control]=\"ctrlContainerPrefix\" [label]=\"txtPrefix\"></spx-validate-control>\r\n </spx-input>\r\n @if (ctrlCheckDigit.value) {\r\n <spx-input\r\n [formControl]=\"ctrlCheckDigit\"\r\n [spxLabel]=\"txtCheckDigit\"\r\n [spxReadonly]=\"true\"\r\n [spxType]=\"inputTypeText\">\r\n </spx-input>\r\n }\r\n</form>","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
|
|
@@ -94,7 +94,7 @@ class SpxAutocompleteSearchComponent {
|
|
|
94
94
|
});
|
|
95
95
|
}
|
|
96
96
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SpxAutocompleteSearchComponent, deps: [{ token: i1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
97
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: SpxAutocompleteSearchComponent, isStandalone: true, selector: "spx-autocomplete-search", inputs: { spxSuggestions: "spxSuggestions", spxField: "spxField", txtOptions: "txtOptions", txtQuery: "txtQuery", txtSubmit: "txtSubmit", spxValuePair: "spxValuePair" }, outputs: { spxCancel: "spxCancel", spxSearch: "spxSearch", spxSubmit: "spxSubmit" }, ngImport: i0, template: "<form class=\"bg-black fixed pt-16 z-50 top-0 left-0 right-0 bottom-0\" [formGroup]=\"formGroup\" (ngSubmit)=\"onSubmit()\">\r\n <div class=\"h-full w-full px-3 flex flex-col gap-3\">\r\n <div class=\"grow flex flex-col gap-3 overflow-y-auto\">\r\n <spx-input [formControl]=\"ctrlQuery\" [spxLabel]=\"txtQuery\" [spxType]=\"inputTypeText\">\r\n </spx-input>\r\n <spx-input [formControl]=\"ctrlOptions\" [spxLabel]=\"txtOptions\" [spxSuggestions]=\"spxSuggestions\"\r\n [spxType]=\"inputTypeRadio\">\r\n </spx-input>\r\n </div>\r\n <div class=\"py-3 flex flex-col gap-3\">\r\n <spx-button [spxFullWidth]=\"true\" [spxSeverity]=\"SpxSeverity.success\">\r\n Save\r\n </spx-button>\r\n <spx-button [spxFullWidth]=\"true\" [spxSeverity]=\"SpxSeverity.error\" [spxType]=\"'button'\" (spxClick)=\"onCancel()\">\r\n Cancel\r\n </spx-button>\r\n </div>\r\n </div>\r\n</form>", 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],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"], outputs: ["spxClick"] }, { kind: "component", type: SpxInputComponent, selector: "spx-input", inputs: ["spxLabel", "spxMax", "spxMin", "spxName", "spxReadonly", "spxAutocomplete", "spxAutofocus", "spxInputMode", "spxPattern", "spxRequired", "spxSelectMonth", "spxSelectDay", "spxShowEdit", "spxShowHelp", "spxShowLabel", "spxCompact", "spxShowClear", "spxShowSearch", "spxShowValidationMessages", "spxStep", "spxSuggestions", "spxType", "spxValidators", "spxCapitalize"], outputs: ["spxClear", "spxEdit", "spxHelp", "spxSearch", "spxBlur"] }] }); }
|
|
97
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: SpxAutocompleteSearchComponent, isStandalone: true, selector: "spx-autocomplete-search", inputs: { spxSuggestions: "spxSuggestions", spxField: "spxField", txtOptions: "txtOptions", txtQuery: "txtQuery", txtSubmit: "txtSubmit", spxValuePair: "spxValuePair" }, outputs: { spxCancel: "spxCancel", spxSearch: "spxSearch", spxSubmit: "spxSubmit" }, ngImport: i0, template: "<form class=\"bg-black fixed pt-16 z-50 top-0 left-0 right-0 bottom-0\" [formGroup]=\"formGroup\" (ngSubmit)=\"onSubmit()\">\r\n <div class=\"h-full w-full px-3 flex flex-col gap-3\">\r\n <div class=\"grow flex flex-col gap-3 overflow-y-auto\">\r\n <spx-input [formControl]=\"ctrlQuery\" [spxLabel]=\"txtQuery\" [spxType]=\"inputTypeText\">\r\n </spx-input>\r\n <spx-input [formControl]=\"ctrlOptions\" [spxLabel]=\"txtOptions\" [spxSuggestions]=\"spxSuggestions\"\r\n [spxType]=\"inputTypeRadio\">\r\n </spx-input>\r\n </div>\r\n <div class=\"py-3 flex flex-col gap-3\">\r\n <spx-button [spxFullWidth]=\"true\" [spxSeverity]=\"SpxSeverity.success\">\r\n Save\r\n </spx-button>\r\n <spx-button [spxFullWidth]=\"true\" [spxSeverity]=\"SpxSeverity.error\" [spxType]=\"'button'\" (spxClick)=\"onCancel()\">\r\n Cancel\r\n </spx-button>\r\n </div>\r\n </div>\r\n</form>", 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],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"], outputs: ["spxClick"] }, { kind: "component", type: SpxInputComponent, selector: "spx-input", inputs: ["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"], outputs: ["spxClear", "spxEdit", "spxHelp", "spxSearch", "spxBlur"] }] }); }
|
|
98
98
|
}
|
|
99
99
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SpxAutocompleteSearchComponent, decorators: [{
|
|
100
100
|
type: Component,
|
|
@@ -214,7 +214,7 @@ class SpxFormViewComponent {
|
|
|
214
214
|
this.typeOverlayNumber = SpxInputTypeEnum.overlayNumber;
|
|
215
215
|
}
|
|
216
216
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SpxFormViewComponent, deps: [{ token: i1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
217
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", 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) {\r\n <spx-autocomplete-search\r\n [spxField]=\"autocompleteField\"\r\n [spxSuggestions]=\"this.spxSuggestions()[autocompleteField.key]\"\r\n [spxValuePair]=\"$any(this.spxFormGroup().get(autocompleteField.key)).value\"\r\n [txtOptions]=\"'Options'\"\r\n [txtQuery]=\"'Query'\"\r\n [txtSubmit]=\"'Save'\"\r\n (spxCancel)=\"onAutocompleteCancel()\"\r\n (spxSearch)=\"onAutocompleteSearch($event)\"\r\n (spxSubmit)=\"onAutocompleteSave($event)\">\r\n </spx-autocomplete-search>\r\n}\r\n<div class=\"flex flex-col gap-3\">\r\n @for (spxSection of spxForm().sections; track spxSection; let spxSectionIndex = $index) {\r\n <spx-form-section\r\n [spxShowTitle]=\"!spxSection.showTitle || spxSection.showTitle()\"\r\n [spxIndex]=\"spxSectionIndex + 1\"\r\n [spxTitle]=\"spxSection.title ? (spxSection.title() | translate | capitalize) : undefined\">\r\n @for (spxField of spxSection.fields; track spxField; let spxFieldIndex = $index) {\r\n @if (spxField.show === undefined || spxField.show()) {\r\n @if (spxField.type() === typeButton) {\r\n <spx-button\r\n [spxFullWidth]=\"true\"\r\n [spxSeverity]=\"spxField.severity ? spxField.severity() : undefined\"\r\n [spxType]=\"'button'\"\r\n (spxClick)=\"onClick(spxField)\"\r\n >{{ (spxField.label ? spxField.label() : spxField.key) | translate | capitalize }}</spx-button>\r\n }\r\n @if (spxField.type() === typeOverlay || spxField.type() === typeOverlayNumber || spxField.type() === typeFloat || spxField.type() === typeNumber || spxField.type() === typeText || spxField.type() === typeAutocomplete || spxField.type() === typeNumericKeyboard) {\r\n <spx-input\r\n [formControl]=\"$any(this.spxFormGroup().get(spxField.key))\"\r\n [spxAutofocus]=\"spxField.autofocus ? spxField.autofocus() : false\"\r\n [spxCapitalize]=\"spxField.capitalize ? spxField.capitalize() : false\"\r\n [spxLabel]=\"(spxField.label ? spxField.label() : spxField.key) | translate | capitalize\"\r\n [spxName]=\"spxField.key\"\r\n [spxPattern]=\"spxField.type() === typeNumericKeyboard ? '\\\\d*' : undefined\"\r\n [spxReadonly]=\"spxField.readonly ? spxField.readonly() : false\"\r\n [spxRequired]=\"hasRequiredField(this.spxFormGroup().get(spxField.key)!)\"\r\n [spxShowSearch]=\"spxField.type() === typeAutocomplete\"\r\n [spxShowHelp]=\"false\"\r\n [spxShowValidationMessages]=\"this.spxFormGroup().get(spxField.key)! && this.spxFormGroup().get(spxField.key)!.errors && this.spxFormGroup().get(spxField.key)!.touched\"\r\n [spxStep]=\"spxField.step ? spxField.step() : undefined\"\r\n [spxType]=\"spxField.type()\"\r\n [spxValidators]=\"getRawValidators(this.spxFormGroup().get(spxField.key)!)\"\r\n [spxSuggestions]=\"spxField.suggestionsFixed ? spxField.suggestionsFixed() : this.spxSuggestions()[spxField.key]\"\r\n (spxBlur)=\"onBlur(spxField)\"\r\n (spxSearch)=\"onSearch(spxField)\">\r\n <spx-validate-control [control]=\"$any(this.spxFormGroup().get(spxField.key))\" [label]=\"(spxField.label ? spxField.label() : spxField.key)| translate | capitalize\"></spx-validate-control>\r\n </spx-input>\r\n }\r\n @if (spxField.type() === typeRadio) {\r\n <spx-input\r\n [formControl]=\"$any(this.spxFormGroup().get(spxField.key))\"\r\n [spxLabel]=\"(spxField.label ? spxField.label() : spxField.key) | translate | capitalize\"\r\n [spxName]=\"spxField.key\"\r\n [spxReadonly]=\"spxField.readonly ? spxField.readonly() : false\"\r\n [spxRequired]=\"hasRequiredField(this.spxFormGroup().get(spxField.key)!)\"\r\n [spxShowHelp]=\"false\"\r\n [spxShowValidationMessages]=\"this.spxFormGroup().get(spxField.key)! && this.spxFormGroup().get(spxField.key)!.errors && this.spxFormGroup().get(spxField.key)!.touched\"\r\n [spxSuggestions]=\"spxField.suggestionsFixed ? spxField.suggestionsFixed() : this.spxSuggestions()[spxField.key]\"\r\n [spxType]=\"typeRadio\"\r\n [spxValidators]=\"getRawValidators(this.spxFormGroup().get(spxField.key)!)\">\r\n <spx-validate-control [control]=\"$any(this.spxFormGroup().get(spxField.key))\" [label]=\"(spxField.label ? spxField.label() : spxField.key) | translate | capitalize\"></spx-validate-control>\r\n </spx-input>\r\n }\r\n }\r\n \r\n }\r\n </spx-form-section>\r\n }\r\n\r\n @for (spxButton of spxForm().buttons; track spxButton) {\r\n <spx-button\r\n [spxFullWidth]=\"true\"\r\n [spxSeverity]=\"spxButton.severity\"\r\n [spxType]=\"spxButton.type\"\r\n (spxClick)=\"spxButton.onClick ? spxButton.onClick() : undefined\">\r\n {{ ((spxButton && spxButton.label) ? spxButton.label() : '') | translate | capitalize }}\r\n </spx-button>\r\n }\r\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"], outputs: ["spxClick"] }, { kind: "pipe", type: SpxCapitalizePipe, name: "capitalize" }, { kind: "component", type: SpxFormSectionComponent, selector: "spx-form-section", inputs: ["spxIndex", "spxIndexSecondary", "spxTitle", "spxShowTitle"] }, { kind: "component", type: SpxInputComponent, selector: "spx-input", inputs: ["spxLabel", "spxMax", "spxMin", "spxName", "spxReadonly", "spxAutocomplete", "spxAutofocus", "spxInputMode", "spxPattern", "spxRequired", "spxSelectMonth", "spxSelectDay", "spxShowEdit", "spxShowHelp", "spxShowLabel", "spxCompact", "spxShowClear", "spxShowSearch", "spxShowValidationMessages", "spxStep", "spxSuggestions", "spxType", "spxValidators", "spxCapitalize"], outputs: ["spxClear", "spxEdit", "spxHelp", "spxSearch", "spxBlur"] }, { kind: "component", type: SpxValidateControlComponent, selector: "spx-validate-control", inputs: ["control", "label", "submitTried"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
217
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", 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) {\r\n <spx-autocomplete-search\r\n [spxField]=\"autocompleteField\"\r\n [spxSuggestions]=\"this.spxSuggestions()[autocompleteField.key]\"\r\n [spxValuePair]=\"$any(this.spxFormGroup().get(autocompleteField.key)).value\"\r\n [txtOptions]=\"'Options'\"\r\n [txtQuery]=\"'Query'\"\r\n [txtSubmit]=\"'Save'\"\r\n (spxCancel)=\"onAutocompleteCancel()\"\r\n (spxSearch)=\"onAutocompleteSearch($event)\"\r\n (spxSubmit)=\"onAutocompleteSave($event)\">\r\n </spx-autocomplete-search>\r\n}\r\n<div class=\"flex flex-col gap-3\">\r\n @for (spxSection of spxForm().sections; track spxSection; let spxSectionIndex = $index) {\r\n <spx-form-section\r\n [spxShowTitle]=\"!spxSection.showTitle || spxSection.showTitle()\"\r\n [spxIndex]=\"spxSectionIndex + 1\"\r\n [spxTitle]=\"spxSection.title ? (spxSection.title() | translate | capitalize) : undefined\">\r\n @for (spxField of spxSection.fields; track spxField; let spxFieldIndex = $index) {\r\n @if (spxField.show === undefined || spxField.show()) {\r\n @if (spxField.type() === typeButton) {\r\n <spx-button\r\n [spxFullWidth]=\"true\"\r\n [spxSeverity]=\"spxField.severity ? spxField.severity() : undefined\"\r\n [spxType]=\"'button'\"\r\n (spxClick)=\"onClick(spxField)\"\r\n >{{ (spxField.label ? spxField.label() : spxField.key) | translate | capitalize }}</spx-button>\r\n }\r\n @if (spxField.type() === typeOverlay || spxField.type() === typeOverlayNumber || spxField.type() === typeFloat || spxField.type() === typeNumber || spxField.type() === typeText || spxField.type() === typeAutocomplete || spxField.type() === typeNumericKeyboard) {\r\n <spx-input\r\n [formControl]=\"$any(this.spxFormGroup().get(spxField.key))\"\r\n [spxAutofocus]=\"spxField.autofocus ? spxField.autofocus() : false\"\r\n [spxCapitalize]=\"spxField.capitalize ? spxField.capitalize() : false\"\r\n [spxLabel]=\"(spxField.label ? spxField.label() : spxField.key) | translate | capitalize\"\r\n [spxName]=\"spxField.key\"\r\n [spxPattern]=\"spxField.type() === typeNumericKeyboard ? '\\\\d*' : undefined\"\r\n [spxReadonly]=\"spxField.readonly ? spxField.readonly() : false\"\r\n [spxRequired]=\"hasRequiredField(this.spxFormGroup().get(spxField.key)!)\"\r\n [spxShowSearch]=\"spxField.type() === typeAutocomplete\"\r\n [spxShowHelp]=\"false\"\r\n [spxShowValidationMessages]=\"this.spxFormGroup().get(spxField.key)! && this.spxFormGroup().get(spxField.key)!.errors && this.spxFormGroup().get(spxField.key)!.touched\"\r\n [spxStep]=\"spxField.step ? spxField.step() : undefined\"\r\n [spxType]=\"spxField.type()\"\r\n [spxValidators]=\"getRawValidators(this.spxFormGroup().get(spxField.key)!)\"\r\n [spxSuggestions]=\"spxField.suggestionsFixed ? spxField.suggestionsFixed() : this.spxSuggestions()[spxField.key]\"\r\n (spxBlur)=\"onBlur(spxField)\"\r\n (spxSearch)=\"onSearch(spxField)\">\r\n <spx-validate-control [control]=\"$any(this.spxFormGroup().get(spxField.key))\" [label]=\"(spxField.label ? spxField.label() : spxField.key)| translate | capitalize\"></spx-validate-control>\r\n </spx-input>\r\n }\r\n @if (spxField.type() === typeRadio) {\r\n <spx-input\r\n [formControl]=\"$any(this.spxFormGroup().get(spxField.key))\"\r\n [spxLabel]=\"(spxField.label ? spxField.label() : spxField.key) | translate | capitalize\"\r\n [spxName]=\"spxField.key\"\r\n [spxReadonly]=\"spxField.readonly ? spxField.readonly() : false\"\r\n [spxRequired]=\"hasRequiredField(this.spxFormGroup().get(spxField.key)!)\"\r\n [spxShowHelp]=\"false\"\r\n [spxShowValidationMessages]=\"this.spxFormGroup().get(spxField.key)! && this.spxFormGroup().get(spxField.key)!.errors && this.spxFormGroup().get(spxField.key)!.touched\"\r\n [spxSuggestions]=\"spxField.suggestionsFixed ? spxField.suggestionsFixed() : this.spxSuggestions()[spxField.key]\"\r\n [spxType]=\"typeRadio\"\r\n [spxValidators]=\"getRawValidators(this.spxFormGroup().get(spxField.key)!)\">\r\n <spx-validate-control [control]=\"$any(this.spxFormGroup().get(spxField.key))\" [label]=\"(spxField.label ? spxField.label() : spxField.key) | translate | capitalize\"></spx-validate-control>\r\n </spx-input>\r\n }\r\n }\r\n \r\n }\r\n </spx-form-section>\r\n }\r\n\r\n @for (spxButton of spxForm().buttons; track spxButton) {\r\n <spx-button\r\n [spxFullWidth]=\"true\"\r\n [spxSeverity]=\"spxButton.severity\"\r\n [spxType]=\"spxButton.type\"\r\n (spxClick)=\"spxButton.onClick ? spxButton.onClick() : undefined\">\r\n {{ ((spxButton && spxButton.label) ? spxButton.label() : '') | translate | capitalize }}\r\n </spx-button>\r\n }\r\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"], outputs: ["spxClick"] }, { kind: "pipe", type: SpxCapitalizePipe, name: "capitalize" }, { kind: "component", type: SpxFormSectionComponent, selector: "spx-form-section", inputs: ["spxIndex", "spxIndexSecondary", "spxTitle", "spxShowTitle"] }, { kind: "component", type: SpxInputComponent, selector: "spx-input", inputs: ["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"], outputs: ["spxClear", "spxEdit", "spxHelp", "spxSearch", "spxBlur"] }, { kind: "component", type: SpxValidateControlComponent, selector: "spx-validate-control", inputs: ["control", "label", "submitTried"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
218
218
|
}
|
|
219
219
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SpxFormViewComponent, decorators: [{
|
|
220
220
|
type: Component,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"softpak-components-spx-form-view.mjs","sources":["../../../../projects/softpak/components/spx-form-view/spx-form-button-type.enum.ts","../../../../projects/softpak/components/spx-form-view/spx-autocomplete-search.component.ts","../../../../projects/softpak/components/spx-form-view/spx-autocomplete-search.component.html","../../../../projects/softpak/components/spx-form-view/spx-form-view.component.ts","../../../../projects/softpak/components/spx-form-view/spx-form-view.component.html","../../../../projects/softpak/components/spx-form-view/softpak-components-spx-form-view.ts"],"sourcesContent":["export enum SpxFormButtonTypeEnum {\r\n button = 'button',\r\n submit = 'submit',\r\n}\r\n","import { Component, EventEmitter, Input, OnDestroy, OnInit, Output } from '@angular/core';\r\nimport { FormBuilder, FormControl, FormGroup, FormsModule, ReactiveFormsModule } from '@angular/forms';\r\nimport { Subscription, debounceTime } from 'rxjs';\r\n\r\nimport { SpxFormFieldI } from './spx-form-field.interface';\r\nimport { SpxFormSectionI } from './spx-form-section.interface';\r\nimport { SpxButtonComponent } from '@softpak/components/spx-button';\r\nimport { SpxSeverityEnum } from '@softpak/components/spx-helpers';\r\nimport { SpxInputComponent, SpxValuePair, SpxInputTypeEnum } from '@softpak/components/spx-inputs';\r\n\r\nexport const sectionAutocompleteSearch = 'autocompleteSearch';\r\nexport const ctrlQuery = 'query';\r\nexport const ctrlOptions = 'options';\r\n\r\n@Component({\r\n selector: 'spx-autocomplete-search',\r\n templateUrl: './spx-autocomplete-search.component.html',\r\n imports: [\r\n FormsModule,\r\n ReactiveFormsModule,\r\n SpxButtonComponent,\r\n SpxInputComponent,\r\n ]\r\n})\r\nexport class SpxAutocompleteSearchComponent implements OnInit, OnDestroy {\r\n formGroup!: FormGroup;\r\n @Input() spxSuggestions: SpxValuePair<any>[] = [];\r\n @Input() spxField!: SpxFormFieldI;\r\n @Input() txtOptions!: string;\r\n @Input() txtQuery!: string;\r\n @Input() txtSubmit!: string;\r\n @Input() spxValuePair!: SpxValuePair<any>;\r\n @Output() spxCancel: EventEmitter<void> = new EventEmitter<void>();\r\n @Output() spxSearch: EventEmitter<SpxValuePair<any>> = new EventEmitter<SpxValuePair<any>>(); \r\n @Output() spxSubmit: EventEmitter<SpxValuePair<any>> = new EventEmitter<SpxValuePair<any>>();\r\n inputTypeRadio = SpxInputTypeEnum.radio;\r\n inputTypeText = SpxInputTypeEnum.text;\r\n SpxSeverity = SpxSeverityEnum;\r\n \r\n sections: SpxFormSectionI[] = [\r\n {\r\n key: sectionAutocompleteSearch,\r\n showTitle: () => false,\r\n fields: [\r\n {\r\n key: ctrlQuery,\r\n type: () => SpxInputTypeEnum.text,\r\n label: () => this.txtQuery,\r\n capitalize: () => true,\r\n },\r\n {\r\n key: ctrlOptions,\r\n type: () => SpxInputTypeEnum.radio,\r\n label: () => this.txtOptions,\r\n },\r\n ]\r\n }\r\n ];\r\n\r\n get ctrlQuery(): FormControl { return this.formGroup.get(ctrlQuery) as FormControl; }\r\n get ctrlOptions(): FormControl { return this.formGroup.get(ctrlOptions) as FormControl; }\r\n\r\n private subSelection?: Subscription;\r\n private subQuery?: Subscription;\r\n\r\n constructor(readonly formBuilder: FormBuilder) {\r\n this.createForm();\r\n }\r\n\r\n ngOnInit(): void {\r\n this.listenToSelection();\r\n this.listenToQuery();\r\n this.ctrlQuery.setValue(this.spxValuePair, { emitEvent: false });\r\n this.spxSearch.emit(this.spxValuePair);\r\n }\r\n\r\n ngOnDestroy(): void {\r\n if (this.subSelection) {\r\n this.subSelection.unsubscribe();\r\n }\r\n if (this.subQuery) {\r\n this.subQuery.unsubscribe();\r\n }\r\n }\r\n\r\n private createForm(): void {\r\n this.formGroup = this.formBuilder.group({\r\n [ctrlQuery]: [null],\r\n [ctrlOptions]: [null],\r\n });\r\n }\r\n\r\n getRawValidators(formControl: FormControl) {\r\n return (formControl as any)._rawValidators;\r\n }\r\n\r\n onCancel(): void {\r\n this.spxCancel.emit();\r\n }\r\n \r\n onSubmit(): void {\r\n this.spxSubmit.emit(this.ctrlQuery.value);\r\n }\r\n\r\n private listenToQuery(): void {\r\n this.subQuery = this.ctrlQuery.valueChanges.pipe(debounceTime(500)).subscribe(valuePair => {\r\n this.spxSearch.emit(valuePair);\r\n });\r\n }\r\n\r\n private listenToSelection(): void {\r\n this.subSelection = this.ctrlOptions.valueChanges.subscribe(valuePair => {\r\n this.ctrlQuery.setValue(valuePair);\r\n });\r\n }\r\n}\r\n","<form class=\"bg-black fixed pt-16 z-50 top-0 left-0 right-0 bottom-0\" [formGroup]=\"formGroup\" (ngSubmit)=\"onSubmit()\">\r\n <div class=\"h-full w-full px-3 flex flex-col gap-3\">\r\n <div class=\"grow flex flex-col gap-3 overflow-y-auto\">\r\n <spx-input [formControl]=\"ctrlQuery\" [spxLabel]=\"txtQuery\" [spxType]=\"inputTypeText\">\r\n </spx-input>\r\n <spx-input [formControl]=\"ctrlOptions\" [spxLabel]=\"txtOptions\" [spxSuggestions]=\"spxSuggestions\"\r\n [spxType]=\"inputTypeRadio\">\r\n </spx-input>\r\n </div>\r\n <div class=\"py-3 flex flex-col gap-3\">\r\n <spx-button [spxFullWidth]=\"true\" [spxSeverity]=\"SpxSeverity.success\">\r\n Save\r\n </spx-button>\r\n <spx-button [spxFullWidth]=\"true\" [spxSeverity]=\"SpxSeverity.error\" [spxType]=\"'button'\" (spxClick)=\"onCancel()\">\r\n Cancel\r\n </spx-button>\r\n </div>\r\n </div>\r\n</form>","import { ChangeDetectionStrategy, Component, ElementRef, input, output, viewChildren } from '@angular/core';\r\nimport { SpxFormSectionI } from './spx-form-section.interface';\r\nimport { AbstractControl, FormBuilder, FormGroup, FormsModule, ReactiveFormsModule } from '@angular/forms';\r\nimport { SpxFormFieldI } from './spx-form-field.interface';\r\nimport { SpxAutocompleteSearchComponent } from './spx-autocomplete-search.component';\r\nimport { TranslateModule } from '@ngx-translate/core';\r\nimport { SpxFormI } from './spx-form.interface';\r\nimport { SpxButtonComponent } from '@softpak/components/spx-button';\r\nimport { SpxCapitalizePipe } from '@softpak/components/spx-capitalize';\r\nimport { SpxFormSectionComponent } from '@softpak/components/spx-form-section';\r\nimport { SpxInputComponent, SpxValuePair, SpxInputTypeEnum } from '@softpak/components/spx-inputs';\r\nimport { SpxValidateControlComponent } from '@softpak/components/spx-validation';\r\n\r\n@Component({\r\n selector: 'spx-form-view',\r\n imports: [\r\n FormsModule,\r\n ReactiveFormsModule,\r\n SpxAutocompleteSearchComponent,\r\n SpxButtonComponent,\r\n SpxCapitalizePipe,\r\n SpxFormSectionComponent,\r\n SpxInputComponent,\r\n SpxValidateControlComponent,\r\n TranslateModule\r\n ],\r\n templateUrl: './spx-form-view.component.html',\r\n changeDetection: ChangeDetectionStrategy.OnPush\r\n})\r\nexport class SpxFormViewComponent {\r\n readonly spxFormGroup = input.required<FormGroup>();\r\n readonly spxForm = input.required<SpxFormI>();\r\n readonly spxSuggestions = input.required<any>();\r\n spxBlur = output<{ field: SpxFormFieldI, valuePair: SpxValuePair<any> }>();\r\n spxClick = output<{ field: SpxFormFieldI }>();\r\n spxSearch = output<{ field: SpxFormFieldI, valuePair: SpxValuePair<any> }>();\r\n spxInputs = viewChildren(ElementRef<SpxInputComponent>);\r\n autocompleteField?: SpxFormFieldI;\r\n\r\n typeAutocomplete = SpxInputTypeEnum.autocomplete;\r\n typeButton = SpxInputTypeEnum.button;\r\n typeFloat = SpxInputTypeEnum.float;\r\n typeNumber = SpxInputTypeEnum.number;\r\n typeRadio = SpxInputTypeEnum.radio;\r\n typeText = SpxInputTypeEnum.text;\r\n typeNumericKeyboard = SpxInputTypeEnum.textNumericKeyboard;\r\n typeOverlay = SpxInputTypeEnum.overlay;\r\n typeOverlayNumber = SpxInputTypeEnum.overlayNumber;\r\n\r\n setAutofocus(key: string): void {\r\n const field = this.spxInputs().find(input => input.nativeElement.spxName() === key);\r\n if (field) {\r\n field.nativeElement.setFocusIn();\r\n }\r\n }\r\n\r\n onBlur(field: SpxFormFieldI) {\r\n this.spxBlur.emit({\r\n field,\r\n valuePair: this.spxFormGroup().get(field.key)!.value,\r\n });\r\n }\r\n\r\n onClick(field: SpxFormFieldI) {\r\n this.spxClick.emit({\r\n field,\r\n });\r\n }\r\n\r\n onAutocompleteCancel(): void {\r\n this.autocompleteField = undefined;\r\n }\r\n\r\n onAutocompleteSearch(valuePair: SpxValuePair<any>): void {\r\n if (this.autocompleteField) {\r\n this.spxSearch.emit({\r\n field: this.autocompleteField,\r\n valuePair,\r\n });\r\n }\r\n }\r\n\r\n onAutocompleteSave(valuePair: SpxValuePair<any>) {\r\n this.spxFormGroup().get(this.autocompleteField!.key)?.setValue(valuePair);\r\n this.autocompleteField = undefined;\r\n }\r\n\r\n onSearch(field: SpxFormFieldI) {\r\n this.autocompleteField = field;\r\n }\r\n\r\n getRawValidators(formControl: AbstractControl) {\r\n // eslint-disable-next-line no-underscore-dangle\r\n return (formControl as any)._rawValidators;\r\n }\r\n\r\n hasRequiredField(abstractControl: AbstractControl): boolean {\r\n if (abstractControl.validator) {\r\n const validator = abstractControl.validator({} as AbstractControl);\r\n if (validator && validator['required']) {\r\n return true;\r\n }\r\n }\r\n if ((abstractControl as any)['controls']) {\r\n for (const controlName in (abstractControl as any)['controls']) {\r\n if ((abstractControl as any)['controls'][controlName]) {\r\n if (this.hasRequiredField((abstractControl as any)['controls'][controlName])) {\r\n return true;\r\n }\r\n }\r\n }\r\n }\r\n return false;\r\n }\r\n\r\n static initialFormValue(sections: SpxFormSectionI[]) {\r\n const formObject: any = {};\r\n sections.forEach(section => {\r\n section.fields.forEach(field => {\r\n formObject[field.key] = [field.defaultValue ? field.defaultValue() : null, field.validators ? [...field.validators()] : []];\r\n });\r\n });\r\n return formObject;\r\n }\r\n\r\n static createForm(formBuilder: FormBuilder, sections: SpxFormSectionI[]): FormGroup {\r\n return formBuilder.group(this.initialFormValue(sections));\r\n }\r\n\r\n constructor(readonly formBuilder: FormBuilder) {\r\n }\r\n}\r\n","@if (autocompleteField) {\r\n <spx-autocomplete-search\r\n [spxField]=\"autocompleteField\"\r\n [spxSuggestions]=\"this.spxSuggestions()[autocompleteField.key]\"\r\n [spxValuePair]=\"$any(this.spxFormGroup().get(autocompleteField.key)).value\"\r\n [txtOptions]=\"'Options'\"\r\n [txtQuery]=\"'Query'\"\r\n [txtSubmit]=\"'Save'\"\r\n (spxCancel)=\"onAutocompleteCancel()\"\r\n (spxSearch)=\"onAutocompleteSearch($event)\"\r\n (spxSubmit)=\"onAutocompleteSave($event)\">\r\n </spx-autocomplete-search>\r\n}\r\n<div class=\"flex flex-col gap-3\">\r\n @for (spxSection of spxForm().sections; track spxSection; let spxSectionIndex = $index) {\r\n <spx-form-section\r\n [spxShowTitle]=\"!spxSection.showTitle || spxSection.showTitle()\"\r\n [spxIndex]=\"spxSectionIndex + 1\"\r\n [spxTitle]=\"spxSection.title ? (spxSection.title() | translate | capitalize) : undefined\">\r\n @for (spxField of spxSection.fields; track spxField; let spxFieldIndex = $index) {\r\n @if (spxField.show === undefined || spxField.show()) {\r\n @if (spxField.type() === typeButton) {\r\n <spx-button\r\n [spxFullWidth]=\"true\"\r\n [spxSeverity]=\"spxField.severity ? spxField.severity() : undefined\"\r\n [spxType]=\"'button'\"\r\n (spxClick)=\"onClick(spxField)\"\r\n >{{ (spxField.label ? spxField.label() : spxField.key) | translate | capitalize }}</spx-button>\r\n }\r\n @if (spxField.type() === typeOverlay || spxField.type() === typeOverlayNumber || spxField.type() === typeFloat || spxField.type() === typeNumber || spxField.type() === typeText || spxField.type() === typeAutocomplete || spxField.type() === typeNumericKeyboard) {\r\n <spx-input\r\n [formControl]=\"$any(this.spxFormGroup().get(spxField.key))\"\r\n [spxAutofocus]=\"spxField.autofocus ? spxField.autofocus() : false\"\r\n [spxCapitalize]=\"spxField.capitalize ? spxField.capitalize() : false\"\r\n [spxLabel]=\"(spxField.label ? spxField.label() : spxField.key) | translate | capitalize\"\r\n [spxName]=\"spxField.key\"\r\n [spxPattern]=\"spxField.type() === typeNumericKeyboard ? '\\\\d*' : undefined\"\r\n [spxReadonly]=\"spxField.readonly ? spxField.readonly() : false\"\r\n [spxRequired]=\"hasRequiredField(this.spxFormGroup().get(spxField.key)!)\"\r\n [spxShowSearch]=\"spxField.type() === typeAutocomplete\"\r\n [spxShowHelp]=\"false\"\r\n [spxShowValidationMessages]=\"this.spxFormGroup().get(spxField.key)! && this.spxFormGroup().get(spxField.key)!.errors && this.spxFormGroup().get(spxField.key)!.touched\"\r\n [spxStep]=\"spxField.step ? spxField.step() : undefined\"\r\n [spxType]=\"spxField.type()\"\r\n [spxValidators]=\"getRawValidators(this.spxFormGroup().get(spxField.key)!)\"\r\n [spxSuggestions]=\"spxField.suggestionsFixed ? spxField.suggestionsFixed() : this.spxSuggestions()[spxField.key]\"\r\n (spxBlur)=\"onBlur(spxField)\"\r\n (spxSearch)=\"onSearch(spxField)\">\r\n <spx-validate-control [control]=\"$any(this.spxFormGroup().get(spxField.key))\" [label]=\"(spxField.label ? spxField.label() : spxField.key)| translate | capitalize\"></spx-validate-control>\r\n </spx-input>\r\n }\r\n @if (spxField.type() === typeRadio) {\r\n <spx-input\r\n [formControl]=\"$any(this.spxFormGroup().get(spxField.key))\"\r\n [spxLabel]=\"(spxField.label ? spxField.label() : spxField.key) | translate | capitalize\"\r\n [spxName]=\"spxField.key\"\r\n [spxReadonly]=\"spxField.readonly ? spxField.readonly() : false\"\r\n [spxRequired]=\"hasRequiredField(this.spxFormGroup().get(spxField.key)!)\"\r\n [spxShowHelp]=\"false\"\r\n [spxShowValidationMessages]=\"this.spxFormGroup().get(spxField.key)! && this.spxFormGroup().get(spxField.key)!.errors && this.spxFormGroup().get(spxField.key)!.touched\"\r\n [spxSuggestions]=\"spxField.suggestionsFixed ? spxField.suggestionsFixed() : this.spxSuggestions()[spxField.key]\"\r\n [spxType]=\"typeRadio\"\r\n [spxValidators]=\"getRawValidators(this.spxFormGroup().get(spxField.key)!)\">\r\n <spx-validate-control [control]=\"$any(this.spxFormGroup().get(spxField.key))\" [label]=\"(spxField.label ? spxField.label() : spxField.key) | translate | capitalize\"></spx-validate-control>\r\n </spx-input>\r\n }\r\n }\r\n \r\n }\r\n </spx-form-section>\r\n }\r\n\r\n @for (spxButton of spxForm().buttons; track spxButton) {\r\n <spx-button\r\n [spxFullWidth]=\"true\"\r\n [spxSeverity]=\"spxButton.severity\"\r\n [spxType]=\"spxButton.type\"\r\n (spxClick)=\"spxButton.onClick ? spxButton.onClick() : undefined\">\r\n {{ ((spxButton && spxButton.label) ? spxButton.label() : '') | translate | capitalize }}\r\n </spx-button>\r\n }\r\n</div>","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"softpak-components-spx-form-view.mjs","sources":["../../../../projects/softpak/components/spx-form-view/spx-form-button-type.enum.ts","../../../../projects/softpak/components/spx-form-view/spx-autocomplete-search.component.ts","../../../../projects/softpak/components/spx-form-view/spx-autocomplete-search.component.html","../../../../projects/softpak/components/spx-form-view/spx-form-view.component.ts","../../../../projects/softpak/components/spx-form-view/spx-form-view.component.html","../../../../projects/softpak/components/spx-form-view/softpak-components-spx-form-view.ts"],"sourcesContent":["export enum SpxFormButtonTypeEnum {\r\n button = 'button',\r\n submit = 'submit',\r\n}\r\n","import { Component, EventEmitter, Input, OnDestroy, OnInit, Output } from '@angular/core';\r\nimport { FormBuilder, FormControl, FormGroup, FormsModule, ReactiveFormsModule } from '@angular/forms';\r\nimport { Subscription, debounceTime } from 'rxjs';\r\n\r\nimport { SpxFormFieldI } from './spx-form-field.interface';\r\nimport { SpxFormSectionI } from './spx-form-section.interface';\r\nimport { SpxButtonComponent } from '@softpak/components/spx-button';\r\nimport { SpxSeverityEnum } from '@softpak/components/spx-helpers';\r\nimport { SpxInputComponent, SpxValuePair, SpxInputTypeEnum } from '@softpak/components/spx-inputs';\r\n\r\nexport const sectionAutocompleteSearch = 'autocompleteSearch';\r\nexport const ctrlQuery = 'query';\r\nexport const ctrlOptions = 'options';\r\n\r\n@Component({\r\n selector: 'spx-autocomplete-search',\r\n templateUrl: './spx-autocomplete-search.component.html',\r\n imports: [\r\n FormsModule,\r\n ReactiveFormsModule,\r\n SpxButtonComponent,\r\n SpxInputComponent,\r\n ]\r\n})\r\nexport class SpxAutocompleteSearchComponent implements OnInit, OnDestroy {\r\n formGroup!: FormGroup;\r\n @Input() spxSuggestions: SpxValuePair<any>[] = [];\r\n @Input() spxField!: SpxFormFieldI;\r\n @Input() txtOptions!: string;\r\n @Input() txtQuery!: string;\r\n @Input() txtSubmit!: string;\r\n @Input() spxValuePair!: SpxValuePair<any>;\r\n @Output() spxCancel: EventEmitter<void> = new EventEmitter<void>();\r\n @Output() spxSearch: EventEmitter<SpxValuePair<any>> = new EventEmitter<SpxValuePair<any>>(); \r\n @Output() spxSubmit: EventEmitter<SpxValuePair<any>> = new EventEmitter<SpxValuePair<any>>();\r\n inputTypeRadio = SpxInputTypeEnum.radio;\r\n inputTypeText = SpxInputTypeEnum.text;\r\n SpxSeverity = SpxSeverityEnum;\r\n \r\n sections: SpxFormSectionI[] = [\r\n {\r\n key: sectionAutocompleteSearch,\r\n showTitle: () => false,\r\n fields: [\r\n {\r\n key: ctrlQuery,\r\n type: () => SpxInputTypeEnum.text,\r\n label: () => this.txtQuery,\r\n capitalize: () => true,\r\n },\r\n {\r\n key: ctrlOptions,\r\n type: () => SpxInputTypeEnum.radio,\r\n label: () => this.txtOptions,\r\n },\r\n ]\r\n }\r\n ];\r\n\r\n get ctrlQuery(): FormControl { return this.formGroup.get(ctrlQuery) as FormControl; }\r\n get ctrlOptions(): FormControl { return this.formGroup.get(ctrlOptions) as FormControl; }\r\n\r\n private subSelection?: Subscription;\r\n private subQuery?: Subscription;\r\n\r\n constructor(readonly formBuilder: FormBuilder) {\r\n this.createForm();\r\n }\r\n\r\n ngOnInit(): void {\r\n this.listenToSelection();\r\n this.listenToQuery();\r\n this.ctrlQuery.setValue(this.spxValuePair, { emitEvent: false });\r\n this.spxSearch.emit(this.spxValuePair);\r\n }\r\n\r\n ngOnDestroy(): void {\r\n if (this.subSelection) {\r\n this.subSelection.unsubscribe();\r\n }\r\n if (this.subQuery) {\r\n this.subQuery.unsubscribe();\r\n }\r\n }\r\n\r\n private createForm(): void {\r\n this.formGroup = this.formBuilder.group({\r\n [ctrlQuery]: [null],\r\n [ctrlOptions]: [null],\r\n });\r\n }\r\n\r\n getRawValidators(formControl: FormControl) {\r\n return (formControl as any)._rawValidators;\r\n }\r\n\r\n onCancel(): void {\r\n this.spxCancel.emit();\r\n }\r\n \r\n onSubmit(): void {\r\n this.spxSubmit.emit(this.ctrlQuery.value);\r\n }\r\n\r\n private listenToQuery(): void {\r\n this.subQuery = this.ctrlQuery.valueChanges.pipe(debounceTime(500)).subscribe(valuePair => {\r\n this.spxSearch.emit(valuePair);\r\n });\r\n }\r\n\r\n private listenToSelection(): void {\r\n this.subSelection = this.ctrlOptions.valueChanges.subscribe(valuePair => {\r\n this.ctrlQuery.setValue(valuePair);\r\n });\r\n }\r\n}\r\n","<form class=\"bg-black fixed pt-16 z-50 top-0 left-0 right-0 bottom-0\" [formGroup]=\"formGroup\" (ngSubmit)=\"onSubmit()\">\r\n <div class=\"h-full w-full px-3 flex flex-col gap-3\">\r\n <div class=\"grow flex flex-col gap-3 overflow-y-auto\">\r\n <spx-input [formControl]=\"ctrlQuery\" [spxLabel]=\"txtQuery\" [spxType]=\"inputTypeText\">\r\n </spx-input>\r\n <spx-input [formControl]=\"ctrlOptions\" [spxLabel]=\"txtOptions\" [spxSuggestions]=\"spxSuggestions\"\r\n [spxType]=\"inputTypeRadio\">\r\n </spx-input>\r\n </div>\r\n <div class=\"py-3 flex flex-col gap-3\">\r\n <spx-button [spxFullWidth]=\"true\" [spxSeverity]=\"SpxSeverity.success\">\r\n Save\r\n </spx-button>\r\n <spx-button [spxFullWidth]=\"true\" [spxSeverity]=\"SpxSeverity.error\" [spxType]=\"'button'\" (spxClick)=\"onCancel()\">\r\n Cancel\r\n </spx-button>\r\n </div>\r\n </div>\r\n</form>","import { ChangeDetectionStrategy, Component, ElementRef, input, output, viewChildren } from '@angular/core';\r\nimport { SpxFormSectionI } from './spx-form-section.interface';\r\nimport { AbstractControl, FormBuilder, FormGroup, FormsModule, ReactiveFormsModule } from '@angular/forms';\r\nimport { SpxFormFieldI } from './spx-form-field.interface';\r\nimport { SpxAutocompleteSearchComponent } from './spx-autocomplete-search.component';\r\nimport { TranslateModule } from '@ngx-translate/core';\r\nimport { SpxFormI } from './spx-form.interface';\r\nimport { SpxButtonComponent } from '@softpak/components/spx-button';\r\nimport { SpxCapitalizePipe } from '@softpak/components/spx-capitalize';\r\nimport { SpxFormSectionComponent } from '@softpak/components/spx-form-section';\r\nimport { SpxInputComponent, SpxValuePair, SpxInputTypeEnum } from '@softpak/components/spx-inputs';\r\nimport { SpxValidateControlComponent } from '@softpak/components/spx-validation';\r\n\r\n@Component({\r\n selector: 'spx-form-view',\r\n imports: [\r\n FormsModule,\r\n ReactiveFormsModule,\r\n SpxAutocompleteSearchComponent,\r\n SpxButtonComponent,\r\n SpxCapitalizePipe,\r\n SpxFormSectionComponent,\r\n SpxInputComponent,\r\n SpxValidateControlComponent,\r\n TranslateModule\r\n ],\r\n templateUrl: './spx-form-view.component.html',\r\n changeDetection: ChangeDetectionStrategy.OnPush\r\n})\r\nexport class SpxFormViewComponent {\r\n readonly spxFormGroup = input.required<FormGroup>();\r\n readonly spxForm = input.required<SpxFormI>();\r\n readonly spxSuggestions = input.required<any>();\r\n spxBlur = output<{ field: SpxFormFieldI, valuePair: SpxValuePair<any> }>();\r\n spxClick = output<{ field: SpxFormFieldI }>();\r\n spxSearch = output<{ field: SpxFormFieldI, valuePair: SpxValuePair<any> }>();\r\n spxInputs = viewChildren(ElementRef<SpxInputComponent>);\r\n autocompleteField?: SpxFormFieldI;\r\n\r\n typeAutocomplete = SpxInputTypeEnum.autocomplete;\r\n typeButton = SpxInputTypeEnum.button;\r\n typeFloat = SpxInputTypeEnum.float;\r\n typeNumber = SpxInputTypeEnum.number;\r\n typeRadio = SpxInputTypeEnum.radio;\r\n typeText = SpxInputTypeEnum.text;\r\n typeNumericKeyboard = SpxInputTypeEnum.textNumericKeyboard;\r\n typeOverlay = SpxInputTypeEnum.overlay;\r\n typeOverlayNumber = SpxInputTypeEnum.overlayNumber;\r\n\r\n setAutofocus(key: string): void {\r\n const field = this.spxInputs().find(input => input.nativeElement.spxName() === key);\r\n if (field) {\r\n field.nativeElement.setFocusIn();\r\n }\r\n }\r\n\r\n onBlur(field: SpxFormFieldI) {\r\n this.spxBlur.emit({\r\n field,\r\n valuePair: this.spxFormGroup().get(field.key)!.value,\r\n });\r\n }\r\n\r\n onClick(field: SpxFormFieldI) {\r\n this.spxClick.emit({\r\n field,\r\n });\r\n }\r\n\r\n onAutocompleteCancel(): void {\r\n this.autocompleteField = undefined;\r\n }\r\n\r\n onAutocompleteSearch(valuePair: SpxValuePair<any>): void {\r\n if (this.autocompleteField) {\r\n this.spxSearch.emit({\r\n field: this.autocompleteField,\r\n valuePair,\r\n });\r\n }\r\n }\r\n\r\n onAutocompleteSave(valuePair: SpxValuePair<any>) {\r\n this.spxFormGroup().get(this.autocompleteField!.key)?.setValue(valuePair);\r\n this.autocompleteField = undefined;\r\n }\r\n\r\n onSearch(field: SpxFormFieldI) {\r\n this.autocompleteField = field;\r\n }\r\n\r\n getRawValidators(formControl: AbstractControl) {\r\n // eslint-disable-next-line no-underscore-dangle\r\n return (formControl as any)._rawValidators;\r\n }\r\n\r\n hasRequiredField(abstractControl: AbstractControl): boolean {\r\n if (abstractControl.validator) {\r\n const validator = abstractControl.validator({} as AbstractControl);\r\n if (validator && validator['required']) {\r\n return true;\r\n }\r\n }\r\n if ((abstractControl as any)['controls']) {\r\n for (const controlName in (abstractControl as any)['controls']) {\r\n if ((abstractControl as any)['controls'][controlName]) {\r\n if (this.hasRequiredField((abstractControl as any)['controls'][controlName])) {\r\n return true;\r\n }\r\n }\r\n }\r\n }\r\n return false;\r\n }\r\n\r\n static initialFormValue(sections: SpxFormSectionI[]) {\r\n const formObject: any = {};\r\n sections.forEach(section => {\r\n section.fields.forEach(field => {\r\n formObject[field.key] = [field.defaultValue ? field.defaultValue() : null, field.validators ? [...field.validators()] : []];\r\n });\r\n });\r\n return formObject;\r\n }\r\n\r\n static createForm(formBuilder: FormBuilder, sections: SpxFormSectionI[]): FormGroup {\r\n return formBuilder.group(this.initialFormValue(sections));\r\n }\r\n\r\n constructor(readonly formBuilder: FormBuilder) {\r\n }\r\n}\r\n","@if (autocompleteField) {\r\n <spx-autocomplete-search\r\n [spxField]=\"autocompleteField\"\r\n [spxSuggestions]=\"this.spxSuggestions()[autocompleteField.key]\"\r\n [spxValuePair]=\"$any(this.spxFormGroup().get(autocompleteField.key)).value\"\r\n [txtOptions]=\"'Options'\"\r\n [txtQuery]=\"'Query'\"\r\n [txtSubmit]=\"'Save'\"\r\n (spxCancel)=\"onAutocompleteCancel()\"\r\n (spxSearch)=\"onAutocompleteSearch($event)\"\r\n (spxSubmit)=\"onAutocompleteSave($event)\">\r\n </spx-autocomplete-search>\r\n}\r\n<div class=\"flex flex-col gap-3\">\r\n @for (spxSection of spxForm().sections; track spxSection; let spxSectionIndex = $index) {\r\n <spx-form-section\r\n [spxShowTitle]=\"!spxSection.showTitle || spxSection.showTitle()\"\r\n [spxIndex]=\"spxSectionIndex + 1\"\r\n [spxTitle]=\"spxSection.title ? (spxSection.title() | translate | capitalize) : undefined\">\r\n @for (spxField of spxSection.fields; track spxField; let spxFieldIndex = $index) {\r\n @if (spxField.show === undefined || spxField.show()) {\r\n @if (spxField.type() === typeButton) {\r\n <spx-button\r\n [spxFullWidth]=\"true\"\r\n [spxSeverity]=\"spxField.severity ? spxField.severity() : undefined\"\r\n [spxType]=\"'button'\"\r\n (spxClick)=\"onClick(spxField)\"\r\n >{{ (spxField.label ? spxField.label() : spxField.key) | translate | capitalize }}</spx-button>\r\n }\r\n @if (spxField.type() === typeOverlay || spxField.type() === typeOverlayNumber || spxField.type() === typeFloat || spxField.type() === typeNumber || spxField.type() === typeText || spxField.type() === typeAutocomplete || spxField.type() === typeNumericKeyboard) {\r\n <spx-input\r\n [formControl]=\"$any(this.spxFormGroup().get(spxField.key))\"\r\n [spxAutofocus]=\"spxField.autofocus ? spxField.autofocus() : false\"\r\n [spxCapitalize]=\"spxField.capitalize ? spxField.capitalize() : false\"\r\n [spxLabel]=\"(spxField.label ? spxField.label() : spxField.key) | translate | capitalize\"\r\n [spxName]=\"spxField.key\"\r\n [spxPattern]=\"spxField.type() === typeNumericKeyboard ? '\\\\d*' : undefined\"\r\n [spxReadonly]=\"spxField.readonly ? spxField.readonly() : false\"\r\n [spxRequired]=\"hasRequiredField(this.spxFormGroup().get(spxField.key)!)\"\r\n [spxShowSearch]=\"spxField.type() === typeAutocomplete\"\r\n [spxShowHelp]=\"false\"\r\n [spxShowValidationMessages]=\"this.spxFormGroup().get(spxField.key)! && this.spxFormGroup().get(spxField.key)!.errors && this.spxFormGroup().get(spxField.key)!.touched\"\r\n [spxStep]=\"spxField.step ? spxField.step() : undefined\"\r\n [spxType]=\"spxField.type()\"\r\n [spxValidators]=\"getRawValidators(this.spxFormGroup().get(spxField.key)!)\"\r\n [spxSuggestions]=\"spxField.suggestionsFixed ? spxField.suggestionsFixed() : this.spxSuggestions()[spxField.key]\"\r\n (spxBlur)=\"onBlur(spxField)\"\r\n (spxSearch)=\"onSearch(spxField)\">\r\n <spx-validate-control [control]=\"$any(this.spxFormGroup().get(spxField.key))\" [label]=\"(spxField.label ? spxField.label() : spxField.key)| translate | capitalize\"></spx-validate-control>\r\n </spx-input>\r\n }\r\n @if (spxField.type() === typeRadio) {\r\n <spx-input\r\n [formControl]=\"$any(this.spxFormGroup().get(spxField.key))\"\r\n [spxLabel]=\"(spxField.label ? spxField.label() : spxField.key) | translate | capitalize\"\r\n [spxName]=\"spxField.key\"\r\n [spxReadonly]=\"spxField.readonly ? spxField.readonly() : false\"\r\n [spxRequired]=\"hasRequiredField(this.spxFormGroup().get(spxField.key)!)\"\r\n [spxShowHelp]=\"false\"\r\n [spxShowValidationMessages]=\"this.spxFormGroup().get(spxField.key)! && this.spxFormGroup().get(spxField.key)!.errors && this.spxFormGroup().get(spxField.key)!.touched\"\r\n [spxSuggestions]=\"spxField.suggestionsFixed ? spxField.suggestionsFixed() : this.spxSuggestions()[spxField.key]\"\r\n [spxType]=\"typeRadio\"\r\n [spxValidators]=\"getRawValidators(this.spxFormGroup().get(spxField.key)!)\">\r\n <spx-validate-control [control]=\"$any(this.spxFormGroup().get(spxField.key))\" [label]=\"(spxField.label ? spxField.label() : spxField.key) | translate | capitalize\"></spx-validate-control>\r\n </spx-input>\r\n }\r\n }\r\n \r\n }\r\n </spx-form-section>\r\n }\r\n\r\n @for (spxButton of spxForm().buttons; track spxButton) {\r\n <spx-button\r\n [spxFullWidth]=\"true\"\r\n [spxSeverity]=\"spxButton.severity\"\r\n [spxType]=\"spxButton.type\"\r\n (spxClick)=\"spxButton.onClick ? spxButton.onClick() : undefined\">\r\n {{ ((spxButton && spxButton.label) ? spxButton.label() : '') | translate | capitalize }}\r\n </spx-button>\r\n }\r\n</div>","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
|
|
@@ -5,10 +5,11 @@ import * as i1 from '@fortawesome/angular-fontawesome';
|
|
|
5
5
|
import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
|
|
6
6
|
import { faEdit, faSearch, faQuestion, faTimes, faXmark } from '@fortawesome/free-solid-svg-icons';
|
|
7
7
|
import { BehaviorSubject, map, pairwise, filter, fromEvent } from 'rxjs';
|
|
8
|
+
import { IsSeverityPipe } from '@softpak/components/spx-pipes';
|
|
9
|
+
import { SpxSeverityEnum, valuePairToValue } from '@softpak/components/spx-helpers';
|
|
8
10
|
import * as i1$1 from '@angular/forms';
|
|
9
11
|
import { ReactiveFormsModule, FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
|
|
10
12
|
import { SpxSuggestionComponent } from '@softpak/components/spx-suggestion';
|
|
11
|
-
import { valuePairToValue, SpxSeverityEnum } from '@softpak/components/spx-helpers';
|
|
12
13
|
import { DateTime } from 'luxon';
|
|
13
14
|
import * as i1$2 from '@ionic/angular/standalone';
|
|
14
15
|
import { IonButtons, IonContent, IonHeader, IonTitle, IonToolbar } from '@ionic/angular/standalone';
|
|
@@ -58,6 +59,7 @@ class SpxInputBoxComponent {
|
|
|
58
59
|
this.faSearch = faSearch;
|
|
59
60
|
this.faQuestion = faQuestion;
|
|
60
61
|
this.faTimes = faTimes;
|
|
62
|
+
this.SpxSeverity = SpxSeverityEnum;
|
|
61
63
|
this.spxCompact = input();
|
|
62
64
|
this.spxLabel = input();
|
|
63
65
|
this.spxReadonly = input(false);
|
|
@@ -68,6 +70,7 @@ class SpxInputBoxComponent {
|
|
|
68
70
|
this.spxShowLabel = input(true);
|
|
69
71
|
this.spxShowSearch = input();
|
|
70
72
|
this.spxShowValidationMessages = input();
|
|
73
|
+
this.spxAlert = input();
|
|
71
74
|
this.spxValue = model();
|
|
72
75
|
this.spxClear = output();
|
|
73
76
|
this.spxSearch = output();
|
|
@@ -105,16 +108,17 @@ class SpxInputBoxComponent {
|
|
|
105
108
|
this.spxHelp.emit();
|
|
106
109
|
}
|
|
107
110
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SpxInputBoxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
108
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: SpxInputBoxComponent, isStandalone: true, selector: "spx-input-box", inputs: { spxCompact: { classPropertyName: "spxCompact", publicName: "spxCompact", isSignal: true, isRequired: false, transformFunction: null }, spxLabel: { classPropertyName: "spxLabel", publicName: "spxLabel", isSignal: true, isRequired: false, transformFunction: null }, spxReadonly: { classPropertyName: "spxReadonly", publicName: "spxReadonly", isSignal: true, isRequired: false, transformFunction: null }, spxRequired: { classPropertyName: "spxRequired", publicName: "spxRequired", isSignal: true, isRequired: false, transformFunction: null }, spxShowClear: { classPropertyName: "spxShowClear", publicName: "spxShowClear", isSignal: true, isRequired: false, transformFunction: null }, spxShowEdit: { classPropertyName: "spxShowEdit", publicName: "spxShowEdit", isSignal: true, isRequired: false, transformFunction: null }, spxShowHelp: { classPropertyName: "spxShowHelp", publicName: "spxShowHelp", isSignal: true, isRequired: false, transformFunction: null }, spxShowLabel: { classPropertyName: "spxShowLabel", publicName: "spxShowLabel", isSignal: true, isRequired: false, transformFunction: null }, spxShowSearch: { classPropertyName: "spxShowSearch", publicName: "spxShowSearch", isSignal: true, isRequired: false, transformFunction: null }, spxShowValidationMessages: { classPropertyName: "spxShowValidationMessages", publicName: "spxShowValidationMessages", isSignal: true, isRequired: false, transformFunction: null }, spxValue: { classPropertyName: "spxValue", publicName: "spxValue", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { spxValue: "spxValueChange", spxClear: "spxClear", spxSearch: "spxSearch", spxEdit: "spxEdit", spxHelp: "spxHelp", spxSetIdInParent: "spxSetIdInParent" }, host: { listeners: { "click": "handleFocusIn()", "focusin": "handleFocusIn($event)", "focusout": "handleFocusOut($event)" } }, ngImport: i0, template: "<div class=\"flex rounded w-full gap-3\"\r\n
|
|
111
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: SpxInputBoxComponent, isStandalone: true, selector: "spx-input-box", inputs: { spxCompact: { classPropertyName: "spxCompact", publicName: "spxCompact", isSignal: true, isRequired: false, transformFunction: null }, spxLabel: { classPropertyName: "spxLabel", publicName: "spxLabel", isSignal: true, isRequired: false, transformFunction: null }, spxReadonly: { classPropertyName: "spxReadonly", publicName: "spxReadonly", isSignal: true, isRequired: false, transformFunction: null }, spxRequired: { classPropertyName: "spxRequired", publicName: "spxRequired", isSignal: true, isRequired: false, transformFunction: null }, spxShowClear: { classPropertyName: "spxShowClear", publicName: "spxShowClear", isSignal: true, isRequired: false, transformFunction: null }, spxShowEdit: { classPropertyName: "spxShowEdit", publicName: "spxShowEdit", isSignal: true, isRequired: false, transformFunction: null }, spxShowHelp: { classPropertyName: "spxShowHelp", publicName: "spxShowHelp", isSignal: true, isRequired: false, transformFunction: null }, spxShowLabel: { classPropertyName: "spxShowLabel", publicName: "spxShowLabel", isSignal: true, isRequired: false, transformFunction: null }, spxShowSearch: { classPropertyName: "spxShowSearch", publicName: "spxShowSearch", isSignal: true, isRequired: false, transformFunction: null }, spxShowValidationMessages: { classPropertyName: "spxShowValidationMessages", publicName: "spxShowValidationMessages", isSignal: true, isRequired: false, transformFunction: null }, spxAlert: { classPropertyName: "spxAlert", publicName: "spxAlert", isSignal: true, isRequired: false, transformFunction: null }, spxValue: { classPropertyName: "spxValue", publicName: "spxValue", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { spxValue: "spxValueChange", spxClear: "spxClear", spxSearch: "spxSearch", spxEdit: "spxEdit", spxHelp: "spxHelp", spxSetIdInParent: "spxSetIdInParent" }, host: { listeners: { "click": "handleFocusIn()", "focusin": "handleFocusIn($event)", "focusout": "handleFocusOut($event)" } }, ngImport: i0, template: "<div class=\"flex rounded w-full gap-3\"\r\n [class.rounded-none]=\"this.spxShowValidationMessages()\"\r\n [class.rounded-t]=\"this.spxShowValidationMessages()\"\r\n [class.outline-none]=\"this.spxIsFocused() && !this.spxReadonly()\"\r\n [class.ring-2]=\"this.spxIsFocused() && !this.spxReadonly()\"\r\n [class.ring-offset-2]=\"this.spxIsFocused() && !this.spxReadonly()\"\r\n [class.ring-blue-500]=\"this.spxIsFocused() && !this.spxReadonly()\"\r\n [class.bg-white]=\"!this.spxReadonly()\"\r\n [class.bg-gray-300]=\"this.spxReadonly()\"\r\n [class.cursor-not-allowed]=\"this.spxReadonly()\"\r\n \r\n >\r\n <div class=\"flex-auto p-3\"\r\n [class.p-0]=\"this.spxCompact()\"\r\n [class.flex]=\"this.spxCompact()\"\r\n [class.items-center]=\"this.spxCompact()\">\r\n @if (this.spxShowLabel()) {\r\n <div class=\"font-bold text-sm mb-1 text-gray-800\"\r\n [class.mb-0]=\"this.spxCompact()\"\r\n [class.px-3]=\"this.spxCompact()\">\r\n {{this.spxLabel()}} @if (spxRequired()) {\r\n <span class=\"text-red-800\">*</span>\r\n }\r\n </div>\r\n }\r\n\r\n <ng-content select=\"[controls]\"></ng-content>\r\n</div>\r\n<div class=\"flex flex-none gap-1 p-1\">\r\n @if (this.spxShowEdit()) {\r\n <spx-button\r\n (spxClick)=\"onEdit()\"\r\n [spxFullHeight]=\"true\"\r\n [spxSize]=\"'xl'\"\r\n [spxType]=\"'button'\">\r\n <fa-icon [icon]=\"faEdit\" class=\"block text-xl\"></fa-icon>\r\n </spx-button>\r\n }\r\n @if (this.spxShowHelp()) {\r\n <spx-button\r\n (spxClick)=\"onHelp()\"\r\n [spxFullHeight]=\"true\"\r\n [spxDisabled]=\"this.spxReadonly()\"\r\n [spxSize]=\"'xl'\"\r\n [spxTabIndex]=\"-1\"\r\n [spxType]=\"'button'\">\r\n <fa-icon [icon]=\"faQuestion\" class=\"block text-xl\"></fa-icon>\r\n </spx-button>\r\n }\r\n @if (this.spxShowSearch()) {\r\n <spx-button\r\n (spxClick)=\"onSearch()\"\r\n [spxFullHeight]=\"true\"\r\n [spxDisabled]=\"this.spxReadonly()\"\r\n [spxSize]=\"'xl'\"\r\n [spxTabIndex]=\"-1\"\r\n [spxType]=\"'button'\">\r\n <fa-icon [icon]=\"faSearch\" class=\"block text-xl\"></fa-icon>\r\n </spx-button>\r\n }\r\n @if (this.spxShowClear()) {\r\n <spx-button\r\n (spxClick)=\"onClear()\"\r\n [spxDisabled]=\"this.spxReadonly() || (this.spxValue()?.description !== 'No' && !this.spxValue()?.value)\"\r\n [spxFullHeight]=\"true\"\r\n [spxSize]=\"'xl'\"\r\n [spxTabIndex]=\"-1\"\r\n [spxType]=\"'button'\">\r\n <fa-icon [icon]=\"faTimes\" class=\"block text-xl\"></fa-icon>\r\n </spx-button>\r\n }\r\n</div>\r\n</div>\r\n@if (this.spxShowValidationMessages()) {\r\n <div class=\"bg-red-600 rounded-b text-white p-3\">\r\n <ng-content select=\"[validation-messages]\"></ng-content>\r\n </div>\r\n}\r\n@else if (this.spxAlert()) {\r\n <div [class.bg-red-700]=\"this.spxAlert()?.severity | isSeverity: SpxSeverity.error\"\r\n [class.bg-green-700]=\"this.spxAlert()?.severity | isSeverity: SpxSeverity.success\"\r\n [class.bg-blue-700]=\"this.spxAlert()?.severity | isSeverity: SpxSeverity.info\"\r\n [class.bg-gray-400]=\"this.spxAlert()?.severity | isSeverity: SpxSeverity.unknown\"\r\n [class.bg-amber-700]=\"this.spxAlert()?.severity | isSeverity: SpxSeverity.warning\"\r\n class=\"rounded-b text-white p-3\">\r\n <div>\r\n {{this.spxAlert()?.text}}\r\n </div>\r\n</div>\r\n}", dependencies: [{ kind: "component", type: SpxButtonComponent, selector: "spx-button", inputs: ["spxDisabled", "spxClass", "spxClassObject", "spxForm", "spxFullHeight", "spxFullWidth", "spxSeverity", "spxSize", "spxTabIndex", "spxType"], outputs: ["spxClick"] }, { kind: "ngmodule", type: FontAwesomeModule }, { kind: "component", type: i1.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "mask", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "transform", "a11yRole"] }, { kind: "pipe", type: IsSeverityPipe, name: "isSeverity" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
109
112
|
}
|
|
110
113
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SpxInputBoxComponent, decorators: [{
|
|
111
114
|
type: Component,
|
|
112
115
|
args: [{ selector: 'spx-input-box', imports: [
|
|
113
116
|
SpxButtonComponent,
|
|
114
|
-
FontAwesomeModule
|
|
117
|
+
FontAwesomeModule,
|
|
118
|
+
IsSeverityPipe
|
|
115
119
|
], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
116
120
|
"(click)": "handleFocusIn()"
|
|
117
|
-
}, template: "<div class=\"flex rounded w-full gap-3\"\r\n
|
|
121
|
+
}, template: "<div class=\"flex rounded w-full gap-3\"\r\n [class.rounded-none]=\"this.spxShowValidationMessages()\"\r\n [class.rounded-t]=\"this.spxShowValidationMessages()\"\r\n [class.outline-none]=\"this.spxIsFocused() && !this.spxReadonly()\"\r\n [class.ring-2]=\"this.spxIsFocused() && !this.spxReadonly()\"\r\n [class.ring-offset-2]=\"this.spxIsFocused() && !this.spxReadonly()\"\r\n [class.ring-blue-500]=\"this.spxIsFocused() && !this.spxReadonly()\"\r\n [class.bg-white]=\"!this.spxReadonly()\"\r\n [class.bg-gray-300]=\"this.spxReadonly()\"\r\n [class.cursor-not-allowed]=\"this.spxReadonly()\"\r\n \r\n >\r\n <div class=\"flex-auto p-3\"\r\n [class.p-0]=\"this.spxCompact()\"\r\n [class.flex]=\"this.spxCompact()\"\r\n [class.items-center]=\"this.spxCompact()\">\r\n @if (this.spxShowLabel()) {\r\n <div class=\"font-bold text-sm mb-1 text-gray-800\"\r\n [class.mb-0]=\"this.spxCompact()\"\r\n [class.px-3]=\"this.spxCompact()\">\r\n {{this.spxLabel()}} @if (spxRequired()) {\r\n <span class=\"text-red-800\">*</span>\r\n }\r\n </div>\r\n }\r\n\r\n <ng-content select=\"[controls]\"></ng-content>\r\n</div>\r\n<div class=\"flex flex-none gap-1 p-1\">\r\n @if (this.spxShowEdit()) {\r\n <spx-button\r\n (spxClick)=\"onEdit()\"\r\n [spxFullHeight]=\"true\"\r\n [spxSize]=\"'xl'\"\r\n [spxType]=\"'button'\">\r\n <fa-icon [icon]=\"faEdit\" class=\"block text-xl\"></fa-icon>\r\n </spx-button>\r\n }\r\n @if (this.spxShowHelp()) {\r\n <spx-button\r\n (spxClick)=\"onHelp()\"\r\n [spxFullHeight]=\"true\"\r\n [spxDisabled]=\"this.spxReadonly()\"\r\n [spxSize]=\"'xl'\"\r\n [spxTabIndex]=\"-1\"\r\n [spxType]=\"'button'\">\r\n <fa-icon [icon]=\"faQuestion\" class=\"block text-xl\"></fa-icon>\r\n </spx-button>\r\n }\r\n @if (this.spxShowSearch()) {\r\n <spx-button\r\n (spxClick)=\"onSearch()\"\r\n [spxFullHeight]=\"true\"\r\n [spxDisabled]=\"this.spxReadonly()\"\r\n [spxSize]=\"'xl'\"\r\n [spxTabIndex]=\"-1\"\r\n [spxType]=\"'button'\">\r\n <fa-icon [icon]=\"faSearch\" class=\"block text-xl\"></fa-icon>\r\n </spx-button>\r\n }\r\n @if (this.spxShowClear()) {\r\n <spx-button\r\n (spxClick)=\"onClear()\"\r\n [spxDisabled]=\"this.spxReadonly() || (this.spxValue()?.description !== 'No' && !this.spxValue()?.value)\"\r\n [spxFullHeight]=\"true\"\r\n [spxSize]=\"'xl'\"\r\n [spxTabIndex]=\"-1\"\r\n [spxType]=\"'button'\">\r\n <fa-icon [icon]=\"faTimes\" class=\"block text-xl\"></fa-icon>\r\n </spx-button>\r\n }\r\n</div>\r\n</div>\r\n@if (this.spxShowValidationMessages()) {\r\n <div class=\"bg-red-600 rounded-b text-white p-3\">\r\n <ng-content select=\"[validation-messages]\"></ng-content>\r\n </div>\r\n}\r\n@else if (this.spxAlert()) {\r\n <div [class.bg-red-700]=\"this.spxAlert()?.severity | isSeverity: SpxSeverity.error\"\r\n [class.bg-green-700]=\"this.spxAlert()?.severity | isSeverity: SpxSeverity.success\"\r\n [class.bg-blue-700]=\"this.spxAlert()?.severity | isSeverity: SpxSeverity.info\"\r\n [class.bg-gray-400]=\"this.spxAlert()?.severity | isSeverity: SpxSeverity.unknown\"\r\n [class.bg-amber-700]=\"this.spxAlert()?.severity | isSeverity: SpxSeverity.warning\"\r\n class=\"rounded-b text-white p-3\">\r\n <div>\r\n {{this.spxAlert()?.text}}\r\n </div>\r\n</div>\r\n}" }]
|
|
118
122
|
}], propDecorators: { handleFocusIn: [{
|
|
119
123
|
type: HostListener,
|
|
120
124
|
args: ['focusin', ["$event"]]
|
|
@@ -857,6 +861,7 @@ class SpxInputComponent {
|
|
|
857
861
|
this.spxCompact = input(false);
|
|
858
862
|
this.spxShowClear = input(true);
|
|
859
863
|
this.spxShowSearch = input(false);
|
|
864
|
+
this.spxAlert = input();
|
|
860
865
|
this.spxShowValidationMessages = input(false);
|
|
861
866
|
this.spxStep = input();
|
|
862
867
|
this.spxSuggestions = input([]);
|
|
@@ -961,13 +966,13 @@ class SpxInputComponent {
|
|
|
961
966
|
this.onTouched = fn;
|
|
962
967
|
}
|
|
963
968
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SpxInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
964
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: SpxInputComponent, isStandalone: true, selector: "spx-input", inputs: { 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 }, 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 } }, outputs: { spxClear: "spxClear", spxEdit: "spxEdit", spxHelp: "spxHelp", spxSearch: "spxSearch", spxBlur: "spxBlur" }, host: { listeners: { "spxChange": "handleChangeEvent($event)", "focusout": "_handleBlurEvent()" } }, providers: [
|
|
969
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: SpxInputComponent, isStandalone: true, selector: "spx-input", inputs: { 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 } }, outputs: { spxClear: "spxClear", spxEdit: "spxEdit", spxHelp: "spxHelp", spxSearch: "spxSearch", spxBlur: "spxBlur" }, host: { listeners: { "spxChange": "handleChangeEvent($event)", "focusout": "_handleBlurEvent()" } }, providers: [
|
|
965
970
|
{
|
|
966
971
|
provide: NG_VALUE_ACCESSOR,
|
|
967
972
|
useExisting: SpxInputComponent,
|
|
968
973
|
multi: true
|
|
969
974
|
}
|
|
970
|
-
], viewQueries: [{ propertyName: "floatInput", first: true, predicate: ["spxInputFloat"], descendants: true, isSignal: true }, { propertyName: "numberInput", first: true, predicate: ["spxInputNumber"], descendants: true, isSignal: true }, { propertyName: "textInput", first: true, predicate: ["spxInputText"], descendants: true, isSignal: true }, { propertyName: "timeInput", first: true, predicate: ["spxInputTime"], descendants: true, isSignal: true }, { propertyName: "radioInput", first: true, predicate: ["spxInputRadio"], descendants: true, isSignal: true }, { propertyName: "dateInput", first: true, predicate: ["spxInputDate"], descendants: true, isSignal: true }], ngImport: i0, template: "<spx-input-box\r\n [spxLabel]=\"this.spxLabel()\"\r\n [spxReadonly]=\"this.spxReadonly()\"\r\n [spxRequired]=\"this.spxRequired()\"\r\n [spxValue]=\"this.value()\"\r\n [spxShowHelp]=\"this.spxShowHelp()\"\r\n [spxCompact]=\"this.spxCompact()\"\r\n [spxShowClear]=\"this.spxShowClear()\"\r\n [spxShowEdit]=\"this.spxShowEdit()\"\r\n [spxShowLabel]=\"this.spxShowLabel()\"\r\n [spxShowSearch]=\"this.spxShowSearch() ? this.spxShowSearch() : this.spxType() === 'autocomplete'\"\r\n [spxShowValidationMessages]=\"this.spxShowValidationMessages()\"\r\n (spxClear)=\"this.handleClear()\"\r\n (spxEdit)=\"this.handleEdit()\"\r\n (spxHelp)=\"this.handleHelp()\"\r\n (spxSearch)=\"this.handleSearch()\"\r\n (spxSetIdInParent)=\"handleSpxElementIdSet($event)\"\r\n >\r\n <div controls>\r\n @if (this.spxType() === 'autocomplete' || this.spxType() === 'overlay' || this.spxType() === 'overlaynumber' || this.spxType() === 'text' || this.spxType() === 'password') {\r\n <spx-input-text #spxInputText\r\n [spxAutocomplete]=\"this.spxAutocomplete() ? this.spxAutocomplete() : undefined\"\r\n [spxAutofocus]=\"this.spxAutofocus()\"\r\n [spxCapitalize]=\"this.spxCapitalize()\"\r\n [spxInputMode]=\"this.spxType() === 'overlaynumber' ? 'numeric' : this.spxInputMode()\"\r\n [spxName]=\"this.spxName()\"\r\n [spxPattern]=\"this.spxType() === 'overlaynumber' ? '[0-9]*' : this.spxPattern()\"\r\n [spxReadonly]=\"this.spxReadonly()\"\r\n [spxSuggestions]=\"this.spxSuggestions()\"\r\n [spxType]=\"this.spxType()\"\r\n [spxValidators]=\"this.spxValidators()\"\r\n [spxElementId]=\"this.spxElementId()\"\r\n [value]=\"value()\"\r\n (valueChange)=\"handleChangeEvent($event)\"\r\n ></spx-input-text>\r\n }\r\n @if (this.spxType() === 'date') {\r\n <spx-input-date #spxInputDate\r\n [spxMax]=\"this.spxMax()!\"\r\n [spxMin]=\"this.spxMin()!\"\r\n [spxReadonly]=\"this.spxReadonly()\"\r\n [spxSelectDay]=\"this.spxSelectDay()\"\r\n [spxSelectMonth]=\"this.spxSelectMonth()\"\r\n [spxValidators]=\"this.spxValidators()\"\r\n [value]=\"value()\"\r\n [spxElementId]=\"this.spxElementId()\"\r\n [spxAutoFocus]=\"this.spxAutofocus()\"\r\n (valueChange)=\"handleChangeEvent($event)\"\r\n ></spx-input-date>\r\n }\r\n @if (this.spxType() === 'float') {\r\n <spx-input-float #spxInputFloat\r\n [spxName]=\"this.spxName()\"\r\n [spxReadonly]=\"this.spxReadonly()\"\r\n [spxStep]=\"this.spxStep()\"\r\n [spxValidators]=\"this.spxValidators()\"\r\n [spxAutofocus]=\"this.spxAutofocus()\"\r\n [spxElementId]=\"this.spxElementId()\"\r\n [value]=\"value()\"\r\n (valueChange)=\"handleChangeEvent($event)\"\r\n ></spx-input-float>\r\n }\r\n @if (this.spxType() === 'number') {\r\n <spx-input-number #spxInputNumber\r\n [spxInputMode]=\"this.spxInputMode()\"\r\n [spxAutofocus]=\"this.spxAutofocus()\"\r\n [spxElementId]=\"this.spxElementId()\"\r\n [spxName]=\"this.spxName()\"\r\n [spxReadonly]=\"this.spxReadonly()\"\r\n [spxStep]=\"this.spxStep()\"\r\n [spxValidators]=\"this.spxValidators()\"\r\n [value]=\"value()\"\r\n (valueChange)=\"handleChangeEvent($event)\"\r\n ></spx-input-number>\r\n }\r\n @if (this.spxType() === 'radio') {\r\n <spx-input-radio\r\n #spxInputRadio\r\n [spxName]=\"this.spxName()\"\r\n [spxReadonly]=\"this.spxReadonly()\"\r\n [spxShowLabel]=\"this.spxShowLabel()\"\r\n [spxSuggestions]=\"this.spxSuggestions()\"\r\n [spxValidators]=\"this.spxValidators()\"\r\n [spxElementId]=\"this.spxElementId()\"\r\n [value]=\"value()\"\r\n (valueChange)=\"handleChangeEvent($event)\"\r\n ></spx-input-radio>\r\n }\r\n @if (this.spxType() === 'time') {\r\n <spx-input-time\r\n #spxInputTime\r\n [spxName]=\"this.spxName()\"\r\n [spxReadonly]=\"this.spxReadonly()\"\r\n [spxValidators]=\"this.spxValidators()\"\r\n [value]=\"value()\"\r\n (valueChange)=\"handleChangeEvent($event)\"\r\n ></spx-input-time>\r\n }\r\n </div>\r\n <div validation-messages>\r\n <ng-content></ng-content>\r\n </div>\r\n </spx-input-box>", dependencies: [{ kind: "component", type: SpxInputBoxComponent, selector: "spx-input-box", inputs: ["spxCompact", "spxLabel", "spxReadonly", "spxRequired", "spxShowClear", "spxShowEdit", "spxShowHelp", "spxShowLabel", "spxShowSearch", "spxShowValidationMessages", "spxValue"], outputs: ["spxValueChange", "spxClear", "spxSearch", "spxEdit", "spxHelp", "spxSetIdInParent"] }, { kind: "component", type: SpxInputDateComponent, selector: "spx-input-date", inputs: ["spxMax", "spxMin", "spxReadonly", "spxValidators", "spxAutoFocus", "value", "spxSelectDay", "spxSelectMonth", "spxElementId", "spxSuggestions"], outputs: ["valueChange"] }, { kind: "component", type: SpxInputFloatComponent, selector: "spx-input-float", inputs: ["spxName", "spxAutofocus", "spxElementId", "spxReadonly", "spxValidators", "spxStep", "value", "spxWasInternalUpdate"], outputs: ["valueChange"] }, { kind: "component", type: SpxInputNumberComponent, selector: "spx-input-number", inputs: ["spxName", "spxAutofocus", "spxInputMode", "spxReadonly", "spxValidators", "spxFocused", "spxStep", "value", "spxElementId"], outputs: ["valueChange"] }, { kind: "component", type: SpxInputRadioComponent, selector: "spx-input-radio", inputs: ["spxName", "spxValidators", "spxShowLabel", "spxReadonly", "spxSuggestions", "value", "spxElementId"], outputs: ["valueChange"] }, { kind: "component", type: SpxInputTextComponent, selector: "spx-input-text", inputs: ["spxName", "spxAutofocus", "spxAutocomplete", "spxInputMode", "spxPattern", "spxSuggestions", "spxReadonly", "spxValidators", "spxCapitalize", "spxType", "spxWasInternalUpdate", "value", "spxElementId"], outputs: ["valueChange"] }, { kind: "component", type: SpxInputTimeComponent, selector: "spx-input-time", inputs: ["spxName", "spxAutofocus", "spxInputMode", "spxPattern", "spxSuggestions", "spxReadonly", "spxValidators", "spxCapitalize", "value"], outputs: ["valueChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
975
|
+
], viewQueries: [{ propertyName: "floatInput", first: true, predicate: ["spxInputFloat"], descendants: true, isSignal: true }, { propertyName: "numberInput", first: true, predicate: ["spxInputNumber"], descendants: true, isSignal: true }, { propertyName: "textInput", first: true, predicate: ["spxInputText"], descendants: true, isSignal: true }, { propertyName: "timeInput", first: true, predicate: ["spxInputTime"], descendants: true, isSignal: true }, { propertyName: "radioInput", first: true, predicate: ["spxInputRadio"], descendants: true, isSignal: true }, { propertyName: "dateInput", first: true, predicate: ["spxInputDate"], descendants: true, isSignal: true }], ngImport: i0, template: "<spx-input-box\r\n [spxAlert]=\"this.spxAlert()\"\r\n [spxLabel]=\"this.spxLabel()\"\r\n [spxReadonly]=\"this.spxReadonly()\"\r\n [spxRequired]=\"this.spxRequired()\"\r\n [spxValue]=\"this.value()\"\r\n [spxShowHelp]=\"this.spxShowHelp()\"\r\n [spxCompact]=\"this.spxCompact()\"\r\n [spxShowClear]=\"this.spxShowClear()\"\r\n [spxShowEdit]=\"this.spxShowEdit()\"\r\n [spxShowLabel]=\"this.spxShowLabel()\"\r\n [spxShowSearch]=\"this.spxShowSearch() ? this.spxShowSearch() : this.spxType() === 'autocomplete'\"\r\n [spxShowValidationMessages]=\"this.spxShowValidationMessages()\"\r\n (spxClear)=\"this.handleClear()\"\r\n (spxEdit)=\"this.handleEdit()\"\r\n (spxHelp)=\"this.handleHelp()\"\r\n (spxSearch)=\"this.handleSearch()\"\r\n (spxSetIdInParent)=\"handleSpxElementIdSet($event)\"\r\n >\r\n <div controls>\r\n @if (this.spxType() === 'autocomplete' || this.spxType() === 'overlay' || this.spxType() === 'overlaynumber' || this.spxType() === 'text' || this.spxType() === 'password') {\r\n <spx-input-text #spxInputText\r\n [spxAutocomplete]=\"this.spxAutocomplete() ? this.spxAutocomplete() : undefined\"\r\n [spxAutofocus]=\"this.spxAutofocus()\"\r\n [spxCapitalize]=\"this.spxCapitalize()\"\r\n [spxInputMode]=\"this.spxType() === 'overlaynumber' ? 'numeric' : this.spxInputMode()\"\r\n [spxName]=\"this.spxName()\"\r\n [spxPattern]=\"this.spxType() === 'overlaynumber' ? '[0-9]*' : this.spxPattern()\"\r\n [spxReadonly]=\"this.spxReadonly()\"\r\n [spxSuggestions]=\"this.spxSuggestions()\"\r\n [spxType]=\"this.spxType()\"\r\n [spxValidators]=\"this.spxValidators()\"\r\n [spxElementId]=\"this.spxElementId()\"\r\n [value]=\"value()\"\r\n (valueChange)=\"handleChangeEvent($event)\"\r\n ></spx-input-text>\r\n }\r\n @if (this.spxType() === 'date') {\r\n <spx-input-date #spxInputDate\r\n [spxMax]=\"this.spxMax()!\"\r\n [spxMin]=\"this.spxMin()!\"\r\n [spxReadonly]=\"this.spxReadonly()\"\r\n [spxSelectDay]=\"this.spxSelectDay()\"\r\n [spxSelectMonth]=\"this.spxSelectMonth()\"\r\n [spxValidators]=\"this.spxValidators()\"\r\n [value]=\"value()\"\r\n [spxElementId]=\"this.spxElementId()\"\r\n [spxAutoFocus]=\"this.spxAutofocus()\"\r\n (valueChange)=\"handleChangeEvent($event)\"\r\n ></spx-input-date>\r\n }\r\n @if (this.spxType() === 'float') {\r\n <spx-input-float #spxInputFloat\r\n [spxName]=\"this.spxName()\"\r\n [spxReadonly]=\"this.spxReadonly()\"\r\n [spxStep]=\"this.spxStep()\"\r\n [spxValidators]=\"this.spxValidators()\"\r\n [spxAutofocus]=\"this.spxAutofocus()\"\r\n [spxElementId]=\"this.spxElementId()\"\r\n [value]=\"value()\"\r\n (valueChange)=\"handleChangeEvent($event)\"\r\n ></spx-input-float>\r\n }\r\n @if (this.spxType() === 'number') {\r\n <spx-input-number #spxInputNumber\r\n [spxInputMode]=\"this.spxInputMode()\"\r\n [spxAutofocus]=\"this.spxAutofocus()\"\r\n [spxElementId]=\"this.spxElementId()\"\r\n [spxName]=\"this.spxName()\"\r\n [spxReadonly]=\"this.spxReadonly()\"\r\n [spxStep]=\"this.spxStep()\"\r\n [spxValidators]=\"this.spxValidators()\"\r\n [value]=\"value()\"\r\n (valueChange)=\"handleChangeEvent($event)\"\r\n ></spx-input-number>\r\n }\r\n @if (this.spxType() === 'radio') {\r\n <spx-input-radio\r\n #spxInputRadio\r\n [spxName]=\"this.spxName()\"\r\n [spxReadonly]=\"this.spxReadonly()\"\r\n [spxShowLabel]=\"this.spxShowLabel()\"\r\n [spxSuggestions]=\"this.spxSuggestions()\"\r\n [spxValidators]=\"this.spxValidators()\"\r\n [spxElementId]=\"this.spxElementId()\"\r\n [value]=\"value()\"\r\n (valueChange)=\"handleChangeEvent($event)\"\r\n ></spx-input-radio>\r\n }\r\n @if (this.spxType() === 'time') {\r\n <spx-input-time\r\n #spxInputTime\r\n [spxName]=\"this.spxName()\"\r\n [spxReadonly]=\"this.spxReadonly()\"\r\n [spxValidators]=\"this.spxValidators()\"\r\n [value]=\"value()\"\r\n (valueChange)=\"handleChangeEvent($event)\"\r\n ></spx-input-time>\r\n }\r\n </div>\r\n <div validation-messages>\r\n <ng-content></ng-content>\r\n </div>\r\n </spx-input-box>", dependencies: [{ kind: "component", type: SpxInputBoxComponent, selector: "spx-input-box", inputs: ["spxCompact", "spxLabel", "spxReadonly", "spxRequired", "spxShowClear", "spxShowEdit", "spxShowHelp", "spxShowLabel", "spxShowSearch", "spxShowValidationMessages", "spxAlert", "spxValue"], outputs: ["spxValueChange", "spxClear", "spxSearch", "spxEdit", "spxHelp", "spxSetIdInParent"] }, { kind: "component", type: SpxInputDateComponent, selector: "spx-input-date", inputs: ["spxMax", "spxMin", "spxReadonly", "spxValidators", "spxAutoFocus", "value", "spxSelectDay", "spxSelectMonth", "spxElementId", "spxSuggestions"], outputs: ["valueChange"] }, { kind: "component", type: SpxInputFloatComponent, selector: "spx-input-float", inputs: ["spxName", "spxAutofocus", "spxElementId", "spxReadonly", "spxValidators", "spxStep", "value", "spxWasInternalUpdate"], outputs: ["valueChange"] }, { kind: "component", type: SpxInputNumberComponent, selector: "spx-input-number", inputs: ["spxName", "spxAutofocus", "spxInputMode", "spxReadonly", "spxValidators", "spxFocused", "spxStep", "value", "spxElementId"], outputs: ["valueChange"] }, { kind: "component", type: SpxInputRadioComponent, selector: "spx-input-radio", inputs: ["spxName", "spxValidators", "spxShowLabel", "spxReadonly", "spxSuggestions", "value", "spxElementId"], outputs: ["valueChange"] }, { kind: "component", type: SpxInputTextComponent, selector: "spx-input-text", inputs: ["spxName", "spxAutofocus", "spxAutocomplete", "spxInputMode", "spxPattern", "spxSuggestions", "spxReadonly", "spxValidators", "spxCapitalize", "spxType", "spxWasInternalUpdate", "value", "spxElementId"], outputs: ["valueChange"] }, { kind: "component", type: SpxInputTimeComponent, selector: "spx-input-time", inputs: ["spxName", "spxAutofocus", "spxInputMode", "spxPattern", "spxSuggestions", "spxReadonly", "spxValidators", "spxCapitalize", "value"], outputs: ["valueChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
971
976
|
}
|
|
972
977
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SpxInputComponent, decorators: [{
|
|
973
978
|
type: Component,
|
|
@@ -987,7 +992,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
|
|
|
987
992
|
useExisting: SpxInputComponent,
|
|
988
993
|
multi: true
|
|
989
994
|
}
|
|
990
|
-
], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<spx-input-box\r\n [spxLabel]=\"this.spxLabel()\"\r\n [spxReadonly]=\"this.spxReadonly()\"\r\n [spxRequired]=\"this.spxRequired()\"\r\n [spxValue]=\"this.value()\"\r\n [spxShowHelp]=\"this.spxShowHelp()\"\r\n [spxCompact]=\"this.spxCompact()\"\r\n [spxShowClear]=\"this.spxShowClear()\"\r\n [spxShowEdit]=\"this.spxShowEdit()\"\r\n [spxShowLabel]=\"this.spxShowLabel()\"\r\n [spxShowSearch]=\"this.spxShowSearch() ? this.spxShowSearch() : this.spxType() === 'autocomplete'\"\r\n [spxShowValidationMessages]=\"this.spxShowValidationMessages()\"\r\n (spxClear)=\"this.handleClear()\"\r\n (spxEdit)=\"this.handleEdit()\"\r\n (spxHelp)=\"this.handleHelp()\"\r\n (spxSearch)=\"this.handleSearch()\"\r\n (spxSetIdInParent)=\"handleSpxElementIdSet($event)\"\r\n >\r\n <div controls>\r\n @if (this.spxType() === 'autocomplete' || this.spxType() === 'overlay' || this.spxType() === 'overlaynumber' || this.spxType() === 'text' || this.spxType() === 'password') {\r\n <spx-input-text #spxInputText\r\n [spxAutocomplete]=\"this.spxAutocomplete() ? this.spxAutocomplete() : undefined\"\r\n [spxAutofocus]=\"this.spxAutofocus()\"\r\n [spxCapitalize]=\"this.spxCapitalize()\"\r\n [spxInputMode]=\"this.spxType() === 'overlaynumber' ? 'numeric' : this.spxInputMode()\"\r\n [spxName]=\"this.spxName()\"\r\n [spxPattern]=\"this.spxType() === 'overlaynumber' ? '[0-9]*' : this.spxPattern()\"\r\n [spxReadonly]=\"this.spxReadonly()\"\r\n [spxSuggestions]=\"this.spxSuggestions()\"\r\n [spxType]=\"this.spxType()\"\r\n [spxValidators]=\"this.spxValidators()\"\r\n [spxElementId]=\"this.spxElementId()\"\r\n [value]=\"value()\"\r\n (valueChange)=\"handleChangeEvent($event)\"\r\n ></spx-input-text>\r\n }\r\n @if (this.spxType() === 'date') {\r\n <spx-input-date #spxInputDate\r\n [spxMax]=\"this.spxMax()!\"\r\n [spxMin]=\"this.spxMin()!\"\r\n [spxReadonly]=\"this.spxReadonly()\"\r\n [spxSelectDay]=\"this.spxSelectDay()\"\r\n [spxSelectMonth]=\"this.spxSelectMonth()\"\r\n [spxValidators]=\"this.spxValidators()\"\r\n [value]=\"value()\"\r\n [spxElementId]=\"this.spxElementId()\"\r\n [spxAutoFocus]=\"this.spxAutofocus()\"\r\n (valueChange)=\"handleChangeEvent($event)\"\r\n ></spx-input-date>\r\n }\r\n @if (this.spxType() === 'float') {\r\n <spx-input-float #spxInputFloat\r\n [spxName]=\"this.spxName()\"\r\n [spxReadonly]=\"this.spxReadonly()\"\r\n [spxStep]=\"this.spxStep()\"\r\n [spxValidators]=\"this.spxValidators()\"\r\n [spxAutofocus]=\"this.spxAutofocus()\"\r\n [spxElementId]=\"this.spxElementId()\"\r\n [value]=\"value()\"\r\n (valueChange)=\"handleChangeEvent($event)\"\r\n ></spx-input-float>\r\n }\r\n @if (this.spxType() === 'number') {\r\n <spx-input-number #spxInputNumber\r\n [spxInputMode]=\"this.spxInputMode()\"\r\n [spxAutofocus]=\"this.spxAutofocus()\"\r\n [spxElementId]=\"this.spxElementId()\"\r\n [spxName]=\"this.spxName()\"\r\n [spxReadonly]=\"this.spxReadonly()\"\r\n [spxStep]=\"this.spxStep()\"\r\n [spxValidators]=\"this.spxValidators()\"\r\n [value]=\"value()\"\r\n (valueChange)=\"handleChangeEvent($event)\"\r\n ></spx-input-number>\r\n }\r\n @if (this.spxType() === 'radio') {\r\n <spx-input-radio\r\n #spxInputRadio\r\n [spxName]=\"this.spxName()\"\r\n [spxReadonly]=\"this.spxReadonly()\"\r\n [spxShowLabel]=\"this.spxShowLabel()\"\r\n [spxSuggestions]=\"this.spxSuggestions()\"\r\n [spxValidators]=\"this.spxValidators()\"\r\n [spxElementId]=\"this.spxElementId()\"\r\n [value]=\"value()\"\r\n (valueChange)=\"handleChangeEvent($event)\"\r\n ></spx-input-radio>\r\n }\r\n @if (this.spxType() === 'time') {\r\n <spx-input-time\r\n #spxInputTime\r\n [spxName]=\"this.spxName()\"\r\n [spxReadonly]=\"this.spxReadonly()\"\r\n [spxValidators]=\"this.spxValidators()\"\r\n [value]=\"value()\"\r\n (valueChange)=\"handleChangeEvent($event)\"\r\n ></spx-input-time>\r\n }\r\n </div>\r\n <div validation-messages>\r\n <ng-content></ng-content>\r\n </div>\r\n </spx-input-box>" }]
|
|
995
|
+
], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<spx-input-box\r\n [spxAlert]=\"this.spxAlert()\"\r\n [spxLabel]=\"this.spxLabel()\"\r\n [spxReadonly]=\"this.spxReadonly()\"\r\n [spxRequired]=\"this.spxRequired()\"\r\n [spxValue]=\"this.value()\"\r\n [spxShowHelp]=\"this.spxShowHelp()\"\r\n [spxCompact]=\"this.spxCompact()\"\r\n [spxShowClear]=\"this.spxShowClear()\"\r\n [spxShowEdit]=\"this.spxShowEdit()\"\r\n [spxShowLabel]=\"this.spxShowLabel()\"\r\n [spxShowSearch]=\"this.spxShowSearch() ? this.spxShowSearch() : this.spxType() === 'autocomplete'\"\r\n [spxShowValidationMessages]=\"this.spxShowValidationMessages()\"\r\n (spxClear)=\"this.handleClear()\"\r\n (spxEdit)=\"this.handleEdit()\"\r\n (spxHelp)=\"this.handleHelp()\"\r\n (spxSearch)=\"this.handleSearch()\"\r\n (spxSetIdInParent)=\"handleSpxElementIdSet($event)\"\r\n >\r\n <div controls>\r\n @if (this.spxType() === 'autocomplete' || this.spxType() === 'overlay' || this.spxType() === 'overlaynumber' || this.spxType() === 'text' || this.spxType() === 'password') {\r\n <spx-input-text #spxInputText\r\n [spxAutocomplete]=\"this.spxAutocomplete() ? this.spxAutocomplete() : undefined\"\r\n [spxAutofocus]=\"this.spxAutofocus()\"\r\n [spxCapitalize]=\"this.spxCapitalize()\"\r\n [spxInputMode]=\"this.spxType() === 'overlaynumber' ? 'numeric' : this.spxInputMode()\"\r\n [spxName]=\"this.spxName()\"\r\n [spxPattern]=\"this.spxType() === 'overlaynumber' ? '[0-9]*' : this.spxPattern()\"\r\n [spxReadonly]=\"this.spxReadonly()\"\r\n [spxSuggestions]=\"this.spxSuggestions()\"\r\n [spxType]=\"this.spxType()\"\r\n [spxValidators]=\"this.spxValidators()\"\r\n [spxElementId]=\"this.spxElementId()\"\r\n [value]=\"value()\"\r\n (valueChange)=\"handleChangeEvent($event)\"\r\n ></spx-input-text>\r\n }\r\n @if (this.spxType() === 'date') {\r\n <spx-input-date #spxInputDate\r\n [spxMax]=\"this.spxMax()!\"\r\n [spxMin]=\"this.spxMin()!\"\r\n [spxReadonly]=\"this.spxReadonly()\"\r\n [spxSelectDay]=\"this.spxSelectDay()\"\r\n [spxSelectMonth]=\"this.spxSelectMonth()\"\r\n [spxValidators]=\"this.spxValidators()\"\r\n [value]=\"value()\"\r\n [spxElementId]=\"this.spxElementId()\"\r\n [spxAutoFocus]=\"this.spxAutofocus()\"\r\n (valueChange)=\"handleChangeEvent($event)\"\r\n ></spx-input-date>\r\n }\r\n @if (this.spxType() === 'float') {\r\n <spx-input-float #spxInputFloat\r\n [spxName]=\"this.spxName()\"\r\n [spxReadonly]=\"this.spxReadonly()\"\r\n [spxStep]=\"this.spxStep()\"\r\n [spxValidators]=\"this.spxValidators()\"\r\n [spxAutofocus]=\"this.spxAutofocus()\"\r\n [spxElementId]=\"this.spxElementId()\"\r\n [value]=\"value()\"\r\n (valueChange)=\"handleChangeEvent($event)\"\r\n ></spx-input-float>\r\n }\r\n @if (this.spxType() === 'number') {\r\n <spx-input-number #spxInputNumber\r\n [spxInputMode]=\"this.spxInputMode()\"\r\n [spxAutofocus]=\"this.spxAutofocus()\"\r\n [spxElementId]=\"this.spxElementId()\"\r\n [spxName]=\"this.spxName()\"\r\n [spxReadonly]=\"this.spxReadonly()\"\r\n [spxStep]=\"this.spxStep()\"\r\n [spxValidators]=\"this.spxValidators()\"\r\n [value]=\"value()\"\r\n (valueChange)=\"handleChangeEvent($event)\"\r\n ></spx-input-number>\r\n }\r\n @if (this.spxType() === 'radio') {\r\n <spx-input-radio\r\n #spxInputRadio\r\n [spxName]=\"this.spxName()\"\r\n [spxReadonly]=\"this.spxReadonly()\"\r\n [spxShowLabel]=\"this.spxShowLabel()\"\r\n [spxSuggestions]=\"this.spxSuggestions()\"\r\n [spxValidators]=\"this.spxValidators()\"\r\n [spxElementId]=\"this.spxElementId()\"\r\n [value]=\"value()\"\r\n (valueChange)=\"handleChangeEvent($event)\"\r\n ></spx-input-radio>\r\n }\r\n @if (this.spxType() === 'time') {\r\n <spx-input-time\r\n #spxInputTime\r\n [spxName]=\"this.spxName()\"\r\n [spxReadonly]=\"this.spxReadonly()\"\r\n [spxValidators]=\"this.spxValidators()\"\r\n [value]=\"value()\"\r\n (valueChange)=\"handleChangeEvent($event)\"\r\n ></spx-input-time>\r\n }\r\n </div>\r\n <div validation-messages>\r\n <ng-content></ng-content>\r\n </div>\r\n </spx-input-box>" }]
|
|
991
996
|
}], propDecorators: { _handleBlurEvent: [{
|
|
992
997
|
type: HostListener,
|
|
993
998
|
args: ['focusout']
|