@softpak/components 21.3.7 → 21.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.
@@ -1,5 +1,5 @@
1
1
  import * as i0 from '@angular/core';
2
- import { Injectable, inject, computed, input, model, output, signal, HostListener, ChangeDetectionStrategy, Component, viewChild, EventEmitter, effect, untracked, ViewChildren, Output } from '@angular/core';
2
+ import { Injectable, Directive, inject, contentChild, computed, input, model, output, signal, HostListener, ChangeDetectionStrategy, Component, viewChild, EventEmitter, effect, untracked, ViewChildren, Output } from '@angular/core';
3
3
  import { faEdit, faSearch, faQuestion, faTimes, faXmark } from '@fortawesome/free-solid-svg-icons';
4
4
  import * as i1 from '@fortawesome/angular-fontawesome';
5
5
  import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
@@ -52,9 +52,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
52
52
  }]
53
53
  }] });
54
54
 
55
+ class SpxInputLeftIconDirective {
56
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: SpxInputLeftIconDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
57
+ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.0", type: SpxInputLeftIconDirective, isStandalone: true, selector: "[spxInputLeftIcon]", ngImport: i0 }); }
58
+ }
59
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: SpxInputLeftIconDirective, decorators: [{
60
+ type: Directive,
61
+ args: [{
62
+ selector: '[spxInputLeftIcon]',
63
+ standalone: true,
64
+ }]
65
+ }] });
66
+
55
67
  class SpxInputBoxComponent {
56
68
  constructor() {
57
69
  this.selectedInputService = inject(SelectedInputService);
70
+ this.projectedLeftIcon = contentChild(SpxInputLeftIconDirective, ...(ngDevMode ? [{ debugName: "projectedLeftIcon" }] : []));
58
71
  this.faEdit = faEdit;
59
72
  this.faSearch = faSearch;
60
73
  this.faQuestion = faQuestion;
@@ -62,8 +75,35 @@ class SpxInputBoxComponent {
62
75
  this.SpxSeverity = SpxSeverityEnum;
63
76
  this.clearButtonName = computed(() => this.spxName() ? `${this.spxName()}__clear_button` : undefined, ...(ngDevMode ? [{ debugName: "clearButtonName" }] : []));
64
77
  this.searchButtonName = computed(() => this.spxName() ? `${this.spxName()}__search_button` : undefined, ...(ngDevMode ? [{ debugName: "searchButtonName" }] : []));
78
+ this.leftIcon = computed(() => {
79
+ if (this.projectedLeftIcon()) {
80
+ return undefined;
81
+ }
82
+ const leftIcon = this.spxLeftIcon();
83
+ if (!leftIcon) {
84
+ return undefined;
85
+ }
86
+ if (typeof leftIcon !== 'string') {
87
+ return leftIcon;
88
+ }
89
+ switch (leftIcon) {
90
+ case 'clear':
91
+ return this.faTimes;
92
+ case 'edit':
93
+ return this.faEdit;
94
+ case 'help':
95
+ return this.faQuestion;
96
+ case 'search':
97
+ return this.faSearch;
98
+ default:
99
+ return undefined;
100
+ }
101
+ }, ...(ngDevMode ? [{ debugName: "leftIcon" }] : []));
102
+ this.hasLeftIcon = computed(() => !!this.projectedLeftIcon() || !!this.leftIcon(), ...(ngDevMode ? [{ debugName: "hasLeftIcon" }] : []));
65
103
  this.spxCompact = input(...(ngDevMode ? [undefined, { debugName: "spxCompact" }] : []));
66
104
  this.spxLabel = input(...(ngDevMode ? [undefined, { debugName: "spxLabel" }] : []));
105
+ this.spxLeftIcon = input(...(ngDevMode ? [undefined, { debugName: "spxLeftIcon" }] : []));
106
+ this.spxMatchButtonXlHeight = input(false, ...(ngDevMode ? [{ debugName: "spxMatchButtonXlHeight" }] : []));
67
107
  this.spxName = input(...(ngDevMode ? [undefined, { debugName: "spxName" }] : []));
68
108
  this.spxReadonly = input(false, ...(ngDevMode ? [{ debugName: "spxReadonly" }] : []));
69
109
  this.spxRequired = input(...(ngDevMode ? [undefined, { debugName: "spxRequired" }] : []));
@@ -111,7 +151,7 @@ class SpxInputBoxComponent {
111
151
  this.spxHelp.emit();
112
152
  }
113
153
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: SpxInputBoxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
114
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", 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 }); }
154
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", 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 }, spxLeftIcon: { classPropertyName: "spxLeftIcon", publicName: "spxLeftIcon", isSignal: true, isRequired: false, transformFunction: null }, spxMatchButtonXlHeight: { classPropertyName: "spxMatchButtonXlHeight", publicName: "spxMatchButtonXlHeight", 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)" } }, queries: [{ propertyName: "projectedLeftIcon", first: true, predicate: SpxInputLeftIconDirective, descendants: true, isSignal: true }], 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\" [class.p-3]=\"!this.spxCompact() && !this.spxMatchButtonXlHeight()\"\n [class.p-0]=\"this.spxCompact()\" [class.px-4]=\"this.spxMatchButtonXlHeight()\"\n [class.py-2]=\"this.spxMatchButtonXlHeight()\">\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 <div class=\"flex items-center\" [class.gap-3]=\"this.hasLeftIcon()\">\n <ng-content select=\"[spxInputLeftIcon]\"></ng-content>\n\n @if (this.leftIcon(); as leftIcon) {\n <fa-icon [icon]=\"leftIcon\" class=\"text-gray-500\" [class.text-lg]=\"this.spxMatchButtonXlHeight()\"\n [class.text-xl]=\"!this.spxMatchButtonXlHeight()\" [class.pl-3]=\"this.spxCompact()\"></fa-icon>\n }\n\n <div class=\"flex-auto\">\n <ng-content select=\"[controls]\"></ng-content>\n </div>\n </div>\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}\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
155
  }
116
156
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: SpxInputBoxComponent, decorators: [{
117
157
  type: Component,
@@ -121,8 +161,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
121
161
  IsSeverityPipe
122
162
  ], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, host: {
123
163
  "(click)": "handleFocusIn($event)"
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: { 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: [{
164
+ }, 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\" [class.p-3]=\"!this.spxCompact() && !this.spxMatchButtonXlHeight()\"\n [class.p-0]=\"this.spxCompact()\" [class.px-4]=\"this.spxMatchButtonXlHeight()\"\n [class.py-2]=\"this.spxMatchButtonXlHeight()\">\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 <div class=\"flex items-center\" [class.gap-3]=\"this.hasLeftIcon()\">\n <ng-content select=\"[spxInputLeftIcon]\"></ng-content>\n\n @if (this.leftIcon(); as leftIcon) {\n <fa-icon [icon]=\"leftIcon\" class=\"text-gray-500\" [class.text-lg]=\"this.spxMatchButtonXlHeight()\"\n [class.text-xl]=\"!this.spxMatchButtonXlHeight()\" [class.pl-3]=\"this.spxCompact()\"></fa-icon>\n }\n\n <div class=\"flex-auto\">\n <ng-content select=\"[controls]\"></ng-content>\n </div>\n </div>\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}\n" }]
165
+ }], propDecorators: { projectedLeftIcon: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SpxInputLeftIconDirective), { isSignal: true }] }], spxCompact: [{ type: i0.Input, args: [{ isSignal: true, alias: "spxCompact", required: false }] }], spxLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "spxLabel", required: false }] }], spxLeftIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "spxLeftIcon", required: false }] }], spxMatchButtonXlHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "spxMatchButtonXlHeight", 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
166
  type: HostListener,
127
167
  args: ['focusin', ["$event"]]
128
168
  }], handleFocusOut: [{
@@ -208,6 +248,7 @@ class SpxInputTextComponent {
208
248
  this.mappedReadonly = computed(() => this.spxReadonly() ? true : false, ...(ngDevMode ? [{ debugName: "mappedReadonly" }] : []));
209
249
  this.spxSpeedDial = input([], ...(ngDevMode ? [{ debugName: "spxSpeedDial" }] : []));
210
250
  this.spxName = input(...(ngDevMode ? [undefined, { debugName: "spxName" }] : []));
251
+ this.spxMatchButtonXlHeight = input(false, ...(ngDevMode ? [{ debugName: "spxMatchButtonXlHeight" }] : []));
211
252
  this.spxAutofocus = input(false, ...(ngDevMode ? [{ debugName: "spxAutofocus" }] : []));
212
253
  this.spxAutocomplete = input(...(ngDevMode ? [undefined, { debugName: "spxAutocomplete" }] : []));
213
254
  this.spxInputMode = input(...(ngDevMode ? [undefined, { debugName: "spxInputMode" }] : []));
@@ -262,7 +303,7 @@ class SpxInputTextComponent {
262
303
  }
263
304
  }
264
305
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: SpxInputTextComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
265
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", 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 }); }
306
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", 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 }, spxMatchButtonXlHeight: { classPropertyName: "spxMatchButtonXlHeight", publicName: "spxMatchButtonXlHeight", 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>\n", 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 }); }
266
307
  }
267
308
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: SpxInputTextComponent, decorators: [{
268
309
  type: Component,
@@ -271,8 +312,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
271
312
  ReactiveFormsModule,
272
313
  FormsModule,
273
314
  NgClass,
274
- ], 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>" }]
275
- }], 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 }] }] } });
315
+ ], 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>\n" }]
316
+ }], 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 }] }], spxMatchButtonXlHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "spxMatchButtonXlHeight", 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 }] }] } });
276
317
 
277
318
  // {
278
319
  // defaultFocusPosition: 3,
@@ -1237,6 +1278,9 @@ class SpxInputComponent {
1237
1278
  constructor() {
1238
1279
  this.mappedName = computed(() => this.spxName() ?? undefined, ...(ngDevMode ? [{ debugName: "mappedName" }] : []));
1239
1280
  this.mappedReadonly = computed(() => this.spxReadonly() === true ? true : undefined, ...(ngDevMode ? [{ debugName: "mappedReadonly" }] : []));
1281
+ this.matchButtonXlHeight = computed(() => this.spxType() === this.typeText &&
1282
+ !this.spxShowLabel() &&
1283
+ !!this.spxLeftIcon(), ...(ngDevMode ? [{ debugName: "matchButtonXlHeight" }] : []));
1240
1284
  this.spxSpeedDial = input([], ...(ngDevMode ? [{ debugName: "spxSpeedDial" }] : []));
1241
1285
  this.spxLabel = input('label', ...(ngDevMode ? [{ debugName: "spxLabel" }] : []));
1242
1286
  this.spxMax = input(...(ngDevMode ? [undefined, { debugName: "spxMax" }] : []));
@@ -1252,6 +1296,7 @@ class SpxInputComponent {
1252
1296
  this.spxSelectDay = input(true, ...(ngDevMode ? [{ debugName: "spxSelectDay" }] : []));
1253
1297
  this.spxShowEdit = input(false, ...(ngDevMode ? [{ debugName: "spxShowEdit" }] : []));
1254
1298
  this.spxShowHelp = input(false, ...(ngDevMode ? [{ debugName: "spxShowHelp" }] : []));
1299
+ this.spxLeftIcon = input(...(ngDevMode ? [undefined, { debugName: "spxLeftIcon" }] : []));
1255
1300
  this.spxShowLabel = input(true, ...(ngDevMode ? [{ debugName: "spxShowLabel" }] : []));
1256
1301
  this.spxCompact = input(false, ...(ngDevMode ? [{ debugName: "spxCompact" }] : []));
1257
1302
  this.spxShowClear = input(true, ...(ngDevMode ? [{ debugName: "spxShowClear" }] : []));
@@ -1392,13 +1437,13 @@ class SpxInputComponent {
1392
1437
  this.onTouched = fn;
1393
1438
  }
1394
1439
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: SpxInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
1395
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: SpxInputComponent, isStandalone: true, selector: "spx-input", inputs: { spxSpeedDial: { classPropertyName: "spxSpeedDial", publicName: "spxSpeedDial", isSignal: true, isRequired: false, transformFunction: null }, spxLabel: { classPropertyName: "spxLabel", publicName: "spxLabel", isSignal: true, isRequired: false, transformFunction: null }, spxMax: { classPropertyName: "spxMax", publicName: "spxMax", isSignal: true, isRequired: false, transformFunction: null }, spxMin: { classPropertyName: "spxMin", publicName: "spxMin", isSignal: true, isRequired: false, transformFunction: null }, spxName: { classPropertyName: "spxName", publicName: "spxName", isSignal: true, isRequired: false, transformFunction: null }, spxReadonly: { classPropertyName: "spxReadonly", publicName: "spxReadonly", isSignal: true, isRequired: false, transformFunction: null }, spxAutocomplete: { classPropertyName: "spxAutocomplete", publicName: "spxAutocomplete", isSignal: true, isRequired: false, transformFunction: null }, spxAutofocus: { classPropertyName: "spxAutofocus", publicName: "spxAutofocus", isSignal: true, isRequired: false, transformFunction: null }, spxInputMode: { classPropertyName: "spxInputMode", publicName: "spxInputMode", isSignal: true, isRequired: false, transformFunction: null }, spxPattern: { classPropertyName: "spxPattern", publicName: "spxPattern", isSignal: true, isRequired: false, transformFunction: null }, spxRequired: { classPropertyName: "spxRequired", publicName: "spxRequired", isSignal: true, isRequired: false, transformFunction: null }, spxSelectMonth: { classPropertyName: "spxSelectMonth", publicName: "spxSelectMonth", isSignal: true, isRequired: false, transformFunction: null }, spxSelectDay: { classPropertyName: "spxSelectDay", publicName: "spxSelectDay", isSignal: true, isRequired: false, transformFunction: null }, spxShowEdit: { classPropertyName: "spxShowEdit", publicName: "spxShowEdit", isSignal: true, isRequired: false, transformFunction: null }, spxShowHelp: { classPropertyName: "spxShowHelp", publicName: "spxShowHelp", isSignal: true, isRequired: false, transformFunction: null }, 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: [
1440
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: SpxInputComponent, isStandalone: true, selector: "spx-input", inputs: { spxSpeedDial: { classPropertyName: "spxSpeedDial", publicName: "spxSpeedDial", isSignal: true, isRequired: false, transformFunction: null }, spxLabel: { classPropertyName: "spxLabel", publicName: "spxLabel", isSignal: true, isRequired: false, transformFunction: null }, spxMax: { classPropertyName: "spxMax", publicName: "spxMax", isSignal: true, isRequired: false, transformFunction: null }, spxMin: { classPropertyName: "spxMin", publicName: "spxMin", isSignal: true, isRequired: false, transformFunction: null }, spxName: { classPropertyName: "spxName", publicName: "spxName", isSignal: true, isRequired: false, transformFunction: null }, spxReadonly: { classPropertyName: "spxReadonly", publicName: "spxReadonly", isSignal: true, isRequired: false, transformFunction: null }, spxAutocomplete: { classPropertyName: "spxAutocomplete", publicName: "spxAutocomplete", isSignal: true, isRequired: false, transformFunction: null }, spxAutofocus: { classPropertyName: "spxAutofocus", publicName: "spxAutofocus", isSignal: true, isRequired: false, transformFunction: null }, spxInputMode: { classPropertyName: "spxInputMode", publicName: "spxInputMode", isSignal: true, isRequired: false, transformFunction: null }, spxPattern: { classPropertyName: "spxPattern", publicName: "spxPattern", isSignal: true, isRequired: false, transformFunction: null }, spxRequired: { classPropertyName: "spxRequired", publicName: "spxRequired", isSignal: true, isRequired: false, transformFunction: null }, spxSelectMonth: { classPropertyName: "spxSelectMonth", publicName: "spxSelectMonth", isSignal: true, isRequired: false, transformFunction: null }, spxSelectDay: { classPropertyName: "spxSelectDay", publicName: "spxSelectDay", isSignal: true, isRequired: false, transformFunction: null }, spxShowEdit: { classPropertyName: "spxShowEdit", publicName: "spxShowEdit", isSignal: true, isRequired: false, transformFunction: null }, spxShowHelp: { classPropertyName: "spxShowHelp", publicName: "spxShowHelp", isSignal: true, isRequired: false, transformFunction: null }, spxLeftIcon: { classPropertyName: "spxLeftIcon", publicName: "spxLeftIcon", isSignal: true, isRequired: false, transformFunction: null }, spxShowLabel: { classPropertyName: "spxShowLabel", publicName: "spxShowLabel", isSignal: true, isRequired: false, transformFunction: null }, spxCompact: { classPropertyName: "spxCompact", publicName: "spxCompact", isSignal: true, isRequired: false, transformFunction: null }, spxShowClear: { classPropertyName: "spxShowClear", publicName: "spxShowClear", isSignal: true, isRequired: false, transformFunction: null }, spxShowSearch: { classPropertyName: "spxShowSearch", publicName: "spxShowSearch", isSignal: true, isRequired: false, transformFunction: null }, spxAlert: { classPropertyName: "spxAlert", publicName: "spxAlert", isSignal: true, isRequired: false, transformFunction: null }, spxShowValidationMessages: { classPropertyName: "spxShowValidationMessages", publicName: "spxShowValidationMessages", isSignal: true, isRequired: false, transformFunction: null }, spxStep: { classPropertyName: "spxStep", publicName: "spxStep", isSignal: true, isRequired: false, transformFunction: null }, spxSuggestions: { classPropertyName: "spxSuggestions", publicName: "spxSuggestions", isSignal: true, isRequired: false, transformFunction: null }, spxType: { classPropertyName: "spxType", publicName: "spxType", isSignal: true, isRequired: false, transformFunction: null }, spxValidators: { classPropertyName: "spxValidators", publicName: "spxValidators", isSignal: true, isRequired: false, transformFunction: null }, spxCapitalize: { classPropertyName: "spxCapitalize", publicName: "spxCapitalize", isSignal: true, isRequired: false, transformFunction: null }, spxCycleConfig: { classPropertyName: "spxCycleConfig", publicName: "spxCycleConfig", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { spxClear: "spxClear", spxEdit: "spxEdit", spxHelp: "spxHelp", spxSearch: "spxSearch", spxBlur: "spxBlur" }, host: { listeners: { "spxChange": "handleChangeEvent($event)", "focusout": "_handleBlurEvent()" } }, providers: [
1396
1441
  {
1397
1442
  provide: NG_VALUE_ACCESSOR,
1398
1443
  useExisting: SpxInputComponent,
1399
1444
  multi: true
1400
1445
  }
1401
- ], 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 }); }
1446
+ ], viewQueries: [{ propertyName: "floatInput", first: true, predicate: ["spxInputFloat"], descendants: true, isSignal: true }, { propertyName: "numberInput", first: true, predicate: ["spxInputNumber"], descendants: true, isSignal: true }, { propertyName: "textInput", first: true, predicate: ["spxInputText"], descendants: true, isSignal: true }, { propertyName: "timeInput", first: true, predicate: ["spxInputTime"], descendants: true, isSignal: true }, { propertyName: "radioInput", first: true, predicate: ["spxInputRadio"], descendants: true, isSignal: true }, { propertyName: "dateInput", first: true, predicate: ["spxInputDate"], descendants: true, isSignal: true }, { propertyName: "cycleInput", first: true, predicate: ["spxInputCycle"], descendants: true, isSignal: true }], ngImport: i0, template: "<spx-input-box\n (spxClear)=\"this.handleClear()\"\n (spxEdit)=\"this.handleEdit()\"\n (spxHelp)=\"this.handleHelp()\"\n (spxSearch)=\"this.handleSearch()\"\n (spxSetIdInParent)=\"handleSpxElementIdSet($event)\"\n [spxAlert]=\"this.spxAlert()\"\n [spxCompact]=\"this.spxCompact()\"\n [spxLabel]=\"this.spxLabel()\"\n [spxLeftIcon]=\"this.spxLeftIcon()\"\n [spxMatchButtonXlHeight]=\"this.matchButtonXlHeight()\"\n [spxName]=\"this.mappedName()\"\n [spxReadonly]=\"this.spxReadonly()\"\n [spxRequired]=\"this.spxRequired()\"\n [spxShowClear]=\"this.spxShowClear()\"\n [spxShowEdit]=\"this.spxShowEdit()\"\n [spxShowHelp]=\"this.spxShowHelp()\"\n [spxShowLabel]=\"this.spxShowLabel()\"\n [spxShowSearch]=\"this.spxShowSearch() ? this.spxShowSearch() : this.spxType() === 'autocomplete'\"\n [spxShowValidationMessages]=\"this.spxShowValidationMessages()\"\n [spxValue]=\"this.value()\"\n>\n <ng-content select=\"[spxInputLeftIcon]\"></ng-content>\n <div controls>\n @if (this.showInputText()) {\n <spx-input-text\n (valueChange)=\"handleChangeEvent($event)\"\n [spxAutocomplete]=\"this.spxAutocomplete() ? this.spxAutocomplete() : undefined\"\n [spxSpeedDial]=\"this.spxSpeedDial()\"\n [spxAutofocus]=\"this.spxAutofocus()\"\n [spxCapitalize]=\"this.spxCapitalize()\"\n [spxElementId]=\"this.spxElementId()\"\n [spxInputMode]=\"this.spxType() === 'overlaynumber' ? 'numeric' : this.spxInputMode()\"\n [spxName]=\"this.mappedName()\"\n [spxMatchButtonXlHeight]=\"this.matchButtonXlHeight()\"\n [spxPattern]=\"this.spxType() === 'overlaynumber' ? '[0-9]*' : this.spxPattern()\"\n [spxReadonly]=\"this.mappedReadonly()\"\n [spxSuggestions]=\"this.spxSuggestions()\"\n [spxType]=\"this.spxType()\"\n [spxValidators]=\"this.spxValidators()\"\n [value]=\"value()\"\n #spxInputText\n ></spx-input-text>\n } @if (this.showInputCycle()) {\n <spx-input-cycle\n (valueChange)=\"handleChangeEvent($event)\"\n [spxCycleConfig]=\"this.spxCycleConfig()!\"\n [spxSpeedDial]=\"this.spxSpeedDial()\"\n [spxAutofocus]=\"this.spxAutofocus()\"\n [spxCapitalize]=\"this.spxCapitalize()\"\n [spxElementId]=\"this.spxElementId()\"\n [spxInputMode]=\"this.spxType() === 'cycleNumeric' ? 'numeric' : 'text'\"\n [spxName]=\"this.mappedName()\"\n [spxReadonly]=\"this.mappedReadonly()\"\n [spxType]=\"this.spxType()\"\n [spxValidators]=\"this.spxValidators()\"\n [value]=\"value()\"\n #spxInputText\n ></spx-input-cycle>\n } @if (this.showInputDate()) {\n <spx-input-date\n (valueChange)=\"handleChangeEvent($event)\"\n [spxAutoFocus]=\"this.spxAutofocus()\"\n [spxElementId]=\"this.spxElementId()\"\n [spxMax]=\"this.spxMax()!\"\n [spxMin]=\"this.spxMin()!\"\n [spxReadonly]=\"this.mappedReadonly()\"\n [spxSelectDay]=\"this.spxSelectDay()\"\n [spxSelectMonth]=\"this.spxSelectMonth()\"\n [spxValidators]=\"this.spxValidators()\"\n [value]=\"value()\"\n #spxInputDate\n ></spx-input-date>\n } @if (this.showInputFloat()) {\n <spx-input-float\n (valueChange)=\"handleChangeEvent($event)\"\n [spxAutofocus]=\"this.spxAutofocus()\"\n [spxElementId]=\"this.spxElementId()\"\n [spxName]=\"this.mappedName()\"\n [spxReadonly]=\"this.mappedReadonly()\"\n [spxStep]=\"this.spxStep()\"\n [spxValidators]=\"this.spxValidators()\"\n [value]=\"value()\"\n #spxInputFloat\n ></spx-input-float>\n } @if (this.showInputNumber()) {\n <spx-input-number\n (valueChange)=\"handleChangeEvent($event)\"\n [spxAutofocus]=\"this.spxAutofocus()\"\n [spxElementId]=\"this.spxElementId()\"\n [spxInputMode]=\"this.spxInputMode()\"\n [spxName]=\"this.mappedName()\"\n [spxReadonly]=\"this.mappedReadonly()\"\n [spxStep]=\"this.spxStep()\"\n [spxValidators]=\"this.spxValidators()\"\n [value]=\"value()\"\n #spxInputNumber\n ></spx-input-number>\n } @if (this.showInputRadio()) {\n <spx-input-radio\n (valueChange)=\"handleChangeEvent($event)\"\n [spxElementId]=\"this.spxElementId()\"\n [spxName]=\"this.mappedName()\"\n [spxReadonly]=\"this.mappedReadonly()\"\n [spxShowLabel]=\"this.spxShowLabel()\"\n [spxSuggestions]=\"this.spxSuggestions()\"\n [spxValidators]=\"this.spxValidators()\"\n [value]=\"value()\"\n #spxInputRadio\n ></spx-input-radio>\n } @if (this.showInputTime()) {\n <spx-input-time\n (valueChange)=\"handleChangeEvent($event)\"\n [spxName]=\"this.mappedName()\"\n [spxReadonly]=\"this.mappedReadonly()\"\n [spxValidators]=\"this.spxValidators()\"\n [value]=\"value()\"\n #spxInputTime\n ></spx-input-time>\n }\n </div>\n <div validation-messages>\n <ng-content></ng-content>\n </div>\n</spx-input-box>\n", dependencies: [{ kind: "component", type: SpxInputBoxComponent, selector: "spx-input-box", inputs: ["spxCompact", "spxLabel", "spxLeftIcon", "spxMatchButtonXlHeight", "spxName", "spxReadonly", "spxRequired", "spxShowClear", "spxShowEdit", "spxShowHelp", "spxShowLabel", "spxShowSearch", "spxShowValidationMessages", "spxAlert", "spxValue"], outputs: ["spxValueChange", "spxClear", "spxSearch", "spxEdit", "spxHelp", "spxSetIdInParent"] }, { kind: "component", type: SpxInputCycleComponent, selector: "spx-input-cycle", inputs: ["spxSpeedDial", "spxName", "spxAutofocus", "spxAutocomplete", "spxCycleConfig", "spxInputMode", "spxReadonly", "spxValidators", "spxCapitalize", "spxType", "spxWasInternalUpdate", "value", "spxElementId"], outputs: ["valueChange", "completeInput"] }, { kind: "component", type: SpxInputDateComponent, selector: "spx-input-date", inputs: ["spxMax", "spxMin", "spxReadonly", "spxValidators", "spxAutoFocus", "value", "spxSelectDay", "spxSelectMonth", "spxElementId", "spxSuggestions"], outputs: ["valueChange"] }, { kind: "component", type: SpxInputFloatComponent, selector: "spx-input-float", inputs: ["spxName", "spxAutofocus", "spxElementId", "spxReadonly", "spxValidators", "spxStep", "value", "spxWasInternalUpdate"], outputs: ["valueChange"] }, { kind: "component", type: SpxInputNumberComponent, selector: "spx-input-number", inputs: ["spxName", "spxAutofocus", "spxInputMode", "spxReadonly", "spxValidators", "spxFocused", "spxStep", "value", "spxElementId"], outputs: ["valueChange"] }, { kind: "component", type: SpxInputRadioComponent, selector: "spx-input-radio", inputs: ["spxName", "spxValidators", "spxShowLabel", "spxReadonly", "spxSuggestions", "value", "spxElementId"], outputs: ["valueChange"] }, { kind: "component", type: SpxInputTextComponent, selector: "spx-input-text", inputs: ["spxSpeedDial", "spxName", "spxMatchButtonXlHeight", "spxAutofocus", "spxAutocomplete", "spxInputMode", "spxPattern", "spxSuggestions", "spxReadonly", "spxValidators", "spxCapitalize", "spxType", "spxWasInternalUpdate", "value", "spxElementId"], outputs: ["valueChange"] }, { kind: "component", type: SpxInputTimeComponent, selector: "spx-input-time", inputs: ["spxName", "spxAutofocus", "spxInputMode", "spxPattern", "spxSuggestions", "spxReadonly", "spxValidators", "spxCapitalize", "value"], outputs: ["valueChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
1402
1447
  }
1403
1448
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: SpxInputComponent, decorators: [{
1404
1449
  type: Component,
@@ -1409,6 +1454,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
1409
1454
  SpxInputCycleComponent,
1410
1455
  SpxInputDateComponent,
1411
1456
  SpxInputFloatComponent,
1457
+ SpxInputLeftIconDirective,
1412
1458
  SpxInputNumberComponent,
1413
1459
  SpxInputRadioComponent,
1414
1460
  SpxInputTextComponent,
@@ -1419,8 +1465,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
1419
1465
  useExisting: SpxInputComponent,
1420
1466
  multi: true
1421
1467
  }
1422
- ], 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" }]
1423
- }], 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: [{
1468
+ ], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<spx-input-box\n (spxClear)=\"this.handleClear()\"\n (spxEdit)=\"this.handleEdit()\"\n (spxHelp)=\"this.handleHelp()\"\n (spxSearch)=\"this.handleSearch()\"\n (spxSetIdInParent)=\"handleSpxElementIdSet($event)\"\n [spxAlert]=\"this.spxAlert()\"\n [spxCompact]=\"this.spxCompact()\"\n [spxLabel]=\"this.spxLabel()\"\n [spxLeftIcon]=\"this.spxLeftIcon()\"\n [spxMatchButtonXlHeight]=\"this.matchButtonXlHeight()\"\n [spxName]=\"this.mappedName()\"\n [spxReadonly]=\"this.spxReadonly()\"\n [spxRequired]=\"this.spxRequired()\"\n [spxShowClear]=\"this.spxShowClear()\"\n [spxShowEdit]=\"this.spxShowEdit()\"\n [spxShowHelp]=\"this.spxShowHelp()\"\n [spxShowLabel]=\"this.spxShowLabel()\"\n [spxShowSearch]=\"this.spxShowSearch() ? this.spxShowSearch() : this.spxType() === 'autocomplete'\"\n [spxShowValidationMessages]=\"this.spxShowValidationMessages()\"\n [spxValue]=\"this.value()\"\n>\n <ng-content select=\"[spxInputLeftIcon]\"></ng-content>\n <div controls>\n @if (this.showInputText()) {\n <spx-input-text\n (valueChange)=\"handleChangeEvent($event)\"\n [spxAutocomplete]=\"this.spxAutocomplete() ? this.spxAutocomplete() : undefined\"\n [spxSpeedDial]=\"this.spxSpeedDial()\"\n [spxAutofocus]=\"this.spxAutofocus()\"\n [spxCapitalize]=\"this.spxCapitalize()\"\n [spxElementId]=\"this.spxElementId()\"\n [spxInputMode]=\"this.spxType() === 'overlaynumber' ? 'numeric' : this.spxInputMode()\"\n [spxName]=\"this.mappedName()\"\n [spxMatchButtonXlHeight]=\"this.matchButtonXlHeight()\"\n [spxPattern]=\"this.spxType() === 'overlaynumber' ? '[0-9]*' : this.spxPattern()\"\n [spxReadonly]=\"this.mappedReadonly()\"\n [spxSuggestions]=\"this.spxSuggestions()\"\n [spxType]=\"this.spxType()\"\n [spxValidators]=\"this.spxValidators()\"\n [value]=\"value()\"\n #spxInputText\n ></spx-input-text>\n } @if (this.showInputCycle()) {\n <spx-input-cycle\n (valueChange)=\"handleChangeEvent($event)\"\n [spxCycleConfig]=\"this.spxCycleConfig()!\"\n [spxSpeedDial]=\"this.spxSpeedDial()\"\n [spxAutofocus]=\"this.spxAutofocus()\"\n [spxCapitalize]=\"this.spxCapitalize()\"\n [spxElementId]=\"this.spxElementId()\"\n [spxInputMode]=\"this.spxType() === 'cycleNumeric' ? 'numeric' : 'text'\"\n [spxName]=\"this.mappedName()\"\n [spxReadonly]=\"this.mappedReadonly()\"\n [spxType]=\"this.spxType()\"\n [spxValidators]=\"this.spxValidators()\"\n [value]=\"value()\"\n #spxInputText\n ></spx-input-cycle>\n } @if (this.showInputDate()) {\n <spx-input-date\n (valueChange)=\"handleChangeEvent($event)\"\n [spxAutoFocus]=\"this.spxAutofocus()\"\n [spxElementId]=\"this.spxElementId()\"\n [spxMax]=\"this.spxMax()!\"\n [spxMin]=\"this.spxMin()!\"\n [spxReadonly]=\"this.mappedReadonly()\"\n [spxSelectDay]=\"this.spxSelectDay()\"\n [spxSelectMonth]=\"this.spxSelectMonth()\"\n [spxValidators]=\"this.spxValidators()\"\n [value]=\"value()\"\n #spxInputDate\n ></spx-input-date>\n } @if (this.showInputFloat()) {\n <spx-input-float\n (valueChange)=\"handleChangeEvent($event)\"\n [spxAutofocus]=\"this.spxAutofocus()\"\n [spxElementId]=\"this.spxElementId()\"\n [spxName]=\"this.mappedName()\"\n [spxReadonly]=\"this.mappedReadonly()\"\n [spxStep]=\"this.spxStep()\"\n [spxValidators]=\"this.spxValidators()\"\n [value]=\"value()\"\n #spxInputFloat\n ></spx-input-float>\n } @if (this.showInputNumber()) {\n <spx-input-number\n (valueChange)=\"handleChangeEvent($event)\"\n [spxAutofocus]=\"this.spxAutofocus()\"\n [spxElementId]=\"this.spxElementId()\"\n [spxInputMode]=\"this.spxInputMode()\"\n [spxName]=\"this.mappedName()\"\n [spxReadonly]=\"this.mappedReadonly()\"\n [spxStep]=\"this.spxStep()\"\n [spxValidators]=\"this.spxValidators()\"\n [value]=\"value()\"\n #spxInputNumber\n ></spx-input-number>\n } @if (this.showInputRadio()) {\n <spx-input-radio\n (valueChange)=\"handleChangeEvent($event)\"\n [spxElementId]=\"this.spxElementId()\"\n [spxName]=\"this.mappedName()\"\n [spxReadonly]=\"this.mappedReadonly()\"\n [spxShowLabel]=\"this.spxShowLabel()\"\n [spxSuggestions]=\"this.spxSuggestions()\"\n [spxValidators]=\"this.spxValidators()\"\n [value]=\"value()\"\n #spxInputRadio\n ></spx-input-radio>\n } @if (this.showInputTime()) {\n <spx-input-time\n (valueChange)=\"handleChangeEvent($event)\"\n [spxName]=\"this.mappedName()\"\n [spxReadonly]=\"this.mappedReadonly()\"\n [spxValidators]=\"this.spxValidators()\"\n [value]=\"value()\"\n #spxInputTime\n ></spx-input-time>\n }\n </div>\n <div validation-messages>\n <ng-content></ng-content>\n </div>\n</spx-input-box>\n" }]
1469
+ }], propDecorators: { spxSpeedDial: [{ type: i0.Input, args: [{ isSignal: true, alias: "spxSpeedDial", required: false }] }], spxLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "spxLabel", required: false }] }], spxMax: [{ type: i0.Input, args: [{ isSignal: true, alias: "spxMax", required: false }] }], spxMin: [{ type: i0.Input, args: [{ isSignal: true, alias: "spxMin", required: false }] }], spxName: [{ type: i0.Input, args: [{ isSignal: true, alias: "spxName", required: false }] }], spxReadonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "spxReadonly", required: false }] }], spxAutocomplete: [{ type: i0.Input, args: [{ isSignal: true, alias: "spxAutocomplete", required: false }] }], spxAutofocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "spxAutofocus", required: false }] }], spxInputMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "spxInputMode", required: false }] }], spxPattern: [{ type: i0.Input, args: [{ isSignal: true, alias: "spxPattern", required: false }] }], spxRequired: [{ type: i0.Input, args: [{ isSignal: true, alias: "spxRequired", required: false }] }], spxSelectMonth: [{ type: i0.Input, args: [{ isSignal: true, alias: "spxSelectMonth", required: false }] }], spxSelectDay: [{ type: i0.Input, args: [{ isSignal: true, alias: "spxSelectDay", required: false }] }], spxShowEdit: [{ type: i0.Input, args: [{ isSignal: true, alias: "spxShowEdit", required: false }] }], spxShowHelp: [{ type: i0.Input, args: [{ isSignal: true, alias: "spxShowHelp", required: false }] }], spxLeftIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "spxLeftIcon", required: false }] }], spxShowLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "spxShowLabel", required: false }] }], spxCompact: [{ type: i0.Input, args: [{ isSignal: true, alias: "spxCompact", required: false }] }], spxShowClear: [{ type: i0.Input, args: [{ isSignal: true, alias: "spxShowClear", required: false }] }], spxShowSearch: [{ type: i0.Input, args: [{ isSignal: true, alias: "spxShowSearch", required: false }] }], spxAlert: [{ type: i0.Input, args: [{ isSignal: true, alias: "spxAlert", required: false }] }], spxShowValidationMessages: [{ type: i0.Input, args: [{ isSignal: true, alias: "spxShowValidationMessages", required: false }] }], spxStep: [{ type: i0.Input, args: [{ isSignal: true, alias: "spxStep", required: false }] }], spxSuggestions: [{ type: i0.Input, args: [{ isSignal: true, alias: "spxSuggestions", required: false }] }], spxType: [{ type: i0.Input, args: [{ isSignal: true, alias: "spxType", required: false }] }], spxValidators: [{ type: i0.Input, args: [{ isSignal: true, alias: "spxValidators", required: false }] }], spxCapitalize: [{ type: i0.Input, args: [{ isSignal: true, alias: "spxCapitalize", required: false }] }], spxCycleConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "spxCycleConfig", required: false }] }], 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: [{
1424
1470
  type: HostListener,
1425
1471
  args: ['focusout']
1426
1472
  }] } });
@@ -1429,5 +1475,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
1429
1475
  * Generated bundle index. Do not edit.
1430
1476
  */
1431
1477
 
1432
- export { SpxInputBoxComponent, SpxInputComponent, SpxInputTextComponent, SpxInputTypeEnum };
1478
+ export { SpxInputBoxComponent, SpxInputComponent, SpxInputLeftIconDirective, SpxInputTextComponent, SpxInputTypeEnum };
1433
1479
  //# sourceMappingURL=softpak-components-spx-inputs.mjs.map