@softpak/components 20.3.8 → 20.3.9
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 +1 -1
- package/fesm2022/softpak-components-spx-404-page.mjs.map +1 -1
- package/fesm2022/softpak-components-spx-button.mjs +5 -3
- package/fesm2022/softpak-components-spx-button.mjs.map +1 -1
- package/fesm2022/softpak-components-spx-channel-selection.mjs +1 -1
- package/fesm2022/softpak-components-spx-channel-selection.mjs.map +1 -1
- package/fesm2022/softpak-components-spx-confirm.mjs +1 -1
- package/fesm2022/softpak-components-spx-confirm.mjs.map +1 -1
- package/fesm2022/softpak-components-spx-form-view.mjs +2 -2
- package/fesm2022/softpak-components-spx-form-view.mjs.map +1 -1
- package/fesm2022/softpak-components-spx-inputs.mjs +13 -9
- package/fesm2022/softpak-components-spx-inputs.mjs.map +1 -1
- package/fesm2022/softpak-components-spx-number-check.mjs +1 -1
- package/fesm2022/softpak-components-spx-number-check.mjs.map +1 -1
- package/fesm2022/softpak-components-spx-pagination.mjs +1 -1
- package/fesm2022/softpak-components-spx-pagination.mjs.map +1 -1
- package/fesm2022/softpak-components-spx-update.mjs +1 -1
- package/fesm2022/softpak-components-spx-update.mjs.map +1 -1
- package/package.json +38 -38
- package/spx-button/index.d.ts +3 -1
- package/spx-inputs/index.d.ts +5 -1
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { Injectable, inject, input, model, output, signal, HostListener, ChangeDetectionStrategy, Component,
|
|
2
|
+
import { Injectable, inject, computed, input, model, output, signal, HostListener, ChangeDetectionStrategy, Component, viewChild } from '@angular/core';
|
|
3
3
|
import { SpxButtonComponent } from '@softpak/components/spx-button';
|
|
4
4
|
import * as i1 from '@fortawesome/angular-fontawesome';
|
|
5
5
|
import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
|
|
@@ -60,8 +60,11 @@ class SpxInputBoxComponent {
|
|
|
60
60
|
this.faQuestion = faQuestion;
|
|
61
61
|
this.faTimes = faTimes;
|
|
62
62
|
this.SpxSeverity = SpxSeverityEnum;
|
|
63
|
+
this.clearButtonName = computed(() => this.spxName() ? `${this.spxName}__clear_button` : undefined);
|
|
64
|
+
this.searchButtonName = computed(() => this.spxName() ? `${this.spxName}__search_button` : undefined);
|
|
63
65
|
this.spxCompact = input();
|
|
64
66
|
this.spxLabel = input();
|
|
67
|
+
this.spxName = input();
|
|
65
68
|
this.spxReadonly = input(false);
|
|
66
69
|
this.spxRequired = input();
|
|
67
70
|
this.spxShowClear = input(true);
|
|
@@ -108,7 +111,7 @@ class SpxInputBoxComponent {
|
|
|
108
111
|
this.spxHelp.emit();
|
|
109
112
|
}
|
|
110
113
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.1", ngImport: i0, type: SpxInputBoxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
111
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.1", type: SpxInputBoxComponent, isStandalone: true, selector: "spx-input-box", inputs: { spxCompact: { classPropertyName: "spxCompact", publicName: "spxCompact", isSignal: true, isRequired: false, transformFunction: null }, spxLabel: { classPropertyName: "spxLabel", publicName: "spxLabel", isSignal: true, isRequired: false, transformFunction: null }, spxReadonly: { classPropertyName: "spxReadonly", publicName: "spxReadonly", isSignal: true, isRequired: false, transformFunction: null }, spxRequired: { classPropertyName: "spxRequired", publicName: "spxRequired", isSignal: true, isRequired: false, transformFunction: null }, spxShowClear: { classPropertyName: "spxShowClear", publicName: "spxShowClear", isSignal: true, isRequired: false, transformFunction: null }, spxShowEdit: { classPropertyName: "spxShowEdit", publicName: "spxShowEdit", isSignal: true, isRequired: false, transformFunction: null }, spxShowHelp: { classPropertyName: "spxShowHelp", publicName: "spxShowHelp", isSignal: true, isRequired: false, transformFunction: null }, spxShowLabel: { classPropertyName: "spxShowLabel", publicName: "spxShowLabel", isSignal: true, isRequired: false, transformFunction: null }, spxShowSearch: { classPropertyName: "spxShowSearch", publicName: "spxShowSearch", isSignal: true, isRequired: false, transformFunction: null }, spxShowValidationMessages: { classPropertyName: "spxShowValidationMessages", publicName: "spxShowValidationMessages", isSignal: true, isRequired: false, transformFunction: null }, spxAlert: { classPropertyName: "spxAlert", publicName: "spxAlert", isSignal: true, isRequired: false, transformFunction: null }, spxValue: { classPropertyName: "spxValue", publicName: "spxValue", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { spxValue: "spxValueChange", spxClear: "spxClear", spxSearch: "spxSearch", spxEdit: "spxEdit", spxHelp: "spxHelp", spxSetIdInParent: "spxSetIdInParent" }, host: { listeners: { "click": "handleFocusIn()", "focusin": "handleFocusIn($event)", "focusout": "handleFocusOut($event)" } }, ngImport: i0, template: "<div class=\"flex rounded w-full gap-3\"\n [class.rounded-none]=\"this.spxShowValidationMessages()\"\n [class.rounded-t]=\"this.spxShowValidationMessages()\"\n [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()\"\n [class.bg-white]=\"!this.spxReadonly()\"\n [class.bg-gray-300]=\"this.spxReadonly()\"\n [class.cursor-not-allowed]=\"this.spxReadonly()\"\n \n >\n <div class=\"flex-auto p-3\"\n [class.p-0]=\"this.spxCompact()\"\n [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\"\n [class.mb-0]=\"this.spxCompact()\"\n [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\n (spxClick)=\"onEdit()\"\n [spxFullHeight]=\"true\"\n [spxSize]=\"'xl'\"\n [spxType]=\"'button'\">\n <fa-icon [icon]=\"faEdit\" class=\"block text-xl\"></fa-icon>\n </spx-button>\n }\n @if (this.spxShowHelp()) {\n <spx-button\n (spxClick)=\"onHelp()\"\n [spxFullHeight]=\"true\"\n [spxDisabled]=\"this.spxReadonly()\"\n [spxSize]=\"'xl'\"\n [spxTabIndex]=\"-1\"\n [spxType]=\"'button'\">\n <fa-icon [icon]=\"faQuestion\" class=\"block text-xl\"></fa-icon>\n </spx-button>\n }\n @if (this.spxShowSearch()) {\n <spx-button\n (spxClick)=\"onSearch()\"\n [spxFullHeight]=\"true\"\n [spxDisabled]=\"this.spxReadonly()\"\n [spxSize]=\"'xl'\"\n [spxTabIndex]=\"-1\"\n [spxType]=\"'button'\">\n <fa-icon [icon]=\"faSearch\" class=\"block text-xl\"></fa-icon>\n </spx-button>\n }\n @if (this.spxShowClear()) {\n <spx-button\n (spxClick)=\"onClear()\"\n [spxDisabled]=\"this.spxReadonly() || (this.spxValue()?.description !== 'No' && !this.spxValue()?.value)\"\n [spxFullHeight]=\"true\"\n [spxSize]=\"'xl'\"\n [spxTabIndex]=\"-1\"\n [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 <div class=\"bg-red-600 rounded-b text-white p-3\">\n <ng-content select=\"[validation-messages]\"></ng-content>\n </div>\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\"\n 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"], 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 }); }
|
|
114
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.1", 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()", "focusin": "handleFocusIn($event)", "focusout": "handleFocusOut($event)" } }, ngImport: i0, template: "<div class=\"flex rounded w-full gap-3\"\n [class.rounded-none]=\"this.spxShowValidationMessages()\"\n [class.rounded-t]=\"this.spxShowValidationMessages()\"\n [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()\"\n [class.bg-white]=\"!this.spxReadonly()\"\n [class.bg-gray-300]=\"this.spxReadonly()\"\n [class.cursor-not-allowed]=\"this.spxReadonly()\"\n \n >\n <div class=\"flex-auto p-3\"\n [class.p-0]=\"this.spxCompact()\"\n [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\"\n [class.mb-0]=\"this.spxCompact()\"\n [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\n (spxClick)=\"onEdit()\"\n [spxFullHeight]=\"true\"\n [spxSize]=\"'xl'\"\n [spxType]=\"'button'\">\n <fa-icon [icon]=\"faEdit\" class=\"block text-xl\"></fa-icon>\n </spx-button>\n }\n @if (this.spxShowHelp()) {\n <spx-button\n (spxClick)=\"onHelp()\"\n [spxFullHeight]=\"true\"\n [spxDisabled]=\"this.spxReadonly()\"\n [spxSize]=\"'xl'\"\n [spxTabIndex]=\"-1\"\n [spxType]=\"'button'\">\n <fa-icon [icon]=\"faQuestion\" class=\"block text-xl\"></fa-icon>\n </spx-button>\n }\n @if (this.spxShowSearch()) {\n <spx-button\n (spxClick)=\"onSearch()\"\n [spxFullHeight]=\"true\"\n [spxDisabled]=\"this.spxReadonly()\"\n [spxName]=\"clearButtonName()\"\n [spxSize]=\"'xl'\"\n [spxTabIndex]=\"-1\"\n [spxType]=\"'button'\">\n <fa-icon [icon]=\"faSearch\" class=\"block text-xl\"></fa-icon>\n </spx-button>\n }\n @if (this.spxShowClear()) {\n <spx-button\n (spxClick)=\"onClear()\"\n [spxDisabled]=\"this.spxReadonly() || (this.spxValue()?.description !== 'No' && !this.spxValue()?.value)\"\n [spxFullHeight]=\"true\"\n [spxName]=\"clearButtonName()\"\n [spxSize]=\"'xl'\"\n [spxTabIndex]=\"-1\"\n [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 <div class=\"bg-red-600 rounded-b text-white p-3\">\n <ng-content select=\"[validation-messages]\"></ng-content>\n </div>\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\"\n 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 }); }
|
|
112
115
|
}
|
|
113
116
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.1", ngImport: i0, type: SpxInputBoxComponent, decorators: [{
|
|
114
117
|
type: Component,
|
|
@@ -118,7 +121,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.1", ngImpor
|
|
|
118
121
|
IsSeverityPipe
|
|
119
122
|
], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
120
123
|
"(click)": "handleFocusIn()"
|
|
121
|
-
}, template: "<div class=\"flex rounded w-full gap-3\"\n [class.rounded-none]=\"this.spxShowValidationMessages()\"\n [class.rounded-t]=\"this.spxShowValidationMessages()\"\n [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()\"\n [class.bg-white]=\"!this.spxReadonly()\"\n [class.bg-gray-300]=\"this.spxReadonly()\"\n [class.cursor-not-allowed]=\"this.spxReadonly()\"\n \n >\n <div class=\"flex-auto p-3\"\n [class.p-0]=\"this.spxCompact()\"\n [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\"\n [class.mb-0]=\"this.spxCompact()\"\n [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\n (spxClick)=\"onEdit()\"\n [spxFullHeight]=\"true\"\n [spxSize]=\"'xl'\"\n [spxType]=\"'button'\">\n <fa-icon [icon]=\"faEdit\" class=\"block text-xl\"></fa-icon>\n </spx-button>\n }\n @if (this.spxShowHelp()) {\n <spx-button\n (spxClick)=\"onHelp()\"\n [spxFullHeight]=\"true\"\n [spxDisabled]=\"this.spxReadonly()\"\n [spxSize]=\"'xl'\"\n [spxTabIndex]=\"-1\"\n [spxType]=\"'button'\">\n <fa-icon [icon]=\"faQuestion\" class=\"block text-xl\"></fa-icon>\n </spx-button>\n }\n @if (this.spxShowSearch()) {\n <spx-button\n (spxClick)=\"onSearch()\"\n [spxFullHeight]=\"true\"\n [spxDisabled]=\"this.spxReadonly()\"\n [spxSize]=\"'xl'\"\n [spxTabIndex]=\"-1\"\n [spxType]=\"'button'\">\n <fa-icon [icon]=\"faSearch\" class=\"block text-xl\"></fa-icon>\n </spx-button>\n }\n @if (this.spxShowClear()) {\n <spx-button\n (spxClick)=\"onClear()\"\n [spxDisabled]=\"this.spxReadonly() || (this.spxValue()?.description !== 'No' && !this.spxValue()?.value)\"\n [spxFullHeight]=\"true\"\n [spxSize]=\"'xl'\"\n [spxTabIndex]=\"-1\"\n [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 <div class=\"bg-red-600 rounded-b text-white p-3\">\n <ng-content select=\"[validation-messages]\"></ng-content>\n </div>\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\"\n class=\"rounded-b text-white p-3\">\n <div>\n {{this.spxAlert()?.text}}\n </div>\n</div>\n}" }]
|
|
124
|
+
}, template: "<div class=\"flex rounded w-full gap-3\"\n [class.rounded-none]=\"this.spxShowValidationMessages()\"\n [class.rounded-t]=\"this.spxShowValidationMessages()\"\n [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()\"\n [class.bg-white]=\"!this.spxReadonly()\"\n [class.bg-gray-300]=\"this.spxReadonly()\"\n [class.cursor-not-allowed]=\"this.spxReadonly()\"\n \n >\n <div class=\"flex-auto p-3\"\n [class.p-0]=\"this.spxCompact()\"\n [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\"\n [class.mb-0]=\"this.spxCompact()\"\n [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\n (spxClick)=\"onEdit()\"\n [spxFullHeight]=\"true\"\n [spxSize]=\"'xl'\"\n [spxType]=\"'button'\">\n <fa-icon [icon]=\"faEdit\" class=\"block text-xl\"></fa-icon>\n </spx-button>\n }\n @if (this.spxShowHelp()) {\n <spx-button\n (spxClick)=\"onHelp()\"\n [spxFullHeight]=\"true\"\n [spxDisabled]=\"this.spxReadonly()\"\n [spxSize]=\"'xl'\"\n [spxTabIndex]=\"-1\"\n [spxType]=\"'button'\">\n <fa-icon [icon]=\"faQuestion\" class=\"block text-xl\"></fa-icon>\n </spx-button>\n }\n @if (this.spxShowSearch()) {\n <spx-button\n (spxClick)=\"onSearch()\"\n [spxFullHeight]=\"true\"\n [spxDisabled]=\"this.spxReadonly()\"\n [spxName]=\"clearButtonName()\"\n [spxSize]=\"'xl'\"\n [spxTabIndex]=\"-1\"\n [spxType]=\"'button'\">\n <fa-icon [icon]=\"faSearch\" class=\"block text-xl\"></fa-icon>\n </spx-button>\n }\n @if (this.spxShowClear()) {\n <spx-button\n (spxClick)=\"onClear()\"\n [spxDisabled]=\"this.spxReadonly() || (this.spxValue()?.description !== 'No' && !this.spxValue()?.value)\"\n [spxFullHeight]=\"true\"\n [spxName]=\"clearButtonName()\"\n [spxSize]=\"'xl'\"\n [spxTabIndex]=\"-1\"\n [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 <div class=\"bg-red-600 rounded-b text-white p-3\">\n <ng-content select=\"[validation-messages]\"></ng-content>\n </div>\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\"\n class=\"rounded-b text-white p-3\">\n <div>\n {{this.spxAlert()?.text}}\n </div>\n</div>\n}" }]
|
|
122
125
|
}], propDecorators: { handleFocusIn: [{
|
|
123
126
|
type: HostListener,
|
|
124
127
|
args: ['focusin', ["$event"]]
|
|
@@ -166,7 +169,7 @@ class SpxDropdownComponent {
|
|
|
166
169
|
this.spxSelect.emit(valuePair);
|
|
167
170
|
}
|
|
168
171
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.1", ngImport: i0, type: SpxDropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
169
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.1", 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"], outputs: ["spxClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
172
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.1", 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 }); }
|
|
170
173
|
}
|
|
171
174
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.1", ngImport: i0, type: SpxDropdownComponent, decorators: [{
|
|
172
175
|
type: Component,
|
|
@@ -253,7 +256,7 @@ class SpxInputTextComponent {
|
|
|
253
256
|
}
|
|
254
257
|
}
|
|
255
258
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.1", ngImport: i0, type: SpxInputTextComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
256
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.1", 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
|
|
259
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.1", 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 }); }
|
|
257
260
|
}
|
|
258
261
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.1", ngImport: i0, type: SpxInputTextComponent, decorators: [{
|
|
259
262
|
type: Component,
|
|
@@ -262,7 +265,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.1", ngImpor
|
|
|
262
265
|
ReactiveFormsModule,
|
|
263
266
|
FormsModule,
|
|
264
267
|
NgClass,
|
|
265
|
-
], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"relative text-black\">\n <input
|
|
268
|
+
], 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>" }]
|
|
266
269
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }] });
|
|
267
270
|
|
|
268
271
|
class SpxInputFloatComponent {
|
|
@@ -510,7 +513,7 @@ class SpxInputTimeModalComponent {
|
|
|
510
513
|
this.modalController.dismiss(value);
|
|
511
514
|
}
|
|
512
515
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.1", ngImport: i0, type: SpxInputTimeModalComponent, deps: [{ token: i1$2.ModalController }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
513
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.1", 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"], outputs: ["spxClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
516
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.1", 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 }); }
|
|
514
517
|
}
|
|
515
518
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.1", ngImport: i0, type: SpxInputTimeModalComponent, decorators: [{
|
|
516
519
|
type: Component,
|
|
@@ -849,6 +852,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.1", ngImpor
|
|
|
849
852
|
|
|
850
853
|
class SpxInputComponent {
|
|
851
854
|
constructor() {
|
|
855
|
+
this.mappedName = computed(() => this.spxName() ?? undefined);
|
|
852
856
|
this.mappedReadonly = computed(() => this.spxReadonly() === true ? true : undefined);
|
|
853
857
|
this.spxSpeedDial = input([]);
|
|
854
858
|
this.spxLabel = input('label');
|
|
@@ -983,7 +987,7 @@ class SpxInputComponent {
|
|
|
983
987
|
useExisting: SpxInputComponent,
|
|
984
988
|
multi: true
|
|
985
989
|
}
|
|
986
|
-
], viewQueries: [{ propertyName: "floatInput", first: true, predicate: ["spxInputFloat"], descendants: true, isSignal: true }, { propertyName: "numberInput", first: true, predicate: ["spxInputNumber"], descendants: true, isSignal: true }, { propertyName: "textInput", first: true, predicate: ["spxInputText"], descendants: true, isSignal: true }, { propertyName: "timeInput", first: true, predicate: ["spxInputTime"], descendants: true, isSignal: true }, { propertyName: "radioInput", first: true, predicate: ["spxInputRadio"], descendants: true, isSignal: true }, { propertyName: "dateInput", first: true, predicate: ["spxInputDate"], descendants: true, isSignal: true }], ngImport: i0, template: "<spx-input-box\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 [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.spxType() === 'autocomplete' || this.spxType() === 'overlay' ||\n this.spxType() === 'overlaynumber' || this.spxType() === 'text' ||\n this.spxType() === 'password') {\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.
|
|
990
|
+
], viewQueries: [{ propertyName: "floatInput", first: true, predicate: ["spxInputFloat"], descendants: true, isSignal: true }, { propertyName: "numberInput", first: true, predicate: ["spxInputNumber"], descendants: true, isSignal: true }, { propertyName: "textInput", first: true, predicate: ["spxInputText"], descendants: true, isSignal: true }, { propertyName: "timeInput", first: true, predicate: ["spxInputTime"], descendants: true, isSignal: true }, { propertyName: "radioInput", first: true, predicate: ["spxInputRadio"], descendants: true, isSignal: true }, { propertyName: "dateInput", first: true, predicate: ["spxInputDate"], descendants: true, isSignal: true }], ngImport: i0, template: "<spx-input-box\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.spxType() === 'autocomplete' || this.spxType() === 'overlay' ||\n this.spxType() === 'overlaynumber' || this.spxType() === 'text' ||\n this.spxType() === 'password') {\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.spxType() === 'date') {\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.spxType() === 'float') {\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.spxType() === 'number') {\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.spxType() === 'radio') {\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.spxType() === 'time') {\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: 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 }); }
|
|
987
991
|
}
|
|
988
992
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.1", ngImport: i0, type: SpxInputComponent, decorators: [{
|
|
989
993
|
type: Component,
|
|
@@ -1003,7 +1007,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.1", ngImpor
|
|
|
1003
1007
|
useExisting: SpxInputComponent,
|
|
1004
1008
|
multi: true
|
|
1005
1009
|
}
|
|
1006
|
-
], 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 [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.spxType() === 'autocomplete' || this.spxType() === 'overlay' ||\n this.spxType() === 'overlaynumber' || this.spxType() === 'text' ||\n this.spxType() === 'password') {\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.
|
|
1010
|
+
], 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.spxType() === 'autocomplete' || this.spxType() === 'overlay' ||\n this.spxType() === 'overlaynumber' || this.spxType() === 'text' ||\n this.spxType() === 'password') {\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.spxType() === 'date') {\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.spxType() === 'float') {\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.spxType() === 'number') {\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.spxType() === 'radio') {\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.spxType() === 'time') {\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" }]
|
|
1007
1011
|
}], propDecorators: { _handleBlurEvent: [{
|
|
1008
1012
|
type: HostListener,
|
|
1009
1013
|
args: ['focusout']
|