@softpak/components 21.1.0-beta.1 → 21.2.0-capwesome.1
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-404-page.mjs +3 -3
- package/fesm2022/softpak-components-spx-alert.mjs +3 -3
- package/fesm2022/softpak-components-spx-app-expiry.mjs +3 -3
- package/fesm2022/softpak-components-spx-button.mjs +3 -3
- package/fesm2022/softpak-components-spx-capitalize.mjs +3 -3
- package/fesm2022/softpak-components-spx-card.mjs +12 -12
- package/fesm2022/softpak-components-spx-change-details.mjs +3 -3
- package/fesm2022/softpak-components-spx-channel-selection.mjs +29 -49
- package/fesm2022/softpak-components-spx-channel-selection.mjs.map +1 -1
- package/fesm2022/softpak-components-spx-check-digit.mjs +3 -3
- package/fesm2022/softpak-components-spx-confirm.mjs +9 -9
- package/fesm2022/softpak-components-spx-form-section.mjs +3 -3
- package/fesm2022/softpak-components-spx-form-view.mjs +6 -6
- package/fesm2022/softpak-components-spx-inputs.mjs +36 -36
- package/fesm2022/softpak-components-spx-navigation.mjs +9 -9
- package/fesm2022/softpak-components-spx-number-check.mjs +3 -3
- package/fesm2022/softpak-components-spx-pagination.mjs +3 -3
- package/fesm2022/softpak-components-spx-patch.mjs +3 -3
- package/fesm2022/softpak-components-spx-pipes.mjs +3 -3
- package/fesm2022/softpak-components-spx-progress-bar.mjs +3 -3
- package/fesm2022/softpak-components-spx-spinner.mjs +3 -3
- package/fesm2022/softpak-components-spx-stock-info.mjs +3 -3
- package/fesm2022/softpak-components-spx-storage.mjs +1 -0
- package/fesm2022/softpak-components-spx-storage.mjs.map +1 -1
- package/fesm2022/softpak-components-spx-suggestion.mjs +3 -3
- package/fesm2022/softpak-components-spx-tabs.mjs +3 -3
- package/fesm2022/softpak-components-spx-toaster.mjs +3 -3
- package/fesm2022/softpak-components-spx-toggle.mjs +3 -3
- package/fesm2022/softpak-components-spx-update.mjs +75 -110
- package/fesm2022/softpak-components-spx-update.mjs.map +1 -1
- package/fesm2022/softpak-components-spx-validation-messages.mjs +3 -3
- package/fesm2022/softpak-components-spx-validation.mjs +3 -3
- package/fesm2022/softpak-components-spx-welcome.mjs +11 -11
- package/fesm2022/softpak-components-spx-welcome.mjs.map +1 -1
- package/package.json +2 -2
- package/types/softpak-components-spx-channel-selection.d.ts +16 -34
- package/types/softpak-components-spx-storage.d.ts +1 -0
- package/types/softpak-components-spx-update.d.ts +33 -62
- package/types/softpak-components-spx-welcome.d.ts +1 -1
|
@@ -28,10 +28,10 @@ class SpxConfirmComponent {
|
|
|
28
28
|
if (this.id()) { }
|
|
29
29
|
this.spxConfirm.emit(this.id());
|
|
30
30
|
}
|
|
31
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0
|
|
32
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0
|
|
31
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: SpxConfirmComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
32
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.0", type: SpxConfirmComponent, isStandalone: true, selector: "spx-confirm", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { spxCancel: "spxCancel", spxConfirm: "spxConfirm" }, ngImport: i0, template: "<div class=\"block spx-confirm h-full mt-12\">\n <div class=\"bg-amber-400 flex gap-3 items-center px-3 py-1 rounded-t text-black\">\n <div class=\"grow font-bold\">\n <ng-content select=\"[confirm__title]\"></ng-content>\n </div>\n <spx-button (spxClick)=\"onCancel()\" [spxType]=\"'button'\" [spxSeverity]=\"severityInfo\"><fa-icon\n [icon]=\"faTimes\"></fa-icon>\n </spx-button>\n </div>\n <div class=\"flex flex-col gap-3 dark:bg-gray-700 bg-white p-3\">\n <ng-content select=\"[confirm__content]\"></ng-content>\n <div class=\"grid grid-cols-1 grid-rows-2 sm:grid-rows-1 sm:grid-cols-2 gap-3 grid-flow-row\">\n <spx-button (spxClick)=\"onCancel()\" [spxFullWidth]=\"true\" [spxType]=\"'button'\"\n [spxSeverity]=\"severityError\">\n <ng-content select=\"[confirm__btn_cancel]\"></ng-content>\n </spx-button>\n <spx-button #confirm (spxClick)=\"onConfirm()\" [spxFullWidth]=\"true\" [spxType]=\"'submit'\"\n [spxSeverity]=\"severitySuccess\">\n <ng-content select=\"[confirm__btn_confirm]\"></ng-content>\n </spx-button>\n </div>\n </div>\n</div>", styles: [":host{position:absolute;z-index:var(--z-index--confirm);top:0;left:0;right:0;background-color:var(--color--backdrop)}.spx-confirm{background-color:var(--color--item--background);border-radius:3px;color:var(--ion-text-color, #000);position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:90%;max-width:960px}\n"], dependencies: [{ kind: "component", type: SpxButtonComponent, selector: "spx-button", inputs: ["spxDisabled", "spxClass", "spxClassObject", "spxForm", "spxFullHeight", "spxFullWidth", "spxSeverity", "spxSize", "spxTabIndex", "spxType", "spxName"], outputs: ["spxClick"] }, { kind: "component", type: FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "mask", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "transform", "a11yRole"], outputs: ["iconChange", "titleChange", "animationChange", "maskChange", "flipChange", "sizeChange", "pullChange", "borderChange", "inverseChange", "symbolChange", "rotateChange", "fixedWidthChange", "transformChange", "a11yRoleChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
33
33
|
}
|
|
34
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0
|
|
34
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: SpxConfirmComponent, decorators: [{
|
|
35
35
|
type: Component,
|
|
36
36
|
args: [{ selector: 'spx-confirm', imports: [SpxButtonComponent, FaIconComponent], changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, template: "<div class=\"block spx-confirm h-full mt-12\">\n <div class=\"bg-amber-400 flex gap-3 items-center px-3 py-1 rounded-t text-black\">\n <div class=\"grow font-bold\">\n <ng-content select=\"[confirm__title]\"></ng-content>\n </div>\n <spx-button (spxClick)=\"onCancel()\" [spxType]=\"'button'\" [spxSeverity]=\"severityInfo\"><fa-icon\n [icon]=\"faTimes\"></fa-icon>\n </spx-button>\n </div>\n <div class=\"flex flex-col gap-3 dark:bg-gray-700 bg-white p-3\">\n <ng-content select=\"[confirm__content]\"></ng-content>\n <div class=\"grid grid-cols-1 grid-rows-2 sm:grid-rows-1 sm:grid-cols-2 gap-3 grid-flow-row\">\n <spx-button (spxClick)=\"onCancel()\" [spxFullWidth]=\"true\" [spxType]=\"'button'\"\n [spxSeverity]=\"severityError\">\n <ng-content select=\"[confirm__btn_cancel]\"></ng-content>\n </spx-button>\n <spx-button #confirm (spxClick)=\"onConfirm()\" [spxFullWidth]=\"true\" [spxType]=\"'submit'\"\n [spxSeverity]=\"severitySuccess\">\n <ng-content select=\"[confirm__btn_confirm]\"></ng-content>\n </spx-button>\n </div>\n </div>\n</div>", styles: [":host{position:absolute;z-index:var(--z-index--confirm);top:0;left:0;right:0;background-color:var(--color--backdrop)}.spx-confirm{background-color:var(--color--item--background);border-radius:3px;color:var(--ion-text-color, #000);position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:90%;max-width:960px}\n"] }]
|
|
37
37
|
}], ctorParameters: () => [], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: true }] }], spxCancel: [{ type: i0.Output, args: ["spxCancel"] }], spxConfirm: [{ type: i0.Output, args: ["spxConfirm"] }] } });
|
|
@@ -66,10 +66,10 @@ class SpxConfirmDisplayerComponent {
|
|
|
66
66
|
id
|
|
67
67
|
}));
|
|
68
68
|
}
|
|
69
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0
|
|
70
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0
|
|
69
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: SpxConfirmDisplayerComponent, deps: [{ token: i1.Store }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
70
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: SpxConfirmDisplayerComponent, isStandalone: true, selector: "spx-confirm-displayer", ngImport: i0, template: "@if (confirms().length > 0) {\n <div class=\"bg-black/75 block relative h-full\" style=\"z-index: 1000\">\n @for (confirm of confirms(); track confirm.id) {\n <spx-confirm [id]=\"confirm.id\" (spxCancel)=\"onCancel($event)\"\n (spxConfirm)=\"onConfirm($event)\">\n <ng-container confirm__title>{{ confirm.title }}</ng-container>\n <ng-container confirm__content>{{ confirm.content }}</ng-container>\n <ng-container confirm__btn_cancel>{{confirm.noYesButton ? 'NO' : 'Cancel'}}</ng-container>\n <ng-container confirm__btn_confirm>{{confirm.noYesButton ? 'YES' : 'OK'}}</ng-container>\n </spx-confirm>\n }\n </div>\n}", styles: [""], dependencies: [{ kind: "component", type: SpxConfirmComponent, selector: "spx-confirm", inputs: ["id"], outputs: ["spxCancel", "spxConfirm"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
71
71
|
}
|
|
72
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0
|
|
72
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: SpxConfirmDisplayerComponent, decorators: [{
|
|
73
73
|
type: Component,
|
|
74
74
|
args: [{ selector: 'spx-confirm-displayer', imports: [SpxConfirmComponent], changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, template: "@if (confirms().length > 0) {\n <div class=\"bg-black/75 block relative h-full\" style=\"z-index: 1000\">\n @for (confirm of confirms(); track confirm.id) {\n <spx-confirm [id]=\"confirm.id\" (spxCancel)=\"onCancel($event)\"\n (spxConfirm)=\"onConfirm($event)\">\n <ng-container confirm__title>{{ confirm.title }}</ng-container>\n <ng-container confirm__content>{{ confirm.content }}</ng-container>\n <ng-container confirm__btn_cancel>{{confirm.noYesButton ? 'NO' : 'Cancel'}}</ng-container>\n <ng-container confirm__btn_confirm>{{confirm.noYesButton ? 'YES' : 'OK'}}</ng-container>\n </spx-confirm>\n }\n </div>\n}" }]
|
|
75
75
|
}], ctorParameters: () => [{ type: i1.Store }] });
|
|
@@ -149,10 +149,10 @@ class SpxConfirmEffects {
|
|
|
149
149
|
];
|
|
150
150
|
})));
|
|
151
151
|
}
|
|
152
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0
|
|
153
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0
|
|
152
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: SpxConfirmEffects, deps: [{ token: i1$1.Actions }, { token: i1.Store }], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
153
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: SpxConfirmEffects }); }
|
|
154
154
|
}
|
|
155
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0
|
|
155
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: SpxConfirmEffects, decorators: [{
|
|
156
156
|
type: Injectable
|
|
157
157
|
}], ctorParameters: () => [{ type: i1$1.Actions }, { type: i1.Store }] });
|
|
158
158
|
|
|
@@ -8,10 +8,10 @@ class SpxFormSectionComponent {
|
|
|
8
8
|
this.spxTitle = input(...(ngDevMode ? [undefined, { debugName: "spxTitle" }] : []));
|
|
9
9
|
this.spxShowTitle = input(true, ...(ngDevMode ? [{ debugName: "spxShowTitle" }] : []));
|
|
10
10
|
}
|
|
11
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0
|
|
12
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0
|
|
11
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: SpxFormSectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
12
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: SpxFormSectionComponent, isStandalone: true, selector: "spx-form-section", inputs: { spxIndex: { classPropertyName: "spxIndex", publicName: "spxIndex", isSignal: true, isRequired: false, transformFunction: null }, spxIndexSecondary: { classPropertyName: "spxIndexSecondary", publicName: "spxIndexSecondary", isSignal: true, isRequired: false, transformFunction: null }, spxTitle: { classPropertyName: "spxTitle", publicName: "spxTitle", isSignal: true, isRequired: false, transformFunction: null }, spxShowTitle: { classPropertyName: "spxShowTitle", publicName: "spxShowTitle", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (this.spxShowTitle()) {\n <div class=\"spx-form-section__title mb-3 flex gap-3 items-center\">\n <div class=\"spx-form-section__title-index flex content-center text-center text-sm h-[30px] w-[30px] font-bold rounded\">{{this.spxIndex()}}@if (this.spxIndexSecondary()) {\n {{ this.spxIndexSecondary() }}\n }</div>\n <div class=\"spx-form-section__content font-bold grow text-black dark:text-white\">{{this.spxTitle()}}</div>\n </div>\n}\n<div class=\"flex flex-col gap-3\">\n <ng-content></ng-content>\n</div>", styles: [":host{display:block}.spx-form-section__title-index{background-color:#000;display:inline-block;vertical-align:middle}.spx-form-section__title{color:var(--spx-form-section--color, #FFFFFF)}.spx-form-section__content{color:#000}@media(prefers-color-scheme:dark){.spx-form-section__title-index{background-color:var(--spx-form-section--color, #FFFFFF);color:#000}.spx-form-section__content{color:var(--spx-form-section--color, #FFFFFF)}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
13
13
|
}
|
|
14
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0
|
|
14
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: SpxFormSectionComponent, decorators: [{
|
|
15
15
|
type: Component,
|
|
16
16
|
args: [{ selector: 'spx-form-section', imports: [], changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, template: "@if (this.spxShowTitle()) {\n <div class=\"spx-form-section__title mb-3 flex gap-3 items-center\">\n <div class=\"spx-form-section__title-index flex content-center text-center text-sm h-[30px] w-[30px] font-bold rounded\">{{this.spxIndex()}}@if (this.spxIndexSecondary()) {\n {{ this.spxIndexSecondary() }}\n }</div>\n <div class=\"spx-form-section__content font-bold grow text-black dark:text-white\">{{this.spxTitle()}}</div>\n </div>\n}\n<div class=\"flex flex-col gap-3\">\n <ng-content></ng-content>\n</div>", styles: [":host{display:block}.spx-form-section__title-index{background-color:#000;display:inline-block;vertical-align:middle}.spx-form-section__title{color:var(--spx-form-section--color, #FFFFFF)}.spx-form-section__content{color:#000}@media(prefers-color-scheme:dark){.spx-form-section__title-index{background-color:var(--spx-form-section--color, #FFFFFF);color:#000}.spx-form-section__content{color:var(--spx-form-section--color, #FFFFFF)}}\n"] }]
|
|
17
17
|
}], propDecorators: { spxIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "spxIndex", required: false }] }], spxIndexSecondary: [{ type: i0.Input, args: [{ isSignal: true, alias: "spxIndexSecondary", required: false }] }], spxTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "spxTitle", required: false }] }], spxShowTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "spxShowTitle", required: false }] }] } });
|
|
@@ -96,10 +96,10 @@ class SpxAutocompleteSearchComponent {
|
|
|
96
96
|
this.ctrlQuery().setValue(valuePair);
|
|
97
97
|
});
|
|
98
98
|
}
|
|
99
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0
|
|
100
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0
|
|
99
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: SpxAutocompleteSearchComponent, deps: [{ token: i1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
100
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: SpxAutocompleteSearchComponent, isStandalone: true, selector: "spx-autocomplete-search", inputs: { spxSuggestions: { classPropertyName: "spxSuggestions", publicName: "spxSuggestions", isSignal: true, isRequired: false, transformFunction: null }, spxField: { classPropertyName: "spxField", publicName: "spxField", isSignal: true, isRequired: true, transformFunction: null }, txtOptions: { classPropertyName: "txtOptions", publicName: "txtOptions", isSignal: true, isRequired: true, transformFunction: null }, txtQuery: { classPropertyName: "txtQuery", publicName: "txtQuery", isSignal: true, isRequired: true, transformFunction: null }, txtSubmit: { classPropertyName: "txtSubmit", publicName: "txtSubmit", isSignal: true, isRequired: true, transformFunction: null }, spxValuePair: { classPropertyName: "spxValuePair", publicName: "spxValuePair", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { spxCancel: "spxCancel", spxSearch: "spxSearch", spxSubmit: "spxSubmit" }, ngImport: i0, template: "@if(formGroup()) {\n <form class=\"bg-black fixed pt-16 z-50 top-0 left-0 right-0 bottom-0\" [formGroup]=\"formGroup()!\" (ngSubmit)=\"onSubmit()\">\n <div class=\"h-full w-full px-3 flex flex-col gap-3\">\n <div class=\"grow flex flex-col gap-3 overflow-y-auto\">\n <spx-input [formControl]=\"ctrlQuery()\" [spxLabel]=\"txtQuery()\" [spxType]=\"inputTypeText\">\n </spx-input>\n <spx-input [formControl]=\"ctrlOptions()\" [spxLabel]=\"txtOptions()\" [spxSuggestions]=\"spxSuggestions()\"\n [spxType]=\"inputTypeRadio\">\n </spx-input>\n </div>\n <div class=\"py-3 flex flex-col gap-3\">\n <spx-button [spxFullWidth]=\"true\" [spxSeverity]=\"SpxSeverity.success\">\n Save\n </spx-button>\n <spx-button [spxFullWidth]=\"true\" [spxSeverity]=\"SpxSeverity.error\" [spxType]=\"'button'\" (spxClick)=\"onCancel()\">\n Cancel\n </spx-button>\n </div>\n </div>\n </form>\n}\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: SpxButtonComponent, selector: "spx-button", inputs: ["spxDisabled", "spxClass", "spxClassObject", "spxForm", "spxFullHeight", "spxFullWidth", "spxSeverity", "spxSize", "spxTabIndex", "spxType", "spxName"], outputs: ["spxClick"] }, { kind: "component", type: SpxInputComponent, selector: "spx-input", inputs: ["spxSpeedDial", "spxLabel", "spxMax", "spxMin", "spxName", "spxReadonly", "spxAutocomplete", "spxAutofocus", "spxInputMode", "spxPattern", "spxRequired", "spxSelectMonth", "spxSelectDay", "spxShowEdit", "spxShowHelp", "spxShowLabel", "spxCompact", "spxShowClear", "spxShowSearch", "spxAlert", "spxShowValidationMessages", "spxStep", "spxSuggestions", "spxType", "spxValidators", "spxCapitalize", "spxCycleConfig"], outputs: ["spxClear", "spxEdit", "spxHelp", "spxSearch", "spxBlur"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
101
101
|
}
|
|
102
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0
|
|
102
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: SpxAutocompleteSearchComponent, decorators: [{
|
|
103
103
|
type: Component,
|
|
104
104
|
args: [{ selector: 'spx-autocomplete-search', imports: [
|
|
105
105
|
FormsModule,
|
|
@@ -199,10 +199,10 @@ class SpxFormViewComponent {
|
|
|
199
199
|
}, {});
|
|
200
200
|
return new FormGroup(controls);
|
|
201
201
|
}
|
|
202
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0
|
|
203
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0
|
|
202
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: SpxFormViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
203
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: SpxFormViewComponent, isStandalone: true, selector: "spx-form-view", inputs: { spxFormGroup: { classPropertyName: "spxFormGroup", publicName: "spxFormGroup", isSignal: true, isRequired: true, transformFunction: null }, spxForm: { classPropertyName: "spxForm", publicName: "spxForm", isSignal: true, isRequired: true, transformFunction: null }, spxSuggestions: { classPropertyName: "spxSuggestions", publicName: "spxSuggestions", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { spxBlur: "spxBlur", spxClick: "spxClick", spxSearch: "spxSearch" }, viewQueries: [{ propertyName: "spxInputs", predicate: (ElementRef), descendants: true, isSignal: true }], ngImport: i0, template: "@if (autoCompleteField()) {\n <spx-autocomplete-search\n [spxField]=\"autoCompleteField()!\"\n [spxSuggestions]=\"this.spxSuggestions()[autoCompleteField()!.key]\"\n [spxValuePair]=\"$any(this.spxFormGroup().get(autoCompleteField()!.key)).value\"\n [txtOptions]=\"'Options'\"\n [txtQuery]=\"'Query'\"\n [txtSubmit]=\"'Save'\"\n (spxCancel)=\"onAutocompleteCancel()\"\n (spxSearch)=\"onAutocompleteSearch($event)\"\n (spxSubmit)=\"onAutocompleteSave($event)\">\n </spx-autocomplete-search>\n}\n<div class=\"flex flex-col gap-3\">\n @for (spxSection of spxForm().sections; track spxSection; let spxSectionIndex = $index) {\n <spx-form-section\n [spxShowTitle]=\"!spxSection.showTitle || spxSection.showTitle()\"\n [spxIndex]=\"spxSectionIndex + 1\"\n [spxTitle]=\"spxSection.title ? (spxSection.title() | translate | capitalize) : undefined\">\n @for (spxField of spxSection.fields; track spxField; let spxFieldIndex = $index) {\n @if (spxField.show === undefined || spxField.show()) {\n @if (spxField.type() === typeButton) {\n <spx-button\n [spxDisabled]=\"spxField.readonly ? spxField.readonly() : false\"\n [spxFullWidth]=\"true\"\n [spxSeverity]=\"spxField.severity ? spxField.severity() : undefined\"\n [spxType]=\"'button'\"\n (spxClick)=\"onClick(spxField)\"\n >{{ (spxField.label ? spxField.label() : spxField.key) | translate | capitalize }}</spx-button>\n }\n @if (spxField.type() === typeOverlay || spxField.type() === typeOverlayNumber || spxField.type() === typeFloat || spxField.type() === typeNumber || spxField.type() === typeText || spxField.type() === typeAutocomplete || spxField.type() === typeNumericKeyboard) {\n <spx-input\n [formControl]=\"$any(this.spxFormGroup().get(spxField.key))\"\n [spxAutofocus]=\"spxField.autofocus ? spxField.autofocus() : false\"\n [spxCapitalize]=\"spxField.capitalize ? spxField.capitalize() : false\"\n [spxLabel]=\"(spxField.label ? spxField.label() : spxField.key) | translate | capitalize\"\n [spxName]=\"spxField.key\"\n [spxPattern]=\"spxField.type() === typeNumericKeyboard ? '\\\\d*' : undefined\"\n [spxReadonly]=\"spxField.readonly ? spxField.readonly() : false\"\n [spxRequired]=\"checkRequired(this.spxFormGroup().get(spxField.key)!)\"\n [spxShowSearch]=\"spxField.type() === typeAutocomplete\"\n [spxShowHelp]=\"false\"\n [spxShowValidationMessages]=\"this.spxFormGroup().get(spxField.key)! && this.spxFormGroup().get(spxField.key)!.errors && this.spxFormGroup().get(spxField.key)!.touched\"\n [spxStep]=\"spxField.step ? spxField.step() : undefined\"\n [spxType]=\"spxField.type()\"\n [spxValidators]=\"getRawValidators(this.spxFormGroup().get(spxField.key)!)\"\n [spxSuggestions]=\"spxField.suggestionsFixed ? spxField.suggestionsFixed() : this.spxSuggestions()[spxField.key]\"\n (spxBlur)=\"onBlur(spxField)\"\n (spxSearch)=\"onSearch(spxField)\">\n <spx-validate-control [errors]=\"$any(this.spxFormGroup().get(spxField.key)).errors\" [touched]=\"$any(this.spxFormGroup().get(spxField.key)).touched\" [control]=\"$any(this.spxFormGroup().get(spxField.key))\" [label]=\"(spxField.label ? spxField.label() : spxField.key)| translate | capitalize\"></spx-validate-control>\n </spx-input>\n }\n @if (spxField.type() === typeRadio) {\n <spx-input\n [formControl]=\"$any(this.spxFormGroup().get(spxField.key))\"\n [spxLabel]=\"(spxField.label ? spxField.label() : spxField.key) | translate | capitalize\"\n [spxName]=\"spxField.key\"\n [spxReadonly]=\"spxField.readonly ? spxField.readonly() : false\"\n [spxRequired]=\"checkRequired(this.spxFormGroup().get(spxField.key)!)\"\n [spxShowHelp]=\"false\"\n [spxShowValidationMessages]=\"this.spxFormGroup().get(spxField.key)! && this.spxFormGroup().get(spxField.key)!.errors && this.spxFormGroup().get(spxField.key)!.touched\"\n [spxSuggestions]=\"spxField.suggestionsFixed ? spxField.suggestionsFixed() : this.spxSuggestions()[spxField.key]\"\n [spxType]=\"typeRadio\"\n [spxValidators]=\"getRawValidators(this.spxFormGroup().get(spxField.key)!)\">\n <spx-validate-control [errors]=\"$any(this.spxFormGroup().get(spxField.key)).errors\" [touched]=\"$any(this.spxFormGroup().get(spxField.key)).touched\" [control]=\"$any(this.spxFormGroup().get(spxField.key))\" [label]=\"(spxField.label ? spxField.label() : spxField.key) | translate | capitalize\"></spx-validate-control>\n </spx-input>\n }\n }\n \n }\n </spx-form-section>\n }\n\n @for (spxButton of spxForm().buttons; track spxButton) {\n <spx-button\n [spxFullWidth]=\"true\"\n [spxSeverity]=\"spxButton.severity\"\n [spxType]=\"spxButton.type\"\n (spxClick)=\"spxButton.onClick ? spxButton.onClick() : undefined\">\n {{ ((spxButton && spxButton.label) ? spxButton.label() : '') | translate | capitalize }}\n </spx-button>\n }\n</div>", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: SpxAutocompleteSearchComponent, selector: "spx-autocomplete-search", inputs: ["spxSuggestions", "spxField", "txtOptions", "txtQuery", "txtSubmit", "spxValuePair"], outputs: ["spxCancel", "spxSearch", "spxSubmit"] }, { kind: "component", type: SpxButtonComponent, selector: "spx-button", inputs: ["spxDisabled", "spxClass", "spxClassObject", "spxForm", "spxFullHeight", "spxFullWidth", "spxSeverity", "spxSize", "spxTabIndex", "spxType", "spxName"], outputs: ["spxClick"] }, { kind: "component", type: SpxFormSectionComponent, selector: "spx-form-section", inputs: ["spxIndex", "spxIndexSecondary", "spxTitle", "spxShowTitle"] }, { kind: "component", type: SpxInputComponent, selector: "spx-input", inputs: ["spxSpeedDial", "spxLabel", "spxMax", "spxMin", "spxName", "spxReadonly", "spxAutocomplete", "spxAutofocus", "spxInputMode", "spxPattern", "spxRequired", "spxSelectMonth", "spxSelectDay", "spxShowEdit", "spxShowHelp", "spxShowLabel", "spxCompact", "spxShowClear", "spxShowSearch", "spxAlert", "spxShowValidationMessages", "spxStep", "spxSuggestions", "spxType", "spxValidators", "spxCapitalize", "spxCycleConfig"], outputs: ["spxClear", "spxEdit", "spxHelp", "spxSearch", "spxBlur"] }, { kind: "component", type: SpxValidateControlComponent, selector: "spx-validate-control", inputs: ["control", "label", "submitTried", "errors", "touched"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: SpxCapitalizePipe, name: "capitalize" }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
204
204
|
}
|
|
205
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0
|
|
205
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: SpxFormViewComponent, decorators: [{
|
|
206
206
|
type: Component,
|
|
207
207
|
args: [{ selector: 'spx-form-view', imports: [
|
|
208
208
|
FormsModule,
|