@softpak/components 19.26.0 → 20.0.0

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

@@ -1,7 +1,6 @@
 import * as i0 from '@angular/core';
 import { input, output, ChangeDetectionStrategy, Component, model, computed } from '@angular/core';
-import * as i1 from '@fortawesome/angular-fontawesome';
-import { FaIconComponent, FontAwesomeModule } from '@fortawesome/angular-fontawesome';
+import { FaIconComponent } from '@fortawesome/angular-fontawesome';
 import { SpxSeverityEnum } from '@softpak/components/spx-helpers';
 import { IsSeverityPipe } from '@softpak/components/spx-pipes';
 
@@ -21,12 +20,12 @@ class SpxCardComponent {
     onClick() {
         this.clicked.emit();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: SpxCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.11", type: SpxCardComponent, isStandalone: true, selector: "spx-card", inputs: { clickable: { classPropertyName: "clickable", publicName: "clickable", isSignal: true, isRequired: false, transformFunction: null }, hasContent: { classPropertyName: "hasContent", publicName: "hasContent", isSignal: true, isRequired: false, transformFunction: null }, onDetailPage: { classPropertyName: "onDetailPage", publicName: "onDetailPage", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, unit: { classPropertyName: "unit", publicName: "unit", isSignal: true, isRequired: false, transformFunction: null }, tableView: { classPropertyName: "tableView", publicName: "tableView", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clicked: "clicked" }, ngImport: i0, template: "<button type=\"button\"\nclass=\"block w-full text-left rounded font-body items-stretch\"\n[class.flex]=\"tableView()\"\n[class.cursor-pointer]=\"clickable()\"\n[class.cursor-not-allowed]=\"!clickable()\"\n[class.focus:ring-2]=\"clickable()\"\n[class.focus:ring-offset-2]=\"clickable()\"\n[class.focus:ring-blue-500]=\"clickable()\"\n(click)=\"onClick()\"\n[tabIndex]=\"clickable() ? 0 : -1\">\n<div class=\"text-gray-900 opacity-90\" [class.w-96]=\"tableView()\">\n  <ng-content select=\"[card-header]\"></ng-content>\n</div>\n<ng-content select=\"[card-content-top]\"></ng-content>\n@if (hasContent()) {\n  <div class=\"bg-white dark:bg-gray-600 p-3\">\n    <ng-content select=\"[card-content]\"></ng-content>\n  </div>\n}\n<ng-content select=\"[card-content-bottom]\"></ng-content>\n<div class=\"bg-gray-50 dark:bg-gray-700 p-3 grow\" [class.rounded-b-lg]=\"!onDetailPage() && !tableView()\" [class.rounded-r-lg]=\"!onDetailPage() && tableView()\">\n  <ng-content select=\"[card-lines]\"></ng-content>\n</div>\n</button>", changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: SpxCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.0", type: SpxCardComponent, isStandalone: true, selector: "spx-card", inputs: { clickable: { classPropertyName: "clickable", publicName: "clickable", isSignal: true, isRequired: false, transformFunction: null }, hasContent: { classPropertyName: "hasContent", publicName: "hasContent", isSignal: true, isRequired: false, transformFunction: null }, onDetailPage: { classPropertyName: "onDetailPage", publicName: "onDetailPage", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, unit: { classPropertyName: "unit", publicName: "unit", isSignal: true, isRequired: false, transformFunction: null }, tableView: { classPropertyName: "tableView", publicName: "tableView", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clicked: "clicked" }, ngImport: i0, template: "<button type=\"button\"\r\nclass=\"block w-full text-left rounded font-body items-stretch\"\r\n[class.flex]=\"tableView()\"\r\n[class.cursor-pointer]=\"clickable()\"\r\n[class.cursor-not-allowed]=\"!clickable()\"\r\n[class.focus:ring-2]=\"clickable()\"\r\n[class.focus:ring-offset-2]=\"clickable()\"\r\n[class.focus:ring-blue-500]=\"clickable()\"\r\n(click)=\"onClick()\"\r\n[tabIndex]=\"clickable() ? 0 : -1\">\r\n<div class=\"text-gray-900 opacity-90\" [class.w-96]=\"tableView()\">\r\n  <ng-content select=\"[card-header]\"></ng-content>\r\n</div>\r\n<ng-content select=\"[card-content-top]\"></ng-content>\r\n@if (hasContent()) {\r\n  <div class=\"bg-white dark:bg-gray-600 p-3\">\r\n    <ng-content select=\"[card-content]\"></ng-content>\r\n  </div>\r\n}\r\n<ng-content select=\"[card-content-bottom]\"></ng-content>\r\n<div class=\"bg-gray-50 dark:bg-gray-700 p-3 grow\" [class.rounded-b-lg]=\"!onDetailPage() && !tableView()\" [class.rounded-r-lg]=\"!onDetailPage() && tableView()\">\r\n  <ng-content select=\"[card-lines]\"></ng-content>\r\n</div>\r\n</button>", changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: SpxCardComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: SpxCardComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'spx-card', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<button type=\"button\"\nclass=\"block w-full text-left rounded font-body items-stretch\"\n[class.flex]=\"tableView()\"\n[class.cursor-pointer]=\"clickable()\"\n[class.cursor-not-allowed]=\"!clickable()\"\n[class.focus:ring-2]=\"clickable()\"\n[class.focus:ring-offset-2]=\"clickable()\"\n[class.focus:ring-blue-500]=\"clickable()\"\n(click)=\"onClick()\"\n[tabIndex]=\"clickable() ? 0 : -1\">\n<div class=\"text-gray-900 opacity-90\" [class.w-96]=\"tableView()\">\n  <ng-content select=\"[card-header]\"></ng-content>\n</div>\n<ng-content select=\"[card-content-top]\"></ng-content>\n@if (hasContent()) {\n  <div class=\"bg-white dark:bg-gray-600 p-3\">\n    <ng-content select=\"[card-content]\"></ng-content>\n  </div>\n}\n<ng-content select=\"[card-content-bottom]\"></ng-content>\n<div class=\"bg-gray-50 dark:bg-gray-700 p-3 grow\" [class.rounded-b-lg]=\"!onDetailPage() && !tableView()\" [class.rounded-r-lg]=\"!onDetailPage() && tableView()\">\n  <ng-content select=\"[card-lines]\"></ng-content>\n</div>\n</button>" }]
+            args: [{ selector: 'spx-card', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<button type=\"button\"\r\nclass=\"block w-full text-left rounded font-body items-stretch\"\r\n[class.flex]=\"tableView()\"\r\n[class.cursor-pointer]=\"clickable()\"\r\n[class.cursor-not-allowed]=\"!clickable()\"\r\n[class.focus:ring-2]=\"clickable()\"\r\n[class.focus:ring-offset-2]=\"clickable()\"\r\n[class.focus:ring-blue-500]=\"clickable()\"\r\n(click)=\"onClick()\"\r\n[tabIndex]=\"clickable() ? 0 : -1\">\r\n<div class=\"text-gray-900 opacity-90\" [class.w-96]=\"tableView()\">\r\n  <ng-content select=\"[card-header]\"></ng-content>\r\n</div>\r\n<ng-content select=\"[card-content-top]\"></ng-content>\r\n@if (hasContent()) {\r\n  <div class=\"bg-white dark:bg-gray-600 p-3\">\r\n    <ng-content select=\"[card-content]\"></ng-content>\r\n  </div>\r\n}\r\n<ng-content select=\"[card-content-bottom]\"></ng-content>\r\n<div class=\"bg-gray-50 dark:bg-gray-700 p-3 grow\" [class.rounded-b-lg]=\"!onDetailPage() && !tableView()\" [class.rounded-r-lg]=\"!onDetailPage() && tableView()\">\r\n  <ng-content select=\"[card-lines]\"></ng-content>\r\n</div>\r\n</button>" }]
         }], ctorParameters: () => [] });
 
 class SpxCardItemComponent {
@@ -39,29 +38,29 @@ class SpxCardItemComponent {
         this.spxIconSeverity = input();
         this.SpxSeverityEnum = SpxSeverityEnum;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: SpxCardItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.11", type: SpxCardItemComponent, isStandalone: true, selector: "spx-card-item", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, iconOnly: { classPropertyName: "iconOnly", publicName: "iconOnly", isSignal: true, isRequired: false, transformFunction: null }, spxLabel: { classPropertyName: "spxLabel", publicName: "spxLabel", isSignal: true, isRequired: true, transformFunction: null }, spxValue: { classPropertyName: "spxValue", publicName: "spxValue", isSignal: true, isRequired: false, transformFunction: null }, spxSeverity: { classPropertyName: "spxSeverity", publicName: "spxSeverity", isSignal: true, isRequired: false, transformFunction: null }, spxIconSeverity: { classPropertyName: "spxIconSeverity", publicName: "spxIconSeverity", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.h-full": "true" } }, ngImport: i0, template: "<div class='py-2 px-3 rounded h-full'\n      [class.bg-slate-100]=\"!spxSeverity()\"\n      [class.dark:bg-slate-600]=\"!spxSeverity()\"\n      [class.text-black]=\"this.spxSeverity() | isSeverity: SpxSeverityEnum.warning\"\n      [class.text-white]=\"this.spxSeverity() | isSeverity: [SpxSeverityEnum.error, SpxSeverityEnum.success, SpxSeverityEnum.unknown, SpxSeverityEnum.info]\"\n      [class.bg-red-700]=\"this.spxSeverity() | isSeverity: SpxSeverityEnum.error\"\n      [class.bg-green-700]=\"this.spxSeverity() | isSeverity: SpxSeverityEnum.success\"\n      [class.bg-blue-700]=\"this.spxSeverity() | isSeverity: SpxSeverityEnum.info\"\n      [class.bg-gray-400]=\"this.spxSeverity() | isSeverity: SpxSeverityEnum.unknown\"\n      [class.bg-amber-700]=\"this.spxSeverity() | isSeverity: SpxSeverityEnum.warning\">\n      <div class=\"font-small leading-normal\">{{ spxLabel() }}</div>\n      <div class=\"flex gap-4 text-lg leading-normal py-1\">\n        @if (icon()) {\n          <div class=\"font-bold text-center leading-normal max-w-12 min-w-12\" [class.grow]=\"iconOnly()\">\n            <div\n              class=\"px-3 py-1 text-white rounded\"\n              [class.bg-black]=\"!spxIconSeverity()\"\n              [class.bg-red-700]=\"this.spxSeverity() | isSeverity: SpxSeverityEnum.error\"\n              [class.bg-green-700]=\"this.spxSeverity() | isSeverity: SpxSeverityEnum.success\"\n              [class.bg-blue-700]=\"this.spxSeverity() | isSeverity: SpxSeverityEnum.info\"\n              [class.bg-gray-400]=\"this.spxSeverity() | isSeverity: SpxSeverityEnum.unknown\"\n              [class.bg-amber-700]=\"this.spxSeverity() | isSeverity: SpxSeverityEnum.warning\">\n              <fa-icon [icon]=\"icon()!\"></fa-icon>\n            </div>\n          </div>\n        }\n        <div class=\"grow font-bold\">\n          @if (!iconOnly()) {\n            <ng-content></ng-content><div [innerHTML]=\"spxValue()\"></div>\n          }\n        </div>\n      </div>\n    </div>", dependencies: [{ kind: "component", type: FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "mask", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "transform", "a11yRole"] }, { kind: "pipe", type: IsSeverityPipe, name: "isSeverity" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: SpxCardItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.0", type: SpxCardItemComponent, isStandalone: true, selector: "spx-card-item", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, iconOnly: { classPropertyName: "iconOnly", publicName: "iconOnly", isSignal: true, isRequired: false, transformFunction: null }, spxLabel: { classPropertyName: "spxLabel", publicName: "spxLabel", isSignal: true, isRequired: true, transformFunction: null }, spxValue: { classPropertyName: "spxValue", publicName: "spxValue", isSignal: true, isRequired: false, transformFunction: null }, spxSeverity: { classPropertyName: "spxSeverity", publicName: "spxSeverity", isSignal: true, isRequired: false, transformFunction: null }, spxIconSeverity: { classPropertyName: "spxIconSeverity", publicName: "spxIconSeverity", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.h-full": "true" } }, ngImport: i0, template: "<div class='py-2 px-3 rounded h-full'\r\n      [class.bg-slate-100]=\"!spxSeverity()\"\r\n      [class.dark:bg-slate-600]=\"!spxSeverity()\"\r\n      [class.text-black]=\"this.spxSeverity() | isSeverity: SpxSeverityEnum.warning\"\r\n      [class.text-white]=\"this.spxSeverity() | isSeverity: [SpxSeverityEnum.error, SpxSeverityEnum.success, SpxSeverityEnum.unknown, SpxSeverityEnum.info]\"\r\n      [class.bg-red-700]=\"this.spxSeverity() | isSeverity: SpxSeverityEnum.error\"\r\n      [class.bg-green-700]=\"this.spxSeverity() | isSeverity: SpxSeverityEnum.success\"\r\n      [class.bg-blue-700]=\"this.spxSeverity() | isSeverity: SpxSeverityEnum.info\"\r\n      [class.bg-gray-400]=\"this.spxSeverity() | isSeverity: SpxSeverityEnum.unknown\"\r\n      [class.bg-amber-700]=\"this.spxSeverity() | isSeverity: SpxSeverityEnum.warning\">\r\n      <div class=\"font-small leading-normal\">{{ spxLabel() }}</div>\r\n      <div class=\"flex gap-4 text-lg leading-normal py-1\">\r\n        @if (icon()) {\r\n          <div class=\"font-bold text-center leading-normal max-w-12 min-w-12\" [class.grow]=\"iconOnly()\">\r\n            <div\r\n              class=\"px-3 py-1 text-white rounded\"\r\n              [class.bg-black]=\"!spxIconSeverity()\"\r\n              [class.bg-red-700]=\"this.spxSeverity() | isSeverity: SpxSeverityEnum.error\"\r\n              [class.bg-green-700]=\"this.spxSeverity() | isSeverity: SpxSeverityEnum.success\"\r\n              [class.bg-blue-700]=\"this.spxSeverity() | isSeverity: SpxSeverityEnum.info\"\r\n              [class.bg-gray-400]=\"this.spxSeverity() | isSeverity: SpxSeverityEnum.unknown\"\r\n              [class.bg-amber-700]=\"this.spxSeverity() | isSeverity: SpxSeverityEnum.warning\">\r\n              <fa-icon [icon]=\"icon()!\"></fa-icon>\r\n            </div>\r\n          </div>\r\n        }\r\n        <div class=\"grow font-bold\">\r\n          @if (!iconOnly()) {\r\n            <ng-content></ng-content><div [innerHTML]=\"spxValue()\"></div>\r\n          }\r\n        </div>\r\n      </div>\r\n    </div>", dependencies: [{ kind: "component", type: 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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: SpxCardItemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: SpxCardItemComponent, decorators: [{
             type: Component,
             args: [{ selector: 'spx-card-item', imports: [
                         FaIconComponent,
                         IsSeverityPipe
                     ], changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         '[class.h-full]': 'true',
-                    }, template: "<div class='py-2 px-3 rounded h-full'\n      [class.bg-slate-100]=\"!spxSeverity()\"\n      [class.dark:bg-slate-600]=\"!spxSeverity()\"\n      [class.text-black]=\"this.spxSeverity() | isSeverity: SpxSeverityEnum.warning\"\n      [class.text-white]=\"this.spxSeverity() | isSeverity: [SpxSeverityEnum.error, SpxSeverityEnum.success, SpxSeverityEnum.unknown, SpxSeverityEnum.info]\"\n      [class.bg-red-700]=\"this.spxSeverity() | isSeverity: SpxSeverityEnum.error\"\n      [class.bg-green-700]=\"this.spxSeverity() | isSeverity: SpxSeverityEnum.success\"\n      [class.bg-blue-700]=\"this.spxSeverity() | isSeverity: SpxSeverityEnum.info\"\n      [class.bg-gray-400]=\"this.spxSeverity() | isSeverity: SpxSeverityEnum.unknown\"\n      [class.bg-amber-700]=\"this.spxSeverity() | isSeverity: SpxSeverityEnum.warning\">\n      <div class=\"font-small leading-normal\">{{ spxLabel() }}</div>\n      <div class=\"flex gap-4 text-lg leading-normal py-1\">\n        @if (icon()) {\n          <div class=\"font-bold text-center leading-normal max-w-12 min-w-12\" [class.grow]=\"iconOnly()\">\n            <div\n              class=\"px-3 py-1 text-white rounded\"\n              [class.bg-black]=\"!spxIconSeverity()\"\n              [class.bg-red-700]=\"this.spxSeverity() | isSeverity: SpxSeverityEnum.error\"\n              [class.bg-green-700]=\"this.spxSeverity() | isSeverity: SpxSeverityEnum.success\"\n              [class.bg-blue-700]=\"this.spxSeverity() | isSeverity: SpxSeverityEnum.info\"\n              [class.bg-gray-400]=\"this.spxSeverity() | isSeverity: SpxSeverityEnum.unknown\"\n              [class.bg-amber-700]=\"this.spxSeverity() | isSeverity: SpxSeverityEnum.warning\">\n              <fa-icon [icon]=\"icon()!\"></fa-icon>\n            </div>\n          </div>\n        }\n        <div class=\"grow font-bold\">\n          @if (!iconOnly()) {\n            <ng-content></ng-content><div [innerHTML]=\"spxValue()\"></div>\n          }\n        </div>\n      </div>\n    </div>" }]
+                    }, template: "<div class='py-2 px-3 rounded h-full'\r\n      [class.bg-slate-100]=\"!spxSeverity()\"\r\n      [class.dark:bg-slate-600]=\"!spxSeverity()\"\r\n      [class.text-black]=\"this.spxSeverity() | isSeverity: SpxSeverityEnum.warning\"\r\n      [class.text-white]=\"this.spxSeverity() | isSeverity: [SpxSeverityEnum.error, SpxSeverityEnum.success, SpxSeverityEnum.unknown, SpxSeverityEnum.info]\"\r\n      [class.bg-red-700]=\"this.spxSeverity() | isSeverity: SpxSeverityEnum.error\"\r\n      [class.bg-green-700]=\"this.spxSeverity() | isSeverity: SpxSeverityEnum.success\"\r\n      [class.bg-blue-700]=\"this.spxSeverity() | isSeverity: SpxSeverityEnum.info\"\r\n      [class.bg-gray-400]=\"this.spxSeverity() | isSeverity: SpxSeverityEnum.unknown\"\r\n      [class.bg-amber-700]=\"this.spxSeverity() | isSeverity: SpxSeverityEnum.warning\">\r\n      <div class=\"font-small leading-normal\">{{ spxLabel() }}</div>\r\n      <div class=\"flex gap-4 text-lg leading-normal py-1\">\r\n        @if (icon()) {\r\n          <div class=\"font-bold text-center leading-normal max-w-12 min-w-12\" [class.grow]=\"iconOnly()\">\r\n            <div\r\n              class=\"px-3 py-1 text-white rounded\"\r\n              [class.bg-black]=\"!spxIconSeverity()\"\r\n              [class.bg-red-700]=\"this.spxSeverity() | isSeverity: SpxSeverityEnum.error\"\r\n              [class.bg-green-700]=\"this.spxSeverity() | isSeverity: SpxSeverityEnum.success\"\r\n              [class.bg-blue-700]=\"this.spxSeverity() | isSeverity: SpxSeverityEnum.info\"\r\n              [class.bg-gray-400]=\"this.spxSeverity() | isSeverity: SpxSeverityEnum.unknown\"\r\n              [class.bg-amber-700]=\"this.spxSeverity() | isSeverity: SpxSeverityEnum.warning\">\r\n              <fa-icon [icon]=\"icon()!\"></fa-icon>\r\n            </div>\r\n          </div>\r\n        }\r\n        <div class=\"grow font-bold\">\r\n          @if (!iconOnly()) {\r\n            <ng-content></ng-content><div [innerHTML]=\"spxValue()\"></div>\r\n          }\r\n        </div>\r\n      </div>\r\n    </div>" }]
         }] });
 
 class SpxCardGridComponent {
     constructor() {
         this.minWidth2Columns = input(460);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: SpxCardGridComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.11", type: SpxCardGridComponent, isStandalone: true, selector: "spx-card-grid", inputs: { minWidth2Columns: { classPropertyName: "minWidth2Columns", publicName: "minWidth2Columns", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class='grid gap-3 items-stretch'\n    [class.min-[300px]:grid-cols-2]=\"minWidth2Columns() == 300\"\n    [class.min-[320px]:grid-cols-2]=\"minWidth2Columns() == 320\"\n    [class.min-[340px]:grid-cols-2]=\"minWidth2Columns() == 340\"\n    [class.min-[360px]:grid-cols-2]=\"minWidth2Columns() == 360\"\n    [class.min-[380px]:grid-cols-2]=\"minWidth2Columns() == 380\"\n    [class.min-[400px]:grid-cols-2]=\"minWidth2Columns() == 400\"\n    [class.min-[420px]:grid-cols-2]=\"minWidth2Columns() == 420\"\n    [class.min-[440px]:grid-cols-2]=\"minWidth2Columns() == 440\"\n    [class.min-[460px]:grid-cols-2]=\"minWidth2Columns() == 460\">\n      <ng-content></ng-content>\n  </div>", changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: SpxCardGridComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.0.0", type: SpxCardGridComponent, isStandalone: true, selector: "spx-card-grid", inputs: { minWidth2Columns: { classPropertyName: "minWidth2Columns", publicName: "minWidth2Columns", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class='grid gap-3 items-stretch'\r\n    [class.min-[300px]:grid-cols-2]=\"minWidth2Columns() == 300\"\r\n    [class.min-[320px]:grid-cols-2]=\"minWidth2Columns() == 320\"\r\n    [class.min-[340px]:grid-cols-2]=\"minWidth2Columns() == 340\"\r\n    [class.min-[360px]:grid-cols-2]=\"minWidth2Columns() == 360\"\r\n    [class.min-[380px]:grid-cols-2]=\"minWidth2Columns() == 380\"\r\n    [class.min-[400px]:grid-cols-2]=\"minWidth2Columns() == 400\"\r\n    [class.min-[420px]:grid-cols-2]=\"minWidth2Columns() == 420\"\r\n    [class.min-[440px]:grid-cols-2]=\"minWidth2Columns() == 440\"\r\n    [class.min-[460px]:grid-cols-2]=\"minWidth2Columns() == 460\">\r\n      <ng-content></ng-content>\r\n  </div>", changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: SpxCardGridComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: SpxCardGridComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'spx-card-grid', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class='grid gap-3 items-stretch'\n    [class.min-[300px]:grid-cols-2]=\"minWidth2Columns() == 300\"\n    [class.min-[320px]:grid-cols-2]=\"minWidth2Columns() == 320\"\n    [class.min-[340px]:grid-cols-2]=\"minWidth2Columns() == 340\"\n    [class.min-[360px]:grid-cols-2]=\"minWidth2Columns() == 360\"\n    [class.min-[380px]:grid-cols-2]=\"minWidth2Columns() == 380\"\n    [class.min-[400px]:grid-cols-2]=\"minWidth2Columns() == 400\"\n    [class.min-[420px]:grid-cols-2]=\"minWidth2Columns() == 420\"\n    [class.min-[440px]:grid-cols-2]=\"minWidth2Columns() == 440\"\n    [class.min-[460px]:grid-cols-2]=\"minWidth2Columns() == 460\">\n      <ng-content></ng-content>\n  </div>" }]
+            args: [{ selector: 'spx-card-grid', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class='grid gap-3 items-stretch'\r\n    [class.min-[300px]:grid-cols-2]=\"minWidth2Columns() == 300\"\r\n    [class.min-[320px]:grid-cols-2]=\"minWidth2Columns() == 320\"\r\n    [class.min-[340px]:grid-cols-2]=\"minWidth2Columns() == 340\"\r\n    [class.min-[360px]:grid-cols-2]=\"minWidth2Columns() == 360\"\r\n    [class.min-[380px]:grid-cols-2]=\"minWidth2Columns() == 380\"\r\n    [class.min-[400px]:grid-cols-2]=\"minWidth2Columns() == 400\"\r\n    [class.min-[420px]:grid-cols-2]=\"minWidth2Columns() == 420\"\r\n    [class.min-[440px]:grid-cols-2]=\"minWidth2Columns() == 440\"\r\n    [class.min-[460px]:grid-cols-2]=\"minWidth2Columns() == 460\">\r\n      <ng-content></ng-content>\r\n  </div>" }]
         }] });
 
 class SpxCardLineComponent {
@@ -79,12 +78,12 @@ class SpxCardLineComponent {
     displayValue(val) {
         return val || val === 0 ? val : '—';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: SpxCardLineComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.11", type: SpxCardLineComponent, isStandalone: true, selector: "spx-card-line", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, showPositiveOrNegative: { classPropertyName: "showPositiveOrNegative", publicName: "showPositiveOrNegative", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, secondValue: { classPropertyName: "secondValue", publicName: "secondValue", isSignal: true, isRequired: false, transformFunction: null }, showProgress: { classPropertyName: "showProgress", publicName: "showProgress", isSignal: true, isRequired: false, transformFunction: null }, unit: { classPropertyName: "unit", publicName: "unit", isSignal: true, isRequired: false, transformFunction: null }, newOrderScreen: { classPropertyName: "newOrderScreen", publicName: "newOrderScreen", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, ngImport: i0, template: "<div class=\"items-center\" [class.flex]=\"!newOrderScreen()\">\n  <div class=\"block w-24 text-gray-600 dark:text-gray-200 text-xs mb-1\" [class.pt-1]=\"!newOrderScreen()\" [innerHTML]=\"text()\"></div>\n  <div class=\"flex\">\n    @if (icon()) {\n      <fa-icon [icon]=\"icon()!\" class=\"text-lg mr-3 w-6 text-center\"></fa-icon>\n    }\n    @if (showPositiveOrNegative() && numericValue() < 0) {\n      <div class=\"rounded-full w-4 h-4 mr-2 bg-sky-600\">&nbsp;</div>\n    }\n    @if (!showProgress()) {\n      <span class=\"block font-medium grow whitespace-pre-line leading-5\">\n        <span [innerHTML]=\"displayValue(value())\"></span>\n        <ng-content></ng-content>\n        @if (unit()) {\n          <span> {{ unit() }}</span>\n        }\n        @if (!unit() && secondValue() !== null && secondValue() !== undefined) {\n          / {{ displayValue(secondValue()) }}\n        }\n      </span>\n    }\n  </div>\n  @if (showProgress()) {\n    <div class=\"block font-medium grow whitespace-pre-line text-gray-600 dark:text-gray-200\">\n      <div class=\"flex\">\n        <div class=\"flex grow gap-2\">\n          <div class=\"bg-gray-200 my-0.5 h-5 w-full rounded\">\n            <div class=\"bg-teal-600 h-5 rounded\" [style.width]=\"((+value()) / (secondValue() ? +secondValue()! : 0)) * 100 + '%'\"></div>\n          </div>\n        </div>\n        <div class=\"flex text-left pl-3 gap-2\">\n          <div class=\"block w-16 text-right\">{{ value() }} / {{ secondValue() }}</div>\n        </div>\n      </div>\n    </div>\n  }\n</div>", dependencies: [{ kind: "ngmodule", type: FontAwesomeModule }, { kind: "component", type: i1.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "mask", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "transform", "a11yRole"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: SpxCardLineComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.0", type: SpxCardLineComponent, isStandalone: true, selector: "spx-card-line", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, showPositiveOrNegative: { classPropertyName: "showPositiveOrNegative", publicName: "showPositiveOrNegative", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, secondValue: { classPropertyName: "secondValue", publicName: "secondValue", isSignal: true, isRequired: false, transformFunction: null }, showProgress: { classPropertyName: "showProgress", publicName: "showProgress", isSignal: true, isRequired: false, transformFunction: null }, unit: { classPropertyName: "unit", publicName: "unit", isSignal: true, isRequired: false, transformFunction: null }, newOrderScreen: { classPropertyName: "newOrderScreen", publicName: "newOrderScreen", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, ngImport: i0, template: "<div class=\"items-center\" [class.flex]=\"!newOrderScreen()\">\r\n  <div class=\"block w-24 text-gray-600 dark:text-gray-200 text-xs mb-1\" [class.pt-1]=\"!newOrderScreen()\" [innerHTML]=\"text()\"></div>\r\n  <div class=\"flex\">\r\n    @if (icon()) {\r\n      <fa-icon [icon]=\"icon()!\" class=\"text-lg mr-3 w-6 text-center\"></fa-icon>\r\n    }\r\n    @if (showPositiveOrNegative() && numericValue() < 0) {\r\n      <div class=\"rounded-full w-4 h-4 mr-2 bg-sky-600\">&nbsp;</div>\r\n    }\r\n    @if (!showProgress()) {\r\n      <span class=\"block font-medium grow whitespace-pre-line leading-5\">\r\n        <span [innerHTML]=\"displayValue(value())\"></span>\r\n        <ng-content></ng-content>\r\n        @if (unit()) {\r\n          <span> {{ unit() }}</span>\r\n        }\r\n        @if (!unit() && secondValue() !== null && secondValue() !== undefined) {\r\n          / {{ displayValue(secondValue()) }}\r\n        }\r\n      </span>\r\n    }\r\n  </div>\r\n  @if (showProgress()) {\r\n    <div class=\"block font-medium grow whitespace-pre-line text-gray-600 dark:text-gray-200\">\r\n      <div class=\"flex\">\r\n        <div class=\"flex grow gap-2\">\r\n          <div class=\"bg-gray-200 my-0.5 h-5 w-full rounded\">\r\n            <div class=\"bg-teal-600 h-5 rounded\" [style.width]=\"((+value()) / (secondValue() ? +secondValue()! : 0)) * 100 + '%'\"></div>\r\n          </div>\r\n        </div>\r\n        <div class=\"flex text-left pl-3 gap-2\">\r\n          <div class=\"block w-16 text-right\">{{ value() }} / {{ secondValue() }}</div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  }\r\n</div>", dependencies: [{ kind: "component", type: 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: SpxCardLineComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: SpxCardLineComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'spx-card-line', imports: [FontAwesomeModule], changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, template: "<div class=\"items-center\" [class.flex]=\"!newOrderScreen()\">\n  <div class=\"block w-24 text-gray-600 dark:text-gray-200 text-xs mb-1\" [class.pt-1]=\"!newOrderScreen()\" [innerHTML]=\"text()\"></div>\n  <div class=\"flex\">\n    @if (icon()) {\n      <fa-icon [icon]=\"icon()!\" class=\"text-lg mr-3 w-6 text-center\"></fa-icon>\n    }\n    @if (showPositiveOrNegative() && numericValue() < 0) {\n      <div class=\"rounded-full w-4 h-4 mr-2 bg-sky-600\">&nbsp;</div>\n    }\n    @if (!showProgress()) {\n      <span class=\"block font-medium grow whitespace-pre-line leading-5\">\n        <span [innerHTML]=\"displayValue(value())\"></span>\n        <ng-content></ng-content>\n        @if (unit()) {\n          <span> {{ unit() }}</span>\n        }\n        @if (!unit() && secondValue() !== null && secondValue() !== undefined) {\n          / {{ displayValue(secondValue()) }}\n        }\n      </span>\n    }\n  </div>\n  @if (showProgress()) {\n    <div class=\"block font-medium grow whitespace-pre-line text-gray-600 dark:text-gray-200\">\n      <div class=\"flex\">\n        <div class=\"flex grow gap-2\">\n          <div class=\"bg-gray-200 my-0.5 h-5 w-full rounded\">\n            <div class=\"bg-teal-600 h-5 rounded\" [style.width]=\"((+value()) / (secondValue() ? +secondValue()! : 0)) * 100 + '%'\"></div>\n          </div>\n        </div>\n        <div class=\"flex text-left pl-3 gap-2\">\n          <div class=\"block w-16 text-right\">{{ value() }} / {{ secondValue() }}</div>\n        </div>\n      </div>\n    </div>\n  }\n</div>" }]
+            args: [{ selector: 'spx-card-line', imports: [FaIconComponent], changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, template: "<div class=\"items-center\" [class.flex]=\"!newOrderScreen()\">\r\n  <div class=\"block w-24 text-gray-600 dark:text-gray-200 text-xs mb-1\" [class.pt-1]=\"!newOrderScreen()\" [innerHTML]=\"text()\"></div>\r\n  <div class=\"flex\">\r\n    @if (icon()) {\r\n      <fa-icon [icon]=\"icon()!\" class=\"text-lg mr-3 w-6 text-center\"></fa-icon>\r\n    }\r\n    @if (showPositiveOrNegative() && numericValue() < 0) {\r\n      <div class=\"rounded-full w-4 h-4 mr-2 bg-sky-600\">&nbsp;</div>\r\n    }\r\n    @if (!showProgress()) {\r\n      <span class=\"block font-medium grow whitespace-pre-line leading-5\">\r\n        <span [innerHTML]=\"displayValue(value())\"></span>\r\n        <ng-content></ng-content>\r\n        @if (unit()) {\r\n          <span> {{ unit() }}</span>\r\n        }\r\n        @if (!unit() && secondValue() !== null && secondValue() !== undefined) {\r\n          / {{ displayValue(secondValue()) }}\r\n        }\r\n      </span>\r\n    }\r\n  </div>\r\n  @if (showProgress()) {\r\n    <div class=\"block font-medium grow whitespace-pre-line text-gray-600 dark:text-gray-200\">\r\n      <div class=\"flex\">\r\n        <div class=\"flex grow gap-2\">\r\n          <div class=\"bg-gray-200 my-0.5 h-5 w-full rounded\">\r\n            <div class=\"bg-teal-600 h-5 rounded\" [style.width]=\"((+value()) / (secondValue() ? +secondValue()! : 0)) * 100 + '%'\"></div>\r\n          </div>\r\n        </div>\r\n        <div class=\"flex text-left pl-3 gap-2\">\r\n          <div class=\"block w-16 text-right\">{{ value() }} / {{ secondValue() }}</div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  }\r\n</div>" }]
         }] });
 
 /**

package/fesm2022/softpak-components-spx-card.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"softpak-components-spx-card.mjs","sources":["../../../../projects/softpak/components/spx-card/spx-card.component.ts","../../../../projects/softpak/components/spx-card/spx-card.component.html","../../../../projects/softpak/components/spx-card/spx-card-item/spx-card-item.component.ts","../../../../projects/softpak/components/spx-card/spx-card-item/spx-card-item.component.html","../../../../projects/softpak/components/spx-card/spx-card-grid/spx-card-grid.component.ts","../../../../projects/softpak/components/spx-card/spx-card-grid/spx-card-grid.component.html","../../../../projects/softpak/components/spx-card/spx-card-line/spx-card-line.component.ts","../../../../projects/softpak/components/spx-card/spx-card-line/spx-card-line.component.html","../../../../projects/softpak/components/spx-card/softpak-components-spx-card.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, input, output } from '@angular/core';\n\n@Component({\n    selector: 'spx-card',\n    templateUrl: './spx-card.component.html',\n    standalone: true,\n    changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class SpxCardComponent {\n  readonly clickable = input(true);\n  readonly hasContent = input(true);\n  readonly onDetailPage = input(false);\n  readonly text = input<string>();\n  readonly unit = input<string>();\n  readonly tableView = input(false);\n  clicked = output();\n\n  constructor() { }\n\n  displayValue(val: string | number): string | number {\n    return val || (val === 0) ? val : '—';\n  }\n\n  onClick(): void {\n    this.clicked.emit();\n  }\n}\n","<button type=\"button\"\nclass=\"block w-full text-left rounded font-body items-stretch\"\n[class.flex]=\"tableView()\"\n[class.cursor-pointer]=\"clickable()\"\n[class.cursor-not-allowed]=\"!clickable()\"\n[class.focus:ring-2]=\"clickable()\"\n[class.focus:ring-offset-2]=\"clickable()\"\n[class.focus:ring-blue-500]=\"clickable()\"\n(click)=\"onClick()\"\n[tabIndex]=\"clickable() ? 0 : -1\">\n<div class=\"text-gray-900 opacity-90\" [class.w-96]=\"tableView()\">\n  <ng-content select=\"[card-header]\"></ng-content>\n</div>\n<ng-content select=\"[card-content-top]\"></ng-content>\n@if (hasContent()) {\n  <div class=\"bg-white dark:bg-gray-600 p-3\">\n    <ng-content select=\"[card-content]\"></ng-content>\n  </div>\n}\n<ng-content select=\"[card-content-bottom]\"></ng-content>\n<div class=\"bg-gray-50 dark:bg-gray-700 p-3 grow\" [class.rounded-b-lg]=\"!onDetailPage() && !tableView()\" [class.rounded-r-lg]=\"!onDetailPage() && tableView()\">\n  <ng-content select=\"[card-lines]\"></ng-content>\n</div>\n</button>","\nimport { ChangeDetectionStrategy, Component, input } from '@angular/core';\nimport { FaIconComponent } from '@fortawesome/angular-fontawesome';\nimport { IconProp } from '@fortawesome/angular-fontawesome/types';\nimport { SpxSeverityEnum } from '@softpak/components/spx-helpers';\nimport { IsSeverityPipe } from '@softpak/components/spx-pipes';\n\n@Component({\n  selector: 'spx-card-item',\n  imports: [\n    FaIconComponent,\n    IsSeverityPipe\n  ],\n  templateUrl: './spx-card-item.component.html',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    '[class.h-full]': 'true',\n  },\n})\nexport class SpxCardItemComponent {\n  readonly icon = input<IconProp>();\n  readonly iconOnly = input(false);\n  readonly spxLabel = input.required<string>();\n  readonly spxValue = input<string>();\n  readonly spxSeverity = input<SpxSeverityEnum>();\n  readonly spxIconSeverity = input<SpxSeverityEnum>();\n  SpxSeverityEnum = SpxSeverityEnum;\n}\n","<div class='py-2 px-3 rounded h-full'\n      [class.bg-slate-100]=\"!spxSeverity()\"\n      [class.dark:bg-slate-600]=\"!spxSeverity()\"\n      [class.text-black]=\"this.spxSeverity() | isSeverity: SpxSeverityEnum.warning\"\n      [class.text-white]=\"this.spxSeverity() | isSeverity: [SpxSeverityEnum.error, SpxSeverityEnum.success, SpxSeverityEnum.unknown, SpxSeverityEnum.info]\"\n      [class.bg-red-700]=\"this.spxSeverity() | isSeverity: SpxSeverityEnum.error\"\n      [class.bg-green-700]=\"this.spxSeverity() | isSeverity: SpxSeverityEnum.success\"\n      [class.bg-blue-700]=\"this.spxSeverity() | isSeverity: SpxSeverityEnum.info\"\n      [class.bg-gray-400]=\"this.spxSeverity() | isSeverity: SpxSeverityEnum.unknown\"\n      [class.bg-amber-700]=\"this.spxSeverity() | isSeverity: SpxSeverityEnum.warning\">\n      <div class=\"font-small leading-normal\">{{ spxLabel() }}</div>\n      <div class=\"flex gap-4 text-lg leading-normal py-1\">\n        @if (icon()) {\n          <div class=\"font-bold text-center leading-normal max-w-12 min-w-12\" [class.grow]=\"iconOnly()\">\n            <div\n              class=\"px-3 py-1 text-white rounded\"\n              [class.bg-black]=\"!spxIconSeverity()\"\n              [class.bg-red-700]=\"this.spxSeverity() | isSeverity: SpxSeverityEnum.error\"\n              [class.bg-green-700]=\"this.spxSeverity() | isSeverity: SpxSeverityEnum.success\"\n              [class.bg-blue-700]=\"this.spxSeverity() | isSeverity: SpxSeverityEnum.info\"\n              [class.bg-gray-400]=\"this.spxSeverity() | isSeverity: SpxSeverityEnum.unknown\"\n              [class.bg-amber-700]=\"this.spxSeverity() | isSeverity: SpxSeverityEnum.warning\">\n              <fa-icon [icon]=\"icon()!\"></fa-icon>\n            </div>\n          </div>\n        }\n        <div class=\"grow font-bold\">\n          @if (!iconOnly()) {\n            <ng-content></ng-content><div [innerHTML]=\"spxValue()\"></div>\n          }\n        </div>\n      </div>\n    </div>","import { ChangeDetectionStrategy, Component, input } from '@angular/core';\n\n@Component({\n  selector: 'spx-card-grid',\n  standalone: true,\n  templateUrl: './spx-card-grid.component.html',\n  changeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class SpxCardGridComponent {\n  readonly minWidth2Columns = input<(300 | 320 | 340 | 360 | 380 | 400 | 420 | 440 | 460) | undefined>(460);\n}\n","<div class='grid gap-3 items-stretch'\n    [class.min-[300px]:grid-cols-2]=\"minWidth2Columns() == 300\"\n    [class.min-[320px]:grid-cols-2]=\"minWidth2Columns() == 320\"\n    [class.min-[340px]:grid-cols-2]=\"minWidth2Columns() == 340\"\n    [class.min-[360px]:grid-cols-2]=\"minWidth2Columns() == 360\"\n    [class.min-[380px]:grid-cols-2]=\"minWidth2Columns() == 380\"\n    [class.min-[400px]:grid-cols-2]=\"minWidth2Columns() == 400\"\n    [class.min-[420px]:grid-cols-2]=\"minWidth2Columns() == 420\"\n    [class.min-[440px]:grid-cols-2]=\"minWidth2Columns() == 440\"\n    [class.min-[460px]:grid-cols-2]=\"minWidth2Columns() == 460\">\n      <ng-content></ng-content>\n  </div>","import { ChangeDetectionStrategy, Component, computed, input, model } from '@angular/core';\nimport { FontAwesomeModule } from '@fortawesome/angular-fontawesome';\nimport { IconProp } from '@fortawesome/angular-fontawesome/types';\n\n@Component({\n    selector: 'spx-card-line',\n    imports: [FontAwesomeModule],\n    templateUrl: './spx-card-line.component.html',\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    standalone: true,\n})\nexport class SpxCardLineComponent {\n  readonly icon = input<IconProp>();\n  readonly showPositiveOrNegative = input(false);\n  readonly text = input<string | unknown>();\n  readonly value = model.required<string | number>();\n  readonly secondValue = input<string | number>();\n  readonly showProgress = input<boolean>();\n  readonly unit = input<string>();\n  readonly newOrderScreen = input(false);\n\n  numericValue = computed(() => {return this.value() as number});\n\n  public displayValue(val: string | number | unknown): string | number | unknown {\n    return val || val === 0 ? val : '—';\n  }\n}\n","<div class=\"items-center\" [class.flex]=\"!newOrderScreen()\">\n  <div class=\"block w-24 text-gray-600 dark:text-gray-200 text-xs mb-1\" [class.pt-1]=\"!newOrderScreen()\" [innerHTML]=\"text()\"></div>\n  <div class=\"flex\">\n    @if (icon()) {\n      <fa-icon [icon]=\"icon()!\" class=\"text-lg mr-3 w-6 text-center\"></fa-icon>\n    }\n    @if (showPositiveOrNegative() && numericValue() < 0) {\n      <div class=\"rounded-full w-4 h-4 mr-2 bg-sky-600\">&nbsp;</div>\n    }\n    @if (!showProgress()) {\n      <span class=\"block font-medium grow whitespace-pre-line leading-5\">\n        <span [innerHTML]=\"displayValue(value())\"></span>\n        <ng-content></ng-content>\n        @if (unit()) {\n          <span> {{ unit() }}</span>\n        }\n        @if (!unit() && secondValue() !== null && secondValue() !== undefined) {\n          / {{ displayValue(secondValue()) }}\n        }\n      </span>\n    }\n  </div>\n  @if (showProgress()) {\n    <div class=\"block font-medium grow whitespace-pre-line text-gray-600 dark:text-gray-200\">\n      <div class=\"flex\">\n        <div class=\"flex grow gap-2\">\n          <div class=\"bg-gray-200 my-0.5 h-5 w-full rounded\">\n            <div class=\"bg-teal-600 h-5 rounded\" [style.width]=\"((+value()) / (secondValue() ? +secondValue()! : 0)) * 100 + '%'\"></div>\n          </div>\n        </div>\n        <div class=\"flex text-left pl-3 gap-2\">\n          <div class=\"block w-16 text-right\">{{ value() }} / {{ secondValue() }}</div>\n        </div>\n      </div>\n    </div>\n  }\n</div>","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"softpak-components-spx-card.mjs","sources":["../../../../projects/softpak/components/spx-card/spx-card.component.ts","../../../../projects/softpak/components/spx-card/spx-card.component.html","../../../../projects/softpak/components/spx-card/spx-card-item/spx-card-item.component.ts","../../../../projects/softpak/components/spx-card/spx-card-item/spx-card-item.component.html","../../../../projects/softpak/components/spx-card/spx-card-grid/spx-card-grid.component.ts","../../../../projects/softpak/components/spx-card/spx-card-grid/spx-card-grid.component.html","../../../../projects/softpak/components/spx-card/spx-card-line/spx-card-line.component.ts","../../../../projects/softpak/components/spx-card/spx-card-line/spx-card-line.component.html","../../../../projects/softpak/components/spx-card/softpak-components-spx-card.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, input, output } from '@angular/core';\r\n\r\n@Component({\r\n    selector: 'spx-card',\r\n    templateUrl: './spx-card.component.html',\r\n    standalone: true,\r\n    changeDetection: ChangeDetectionStrategy.OnPush,\r\n})\r\nexport class SpxCardComponent {\r\n  readonly clickable = input(true);\r\n  readonly hasContent = input(true);\r\n  readonly onDetailPage = input(false);\r\n  readonly text = input<string>();\r\n  readonly unit = input<string>();\r\n  readonly tableView = input(false);\r\n  clicked = output();\r\n\r\n  constructor() { }\r\n\r\n  displayValue(val: string | number): string | number {\r\n    return val || (val === 0) ? val : '—';\r\n  }\r\n\r\n  onClick(): void {\r\n    this.clicked.emit();\r\n  }\r\n}\r\n","<button type=\"button\"\r\nclass=\"block w-full text-left rounded font-body items-stretch\"\r\n[class.flex]=\"tableView()\"\r\n[class.cursor-pointer]=\"clickable()\"\r\n[class.cursor-not-allowed]=\"!clickable()\"\r\n[class.focus:ring-2]=\"clickable()\"\r\n[class.focus:ring-offset-2]=\"clickable()\"\r\n[class.focus:ring-blue-500]=\"clickable()\"\r\n(click)=\"onClick()\"\r\n[tabIndex]=\"clickable() ? 0 : -1\">\r\n<div class=\"text-gray-900 opacity-90\" [class.w-96]=\"tableView()\">\r\n  <ng-content select=\"[card-header]\"></ng-content>\r\n</div>\r\n<ng-content select=\"[card-content-top]\"></ng-content>\r\n@if (hasContent()) {\r\n  <div class=\"bg-white dark:bg-gray-600 p-3\">\r\n    <ng-content select=\"[card-content]\"></ng-content>\r\n  </div>\r\n}\r\n<ng-content select=\"[card-content-bottom]\"></ng-content>\r\n<div class=\"bg-gray-50 dark:bg-gray-700 p-3 grow\" [class.rounded-b-lg]=\"!onDetailPage() && !tableView()\" [class.rounded-r-lg]=\"!onDetailPage() && tableView()\">\r\n  <ng-content select=\"[card-lines]\"></ng-content>\r\n</div>\r\n</button>","\r\nimport { ChangeDetectionStrategy, Component, input } from '@angular/core';\r\nimport { FaIconComponent, IconDefinition } from '@fortawesome/angular-fontawesome';\r\nimport { SpxSeverityEnum } from '@softpak/components/spx-helpers';\r\nimport { IsSeverityPipe } from '@softpak/components/spx-pipes';\r\n\r\n@Component({\r\n  selector: 'spx-card-item',\r\n  imports: [\r\n    FaIconComponent,\r\n    IsSeverityPipe\r\n  ],\r\n  templateUrl: './spx-card-item.component.html',\r\n  changeDetection: ChangeDetectionStrategy.OnPush,\r\n  host: {\r\n    '[class.h-full]': 'true',\r\n  },\r\n})\r\nexport class SpxCardItemComponent {\r\n  readonly icon = input<IconDefinition>();\r\n  readonly iconOnly = input(false);\r\n  readonly spxLabel = input.required<string>();\r\n  readonly spxValue = input<string>();\r\n  readonly spxSeverity = input<SpxSeverityEnum>();\r\n  readonly spxIconSeverity = input<SpxSeverityEnum>();\r\n  SpxSeverityEnum = SpxSeverityEnum;\r\n}\r\n","<div class='py-2 px-3 rounded h-full'\r\n      [class.bg-slate-100]=\"!spxSeverity()\"\r\n      [class.dark:bg-slate-600]=\"!spxSeverity()\"\r\n      [class.text-black]=\"this.spxSeverity() | isSeverity: SpxSeverityEnum.warning\"\r\n      [class.text-white]=\"this.spxSeverity() | isSeverity: [SpxSeverityEnum.error, SpxSeverityEnum.success, SpxSeverityEnum.unknown, SpxSeverityEnum.info]\"\r\n      [class.bg-red-700]=\"this.spxSeverity() | isSeverity: SpxSeverityEnum.error\"\r\n      [class.bg-green-700]=\"this.spxSeverity() | isSeverity: SpxSeverityEnum.success\"\r\n      [class.bg-blue-700]=\"this.spxSeverity() | isSeverity: SpxSeverityEnum.info\"\r\n      [class.bg-gray-400]=\"this.spxSeverity() | isSeverity: SpxSeverityEnum.unknown\"\r\n      [class.bg-amber-700]=\"this.spxSeverity() | isSeverity: SpxSeverityEnum.warning\">\r\n      <div class=\"font-small leading-normal\">{{ spxLabel() }}</div>\r\n      <div class=\"flex gap-4 text-lg leading-normal py-1\">\r\n        @if (icon()) {\r\n          <div class=\"font-bold text-center leading-normal max-w-12 min-w-12\" [class.grow]=\"iconOnly()\">\r\n            <div\r\n              class=\"px-3 py-1 text-white rounded\"\r\n              [class.bg-black]=\"!spxIconSeverity()\"\r\n              [class.bg-red-700]=\"this.spxSeverity() | isSeverity: SpxSeverityEnum.error\"\r\n              [class.bg-green-700]=\"this.spxSeverity() | isSeverity: SpxSeverityEnum.success\"\r\n              [class.bg-blue-700]=\"this.spxSeverity() | isSeverity: SpxSeverityEnum.info\"\r\n              [class.bg-gray-400]=\"this.spxSeverity() | isSeverity: SpxSeverityEnum.unknown\"\r\n              [class.bg-amber-700]=\"this.spxSeverity() | isSeverity: SpxSeverityEnum.warning\">\r\n              <fa-icon [icon]=\"icon()!\"></fa-icon>\r\n            </div>\r\n          </div>\r\n        }\r\n        <div class=\"grow font-bold\">\r\n          @if (!iconOnly()) {\r\n            <ng-content></ng-content><div [innerHTML]=\"spxValue()\"></div>\r\n          }\r\n        </div>\r\n      </div>\r\n    </div>","import { ChangeDetectionStrategy, Component, input } from '@angular/core';\r\n\r\n@Component({\r\n  selector: 'spx-card-grid',\r\n  standalone: true,\r\n  templateUrl: './spx-card-grid.component.html',\r\n  changeDetection: ChangeDetectionStrategy.OnPush\r\n})\r\nexport class SpxCardGridComponent {\r\n  readonly minWidth2Columns = input<(300 | 320 | 340 | 360 | 380 | 400 | 420 | 440 | 460) | undefined>(460);\r\n}\r\n","<div class='grid gap-3 items-stretch'\r\n    [class.min-[300px]:grid-cols-2]=\"minWidth2Columns() == 300\"\r\n    [class.min-[320px]:grid-cols-2]=\"minWidth2Columns() == 320\"\r\n    [class.min-[340px]:grid-cols-2]=\"minWidth2Columns() == 340\"\r\n    [class.min-[360px]:grid-cols-2]=\"minWidth2Columns() == 360\"\r\n    [class.min-[380px]:grid-cols-2]=\"minWidth2Columns() == 380\"\r\n    [class.min-[400px]:grid-cols-2]=\"minWidth2Columns() == 400\"\r\n    [class.min-[420px]:grid-cols-2]=\"minWidth2Columns() == 420\"\r\n    [class.min-[440px]:grid-cols-2]=\"minWidth2Columns() == 440\"\r\n    [class.min-[460px]:grid-cols-2]=\"minWidth2Columns() == 460\">\r\n      <ng-content></ng-content>\r\n  </div>","import { ChangeDetectionStrategy, Component, computed, input, model } from '@angular/core';\r\nimport { FaIconComponent } from '@fortawesome/angular-fontawesome';\r\nimport { IconProp } from '@fortawesome/fontawesome-svg-core';\r\n\r\n@Component({\r\n    selector: 'spx-card-line',\r\n    imports: [FaIconComponent],\r\n    templateUrl: './spx-card-line.component.html',\r\n    changeDetection: ChangeDetectionStrategy.OnPush,\r\n    standalone: true,\r\n})\r\nexport class SpxCardLineComponent {\r\n  readonly icon = input<IconProp>();\r\n  readonly showPositiveOrNegative = input(false);\r\n  readonly text = input<string | unknown>();\r\n  readonly value = model.required<string | number>();\r\n  readonly secondValue = input<string | number>();\r\n  readonly showProgress = input<boolean>();\r\n  readonly unit = input<string>();\r\n  readonly newOrderScreen = input(false);\r\n\r\n  numericValue = computed(() => {return this.value() as number});\r\n\r\n  public displayValue(val: string | number | unknown): string | number | unknown {\r\n    return val || val === 0 ? val : '—';\r\n  }\r\n}\r\n","<div class=\"items-center\" [class.flex]=\"!newOrderScreen()\">\r\n  <div class=\"block w-24 text-gray-600 dark:text-gray-200 text-xs mb-1\" [class.pt-1]=\"!newOrderScreen()\" [innerHTML]=\"text()\"></div>\r\n  <div class=\"flex\">\r\n    @if (icon()) {\r\n      <fa-icon [icon]=\"icon()!\" class=\"text-lg mr-3 w-6 text-center\"></fa-icon>\r\n    }\r\n    @if (showPositiveOrNegative() && numericValue() < 0) {\r\n      <div class=\"rounded-full w-4 h-4 mr-2 bg-sky-600\">&nbsp;</div>\r\n    }\r\n    @if (!showProgress()) {\r\n      <span class=\"block font-medium grow whitespace-pre-line leading-5\">\r\n        <span [innerHTML]=\"displayValue(value())\"></span>\r\n        <ng-content></ng-content>\r\n        @if (unit()) {\r\n          <span> {{ unit() }}</span>\r\n        }\r\n        @if (!unit() && secondValue() !== null && secondValue() !== undefined) {\r\n          / {{ displayValue(secondValue()) }}\r\n        }\r\n      </span>\r\n    }\r\n  </div>\r\n  @if (showProgress()) {\r\n    <div class=\"block font-medium grow whitespace-pre-line text-gray-600 dark:text-gray-200\">\r\n      <div class=\"flex\">\r\n        <div class=\"flex grow gap-2\">\r\n          <div class=\"bg-gray-200 my-0.5 h-5 w-full rounded\">\r\n            <div class=\"bg-teal-600 h-5 rounded\" [style.width]=\"((+value()) / (secondValue() ? +secondValue()! : 0)) * 100 + '%'\"></div>\r\n          </div>\r\n        </div>\r\n        <div class=\"flex text-left pl-3 gap-2\">\r\n          <div class=\"block w-16 text-right\">{{ value() }} / {{ secondValue() }}</div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  }\r\n</div>","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}

package/fesm2022/softpak-components-spx-change-details.mjs

@@ -172,16 +172,16 @@ class SpxChangeDetailsComponent {
             this.spxSearchTonsTested.emit(valuePair);
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: SpxChangeDetailsComponent, deps: [{ token: i1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.11", type: SpxChangeDetailsComponent, isStandalone: true, selector: "spx-change-details", inputs: { formGroup: { classPropertyName: "formGroup", publicName: "formGroup", isSignal: true, isRequired: false, transformFunction: null }, suggestions: { classPropertyName: "suggestions", publicName: "suggestions", isSignal: true, isRequired: false, transformFunction: null }, textCategory: { classPropertyName: "textCategory", publicName: "textCategory", isSignal: true, isRequired: false, transformFunction: null }, textContainerNumber: { classPropertyName: "textContainerNumber", publicName: "textContainerNumber", isSignal: true, isRequired: false, transformFunction: null }, textContainerType: { classPropertyName: "textContainerType", publicName: "textContainerType", isSignal: true, isRequired: false, transformFunction: null }, textCustomer: { classPropertyName: "textCustomer", publicName: "textCustomer", isSignal: true, isRequired: false, transformFunction: null }, textLicensePlate: { classPropertyName: "textLicensePlate", publicName: "textLicensePlate", isSignal: true, isRequired: false, transformFunction: null }, textSave: { classPropertyName: "textSave", publicName: "textSave", isSignal: true, isRequired: false, transformFunction: null }, textTonsTested: { classPropertyName: "textTonsTested", publicName: "textTonsTested", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { spxBlurCategory: "spxBlurCategory", spxBlurContainerType: "spxBlurContainerType", spxSearchCategory: "spxSearchCategory", spxSearchContainerType: "spxSearchContainerType", spxSearchTonsTested: "spxSearchTonsTested", submit: "submit" }, ngImport: i0, template: "<form [formGroup]=\"formGroup()!\" class=\"max-w-lg mx-auto flex flex-col gap-3\" (ngSubmit)=\"onSubmit()\">\n  <spx-form-view\n    [spxFormGroup]=\"formGroup()!\"\n    [spxForm]=\"form\"\n    [spxSuggestions]=\"suggestions()\"\n    (spxBlur)=\"onBlur($event)\"\n    (spxSearch)=\"onSearch($event)\">\n  </spx-form-view>\n</form>", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: SpxFormViewComponent, selector: "spx-form-view", inputs: ["spxFormGroup", "spxForm", "spxSuggestions"], outputs: ["spxBlur", "spxClick", "spxSearch"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: SpxChangeDetailsComponent, deps: [{ token: i1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.0.0", type: SpxChangeDetailsComponent, isStandalone: true, selector: "spx-change-details", inputs: { formGroup: { classPropertyName: "formGroup", publicName: "formGroup", isSignal: true, isRequired: false, transformFunction: null }, suggestions: { classPropertyName: "suggestions", publicName: "suggestions", isSignal: true, isRequired: false, transformFunction: null }, textCategory: { classPropertyName: "textCategory", publicName: "textCategory", isSignal: true, isRequired: false, transformFunction: null }, textContainerNumber: { classPropertyName: "textContainerNumber", publicName: "textContainerNumber", isSignal: true, isRequired: false, transformFunction: null }, textContainerType: { classPropertyName: "textContainerType", publicName: "textContainerType", isSignal: true, isRequired: false, transformFunction: null }, textCustomer: { classPropertyName: "textCustomer", publicName: "textCustomer", isSignal: true, isRequired: false, transformFunction: null }, textLicensePlate: { classPropertyName: "textLicensePlate", publicName: "textLicensePlate", isSignal: true, isRequired: false, transformFunction: null }, textSave: { classPropertyName: "textSave", publicName: "textSave", isSignal: true, isRequired: false, transformFunction: null }, textTonsTested: { classPropertyName: "textTonsTested", publicName: "textTonsTested", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { spxBlurCategory: "spxBlurCategory", spxBlurContainerType: "spxBlurContainerType", spxSearchCategory: "spxSearchCategory", spxSearchContainerType: "spxSearchContainerType", spxSearchTonsTested: "spxSearchTonsTested", submit: "submit" }, ngImport: i0, template: "<form [formGroup]=\"formGroup()!\" class=\"max-w-lg mx-auto flex flex-col gap-3\" (ngSubmit)=\"onSubmit()\">\r\n  <spx-form-view\r\n    [spxFormGroup]=\"formGroup()!\"\r\n    [spxForm]=\"form\"\r\n    [spxSuggestions]=\"suggestions()\"\r\n    (spxBlur)=\"onBlur($event)\"\r\n    (spxSearch)=\"onSearch($event)\">\r\n  </spx-form-view>\r\n</form>", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: SpxFormViewComponent, selector: "spx-form-view", inputs: ["spxFormGroup", "spxForm", "spxSuggestions"], outputs: ["spxBlur", "spxClick", "spxSearch"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: SpxChangeDetailsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: SpxChangeDetailsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'spx-change-details', imports: [
                         FormsModule,
                         ReactiveFormsModule,
                         SpxFormViewComponent,
-                    ], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<form [formGroup]=\"formGroup()!\" class=\"max-w-lg mx-auto flex flex-col gap-3\" (ngSubmit)=\"onSubmit()\">\n  <spx-form-view\n    [spxFormGroup]=\"formGroup()!\"\n    [spxForm]=\"form\"\n    [spxSuggestions]=\"suggestions()\"\n    (spxBlur)=\"onBlur($event)\"\n    (spxSearch)=\"onSearch($event)\">\n  </spx-form-view>\n</form>" }]
+                    ], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<form [formGroup]=\"formGroup()!\" class=\"max-w-lg mx-auto flex flex-col gap-3\" (ngSubmit)=\"onSubmit()\">\r\n  <spx-form-view\r\n    [spxFormGroup]=\"formGroup()!\"\r\n    [spxForm]=\"form\"\r\n    [spxSuggestions]=\"suggestions()\"\r\n    (spxBlur)=\"onBlur($event)\"\r\n    (spxSearch)=\"onSearch($event)\">\r\n  </spx-form-view>\r\n</form>" }]
         }], ctorParameters: () => [{ type: i1.FormBuilder }] });
 
 /**

package/fesm2022/softpak-components-spx-change-details.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"softpak-components-spx-change-details.mjs","sources":["../../../../projects/softpak/components/spx-change-details/spx-change-details.component.ts","../../../../projects/softpak/components/spx-change-details/spx-change-details.component.html","../../../../projects/softpak/components/spx-change-details/softpak-components-spx-change-details.ts"],"sourcesContent":["import { ChangeDetectionStrategy, computed, effect, input, output } from '@angular/core';\nimport { Component } from '@angular/core';\nimport {\n  FormBuilder,\n  FormControl,\n  FormGroup,\n  FormsModule,\n  ReactiveFormsModule,\n} from '@angular/forms';\nimport { Subscription } from 'rxjs';\nimport { SpxChangeDetailsValueI } from './spx-change-details-value.interface';\nimport { SpxFormViewComponent, SpxFormI, SpxFormButtonTypeEnum, SpxFormFieldI } from '@softpak/components/spx-form-view';\nimport { SpxSeverityEnum, valuePairToValue } from '@softpak/components/spx-helpers';\nimport { SpxValuePair, SpxInputTypeEnum } from '@softpak/components/spx-inputs';\nimport { spxValidatorRequired } from '@softpak/components/spx-validation';\n\nexport const spxSectionChangeDetails = 'changeDetails';\nexport const spxCtrlContainerNumber = 'containerNumber';\nexport const spxCtrlContainerSeqNr = 'containerSeqNr';\nexport const spxCtrlContainerType = 'containerType';\nexport const spxCtrlCustomer = 'customer';\nexport const spxCtrlTonsTested = 'tonsTested';\nexport const spxCtrlLicensePlate = 'licensePlate';\nexport const spxCtrlCategory = 'category';\nexport const spxCtrlUseCategories = 'useCategories';\n\n@Component({\n  selector: 'spx-change-details',\n  templateUrl: './spx-change-details.component.html',\n  imports: [\n    FormsModule,\n    ReactiveFormsModule,\n    SpxFormViewComponent,\n  ],\n  standalone: true,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class SpxChangeDetailsComponent {\n  readonly formGroup = input<FormGroup>();\n  readonly suggestions = input<any>();\n  private readonly showTonsTested = computed(() =>\n    this.suggestions()?.[spxCtrlTonsTested] &&\n    this.suggestions()?.[spxCtrlTonsTested].length &&\n    this.suggestions()?.[spxCtrlTonsTested].length > 0\n  );\n  readonly textCategory = input<string>();\n  readonly textContainerNumber = input<string>();\n  readonly textContainerType = input<string>();\n  readonly textCustomer = input<string>();\n  readonly textLicensePlate = input<string>();\n  readonly textSave = input<string>();\n  readonly textTonsTested = input<string>();\n  spxBlurCategory = output<SpxValuePair<string>>();\n  spxBlurContainerType = output<SpxValuePair<string>>();\n  spxSearchCategory = output<SpxValuePair<string>>();\n  spxSearchContainerType = output<SpxValuePair<string>>();\n  spxSearchTonsTested = output<SpxValuePair<string>>();\n  submit = output<SpxChangeDetailsValueI>();\n\n  form: SpxFormI = {\n    buttons: [\n      {\n        severity: SpxSeverityEnum.success,\n        type: SpxFormButtonTypeEnum.submit,\n        label: () => this.textSave()!,\n      }\n    ],\n    sections: [\n      {\n        key: spxSectionChangeDetails,\n        showTitle: () => false,\n        fields: [\n          {\n            key: spxCtrlContainerSeqNr,\n            type: () => SpxInputTypeEnum.hidden,\n            validators: () => [spxValidatorRequired()],\n          },\n          {\n            key: spxCtrlContainerNumber,\n            type: () => SpxInputTypeEnum.text,\n            label: () => this.textContainerNumber()!,\n            readonly: () => true,\n            validators: () => [spxValidatorRequired()],\n          },\n          {\n            key: spxCtrlCustomer,\n            type: () => SpxInputTypeEnum.text,\n            capitalize: () => true,\n            readonly: () => true,\n            label: () => this.textCustomer()!,\n            validators: () => [spxValidatorRequired()],\n          },\n          {\n            key: spxCtrlContainerType,\n            type: () => SpxInputTypeEnum.autocomplete,\n            label: () => this.textContainerType()!,\n            capitalize: () => true,\n            validators: () => [spxValidatorRequired()],\n          },\n          {\n            key: spxCtrlTonsTested,\n            type: () => SpxInputTypeEnum.radio,\n            label: () => this.textTonsTested()!,\n            show: () => this.showTonsTested(),\n          },\n          {\n            key: spxCtrlLicensePlate,\n            type: () => SpxInputTypeEnum.text,\n            label: () => this.textLicensePlate()!,\n            capitalize: () => true,\n          },\n          {\n            key: spxCtrlUseCategories,\n            type: () => SpxInputTypeEnum.hidden,\n            capitalize: () => true,\n          },\n          {\n            key: spxCtrlCategory,\n            type: () => SpxInputTypeEnum.autocomplete,\n            label: () => this.textCategory()!,\n            capitalize: () => true,\n            show: () => valuePairToValue(this.ctrlUseCategories()?.value),\n            validators: () => valuePairToValue(this.ctrlUseCategories()?.value) ? [spxValidatorRequired()] : [],\n          }\n        ]\n      }\n    ]\n  };\n\n  readonly ctrlCategory = computed(() => this.formGroup()?.get(spxCtrlCategory) as FormControl);\n  readonly ctrlCustomer = computed(() => this.formGroup()?.get(spxCtrlCustomer) as FormControl);\n  readonly ctrlContainerType = computed(() => this.formGroup()?.get(spxCtrlContainerType) as FormControl);\n  readonly ctrlLicensePlate = computed(() => this.formGroup()?.get(spxCtrlLicensePlate) as FormControl);\n  readonly ctrlTonsTested = computed(() => this.formGroup()?.get(spxCtrlTonsTested) as FormControl);\n  readonly ctrlUseCategories = computed(() => this.formGroup()?.get(spxCtrlUseCategories) as FormControl);\n\n  private subContainerType?: Subscription;\n\n  constructor(readonly formBuilder: FormBuilder) {\n    effect(() => {\n      if (\n        this.showTonsTested()\n      ) {\n        this.ctrlTonsTested()?.addValidators([spxValidatorRequired()]);\n        this.ctrlTonsTested()?.updateValueAndValidity();\n      } else {\n        this.ctrlTonsTested()?.clearValidators();\n        this.ctrlTonsTested()?.updateValueAndValidity();\n      }\n    });\n  }\n\n  createForm(): FormGroup {\n    return SpxFormViewComponent.createForm(\n      this.formBuilder,\n      this.form.sections\n    );\n  }\n\n  ngOnInit(): void {\n    this.listenToContainerType();\n  }\n\n  ngOnDestroy(): void {\n    if (this.subContainerType) {\n      this.subContainerType.unsubscribe();\n    }\n  }\n\n  getRawValidators(formControl: FormControl) {\n    return (formControl as any)._rawValidators;\n  }\n\n  onBlur(data: { field: SpxFormFieldI; valuePair: SpxValuePair<any> }) {\n    setTimeout(() => {\n      if (data.field.key === spxCtrlCategory && valuePairToValue(this.formGroup()!.get(spxCtrlCategory)!.value) !== null) {\n        this.spxBlurCategory.emit(data.valuePair);\n      }\n      if (data.field.key === spxCtrlContainerType && valuePairToValue(this.formGroup()!.get(spxCtrlContainerType)!.value) !== null) {\n        this.spxBlurContainerType.emit(data.valuePair);\n      }\n    }, 300);\n  }\n\n  onSearch(data: { field: SpxFormFieldI; valuePair: SpxValuePair<any> }) {\n    if (data.field.key === spxCtrlCategory) {\n      this.spxSearchCategory.emit(data.valuePair);\n    }\n    if (data.field.key === spxCtrlContainerType) {\n      this.spxSearchContainerType.emit(data.valuePair);\n    }\n    if (data.field.key === spxCtrlTonsTested) {\n      this.spxSearchTonsTested.emit(data.valuePair);\n    }\n  }\n\n  onSubmit(): void {\n    this.submit.emit({\n      category: valuePairToValue(this.ctrlUseCategories().value) ? this.ctrlCategory().value : null,\n      containerType: this.ctrlContainerType().value,\n      licensePlate: this.ctrlLicensePlate().value,\n      tonsTested: this.ctrlTonsTested().value,\n    })\n  }\n\n  private listenToContainerType(): void {\n    this.subContainerType = this.ctrlContainerType().valueChanges.subscribe(valuePair => {\n      this.ctrlTonsTested().setValue({ value: null });\n      this.spxSearchTonsTested.emit(valuePair);\n    });\n  }\n}\n","<form [formGroup]=\"formGroup()!\" class=\"max-w-lg mx-auto flex flex-col gap-3\" (ngSubmit)=\"onSubmit()\">\n  <spx-form-view\n    [spxFormGroup]=\"formGroup()!\"\n    [spxForm]=\"form\"\n    [spxSuggestions]=\"suggestions()\"\n    (spxBlur)=\"onBlur($event)\"\n    (spxSearch)=\"onSearch($event)\">\n  </spx-form-view>\n</form>","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"softpak-components-spx-change-details.mjs","sources":["../../../../projects/softpak/components/spx-change-details/spx-change-details.component.ts","../../../../projects/softpak/components/spx-change-details/spx-change-details.component.html","../../../../projects/softpak/components/spx-change-details/softpak-components-spx-change-details.ts"],"sourcesContent":["import { ChangeDetectionStrategy, computed, effect, input, output } from '@angular/core';\r\nimport { Component } from '@angular/core';\r\nimport {\r\n  FormBuilder,\r\n  FormControl,\r\n  FormGroup,\r\n  FormsModule,\r\n  ReactiveFormsModule,\r\n} from '@angular/forms';\r\nimport { Subscription } from 'rxjs';\r\nimport { SpxChangeDetailsValueI } from './spx-change-details-value.interface';\r\nimport { SpxFormViewComponent, SpxFormI, SpxFormButtonTypeEnum, SpxFormFieldI } from '@softpak/components/spx-form-view';\r\nimport { SpxSeverityEnum, valuePairToValue } from '@softpak/components/spx-helpers';\r\nimport { SpxValuePair, SpxInputTypeEnum } from '@softpak/components/spx-inputs';\r\nimport { spxValidatorRequired } from '@softpak/components/spx-validation';\r\n\r\nexport const spxSectionChangeDetails = 'changeDetails';\r\nexport const spxCtrlContainerNumber = 'containerNumber';\r\nexport const spxCtrlContainerSeqNr = 'containerSeqNr';\r\nexport const spxCtrlContainerType = 'containerType';\r\nexport const spxCtrlCustomer = 'customer';\r\nexport const spxCtrlTonsTested = 'tonsTested';\r\nexport const spxCtrlLicensePlate = 'licensePlate';\r\nexport const spxCtrlCategory = 'category';\r\nexport const spxCtrlUseCategories = 'useCategories';\r\n\r\n@Component({\r\n  selector: 'spx-change-details',\r\n  templateUrl: './spx-change-details.component.html',\r\n  imports: [\r\n    FormsModule,\r\n    ReactiveFormsModule,\r\n    SpxFormViewComponent,\r\n  ],\r\n  standalone: true,\r\n  changeDetection: ChangeDetectionStrategy.OnPush,\r\n})\r\nexport class SpxChangeDetailsComponent {\r\n  readonly formGroup = input<FormGroup>();\r\n  readonly suggestions = input<any>();\r\n  private readonly showTonsTested = computed(() =>\r\n    this.suggestions()?.[spxCtrlTonsTested] &&\r\n    this.suggestions()?.[spxCtrlTonsTested].length &&\r\n    this.suggestions()?.[spxCtrlTonsTested].length > 0\r\n  );\r\n  readonly textCategory = input<string>();\r\n  readonly textContainerNumber = input<string>();\r\n  readonly textContainerType = input<string>();\r\n  readonly textCustomer = input<string>();\r\n  readonly textLicensePlate = input<string>();\r\n  readonly textSave = input<string>();\r\n  readonly textTonsTested = input<string>();\r\n  spxBlurCategory = output<SpxValuePair<string>>();\r\n  spxBlurContainerType = output<SpxValuePair<string>>();\r\n  spxSearchCategory = output<SpxValuePair<string>>();\r\n  spxSearchContainerType = output<SpxValuePair<string>>();\r\n  spxSearchTonsTested = output<SpxValuePair<string>>();\r\n  submit = output<SpxChangeDetailsValueI>();\r\n\r\n  form: SpxFormI = {\r\n    buttons: [\r\n      {\r\n        severity: SpxSeverityEnum.success,\r\n        type: SpxFormButtonTypeEnum.submit,\r\n        label: () => this.textSave()!,\r\n      }\r\n    ],\r\n    sections: [\r\n      {\r\n        key: spxSectionChangeDetails,\r\n        showTitle: () => false,\r\n        fields: [\r\n          {\r\n            key: spxCtrlContainerSeqNr,\r\n            type: () => SpxInputTypeEnum.hidden,\r\n            validators: () => [spxValidatorRequired()],\r\n          },\r\n          {\r\n            key: spxCtrlContainerNumber,\r\n            type: () => SpxInputTypeEnum.text,\r\n            label: () => this.textContainerNumber()!,\r\n            readonly: () => true,\r\n            validators: () => [spxValidatorRequired()],\r\n          },\r\n          {\r\n            key: spxCtrlCustomer,\r\n            type: () => SpxInputTypeEnum.text,\r\n            capitalize: () => true,\r\n            readonly: () => true,\r\n            label: () => this.textCustomer()!,\r\n            validators: () => [spxValidatorRequired()],\r\n          },\r\n          {\r\n            key: spxCtrlContainerType,\r\n            type: () => SpxInputTypeEnum.autocomplete,\r\n            label: () => this.textContainerType()!,\r\n            capitalize: () => true,\r\n            validators: () => [spxValidatorRequired()],\r\n          },\r\n          {\r\n            key: spxCtrlTonsTested,\r\n            type: () => SpxInputTypeEnum.radio,\r\n            label: () => this.textTonsTested()!,\r\n            show: () => this.showTonsTested(),\r\n          },\r\n          {\r\n            key: spxCtrlLicensePlate,\r\n            type: () => SpxInputTypeEnum.text,\r\n            label: () => this.textLicensePlate()!,\r\n            capitalize: () => true,\r\n          },\r\n          {\r\n            key: spxCtrlUseCategories,\r\n            type: () => SpxInputTypeEnum.hidden,\r\n            capitalize: () => true,\r\n          },\r\n          {\r\n            key: spxCtrlCategory,\r\n            type: () => SpxInputTypeEnum.autocomplete,\r\n            label: () => this.textCategory()!,\r\n            capitalize: () => true,\r\n            show: () => valuePairToValue(this.ctrlUseCategories()?.value),\r\n            validators: () => valuePairToValue(this.ctrlUseCategories()?.value) ? [spxValidatorRequired()] : [],\r\n          }\r\n        ]\r\n      }\r\n    ]\r\n  };\r\n\r\n  readonly ctrlCategory = computed(() => this.formGroup()?.get(spxCtrlCategory) as FormControl);\r\n  readonly ctrlCustomer = computed(() => this.formGroup()?.get(spxCtrlCustomer) as FormControl);\r\n  readonly ctrlContainerType = computed(() => this.formGroup()?.get(spxCtrlContainerType) as FormControl);\r\n  readonly ctrlLicensePlate = computed(() => this.formGroup()?.get(spxCtrlLicensePlate) as FormControl);\r\n  readonly ctrlTonsTested = computed(() => this.formGroup()?.get(spxCtrlTonsTested) as FormControl);\r\n  readonly ctrlUseCategories = computed(() => this.formGroup()?.get(spxCtrlUseCategories) as FormControl);\r\n\r\n  private subContainerType?: Subscription;\r\n\r\n  constructor(readonly formBuilder: FormBuilder) {\r\n    effect(() => {\r\n      if (\r\n        this.showTonsTested()\r\n      ) {\r\n        this.ctrlTonsTested()?.addValidators([spxValidatorRequired()]);\r\n        this.ctrlTonsTested()?.updateValueAndValidity();\r\n      } else {\r\n        this.ctrlTonsTested()?.clearValidators();\r\n        this.ctrlTonsTested()?.updateValueAndValidity();\r\n      }\r\n    });\r\n  }\r\n\r\n  createForm(): FormGroup {\r\n    return SpxFormViewComponent.createForm(\r\n      this.formBuilder,\r\n      this.form.sections\r\n    );\r\n  }\r\n\r\n  ngOnInit(): void {\r\n    this.listenToContainerType();\r\n  }\r\n\r\n  ngOnDestroy(): void {\r\n    if (this.subContainerType) {\r\n      this.subContainerType.unsubscribe();\r\n    }\r\n  }\r\n\r\n  getRawValidators(formControl: FormControl) {\r\n    return (formControl as any)._rawValidators;\r\n  }\r\n\r\n  onBlur(data: { field: SpxFormFieldI; valuePair: SpxValuePair<any> }) {\r\n    setTimeout(() => {\r\n      if (data.field.key === spxCtrlCategory && valuePairToValue(this.formGroup()!.get(spxCtrlCategory)!.value) !== null) {\r\n        this.spxBlurCategory.emit(data.valuePair);\r\n      }\r\n      if (data.field.key === spxCtrlContainerType && valuePairToValue(this.formGroup()!.get(spxCtrlContainerType)!.value) !== null) {\r\n        this.spxBlurContainerType.emit(data.valuePair);\r\n      }\r\n    }, 300);\r\n  }\r\n\r\n  onSearch(data: { field: SpxFormFieldI; valuePair: SpxValuePair<any> }) {\r\n    if (data.field.key === spxCtrlCategory) {\r\n      this.spxSearchCategory.emit(data.valuePair);\r\n    }\r\n    if (data.field.key === spxCtrlContainerType) {\r\n      this.spxSearchContainerType.emit(data.valuePair);\r\n    }\r\n    if (data.field.key === spxCtrlTonsTested) {\r\n      this.spxSearchTonsTested.emit(data.valuePair);\r\n    }\r\n  }\r\n\r\n  onSubmit(): void {\r\n    this.submit.emit({\r\n      category: valuePairToValue(this.ctrlUseCategories().value) ? this.ctrlCategory().value : null,\r\n      containerType: this.ctrlContainerType().value,\r\n      licensePlate: this.ctrlLicensePlate().value,\r\n      tonsTested: this.ctrlTonsTested().value,\r\n    })\r\n  }\r\n\r\n  private listenToContainerType(): void {\r\n    this.subContainerType = this.ctrlContainerType().valueChanges.subscribe(valuePair => {\r\n      this.ctrlTonsTested().setValue({ value: null });\r\n      this.spxSearchTonsTested.emit(valuePair);\r\n    });\r\n  }\r\n}\r\n","<form [formGroup]=\"formGroup()!\" class=\"max-w-lg mx-auto flex flex-col gap-3\" (ngSubmit)=\"onSubmit()\">\r\n  <spx-form-view\r\n    [spxFormGroup]=\"formGroup()!\"\r\n    [spxForm]=\"form\"\r\n    [spxSuggestions]=\"suggestions()\"\r\n    (spxBlur)=\"onBlur($event)\"\r\n    (spxSearch)=\"onSearch($event)\">\r\n  </spx-form-view>\r\n</form>","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}

package/fesm2022/softpak-components-spx-channel-selection.mjs

@@ -42,10 +42,10 @@ class SpxChannelGuard {
         }
         return true;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: SpxChannelGuard, deps: [{ token: i1.Router }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: SpxChannelGuard, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: SpxChannelGuard, deps: [{ token: i1.Router }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: SpxChannelGuard, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: SpxChannelGuard, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: SpxChannelGuard, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -137,29 +137,29 @@ class SpxChannelIndicatorComponent {
     onChange() {
         this.navController.navigateRoot([spxChannelSelectionUrl]);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: SpxChannelIndicatorComponent, deps: [{ token: i1$1.NavController }, { token: i2.Store }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.11", type: SpxChannelIndicatorComponent, isStandalone: true, selector: "spx-channel-indicator", ngImport: i0, template: `<div class="bg-white p-3 rounded flex gap-3 items-center text-black">
-    <div class="grow">
-      <div class="text-lg font-bold">{{ (channel | async)?.brand }}</div>
-      @if ((channelType | async) !== 'Production') {
-        <div class="text-base text-gray-600">{{ channelType | async }}</div>
-      }
-    </div>
-    <spx-button (click)="onChange()" [spxType]="'button'">{{ spxTextChange | translate | capitalize }}</spx-button>
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: SpxChannelIndicatorComponent, deps: [{ token: i1$1.NavController }, { token: i2.Store }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.0", type: SpxChannelIndicatorComponent, isStandalone: true, selector: "spx-channel-indicator", ngImport: i0, template: `<div class="bg-white p-3 rounded flex gap-3 items-center text-black">
+    <div class="grow">
+      <div class="text-lg font-bold">{{ (channel | async)?.brand }}</div>
+      @if ((channelType | async) !== 'Production') {
+        <div class="text-base text-gray-600">{{ channelType | async }}</div>
+      }
+    </div>
+    <spx-button (click)="onChange()" [spxType]="'button'">{{ spxTextChange | translate | capitalize }}</spx-button>
   </div>`, isInline: true, dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "component", type: SpxButtonComponent, selector: "spx-button", inputs: ["spxDisabled", "spxClass", "spxClassObject", "spxForm", "spxFullHeight", "spxFullWidth", "spxSeverity", "spxSize", "spxTabIndex", "spxType"], outputs: ["spxClick"] }, { kind: "pipe", type: SpxCapitalizePipe, name: "capitalize" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: SpxChannelIndicatorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: SpxChannelIndicatorComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'spx-channel-indicator',
-                    template: `<div class="bg-white p-3 rounded flex gap-3 items-center text-black">
-    <div class="grow">
-      <div class="text-lg font-bold">{{ (channel | async)?.brand }}</div>
-      @if ((channelType | async) !== 'Production') {
-        <div class="text-base text-gray-600">{{ channelType | async }}</div>
-      }
-    </div>
-    <spx-button (click)="onChange()" [spxType]="'button'">{{ spxTextChange | translate | capitalize }}</spx-button>
+                    template: `<div class="bg-white p-3 rounded flex gap-3 items-center text-black">
+    <div class="grow">
+      <div class="text-lg font-bold">{{ (channel | async)?.brand }}</div>
+      @if ((channelType | async) !== 'Production') {
+        <div class="text-base text-gray-600">{{ channelType | async }}</div>
+      }
+    </div>
+    <spx-button (click)="onChange()" [spxType]="'button'">{{ spxTextChange | translate | capitalize }}</spx-button>
   </div>`,
                     imports: [
                         AsyncPipe,
@@ -267,49 +267,49 @@ class SpxWelcomeComponent {
             }));
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: SpxWelcomeComponent, deps: [{ token: i2.Store }, { token: i2$1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.11", type: SpxWelcomeComponent, isStandalone: true, selector: "spx-welcome", ngImport: i0, template: `
-  <ion-header>
-  <ion-toolbar>
-    <ion-title>
-      {{ textSelectYourCompany | translate | capitalize }}
-    </ion-title>
-    <ion-buttons slot="end">
-    </ion-buttons>
-  </ion-toolbar>
-</ion-header>
-<ion-content class="ion-padding">
-  <form [formGroup]="formGroup" class="max-w-lg mx-auto flex flex-col gap-3" (ngSubmit)="onSubmit()">
-    <spx-form-view
-      [spxForm]="form"
-      [spxFormGroup]="formSection"
-      [spxSuggestions]="suggestions">
-    </spx-form-view>
-  </form>
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: SpxWelcomeComponent, deps: [{ token: i2.Store }, { token: i2$1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.0", type: SpxWelcomeComponent, isStandalone: true, selector: "spx-welcome", ngImport: i0, template: `
+  <ion-header>
+  <ion-toolbar>
+    <ion-title>
+      {{ textSelectYourCompany | translate | capitalize }}
+    </ion-title>
+    <ion-buttons slot="end">
+    </ion-buttons>
+  </ion-toolbar>
+</ion-header>
+<ion-content class="ion-padding">
+  <form [formGroup]="formGroup" class="max-w-lg mx-auto flex flex-col gap-3" (ngSubmit)="onSubmit()">
+    <spx-form-view
+      [spxForm]="form"
+      [spxFormGroup]="formSection"
+      [spxSuggestions]="suggestions">
+    </spx-form-view>
+  </form>
 </ion-content>`, isInline: true, dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "pipe", type: SpxCapitalizePipe, name: "capitalize" }, { kind: "component", type: SpxFormViewComponent, selector: "spx-form-view", inputs: ["spxFormGroup", "spxForm", "spxSuggestions"], outputs: ["spxBlur", "spxClick", "spxSearch"] }, { kind: "component", type: IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "component", type: IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: IonContent, selector: "ion-content", inputs: ["color", "fixedSlotPlacement", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: SpxWelcomeComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: SpxWelcomeComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'spx-welcome',
-                    template: `
-  <ion-header>
-  <ion-toolbar>
-    <ion-title>
-      {{ textSelectYourCompany | translate | capitalize }}
-    </ion-title>
-    <ion-buttons slot="end">
-    </ion-buttons>
-  </ion-toolbar>
-</ion-header>
-<ion-content class="ion-padding">
-  <form [formGroup]="formGroup" class="max-w-lg mx-auto flex flex-col gap-3" (ngSubmit)="onSubmit()">
-    <spx-form-view
-      [spxForm]="form"
-      [spxFormGroup]="formSection"
-      [spxSuggestions]="suggestions">
-    </spx-form-view>
-  </form>
+                    template: `
+  <ion-header>
+  <ion-toolbar>
+    <ion-title>
+      {{ textSelectYourCompany | translate | capitalize }}
+    </ion-title>
+    <ion-buttons slot="end">
+    </ion-buttons>
+  </ion-toolbar>
+</ion-header>
+<ion-content class="ion-padding">
+  <form [formGroup]="formGroup" class="max-w-lg mx-auto flex flex-col gap-3" (ngSubmit)="onSubmit()">
+    <spx-form-view
+      [spxForm]="form"
+      [spxFormGroup]="formSection"
+      [spxSuggestions]="suggestions">
+    </spx-form-view>
+  </form>
 </ion-content>`,
                     imports: [
                         FormsModule,
@@ -352,10 +352,10 @@ class Effects {
                 })];
         })), { dispatch: true });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: Effects, deps: [{ token: i1$2.Actions }, { token: i1.Router }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: Effects }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: Effects, deps: [{ token: i1$2.Actions }, { token: i1.Router }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: Effects }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: Effects, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: Effects, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: i1$2.Actions }, { type: i1.Router }] });