@softpak/components 21.3.17 → 21.3.18
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 +3 -3
- package/fesm2022/softpak-components-spx-form-view.mjs.map +1 -1
- package/fesm2022/softpak-components-spx-inputs.mjs +16 -9
- package/fesm2022/softpak-components-spx-inputs.mjs.map +1 -1
- package/fesm2022/softpak-components-spx-welcome.mjs +3 -0
- package/fesm2022/softpak-components-spx-welcome.mjs.map +1 -1
- package/package.json +1 -1
- package/types/softpak-components-spx-form-view.d.ts +4 -0
- package/types/softpak-components-spx-inputs.d.ts +9 -4
- package/types/softpak-components-spx-welcome.d.ts +2 -2
|
@@ -2,7 +2,7 @@ import * as i0 from '@angular/core';
|
|
|
2
2
|
import { Injectable, Directive, inject, contentChild, computed, input, model, output, signal, HostListener, ChangeDetectionStrategy, Component, viewChild, EventEmitter, effect, untracked, ViewChildren, Output } from '@angular/core';
|
|
3
3
|
import { faEdit, faSearch, faQuestion, faTimes, faCheck, faXmark } from '@fortawesome/free-solid-svg-icons';
|
|
4
4
|
import * as i1 from '@fortawesome/angular-fontawesome';
|
|
5
|
-
import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
|
|
5
|
+
import { FontAwesomeModule, FaIconComponent } from '@fortawesome/angular-fontawesome';
|
|
6
6
|
import { IsSeverityPipe } from '@softpak/components/spx-pipes';
|
|
7
7
|
import { BehaviorSubject, map, pairwise, filter, fromEvent } from 'rxjs';
|
|
8
8
|
import { SpxButtonComponent } from '@softpak/components/spx-button';
|
|
@@ -1163,6 +1163,9 @@ class SpxInputCheckboxComponent {
|
|
|
1163
1163
|
constructor() {
|
|
1164
1164
|
this.spxReadonly = input(false, ...(ngDevMode ? [{ debugName: "spxReadonly" }] : []));
|
|
1165
1165
|
this.spxText = input(...(ngDevMode ? [undefined, { debugName: "spxText" }] : []));
|
|
1166
|
+
this.spxIcon = input(...(ngDevMode ? [undefined, { debugName: "spxIcon" }] : []));
|
|
1167
|
+
this.spxIconClass = input(...(ngDevMode ? [undefined, { debugName: "spxIconClass" }] : []));
|
|
1168
|
+
this.spxBgClass = input(...(ngDevMode ? [undefined, { debugName: "spxBgClass" }] : []));
|
|
1166
1169
|
this.spxTextSelect = spxTextSelect;
|
|
1167
1170
|
this.value = model(...(ngDevMode ? [undefined, { debugName: "value" }] : []));
|
|
1168
1171
|
this.faCheck = faCheck;
|
|
@@ -1176,16 +1179,17 @@ class SpxInputCheckboxComponent {
|
|
|
1176
1179
|
this.value.set({ value: !this.checked });
|
|
1177
1180
|
}
|
|
1178
1181
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: SpxInputCheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1179
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: SpxInputCheckboxComponent, isStandalone: true, selector: "spx-input-checkbox", inputs: { spxReadonly: { classPropertyName: "spxReadonly", publicName: "spxReadonly", isSignal: true, isRequired: false, transformFunction: null }, spxText: { classPropertyName: "spxText", publicName: "spxText", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, ngImport: i0, template: "<button\n type=\"button\"\n class=\"flex items-center gap-3 w-full rounded p-3 text-sm text-gray-900 outline-none text-left\"\n [class.bg-sky-100]=\"!spxReadonly()\"\n [class.hover:bg-sky-300]=\"!spxReadonly()\"\n [class.active:bg-sky-300]=\"!spxReadonly()\"\n [class.bg-gray-200]=\"spxReadonly()\"\n [class.cursor-not-allowed]=\"spxReadonly()\"\n [class.opacity-60]=\"spxReadonly()\"\n (click)=\"toggle()\"\n>\n <span\n class=\"flex-none flex items-center justify-center w-5 h-5 rounded border-2\"\n [class.border-teal-500]=\"checked\"\n [class.bg-teal-500]=\"checked\"\n [class.border-gray-400]=\"!checked\"\n [class.bg-white]=\"!checked\"\n >\n @if (checked) {\n <fa-icon [icon]=\"faCheck\" class=\"text-white text-xs\"></fa-icon>\n }\n </span>\n @if (spxText()) {\n <span>{{ spxText() }}</span>\n } @else {\n <span>{{ spxTextSelect | translate | capitalize }}</span>\n }\n
|
|
1182
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: SpxInputCheckboxComponent, isStandalone: true, selector: "spx-input-checkbox", inputs: { spxReadonly: { classPropertyName: "spxReadonly", publicName: "spxReadonly", isSignal: true, isRequired: false, transformFunction: null }, spxText: { classPropertyName: "spxText", publicName: "spxText", isSignal: true, isRequired: false, transformFunction: null }, spxIcon: { classPropertyName: "spxIcon", publicName: "spxIcon", isSignal: true, isRequired: false, transformFunction: null }, spxIconClass: { classPropertyName: "spxIconClass", publicName: "spxIconClass", isSignal: true, isRequired: false, transformFunction: null }, spxBgClass: { classPropertyName: "spxBgClass", publicName: "spxBgClass", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, ngImport: i0, template: "<button\n type=\"button\"\n class=\"flex items-center gap-3 w-full rounded p-3 text-sm text-gray-900 outline-none text-left relative overflow-hidden\"\n [class.bg-sky-100]=\"!spxReadonly() && !spxBgClass()\"\n [class.hover:bg-sky-300]=\"!spxReadonly()\"\n [class.active:bg-sky-300]=\"!spxReadonly()\"\n [class.bg-gray-200]=\"spxReadonly()\"\n [class.cursor-not-allowed]=\"spxReadonly()\"\n [class.opacity-60]=\"spxReadonly()\"\n [ngClass]=\"(!spxReadonly() && spxBgClass()) ? spxBgClass()! : ''\"\n (click)=\"toggle()\"\n>\n <span\n class=\"flex-none flex items-center justify-center w-5 h-5 rounded border-2\"\n [class.border-teal-500]=\"checked\"\n [class.bg-teal-500]=\"checked\"\n [class.border-gray-400]=\"!checked\"\n [class.bg-white]=\"!checked\"\n >\n @if (checked) {\n <fa-icon [icon]=\"faCheck\" class=\"text-white text-xs\"></fa-icon>\n }\n </span>\n @if (spxText()) {\n <span>{{ spxText() }}</span>\n } @else {\n <span>{{ spxTextSelect | translate | capitalize }}</span>\n }\n @if (spxIcon()) {\n <fa-icon [icon]=\"spxIcon()!\" class=\"absolute right-2 top-1/2 -translate-y-1/2 text-lg opacity-30\" [ngClass]=\"spxIconClass() ?? ''\"></fa-icon>\n }\n</button>\n", dependencies: [{ 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"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: SpxCapitalizePipe, name: "capitalize" }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1180
1183
|
}
|
|
1181
1184
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: SpxInputCheckboxComponent, decorators: [{
|
|
1182
1185
|
type: Component,
|
|
1183
1186
|
args: [{ selector: 'spx-input-checkbox', standalone: true, imports: [
|
|
1184
|
-
|
|
1187
|
+
FaIconComponent,
|
|
1188
|
+
NgClass,
|
|
1185
1189
|
SpxCapitalizePipe,
|
|
1186
1190
|
TranslatePipe,
|
|
1187
|
-
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n type=\"button\"\n class=\"flex items-center gap-3 w-full rounded p-3 text-sm text-gray-900 outline-none text-left\"\n [class.bg-sky-100]=\"!spxReadonly()\"\n [class.hover:bg-sky-300]=\"!spxReadonly()\"\n [class.active:bg-sky-300]=\"!spxReadonly()\"\n [class.bg-gray-200]=\"spxReadonly()\"\n [class.cursor-not-allowed]=\"spxReadonly()\"\n [class.opacity-60]=\"spxReadonly()\"\n (click)=\"toggle()\"\n>\n <span\n class=\"flex-none flex items-center justify-center w-5 h-5 rounded border-2\"\n [class.border-teal-500]=\"checked\"\n [class.bg-teal-500]=\"checked\"\n [class.border-gray-400]=\"!checked\"\n [class.bg-white]=\"!checked\"\n >\n @if (checked) {\n <fa-icon [icon]=\"faCheck\" class=\"text-white text-xs\"></fa-icon>\n }\n </span>\n @if (spxText()) {\n <span>{{ spxText() }}</span>\n } @else {\n <span>{{ spxTextSelect | translate | capitalize }}</span>\n }\n</button>\n" }]
|
|
1188
|
-
}], propDecorators: { spxReadonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "spxReadonly", required: false }] }], spxText: [{ type: i0.Input, args: [{ isSignal: true, alias: "spxText", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }] } });
|
|
1191
|
+
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n type=\"button\"\n class=\"flex items-center gap-3 w-full rounded p-3 text-sm text-gray-900 outline-none text-left relative overflow-hidden\"\n [class.bg-sky-100]=\"!spxReadonly() && !spxBgClass()\"\n [class.hover:bg-sky-300]=\"!spxReadonly()\"\n [class.active:bg-sky-300]=\"!spxReadonly()\"\n [class.bg-gray-200]=\"spxReadonly()\"\n [class.cursor-not-allowed]=\"spxReadonly()\"\n [class.opacity-60]=\"spxReadonly()\"\n [ngClass]=\"(!spxReadonly() && spxBgClass()) ? spxBgClass()! : ''\"\n (click)=\"toggle()\"\n>\n <span\n class=\"flex-none flex items-center justify-center w-5 h-5 rounded border-2\"\n [class.border-teal-500]=\"checked\"\n [class.bg-teal-500]=\"checked\"\n [class.border-gray-400]=\"!checked\"\n [class.bg-white]=\"!checked\"\n >\n @if (checked) {\n <fa-icon [icon]=\"faCheck\" class=\"text-white text-xs\"></fa-icon>\n }\n </span>\n @if (spxText()) {\n <span>{{ spxText() }}</span>\n } @else {\n <span>{{ spxTextSelect | translate | capitalize }}</span>\n }\n @if (spxIcon()) {\n <fa-icon [icon]=\"spxIcon()!\" class=\"absolute right-2 top-1/2 -translate-y-1/2 text-lg opacity-30\" [ngClass]=\"spxIconClass() ?? ''\"></fa-icon>\n }\n</button>\n" }]
|
|
1192
|
+
}], propDecorators: { spxReadonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "spxReadonly", required: false }] }], spxText: [{ type: i0.Input, args: [{ isSignal: true, alias: "spxText", required: false }] }], spxIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "spxIcon", required: false }] }], spxIconClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "spxIconClass", required: false }] }], spxBgClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "spxBgClass", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }] } });
|
|
1189
1193
|
|
|
1190
1194
|
class SpxInputTimeModalComponent {
|
|
1191
1195
|
constructor(modalController) {
|
|
@@ -1344,6 +1348,9 @@ class SpxInputComponent {
|
|
|
1344
1348
|
this.spxCapitalize = input(false, ...(ngDevMode ? [{ debugName: "spxCapitalize" }] : []));
|
|
1345
1349
|
this.spxCycleConfig = input(...(ngDevMode ? [undefined, { debugName: "spxCycleConfig" }] : []));
|
|
1346
1350
|
this.spxCheckboxText = input(...(ngDevMode ? [undefined, { debugName: "spxCheckboxText" }] : []));
|
|
1351
|
+
this.spxCheckboxIcon = input(...(ngDevMode ? [undefined, { debugName: "spxCheckboxIcon" }] : []));
|
|
1352
|
+
this.spxCheckboxIconClass = input(...(ngDevMode ? [undefined, { debugName: "spxCheckboxIconClass" }] : []));
|
|
1353
|
+
this.spxCheckboxBgClass = input(...(ngDevMode ? [undefined, { debugName: "spxCheckboxBgClass" }] : []));
|
|
1347
1354
|
this.value = signal({ value: null, description: null }, ...(ngDevMode ? [{ debugName: "value" }] : []));
|
|
1348
1355
|
this.spxClear = output();
|
|
1349
1356
|
this.spxEdit = output();
|
|
@@ -1474,13 +1481,13 @@ class SpxInputComponent {
|
|
|
1474
1481
|
this.onTouched = fn;
|
|
1475
1482
|
}
|
|
1476
1483
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: SpxInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1477
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: SpxInputComponent, isStandalone: true, selector: "spx-input", inputs: { spxSpeedDial: { classPropertyName: "spxSpeedDial", publicName: "spxSpeedDial", isSignal: true, isRequired: false, transformFunction: null }, spxLabel: { classPropertyName: "spxLabel", publicName: "spxLabel", isSignal: true, isRequired: false, transformFunction: null }, spxMax: { classPropertyName: "spxMax", publicName: "spxMax", isSignal: true, isRequired: false, transformFunction: null }, spxMin: { classPropertyName: "spxMin", publicName: "spxMin", isSignal: true, isRequired: false, transformFunction: null }, spxName: { classPropertyName: "spxName", publicName: "spxName", isSignal: true, isRequired: false, transformFunction: null }, spxReadonly: { classPropertyName: "spxReadonly", publicName: "spxReadonly", isSignal: true, isRequired: false, transformFunction: null }, spxAutocomplete: { classPropertyName: "spxAutocomplete", publicName: "spxAutocomplete", isSignal: true, isRequired: false, transformFunction: null }, spxAutofocus: { classPropertyName: "spxAutofocus", publicName: "spxAutofocus", isSignal: true, isRequired: false, transformFunction: null }, spxInputMode: { classPropertyName: "spxInputMode", publicName: "spxInputMode", isSignal: true, isRequired: false, transformFunction: null }, spxPattern: { classPropertyName: "spxPattern", publicName: "spxPattern", isSignal: true, isRequired: false, transformFunction: null }, spxRequired: { classPropertyName: "spxRequired", publicName: "spxRequired", isSignal: true, isRequired: false, transformFunction: null }, spxSelectMonth: { classPropertyName: "spxSelectMonth", publicName: "spxSelectMonth", isSignal: true, isRequired: false, transformFunction: null }, spxSelectDay: { classPropertyName: "spxSelectDay", publicName: "spxSelectDay", isSignal: true, isRequired: false, transformFunction: null }, spxShowEdit: { classPropertyName: "spxShowEdit", publicName: "spxShowEdit", isSignal: true, isRequired: false, transformFunction: null }, spxShowHelp: { classPropertyName: "spxShowHelp", publicName: "spxShowHelp", isSignal: true, isRequired: false, transformFunction: null }, spxLeftIcon: { classPropertyName: "spxLeftIcon", publicName: "spxLeftIcon", isSignal: true, isRequired: false, transformFunction: null }, spxShowLabel: { classPropertyName: "spxShowLabel", publicName: "spxShowLabel", isSignal: true, isRequired: false, transformFunction: null }, spxCompact: { classPropertyName: "spxCompact", publicName: "spxCompact", isSignal: true, isRequired: false, transformFunction: null }, spxShowClear: { classPropertyName: "spxShowClear", publicName: "spxShowClear", isSignal: true, isRequired: false, transformFunction: null }, spxShowSearch: { classPropertyName: "spxShowSearch", publicName: "spxShowSearch", isSignal: true, isRequired: false, transformFunction: null }, spxAlert: { classPropertyName: "spxAlert", publicName: "spxAlert", isSignal: true, isRequired: false, transformFunction: null }, spxShowValidationMessages: { classPropertyName: "spxShowValidationMessages", publicName: "spxShowValidationMessages", isSignal: true, isRequired: false, transformFunction: null }, spxStep: { classPropertyName: "spxStep", publicName: "spxStep", isSignal: true, isRequired: false, transformFunction: null }, spxSuggestions: { classPropertyName: "spxSuggestions", publicName: "spxSuggestions", isSignal: true, isRequired: false, transformFunction: null }, spxType: { classPropertyName: "spxType", publicName: "spxType", isSignal: true, isRequired: false, transformFunction: null }, spxValidators: { classPropertyName: "spxValidators", publicName: "spxValidators", isSignal: true, isRequired: false, transformFunction: null }, spxCapitalize: { classPropertyName: "spxCapitalize", publicName: "spxCapitalize", isSignal: true, isRequired: false, transformFunction: null }, spxCycleConfig: { classPropertyName: "spxCycleConfig", publicName: "spxCycleConfig", isSignal: true, isRequired: false, transformFunction: null }, spxCheckboxText: { classPropertyName: "spxCheckboxText", publicName: "spxCheckboxText", 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: [
|
|
1484
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: SpxInputComponent, isStandalone: true, selector: "spx-input", inputs: { spxSpeedDial: { classPropertyName: "spxSpeedDial", publicName: "spxSpeedDial", isSignal: true, isRequired: false, transformFunction: null }, spxLabel: { classPropertyName: "spxLabel", publicName: "spxLabel", isSignal: true, isRequired: false, transformFunction: null }, spxMax: { classPropertyName: "spxMax", publicName: "spxMax", isSignal: true, isRequired: false, transformFunction: null }, spxMin: { classPropertyName: "spxMin", publicName: "spxMin", isSignal: true, isRequired: false, transformFunction: null }, spxName: { classPropertyName: "spxName", publicName: "spxName", isSignal: true, isRequired: false, transformFunction: null }, spxReadonly: { classPropertyName: "spxReadonly", publicName: "spxReadonly", isSignal: true, isRequired: false, transformFunction: null }, spxAutocomplete: { classPropertyName: "spxAutocomplete", publicName: "spxAutocomplete", isSignal: true, isRequired: false, transformFunction: null }, spxAutofocus: { classPropertyName: "spxAutofocus", publicName: "spxAutofocus", isSignal: true, isRequired: false, transformFunction: null }, spxInputMode: { classPropertyName: "spxInputMode", publicName: "spxInputMode", isSignal: true, isRequired: false, transformFunction: null }, spxPattern: { classPropertyName: "spxPattern", publicName: "spxPattern", isSignal: true, isRequired: false, transformFunction: null }, spxRequired: { classPropertyName: "spxRequired", publicName: "spxRequired", isSignal: true, isRequired: false, transformFunction: null }, spxSelectMonth: { classPropertyName: "spxSelectMonth", publicName: "spxSelectMonth", isSignal: true, isRequired: false, transformFunction: null }, spxSelectDay: { classPropertyName: "spxSelectDay", publicName: "spxSelectDay", isSignal: true, isRequired: false, transformFunction: null }, spxShowEdit: { classPropertyName: "spxShowEdit", publicName: "spxShowEdit", isSignal: true, isRequired: false, transformFunction: null }, spxShowHelp: { classPropertyName: "spxShowHelp", publicName: "spxShowHelp", isSignal: true, isRequired: false, transformFunction: null }, spxLeftIcon: { classPropertyName: "spxLeftIcon", publicName: "spxLeftIcon", isSignal: true, isRequired: false, transformFunction: null }, spxShowLabel: { classPropertyName: "spxShowLabel", publicName: "spxShowLabel", isSignal: true, isRequired: false, transformFunction: null }, spxCompact: { classPropertyName: "spxCompact", publicName: "spxCompact", isSignal: true, isRequired: false, transformFunction: null }, spxShowClear: { classPropertyName: "spxShowClear", publicName: "spxShowClear", isSignal: true, isRequired: false, transformFunction: null }, spxShowSearch: { classPropertyName: "spxShowSearch", publicName: "spxShowSearch", isSignal: true, isRequired: false, transformFunction: null }, spxAlert: { classPropertyName: "spxAlert", publicName: "spxAlert", isSignal: true, isRequired: false, transformFunction: null }, spxShowValidationMessages: { classPropertyName: "spxShowValidationMessages", publicName: "spxShowValidationMessages", isSignal: true, isRequired: false, transformFunction: null }, spxStep: { classPropertyName: "spxStep", publicName: "spxStep", isSignal: true, isRequired: false, transformFunction: null }, spxSuggestions: { classPropertyName: "spxSuggestions", publicName: "spxSuggestions", isSignal: true, isRequired: false, transformFunction: null }, spxType: { classPropertyName: "spxType", publicName: "spxType", isSignal: true, isRequired: false, transformFunction: null }, spxValidators: { classPropertyName: "spxValidators", publicName: "spxValidators", isSignal: true, isRequired: false, transformFunction: null }, spxCapitalize: { classPropertyName: "spxCapitalize", publicName: "spxCapitalize", isSignal: true, isRequired: false, transformFunction: null }, spxCycleConfig: { classPropertyName: "spxCycleConfig", publicName: "spxCycleConfig", isSignal: true, isRequired: false, transformFunction: null }, spxCheckboxText: { classPropertyName: "spxCheckboxText", publicName: "spxCheckboxText", isSignal: true, isRequired: false, transformFunction: null }, spxCheckboxIcon: { classPropertyName: "spxCheckboxIcon", publicName: "spxCheckboxIcon", isSignal: true, isRequired: false, transformFunction: null }, spxCheckboxIconClass: { classPropertyName: "spxCheckboxIconClass", publicName: "spxCheckboxIconClass", isSignal: true, isRequired: false, transformFunction: null }, spxCheckboxBgClass: { classPropertyName: "spxCheckboxBgClass", publicName: "spxCheckboxBgClass", 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: [
|
|
1478
1485
|
{
|
|
1479
1486
|
provide: NG_VALUE_ACCESSOR,
|
|
1480
1487
|
useExisting: SpxInputComponent,
|
|
1481
1488
|
multi: true
|
|
1482
1489
|
}
|
|
1483
|
-
], viewQueries: [{ propertyName: "floatInput", first: true, predicate: ["spxInputFloat"], descendants: true, isSignal: true }, { propertyName: "numberInput", first: true, predicate: ["spxInputNumber"], descendants: true, isSignal: true }, { propertyName: "textInput", first: true, predicate: ["spxInputText"], descendants: true, isSignal: true }, { propertyName: "timeInput", first: true, predicate: ["spxInputTime"], descendants: true, isSignal: true }, { propertyName: "radioInput", first: true, predicate: ["spxInputRadio"], descendants: true, isSignal: true }, { propertyName: "dateInput", first: true, predicate: ["spxInputDate"], descendants: true, isSignal: true }, { propertyName: "cycleInput", first: true, predicate: ["spxInputCycle"], descendants: true, isSignal: true }], ngImport: i0, template: "<spx-input-box\n (spxClear)=\"this.handleClear()\"\n (spxEdit)=\"this.handleEdit()\"\n (spxHelp)=\"this.handleHelp()\"\n (spxSearch)=\"this.handleSearch()\"\n (spxSetIdInParent)=\"handleSpxElementIdSet($event)\"\n [spxAlert]=\"this.spxAlert()\"\n [spxCompact]=\"this.spxCompact()\"\n [spxLabel]=\"this.spxLabel()\"\n [spxLeftIcon]=\"this.spxLeftIcon()\"\n [spxMatchButtonXlHeight]=\"this.matchButtonXlHeight()\"\n [spxName]=\"this.mappedName()\"\n [spxReadonly]=\"this.spxReadonly()\"\n [spxRequired]=\"this.spxRequired()\"\n [spxShowClear]=\"this.spxShowClear()\"\n [spxShowEdit]=\"this.spxShowEdit()\"\n [spxShowHelp]=\"this.spxShowHelp()\"\n [spxShowLabel]=\"this.spxShowLabel()\"\n [spxShowSearch]=\"this.spxShowSearch() ? this.spxShowSearch() : this.spxType() === 'autocomplete'\"\n [spxShowValidationMessages]=\"this.spxShowValidationMessages()\"\n [spxValue]=\"this.value()\"\n>\n <ng-content select=\"[spxInputLeftIcon]\"></ng-content>\n <div controls>\n @if (this.showInputText()) {\n <spx-input-text\n (valueChange)=\"handleChangeEvent($event)\"\n [spxAutocomplete]=\"this.spxAutocomplete() ? this.spxAutocomplete() : undefined\"\n [spxSpeedDial]=\"this.spxSpeedDial()\"\n [spxAutofocus]=\"this.spxAutofocus()\"\n [spxCapitalize]=\"this.spxCapitalize()\"\n [spxElementId]=\"this.spxElementId()\"\n [spxInputMode]=\"this.spxType() === 'overlaynumber' ? 'numeric' : this.spxInputMode()\"\n [spxName]=\"this.mappedName()\"\n [spxMatchButtonXlHeight]=\"this.matchButtonXlHeight()\"\n [spxPattern]=\"this.spxType() === 'overlaynumber' ? '[0-9]*' : this.spxPattern()\"\n [spxReadonly]=\"this.mappedReadonly()\"\n [spxSuggestions]=\"this.spxSuggestions()\"\n [spxType]=\"this.spxType()\"\n [spxValidators]=\"this.spxValidators()\"\n [value]=\"value()\"\n #spxInputText\n ></spx-input-text>\n } @if (this.showInputCycle()) {\n <spx-input-cycle\n (valueChange)=\"handleChangeEvent($event)\"\n [spxCycleConfig]=\"this.spxCycleConfig()!\"\n [spxSpeedDial]=\"this.spxSpeedDial()\"\n [spxAutofocus]=\"this.spxAutofocus()\"\n [spxCapitalize]=\"this.spxCapitalize()\"\n [spxElementId]=\"this.spxElementId()\"\n [spxInputMode]=\"this.spxType() === 'cycleNumeric' ? 'numeric' : 'text'\"\n [spxName]=\"this.mappedName()\"\n [spxReadonly]=\"this.mappedReadonly()\"\n [spxType]=\"this.spxType()\"\n [spxValidators]=\"this.spxValidators()\"\n [value]=\"value()\"\n #spxInputText\n ></spx-input-cycle>\n } @if (this.showInputDate()) {\n <spx-input-date\n (valueChange)=\"handleChangeEvent($event)\"\n [spxAutoFocus]=\"this.spxAutofocus()\"\n [spxElementId]=\"this.spxElementId()\"\n [spxMax]=\"this.spxMax()!\"\n [spxMin]=\"this.spxMin()!\"\n [spxReadonly]=\"this.mappedReadonly()\"\n [spxSelectDay]=\"this.spxSelectDay()\"\n [spxSelectMonth]=\"this.spxSelectMonth()\"\n [spxValidators]=\"this.spxValidators()\"\n [value]=\"value()\"\n #spxInputDate\n ></spx-input-date>\n } @if (this.showInputFloat()) {\n <spx-input-float\n (valueChange)=\"handleChangeEvent($event)\"\n [spxAutofocus]=\"this.spxAutofocus()\"\n [spxElementId]=\"this.spxElementId()\"\n [spxName]=\"this.mappedName()\"\n [spxReadonly]=\"this.mappedReadonly()\"\n [spxStep]=\"this.spxStep()\"\n [spxValidators]=\"this.spxValidators()\"\n [value]=\"value()\"\n #spxInputFloat\n ></spx-input-float>\n } @if (this.showInputNumber()) {\n <spx-input-number\n (valueChange)=\"handleChangeEvent($event)\"\n [spxAutofocus]=\"this.spxAutofocus()\"\n [spxElementId]=\"this.spxElementId()\"\n [spxInputMode]=\"this.spxInputMode()\"\n [spxName]=\"this.mappedName()\"\n [spxReadonly]=\"this.mappedReadonly()\"\n [spxStep]=\"this.spxStep()\"\n [spxValidators]=\"this.spxValidators()\"\n [value]=\"value()\"\n #spxInputNumber\n ></spx-input-number>\n } @if (this.showInputRadio()) {\n <spx-input-radio\n (valueChange)=\"handleChangeEvent($event)\"\n [spxElementId]=\"this.spxElementId()\"\n [spxName]=\"this.mappedName()\"\n [spxReadonly]=\"this.mappedReadonly()\"\n [spxShowLabel]=\"this.spxShowLabel()\"\n [spxSuggestions]=\"this.spxSuggestions()\"\n [spxValidators]=\"this.spxValidators()\"\n [value]=\"value()\"\n #spxInputRadio\n ></spx-input-radio>\n } @if (this.showInputTime()) {\n <spx-input-time\n (valueChange)=\"handleChangeEvent($event)\"\n [spxName]=\"this.mappedName()\"\n [spxReadonly]=\"this.mappedReadonly()\"\n [spxValidators]=\"this.spxValidators()\"\n [value]=\"value()\"\n #spxInputTime\n ></spx-input-time>\n } @if (this.showInputCheckbox()) {\n <spx-input-checkbox\n (valueChange)=\"handleChangeEvent($event)\"\n [spxReadonly]=\"this.spxReadonly()\"\n [spxText]=\"this.spxCheckboxText()\"\n [value]=\"value()\"\n #spxInputCheckbox\n ></spx-input-checkbox>\n }\n </div>\n <div validation-messages>\n <ng-content></ng-content>\n </div>\n</spx-input-box>\n", dependencies: [{ kind: "component", type: SpxInputBoxComponent, selector: "spx-input-box", inputs: ["spxCompact", "spxLabel", "spxLeftIcon", "spxMatchButtonXlHeight", "spxName", "spxReadonly", "spxRequired", "spxShowClear", "spxShowEdit", "spxShowHelp", "spxShowLabel", "spxShowSearch", "spxShowValidationMessages", "spxAlert", "spxValue"], outputs: ["spxValueChange", "spxClear", "spxSearch", "spxEdit", "spxHelp", "spxSetIdInParent"] }, { kind: "component", type: SpxInputCycleComponent, selector: "spx-input-cycle", inputs: ["spxSpeedDial", "spxName", "spxAutofocus", "spxAutocomplete", "spxCycleConfig", "spxInputMode", "spxReadonly", "spxValidators", "spxCapitalize", "spxType", "spxWasInternalUpdate", "value", "spxElementId"], outputs: ["valueChange", "completeInput"] }, { kind: "component", type: SpxInputDateComponent, selector: "spx-input-date", inputs: ["spxMax", "spxMin", "spxReadonly", "spxValidators", "spxAutoFocus", "value", "spxSelectDay", "spxSelectMonth", "spxElementId", "spxSuggestions"], outputs: ["valueChange"] }, { kind: "component", type: SpxInputFloatComponent, selector: "spx-input-float", inputs: ["spxName", "spxAutofocus", "spxElementId", "spxReadonly", "spxValidators", "spxStep", "value", "spxWasInternalUpdate"], outputs: ["valueChange"] }, { kind: "component", type: SpxInputNumberComponent, selector: "spx-input-number", inputs: ["spxName", "spxAutofocus", "spxInputMode", "spxReadonly", "spxValidators", "spxFocused", "spxStep", "value", "spxElementId"], outputs: ["valueChange"] }, { kind: "component", type: SpxInputRadioComponent, selector: "spx-input-radio", inputs: ["spxName", "spxValidators", "spxShowLabel", "spxReadonly", "spxSuggestions", "value", "spxElementId"], outputs: ["valueChange"] }, { kind: "component", type: SpxInputCheckboxComponent, selector: "spx-input-checkbox", inputs: ["spxReadonly", "spxText", "value"], outputs: ["valueChange"] }, { kind: "component", type: SpxInputTextComponent, selector: "spx-input-text", inputs: ["spxSpeedDial", "spxName", "spxMatchButtonXlHeight", "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 }); }
|
|
1490
|
+
], viewQueries: [{ propertyName: "floatInput", first: true, predicate: ["spxInputFloat"], descendants: true, isSignal: true }, { propertyName: "numberInput", first: true, predicate: ["spxInputNumber"], descendants: true, isSignal: true }, { propertyName: "textInput", first: true, predicate: ["spxInputText"], descendants: true, isSignal: true }, { propertyName: "timeInput", first: true, predicate: ["spxInputTime"], descendants: true, isSignal: true }, { propertyName: "radioInput", first: true, predicate: ["spxInputRadio"], descendants: true, isSignal: true }, { propertyName: "dateInput", first: true, predicate: ["spxInputDate"], descendants: true, isSignal: true }, { propertyName: "cycleInput", first: true, predicate: ["spxInputCycle"], descendants: true, isSignal: true }], ngImport: i0, template: "<spx-input-box\n (spxClear)=\"this.handleClear()\"\n (spxEdit)=\"this.handleEdit()\"\n (spxHelp)=\"this.handleHelp()\"\n (spxSearch)=\"this.handleSearch()\"\n (spxSetIdInParent)=\"handleSpxElementIdSet($event)\"\n [spxAlert]=\"this.spxAlert()\"\n [spxCompact]=\"this.spxCompact()\"\n [spxLabel]=\"this.spxLabel()\"\n [spxLeftIcon]=\"this.spxLeftIcon()\"\n [spxMatchButtonXlHeight]=\"this.matchButtonXlHeight()\"\n [spxName]=\"this.mappedName()\"\n [spxReadonly]=\"this.spxReadonly()\"\n [spxRequired]=\"this.spxRequired()\"\n [spxShowClear]=\"this.spxShowClear()\"\n [spxShowEdit]=\"this.spxShowEdit()\"\n [spxShowHelp]=\"this.spxShowHelp()\"\n [spxShowLabel]=\"this.spxShowLabel()\"\n [spxShowSearch]=\"this.spxShowSearch() ? this.spxShowSearch() : this.spxType() === 'autocomplete'\"\n [spxShowValidationMessages]=\"this.spxShowValidationMessages()\"\n [spxValue]=\"this.value()\"\n>\n <ng-content select=\"[spxInputLeftIcon]\"></ng-content>\n <div controls>\n @if (this.showInputText()) {\n <spx-input-text\n (valueChange)=\"handleChangeEvent($event)\"\n [spxAutocomplete]=\"this.spxAutocomplete() ? this.spxAutocomplete() : undefined\"\n [spxSpeedDial]=\"this.spxSpeedDial()\"\n [spxAutofocus]=\"this.spxAutofocus()\"\n [spxCapitalize]=\"this.spxCapitalize()\"\n [spxElementId]=\"this.spxElementId()\"\n [spxInputMode]=\"this.spxType() === 'overlaynumber' ? 'numeric' : this.spxInputMode()\"\n [spxName]=\"this.mappedName()\"\n [spxMatchButtonXlHeight]=\"this.matchButtonXlHeight()\"\n [spxPattern]=\"this.spxType() === 'overlaynumber' ? '[0-9]*' : this.spxPattern()\"\n [spxReadonly]=\"this.mappedReadonly()\"\n [spxSuggestions]=\"this.spxSuggestions()\"\n [spxType]=\"this.spxType()\"\n [spxValidators]=\"this.spxValidators()\"\n [value]=\"value()\"\n #spxInputText\n ></spx-input-text>\n } @if (this.showInputCycle()) {\n <spx-input-cycle\n (valueChange)=\"handleChangeEvent($event)\"\n [spxCycleConfig]=\"this.spxCycleConfig()!\"\n [spxSpeedDial]=\"this.spxSpeedDial()\"\n [spxAutofocus]=\"this.spxAutofocus()\"\n [spxCapitalize]=\"this.spxCapitalize()\"\n [spxElementId]=\"this.spxElementId()\"\n [spxInputMode]=\"this.spxType() === 'cycleNumeric' ? 'numeric' : 'text'\"\n [spxName]=\"this.mappedName()\"\n [spxReadonly]=\"this.mappedReadonly()\"\n [spxType]=\"this.spxType()\"\n [spxValidators]=\"this.spxValidators()\"\n [value]=\"value()\"\n #spxInputText\n ></spx-input-cycle>\n } @if (this.showInputDate()) {\n <spx-input-date\n (valueChange)=\"handleChangeEvent($event)\"\n [spxAutoFocus]=\"this.spxAutofocus()\"\n [spxElementId]=\"this.spxElementId()\"\n [spxMax]=\"this.spxMax()!\"\n [spxMin]=\"this.spxMin()!\"\n [spxReadonly]=\"this.mappedReadonly()\"\n [spxSelectDay]=\"this.spxSelectDay()\"\n [spxSelectMonth]=\"this.spxSelectMonth()\"\n [spxValidators]=\"this.spxValidators()\"\n [value]=\"value()\"\n #spxInputDate\n ></spx-input-date>\n } @if (this.showInputFloat()) {\n <spx-input-float\n (valueChange)=\"handleChangeEvent($event)\"\n [spxAutofocus]=\"this.spxAutofocus()\"\n [spxElementId]=\"this.spxElementId()\"\n [spxName]=\"this.mappedName()\"\n [spxReadonly]=\"this.mappedReadonly()\"\n [spxStep]=\"this.spxStep()\"\n [spxValidators]=\"this.spxValidators()\"\n [value]=\"value()\"\n #spxInputFloat\n ></spx-input-float>\n } @if (this.showInputNumber()) {\n <spx-input-number\n (valueChange)=\"handleChangeEvent($event)\"\n [spxAutofocus]=\"this.spxAutofocus()\"\n [spxElementId]=\"this.spxElementId()\"\n [spxInputMode]=\"this.spxInputMode()\"\n [spxName]=\"this.mappedName()\"\n [spxReadonly]=\"this.mappedReadonly()\"\n [spxStep]=\"this.spxStep()\"\n [spxValidators]=\"this.spxValidators()\"\n [value]=\"value()\"\n #spxInputNumber\n ></spx-input-number>\n } @if (this.showInputRadio()) {\n <spx-input-radio\n (valueChange)=\"handleChangeEvent($event)\"\n [spxElementId]=\"this.spxElementId()\"\n [spxName]=\"this.mappedName()\"\n [spxReadonly]=\"this.mappedReadonly()\"\n [spxShowLabel]=\"this.spxShowLabel()\"\n [spxSuggestions]=\"this.spxSuggestions()\"\n [spxValidators]=\"this.spxValidators()\"\n [value]=\"value()\"\n #spxInputRadio\n ></spx-input-radio>\n } @if (this.showInputTime()) {\n <spx-input-time\n (valueChange)=\"handleChangeEvent($event)\"\n [spxName]=\"this.mappedName()\"\n [spxReadonly]=\"this.mappedReadonly()\"\n [spxValidators]=\"this.spxValidators()\"\n [value]=\"value()\"\n #spxInputTime\n ></spx-input-time>\n } @if (this.showInputCheckbox()) {\n <spx-input-checkbox\n (valueChange)=\"handleChangeEvent($event)\"\n [spxReadonly]=\"this.spxReadonly()\"\n [spxText]=\"this.spxCheckboxText()\"\n [spxIcon]=\"this.spxCheckboxIcon()\"\n [spxIconClass]=\"this.spxCheckboxIconClass()\"\n [spxBgClass]=\"this.spxCheckboxBgClass()\"\n [value]=\"value()\"\n #spxInputCheckbox\n ></spx-input-checkbox>\n }\n </div>\n <div validation-messages>\n <ng-content></ng-content>\n </div>\n</spx-input-box>\n", dependencies: [{ kind: "component", type: SpxInputBoxComponent, selector: "spx-input-box", inputs: ["spxCompact", "spxLabel", "spxLeftIcon", "spxMatchButtonXlHeight", "spxName", "spxReadonly", "spxRequired", "spxShowClear", "spxShowEdit", "spxShowHelp", "spxShowLabel", "spxShowSearch", "spxShowValidationMessages", "spxAlert", "spxValue"], outputs: ["spxValueChange", "spxClear", "spxSearch", "spxEdit", "spxHelp", "spxSetIdInParent"] }, { kind: "component", type: SpxInputCycleComponent, selector: "spx-input-cycle", inputs: ["spxSpeedDial", "spxName", "spxAutofocus", "spxAutocomplete", "spxCycleConfig", "spxInputMode", "spxReadonly", "spxValidators", "spxCapitalize", "spxType", "spxWasInternalUpdate", "value", "spxElementId"], outputs: ["valueChange", "completeInput"] }, { kind: "component", type: SpxInputDateComponent, selector: "spx-input-date", inputs: ["spxMax", "spxMin", "spxReadonly", "spxValidators", "spxAutoFocus", "value", "spxSelectDay", "spxSelectMonth", "spxElementId", "spxSuggestions"], outputs: ["valueChange"] }, { kind: "component", type: SpxInputFloatComponent, selector: "spx-input-float", inputs: ["spxName", "spxAutofocus", "spxElementId", "spxReadonly", "spxValidators", "spxStep", "value", "spxWasInternalUpdate"], outputs: ["valueChange"] }, { kind: "component", type: SpxInputNumberComponent, selector: "spx-input-number", inputs: ["spxName", "spxAutofocus", "spxInputMode", "spxReadonly", "spxValidators", "spxFocused", "spxStep", "value", "spxElementId"], outputs: ["valueChange"] }, { kind: "component", type: SpxInputRadioComponent, selector: "spx-input-radio", inputs: ["spxName", "spxValidators", "spxShowLabel", "spxReadonly", "spxSuggestions", "value", "spxElementId"], outputs: ["valueChange"] }, { kind: "component", type: SpxInputCheckboxComponent, selector: "spx-input-checkbox", inputs: ["spxReadonly", "spxText", "spxIcon", "spxIconClass", "spxBgClass", "value"], outputs: ["valueChange"] }, { kind: "component", type: SpxInputTextComponent, selector: "spx-input-text", inputs: ["spxSpeedDial", "spxName", "spxMatchButtonXlHeight", "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 }); }
|
|
1484
1491
|
}
|
|
1485
1492
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: SpxInputComponent, decorators: [{
|
|
1486
1493
|
type: Component,
|
|
@@ -1503,8 +1510,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
|
|
|
1503
1510
|
useExisting: SpxInputComponent,
|
|
1504
1511
|
multi: true
|
|
1505
1512
|
}
|
|
1506
|
-
], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<spx-input-box\n (spxClear)=\"this.handleClear()\"\n (spxEdit)=\"this.handleEdit()\"\n (spxHelp)=\"this.handleHelp()\"\n (spxSearch)=\"this.handleSearch()\"\n (spxSetIdInParent)=\"handleSpxElementIdSet($event)\"\n [spxAlert]=\"this.spxAlert()\"\n [spxCompact]=\"this.spxCompact()\"\n [spxLabel]=\"this.spxLabel()\"\n [spxLeftIcon]=\"this.spxLeftIcon()\"\n [spxMatchButtonXlHeight]=\"this.matchButtonXlHeight()\"\n [spxName]=\"this.mappedName()\"\n [spxReadonly]=\"this.spxReadonly()\"\n [spxRequired]=\"this.spxRequired()\"\n [spxShowClear]=\"this.spxShowClear()\"\n [spxShowEdit]=\"this.spxShowEdit()\"\n [spxShowHelp]=\"this.spxShowHelp()\"\n [spxShowLabel]=\"this.spxShowLabel()\"\n [spxShowSearch]=\"this.spxShowSearch() ? this.spxShowSearch() : this.spxType() === 'autocomplete'\"\n [spxShowValidationMessages]=\"this.spxShowValidationMessages()\"\n [spxValue]=\"this.value()\"\n>\n <ng-content select=\"[spxInputLeftIcon]\"></ng-content>\n <div controls>\n @if (this.showInputText()) {\n <spx-input-text\n (valueChange)=\"handleChangeEvent($event)\"\n [spxAutocomplete]=\"this.spxAutocomplete() ? this.spxAutocomplete() : undefined\"\n [spxSpeedDial]=\"this.spxSpeedDial()\"\n [spxAutofocus]=\"this.spxAutofocus()\"\n [spxCapitalize]=\"this.spxCapitalize()\"\n [spxElementId]=\"this.spxElementId()\"\n [spxInputMode]=\"this.spxType() === 'overlaynumber' ? 'numeric' : this.spxInputMode()\"\n [spxName]=\"this.mappedName()\"\n [spxMatchButtonXlHeight]=\"this.matchButtonXlHeight()\"\n [spxPattern]=\"this.spxType() === 'overlaynumber' ? '[0-9]*' : this.spxPattern()\"\n [spxReadonly]=\"this.mappedReadonly()\"\n [spxSuggestions]=\"this.spxSuggestions()\"\n [spxType]=\"this.spxType()\"\n [spxValidators]=\"this.spxValidators()\"\n [value]=\"value()\"\n #spxInputText\n ></spx-input-text>\n } @if (this.showInputCycle()) {\n <spx-input-cycle\n (valueChange)=\"handleChangeEvent($event)\"\n [spxCycleConfig]=\"this.spxCycleConfig()!\"\n [spxSpeedDial]=\"this.spxSpeedDial()\"\n [spxAutofocus]=\"this.spxAutofocus()\"\n [spxCapitalize]=\"this.spxCapitalize()\"\n [spxElementId]=\"this.spxElementId()\"\n [spxInputMode]=\"this.spxType() === 'cycleNumeric' ? 'numeric' : 'text'\"\n [spxName]=\"this.mappedName()\"\n [spxReadonly]=\"this.mappedReadonly()\"\n [spxType]=\"this.spxType()\"\n [spxValidators]=\"this.spxValidators()\"\n [value]=\"value()\"\n #spxInputText\n ></spx-input-cycle>\n } @if (this.showInputDate()) {\n <spx-input-date\n (valueChange)=\"handleChangeEvent($event)\"\n [spxAutoFocus]=\"this.spxAutofocus()\"\n [spxElementId]=\"this.spxElementId()\"\n [spxMax]=\"this.spxMax()!\"\n [spxMin]=\"this.spxMin()!\"\n [spxReadonly]=\"this.mappedReadonly()\"\n [spxSelectDay]=\"this.spxSelectDay()\"\n [spxSelectMonth]=\"this.spxSelectMonth()\"\n [spxValidators]=\"this.spxValidators()\"\n [value]=\"value()\"\n #spxInputDate\n ></spx-input-date>\n } @if (this.showInputFloat()) {\n <spx-input-float\n (valueChange)=\"handleChangeEvent($event)\"\n [spxAutofocus]=\"this.spxAutofocus()\"\n [spxElementId]=\"this.spxElementId()\"\n [spxName]=\"this.mappedName()\"\n [spxReadonly]=\"this.mappedReadonly()\"\n [spxStep]=\"this.spxStep()\"\n [spxValidators]=\"this.spxValidators()\"\n [value]=\"value()\"\n #spxInputFloat\n ></spx-input-float>\n } @if (this.showInputNumber()) {\n <spx-input-number\n (valueChange)=\"handleChangeEvent($event)\"\n [spxAutofocus]=\"this.spxAutofocus()\"\n [spxElementId]=\"this.spxElementId()\"\n [spxInputMode]=\"this.spxInputMode()\"\n [spxName]=\"this.mappedName()\"\n [spxReadonly]=\"this.mappedReadonly()\"\n [spxStep]=\"this.spxStep()\"\n [spxValidators]=\"this.spxValidators()\"\n [value]=\"value()\"\n #spxInputNumber\n ></spx-input-number>\n } @if (this.showInputRadio()) {\n <spx-input-radio\n (valueChange)=\"handleChangeEvent($event)\"\n [spxElementId]=\"this.spxElementId()\"\n [spxName]=\"this.mappedName()\"\n [spxReadonly]=\"this.mappedReadonly()\"\n [spxShowLabel]=\"this.spxShowLabel()\"\n [spxSuggestions]=\"this.spxSuggestions()\"\n [spxValidators]=\"this.spxValidators()\"\n [value]=\"value()\"\n #spxInputRadio\n ></spx-input-radio>\n } @if (this.showInputTime()) {\n <spx-input-time\n (valueChange)=\"handleChangeEvent($event)\"\n [spxName]=\"this.mappedName()\"\n [spxReadonly]=\"this.mappedReadonly()\"\n [spxValidators]=\"this.spxValidators()\"\n [value]=\"value()\"\n #spxInputTime\n ></spx-input-time>\n } @if (this.showInputCheckbox()) {\n <spx-input-checkbox\n (valueChange)=\"handleChangeEvent($event)\"\n [spxReadonly]=\"this.spxReadonly()\"\n [spxText]=\"this.spxCheckboxText()\"\n [value]=\"value()\"\n #spxInputCheckbox\n ></spx-input-checkbox>\n }\n </div>\n <div validation-messages>\n <ng-content></ng-content>\n </div>\n</spx-input-box>\n" }]
|
|
1507
|
-
}], propDecorators: { spxSpeedDial: [{ type: i0.Input, args: [{ isSignal: true, alias: "spxSpeedDial", required: false }] }], spxLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "spxLabel", required: false }] }], spxMax: [{ type: i0.Input, args: [{ isSignal: true, alias: "spxMax", required: false }] }], spxMin: [{ type: i0.Input, args: [{ isSignal: true, alias: "spxMin", required: false }] }], spxName: [{ type: i0.Input, args: [{ isSignal: true, alias: "spxName", required: false }] }], spxReadonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "spxReadonly", required: false }] }], spxAutocomplete: [{ type: i0.Input, args: [{ isSignal: true, alias: "spxAutocomplete", required: false }] }], spxAutofocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "spxAutofocus", required: false }] }], spxInputMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "spxInputMode", required: false }] }], spxPattern: [{ type: i0.Input, args: [{ isSignal: true, alias: "spxPattern", required: false }] }], spxRequired: [{ type: i0.Input, args: [{ isSignal: true, alias: "spxRequired", required: false }] }], spxSelectMonth: [{ type: i0.Input, args: [{ isSignal: true, alias: "spxSelectMonth", required: false }] }], spxSelectDay: [{ type: i0.Input, args: [{ isSignal: true, alias: "spxSelectDay", required: false }] }], spxShowEdit: [{ type: i0.Input, args: [{ isSignal: true, alias: "spxShowEdit", required: false }] }], spxShowHelp: [{ type: i0.Input, args: [{ isSignal: true, alias: "spxShowHelp", required: false }] }], spxLeftIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "spxLeftIcon", required: false }] }], spxShowLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "spxShowLabel", required: false }] }], spxCompact: [{ type: i0.Input, args: [{ isSignal: true, alias: "spxCompact", required: false }] }], spxShowClear: [{ type: i0.Input, args: [{ isSignal: true, alias: "spxShowClear", required: false }] }], spxShowSearch: [{ type: i0.Input, args: [{ isSignal: true, alias: "spxShowSearch", required: false }] }], spxAlert: [{ type: i0.Input, args: [{ isSignal: true, alias: "spxAlert", required: false }] }], spxShowValidationMessages: [{ type: i0.Input, args: [{ isSignal: true, alias: "spxShowValidationMessages", required: false }] }], spxStep: [{ type: i0.Input, args: [{ isSignal: true, alias: "spxStep", required: false }] }], spxSuggestions: [{ type: i0.Input, args: [{ isSignal: true, alias: "spxSuggestions", required: false }] }], spxType: [{ type: i0.Input, args: [{ isSignal: true, alias: "spxType", required: false }] }], spxValidators: [{ type: i0.Input, args: [{ isSignal: true, alias: "spxValidators", required: false }] }], spxCapitalize: [{ type: i0.Input, args: [{ isSignal: true, alias: "spxCapitalize", required: false }] }], spxCycleConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "spxCycleConfig", required: false }] }], spxCheckboxText: [{ type: i0.Input, args: [{ isSignal: true, alias: "spxCheckboxText", required: false }] }], spxClear: [{ type: i0.Output, args: ["spxClear"] }], spxEdit: [{ type: i0.Output, args: ["spxEdit"] }], spxHelp: [{ type: i0.Output, args: ["spxHelp"] }], spxSearch: [{ type: i0.Output, args: ["spxSearch"] }], spxBlur: [{ type: i0.Output, args: ["spxBlur"] }], floatInput: [{ type: i0.ViewChild, args: ["spxInputFloat", { isSignal: true }] }], numberInput: [{ type: i0.ViewChild, args: ["spxInputNumber", { isSignal: true }] }], textInput: [{ type: i0.ViewChild, args: ["spxInputText", { isSignal: true }] }], timeInput: [{ type: i0.ViewChild, args: ["spxInputTime", { isSignal: true }] }], radioInput: [{ type: i0.ViewChild, args: ["spxInputRadio", { isSignal: true }] }], dateInput: [{ type: i0.ViewChild, args: ["spxInputDate", { isSignal: true }] }], cycleInput: [{ type: i0.ViewChild, args: ["spxInputCycle", { isSignal: true }] }], _handleBlurEvent: [{
|
|
1513
|
+
], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<spx-input-box\n (spxClear)=\"this.handleClear()\"\n (spxEdit)=\"this.handleEdit()\"\n (spxHelp)=\"this.handleHelp()\"\n (spxSearch)=\"this.handleSearch()\"\n (spxSetIdInParent)=\"handleSpxElementIdSet($event)\"\n [spxAlert]=\"this.spxAlert()\"\n [spxCompact]=\"this.spxCompact()\"\n [spxLabel]=\"this.spxLabel()\"\n [spxLeftIcon]=\"this.spxLeftIcon()\"\n [spxMatchButtonXlHeight]=\"this.matchButtonXlHeight()\"\n [spxName]=\"this.mappedName()\"\n [spxReadonly]=\"this.spxReadonly()\"\n [spxRequired]=\"this.spxRequired()\"\n [spxShowClear]=\"this.spxShowClear()\"\n [spxShowEdit]=\"this.spxShowEdit()\"\n [spxShowHelp]=\"this.spxShowHelp()\"\n [spxShowLabel]=\"this.spxShowLabel()\"\n [spxShowSearch]=\"this.spxShowSearch() ? this.spxShowSearch() : this.spxType() === 'autocomplete'\"\n [spxShowValidationMessages]=\"this.spxShowValidationMessages()\"\n [spxValue]=\"this.value()\"\n>\n <ng-content select=\"[spxInputLeftIcon]\"></ng-content>\n <div controls>\n @if (this.showInputText()) {\n <spx-input-text\n (valueChange)=\"handleChangeEvent($event)\"\n [spxAutocomplete]=\"this.spxAutocomplete() ? this.spxAutocomplete() : undefined\"\n [spxSpeedDial]=\"this.spxSpeedDial()\"\n [spxAutofocus]=\"this.spxAutofocus()\"\n [spxCapitalize]=\"this.spxCapitalize()\"\n [spxElementId]=\"this.spxElementId()\"\n [spxInputMode]=\"this.spxType() === 'overlaynumber' ? 'numeric' : this.spxInputMode()\"\n [spxName]=\"this.mappedName()\"\n [spxMatchButtonXlHeight]=\"this.matchButtonXlHeight()\"\n [spxPattern]=\"this.spxType() === 'overlaynumber' ? '[0-9]*' : this.spxPattern()\"\n [spxReadonly]=\"this.mappedReadonly()\"\n [spxSuggestions]=\"this.spxSuggestions()\"\n [spxType]=\"this.spxType()\"\n [spxValidators]=\"this.spxValidators()\"\n [value]=\"value()\"\n #spxInputText\n ></spx-input-text>\n } @if (this.showInputCycle()) {\n <spx-input-cycle\n (valueChange)=\"handleChangeEvent($event)\"\n [spxCycleConfig]=\"this.spxCycleConfig()!\"\n [spxSpeedDial]=\"this.spxSpeedDial()\"\n [spxAutofocus]=\"this.spxAutofocus()\"\n [spxCapitalize]=\"this.spxCapitalize()\"\n [spxElementId]=\"this.spxElementId()\"\n [spxInputMode]=\"this.spxType() === 'cycleNumeric' ? 'numeric' : 'text'\"\n [spxName]=\"this.mappedName()\"\n [spxReadonly]=\"this.mappedReadonly()\"\n [spxType]=\"this.spxType()\"\n [spxValidators]=\"this.spxValidators()\"\n [value]=\"value()\"\n #spxInputText\n ></spx-input-cycle>\n } @if (this.showInputDate()) {\n <spx-input-date\n (valueChange)=\"handleChangeEvent($event)\"\n [spxAutoFocus]=\"this.spxAutofocus()\"\n [spxElementId]=\"this.spxElementId()\"\n [spxMax]=\"this.spxMax()!\"\n [spxMin]=\"this.spxMin()!\"\n [spxReadonly]=\"this.mappedReadonly()\"\n [spxSelectDay]=\"this.spxSelectDay()\"\n [spxSelectMonth]=\"this.spxSelectMonth()\"\n [spxValidators]=\"this.spxValidators()\"\n [value]=\"value()\"\n #spxInputDate\n ></spx-input-date>\n } @if (this.showInputFloat()) {\n <spx-input-float\n (valueChange)=\"handleChangeEvent($event)\"\n [spxAutofocus]=\"this.spxAutofocus()\"\n [spxElementId]=\"this.spxElementId()\"\n [spxName]=\"this.mappedName()\"\n [spxReadonly]=\"this.mappedReadonly()\"\n [spxStep]=\"this.spxStep()\"\n [spxValidators]=\"this.spxValidators()\"\n [value]=\"value()\"\n #spxInputFloat\n ></spx-input-float>\n } @if (this.showInputNumber()) {\n <spx-input-number\n (valueChange)=\"handleChangeEvent($event)\"\n [spxAutofocus]=\"this.spxAutofocus()\"\n [spxElementId]=\"this.spxElementId()\"\n [spxInputMode]=\"this.spxInputMode()\"\n [spxName]=\"this.mappedName()\"\n [spxReadonly]=\"this.mappedReadonly()\"\n [spxStep]=\"this.spxStep()\"\n [spxValidators]=\"this.spxValidators()\"\n [value]=\"value()\"\n #spxInputNumber\n ></spx-input-number>\n } @if (this.showInputRadio()) {\n <spx-input-radio\n (valueChange)=\"handleChangeEvent($event)\"\n [spxElementId]=\"this.spxElementId()\"\n [spxName]=\"this.mappedName()\"\n [spxReadonly]=\"this.mappedReadonly()\"\n [spxShowLabel]=\"this.spxShowLabel()\"\n [spxSuggestions]=\"this.spxSuggestions()\"\n [spxValidators]=\"this.spxValidators()\"\n [value]=\"value()\"\n #spxInputRadio\n ></spx-input-radio>\n } @if (this.showInputTime()) {\n <spx-input-time\n (valueChange)=\"handleChangeEvent($event)\"\n [spxName]=\"this.mappedName()\"\n [spxReadonly]=\"this.mappedReadonly()\"\n [spxValidators]=\"this.spxValidators()\"\n [value]=\"value()\"\n #spxInputTime\n ></spx-input-time>\n } @if (this.showInputCheckbox()) {\n <spx-input-checkbox\n (valueChange)=\"handleChangeEvent($event)\"\n [spxReadonly]=\"this.spxReadonly()\"\n [spxText]=\"this.spxCheckboxText()\"\n [spxIcon]=\"this.spxCheckboxIcon()\"\n [spxIconClass]=\"this.spxCheckboxIconClass()\"\n [spxBgClass]=\"this.spxCheckboxBgClass()\"\n [value]=\"value()\"\n #spxInputCheckbox\n ></spx-input-checkbox>\n }\n </div>\n <div validation-messages>\n <ng-content></ng-content>\n </div>\n</spx-input-box>\n" }]
|
|
1514
|
+
}], propDecorators: { spxSpeedDial: [{ type: i0.Input, args: [{ isSignal: true, alias: "spxSpeedDial", required: false }] }], spxLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "spxLabel", required: false }] }], spxMax: [{ type: i0.Input, args: [{ isSignal: true, alias: "spxMax", required: false }] }], spxMin: [{ type: i0.Input, args: [{ isSignal: true, alias: "spxMin", required: false }] }], spxName: [{ type: i0.Input, args: [{ isSignal: true, alias: "spxName", required: false }] }], spxReadonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "spxReadonly", required: false }] }], spxAutocomplete: [{ type: i0.Input, args: [{ isSignal: true, alias: "spxAutocomplete", required: false }] }], spxAutofocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "spxAutofocus", required: false }] }], spxInputMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "spxInputMode", required: false }] }], spxPattern: [{ type: i0.Input, args: [{ isSignal: true, alias: "spxPattern", required: false }] }], spxRequired: [{ type: i0.Input, args: [{ isSignal: true, alias: "spxRequired", required: false }] }], spxSelectMonth: [{ type: i0.Input, args: [{ isSignal: true, alias: "spxSelectMonth", required: false }] }], spxSelectDay: [{ type: i0.Input, args: [{ isSignal: true, alias: "spxSelectDay", required: false }] }], spxShowEdit: [{ type: i0.Input, args: [{ isSignal: true, alias: "spxShowEdit", required: false }] }], spxShowHelp: [{ type: i0.Input, args: [{ isSignal: true, alias: "spxShowHelp", required: false }] }], spxLeftIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "spxLeftIcon", required: false }] }], spxShowLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "spxShowLabel", required: false }] }], spxCompact: [{ type: i0.Input, args: [{ isSignal: true, alias: "spxCompact", required: false }] }], spxShowClear: [{ type: i0.Input, args: [{ isSignal: true, alias: "spxShowClear", required: false }] }], spxShowSearch: [{ type: i0.Input, args: [{ isSignal: true, alias: "spxShowSearch", required: false }] }], spxAlert: [{ type: i0.Input, args: [{ isSignal: true, alias: "spxAlert", required: false }] }], spxShowValidationMessages: [{ type: i0.Input, args: [{ isSignal: true, alias: "spxShowValidationMessages", required: false }] }], spxStep: [{ type: i0.Input, args: [{ isSignal: true, alias: "spxStep", required: false }] }], spxSuggestions: [{ type: i0.Input, args: [{ isSignal: true, alias: "spxSuggestions", required: false }] }], spxType: [{ type: i0.Input, args: [{ isSignal: true, alias: "spxType", required: false }] }], spxValidators: [{ type: i0.Input, args: [{ isSignal: true, alias: "spxValidators", required: false }] }], spxCapitalize: [{ type: i0.Input, args: [{ isSignal: true, alias: "spxCapitalize", required: false }] }], spxCycleConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "spxCycleConfig", required: false }] }], spxCheckboxText: [{ type: i0.Input, args: [{ isSignal: true, alias: "spxCheckboxText", required: false }] }], spxCheckboxIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "spxCheckboxIcon", required: false }] }], spxCheckboxIconClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "spxCheckboxIconClass", required: false }] }], spxCheckboxBgClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "spxCheckboxBgClass", required: false }] }], spxClear: [{ type: i0.Output, args: ["spxClear"] }], spxEdit: [{ type: i0.Output, args: ["spxEdit"] }], spxHelp: [{ type: i0.Output, args: ["spxHelp"] }], spxSearch: [{ type: i0.Output, args: ["spxSearch"] }], spxBlur: [{ type: i0.Output, args: ["spxBlur"] }], floatInput: [{ type: i0.ViewChild, args: ["spxInputFloat", { isSignal: true }] }], numberInput: [{ type: i0.ViewChild, args: ["spxInputNumber", { isSignal: true }] }], textInput: [{ type: i0.ViewChild, args: ["spxInputText", { isSignal: true }] }], timeInput: [{ type: i0.ViewChild, args: ["spxInputTime", { isSignal: true }] }], radioInput: [{ type: i0.ViewChild, args: ["spxInputRadio", { isSignal: true }] }], dateInput: [{ type: i0.ViewChild, args: ["spxInputDate", { isSignal: true }] }], cycleInput: [{ type: i0.ViewChild, args: ["spxInputCycle", { isSignal: true }] }], _handleBlurEvent: [{
|
|
1508
1515
|
type: HostListener,
|
|
1509
1516
|
args: ['focusout']
|
|
1510
1517
|
}] } });
|