@softpak/components 21.3.7 → 21.3.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@softpak/components",
-  "version": "21.3.7",
+  "version": "21.3.9",
   "private": false,
   "peerDependencies": {
     "@angular/common": "21.x.x",

package/types/softpak-components-spx-inputs.d.ts

@@ -1,6 +1,7 @@
+import * as _fortawesome_fontawesome_common_types from '@fortawesome/fontawesome-common-types';
 import * as _angular_core from '@angular/core';
 import { ElementRef, ChangeDetectorRef, EventEmitter, QueryList, OnInit, SimpleChanges } from '@angular/core';
-import * as _fortawesome_fontawesome_common_types from '@fortawesome/fontawesome-common-types';
+import { IconDefinition } from '@fortawesome/angular-fontawesome';
 import { Observable } from 'rxjs';
 import { SpxSeverityEnum, SpxInputAlertI as SpxInputAlertI$1 } from '@softpak/components/spx-helpers';
 import { ModalController } from '@ionic/angular/standalone';
@@ -26,8 +27,15 @@ interface SpxInputAlertI {
     severity: SpxSeverityEnum;
 }
 
+declare class SpxInputLeftIconDirective {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SpxInputLeftIconDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<SpxInputLeftIconDirective, "[spxInputLeftIcon]", never, {}, {}, never, never, true, never>;
+}
+
+type SpxInputLeftIcon = IconDefinition | 'clear' | 'edit' | 'help' | 'search';
 declare class SpxInputBoxComponent {
     selectedInputService: SelectedInputService;
+    projectedLeftIcon: _angular_core.Signal<SpxInputLeftIconDirective | undefined>;
     faEdit: _fortawesome_fontawesome_common_types.IconDefinition;
     faSearch: _fortawesome_fontawesome_common_types.IconDefinition;
     faQuestion: _fortawesome_fontawesome_common_types.IconDefinition;
@@ -35,8 +43,12 @@ declare class SpxInputBoxComponent {
     SpxSeverity: typeof SpxSeverityEnum;
     clearButtonName: _angular_core.Signal<string | undefined>;
     searchButtonName: _angular_core.Signal<string | undefined>;
+    leftIcon: _angular_core.Signal<IconDefinition | undefined>;
+    hasLeftIcon: _angular_core.Signal<boolean>;
     readonly spxCompact: _angular_core.InputSignal<boolean | undefined>;
     readonly spxLabel: _angular_core.InputSignal<string | undefined>;
+    readonly spxLeftIcon: _angular_core.InputSignal<SpxInputLeftIcon | undefined>;
+    readonly spxMatchButtonXlHeight: _angular_core.InputSignal<boolean>;
     readonly spxName: _angular_core.InputSignal<string | undefined>;
     readonly spxReadonly: _angular_core.InputSignal<boolean>;
     readonly spxRequired: _angular_core.InputSignal<boolean | undefined>;
@@ -63,7 +75,7 @@ declare class SpxInputBoxComponent {
     onEdit(): void;
     onHelp(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<SpxInputBoxComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SpxInputBoxComponent, "spx-input-box", never, { "spxCompact": { "alias": "spxCompact"; "required": false; "isSignal": true; }; "spxLabel": { "alias": "spxLabel"; "required": false; "isSignal": true; }; "spxName": { "alias": "spxName"; "required": false; "isSignal": true; }; "spxReadonly": { "alias": "spxReadonly"; "required": false; "isSignal": true; }; "spxRequired": { "alias": "spxRequired"; "required": false; "isSignal": true; }; "spxShowClear": { "alias": "spxShowClear"; "required": false; "isSignal": true; }; "spxShowEdit": { "alias": "spxShowEdit"; "required": false; "isSignal": true; }; "spxShowHelp": { "alias": "spxShowHelp"; "required": false; "isSignal": true; }; "spxShowLabel": { "alias": "spxShowLabel"; "required": false; "isSignal": true; }; "spxShowSearch": { "alias": "spxShowSearch"; "required": false; "isSignal": true; }; "spxShowValidationMessages": { "alias": "spxShowValidationMessages"; "required": false; "isSignal": true; }; "spxAlert": { "alias": "spxAlert"; "required": false; "isSignal": true; }; "spxValue": { "alias": "spxValue"; "required": false; "isSignal": true; }; }, { "spxValue": "spxValueChange"; "spxClear": "spxClear"; "spxSearch": "spxSearch"; "spxEdit": "spxEdit"; "spxHelp": "spxHelp"; "spxSetIdInParent": "spxSetIdInParent"; }, never, ["[controls]", "[validation-messages]"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SpxInputBoxComponent, "spx-input-box", never, { "spxCompact": { "alias": "spxCompact"; "required": false; "isSignal": true; }; "spxLabel": { "alias": "spxLabel"; "required": false; "isSignal": true; }; "spxLeftIcon": { "alias": "spxLeftIcon"; "required": false; "isSignal": true; }; "spxMatchButtonXlHeight": { "alias": "spxMatchButtonXlHeight"; "required": false; "isSignal": true; }; "spxName": { "alias": "spxName"; "required": false; "isSignal": true; }; "spxReadonly": { "alias": "spxReadonly"; "required": false; "isSignal": true; }; "spxRequired": { "alias": "spxRequired"; "required": false; "isSignal": true; }; "spxShowClear": { "alias": "spxShowClear"; "required": false; "isSignal": true; }; "spxShowEdit": { "alias": "spxShowEdit"; "required": false; "isSignal": true; }; "spxShowHelp": { "alias": "spxShowHelp"; "required": false; "isSignal": true; }; "spxShowLabel": { "alias": "spxShowLabel"; "required": false; "isSignal": true; }; "spxShowSearch": { "alias": "spxShowSearch"; "required": false; "isSignal": true; }; "spxShowValidationMessages": { "alias": "spxShowValidationMessages"; "required": false; "isSignal": true; }; "spxAlert": { "alias": "spxAlert"; "required": false; "isSignal": true; }; "spxValue": { "alias": "spxValue"; "required": false; "isSignal": true; }; }, { "spxValue": "spxValueChange"; "spxClear": "spxClear"; "spxSearch": "spxSearch"; "spxEdit": "spxEdit"; "spxHelp": "spxHelp"; "spxSetIdInParent": "spxSetIdInParent"; }, ["projectedLeftIcon"], ["[spxInputLeftIcon]", "[controls]", "[validation-messages]"], true, never>;
 }
 
 declare enum SpxInputTypeEnum {
@@ -96,6 +108,7 @@ declare class SpxInputTextComponent {
     mappedReadonly: _angular_core.Signal<boolean>;
     readonly spxSpeedDial: _angular_core.InputSignal<SpxSpeedDial<string | number>[]>;
     readonly spxName: _angular_core.InputSignal<string | undefined>;
+    readonly spxMatchButtonXlHeight: _angular_core.InputSignal<boolean>;
     readonly spxAutofocus: _angular_core.InputSignal<boolean>;
     readonly spxAutocomplete: _angular_core.InputSignal<string | undefined>;
     readonly spxInputMode: _angular_core.InputSignal<string | undefined>;
@@ -120,7 +133,7 @@ declare class SpxInputTextComponent {
     handleChange(event: any): void;
     handleSuggestionClick(value: any): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<SpxInputTextComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SpxInputTextComponent, "spx-input-text", never, { "spxSpeedDial": { "alias": "spxSpeedDial"; "required": false; "isSignal": true; }; "spxName": { "alias": "spxName"; "required": false; "isSignal": true; }; "spxAutofocus": { "alias": "spxAutofocus"; "required": false; "isSignal": true; }; "spxAutocomplete": { "alias": "spxAutocomplete"; "required": false; "isSignal": true; }; "spxInputMode": { "alias": "spxInputMode"; "required": false; "isSignal": true; }; "spxPattern": { "alias": "spxPattern"; "required": false; "isSignal": true; }; "spxSuggestions": { "alias": "spxSuggestions"; "required": false; "isSignal": true; }; "spxReadonly": { "alias": "spxReadonly"; "required": false; "isSignal": true; }; "spxValidators": { "alias": "spxValidators"; "required": false; "isSignal": true; }; "spxCapitalize": { "alias": "spxCapitalize"; "required": false; "isSignal": true; }; "spxType": { "alias": "spxType"; "required": false; "isSignal": true; }; "spxWasInternalUpdate": { "alias": "spxWasInternalUpdate"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "spxElementId": { "alias": "spxElementId"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SpxInputTextComponent, "spx-input-text", never, { "spxSpeedDial": { "alias": "spxSpeedDial"; "required": false; "isSignal": true; }; "spxName": { "alias": "spxName"; "required": false; "isSignal": true; }; "spxMatchButtonXlHeight": { "alias": "spxMatchButtonXlHeight"; "required": false; "isSignal": true; }; "spxAutofocus": { "alias": "spxAutofocus"; "required": false; "isSignal": true; }; "spxAutocomplete": { "alias": "spxAutocomplete"; "required": false; "isSignal": true; }; "spxInputMode": { "alias": "spxInputMode"; "required": false; "isSignal": true; }; "spxPattern": { "alias": "spxPattern"; "required": false; "isSignal": true; }; "spxSuggestions": { "alias": "spxSuggestions"; "required": false; "isSignal": true; }; "spxReadonly": { "alias": "spxReadonly"; "required": false; "isSignal": true; }; "spxValidators": { "alias": "spxValidators"; "required": false; "isSignal": true; }; "spxCapitalize": { "alias": "spxCapitalize"; "required": false; "isSignal": true; }; "spxType": { "alias": "spxType"; "required": false; "isSignal": true; }; "spxWasInternalUpdate": { "alias": "spxWasInternalUpdate"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "spxElementId": { "alias": "spxElementId"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; }, never, never, true, never>;
 }
 
 interface SpxCycleConfig {
@@ -356,6 +369,7 @@ declare class SpxInputTimeComponent {
 declare class SpxInputComponent {
     protected mappedName: _angular_core.Signal<string | undefined>;
     protected mappedReadonly: _angular_core.Signal<true | undefined>;
+    protected matchButtonXlHeight: _angular_core.Signal<boolean>;
     readonly spxSpeedDial: _angular_core.InputSignal<SpxSpeedDial<string | number>[]>;
     readonly spxLabel: _angular_core.InputSignal<string>;
     readonly spxMax: _angular_core.InputSignal<string | undefined>;
@@ -371,6 +385,7 @@ declare class SpxInputComponent {
     readonly spxSelectDay: _angular_core.InputSignal<boolean>;
     readonly spxShowEdit: _angular_core.InputSignal<boolean>;
     readonly spxShowHelp: _angular_core.InputSignal<boolean>;
+    readonly spxLeftIcon: _angular_core.InputSignal<SpxInputLeftIcon | undefined>;
     readonly spxShowLabel: _angular_core.InputSignal<boolean>;
     readonly spxCompact: _angular_core.InputSignal<boolean>;
     readonly spxShowClear: _angular_core.InputSignal<boolean>;
@@ -438,8 +453,8 @@ declare class SpxInputComponent {
     registerOnChange(fn: (value: any) => void): void;
     registerOnTouched(fn: () => void): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<SpxInputComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SpxInputComponent, "spx-input", never, { "spxSpeedDial": { "alias": "spxSpeedDial"; "required": false; "isSignal": true; }; "spxLabel": { "alias": "spxLabel"; "required": false; "isSignal": true; }; "spxMax": { "alias": "spxMax"; "required": false; "isSignal": true; }; "spxMin": { "alias": "spxMin"; "required": false; "isSignal": true; }; "spxName": { "alias": "spxName"; "required": false; "isSignal": true; }; "spxReadonly": { "alias": "spxReadonly"; "required": false; "isSignal": true; }; "spxAutocomplete": { "alias": "spxAutocomplete"; "required": false; "isSignal": true; }; "spxAutofocus": { "alias": "spxAutofocus"; "required": false; "isSignal": true; }; "spxInputMode": { "alias": "spxInputMode"; "required": false; "isSignal": true; }; "spxPattern": { "alias": "spxPattern"; "required": false; "isSignal": true; }; "spxRequired": { "alias": "spxRequired"; "required": false; "isSignal": true; }; "spxSelectMonth": { "alias": "spxSelectMonth"; "required": false; "isSignal": true; }; "spxSelectDay": { "alias": "spxSelectDay"; "required": false; "isSignal": true; }; "spxShowEdit": { "alias": "spxShowEdit"; "required": false; "isSignal": true; }; "spxShowHelp": { "alias": "spxShowHelp"; "required": false; "isSignal": true; }; "spxShowLabel": { "alias": "spxShowLabel"; "required": false; "isSignal": true; }; "spxCompact": { "alias": "spxCompact"; "required": false; "isSignal": true; }; "spxShowClear": { "alias": "spxShowClear"; "required": false; "isSignal": true; }; "spxShowSearch": { "alias": "spxShowSearch"; "required": false; "isSignal": true; }; "spxAlert": { "alias": "spxAlert"; "required": false; "isSignal": true; }; "spxShowValidationMessages": { "alias": "spxShowValidationMessages"; "required": false; "isSignal": true; }; "spxStep": { "alias": "spxStep"; "required": false; "isSignal": true; }; "spxSuggestions": { "alias": "spxSuggestions"; "required": false; "isSignal": true; }; "spxType": { "alias": "spxType"; "required": false; "isSignal": true; }; "spxValidators": { "alias": "spxValidators"; "required": false; "isSignal": true; }; "spxCapitalize": { "alias": "spxCapitalize"; "required": false; "isSignal": true; }; "spxCycleConfig": { "alias": "spxCycleConfig"; "required": false; "isSignal": true; }; }, { "spxClear": "spxClear"; "spxEdit": "spxEdit"; "spxHelp": "spxHelp"; "spxSearch": "spxSearch"; "spxBlur": "spxBlur"; }, never, ["*"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SpxInputComponent, "spx-input", never, { "spxSpeedDial": { "alias": "spxSpeedDial"; "required": false; "isSignal": true; }; "spxLabel": { "alias": "spxLabel"; "required": false; "isSignal": true; }; "spxMax": { "alias": "spxMax"; "required": false; "isSignal": true; }; "spxMin": { "alias": "spxMin"; "required": false; "isSignal": true; }; "spxName": { "alias": "spxName"; "required": false; "isSignal": true; }; "spxReadonly": { "alias": "spxReadonly"; "required": false; "isSignal": true; }; "spxAutocomplete": { "alias": "spxAutocomplete"; "required": false; "isSignal": true; }; "spxAutofocus": { "alias": "spxAutofocus"; "required": false; "isSignal": true; }; "spxInputMode": { "alias": "spxInputMode"; "required": false; "isSignal": true; }; "spxPattern": { "alias": "spxPattern"; "required": false; "isSignal": true; }; "spxRequired": { "alias": "spxRequired"; "required": false; "isSignal": true; }; "spxSelectMonth": { "alias": "spxSelectMonth"; "required": false; "isSignal": true; }; "spxSelectDay": { "alias": "spxSelectDay"; "required": false; "isSignal": true; }; "spxShowEdit": { "alias": "spxShowEdit"; "required": false; "isSignal": true; }; "spxShowHelp": { "alias": "spxShowHelp"; "required": false; "isSignal": true; }; "spxLeftIcon": { "alias": "spxLeftIcon"; "required": false; "isSignal": true; }; "spxShowLabel": { "alias": "spxShowLabel"; "required": false; "isSignal": true; }; "spxCompact": { "alias": "spxCompact"; "required": false; "isSignal": true; }; "spxShowClear": { "alias": "spxShowClear"; "required": false; "isSignal": true; }; "spxShowSearch": { "alias": "spxShowSearch"; "required": false; "isSignal": true; }; "spxAlert": { "alias": "spxAlert"; "required": false; "isSignal": true; }; "spxShowValidationMessages": { "alias": "spxShowValidationMessages"; "required": false; "isSignal": true; }; "spxStep": { "alias": "spxStep"; "required": false; "isSignal": true; }; "spxSuggestions": { "alias": "spxSuggestions"; "required": false; "isSignal": true; }; "spxType": { "alias": "spxType"; "required": false; "isSignal": true; }; "spxValidators": { "alias": "spxValidators"; "required": false; "isSignal": true; }; "spxCapitalize": { "alias": "spxCapitalize"; "required": false; "isSignal": true; }; "spxCycleConfig": { "alias": "spxCycleConfig"; "required": false; "isSignal": true; }; }, { "spxClear": "spxClear"; "spxEdit": "spxEdit"; "spxHelp": "spxHelp"; "spxSearch": "spxSearch"; "spxBlur": "spxBlur"; }, never, ["[spxInputLeftIcon]", "*"], true, never>;
 }
 
-export { SpxInputBoxComponent, SpxInputComponent, SpxInputTextComponent, SpxInputTypeEnum };
-export type { SpxCycleConfig, SpxInputAlertI, SpxSpeedDial, SpxValuePair };
+export { SpxInputBoxComponent, SpxInputComponent, SpxInputLeftIconDirective, SpxInputTextComponent, SpxInputTypeEnum };
+export type { SpxCycleConfig, SpxInputAlertI, SpxInputLeftIcon, SpxSpeedDial, SpxValuePair };