@softpak/components 21.0.1 → 21.0.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/fesm2022/softpak-components-spx-404-page.mjs +3 -3
- package/fesm2022/softpak-components-spx-alert.mjs +4 -4
- package/fesm2022/softpak-components-spx-app-expiry.mjs +4 -4
- package/fesm2022/softpak-components-spx-button.mjs +4 -4
- package/fesm2022/softpak-components-spx-button.mjs.map +1 -1
- package/fesm2022/softpak-components-spx-capitalize.mjs +3 -3
- package/fesm2022/softpak-components-spx-card.mjs +16 -16
- package/fesm2022/softpak-components-spx-change-details.mjs +4 -4
- package/fesm2022/softpak-components-spx-change-details.mjs.map +1 -1
- package/fesm2022/softpak-components-spx-channel-selection.mjs +15 -15
- package/fesm2022/softpak-components-spx-channel-selection.mjs.map +1 -1
- package/fesm2022/softpak-components-spx-check-digit.mjs +4 -4
- package/fesm2022/softpak-components-spx-check-digit.mjs.map +1 -1
- package/fesm2022/softpak-components-spx-confirm.mjs +10 -10
- package/fesm2022/softpak-components-spx-form-section.mjs +5 -5
- package/fesm2022/softpak-components-spx-form-section.mjs.map +1 -1
- package/fesm2022/softpak-components-spx-form-view.mjs +8 -8
- package/fesm2022/softpak-components-spx-form-view.mjs.map +1 -1
- package/fesm2022/softpak-components-spx-inputs.mjs +51 -51
- package/fesm2022/softpak-components-spx-inputs.mjs.map +1 -1
- package/fesm2022/softpak-components-spx-navigation.mjs +12 -12
- package/fesm2022/softpak-components-spx-navigation.mjs.map +1 -1
- package/fesm2022/softpak-components-spx-number-check.mjs +6 -8
- package/fesm2022/softpak-components-spx-number-check.mjs.map +1 -1
- package/fesm2022/softpak-components-spx-pagination.mjs +4 -4
- package/fesm2022/softpak-components-spx-patch.mjs +4 -4
- package/fesm2022/softpak-components-spx-pipes.mjs +3 -3
- package/fesm2022/softpak-components-spx-progress-bar.mjs +4 -4
- package/fesm2022/softpak-components-spx-spinner.mjs +4 -4
- package/fesm2022/softpak-components-spx-stock-info.mjs +4 -4
- package/fesm2022/softpak-components-spx-stock-info.mjs.map +1 -1
- package/fesm2022/softpak-components-spx-suggestion.mjs +4 -4
- package/fesm2022/softpak-components-spx-suggestion.mjs.map +1 -1
- package/fesm2022/softpak-components-spx-tabs.mjs +4 -4
- package/fesm2022/softpak-components-spx-toaster.mjs +4 -4
- package/fesm2022/softpak-components-spx-toggle.mjs +4 -4
- package/fesm2022/softpak-components-spx-update.mjs +12 -12
- package/fesm2022/softpak-components-spx-update.mjs.map +1 -1
- package/fesm2022/softpak-components-spx-validation-messages.mjs +4 -4
- package/fesm2022/softpak-components-spx-validation-messages.mjs.map +1 -1
- package/fesm2022/softpak-components-spx-validation.mjs +4 -4
- package/fesm2022/softpak-components-spx-welcome.mjs +3 -3
- package/fesm2022/softpak-components-spx-welcome.mjs.map +1 -1
- package/package.json +55 -55
- package/tailwind.css +1 -1
- package/{spx-update/index.d.ts → types/softpak-components-spx-update.d.ts} +6 -6
- /package/{spx-404-page/index.d.ts → types/softpak-components-spx-404-page.d.ts} +0 -0
- /package/{spx-alert/index.d.ts → types/softpak-components-spx-alert.d.ts} +0 -0
- /package/{spx-app-configuration/index.d.ts → types/softpak-components-spx-app-configuration.d.ts} +0 -0
- /package/{spx-app-expiry/index.d.ts → types/softpak-components-spx-app-expiry.d.ts} +0 -0
- /package/{spx-button/index.d.ts → types/softpak-components-spx-button.d.ts} +0 -0
- /package/{spx-capitalize/index.d.ts → types/softpak-components-spx-capitalize.d.ts} +0 -0
- /package/{spx-card/index.d.ts → types/softpak-components-spx-card.d.ts} +0 -0
- /package/{spx-change-details/index.d.ts → types/softpak-components-spx-change-details.d.ts} +0 -0
- /package/{spx-channel-selection/index.d.ts → types/softpak-components-spx-channel-selection.d.ts} +0 -0
- /package/{spx-check-digit/index.d.ts → types/softpak-components-spx-check-digit.d.ts} +0 -0
- /package/{spx-confirm/index.d.ts → types/softpak-components-spx-confirm.d.ts} +0 -0
- /package/{spx-form-section/index.d.ts → types/softpak-components-spx-form-section.d.ts} +0 -0
- /package/{spx-form-view/index.d.ts → types/softpak-components-spx-form-view.d.ts} +0 -0
- /package/{spx-helpers/index.d.ts → types/softpak-components-spx-helpers.d.ts} +0 -0
- /package/{spx-inputs/index.d.ts → types/softpak-components-spx-inputs.d.ts} +0 -0
- /package/{spx-navigation/index.d.ts → types/softpak-components-spx-navigation.d.ts} +0 -0
- /package/{spx-number-check/index.d.ts → types/softpak-components-spx-number-check.d.ts} +0 -0
- /package/{spx-pagination/index.d.ts → types/softpak-components-spx-pagination.d.ts} +0 -0
- /package/{spx-patch/index.d.ts → types/softpak-components-spx-patch.d.ts} +0 -0
- /package/{spx-pipes/index.d.ts → types/softpak-components-spx-pipes.d.ts} +0 -0
- /package/{spx-progress-bar/index.d.ts → types/softpak-components-spx-progress-bar.d.ts} +0 -0
- /package/{spx-redux/index.d.ts → types/softpak-components-spx-redux.d.ts} +0 -0
- /package/{spx-spinner/index.d.ts → types/softpak-components-spx-spinner.d.ts} +0 -0
- /package/{spx-stock-info/index.d.ts → types/softpak-components-spx-stock-info.d.ts} +0 -0
- /package/{spx-storage/index.d.ts → types/softpak-components-spx-storage.d.ts} +0 -0
- /package/{spx-suggestion/index.d.ts → types/softpak-components-spx-suggestion.d.ts} +0 -0
- /package/{spx-tabs/index.d.ts → types/softpak-components-spx-tabs.d.ts} +0 -0
- /package/{spx-toaster/index.d.ts → types/softpak-components-spx-toaster.d.ts} +0 -0
- /package/{spx-toggle/index.d.ts → types/softpak-components-spx-toggle.d.ts} +0 -0
- /package/{spx-translate/index.d.ts → types/softpak-components-spx-translate.d.ts} +0 -0
- /package/{spx-validation-messages/index.d.ts → types/softpak-components-spx-validation-messages.d.ts} +0 -0
- /package/{spx-validation/index.d.ts → types/softpak-components-spx-validation.d.ts} +0 -0
- /package/{spx-welcome/index.d.ts → types/softpak-components-spx-welcome.d.ts} +0 -0
- /package/{index.d.ts → types/softpak-components.d.ts} +0 -0
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
2
|
import { Injectable, inject, computed, input, model, output, signal, HostListener, ChangeDetectionStrategy, Component, viewChild, EventEmitter, effect, untracked, ViewChildren, Output } from '@angular/core';
|
|
3
|
-
import {
|
|
3
|
+
import { faEdit, faSearch, faQuestion, faTimes, faXmark } from '@fortawesome/free-solid-svg-icons';
|
|
4
4
|
import * as i1 from '@fortawesome/angular-fontawesome';
|
|
5
5
|
import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
|
|
6
|
-
import { faEdit, faSearch, faQuestion, faTimes, faXmark } from '@fortawesome/free-solid-svg-icons';
|
|
7
|
-
import { BehaviorSubject, map, pairwise, filter, fromEvent } from 'rxjs';
|
|
8
6
|
import { IsSeverityPipe } from '@softpak/components/spx-pipes';
|
|
7
|
+
import { BehaviorSubject, map, pairwise, filter, fromEvent } from 'rxjs';
|
|
8
|
+
import { SpxButtonComponent } from '@softpak/components/spx-button';
|
|
9
9
|
import { SpxSeverityEnum, valuePairToValue } from '@softpak/components/spx-helpers';
|
|
10
10
|
import * as i1$1 from '@angular/forms';
|
|
11
11
|
import { ReactiveFormsModule, FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
|
|
@@ -42,10 +42,10 @@ class SelectedInputService {
|
|
|
42
42
|
setSelectedElementId(id) {
|
|
43
43
|
this.focusedElement.next(id);
|
|
44
44
|
}
|
|
45
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
46
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
45
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SelectedInputService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
46
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SelectedInputService, providedIn: 'root' }); }
|
|
47
47
|
}
|
|
48
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
48
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SelectedInputService, decorators: [{
|
|
49
49
|
type: Injectable,
|
|
50
50
|
args: [{
|
|
51
51
|
providedIn: 'root', // Ensure the service is available globally
|
|
@@ -110,19 +110,19 @@ class SpxInputBoxComponent {
|
|
|
110
110
|
onHelp() {
|
|
111
111
|
this.spxHelp.emit();
|
|
112
112
|
}
|
|
113
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
114
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
113
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SpxInputBoxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
114
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: SpxInputBoxComponent, isStandalone: true, selector: "spx-input-box", inputs: { spxCompact: { classPropertyName: "spxCompact", publicName: "spxCompact", isSignal: true, isRequired: false, transformFunction: null }, spxLabel: { classPropertyName: "spxLabel", publicName: "spxLabel", isSignal: true, isRequired: false, transformFunction: null }, spxName: { classPropertyName: "spxName", publicName: "spxName", isSignal: true, isRequired: false, transformFunction: null }, spxReadonly: { classPropertyName: "spxReadonly", publicName: "spxReadonly", isSignal: true, isRequired: false, transformFunction: null }, spxRequired: { classPropertyName: "spxRequired", publicName: "spxRequired", isSignal: true, isRequired: false, transformFunction: null }, spxShowClear: { classPropertyName: "spxShowClear", publicName: "spxShowClear", isSignal: true, isRequired: false, transformFunction: null }, spxShowEdit: { classPropertyName: "spxShowEdit", publicName: "spxShowEdit", isSignal: true, isRequired: false, transformFunction: null }, spxShowHelp: { classPropertyName: "spxShowHelp", publicName: "spxShowHelp", isSignal: true, isRequired: false, transformFunction: null }, spxShowLabel: { classPropertyName: "spxShowLabel", publicName: "spxShowLabel", isSignal: true, isRequired: false, transformFunction: null }, spxShowSearch: { classPropertyName: "spxShowSearch", publicName: "spxShowSearch", isSignal: true, isRequired: false, transformFunction: null }, spxShowValidationMessages: { classPropertyName: "spxShowValidationMessages", publicName: "spxShowValidationMessages", isSignal: true, isRequired: false, transformFunction: null }, spxAlert: { classPropertyName: "spxAlert", publicName: "spxAlert", isSignal: true, isRequired: false, transformFunction: null }, spxValue: { classPropertyName: "spxValue", publicName: "spxValue", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { spxValue: "spxValueChange", spxClear: "spxClear", spxSearch: "spxSearch", spxEdit: "spxEdit", spxHelp: "spxHelp", spxSetIdInParent: "spxSetIdInParent" }, host: { listeners: { "click": "handleFocusIn($event)", "focusin": "handleFocusIn($event)", "focusout": "handleFocusOut($event)" } }, ngImport: i0, template: "<div class=\"flex rounded w-full gap-1\" [class.rounded-none]=\"this.spxShowValidationMessages()\"\n [class.rounded-t]=\"this.spxShowValidationMessages()\" [class.outline-none]=\"this.spxIsFocused() && !this.spxReadonly()\"\n [class.ring-2]=\"this.spxIsFocused() && !this.spxReadonly()\"\n [class.ring-offset-2]=\"this.spxIsFocused() && !this.spxReadonly()\"\n [class.ring-blue-500]=\"this.spxIsFocused() && !this.spxReadonly()\" [class.bg-white]=\"!this.spxReadonly()\"\n [class.bg-gray-300]=\"this.spxReadonly()\" [class.cursor-not-allowed]=\"this.spxReadonly()\">\n <div class=\"flex-auto p-3\" [class.p-0]=\"this.spxCompact()\" [class.flex]=\"this.spxCompact()\"\n [class.items-center]=\"this.spxCompact()\">\n @if (this.spxShowLabel()) {\n <div class=\"font-bold text-sm mb-1 text-gray-800\" [class.mb-0]=\"this.spxCompact()\" [class.px-3]=\"this.spxCompact()\">\n {{this.spxLabel()}} @if (spxRequired()) {\n <span class=\"text-red-800\">*</span>\n }\n </div>\n }\n\n <ng-content select=\"[controls]\"></ng-content>\n </div>\n <div class=\"flex flex-none gap-1 p-1\">\n @if (this.spxShowEdit()) {\n <spx-button (spxClick)=\"onEdit()\" [spxFullHeight]=\"true\" [spxSize]=\"'xl'\" [spxType]=\"'button'\">\n <fa-icon [icon]=\"faEdit\" class=\"block text-xl\"></fa-icon>\n </spx-button>\n }\n @if (this.spxShowHelp()) {\n <spx-button (spxClick)=\"onHelp()\" [spxFullHeight]=\"true\" [spxDisabled]=\"this.spxReadonly()\" [spxSize]=\"'xl'\"\n [spxTabIndex]=\"-1\" [spxType]=\"'button'\">\n <fa-icon [icon]=\"faQuestion\" class=\"block text-xl\"></fa-icon>\n </spx-button>\n }\n @if (this.spxShowSearch()) {\n <spx-button (spxClick)=\"onSearch()\" [spxFullHeight]=\"true\" [spxDisabled]=\"this.spxReadonly()\"\n [spxName]=\"searchButtonName()\" [spxSize]=\"'xl'\" [spxTabIndex]=\"-1\" [spxType]=\"'button'\">\n <fa-icon [icon]=\"faSearch\" class=\"block text-xl\"></fa-icon>\n </spx-button>\n }\n @if (this.spxShowClear()) {\n <spx-button (spxClick)=\"onClear()\"\n [spxDisabled]=\"this.spxReadonly() || (this.spxValue()?.description !== 'No' && !this.spxValue()?.value)\"\n [spxFullHeight]=\"true\" [spxName]=\"clearButtonName()\" [spxSize]=\"'xl'\" [spxTabIndex]=\"-1\" [spxType]=\"'button'\">\n <fa-icon [icon]=\"faTimes\" class=\"block text-xl\"></fa-icon>\n </spx-button>\n }\n </div>\n</div>\n@if (this.spxShowValidationMessages()) {\n<ng-content select=\"[validation-messages]\"></ng-content>\n}\n@else if (this.spxAlert()) {\n<div [class.bg-red-700]=\"this.spxAlert()?.severity | isSeverity: SpxSeverity.error\"\n [class.bg-green-700]=\"this.spxAlert()?.severity | isSeverity: SpxSeverity.success\"\n [class.bg-blue-700]=\"this.spxAlert()?.severity | isSeverity: SpxSeverity.info\"\n [class.bg-gray-400]=\"this.spxAlert()?.severity | isSeverity: SpxSeverity.unknown\"\n [class.bg-amber-700]=\"this.spxAlert()?.severity | isSeverity: SpxSeverity.warning\" class=\"rounded-b text-white p-3\">\n <div>\n {{this.spxAlert()?.text}}\n </div>\n</div>\n}", dependencies: [{ kind: "component", type: SpxButtonComponent, selector: "spx-button", inputs: ["spxDisabled", "spxClass", "spxClassObject", "spxForm", "spxFullHeight", "spxFullWidth", "spxSeverity", "spxSize", "spxTabIndex", "spxType", "spxName"], outputs: ["spxClick"] }, { kind: "ngmodule", type: FontAwesomeModule }, { kind: "component", type: i1.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "mask", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "transform", "a11yRole"], outputs: ["iconChange", "titleChange", "animationChange", "maskChange", "flipChange", "sizeChange", "pullChange", "borderChange", "inverseChange", "symbolChange", "rotateChange", "fixedWidthChange", "transformChange", "a11yRoleChange"] }, { kind: "pipe", type: IsSeverityPipe, name: "isSeverity" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
115
115
|
}
|
|
116
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
116
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SpxInputBoxComponent, decorators: [{
|
|
117
117
|
type: Component,
|
|
118
118
|
args: [{ selector: 'spx-input-box', imports: [
|
|
119
119
|
SpxButtonComponent,
|
|
120
120
|
FontAwesomeModule,
|
|
121
121
|
IsSeverityPipe
|
|
122
122
|
], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
123
|
-
"(click)": "handleFocusIn()"
|
|
123
|
+
"(click)": "handleFocusIn($event)"
|
|
124
124
|
}, template: "<div class=\"flex rounded w-full gap-1\" [class.rounded-none]=\"this.spxShowValidationMessages()\"\n [class.rounded-t]=\"this.spxShowValidationMessages()\" [class.outline-none]=\"this.spxIsFocused() && !this.spxReadonly()\"\n [class.ring-2]=\"this.spxIsFocused() && !this.spxReadonly()\"\n [class.ring-offset-2]=\"this.spxIsFocused() && !this.spxReadonly()\"\n [class.ring-blue-500]=\"this.spxIsFocused() && !this.spxReadonly()\" [class.bg-white]=\"!this.spxReadonly()\"\n [class.bg-gray-300]=\"this.spxReadonly()\" [class.cursor-not-allowed]=\"this.spxReadonly()\">\n <div class=\"flex-auto p-3\" [class.p-0]=\"this.spxCompact()\" [class.flex]=\"this.spxCompact()\"\n [class.items-center]=\"this.spxCompact()\">\n @if (this.spxShowLabel()) {\n <div class=\"font-bold text-sm mb-1 text-gray-800\" [class.mb-0]=\"this.spxCompact()\" [class.px-3]=\"this.spxCompact()\">\n {{this.spxLabel()}} @if (spxRequired()) {\n <span class=\"text-red-800\">*</span>\n }\n </div>\n }\n\n <ng-content select=\"[controls]\"></ng-content>\n </div>\n <div class=\"flex flex-none gap-1 p-1\">\n @if (this.spxShowEdit()) {\n <spx-button (spxClick)=\"onEdit()\" [spxFullHeight]=\"true\" [spxSize]=\"'xl'\" [spxType]=\"'button'\">\n <fa-icon [icon]=\"faEdit\" class=\"block text-xl\"></fa-icon>\n </spx-button>\n }\n @if (this.spxShowHelp()) {\n <spx-button (spxClick)=\"onHelp()\" [spxFullHeight]=\"true\" [spxDisabled]=\"this.spxReadonly()\" [spxSize]=\"'xl'\"\n [spxTabIndex]=\"-1\" [spxType]=\"'button'\">\n <fa-icon [icon]=\"faQuestion\" class=\"block text-xl\"></fa-icon>\n </spx-button>\n }\n @if (this.spxShowSearch()) {\n <spx-button (spxClick)=\"onSearch()\" [spxFullHeight]=\"true\" [spxDisabled]=\"this.spxReadonly()\"\n [spxName]=\"searchButtonName()\" [spxSize]=\"'xl'\" [spxTabIndex]=\"-1\" [spxType]=\"'button'\">\n <fa-icon [icon]=\"faSearch\" class=\"block text-xl\"></fa-icon>\n </spx-button>\n }\n @if (this.spxShowClear()) {\n <spx-button (spxClick)=\"onClear()\"\n [spxDisabled]=\"this.spxReadonly() || (this.spxValue()?.description !== 'No' && !this.spxValue()?.value)\"\n [spxFullHeight]=\"true\" [spxName]=\"clearButtonName()\" [spxSize]=\"'xl'\" [spxTabIndex]=\"-1\" [spxType]=\"'button'\">\n <fa-icon [icon]=\"faTimes\" class=\"block text-xl\"></fa-icon>\n </spx-button>\n }\n </div>\n</div>\n@if (this.spxShowValidationMessages()) {\n<ng-content select=\"[validation-messages]\"></ng-content>\n}\n@else if (this.spxAlert()) {\n<div [class.bg-red-700]=\"this.spxAlert()?.severity | isSeverity: SpxSeverity.error\"\n [class.bg-green-700]=\"this.spxAlert()?.severity | isSeverity: SpxSeverity.success\"\n [class.bg-blue-700]=\"this.spxAlert()?.severity | isSeverity: SpxSeverity.info\"\n [class.bg-gray-400]=\"this.spxAlert()?.severity | isSeverity: SpxSeverity.unknown\"\n [class.bg-amber-700]=\"this.spxAlert()?.severity | isSeverity: SpxSeverity.warning\" class=\"rounded-b text-white p-3\">\n <div>\n {{this.spxAlert()?.text}}\n </div>\n</div>\n}" }]
|
|
125
|
-
}], propDecorators: { handleFocusIn: [{
|
|
125
|
+
}], propDecorators: { spxCompact: [{ type: i0.Input, args: [{ isSignal: true, alias: "spxCompact", required: false }] }], spxLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "spxLabel", required: false }] }], spxName: [{ type: i0.Input, args: [{ isSignal: true, alias: "spxName", required: false }] }], spxReadonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "spxReadonly", required: false }] }], spxRequired: [{ type: i0.Input, args: [{ isSignal: true, alias: "spxRequired", required: false }] }], spxShowClear: [{ type: i0.Input, args: [{ isSignal: true, alias: "spxShowClear", required: false }] }], spxShowEdit: [{ type: i0.Input, args: [{ isSignal: true, alias: "spxShowEdit", required: false }] }], spxShowHelp: [{ type: i0.Input, args: [{ isSignal: true, alias: "spxShowHelp", required: false }] }], spxShowLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "spxShowLabel", required: false }] }], spxShowSearch: [{ type: i0.Input, args: [{ isSignal: true, alias: "spxShowSearch", required: false }] }], spxShowValidationMessages: [{ type: i0.Input, args: [{ isSignal: true, alias: "spxShowValidationMessages", required: false }] }], spxAlert: [{ type: i0.Input, args: [{ isSignal: true, alias: "spxAlert", required: false }] }], spxValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "spxValue", required: false }] }, { type: i0.Output, args: ["spxValueChange"] }], spxClear: [{ type: i0.Output, args: ["spxClear"] }], spxSearch: [{ type: i0.Output, args: ["spxSearch"] }], spxEdit: [{ type: i0.Output, args: ["spxEdit"] }], spxHelp: [{ type: i0.Output, args: ["spxHelp"] }], spxSetIdInParent: [{ type: i0.Output, args: ["spxSetIdInParent"] }], handleFocusIn: [{
|
|
126
126
|
type: HostListener,
|
|
127
127
|
args: ['focusin', ["$event"]]
|
|
128
128
|
}], handleFocusOut: [{
|
|
@@ -168,15 +168,15 @@ class SpxDropdownComponent {
|
|
|
168
168
|
this.focusPosition.set(0);
|
|
169
169
|
this.spxSelect.emit(valuePair);
|
|
170
170
|
}
|
|
171
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
172
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
171
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SpxDropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
172
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: SpxDropdownComponent, isStandalone: true, selector: "spx-dropdown", inputs: { spxSuggestions: { classPropertyName: "spxSuggestions", publicName: "spxSuggestions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { spxSelect: "spxSelect" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"relative text-black\">\n <div\n class=\"absolute bg-gray-100 left-0 right-0 z-20\">\n @for (valuePair of this.spxSuggestions(); track valuePair; let i = $index) {\n <button\n class=\"text-black block w-full p-2 border border-gray-200 rounded-lg shadow hover:bg-gray-200 flex items-center text-left\"\n [class.bg-gray-100]=\"i === this.focusPosition()\"\n [class.bg-white]=\"i !== this.focusPosition()\"\n (click)=\"this.handleSuggestionClick(valuePair)\"\n [attr.tabindex]=\"-1\"\n [attr.type]=\"'button'\">\n <div class=\"flex-1 p-1 font-bold text-lg\">{{valuePair?.description}}</div>\n <spx-button (spxClick)=\"this.handleSuggestionClick(valuePair)\" [spxType]=\"'button'\" [spxTabIndex]=\"-1\">Select</spx-button>\n </button>\n }\n </div>\n</div>", dependencies: [{ kind: "component", type: SpxButtonComponent, selector: "spx-button", inputs: ["spxDisabled", "spxClass", "spxClassObject", "spxForm", "spxFullHeight", "spxFullWidth", "spxSeverity", "spxSize", "spxTabIndex", "spxType", "spxName"], outputs: ["spxClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
173
173
|
}
|
|
174
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
174
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SpxDropdownComponent, decorators: [{
|
|
175
175
|
type: Component,
|
|
176
176
|
args: [{ selector: 'spx-dropdown', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
|
|
177
177
|
SpxButtonComponent
|
|
178
178
|
], template: "<div class=\"relative text-black\">\n <div\n class=\"absolute bg-gray-100 left-0 right-0 z-20\">\n @for (valuePair of this.spxSuggestions(); track valuePair; let i = $index) {\n <button\n class=\"text-black block w-full p-2 border border-gray-200 rounded-lg shadow hover:bg-gray-200 flex items-center text-left\"\n [class.bg-gray-100]=\"i === this.focusPosition()\"\n [class.bg-white]=\"i !== this.focusPosition()\"\n (click)=\"this.handleSuggestionClick(valuePair)\"\n [attr.tabindex]=\"-1\"\n [attr.type]=\"'button'\">\n <div class=\"flex-1 p-1 font-bold text-lg\">{{valuePair?.description}}</div>\n <spx-button (spxClick)=\"this.handleSuggestionClick(valuePair)\" [spxType]=\"'button'\" [spxTabIndex]=\"-1\">Select</spx-button>\n </button>\n }\n </div>\n</div>" }]
|
|
179
|
-
}] });
|
|
179
|
+
}], propDecorators: { spxSuggestions: [{ type: i0.Input, args: [{ isSignal: true, alias: "spxSuggestions", required: false }] }], spxSelect: [{ type: i0.Output, args: ["spxSelect"] }] } });
|
|
180
180
|
|
|
181
181
|
var SpxInputTypeEnum;
|
|
182
182
|
(function (SpxInputTypeEnum) {
|
|
@@ -257,10 +257,10 @@ class SpxInputTextComponent {
|
|
|
257
257
|
this.spxSetFocus();
|
|
258
258
|
}
|
|
259
259
|
}
|
|
260
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
261
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
260
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SpxInputTextComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
261
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: SpxInputTextComponent, isStandalone: true, selector: "spx-input-text", inputs: { spxSpeedDial: { classPropertyName: "spxSpeedDial", publicName: "spxSpeedDial", isSignal: true, isRequired: false, transformFunction: null }, spxName: { classPropertyName: "spxName", publicName: "spxName", isSignal: true, isRequired: false, transformFunction: null }, spxAutofocus: { classPropertyName: "spxAutofocus", publicName: "spxAutofocus", isSignal: true, isRequired: false, transformFunction: null }, spxAutocomplete: { classPropertyName: "spxAutocomplete", publicName: "spxAutocomplete", isSignal: true, isRequired: false, transformFunction: null }, spxInputMode: { classPropertyName: "spxInputMode", publicName: "spxInputMode", isSignal: true, isRequired: false, transformFunction: null }, spxPattern: { classPropertyName: "spxPattern", publicName: "spxPattern", isSignal: true, isRequired: false, transformFunction: null }, spxSuggestions: { classPropertyName: "spxSuggestions", publicName: "spxSuggestions", isSignal: true, isRequired: false, transformFunction: null }, spxReadonly: { classPropertyName: "spxReadonly", publicName: "spxReadonly", isSignal: true, isRequired: false, transformFunction: null }, spxValidators: { classPropertyName: "spxValidators", publicName: "spxValidators", isSignal: true, isRequired: false, transformFunction: null }, spxCapitalize: { classPropertyName: "spxCapitalize", publicName: "spxCapitalize", isSignal: true, isRequired: false, transformFunction: null }, spxType: { classPropertyName: "spxType", publicName: "spxType", isSignal: true, isRequired: false, transformFunction: null }, spxWasInternalUpdate: { classPropertyName: "spxWasInternalUpdate", publicName: "spxWasInternalUpdate", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, spxElementId: { classPropertyName: "spxElementId", publicName: "spxElementId", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["input"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"relative text-black\">\n <input #input class=\"font-bold text-lg w-full outline-none\" autocomplete=\"off\" spellcheck=\"false\"\n [attr.autocomplete]=\"this.spxAutocomplete()\" [attr.autofocus]=\"this.spxAutofocus()\"\n [attr.inputMode]=\"this.spxInputMode()\" [attr.pattern]=\"this.spxPattern()\" [attr.name]=\"this.spxName()\"\n [attr.type]=\"this.spxType()\" [class.bg-white]=\"!this.spxReadonly()\" [class.bg-gray-300]=\"this.spxReadonly()\"\n [class.cursor-not-allowed]=\"this.spxReadonly()\" [class.uppercase]=\"this.spxCapitalize()\"\n [disabled]=\"this.mappedReadonly()\" [ngModel]=\"\n this.value()?.description\n ? this.value()?.description\n : this.value()?.value\n \" (ngModelChange)=\"this.handleChange($event)\" />\n @if (this.value()?.description && this.value()?.value &&\n this.value()?.description?.valueOf() !== this.value()?.value?.valueOf()) {\n <span>{{ this.value()?.value }}</span>\n } @if (this.spxIsFocused() && (this.spxType() === 'overlay' || this.spxType()\n === 'overlaynumber')) {\n <spx-dropdown [spxSuggestions]=\"this.spxSuggestions()\" (spxSelect)=\"this.handleSuggestionClick($event)\">\n </spx-dropdown>\n } @if (this.spxSpeedDial()) {\n <div class=\"flex flex-wrap gap-3\">\n @for (speedDial of this.spxSpeedDial(); track $index) {\n <button class=\"px-3 px-1\" [ngClass]=\"'bg-' + speedDial.backgroundColor\" (click)=\"doSelect(speedDial)\">\n {{ speedDial.valuePair.description }}\n </button>\n }\n </div>\n }\n</div>", dependencies: [{ kind: "component", type: SpxDropdownComponent, selector: "spx-dropdown", inputs: ["spxSuggestions"], outputs: ["spxSelect"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
262
262
|
}
|
|
263
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
263
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SpxInputTextComponent, decorators: [{
|
|
264
264
|
type: Component,
|
|
265
265
|
args: [{ selector: 'spx-input-text', imports: [
|
|
266
266
|
SpxDropdownComponent,
|
|
@@ -268,7 +268,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImpor
|
|
|
268
268
|
FormsModule,
|
|
269
269
|
NgClass,
|
|
270
270
|
], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"relative text-black\">\n <input #input class=\"font-bold text-lg w-full outline-none\" autocomplete=\"off\" spellcheck=\"false\"\n [attr.autocomplete]=\"this.spxAutocomplete()\" [attr.autofocus]=\"this.spxAutofocus()\"\n [attr.inputMode]=\"this.spxInputMode()\" [attr.pattern]=\"this.spxPattern()\" [attr.name]=\"this.spxName()\"\n [attr.type]=\"this.spxType()\" [class.bg-white]=\"!this.spxReadonly()\" [class.bg-gray-300]=\"this.spxReadonly()\"\n [class.cursor-not-allowed]=\"this.spxReadonly()\" [class.uppercase]=\"this.spxCapitalize()\"\n [disabled]=\"this.mappedReadonly()\" [ngModel]=\"\n this.value()?.description\n ? this.value()?.description\n : this.value()?.value\n \" (ngModelChange)=\"this.handleChange($event)\" />\n @if (this.value()?.description && this.value()?.value &&\n this.value()?.description?.valueOf() !== this.value()?.value?.valueOf()) {\n <span>{{ this.value()?.value }}</span>\n } @if (this.spxIsFocused() && (this.spxType() === 'overlay' || this.spxType()\n === 'overlaynumber')) {\n <spx-dropdown [spxSuggestions]=\"this.spxSuggestions()\" (spxSelect)=\"this.handleSuggestionClick($event)\">\n </spx-dropdown>\n } @if (this.spxSpeedDial()) {\n <div class=\"flex flex-wrap gap-3\">\n @for (speedDial of this.spxSpeedDial(); track $index) {\n <button class=\"px-3 px-1\" [ngClass]=\"'bg-' + speedDial.backgroundColor\" (click)=\"doSelect(speedDial)\">\n {{ speedDial.valuePair.description }}\n </button>\n }\n </div>\n }\n</div>" }]
|
|
271
|
-
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }] });
|
|
271
|
+
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { spxSpeedDial: [{ type: i0.Input, args: [{ isSignal: true, alias: "spxSpeedDial", required: false }] }], spxName: [{ type: i0.Input, args: [{ isSignal: true, alias: "spxName", required: false }] }], spxAutofocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "spxAutofocus", required: false }] }], spxAutocomplete: [{ type: i0.Input, args: [{ isSignal: true, alias: "spxAutocomplete", required: false }] }], spxInputMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "spxInputMode", required: false }] }], spxPattern: [{ type: i0.Input, args: [{ isSignal: true, alias: "spxPattern", required: false }] }], spxSuggestions: [{ type: i0.Input, args: [{ isSignal: true, alias: "spxSuggestions", required: false }] }], spxReadonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "spxReadonly", required: false }] }], spxValidators: [{ type: i0.Input, args: [{ isSignal: true, alias: "spxValidators", required: false }] }], spxCapitalize: [{ type: i0.Input, args: [{ isSignal: true, alias: "spxCapitalize", required: false }] }], spxType: [{ type: i0.Input, args: [{ isSignal: true, alias: "spxType", required: false }] }], spxWasInternalUpdate: [{ type: i0.Input, args: [{ isSignal: true, alias: "spxWasInternalUpdate", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], spxElementId: [{ type: i0.Input, args: [{ isSignal: true, alias: "spxElementId", required: false }] }], inputRef: [{ type: i0.ViewChild, args: ['input', { isSignal: true }] }] } });
|
|
272
272
|
|
|
273
273
|
// {
|
|
274
274
|
// defaultFocusPosition: 3,
|
|
@@ -621,16 +621,16 @@ class SpxInputCycleComponent {
|
|
|
621
621
|
if (el.value)
|
|
622
622
|
this.setT(() => el.select()); // selection guarded
|
|
623
623
|
}
|
|
624
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
625
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
624
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SpxInputCycleComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
625
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: SpxInputCycleComponent, isStandalone: true, selector: "spx-input-cycle", inputs: { spxSpeedDial: { classPropertyName: "spxSpeedDial", publicName: "spxSpeedDial", isSignal: true, isRequired: false, transformFunction: null }, spxName: { classPropertyName: "spxName", publicName: "spxName", isSignal: true, isRequired: false, transformFunction: null }, spxAutofocus: { classPropertyName: "spxAutofocus", publicName: "spxAutofocus", isSignal: true, isRequired: false, transformFunction: null }, spxAutocomplete: { classPropertyName: "spxAutocomplete", publicName: "spxAutocomplete", isSignal: true, isRequired: false, transformFunction: null }, spxCycleConfig: { classPropertyName: "spxCycleConfig", publicName: "spxCycleConfig", isSignal: true, isRequired: true, transformFunction: null }, spxInputMode: { classPropertyName: "spxInputMode", publicName: "spxInputMode", isSignal: true, isRequired: false, transformFunction: null }, spxReadonly: { classPropertyName: "spxReadonly", publicName: "spxReadonly", isSignal: true, isRequired: false, transformFunction: null }, spxValidators: { classPropertyName: "spxValidators", publicName: "spxValidators", isSignal: true, isRequired: false, transformFunction: null }, spxCapitalize: { classPropertyName: "spxCapitalize", publicName: "spxCapitalize", isSignal: true, isRequired: false, transformFunction: null }, spxType: { classPropertyName: "spxType", publicName: "spxType", isSignal: true, isRequired: false, transformFunction: null }, spxWasInternalUpdate: { classPropertyName: "spxWasInternalUpdate", publicName: "spxWasInternalUpdate", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, spxElementId: { classPropertyName: "spxElementId", publicName: "spxElementId", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", completeInput: "completeInput" }, host: { listeners: { "document:pointerdown": "onDocPointerDown($event)", "document:pointerup": "onDocPointerUp()" } }, viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["input"], descendants: true, isSignal: true }, { propertyName: "inputBoxes", predicate: ["inputBox"], descendants: true }], ngImport: i0, template: "<div class=\"relative text-black flex gap-1 w-full\">\n @for (val of values; track $index) {\n <input #inputBox type=\"text\" maxlength=\"1\" pattern=\"\\d*\" [value]=\"val\" (focus)=\"onFocus($index, $event)\"\n (compositionstart)=\"onCompositionStart()\" (compositionend)=\"onCompositionEnd()\" (input)=\"onInput($index, $event)\"\n (keydown)=\"onKeydown($index, $event)\" (mouseup)=\"onMouseUp($event)\"\n [attr.inputMode]=\"this.spxInputMode()\" [attr.pattern]=\"spxCycleConfig().fieldPattern\"\n [class.opacity-50]=\"spxCycleConfig().requiredPositions[$index] === false\"\n [class.bg-sky-100]=\"!this.spxReadonly() && !this.spxSeverity()\"\n [class.bg-red-100]=\"!this.spxReadonly() && this.spxSeverity() === severityError\"\n [class.bg-amber-100]=\"!this.spxReadonly() && this.spxSeverity() === severityWarning\"\n [class.bg-teal-100]=\"!this.spxReadonly() && this.spxSeverity() === severitySuccess\"\n [class.bg-gray-400]=\"this.spxReadonly()\" [class.cursor-not-allowed]=\"this.spxReadonly()\"\n [class.uppercase]=\"this.spxCapitalize()\" [disabled]=\"this.mappedReadonly()\"\n class=\"rounded text-center px-1 py-3 font-bold text-lg w-full\" />\n }\n</div>\n", dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: FormsModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
626
626
|
}
|
|
627
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
627
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SpxInputCycleComponent, decorators: [{
|
|
628
628
|
type: Component,
|
|
629
629
|
args: [{ selector: 'spx-input-cycle', imports: [
|
|
630
630
|
ReactiveFormsModule,
|
|
631
631
|
FormsModule,
|
|
632
632
|
], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"relative text-black flex gap-1 w-full\">\n @for (val of values; track $index) {\n <input #inputBox type=\"text\" maxlength=\"1\" pattern=\"\\d*\" [value]=\"val\" (focus)=\"onFocus($index, $event)\"\n (compositionstart)=\"onCompositionStart()\" (compositionend)=\"onCompositionEnd()\" (input)=\"onInput($index, $event)\"\n (keydown)=\"onKeydown($index, $event)\" (mouseup)=\"onMouseUp($event)\"\n [attr.inputMode]=\"this.spxInputMode()\" [attr.pattern]=\"spxCycleConfig().fieldPattern\"\n [class.opacity-50]=\"spxCycleConfig().requiredPositions[$index] === false\"\n [class.bg-sky-100]=\"!this.spxReadonly() && !this.spxSeverity()\"\n [class.bg-red-100]=\"!this.spxReadonly() && this.spxSeverity() === severityError\"\n [class.bg-amber-100]=\"!this.spxReadonly() && this.spxSeverity() === severityWarning\"\n [class.bg-teal-100]=\"!this.spxReadonly() && this.spxSeverity() === severitySuccess\"\n [class.bg-gray-400]=\"this.spxReadonly()\" [class.cursor-not-allowed]=\"this.spxReadonly()\"\n [class.uppercase]=\"this.spxCapitalize()\" [disabled]=\"this.mappedReadonly()\"\n class=\"rounded text-center px-1 py-3 font-bold text-lg w-full\" />\n }\n</div>\n" }]
|
|
633
|
-
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }], propDecorators: { completeInput: [{
|
|
633
|
+
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }], propDecorators: { spxSpeedDial: [{ type: i0.Input, args: [{ isSignal: true, alias: "spxSpeedDial", required: false }] }], spxName: [{ type: i0.Input, args: [{ isSignal: true, alias: "spxName", required: false }] }], spxAutofocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "spxAutofocus", required: false }] }], spxAutocomplete: [{ type: i0.Input, args: [{ isSignal: true, alias: "spxAutocomplete", required: false }] }], spxCycleConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "spxCycleConfig", required: true }] }], spxInputMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "spxInputMode", required: false }] }], spxReadonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "spxReadonly", required: false }] }], spxValidators: [{ type: i0.Input, args: [{ isSignal: true, alias: "spxValidators", required: false }] }], spxCapitalize: [{ type: i0.Input, args: [{ isSignal: true, alias: "spxCapitalize", required: false }] }], spxType: [{ type: i0.Input, args: [{ isSignal: true, alias: "spxType", required: false }] }], spxWasInternalUpdate: [{ type: i0.Input, args: [{ isSignal: true, alias: "spxWasInternalUpdate", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], spxElementId: [{ type: i0.Input, args: [{ isSignal: true, alias: "spxElementId", required: false }] }], inputRef: [{ type: i0.ViewChild, args: ['input', { isSignal: true }] }], completeInput: [{
|
|
634
634
|
type: Output
|
|
635
635
|
}], inputBoxes: [{
|
|
636
636
|
type: ViewChildren,
|
|
@@ -866,16 +866,16 @@ class SpxInputDateComponent {
|
|
|
866
866
|
this.selectedMonth.set(null);
|
|
867
867
|
this.selectedDay.set(null);
|
|
868
868
|
}
|
|
869
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
870
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
869
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SpxInputDateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
870
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: SpxInputDateComponent, isStandalone: true, selector: "spx-input-date", inputs: { spxMax: { classPropertyName: "spxMax", publicName: "spxMax", isSignal: true, isRequired: true, transformFunction: null }, spxMin: { classPropertyName: "spxMin", publicName: "spxMin", isSignal: true, isRequired: true, transformFunction: null }, spxReadonly: { classPropertyName: "spxReadonly", publicName: "spxReadonly", isSignal: true, isRequired: false, transformFunction: null }, spxValidators: { classPropertyName: "spxValidators", publicName: "spxValidators", isSignal: true, isRequired: false, transformFunction: null }, spxAutoFocus: { classPropertyName: "spxAutoFocus", publicName: "spxAutoFocus", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, spxSelectDay: { classPropertyName: "spxSelectDay", publicName: "spxSelectDay", isSignal: true, isRequired: false, transformFunction: null }, spxSelectMonth: { classPropertyName: "spxSelectMonth", publicName: "spxSelectMonth", isSignal: true, isRequired: false, transformFunction: null }, spxElementId: { classPropertyName: "spxElementId", publicName: "spxElementId", isSignal: true, isRequired: false, transformFunction: null }, spxSuggestions: { classPropertyName: "spxSuggestions", publicName: "spxSuggestions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { listeners: { "keydown": "handleTabKey($event)" } }, viewQueries: [{ propertyName: "yearInputComponent", first: true, predicate: stepType.years, descendants: true, isSignal: true }, { propertyName: "monthInputComponent", first: true, predicate: stepType.months, descendants: true, isSignal: true }, { propertyName: "dayInputComponent", first: true, predicate: stepType.days, descendants: true, isSignal: true }], usesOnChanges: true, ngImport: i0, template: "<div class='spx-input-date__controls'>\n <input #years\n class='spx-input-date__input'\n [ngModel]=\"selectedYear()\"\n (ngModelChange)=\"onModelChange($event, 'years')\"\n [attr.type]=\"'number'\"\n (click)=\"this.handleFocus('years')\"\n [attr.min]=\"1900\"\n [attr.max]=\"2100\"\n [attr.step]=\"1\"\n />\n <div class='spx-input-date__control-label'>Year</div>\n @if (this.spxSelectMonth()) {\n <input #months\n class='spx-input-date__input'\n [ngModel]=\"selectedMonth()\"\n (ngModelChange)=\"onModelChange($event, 'months')\"\n (click)=\"this.handleFocus('months')\"\n [attr.type]=\"'number'\"\n [attr.min]=\"1\"\n [attr.max]=\"12\"\n [attr.step]=\"1\" />\n }\n <div class='spx-input-date__control-label'>Month</div>\n @if (this.spxSelectDay()) {\n <input #days\n class='spx-input-date__input'\n [ngModel]=\"selectedDay()\"\n (ngModelChange)=\"onModelChange($event, 'days')\"\n (click)=\"this.handleFocus('days')\"\n [attr.type]=\"'number'\"\n [attr.min]=\"1\"\n [attr.max]=\"31\"\n [attr.step]=\"1\" />\n <div class='spx-input-date__control-label'>Days</div>\n }\n</div>\n<div class='spx-input-date__suggestions'>\n @for (valuePair of spxSuggestionC(); track valuePair.value) {\n <spx-suggestion [spxSelected]=\"\n (selectedYear() === valuePair.value && this.spxSelectedStep() === 'years') ||\n (selectedMonth() === valuePair.value && this.spxSelectedStep() === 'months') || \n (selectedDay() === valuePair.value && this.spxSelectedStep() === 'days')\"\n (click)=\"this.handleSuggestionClick(valuePair.value)\">{{valuePair?.description}}</spx-suggestion>\n }\n</div>", styles: [":host{display:block}.spx-input-date__input{background-color:transparent;border:1px solid #979797;border-radius:4px;color:var(--spx-input--color, rgba(0, 0, 0, .9));box-sizing:border-box;font-size:16px;margin-right:10px;padding:6px;text-align:center;width:100%}.spx-input-date__input:active{transform:scale(.95)}.spx-input-date__input:focus{border:var(--spx-input-box--focus--border, 1px solid rgb(115, 168, 210));border-radius:4px;outline:none}.spx-input-date__control-label{align-items:center;color:#000000b3;display:inline-grid;font-size:13px;letter-spacing:1px}.spx-input-date__input::-webkit-outer-spin-button,.spx-input-date__input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.spx-input-date__input[type=number]{-moz-appearance:textfield}.spx-input-date__suggestions,.spx-input-date__controls{display:grid;grid-gap:8px;grid-template-columns:repeat(4,1fr);margin-top:8px}\n"], dependencies: [{ kind: "component", type: SpxSuggestionComponent, selector: "spx-suggestion", inputs: ["spxDisabled", "spxFocused", "spxSelected", "spxTabbable"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
871
871
|
}
|
|
872
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
872
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SpxInputDateComponent, decorators: [{
|
|
873
873
|
type: Component,
|
|
874
874
|
args: [{ selector: 'spx-input-date', standalone: true, imports: [
|
|
875
875
|
SpxSuggestionComponent,
|
|
876
876
|
FormsModule
|
|
877
877
|
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class='spx-input-date__controls'>\n <input #years\n class='spx-input-date__input'\n [ngModel]=\"selectedYear()\"\n (ngModelChange)=\"onModelChange($event, 'years')\"\n [attr.type]=\"'number'\"\n (click)=\"this.handleFocus('years')\"\n [attr.min]=\"1900\"\n [attr.max]=\"2100\"\n [attr.step]=\"1\"\n />\n <div class='spx-input-date__control-label'>Year</div>\n @if (this.spxSelectMonth()) {\n <input #months\n class='spx-input-date__input'\n [ngModel]=\"selectedMonth()\"\n (ngModelChange)=\"onModelChange($event, 'months')\"\n (click)=\"this.handleFocus('months')\"\n [attr.type]=\"'number'\"\n [attr.min]=\"1\"\n [attr.max]=\"12\"\n [attr.step]=\"1\" />\n }\n <div class='spx-input-date__control-label'>Month</div>\n @if (this.spxSelectDay()) {\n <input #days\n class='spx-input-date__input'\n [ngModel]=\"selectedDay()\"\n (ngModelChange)=\"onModelChange($event, 'days')\"\n (click)=\"this.handleFocus('days')\"\n [attr.type]=\"'number'\"\n [attr.min]=\"1\"\n [attr.max]=\"31\"\n [attr.step]=\"1\" />\n <div class='spx-input-date__control-label'>Days</div>\n }\n</div>\n<div class='spx-input-date__suggestions'>\n @for (valuePair of spxSuggestionC(); track valuePair.value) {\n <spx-suggestion [spxSelected]=\"\n (selectedYear() === valuePair.value && this.spxSelectedStep() === 'years') ||\n (selectedMonth() === valuePair.value && this.spxSelectedStep() === 'months') || \n (selectedDay() === valuePair.value && this.spxSelectedStep() === 'days')\"\n (click)=\"this.handleSuggestionClick(valuePair.value)\">{{valuePair?.description}}</spx-suggestion>\n }\n</div>", styles: [":host{display:block}.spx-input-date__input{background-color:transparent;border:1px solid #979797;border-radius:4px;color:var(--spx-input--color, rgba(0, 0, 0, .9));box-sizing:border-box;font-size:16px;margin-right:10px;padding:6px;text-align:center;width:100%}.spx-input-date__input:active{transform:scale(.95)}.spx-input-date__input:focus{border:var(--spx-input-box--focus--border, 1px solid rgb(115, 168, 210));border-radius:4px;outline:none}.spx-input-date__control-label{align-items:center;color:#000000b3;display:inline-grid;font-size:13px;letter-spacing:1px}.spx-input-date__input::-webkit-outer-spin-button,.spx-input-date__input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.spx-input-date__input[type=number]{-moz-appearance:textfield}.spx-input-date__suggestions,.spx-input-date__controls{display:grid;grid-gap:8px;grid-template-columns:repeat(4,1fr);margin-top:8px}\n"] }]
|
|
878
|
-
}], propDecorators: { handleTabKey: [{
|
|
878
|
+
}], propDecorators: { spxMax: [{ type: i0.Input, args: [{ isSignal: true, alias: "spxMax", required: true }] }], spxMin: [{ type: i0.Input, args: [{ isSignal: true, alias: "spxMin", required: true }] }], spxReadonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "spxReadonly", required: false }] }], spxValidators: [{ type: i0.Input, args: [{ isSignal: true, alias: "spxValidators", required: false }] }], spxAutoFocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "spxAutoFocus", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], spxSelectDay: [{ type: i0.Input, args: [{ isSignal: true, alias: "spxSelectDay", required: false }] }], spxSelectMonth: [{ type: i0.Input, args: [{ isSignal: true, alias: "spxSelectMonth", required: false }] }], yearInputComponent: [{ type: i0.ViewChild, args: [i0.forwardRef(() => stepType.years), { isSignal: true }] }], monthInputComponent: [{ type: i0.ViewChild, args: [i0.forwardRef(() => stepType.months), { isSignal: true }] }], dayInputComponent: [{ type: i0.ViewChild, args: [i0.forwardRef(() => stepType.days), { isSignal: true }] }], spxElementId: [{ type: i0.Input, args: [{ isSignal: true, alias: "spxElementId", required: false }] }], spxSuggestions: [{ type: i0.Input, args: [{ isSignal: true, alias: "spxSuggestions", required: false }] }], handleTabKey: [{
|
|
879
879
|
type: HostListener,
|
|
880
880
|
args: ['keydown', ['$event']]
|
|
881
881
|
}] } });
|
|
@@ -965,15 +965,15 @@ class SpxInputFloatComponent {
|
|
|
965
965
|
isNumeric(value) {
|
|
966
966
|
return /^[+-]?\d+(\.\d+)?$/.test(value);
|
|
967
967
|
}
|
|
968
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
969
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "
|
|
968
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SpxInputFloatComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
969
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.0.8", type: SpxInputFloatComponent, isStandalone: true, selector: "spx-input-float", inputs: { spxName: { classPropertyName: "spxName", publicName: "spxName", isSignal: true, isRequired: false, transformFunction: null }, spxAutofocus: { classPropertyName: "spxAutofocus", publicName: "spxAutofocus", isSignal: true, isRequired: false, transformFunction: null }, spxElementId: { classPropertyName: "spxElementId", publicName: "spxElementId", isSignal: true, isRequired: false, transformFunction: null }, spxReadonly: { classPropertyName: "spxReadonly", publicName: "spxReadonly", isSignal: true, isRequired: false, transformFunction: null }, spxValidators: { classPropertyName: "spxValidators", publicName: "spxValidators", isSignal: true, isRequired: false, transformFunction: null }, spxStep: { classPropertyName: "spxStep", publicName: "spxStep", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, spxWasInternalUpdate: { classPropertyName: "spxWasInternalUpdate", publicName: "spxWasInternalUpdate", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, viewQueries: [{ propertyName: "firstInputRef", first: true, predicate: ["firstInputRef"], descendants: true, isSignal: true }, { propertyName: "secondInputRef", first: true, predicate: ["secondInputRef"], descendants: true, isSignal: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"flex items-end\">\n <input\n #firstInputRef\n class=\"spx-input-float__input\"\n [attr.autofocus]=\"this.spxAutofocus() ? this.spxAutofocus() : undefined\"\n [attr.disabled]=\"this.spxReadonly()\"\n [attr.pattern]=\"'-?[0-9]*'\"\n [attr.step]=\"1\"\n [attr.type]=\"'text'\"\n [class.spx-input-float--readonly]=\"this.spxReadonly() ? this.spxReadonly() : undefined\"\n [disabled]=\"this.mappedReadonly()\"\n [ngModel]=\"this.internalValue().first ? this.internalValue().first : undefined\"\n (ngModelChange)=\"this.handleInput($event, 1)\" />\n <span class=\"text-black font-bold text-2xl mx-4\">,</span>\n <input #secondInputRef\n [attr.autofocus]=\"this.spxAutofocus() ? this.spxAutofocus() : undefined\"\n class=\"spx-input-float__input\"\n [class.spx-input-float--readonly]=\"this.spxReadonly() ? this.spxReadonly() : undefined\"\n [attr.disabled]=\"this.spxReadonly()\"\n [ngModel]=\"this.internalValue().second ? this.internalValue().second : undefined\"\n (ngModelChange)=\"this.handleInput($event, 2)\"\n [attr.step]=\"1\"\n [attr.type]=\"'text'\"\n [attr.pattern]=\"'[0-9]*'\"\n [disabled]=\"this.mappedReadonly()\" />\n</div>", styles: [":host{display:block}.spx-input-float__input{border:1px solid #333333;border-radius:8px;background-color:transparent;box-sizing:border-box;color:var(--spx-input--color, rgba(0, 0, 0, .9));flex:1;font-size:20px;font-weight:700;padding:8px;width:100%}.spx-input-float__input:focus{outline:none}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
970
970
|
}
|
|
971
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
971
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SpxInputFloatComponent, decorators: [{
|
|
972
972
|
type: Component,
|
|
973
973
|
args: [{ selector: 'spx-input-float', imports: [
|
|
974
974
|
FormsModule,
|
|
975
975
|
], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"flex items-end\">\n <input\n #firstInputRef\n class=\"spx-input-float__input\"\n [attr.autofocus]=\"this.spxAutofocus() ? this.spxAutofocus() : undefined\"\n [attr.disabled]=\"this.spxReadonly()\"\n [attr.pattern]=\"'-?[0-9]*'\"\n [attr.step]=\"1\"\n [attr.type]=\"'text'\"\n [class.spx-input-float--readonly]=\"this.spxReadonly() ? this.spxReadonly() : undefined\"\n [disabled]=\"this.mappedReadonly()\"\n [ngModel]=\"this.internalValue().first ? this.internalValue().first : undefined\"\n (ngModelChange)=\"this.handleInput($event, 1)\" />\n <span class=\"text-black font-bold text-2xl mx-4\">,</span>\n <input #secondInputRef\n [attr.autofocus]=\"this.spxAutofocus() ? this.spxAutofocus() : undefined\"\n class=\"spx-input-float__input\"\n [class.spx-input-float--readonly]=\"this.spxReadonly() ? this.spxReadonly() : undefined\"\n [attr.disabled]=\"this.spxReadonly()\"\n [ngModel]=\"this.internalValue().second ? this.internalValue().second : undefined\"\n (ngModelChange)=\"this.handleInput($event, 2)\"\n [attr.step]=\"1\"\n [attr.type]=\"'text'\"\n [attr.pattern]=\"'[0-9]*'\"\n [disabled]=\"this.mappedReadonly()\" />\n</div>", styles: [":host{display:block}.spx-input-float__input{border:1px solid #333333;border-radius:8px;background-color:transparent;box-sizing:border-box;color:var(--spx-input--color, rgba(0, 0, 0, .9));flex:1;font-size:20px;font-weight:700;padding:8px;width:100%}.spx-input-float__input:focus{outline:none}\n"] }]
|
|
976
|
-
}] });
|
|
976
|
+
}], propDecorators: { spxName: [{ type: i0.Input, args: [{ isSignal: true, alias: "spxName", required: false }] }], spxAutofocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "spxAutofocus", required: false }] }], spxElementId: [{ type: i0.Input, args: [{ isSignal: true, alias: "spxElementId", required: false }] }], spxReadonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "spxReadonly", required: false }] }], spxValidators: [{ type: i0.Input, args: [{ isSignal: true, alias: "spxValidators", required: false }] }], spxStep: [{ type: i0.Input, args: [{ isSignal: true, alias: "spxStep", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }, { type: i0.Output, args: ["valueChange"] }], spxWasInternalUpdate: [{ type: i0.Input, args: [{ isSignal: true, alias: "spxWasInternalUpdate", required: false }] }], firstInputRef: [{ type: i0.ViewChild, args: ['firstInputRef', { isSignal: true }] }], secondInputRef: [{ type: i0.ViewChild, args: ['secondInputRef', { isSignal: true }] }] } });
|
|
977
977
|
|
|
978
978
|
class SpxInputNumberComponent {
|
|
979
979
|
constructor() {
|
|
@@ -1009,13 +1009,13 @@ class SpxInputNumberComponent {
|
|
|
1009
1009
|
this.spxSetFocus();
|
|
1010
1010
|
}
|
|
1011
1011
|
}
|
|
1012
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1013
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "
|
|
1012
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SpxInputNumberComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1013
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.0.8", type: SpxInputNumberComponent, isStandalone: true, selector: "spx-input-number", inputs: { spxName: { classPropertyName: "spxName", publicName: "spxName", isSignal: true, isRequired: false, transformFunction: null }, spxAutofocus: { classPropertyName: "spxAutofocus", publicName: "spxAutofocus", isSignal: true, isRequired: false, transformFunction: null }, spxInputMode: { classPropertyName: "spxInputMode", publicName: "spxInputMode", isSignal: true, isRequired: false, transformFunction: null }, spxReadonly: { classPropertyName: "spxReadonly", publicName: "spxReadonly", isSignal: true, isRequired: false, transformFunction: null }, spxValidators: { classPropertyName: "spxValidators", publicName: "spxValidators", isSignal: true, isRequired: false, transformFunction: null }, spxFocused: { classPropertyName: "spxFocused", publicName: "spxFocused", isSignal: true, isRequired: false, transformFunction: null }, spxStep: { classPropertyName: "spxStep", publicName: "spxStep", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, spxElementId: { classPropertyName: "spxElementId", publicName: "spxElementId", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["input"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"spx-input-number__controls\">\n <input\n #input\n class=\"spx-input-number__input\"\n [attr.autofocus]=\"this.spxAutofocus() ? this.spxAutofocus() : undefined\"\n [class.spx-input-number--readonly]=\"this.spxReadonly() ? this.spxReadonly() : undefined\"\n [attr.disabled]=\"this.spxReadonly()\"\n [attr.inputMode]=\"this.spxInputMode() ? this.spxInputMode() : undefined\"\n [attr.step]=\"this.spxStep() ? this.spxStep() : undefined\"\n [attr.type]=\"'number'\"\n [disabled]=\"this.mappedReadonly()\"\n [ngModel]=\"this.value() ? this.value().value : undefined\"\n (ngModelChange)=\"this.handleChange($event)\" />\n</div> ", styles: [":host{display:block}.spx-input-number__input{border:0;background-color:transparent;box-sizing:border-box;color:var(--spx-input--color, rgba(0, 0, 0, .9));font-size:20px;font-weight:700;margin-right:10px;padding:0;width:100%}.spx-input-number__input:focus{outline:none}.spx-input-number__value{color:#0009;font-size:14px}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1014
1014
|
}
|
|
1015
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1015
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SpxInputNumberComponent, decorators: [{
|
|
1016
1016
|
type: Component,
|
|
1017
1017
|
args: [{ selector: 'spx-input-number', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [FormsModule], template: "<div class=\"spx-input-number__controls\">\n <input\n #input\n class=\"spx-input-number__input\"\n [attr.autofocus]=\"this.spxAutofocus() ? this.spxAutofocus() : undefined\"\n [class.spx-input-number--readonly]=\"this.spxReadonly() ? this.spxReadonly() : undefined\"\n [attr.disabled]=\"this.spxReadonly()\"\n [attr.inputMode]=\"this.spxInputMode() ? this.spxInputMode() : undefined\"\n [attr.step]=\"this.spxStep() ? this.spxStep() : undefined\"\n [attr.type]=\"'number'\"\n [disabled]=\"this.mappedReadonly()\"\n [ngModel]=\"this.value() ? this.value().value : undefined\"\n (ngModelChange)=\"this.handleChange($event)\" />\n</div> ", styles: [":host{display:block}.spx-input-number__input{border:0;background-color:transparent;box-sizing:border-box;color:var(--spx-input--color, rgba(0, 0, 0, .9));font-size:20px;font-weight:700;margin-right:10px;padding:0;width:100%}.spx-input-number__input:focus{outline:none}.spx-input-number__value{color:#0009;font-size:14px}\n"] }]
|
|
1018
|
-
}] });
|
|
1018
|
+
}], propDecorators: { spxName: [{ type: i0.Input, args: [{ isSignal: true, alias: "spxName", required: false }] }], spxAutofocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "spxAutofocus", required: false }] }], spxInputMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "spxInputMode", required: false }] }], spxReadonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "spxReadonly", required: false }] }], spxValidators: [{ type: i0.Input, args: [{ isSignal: true, alias: "spxValidators", required: false }] }], spxFocused: [{ type: i0.Input, args: [{ isSignal: true, alias: "spxFocused", required: false }] }], spxStep: [{ type: i0.Input, args: [{ isSignal: true, alias: "spxStep", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }, { type: i0.Output, args: ["valueChange"] }], inputRef: [{ type: i0.ViewChild, args: ['input', { isSignal: true }] }], spxElementId: [{ type: i0.Input, args: [{ isSignal: true, alias: "spxElementId", required: false }] }] } });
|
|
1019
1019
|
|
|
1020
1020
|
class SpxInputRadioComponent {
|
|
1021
1021
|
constructor() {
|
|
@@ -1094,15 +1094,15 @@ class SpxInputRadioComponent {
|
|
|
1094
1094
|
}
|
|
1095
1095
|
});
|
|
1096
1096
|
}
|
|
1097
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1098
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
1097
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SpxInputRadioComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1098
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: SpxInputRadioComponent, isStandalone: true, selector: "spx-input-radio", inputs: { spxName: { classPropertyName: "spxName", publicName: "spxName", isSignal: true, isRequired: false, transformFunction: null }, spxValidators: { classPropertyName: "spxValidators", publicName: "spxValidators", isSignal: true, isRequired: false, transformFunction: null }, spxShowLabel: { classPropertyName: "spxShowLabel", publicName: "spxShowLabel", isSignal: true, isRequired: false, transformFunction: null }, spxReadonly: { classPropertyName: "spxReadonly", publicName: "spxReadonly", isSignal: true, isRequired: false, transformFunction: null }, spxSuggestions: { classPropertyName: "spxSuggestions", publicName: "spxSuggestions", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, spxElementId: { classPropertyName: "spxElementId", publicName: "spxElementId", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"grid grid-cols-2 gap-2\" [class.mt-3]=\"this.spxShowLabel()\">\n @for (valuePair of this.cachedSuggestions(); track valuePair; let i = $index) {\n <spx-suggestion\n [spxDisabled]=\"this.spxReadonly()\"\n [spxSelected]=\"this.value()?.value === valuePair?.value\"\n [spxTabbable]=\"this.focusPosition() === i\"\n [spxFocused]=\"(this.focusPosition() === i && this.spxIsFocused())\"\n (click)=\"this.handleSuggestionClick(valuePair)\">\n {{valuePair?.description}}\n </spx-suggestion>\n }\n</div>", dependencies: [{ kind: "component", type: SpxSuggestionComponent, selector: "spx-suggestion", inputs: ["spxDisabled", "spxFocused", "spxSelected", "spxTabbable"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1099
1099
|
}
|
|
1100
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1100
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SpxInputRadioComponent, decorators: [{
|
|
1101
1101
|
type: Component,
|
|
1102
1102
|
args: [{ selector: 'spx-input-radio', standalone: true, imports: [
|
|
1103
1103
|
SpxSuggestionComponent
|
|
1104
1104
|
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"grid grid-cols-2 gap-2\" [class.mt-3]=\"this.spxShowLabel()\">\n @for (valuePair of this.cachedSuggestions(); track valuePair; let i = $index) {\n <spx-suggestion\n [spxDisabled]=\"this.spxReadonly()\"\n [spxSelected]=\"this.value()?.value === valuePair?.value\"\n [spxTabbable]=\"this.focusPosition() === i\"\n [spxFocused]=\"(this.focusPosition() === i && this.spxIsFocused())\"\n (click)=\"this.handleSuggestionClick(valuePair)\">\n {{valuePair?.description}}\n </spx-suggestion>\n }\n</div>" }]
|
|
1105
|
-
}] });
|
|
1105
|
+
}], propDecorators: { spxName: [{ type: i0.Input, args: [{ isSignal: true, alias: "spxName", required: false }] }], spxValidators: [{ type: i0.Input, args: [{ isSignal: true, alias: "spxValidators", required: false }] }], spxShowLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "spxShowLabel", required: false }] }], spxReadonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "spxReadonly", required: false }] }], spxSuggestions: [{ type: i0.Input, args: [{ isSignal: true, alias: "spxSuggestions", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], spxElementId: [{ type: i0.Input, args: [{ isSignal: true, alias: "spxElementId", required: false }] }] } });
|
|
1106
1106
|
|
|
1107
1107
|
class SpxInputTimeModalComponent {
|
|
1108
1108
|
constructor(modalController) {
|
|
@@ -1124,10 +1124,10 @@ class SpxInputTimeModalComponent {
|
|
|
1124
1124
|
this.change.emit(value);
|
|
1125
1125
|
this.modalController.dismiss(value);
|
|
1126
1126
|
}
|
|
1127
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1128
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
1127
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SpxInputTimeModalComponent, deps: [{ token: i1$2.ModalController }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1128
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: SpxInputTimeModalComponent, isStandalone: true, selector: "spx-input-time-modal", inputs: { view: { classPropertyName: "view", publicName: "view", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { change: "change" }, ngImport: i0, template: "<ion-header>\n <ion-toolbar>\n <ion-title>Select {{view()}}</ion-title>\n <ion-buttons slot=\"end\">\n <spx-button [spxSeverity]=\"typeError\" (spxClick)=\"closeDialog()\">\n <fa-icon [icon]=\"faXmark\"></fa-icon>\n </spx-button>\n </ion-buttons>\n </ion-toolbar>\n</ion-header>\n<ion-content class=\"ion-padding bg-white\">\n <!-- Uren -->\n <div class=\"custom-bg grid grid-cols-1 gap-3\">\n @if (view() === 'hours') {\n <div class=\"flex-wrap gap-2\">\n <div class=\"grid grid-cols-3 md:grid-cols-4 gap-3\">\n @for (hour of hourOptions(); track hour) {\n <div class=\"text-center font-bold custom-square rounded text-gray-900 text-lg p-3 w-full truncate outline-none bg-sky-100 focus:ring-sky-300 hover:bg-sky-300 active:bg-sky-300\" [class.selected]=\"value() === hour\" (click)=\"onChange(hour)\">\n {{ hour }}\n </div>\n }\n </div>\n </div>\n }\n <!-- Minuten -->\n @if (view() === 'minutes') {\n <div class=\"grid grid-cols-1 gap-3\">\n <div class=\"grid grid-cols-4 md:grid-cols-5 gap-3\">\n @for (minute of minuteOptions(); track minute) {\n <div class=\"text-center font-bold custom-square rounded text-gray-900 text-lg p-3 w-ful truncate outline-none bg-sky-100 focus:ring-sky-300 hover:bg-sky-300 active:bg-sky-300\" [class.selected]=\"value() === minute\" (click)=\"onChange(minute)\">\n {{ minute }}\n </div>\n }\n </div>\n </div>\n }\n </div>\n</ion-content>", dependencies: [{ kind: "ngmodule", type: FontAwesomeModule }, { kind: "component", type: i1.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "mask", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "transform", "a11yRole"], outputs: ["iconChange", "titleChange", "animationChange", "maskChange", "flipChange", "sizeChange", "pullChange", "borderChange", "inverseChange", "symbolChange", "rotateChange", "fixedWidthChange", "transformChange", "a11yRoleChange"] }, { kind: "component", type: IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: IonContent, selector: "ion-content", inputs: ["color", "fixedSlotPlacement", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "component", type: SpxButtonComponent, selector: "spx-button", inputs: ["spxDisabled", "spxClass", "spxClassObject", "spxForm", "spxFullHeight", "spxFullWidth", "spxSeverity", "spxSize", "spxTabIndex", "spxType", "spxName"], outputs: ["spxClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1129
1129
|
}
|
|
1130
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1130
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SpxInputTimeModalComponent, decorators: [{
|
|
1131
1131
|
type: Component,
|
|
1132
1132
|
args: [{ selector: 'spx-input-time-modal', imports: [
|
|
1133
1133
|
FontAwesomeModule,
|
|
@@ -1138,7 +1138,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImpor
|
|
|
1138
1138
|
IonToolbar,
|
|
1139
1139
|
SpxButtonComponent,
|
|
1140
1140
|
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ion-header>\n <ion-toolbar>\n <ion-title>Select {{view()}}</ion-title>\n <ion-buttons slot=\"end\">\n <spx-button [spxSeverity]=\"typeError\" (spxClick)=\"closeDialog()\">\n <fa-icon [icon]=\"faXmark\"></fa-icon>\n </spx-button>\n </ion-buttons>\n </ion-toolbar>\n</ion-header>\n<ion-content class=\"ion-padding bg-white\">\n <!-- Uren -->\n <div class=\"custom-bg grid grid-cols-1 gap-3\">\n @if (view() === 'hours') {\n <div class=\"flex-wrap gap-2\">\n <div class=\"grid grid-cols-3 md:grid-cols-4 gap-3\">\n @for (hour of hourOptions(); track hour) {\n <div class=\"text-center font-bold custom-square rounded text-gray-900 text-lg p-3 w-full truncate outline-none bg-sky-100 focus:ring-sky-300 hover:bg-sky-300 active:bg-sky-300\" [class.selected]=\"value() === hour\" (click)=\"onChange(hour)\">\n {{ hour }}\n </div>\n }\n </div>\n </div>\n }\n <!-- Minuten -->\n @if (view() === 'minutes') {\n <div class=\"grid grid-cols-1 gap-3\">\n <div class=\"grid grid-cols-4 md:grid-cols-5 gap-3\">\n @for (minute of minuteOptions(); track minute) {\n <div class=\"text-center font-bold custom-square rounded text-gray-900 text-lg p-3 w-ful truncate outline-none bg-sky-100 focus:ring-sky-300 hover:bg-sky-300 active:bg-sky-300\" [class.selected]=\"value() === minute\" (click)=\"onChange(minute)\">\n {{ minute }}\n </div>\n }\n </div>\n </div>\n }\n </div>\n</ion-content>" }]
|
|
1141
|
-
}], ctorParameters: () => [{ type: i1$2.ModalController }] });
|
|
1141
|
+
}], ctorParameters: () => [{ type: i1$2.ModalController }], propDecorators: { view: [{ type: i0.Input, args: [{ isSignal: true, alias: "view", required: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], change: [{ type: i0.Output, args: ["change"] }] } });
|
|
1142
1142
|
|
|
1143
1143
|
class SpxInputTimeComponent {
|
|
1144
1144
|
constructor(modalController) {
|
|
@@ -1217,13 +1217,13 @@ class SpxInputTimeComponent {
|
|
|
1217
1217
|
});
|
|
1218
1218
|
}
|
|
1219
1219
|
}
|
|
1220
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1221
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "
|
|
1220
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SpxInputTimeComponent, deps: [{ token: i1$2.ModalController }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1221
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.0.8", type: SpxInputTimeComponent, isStandalone: true, selector: "spx-input-time", inputs: { spxName: { classPropertyName: "spxName", publicName: "spxName", isSignal: true, isRequired: false, transformFunction: null }, spxAutofocus: { classPropertyName: "spxAutofocus", publicName: "spxAutofocus", isSignal: true, isRequired: false, transformFunction: null }, spxInputMode: { classPropertyName: "spxInputMode", publicName: "spxInputMode", isSignal: true, isRequired: false, transformFunction: null }, spxPattern: { classPropertyName: "spxPattern", publicName: "spxPattern", isSignal: true, isRequired: false, transformFunction: null }, spxSuggestions: { classPropertyName: "spxSuggestions", publicName: "spxSuggestions", isSignal: true, isRequired: false, transformFunction: null }, spxReadonly: { classPropertyName: "spxReadonly", publicName: "spxReadonly", isSignal: true, isRequired: false, transformFunction: null }, spxValidators: { classPropertyName: "spxValidators", publicName: "spxValidators", isSignal: true, isRequired: false, transformFunction: null }, spxCapitalize: { classPropertyName: "spxCapitalize", publicName: "spxCapitalize", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { value: "valueChange" }, viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["input"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"relative text-black\">\n <div class=\"flex items-center justify-around gap-3\">\n <div class=\"grow rounded bg-gray-100 p-3 text-xl text-center font-bold\" (click)=\"openDialog('hours')\">{{ formattedHour() ?? '--' }}</div>\n <div class=\"text-gray text-xl\">:</div>\n <div class=\"grow rounded bg-gray-100 p-3 text-xl text-center font-bold\" (click)=\"openDialog('minutes')\">{{ formattedMinute() ?? '--' }}</div>\n </div>\n</div>", styles: [".custom-square.selected{background-color:#007bff;color:#fff;border-color:#007bff}.custom-bg{--background: #FFFFFF}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1222
1222
|
}
|
|
1223
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1223
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SpxInputTimeComponent, decorators: [{
|
|
1224
1224
|
type: Component,
|
|
1225
1225
|
args: [{ selector: 'spx-input-time', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"relative text-black\">\n <div class=\"flex items-center justify-around gap-3\">\n <div class=\"grow rounded bg-gray-100 p-3 text-xl text-center font-bold\" (click)=\"openDialog('hours')\">{{ formattedHour() ?? '--' }}</div>\n <div class=\"text-gray text-xl\">:</div>\n <div class=\"grow rounded bg-gray-100 p-3 text-xl text-center font-bold\" (click)=\"openDialog('minutes')\">{{ formattedMinute() ?? '--' }}</div>\n </div>\n</div>", styles: [".custom-square.selected{background-color:#007bff;color:#fff;border-color:#007bff}.custom-bg{--background: #FFFFFF}\n"] }]
|
|
1226
|
-
}], ctorParameters: () => [{ type: i1$2.ModalController }] });
|
|
1226
|
+
}], ctorParameters: () => [{ type: i1$2.ModalController }], propDecorators: { spxName: [{ type: i0.Input, args: [{ isSignal: true, alias: "spxName", required: false }] }], spxAutofocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "spxAutofocus", required: false }] }], spxInputMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "spxInputMode", required: false }] }], spxPattern: [{ type: i0.Input, args: [{ isSignal: true, alias: "spxPattern", required: false }] }], spxSuggestions: [{ type: i0.Input, args: [{ isSignal: true, alias: "spxSuggestions", required: false }] }], spxReadonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "spxReadonly", required: false }] }], spxValidators: [{ type: i0.Input, args: [{ isSignal: true, alias: "spxValidators", required: false }] }], spxCapitalize: [{ type: i0.Input, args: [{ isSignal: true, alias: "spxCapitalize", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }, { type: i0.Output, args: ["valueChange"] }], inputRef: [{ type: i0.ViewChild, args: ['input', { isSignal: true }] }] } });
|
|
1227
1227
|
|
|
1228
1228
|
class SpxInputComponent {
|
|
1229
1229
|
constructor() {
|
|
@@ -1383,8 +1383,8 @@ class SpxInputComponent {
|
|
|
1383
1383
|
registerOnTouched(fn) {
|
|
1384
1384
|
this.onTouched = fn;
|
|
1385
1385
|
}
|
|
1386
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1387
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
1386
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SpxInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1387
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: SpxInputComponent, isStandalone: true, selector: "spx-input", inputs: { spxSpeedDial: { classPropertyName: "spxSpeedDial", publicName: "spxSpeedDial", isSignal: true, isRequired: false, transformFunction: null }, spxLabel: { classPropertyName: "spxLabel", publicName: "spxLabel", isSignal: true, isRequired: false, transformFunction: null }, spxMax: { classPropertyName: "spxMax", publicName: "spxMax", isSignal: true, isRequired: false, transformFunction: null }, spxMin: { classPropertyName: "spxMin", publicName: "spxMin", isSignal: true, isRequired: false, transformFunction: null }, spxName: { classPropertyName: "spxName", publicName: "spxName", isSignal: true, isRequired: false, transformFunction: null }, spxReadonly: { classPropertyName: "spxReadonly", publicName: "spxReadonly", isSignal: true, isRequired: false, transformFunction: null }, spxAutocomplete: { classPropertyName: "spxAutocomplete", publicName: "spxAutocomplete", isSignal: true, isRequired: false, transformFunction: null }, spxAutofocus: { classPropertyName: "spxAutofocus", publicName: "spxAutofocus", isSignal: true, isRequired: false, transformFunction: null }, spxInputMode: { classPropertyName: "spxInputMode", publicName: "spxInputMode", isSignal: true, isRequired: false, transformFunction: null }, spxPattern: { classPropertyName: "spxPattern", publicName: "spxPattern", isSignal: true, isRequired: false, transformFunction: null }, spxRequired: { classPropertyName: "spxRequired", publicName: "spxRequired", isSignal: true, isRequired: false, transformFunction: null }, spxSelectMonth: { classPropertyName: "spxSelectMonth", publicName: "spxSelectMonth", isSignal: true, isRequired: false, transformFunction: null }, spxSelectDay: { classPropertyName: "spxSelectDay", publicName: "spxSelectDay", isSignal: true, isRequired: false, transformFunction: null }, spxShowEdit: { classPropertyName: "spxShowEdit", publicName: "spxShowEdit", isSignal: true, isRequired: false, transformFunction: null }, spxShowHelp: { classPropertyName: "spxShowHelp", publicName: "spxShowHelp", isSignal: true, isRequired: false, transformFunction: null }, spxShowLabel: { classPropertyName: "spxShowLabel", publicName: "spxShowLabel", isSignal: true, isRequired: false, transformFunction: null }, spxCompact: { classPropertyName: "spxCompact", publicName: "spxCompact", isSignal: true, isRequired: false, transformFunction: null }, spxShowClear: { classPropertyName: "spxShowClear", publicName: "spxShowClear", isSignal: true, isRequired: false, transformFunction: null }, spxShowSearch: { classPropertyName: "spxShowSearch", publicName: "spxShowSearch", isSignal: true, isRequired: false, transformFunction: null }, spxAlert: { classPropertyName: "spxAlert", publicName: "spxAlert", isSignal: true, isRequired: false, transformFunction: null }, spxShowValidationMessages: { classPropertyName: "spxShowValidationMessages", publicName: "spxShowValidationMessages", isSignal: true, isRequired: false, transformFunction: null }, spxStep: { classPropertyName: "spxStep", publicName: "spxStep", isSignal: true, isRequired: false, transformFunction: null }, spxSuggestions: { classPropertyName: "spxSuggestions", publicName: "spxSuggestions", isSignal: true, isRequired: false, transformFunction: null }, spxType: { classPropertyName: "spxType", publicName: "spxType", isSignal: true, isRequired: false, transformFunction: null }, spxValidators: { classPropertyName: "spxValidators", publicName: "spxValidators", isSignal: true, isRequired: false, transformFunction: null }, spxCapitalize: { classPropertyName: "spxCapitalize", publicName: "spxCapitalize", isSignal: true, isRequired: false, transformFunction: null }, spxCycleConfig: { classPropertyName: "spxCycleConfig", publicName: "spxCycleConfig", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { spxClear: "spxClear", spxEdit: "spxEdit", spxHelp: "spxHelp", spxSearch: "spxSearch", spxBlur: "spxBlur" }, host: { listeners: { "spxChange": "handleChangeEvent($event)", "focusout": "_handleBlurEvent()" } }, providers: [
|
|
1388
1388
|
{
|
|
1389
1389
|
provide: NG_VALUE_ACCESSOR,
|
|
1390
1390
|
useExisting: SpxInputComponent,
|
|
@@ -1392,7 +1392,7 @@ class SpxInputComponent {
|
|
|
1392
1392
|
}
|
|
1393
1393
|
], viewQueries: [{ propertyName: "floatInput", first: true, predicate: ["spxInputFloat"], descendants: true, isSignal: true }, { propertyName: "numberInput", first: true, predicate: ["spxInputNumber"], descendants: true, isSignal: true }, { propertyName: "textInput", first: true, predicate: ["spxInputText"], descendants: true, isSignal: true }, { propertyName: "timeInput", first: true, predicate: ["spxInputTime"], descendants: true, isSignal: true }, { propertyName: "radioInput", first: true, predicate: ["spxInputRadio"], descendants: true, isSignal: true }, { propertyName: "dateInput", first: true, predicate: ["spxInputDate"], descendants: true, isSignal: true }, { propertyName: "cycleInput", first: true, predicate: ["spxInputCycle"], descendants: true, isSignal: true }], ngImport: i0, template: "<spx-input-box\n (spxClear)=\"this.handleClear()\"\n (spxEdit)=\"this.handleEdit()\"\n (spxHelp)=\"this.handleHelp()\"\n (spxSearch)=\"this.handleSearch()\"\n (spxSetIdInParent)=\"handleSpxElementIdSet($event)\"\n [spxAlert]=\"this.spxAlert()\"\n [spxCompact]=\"this.spxCompact()\"\n [spxLabel]=\"this.spxLabel()\"\n [spxName]=\"this.mappedName()\"\n [spxReadonly]=\"this.spxReadonly()\"\n [spxRequired]=\"this.spxRequired()\"\n [spxShowClear]=\"this.spxShowClear()\"\n [spxShowEdit]=\"this.spxShowEdit()\"\n [spxShowHelp]=\"this.spxShowHelp()\"\n [spxShowLabel]=\"this.spxShowLabel()\"\n [spxShowSearch]=\"this.spxShowSearch() ? this.spxShowSearch() : this.spxType() === 'autocomplete'\"\n [spxShowValidationMessages]=\"this.spxShowValidationMessages()\"\n [spxValue]=\"this.value()\"\n>\n <div controls>\n @if (this.showInputText()) {\n <spx-input-text\n (valueChange)=\"handleChangeEvent($event)\"\n [spxAutocomplete]=\"this.spxAutocomplete() ? this.spxAutocomplete() : undefined\"\n [spxSpeedDial]=\"this.spxSpeedDial()\"\n [spxAutofocus]=\"this.spxAutofocus()\"\n [spxCapitalize]=\"this.spxCapitalize()\"\n [spxElementId]=\"this.spxElementId()\"\n [spxInputMode]=\"this.spxType() === 'overlaynumber' ? 'numeric' : this.spxInputMode()\"\n [spxName]=\"this.mappedName()\"\n [spxPattern]=\"this.spxType() === 'overlaynumber' ? '[0-9]*' : this.spxPattern()\"\n [spxReadonly]=\"this.mappedReadonly()\"\n [spxSuggestions]=\"this.spxSuggestions()\"\n [spxType]=\"this.spxType()\"\n [spxValidators]=\"this.spxValidators()\"\n [value]=\"value()\"\n #spxInputText\n ></spx-input-text>\n } @if (this.showInputCycle()) {\n <spx-input-cycle\n (valueChange)=\"handleChangeEvent($event)\"\n [spxCycleConfig]=\"this.spxCycleConfig()!\"\n [spxSpeedDial]=\"this.spxSpeedDial()\"\n [spxAutofocus]=\"this.spxAutofocus()\"\n [spxCapitalize]=\"this.spxCapitalize()\"\n [spxElementId]=\"this.spxElementId()\"\n [spxInputMode]=\"this.spxType() === 'cycleNumeric' ? 'numeric' : 'text'\"\n [spxName]=\"this.mappedName()\"\n [spxReadonly]=\"this.mappedReadonly()\"\n [spxType]=\"this.spxType()\"\n [spxValidators]=\"this.spxValidators()\"\n [value]=\"value()\"\n #spxInputText\n ></spx-input-cycle>\n } @if (this.showInputDate()) {\n <spx-input-date\n (valueChange)=\"handleChangeEvent($event)\"\n [spxAutoFocus]=\"this.spxAutofocus()\"\n [spxElementId]=\"this.spxElementId()\"\n [spxMax]=\"this.spxMax()!\"\n [spxMin]=\"this.spxMin()!\"\n [spxReadonly]=\"this.mappedReadonly()\"\n [spxSelectDay]=\"this.spxSelectDay()\"\n [spxSelectMonth]=\"this.spxSelectMonth()\"\n [spxValidators]=\"this.spxValidators()\"\n [value]=\"value()\"\n #spxInputDate\n ></spx-input-date>\n } @if (this.showInputFloat()) {\n <spx-input-float\n (valueChange)=\"handleChangeEvent($event)\"\n [spxAutofocus]=\"this.spxAutofocus()\"\n [spxElementId]=\"this.spxElementId()\"\n [spxName]=\"this.mappedName()\"\n [spxReadonly]=\"this.mappedReadonly()\"\n [spxStep]=\"this.spxStep()\"\n [spxValidators]=\"this.spxValidators()\"\n [value]=\"value()\"\n #spxInputFloat\n ></spx-input-float>\n } @if (this.showInputNumber()) {\n <spx-input-number\n (valueChange)=\"handleChangeEvent($event)\"\n [spxAutofocus]=\"this.spxAutofocus()\"\n [spxElementId]=\"this.spxElementId()\"\n [spxInputMode]=\"this.spxInputMode()\"\n [spxName]=\"this.mappedName()\"\n [spxReadonly]=\"this.mappedReadonly()\"\n [spxStep]=\"this.spxStep()\"\n [spxValidators]=\"this.spxValidators()\"\n [value]=\"value()\"\n #spxInputNumber\n ></spx-input-number>\n } @if (this.showInputRadio()) {\n <spx-input-radio\n (valueChange)=\"handleChangeEvent($event)\"\n [spxElementId]=\"this.spxElementId()\"\n [spxName]=\"this.mappedName()\"\n [spxReadonly]=\"this.mappedReadonly()\"\n [spxShowLabel]=\"this.spxShowLabel()\"\n [spxSuggestions]=\"this.spxSuggestions()\"\n [spxValidators]=\"this.spxValidators()\"\n [value]=\"value()\"\n #spxInputRadio\n ></spx-input-radio>\n } @if (this.showInputTime()) {\n <spx-input-time\n (valueChange)=\"handleChangeEvent($event)\"\n [spxName]=\"this.mappedName()\"\n [spxReadonly]=\"this.mappedReadonly()\"\n [spxValidators]=\"this.spxValidators()\"\n [value]=\"value()\"\n #spxInputTime\n ></spx-input-time>\n }\n </div>\n <div validation-messages>\n <ng-content></ng-content>\n </div>\n</spx-input-box>\n", dependencies: [{ kind: "component", type: SpxInputBoxComponent, selector: "spx-input-box", inputs: ["spxCompact", "spxLabel", "spxName", "spxReadonly", "spxRequired", "spxShowClear", "spxShowEdit", "spxShowHelp", "spxShowLabel", "spxShowSearch", "spxShowValidationMessages", "spxAlert", "spxValue"], outputs: ["spxValueChange", "spxClear", "spxSearch", "spxEdit", "spxHelp", "spxSetIdInParent"] }, { kind: "component", type: SpxInputCycleComponent, selector: "spx-input-cycle", inputs: ["spxSpeedDial", "spxName", "spxAutofocus", "spxAutocomplete", "spxCycleConfig", "spxInputMode", "spxReadonly", "spxValidators", "spxCapitalize", "spxType", "spxWasInternalUpdate", "value", "spxElementId"], outputs: ["valueChange", "completeInput"] }, { kind: "component", type: SpxInputDateComponent, selector: "spx-input-date", inputs: ["spxMax", "spxMin", "spxReadonly", "spxValidators", "spxAutoFocus", "value", "spxSelectDay", "spxSelectMonth", "spxElementId", "spxSuggestions"], outputs: ["valueChange"] }, { kind: "component", type: SpxInputFloatComponent, selector: "spx-input-float", inputs: ["spxName", "spxAutofocus", "spxElementId", "spxReadonly", "spxValidators", "spxStep", "value", "spxWasInternalUpdate"], outputs: ["valueChange"] }, { kind: "component", type: SpxInputNumberComponent, selector: "spx-input-number", inputs: ["spxName", "spxAutofocus", "spxInputMode", "spxReadonly", "spxValidators", "spxFocused", "spxStep", "value", "spxElementId"], outputs: ["valueChange"] }, { kind: "component", type: SpxInputRadioComponent, selector: "spx-input-radio", inputs: ["spxName", "spxValidators", "spxShowLabel", "spxReadonly", "spxSuggestions", "value", "spxElementId"], outputs: ["valueChange"] }, { kind: "component", type: SpxInputTextComponent, selector: "spx-input-text", inputs: ["spxSpeedDial", "spxName", "spxAutofocus", "spxAutocomplete", "spxInputMode", "spxPattern", "spxSuggestions", "spxReadonly", "spxValidators", "spxCapitalize", "spxType", "spxWasInternalUpdate", "value", "spxElementId"], outputs: ["valueChange"] }, { kind: "component", type: SpxInputTimeComponent, selector: "spx-input-time", inputs: ["spxName", "spxAutofocus", "spxInputMode", "spxPattern", "spxSuggestions", "spxReadonly", "spxValidators", "spxCapitalize", "value"], outputs: ["valueChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1394
1394
|
}
|
|
1395
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1395
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SpxInputComponent, decorators: [{
|
|
1396
1396
|
type: Component,
|
|
1397
1397
|
args: [{ selector: 'spx-input', host: {
|
|
1398
1398
|
'(spxChange)': 'handleChangeEvent($event)'
|
|
@@ -1412,7 +1412,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImpor
|
|
|
1412
1412
|
multi: true
|
|
1413
1413
|
}
|
|
1414
1414
|
], 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 [spxName]=\"this.mappedName()\"\n [spxReadonly]=\"this.spxReadonly()\"\n [spxRequired]=\"this.spxRequired()\"\n [spxShowClear]=\"this.spxShowClear()\"\n [spxShowEdit]=\"this.spxShowEdit()\"\n [spxShowHelp]=\"this.spxShowHelp()\"\n [spxShowLabel]=\"this.spxShowLabel()\"\n [spxShowSearch]=\"this.spxShowSearch() ? this.spxShowSearch() : this.spxType() === 'autocomplete'\"\n [spxShowValidationMessages]=\"this.spxShowValidationMessages()\"\n [spxValue]=\"this.value()\"\n>\n <div controls>\n @if (this.showInputText()) {\n <spx-input-text\n (valueChange)=\"handleChangeEvent($event)\"\n [spxAutocomplete]=\"this.spxAutocomplete() ? this.spxAutocomplete() : undefined\"\n [spxSpeedDial]=\"this.spxSpeedDial()\"\n [spxAutofocus]=\"this.spxAutofocus()\"\n [spxCapitalize]=\"this.spxCapitalize()\"\n [spxElementId]=\"this.spxElementId()\"\n [spxInputMode]=\"this.spxType() === 'overlaynumber' ? 'numeric' : this.spxInputMode()\"\n [spxName]=\"this.mappedName()\"\n [spxPattern]=\"this.spxType() === 'overlaynumber' ? '[0-9]*' : this.spxPattern()\"\n [spxReadonly]=\"this.mappedReadonly()\"\n [spxSuggestions]=\"this.spxSuggestions()\"\n [spxType]=\"this.spxType()\"\n [spxValidators]=\"this.spxValidators()\"\n [value]=\"value()\"\n #spxInputText\n ></spx-input-text>\n } @if (this.showInputCycle()) {\n <spx-input-cycle\n (valueChange)=\"handleChangeEvent($event)\"\n [spxCycleConfig]=\"this.spxCycleConfig()!\"\n [spxSpeedDial]=\"this.spxSpeedDial()\"\n [spxAutofocus]=\"this.spxAutofocus()\"\n [spxCapitalize]=\"this.spxCapitalize()\"\n [spxElementId]=\"this.spxElementId()\"\n [spxInputMode]=\"this.spxType() === 'cycleNumeric' ? 'numeric' : 'text'\"\n [spxName]=\"this.mappedName()\"\n [spxReadonly]=\"this.mappedReadonly()\"\n [spxType]=\"this.spxType()\"\n [spxValidators]=\"this.spxValidators()\"\n [value]=\"value()\"\n #spxInputText\n ></spx-input-cycle>\n } @if (this.showInputDate()) {\n <spx-input-date\n (valueChange)=\"handleChangeEvent($event)\"\n [spxAutoFocus]=\"this.spxAutofocus()\"\n [spxElementId]=\"this.spxElementId()\"\n [spxMax]=\"this.spxMax()!\"\n [spxMin]=\"this.spxMin()!\"\n [spxReadonly]=\"this.mappedReadonly()\"\n [spxSelectDay]=\"this.spxSelectDay()\"\n [spxSelectMonth]=\"this.spxSelectMonth()\"\n [spxValidators]=\"this.spxValidators()\"\n [value]=\"value()\"\n #spxInputDate\n ></spx-input-date>\n } @if (this.showInputFloat()) {\n <spx-input-float\n (valueChange)=\"handleChangeEvent($event)\"\n [spxAutofocus]=\"this.spxAutofocus()\"\n [spxElementId]=\"this.spxElementId()\"\n [spxName]=\"this.mappedName()\"\n [spxReadonly]=\"this.mappedReadonly()\"\n [spxStep]=\"this.spxStep()\"\n [spxValidators]=\"this.spxValidators()\"\n [value]=\"value()\"\n #spxInputFloat\n ></spx-input-float>\n } @if (this.showInputNumber()) {\n <spx-input-number\n (valueChange)=\"handleChangeEvent($event)\"\n [spxAutofocus]=\"this.spxAutofocus()\"\n [spxElementId]=\"this.spxElementId()\"\n [spxInputMode]=\"this.spxInputMode()\"\n [spxName]=\"this.mappedName()\"\n [spxReadonly]=\"this.mappedReadonly()\"\n [spxStep]=\"this.spxStep()\"\n [spxValidators]=\"this.spxValidators()\"\n [value]=\"value()\"\n #spxInputNumber\n ></spx-input-number>\n } @if (this.showInputRadio()) {\n <spx-input-radio\n (valueChange)=\"handleChangeEvent($event)\"\n [spxElementId]=\"this.spxElementId()\"\n [spxName]=\"this.mappedName()\"\n [spxReadonly]=\"this.mappedReadonly()\"\n [spxShowLabel]=\"this.spxShowLabel()\"\n [spxSuggestions]=\"this.spxSuggestions()\"\n [spxValidators]=\"this.spxValidators()\"\n [value]=\"value()\"\n #spxInputRadio\n ></spx-input-radio>\n } @if (this.showInputTime()) {\n <spx-input-time\n (valueChange)=\"handleChangeEvent($event)\"\n [spxName]=\"this.mappedName()\"\n [spxReadonly]=\"this.mappedReadonly()\"\n [spxValidators]=\"this.spxValidators()\"\n [value]=\"value()\"\n #spxInputTime\n ></spx-input-time>\n }\n </div>\n <div validation-messages>\n <ng-content></ng-content>\n </div>\n</spx-input-box>\n" }]
|
|
1415
|
-
}], propDecorators: { _handleBlurEvent: [{
|
|
1415
|
+
}], 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 }] }], 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 }] }], 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: [{
|
|
1416
1416
|
type: HostListener,
|
|
1417
1417
|
args: ['focusout']
|
|
1418
1418
|
}] } });
|