@softpak/components 18.6.10 → 18.6.12

package/fesm2022/softpak-components-spx-inputs.mjs

@@ -4,11 +4,11 @@ import { SpxButtonComponent } from '@softpak/components/spx-button';
 import * as i1 from '@fortawesome/angular-fontawesome';
 import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
 import { faEdit, faSearch, faQuestion, faTimes, faXmark } from '@fortawesome/free-solid-svg-icons';
+import { SpxSeverityEnum, valuePairToValue } from '@softpak/components/spx-helpers';
 import { fromEvent } from 'rxjs';
 import * as i1$1 from '@angular/forms';
 import { FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
 import { SpxSuggestionComponent } from '@softpak/components/spx-suggestion';
-import { valuePairToValue, SpxSeverityEnum } from '@softpak/components/spx-helpers';
 import { DateTime } from 'luxon';
 import * as i1$2 from '@ionic/angular';
 import { IonicModule } from '@ionic/angular';
@@ -50,6 +50,7 @@ class SpxInputBoxComponent {
         this.faSearch = faSearch;
         this.faQuestion = faQuestion;
         this.faTimes = faTimes;
+        this.spxSeverityEnum = SpxSeverityEnum;
         this.spxFocused = false;
         this.spxReadonly = false;
         this.spxShowClear = true;
@@ -72,7 +73,7 @@ class SpxInputBoxComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SpxInputBoxComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: SpxInputBoxComponent, isStandalone: true, selector: "spx-input-box", inputs: { spxCompact: "spxCompact", spxFocused: "spxFocused", spxLabel: "spxLabel", spxReadonly: "spxReadonly", spxRequired: "spxRequired", spxShowClear: "spxShowClear", spxShowEdit: "spxShowEdit", spxShowHelp: "spxShowHelp", spxShowLabel: "spxShowLabel", spxShowSearch: "spxShowSearch", spxShowValidationMessages: "spxShowValidationMessages", spxValue: "spxValue" }, outputs: { spxClear: "spxClear", spxSearch: "spxSearch", spxFocus: "spxFocus", spxFocusOut: "spxFocusOut", spxEdit: "spxEdit", spxHelp: "spxHelp" }, host: { listeners: { "focusin": "handleFocusIn($event)", "focusout": "handleFocusOut($event)", "document:click": "handleWindowClick($event)" } }, ngImport: i0, template: `<div class="flex rounded w-full gap-3"
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: SpxInputBoxComponent, isStandalone: true, selector: "spx-input-box", inputs: { spxCompact: "spxCompact", spxFocused: "spxFocused", spxLabel: "spxLabel", spxReadonly: "spxReadonly", spxRequired: "spxRequired", spxShowClear: "spxShowClear", spxShowEdit: "spxShowEdit", spxShowHelp: "spxShowHelp", spxShowLabel: "spxShowLabel", spxShowSearch: "spxShowSearch", spxAlertMessageSeverity: "spxAlertMessageSeverity", spxShowValidationMessages: "spxShowValidationMessages", spxValue: "spxValue" }, outputs: { spxClear: "spxClear", spxSearch: "spxSearch", spxFocus: "spxFocus", spxFocusOut: "spxFocusOut", spxEdit: "spxEdit", spxHelp: "spxHelp" }, host: { listeners: { "focusin": "handleFocusIn($event)", "focusout": "handleFocusOut($event)", "document:click": "handleWindowClick($event)" } }, ngImport: i0, template: `<div class="flex rounded w-full gap-3"
       [class.rounded-none]="this.spxShowValidationMessages"
       [class.rounded-t]="this.spxShowValidationMessages"
       [class.outline-none]="this.spxFocused && !this.spxReadonly"
@@ -146,7 +147,18 @@ class SpxInputBoxComponent {
       <div class="bg-red-600 rounded-b text-white p-3">
         <ng-content select="[validation-messages]"></ng-content>
       </div>
-    }`, isInline: true, dependencies: [{ kind: "component", type: SpxButtonComponent, selector: "spx-button", inputs: ["spxDisabled", "spxClass", "spxClassObject", "spxForm", "spxFullHeight", "spxFullWidth", "spxSeverity", "spxSize", "spxTabIndex", "spxType"], outputs: ["spxClick"] }, { kind: "ngmodule", type: FontAwesomeModule }, { kind: "component", type: i1.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "mask", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "transform", "a11yRole"] }] }); }
+    }
+    @else if(this.spxAlertMessageSeverity) {
+      <div  [class.bg-red-700]="spxSeverityEnum.error"
+            [class.bg-green-700]="spxSeverityEnum.success"
+            [class.bg-blue-700]="spxSeverityEnum.info"
+            [class.bg-gray-400]="spxSeverityEnum.unknown"
+            [class.bg-amber-700]="spxSeverityEnum.warning"
+            class="rounded-b text-white p-3">
+          <ng-content select="[validation-messages]"></ng-content>
+      </div>
+    }
+    `, isInline: true, dependencies: [{ kind: "component", type: SpxButtonComponent, selector: "spx-button", inputs: ["spxDisabled", "spxClass", "spxClassObject", "spxForm", "spxFullHeight", "spxFullWidth", "spxSeverity", "spxSize", "spxTabIndex", "spxType"], outputs: ["spxClick"] }, { kind: "ngmodule", type: FontAwesomeModule }, { kind: "component", type: i1.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "mask", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "transform", "a11yRole"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SpxInputBoxComponent, decorators: [{
             type: Component,
@@ -231,7 +243,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
       <div class="bg-red-600 rounded-b text-white p-3">
         <ng-content select="[validation-messages]"></ng-content>
       </div>
-    }`,
+    }
+    @else if(this.spxAlertMessageSeverity) {
+      <div  [class.bg-red-700]="spxSeverityEnum.error"
+            [class.bg-green-700]="spxSeverityEnum.success"
+            [class.bg-blue-700]="spxSeverityEnum.info"
+            [class.bg-gray-400]="spxSeverityEnum.unknown"
+            [class.bg-amber-700]="spxSeverityEnum.warning"
+            class="rounded-b text-white p-3">
+          <ng-content select="[validation-messages]"></ng-content>
+      </div>
+    }
+    `,
                 }]
         }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { spxCompact: [{
                 type: Input
@@ -253,6 +276,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                 type: Input
             }], spxShowSearch: [{
                 type: Input
+            }], spxAlertMessageSeverity: [{
+                type: Input
             }], spxShowValidationMessages: [{
                 type: Input
             }], spxValue: [{
@@ -1477,7 +1502,7 @@ class SpxInputComponent {
         this.onTouched = fn;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SpxInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: SpxInputComponent, isStandalone: true, selector: "spx-input", inputs: { spxLabel: "spxLabel", spxMax: "spxMax", spxMin: "spxMin", spxName: "spxName", spxReadonly: "spxReadonly", spxAutocomplete: "spxAutocomplete", spxAutofocus: "spxAutofocus", spxInputMode: "spxInputMode", spxPattern: "spxPattern", spxRequired: "spxRequired", spxSelectMonth: "spxSelectMonth", spxSelectDay: "spxSelectDay", spxShowEdit: "spxShowEdit", spxShowHelp: "spxShowHelp", spxShowLabel: "spxShowLabel", spxCompact: "spxCompact", spxShowClear: "spxShowClear", spxShowSearch: "spxShowSearch", spxShowValidationMessages: "spxShowValidationMessages", spxStep: "spxStep", spxSuggestions: "spxSuggestions", spxType: "spxType", spxValidators: "spxValidators", value: "value", spxCapitalize: "spxCapitalize", spxFocused: "spxFocused" }, outputs: { spxBlur: "spxBlur", spxClear: "spxClear", spxChange: "spxChange", spxFocus: "spxFocus", spxEdit: "spxEdit", spxHelp: "spxHelp", spxSearch: "spxSearch" }, host: { listeners: { "spxChange": "handleChangeEvent($event)", "focusout": "_handleBlurEvent()" } }, providers: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: SpxInputComponent, isStandalone: true, selector: "spx-input", inputs: { spxLabel: "spxLabel", spxMax: "spxMax", spxMin: "spxMin", spxName: "spxName", spxReadonly: "spxReadonly", spxAutocomplete: "spxAutocomplete", spxAutofocus: "spxAutofocus", spxInputMode: "spxInputMode", spxPattern: "spxPattern", spxRequired: "spxRequired", spxSelectMonth: "spxSelectMonth", spxSelectDay: "spxSelectDay", spxShowEdit: "spxShowEdit", spxShowHelp: "spxShowHelp", spxShowLabel: "spxShowLabel", spxCompact: "spxCompact", spxShowClear: "spxShowClear", spxShowSearch: "spxShowSearch", spxAlertMessageSeverity: "spxAlertMessageSeverity", spxShowValidationMessages: "spxShowValidationMessages", spxStep: "spxStep", spxSuggestions: "spxSuggestions", spxType: "spxType", spxValidators: "spxValidators", value: "value", spxCapitalize: "spxCapitalize", spxFocused: "spxFocused" }, outputs: { spxBlur: "spxBlur", spxClear: "spxClear", spxChange: "spxChange", spxFocus: "spxFocus", spxEdit: "spxEdit", spxHelp: "spxHelp", spxSearch: "spxSearch" }, host: { listeners: { "spxChange": "handleChangeEvent($event)", "focusout": "_handleBlurEvent()" } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: SpxInputComponent,
@@ -1485,6 +1510,7 @@ class SpxInputComponent {
             }
         ], viewQueries: [{ propertyName: "floatInput", first: true, predicate: SpxInputFloatComponent, descendants: true }, { propertyName: "numberInput", first: true, predicate: SpxInputNumberComponent, descendants: true }, { propertyName: "textInput", first: true, predicate: SpxInputTextComponent, descendants: true }, { propertyName: "timeInput", first: true, predicate: SpxInputTimeComponent, descendants: true }, { propertyName: "radioInput", first: true, predicate: SpxInputRadioComponent, descendants: true }], ngImport: i0, template: `<spx-input-box
     [spxFocused]="this.spxFocused"
+    [spxAlertMessageSeverity]="this.spxAlertMessageSeverity"
     [spxLabel]="this.spxLabel"
     [spxReadonly]="this.spxReadonly"
     [spxRequired]="this.spxRequired"
@@ -1592,7 +1618,7 @@ class SpxInputComponent {
     <div validation-messages>
       <ng-content></ng-content>
     </div>
-  </spx-input-box>`, isInline: true, dependencies: [{ kind: "component", type: SpxInputBoxComponent, selector: "spx-input-box", inputs: ["spxCompact", "spxFocused", "spxLabel", "spxReadonly", "spxRequired", "spxShowClear", "spxShowEdit", "spxShowHelp", "spxShowLabel", "spxShowSearch", "spxShowValidationMessages", "spxValue"], outputs: ["spxClear", "spxSearch", "spxFocus", "spxFocusOut", "spxEdit", "spxHelp"] }, { kind: "component", type: SpxInputDateComponent, selector: "spx-input-date", inputs: ["spxMax", "spxMin", "spxReadonly", "spxValidators", "value", "spxFocused", "spxSelectDay", "spxSelectMonth", "spxSuggestions"], outputs: ["valueChange", "spxChange", "spxFocus"] }, { kind: "component", type: SpxInputFloatComponent, selector: "spx-input-float", inputs: ["spxName", "spxAutofocus", "spxReadonly", "spxValidators", "spxFocused", "spxStep", "value", "spxWasInternalUpdate", "tick"], outputs: ["spxChange", "spxFocus"] }, { kind: "component", type: SpxInputNumberComponent, selector: "spx-input-number", inputs: ["spxName", "spxAutofocus", "spxInputMode", "spxReadonly", "spxValidators", "spxFocused", "spxStep", "value"], outputs: ["spxChange", "spxFocus"] }, { kind: "component", type: SpxInputRadioComponent, selector: "spx-input-radio", inputs: ["spxName", "spxValidators", "spxFocused", "spxShowLabel", "spxReadonly", "spxSuggestions", "value"], outputs: ["spxChange", "spxFocus"] }, { kind: "component", type: SpxInputTextComponent, selector: "spx-input-text", inputs: ["spxName", "spxAutofocus", "spxAutocomplete", "spxInputMode", "spxPattern", "spxSuggestions", "spxReadonly", "spxValidators", "spxCapitalize", "spxFocused", "spxType", "value", "spxWasInternalUpdate"], outputs: ["spxBlurFromChild", "spxChange", "spxFocus"] }, { kind: "component", type: SpxInputTimeComponent, selector: "spx-input-time", inputs: ["spxName", "spxAutofocus", "spxInputMode", "spxPattern", "spxSuggestions", "spxReadonly", "spxValidators", "spxCapitalize", "spxFocused", "spxType", "value", "spxWasInternalUpdate"], outputs: ["spxBlurFromChild", "spxChange", "spxFocus"] }] }); }
+  </spx-input-box>`, isInline: true, dependencies: [{ kind: "component", type: SpxInputBoxComponent, selector: "spx-input-box", inputs: ["spxCompact", "spxFocused", "spxLabel", "spxReadonly", "spxRequired", "spxShowClear", "spxShowEdit", "spxShowHelp", "spxShowLabel", "spxShowSearch", "spxAlertMessageSeverity", "spxShowValidationMessages", "spxValue"], outputs: ["spxClear", "spxSearch", "spxFocus", "spxFocusOut", "spxEdit", "spxHelp"] }, { kind: "component", type: SpxInputDateComponent, selector: "spx-input-date", inputs: ["spxMax", "spxMin", "spxReadonly", "spxValidators", "value", "spxFocused", "spxSelectDay", "spxSelectMonth", "spxSuggestions"], outputs: ["valueChange", "spxChange", "spxFocus"] }, { kind: "component", type: SpxInputFloatComponent, selector: "spx-input-float", inputs: ["spxName", "spxAutofocus", "spxReadonly", "spxValidators", "spxFocused", "spxStep", "value", "spxWasInternalUpdate", "tick"], outputs: ["spxChange", "spxFocus"] }, { kind: "component", type: SpxInputNumberComponent, selector: "spx-input-number", inputs: ["spxName", "spxAutofocus", "spxInputMode", "spxReadonly", "spxValidators", "spxFocused", "spxStep", "value"], outputs: ["spxChange", "spxFocus"] }, { kind: "component", type: SpxInputRadioComponent, selector: "spx-input-radio", inputs: ["spxName", "spxValidators", "spxFocused", "spxShowLabel", "spxReadonly", "spxSuggestions", "value"], outputs: ["spxChange", "spxFocus"] }, { kind: "component", type: SpxInputTextComponent, selector: "spx-input-text", inputs: ["spxName", "spxAutofocus", "spxAutocomplete", "spxInputMode", "spxPattern", "spxSuggestions", "spxReadonly", "spxValidators", "spxCapitalize", "spxFocused", "spxType", "value", "spxWasInternalUpdate"], outputs: ["spxBlurFromChild", "spxChange", "spxFocus"] }, { kind: "component", type: SpxInputTimeComponent, selector: "spx-input-time", inputs: ["spxName", "spxAutofocus", "spxInputMode", "spxPattern", "spxSuggestions", "spxReadonly", "spxValidators", "spxCapitalize", "spxFocused", "spxType", "value", "spxWasInternalUpdate"], outputs: ["spxBlurFromChild", "spxChange", "spxFocus"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SpxInputComponent, decorators: [{
             type: Component,
@@ -1620,6 +1646,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                     ],
                     template: `<spx-input-box
     [spxFocused]="this.spxFocused"
+    [spxAlertMessageSeverity]="this.spxAlertMessageSeverity"
     [spxLabel]="this.spxLabel"
     [spxReadonly]="this.spxReadonly"
     [spxRequired]="this.spxRequired"
@@ -1765,6 +1792,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                 type: Input
             }], spxShowSearch: [{
                 type: Input
+            }], spxAlertMessageSeverity: [{
+                type: Input
             }], spxShowValidationMessages: [{
                 type: Input
             }], spxStep: [{