@softpak/components 0.0.0-beta.1 → 0.0.0-beta.100

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

@@ -4,7 +4,10 @@ import * as i0 from '@angular/core';
 import { EventEmitter, Component, Output, Input } from '@angular/core';
 import * as i2 from '@fortawesome/angular-fontawesome';
 import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
-import { faCheck, faCircleInfo, faTriangleExclamation, faTimes } from '@fortawesome/free-solid-svg-icons';
+import { faCheck } from '@fortawesome/free-solid-svg-icons/faCheck';
+import { faCircleInfo } from '@fortawesome/free-solid-svg-icons/faCircleInfo';
+import { faTimes } from '@fortawesome/free-solid-svg-icons/faTimes';
+import { faTriangleExclamation } from '@fortawesome/free-solid-svg-icons/faTriangleExclamation';
 import { SpxSeverityEnum } from '@softpak/components/spx-helpers';
 
 class SpxAlertComponent {
@@ -86,7 +89,8 @@ class SpxAlertComponent {
     [class.over:border-lime-600]="this.spxCloseable && this.isSeveritySuccess"
     [class.focus:ring-amber-600]="this.spxCloseable && this.isSeverityWarning"
     [class.hover:bg-amber-200]="this.spxCloseable && this.isSeverityWarning"
-    [class.over:border-amber-600]="this.spxCloseable && this.isSeverityWarning">
+    [class.over:border-amber-600]="this.spxCloseable && this.isSeverityWarning"
+    (click)="onClose()">
       <fa-icon
         *ngIf="this.isSeverityInfo"
         [icon]="faCircleInfo" class="block text-xl text-cyan-600"></fa-icon>
@@ -147,7 +151,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImpor
     [class.over:border-lime-600]="this.spxCloseable && this.isSeveritySuccess"
     [class.focus:ring-amber-600]="this.spxCloseable && this.isSeverityWarning"
     [class.hover:bg-amber-200]="this.spxCloseable && this.isSeverityWarning"
-    [class.over:border-amber-600]="this.spxCloseable && this.isSeverityWarning">
+    [class.over:border-amber-600]="this.spxCloseable && this.isSeverityWarning"
+    (click)="onClose()">
       <fa-icon
         *ngIf="this.isSeverityInfo"
         [icon]="faCircleInfo" class="block text-xl text-cyan-600"></fa-icon>

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

@@ -1 +1 @@
-{"version":3,"file":"softpak-components-spx-alert.mjs","sources":["../../../../projects/softpak/components/spx-alert/spx-alert.component.ts","../../../../projects/softpak/components/spx-alert/spx-alert.interface.ts","../../../../projects/softpak/components/spx-alert/softpak-components-spx-alert.ts"],"sourcesContent":["import { CommonModule, NgIf } from '@angular/common';\nimport { Component, EventEmitter, Input, Output } from '@angular/core';\nimport { FontAwesomeModule } from '@fortawesome/angular-fontawesome';\nimport { faCheck, faCircleInfo, faTimes, faTriangleExclamation } from '@fortawesome/free-solid-svg-icons';\nimport { SpxSeverityEnum } from '@softpak/components/spx-helpers';\n\n@Component({\n  selector: 'spx-alert',\n  standalone: true,\n  imports: [\n    CommonModule,\n    FontAwesomeModule,\n    NgIf,\n  ],\n  template: `\n  <div class=\"flex items-center gap-3 border-t-4 rounded px-4 py-3 shadow-md\"\n    [class.cursor-pointer]=\"this.spxCloseable\"\n    [class.bg-red-100]=\"this.isSeverityError\"\n    [class.border-red-500]=\"this.isSeverityError\"\n    [class.text-red-900]=\"this.isSeverityError\"\n    [class.bg-cyan-100]=\"this.isSeverityInfo\"\n    [class.border-cyan-500]=\"this.isSeverityInfo\"\n    [class.text-cyan-900]=\"this.isSeverityInfo\"\n    [class.bg-lime-100]=\"this.isSeveritySuccess\"\n    [class.border-lime-500]=\"this.isSeveritySuccess\"\n    [class.text-lime-900]=\"this.isSeveritySuccess\"\n    [class.bg-amber-100]=\"this.isSeverityWarning\"\n    [class.border-amber-500]=\"this.isSeverityWarning\"\n    [class.text-amber-900]=\"this.isSeverityWarning\"\n    [class.focus:ring-red-600]=\"this.spxCloseable && this.isSeverityError\"\n    [class.hover:bg-red-200]=\"this.spxCloseable && this.isSeverityError\"\n    [class.over:border-red-600]=\"this.spxCloseable && this.isSeverityError\"\n    [class.focus:ring-cyan-600]=\"this.spxCloseable && this.isSeverityInfo\"\n    [class.hover:bg-cyan-200]=\"this.spxCloseable && this.isSeverityInfo\"\n    [class.over:border-cyan-600]=\"this.spxCloseable && this.isSeverityInfo\"\n    [class.focus:ring-lime-600]=\"this.spxCloseable && this.isSeveritySuccess\"\n    [class.hover:bg-lime-200]=\"this.spxCloseable && this.isSeveritySuccess\"\n    [class.over:border-lime-600]=\"this.spxCloseable && this.isSeveritySuccess\"\n    [class.focus:ring-amber-600]=\"this.spxCloseable && this.isSeverityWarning\"\n    [class.hover:bg-amber-200]=\"this.spxCloseable && this.isSeverityWarning\"\n    [class.over:border-amber-600]=\"this.spxCloseable && this.isSeverityWarning\">\n      <fa-icon\n        *ngIf=\"this.isSeverityInfo\"\n        [icon]=\"faCircleInfo\" class=\"block text-xl text-cyan-600\"></fa-icon>\n      <fa-icon\n        *ngIf=\"this.isSeverityError\"\n        [icon]=\"faTriangleExclamation\" class=\"block text-xl text-red-600\"></fa-icon>\n      <fa-icon\n        *ngIf=\"this.isSeveritySuccess\"\n        [icon]=\"faCheck\" class=\"block text-xl text-lime-600\"></fa-icon>\n      <fa-icon\n        *ngIf=\"this.isSeverityWarning\"\n        [icon]=\"faTriangleExclamation\" class=\"block text-xl text-amber-600\"></fa-icon>\n      <div class=\"grow\">\n        <p *ngIf=\"this.spxTitle && !this.spxHideTitle\" class=\"font-bold\">{{this.spxTitle}}</p>\n        <p class=\"text-sm\">\n          <ng-content></ng-content>\n        </p>\n      </div>\n      <fa-icon\n        *ngIf=\"this.spxCloseable\"\n        [icon]=\"faTimes\" class=\"block text-xl\"></fa-icon>\n    </div>\n  `,\n})\nexport class SpxAlertComponent {\n  _autoCloseTimeout: any;\n  @Output() spxClose: EventEmitter<void> = new EventEmitter<void>();\n  @Input() spxAutoclose?: number;\n  @Input() spxCloseable? = false;\n  @Input() spxHideTitle = false;\n  @Input() spxTitle?: string;\n  @Input() spxMarginTop = false;\n  @Input() spxSeverity?: SpxSeverityEnum;\n  @Input() tick = {};\n\n  get isSeverityError() { return this.spxSeverity === SpxSeverityEnum.error; }\n  get isSeverityInfo() { return this.spxSeverity === SpxSeverityEnum.info; }\n  get isSeveritySuccess() { return this.spxSeverity === SpxSeverityEnum.success; }\n  get isSeverityWarning() { return this.spxSeverity === SpxSeverityEnum.warning; }\n  faCheck = faCheck;\n  faCircleInfo = faCircleInfo;\n  faTriangleExclamation = faTriangleExclamation;\n  faTimes = faTimes;\n\n  componentDidLoad() {\n    if (this.spxAutoclose) {\n      this.prepareAutoClose();\n    }\n    if (!this.spxTitle) {\n      this._assignDefaultTitle();\n    }\n  }\n\n  private prepareAutoClose(): void {\n    this._autoCloseTimeout = setTimeout(() => {\n      this.onClose();\n      this._autoCloseTimeout = null;\n      this.tick = {};\n    }, this.spxAutoclose);\n  }\n\n  private _assignDefaultTitle(): void {\n    switch (this.spxSeverity) {\n      case SpxSeverityEnum.error:\n        this.spxTitle = 'Error';\n        break;\n      case SpxSeverityEnum.info:\n        this.spxTitle = 'Info';\n        break;\n      case SpxSeverityEnum.success:\n        this.spxTitle = 'Notification';\n        break;\n      case SpxSeverityEnum.warning:\n        this.spxTitle = 'Warning';\n        break;\n    }\n  }\n\n  onClose() {\n    if (this.spxCloseable) {\n      this.spxClose.emit();\n    }\n  }\n}\n","import { SpxSeverityEnum } from \"@softpak/components/spx-helpers\";\n\nexport class SpxAlertI {\n  closeable?: boolean;\n  id?: number;\n  message?: string;\n  severity?: SpxSeverityEnum;\n}\n","/**\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-alert.mjs","sources":["../../../../projects/softpak/components/spx-alert/spx-alert.component.ts","../../../../projects/softpak/components/spx-alert/spx-alert.interface.ts","../../../../projects/softpak/components/spx-alert/softpak-components-spx-alert.ts"],"sourcesContent":["import { CommonModule, NgIf } from '@angular/common';\nimport { Component, EventEmitter, Input, Output } from '@angular/core';\nimport { FontAwesomeModule } from '@fortawesome/angular-fontawesome';\nimport { faCheck } from '@fortawesome/free-solid-svg-icons/faCheck';\nimport { faCircleInfo } from '@fortawesome/free-solid-svg-icons/faCircleInfo';\nimport { faTimes } from '@fortawesome/free-solid-svg-icons/faTimes';\nimport { faTriangleExclamation } from '@fortawesome/free-solid-svg-icons/faTriangleExclamation';\nimport { SpxSeverityEnum } from '@softpak/components/spx-helpers';\n\n@Component({\n  selector: 'spx-alert',\n  standalone: true,\n  imports: [\n    CommonModule,\n    FontAwesomeModule,\n    NgIf,\n  ],\n  template: `\n  <div class=\"flex items-center gap-3 border-t-4 rounded px-4 py-3 shadow-md\"\n    [class.cursor-pointer]=\"this.spxCloseable\"\n    [class.bg-red-100]=\"this.isSeverityError\"\n    [class.border-red-500]=\"this.isSeverityError\"\n    [class.text-red-900]=\"this.isSeverityError\"\n    [class.bg-cyan-100]=\"this.isSeverityInfo\"\n    [class.border-cyan-500]=\"this.isSeverityInfo\"\n    [class.text-cyan-900]=\"this.isSeverityInfo\"\n    [class.bg-lime-100]=\"this.isSeveritySuccess\"\n    [class.border-lime-500]=\"this.isSeveritySuccess\"\n    [class.text-lime-900]=\"this.isSeveritySuccess\"\n    [class.bg-amber-100]=\"this.isSeverityWarning\"\n    [class.border-amber-500]=\"this.isSeverityWarning\"\n    [class.text-amber-900]=\"this.isSeverityWarning\"\n    [class.focus:ring-red-600]=\"this.spxCloseable && this.isSeverityError\"\n    [class.hover:bg-red-200]=\"this.spxCloseable && this.isSeverityError\"\n    [class.over:border-red-600]=\"this.spxCloseable && this.isSeverityError\"\n    [class.focus:ring-cyan-600]=\"this.spxCloseable && this.isSeverityInfo\"\n    [class.hover:bg-cyan-200]=\"this.spxCloseable && this.isSeverityInfo\"\n    [class.over:border-cyan-600]=\"this.spxCloseable && this.isSeverityInfo\"\n    [class.focus:ring-lime-600]=\"this.spxCloseable && this.isSeveritySuccess\"\n    [class.hover:bg-lime-200]=\"this.spxCloseable && this.isSeveritySuccess\"\n    [class.over:border-lime-600]=\"this.spxCloseable && this.isSeveritySuccess\"\n    [class.focus:ring-amber-600]=\"this.spxCloseable && this.isSeverityWarning\"\n    [class.hover:bg-amber-200]=\"this.spxCloseable && this.isSeverityWarning\"\n    [class.over:border-amber-600]=\"this.spxCloseable && this.isSeverityWarning\"\n    (click)=\"onClose()\">\n      <fa-icon\n        *ngIf=\"this.isSeverityInfo\"\n        [icon]=\"faCircleInfo\" class=\"block text-xl text-cyan-600\"></fa-icon>\n      <fa-icon\n        *ngIf=\"this.isSeverityError\"\n        [icon]=\"faTriangleExclamation\" class=\"block text-xl text-red-600\"></fa-icon>\n      <fa-icon\n        *ngIf=\"this.isSeveritySuccess\"\n        [icon]=\"faCheck\" class=\"block text-xl text-lime-600\"></fa-icon>\n      <fa-icon\n        *ngIf=\"this.isSeverityWarning\"\n        [icon]=\"faTriangleExclamation\" class=\"block text-xl text-amber-600\"></fa-icon>\n      <div class=\"grow\">\n        <p *ngIf=\"this.spxTitle && !this.spxHideTitle\" class=\"font-bold\">{{this.spxTitle}}</p>\n        <p class=\"text-sm\">\n          <ng-content></ng-content>\n        </p>\n      </div>\n      <fa-icon\n        *ngIf=\"this.spxCloseable\"\n        [icon]=\"faTimes\" class=\"block text-xl\"></fa-icon>\n    </div>\n  `,\n})\nexport class SpxAlertComponent {\n  _autoCloseTimeout: any;\n  @Output() spxClose: EventEmitter<void> = new EventEmitter<void>();\n  @Input() spxAutoclose?: number;\n  @Input() spxCloseable? = false;\n  @Input() spxHideTitle = false;\n  @Input() spxTitle?: string;\n  @Input() spxMarginTop = false;\n  @Input() spxSeverity?: SpxSeverityEnum;\n  @Input() tick = {};\n\n  get isSeverityError() { return this.spxSeverity === SpxSeverityEnum.error; }\n  get isSeverityInfo() { return this.spxSeverity === SpxSeverityEnum.info; }\n  get isSeveritySuccess() { return this.spxSeverity === SpxSeverityEnum.success; }\n  get isSeverityWarning() { return this.spxSeverity === SpxSeverityEnum.warning; }\n  faCheck = faCheck;\n  faCircleInfo = faCircleInfo;\n  faTriangleExclamation = faTriangleExclamation;\n  faTimes = faTimes;\n\n  componentDidLoad() {\n    if (this.spxAutoclose) {\n      this.prepareAutoClose();\n    }\n    if (!this.spxTitle) {\n      this._assignDefaultTitle();\n    }\n  }\n\n  private prepareAutoClose(): void {\n    this._autoCloseTimeout = setTimeout(() => {\n      this.onClose();\n      this._autoCloseTimeout = null;\n      this.tick = {};\n    }, this.spxAutoclose);\n  }\n\n  private _assignDefaultTitle(): void {\n    switch (this.spxSeverity) {\n      case SpxSeverityEnum.error:\n        this.spxTitle = 'Error';\n        break;\n      case SpxSeverityEnum.info:\n        this.spxTitle = 'Info';\n        break;\n      case SpxSeverityEnum.success:\n        this.spxTitle = 'Notification';\n        break;\n      case SpxSeverityEnum.warning:\n        this.spxTitle = 'Warning';\n        break;\n    }\n  }\n\n  onClose() {\n    if (this.spxCloseable) {\n      this.spxClose.emit();\n    }\n  }\n}\n","import { SpxSeverityEnum } from \"@softpak/components/spx-helpers\";\n\nexport class SpxAlertI {\n  closeable?: boolean;\n  id?: number;\n  message?: string;\n  severity?: SpxSeverityEnum;\n}\n","/**\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-button.mjs

@@ -1,3 +1,4 @@
+import { NgClass } from '@angular/common';
 import * as i0 from '@angular/core';
 import { EventEmitter, Component, HostBinding, Input, Output } from '@angular/core';
 import { SpxSeverityEnum } from '@softpak/components/spx-helpers';
@@ -21,73 +22,82 @@ class SpxButtonComponent {
     get hostClassBlock() { return this.spxFullWidth; }
     get hostClassHFull() { return this.spxFullHeight; }
     get hostClassWFull() { return this.spxFullWidth; }
+    get severityError() { return this.spxSeverity === SpxSeverityEnum.error; }
+    get severityInfo() { return this.spxSeverity === SpxSeverityEnum.info; }
+    get severitySuccess() { return this.spxSeverity === SpxSeverityEnum.success; }
+    get severityWarning() { return this.spxSeverity === SpxSeverityEnum.warning; }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: SpxButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.2", type: SpxButtonComponent, isStandalone: true, selector: "spx-button", inputs: { spxDisabled: "spxDisabled", spxClass: "spxClass", spxClassObject: "spxClassObject", spxForm: "spxForm", spxFullHeight: "spxFullHeight", spxFullWidth: "spxFullWidth", spxSeverity: "spxSeverity", spxSize: "spxSize", spxTabIndex: "spxTabIndex", spxType: "spxType" }, outputs: { spxClick: "spxClick" }, host: { properties: { "class.block": "this.hostClassBlock", "class.h-full": "this.hostClassHFull", "class.w-full": "this.hostClassWFull" } }, ngImport: i0, template: `
   <button
-    class="border border-transparent font-medium px-4 py-2 relative rounded text-center text-white focus:outline-none focus:ring-2 focus:ring-offset-2 text-sm"
+    class="border border-transparent font-bold px-4 py-2 relative rounded text-center text-white focus:outline-none focus:ring-2 focus:ring-offset-2"
     [class.h-full]="this.spxFullHeight"
     [class.w-full]="this.spxFullWidth"
-    [class.bg-blue-600]="!this.spxSeverity || this.spxSeverity === 'info'"
-    [class.focus:ring-blue-500]="!this.spxSeverity || this.spxSeverity === 'info'"
-    [class.hover:bg-blue-800]="!this.spxSeverity || this.spxSeverity === 'info'"
-    [class.bg-red-600]="!this.spxSeverity || this.spxSeverity === 'error'"
-    [class.focus:ring-red-500]="!this.spxSeverity || this.spxSeverity === 'error'"
-    [class.hover:bg-red-800]="!this.spxSeverity || this.spxSeverity === 'error'"
-    [class.bg-lime-600]="!this.spxSeverity || this.spxSeverity === 'success'"
-    [class.focus:ring-lime-500]="!this.spxSeverity || this.spxSeverity === 'success'"
-    [class.hover:bg-lime-800]="!this.spxSeverity || this.spxSeverity === 'success'"
-    [class.bg-amber-600]="!this.spxSeverity || this.spxSeverity === 'warning'"
-    [class.focus:ring-amber-500]="!this.spxSeverity || this.spxSeverity === 'warning'"
-    [class.hover:bg-amber-800]="!this.spxSeverity || this.spxSeverity === 'warning'"
+    [class.bg-blue-600]="!this.spxSeverity || this.severityInfo"
+    [class.focus:ring-blue-500]="!this.spxSeverity || this.severityInfo"
+    [class.hover:bg-blue-800]="!this.spxSeverity || this.severityInfo"
+    [class.bg-red-600]="this.severityError"
+    [class.focus:ring-red-500]="this.severityError"
+    [class.hover:bg-red-800]="this.severityError"
+    [class.bg-lime-600]="this.severitySuccess"
+    [class.focus:ring-lime-500]="this.severitySuccess"
+    [class.hover:bg-lime-800]="this.severitySuccess"
+    [class.bg-amber-600]="this.severityWarning"
+    [class.focus:ring-amber-500]="this.severityWarning"
+    [class.hover:bg-amber-800]="this.severityWarning"
     [class.text-xl]="this.spxSize === 'xl'"
     [class.text-lg]="this.spxSize === 'lg'"
     [class.cursor-pointer]="!this.spxDisabled"
     [class.cursor-not-allowed]="this.spxDisabled"
     [class.opacity-50]="this.spxDisabled"
     [class.focus:ring-0]="this.spxDisabled"
-    [class.hover:bg-red-600]="this.spxDisabled && this.spxSeverity === 'error'"
-    [class.hover:bg-blue-600]="this.spxDisabled && this.spxSeverity === 'info'"
-    [class.hover:bg-lime-600]="this.spxDisabled && this.spxSeverity === 'success'"
-    [class.hover:bg-amber-600]="this.spxDisabled && this.spxSeverity === 'warning'"
+    [class.hover:bg-red-600]="this.spxDisabled && this.severityError"
+    [class.hover:bg-blue-600]="this.spxDisabled && this.severityInfo"
+    [class.hover:bg-lime-600]="this.spxDisabled && this.severitySuccess"
+    [class.hover:bg-amber-600]="this.spxDisabled && this.severityWarning"
+    [ngClass]="this.spxClass ? this.spxClass : undefined"
     [attr.disabled]="this.spxDisabled ? this.spxDisabled : undefined"
     [attr.form]="this.spxForm ? this.spxForm : undefined"
     [attr.tabindex]="this.spxTabIndex ? this.spxTabIndex : undefined"
     [attr.type]="this.spxType ? this.spxType : undefined"
     (click)="this.handleClick()"
-    part="button"><ng-content></ng-content></button>`, isInline: true }); }
+    part="button"><ng-content></ng-content></button>`, isInline: true, dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: SpxButtonComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'spx-button',
                     standalone: true,
+                    imports: [
+                        NgClass,
+                    ],
                     template: `
   <button
-    class="border border-transparent font-medium px-4 py-2 relative rounded text-center text-white focus:outline-none focus:ring-2 focus:ring-offset-2 text-sm"
+    class="border border-transparent font-bold px-4 py-2 relative rounded text-center text-white focus:outline-none focus:ring-2 focus:ring-offset-2"
     [class.h-full]="this.spxFullHeight"
     [class.w-full]="this.spxFullWidth"
-    [class.bg-blue-600]="!this.spxSeverity || this.spxSeverity === 'info'"
-    [class.focus:ring-blue-500]="!this.spxSeverity || this.spxSeverity === 'info'"
-    [class.hover:bg-blue-800]="!this.spxSeverity || this.spxSeverity === 'info'"
-    [class.bg-red-600]="!this.spxSeverity || this.spxSeverity === 'error'"
-    [class.focus:ring-red-500]="!this.spxSeverity || this.spxSeverity === 'error'"
-    [class.hover:bg-red-800]="!this.spxSeverity || this.spxSeverity === 'error'"
-    [class.bg-lime-600]="!this.spxSeverity || this.spxSeverity === 'success'"
-    [class.focus:ring-lime-500]="!this.spxSeverity || this.spxSeverity === 'success'"
-    [class.hover:bg-lime-800]="!this.spxSeverity || this.spxSeverity === 'success'"
-    [class.bg-amber-600]="!this.spxSeverity || this.spxSeverity === 'warning'"
-    [class.focus:ring-amber-500]="!this.spxSeverity || this.spxSeverity === 'warning'"
-    [class.hover:bg-amber-800]="!this.spxSeverity || this.spxSeverity === 'warning'"
+    [class.bg-blue-600]="!this.spxSeverity || this.severityInfo"
+    [class.focus:ring-blue-500]="!this.spxSeverity || this.severityInfo"
+    [class.hover:bg-blue-800]="!this.spxSeverity || this.severityInfo"
+    [class.bg-red-600]="this.severityError"
+    [class.focus:ring-red-500]="this.severityError"
+    [class.hover:bg-red-800]="this.severityError"
+    [class.bg-lime-600]="this.severitySuccess"
+    [class.focus:ring-lime-500]="this.severitySuccess"
+    [class.hover:bg-lime-800]="this.severitySuccess"
+    [class.bg-amber-600]="this.severityWarning"
+    [class.focus:ring-amber-500]="this.severityWarning"
+    [class.hover:bg-amber-800]="this.severityWarning"
     [class.text-xl]="this.spxSize === 'xl'"
     [class.text-lg]="this.spxSize === 'lg'"
     [class.cursor-pointer]="!this.spxDisabled"
     [class.cursor-not-allowed]="this.spxDisabled"
     [class.opacity-50]="this.spxDisabled"
     [class.focus:ring-0]="this.spxDisabled"
-    [class.hover:bg-red-600]="this.spxDisabled && this.spxSeverity === 'error'"
-    [class.hover:bg-blue-600]="this.spxDisabled && this.spxSeverity === 'info'"
-    [class.hover:bg-lime-600]="this.spxDisabled && this.spxSeverity === 'success'"
-    [class.hover:bg-amber-600]="this.spxDisabled && this.spxSeverity === 'warning'"
+    [class.hover:bg-red-600]="this.spxDisabled && this.severityError"
+    [class.hover:bg-blue-600]="this.spxDisabled && this.severityInfo"
+    [class.hover:bg-lime-600]="this.spxDisabled && this.severitySuccess"
+    [class.hover:bg-amber-600]="this.spxDisabled && this.severityWarning"
+    [ngClass]="this.spxClass ? this.spxClass : undefined"
     [attr.disabled]="this.spxDisabled ? this.spxDisabled : undefined"
     [attr.form]="this.spxForm ? this.spxForm : undefined"
     [attr.tabindex]="this.spxTabIndex ? this.spxTabIndex : undefined"

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

@@ -1 +1 @@
-{"version":3,"file":"softpak-components-spx-button.mjs","sources":["../../../../projects/softpak/components/spx-button/spx-button.component.ts","../../../../projects/softpak/components/spx-button/softpak-components-spx-button.ts"],"sourcesContent":["import { Component, EventEmitter, HostBinding, Input, Output } from '@angular/core';\nimport { SpxSeverityEnum } from '@softpak/components/spx-helpers';\n\n@Component({\n  selector: 'spx-button',\n  standalone: true,\n  template: `\n  <button\n    class=\"border border-transparent font-medium px-4 py-2 relative rounded text-center text-white focus:outline-none focus:ring-2 focus:ring-offset-2 text-sm\"\n    [class.h-full]=\"this.spxFullHeight\"\n    [class.w-full]=\"this.spxFullWidth\"\n    [class.bg-blue-600]=\"!this.spxSeverity || this.spxSeverity === 'info'\"\n    [class.focus:ring-blue-500]=\"!this.spxSeverity || this.spxSeverity === 'info'\"\n    [class.hover:bg-blue-800]=\"!this.spxSeverity || this.spxSeverity === 'info'\"\n    [class.bg-red-600]=\"!this.spxSeverity || this.spxSeverity === 'error'\"\n    [class.focus:ring-red-500]=\"!this.spxSeverity || this.spxSeverity === 'error'\"\n    [class.hover:bg-red-800]=\"!this.spxSeverity || this.spxSeverity === 'error'\"\n    [class.bg-lime-600]=\"!this.spxSeverity || this.spxSeverity === 'success'\"\n    [class.focus:ring-lime-500]=\"!this.spxSeverity || this.spxSeverity === 'success'\"\n    [class.hover:bg-lime-800]=\"!this.spxSeverity || this.spxSeverity === 'success'\"\n    [class.bg-amber-600]=\"!this.spxSeverity || this.spxSeverity === 'warning'\"\n    [class.focus:ring-amber-500]=\"!this.spxSeverity || this.spxSeverity === 'warning'\"\n    [class.hover:bg-amber-800]=\"!this.spxSeverity || this.spxSeverity === 'warning'\"\n    [class.text-xl]=\"this.spxSize === 'xl'\"\n    [class.text-lg]=\"this.spxSize === 'lg'\"\n    [class.cursor-pointer]=\"!this.spxDisabled\"\n    [class.cursor-not-allowed]=\"this.spxDisabled\"\n    [class.opacity-50]=\"this.spxDisabled\"\n    [class.focus:ring-0]=\"this.spxDisabled\"\n    [class.hover:bg-red-600]=\"this.spxDisabled && this.spxSeverity === 'error'\"\n    [class.hover:bg-blue-600]=\"this.spxDisabled && this.spxSeverity === 'info'\"\n    [class.hover:bg-lime-600]=\"this.spxDisabled && this.spxSeverity === 'success'\"\n    [class.hover:bg-amber-600]=\"this.spxDisabled && this.spxSeverity === 'warning'\"\n    [attr.disabled]=\"this.spxDisabled ? this.spxDisabled : undefined\"\n    [attr.form]=\"this.spxForm ? this.spxForm : undefined\"\n    [attr.tabindex]=\"this.spxTabIndex ? this.spxTabIndex : undefined\"\n    [attr.type]=\"this.spxType ? this.spxType : undefined\"\n    (click)=\"this.handleClick()\"\n    part=\"button\"><ng-content></ng-content></button>`,\n})\nexport class SpxButtonComponent {\n  @HostBinding('class.block') get hostClassBlock() { return this.spxFullWidth; }\n  @HostBinding('class.h-full') get hostClassHFull() { return this.spxFullHeight; }\n  @HostBinding('class.w-full') get hostClassWFull() { return this.spxFullWidth; }\n  @Input() spxDisabled = false;\n  @Input() spxClass?: string;\n  @Input() spxClassObject?: object;\n  @Input() spxForm?: string;\n  @Input() spxFullHeight?: boolean;\n  @Input() spxFullWidth?: boolean;\n  @Input() spxSeverity: SpxSeverityEnum = SpxSeverityEnum.info;\n  @Input() spxSize: 'lg' | 'xl' = 'lg';\n  @Input() spxTabIndex?: number;\n  @Input() spxType: 'button' | 'submit' = 'submit';\n  @Output() spxClick: EventEmitter<void> = new EventEmitter<void>();\n\n  hasShadowDom = (el: HTMLElement) => {\n    return !!el.shadowRoot && !!(el as any).attachShadow;\n  };\n  handleClick = () => {\n    if (!this.spxDisabled) {\n      this.spxClick.emit();\n    }\n  }\n}\n","/**\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-button.mjs","sources":["../../../../projects/softpak/components/spx-button/spx-button.component.ts","../../../../projects/softpak/components/spx-button/softpak-components-spx-button.ts"],"sourcesContent":["import { NgClass } from '@angular/common';\nimport { Component, EventEmitter, HostBinding, Input, Output } from '@angular/core';\nimport { SpxSeverityEnum } from '@softpak/components/spx-helpers';\n\n@Component({\n  selector: 'spx-button',\n  standalone: true,\n  imports: [\n    NgClass,\n  ],\n  template: `\n  <button\n    class=\"border border-transparent font-bold px-4 py-2 relative rounded text-center text-white focus:outline-none focus:ring-2 focus:ring-offset-2\"\n    [class.h-full]=\"this.spxFullHeight\"\n    [class.w-full]=\"this.spxFullWidth\"\n    [class.bg-blue-600]=\"!this.spxSeverity || this.severityInfo\"\n    [class.focus:ring-blue-500]=\"!this.spxSeverity || this.severityInfo\"\n    [class.hover:bg-blue-800]=\"!this.spxSeverity || this.severityInfo\"\n    [class.bg-red-600]=\"this.severityError\"\n    [class.focus:ring-red-500]=\"this.severityError\"\n    [class.hover:bg-red-800]=\"this.severityError\"\n    [class.bg-lime-600]=\"this.severitySuccess\"\n    [class.focus:ring-lime-500]=\"this.severitySuccess\"\n    [class.hover:bg-lime-800]=\"this.severitySuccess\"\n    [class.bg-amber-600]=\"this.severityWarning\"\n    [class.focus:ring-amber-500]=\"this.severityWarning\"\n    [class.hover:bg-amber-800]=\"this.severityWarning\"\n    [class.text-xl]=\"this.spxSize === 'xl'\"\n    [class.text-lg]=\"this.spxSize === 'lg'\"\n    [class.cursor-pointer]=\"!this.spxDisabled\"\n    [class.cursor-not-allowed]=\"this.spxDisabled\"\n    [class.opacity-50]=\"this.spxDisabled\"\n    [class.focus:ring-0]=\"this.spxDisabled\"\n    [class.hover:bg-red-600]=\"this.spxDisabled && this.severityError\"\n    [class.hover:bg-blue-600]=\"this.spxDisabled && this.severityInfo\"\n    [class.hover:bg-lime-600]=\"this.spxDisabled && this.severitySuccess\"\n    [class.hover:bg-amber-600]=\"this.spxDisabled && this.severityWarning\"\n    [ngClass]=\"this.spxClass ? this.spxClass : undefined\"\n    [attr.disabled]=\"this.spxDisabled ? this.spxDisabled : undefined\"\n    [attr.form]=\"this.spxForm ? this.spxForm : undefined\"\n    [attr.tabindex]=\"this.spxTabIndex ? this.spxTabIndex : undefined\"\n    [attr.type]=\"this.spxType ? this.spxType : undefined\"\n    (click)=\"this.handleClick()\"\n    part=\"button\"><ng-content></ng-content></button>`,\n})\nexport class SpxButtonComponent {\n  @HostBinding('class.block') get hostClassBlock() { return this.spxFullWidth; }\n  @HostBinding('class.h-full') get hostClassHFull() { return this.spxFullHeight; }\n  @HostBinding('class.w-full') get hostClassWFull() { return this.spxFullWidth; }\n  @Input() spxDisabled = false;\n  @Input() spxClass?: string;\n  @Input() spxClassObject?: object;\n  @Input() spxForm?: string;\n  @Input() spxFullHeight?: boolean;\n  @Input() spxFullWidth?: boolean;\n  @Input() spxSeverity: SpxSeverityEnum = SpxSeverityEnum.info;\n  @Input() spxSize: 'lg' | 'xl' = 'lg';\n  @Input() spxTabIndex?: number;\n  @Input() spxType: 'button' | 'submit' = 'submit';\n  @Output() spxClick: EventEmitter<void> = new EventEmitter<void>();\n\n  get severityError() { return this.spxSeverity === SpxSeverityEnum.error; }\n  get severityInfo() { return this.spxSeverity === SpxSeverityEnum.info; }\n  get severitySuccess() { return this.spxSeverity === SpxSeverityEnum.success; }\n  get severityWarning() { return this.spxSeverity === SpxSeverityEnum.warning; }\n\n  hasShadowDom = (el: HTMLElement) => {\n    return !!el.shadowRoot && !!(el as any).attachShadow;\n  };\n  handleClick = () => {\n    if (!this.spxDisabled) {\n      this.spxClick.emit();\n    }\n  }\n}\n","/**\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

@@ -0,0 +1,125 @@
+import * as i0 from '@angular/core';
+import { EventEmitter, Component, Input, Output } from '@angular/core';
+import * as i1 from '@angular/forms';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { spxValidatorRequired, SpxValidationModule } from '@softpak/components/spx-validation';
+import { CommonModule } from '@angular/common';
+import { SpxInputTypeEnum, SpxInputComponent } from '@softpak/components/spx-inputs';
+import { SpxFormViewComponent } from '@softpak/components/spx-form-view';
+import { SpxButtonComponent } from '@softpak/components/spx-button';
+import { SpxSeverityEnum } from '@softpak/components/spx-helpers';
+
+const sectionChangeDetails = 'changeDetails';
+const ctrlContainerType = 'containerType';
+const ctrlTonsTested = 'tonsTested';
+const ctrlLicensePlate = 'licensePlate';
+const ctrlCategory = 'category';
+class SpxChangeDetailsComponent {
+    get ctrlCategory() { return this.formGroup.get(ctrlCategory); }
+    get ctrlContainerType() { return this.formGroup.get(ctrlContainerType); }
+    get ctrlLicensePlate() { return this.formGroup.get(ctrlLicensePlate); }
+    get ctrlTonsTested() { return this.formGroup.get(ctrlTonsTested); }
+    constructor(formBuilder) {
+        this.formBuilder = formBuilder;
+        this.showCategory = false;
+        this.suggestions = {};
+        this.submit = new EventEmitter();
+        this.inputTypeAutocomplete = SpxInputTypeEnum.autocomplete;
+        this.inputTypeRadio = SpxInputTypeEnum.radio;
+        this.inputTypeText = SpxInputTypeEnum.text;
+        this.severitySuccess = SpxSeverityEnum.success;
+        this.sections = [
+            {
+                key: sectionChangeDetails,
+                showTitle: () => false,
+                fields: [
+                    {
+                        key: ctrlContainerType,
+                        type: () => SpxInputTypeEnum.text,
+                        label: () => this.txtContainerType,
+                        capitalize: () => true,
+                        afterValueChange: () => {
+                            this.ctrlTonsTested.setValue(null);
+                        },
+                    },
+                    {
+                        key: ctrlTonsTested,
+                        type: () => SpxInputTypeEnum.radio,
+                        label: () => this.txtTonsTested,
+                        show: () => this.suggestions?.[ctrlTonsTested] && this.suggestions?.[ctrlTonsTested].length && this.suggestions?.[ctrlTonsTested].length > 0
+                    },
+                    {
+                        key: ctrlLicensePlate,
+                        type: () => SpxInputTypeEnum.text,
+                        label: () => this.txtLicensePlate,
+                        capitalize: () => true,
+                    },
+                    {
+                        key: ctrlCategory,
+                        type: () => SpxInputTypeEnum.text,
+                        label: () => this.txtCategory,
+                        capitalize: () => true,
+                        show: () => this.showCategory,
+                        validators: () => this.showCategory ? [spxValidatorRequired()] : [],
+                    }
+                ]
+            }
+        ];
+    }
+    createForm() {
+        return SpxFormViewComponent.createForm(this.formBuilder, this.sections);
+    }
+    ngOnDestroy() {
+        if (this.inputChanges) {
+            this.inputChanges.unsubscribe();
+        }
+    }
+    getRawValidators(formControl) {
+        return formControl._rawValidators;
+    }
+    onSubmit() {
+        this.submit.emit({
+            category: this.ctrlCategory.value,
+            containerType: this.ctrlContainerType.value,
+            licensePlate: this.ctrlLicensePlate.value,
+            tonsTested: this.ctrlTonsTested.value,
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: SpxChangeDetailsComponent, deps: [{ token: i1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.2", type: SpxChangeDetailsComponent, isStandalone: true, selector: "spx-change-details", inputs: { formGroup: "formGroup", showCategory: "showCategory", suggestions: "suggestions", txtCategory: "txtCategory", txtContainerType: "txtContainerType", txtLicensePlate: "txtLicensePlate", txtTonsTested: "txtTonsTested" }, outputs: { 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    [spxSections]=\"sections\"\n    [spxSuggestions]=\"suggestions\">\n  </spx-form-view>\n  <spx-button\n    [spxFullWidth]=\"true\"\n    [spxSeverity]=\"severitySuccess\">\n    Save\n  </spx-button>\n</form>", dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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: SpxButtonComponent, selector: "spx-button", inputs: ["spxDisabled", "spxClass", "spxClassObject", "spxForm", "spxFullHeight", "spxFullWidth", "spxSeverity", "spxSize", "spxTabIndex", "spxType"], outputs: ["spxClick"] }, { kind: "component", type: SpxFormViewComponent, selector: "spx-form-view", inputs: ["spxFormGroup", "spxSections", "spxSuggestions"] }, { kind: "ngmodule", type: SpxValidationModule }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: SpxChangeDetailsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'spx-change-details', standalone: true, imports: [
+                        CommonModule,
+                        FormsModule,
+                        ReactiveFormsModule,
+                        SpxButtonComponent,
+                        SpxFormViewComponent,
+                        SpxInputComponent,
+                        SpxValidationModule,
+                    ], 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    [spxSections]=\"sections\"\n    [spxSuggestions]=\"suggestions\">\n  </spx-form-view>\n  <spx-button\n    [spxFullWidth]=\"true\"\n    [spxSeverity]=\"severitySuccess\">\n    Save\n  </spx-button>\n</form>" }]
+        }], ctorParameters: () => [{ type: i1.FormBuilder }], propDecorators: { formGroup: [{
+                type: Input
+            }], showCategory: [{
+                type: Input
+            }], suggestions: [{
+                type: Input
+            }], txtCategory: [{
+                type: Input
+            }], txtContainerType: [{
+                type: Input
+            }], txtLicensePlate: [{
+                type: Input
+            }], txtTonsTested: [{
+                type: Input
+            }], submit: [{
+                type: Output
+            }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { SpxChangeDetailsComponent, ctrlCategory, ctrlContainerType, ctrlLicensePlate, ctrlTonsTested, sectionChangeDetails };
+//# sourceMappingURL=softpak-components-spx-change-details.mjs.map

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

@@ -0,0 +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 { Component, EventEmitter, Input, Output } from '@angular/core';\nimport { FormBuilder, FormControl, FormGroup, FormsModule, ReactiveFormsModule } from '@angular/forms';\nimport { Subscription } from 'rxjs';\nimport { spxValidatorRequired, SpxValidationModule } from '@softpak/components/spx-validation';\nimport { CommonModule } from '@angular/common';\nimport { SpxInputComponent, SpxInputTypeEnum } from '@softpak/components/spx-inputs';\nimport { SpxFormSectionI, SpxFormViewComponent } from '@softpak/components/spx-form-view';\nimport { SpxButtonComponent } from '@softpak/components/spx-button';\nimport { SpxSeverityEnum } from '@softpak/components/spx-helpers';\nimport { SpxChangeDetailsValueI } from './spx-change-details-value.interface';\n\nexport const sectionChangeDetails = 'changeDetails';\nexport const ctrlContainerType = 'containerType';\nexport const ctrlTonsTested = 'tonsTested';\nexport const ctrlLicensePlate = 'licensePlate';\nexport const ctrlCategory = 'category';\n\n@Component({\n  selector: 'spx-change-details',\n  templateUrl: './spx-change-details.component.html',\n  standalone: true,\n  imports: [\n    CommonModule,\n    FormsModule,\n    ReactiveFormsModule,\n    SpxButtonComponent,\n    SpxFormViewComponent,\n    SpxInputComponent,\n    SpxValidationModule,\n  ]\n})\nexport class SpxChangeDetailsComponent {\n  @Input() formGroup!: FormGroup;\n  @Input() showCategory = false;\n  @Input() suggestions: any = {};\n  @Input() txtCategory!: string;\n  @Input() txtContainerType!: string;\n  @Input() txtLicensePlate!: string;\n  @Input() txtTonsTested!: string;\n  @Output() submit: EventEmitter<SpxChangeDetailsValueI> = new EventEmitter<SpxChangeDetailsValueI>();\n  inputTypeAutocomplete = SpxInputTypeEnum.autocomplete;\n  inputTypeRadio = SpxInputTypeEnum.radio;\n  inputTypeText = SpxInputTypeEnum.text;\n  severitySuccess = SpxSeverityEnum.success;\n  \n  sections: SpxFormSectionI[] = [\n    {\n      key: sectionChangeDetails,\n      showTitle: () => false,\n      fields: [\n        {\n          key: ctrlContainerType,\n          type: () => SpxInputTypeEnum.text,\n          label: () => this.txtContainerType,\n          capitalize: () => true,\n          afterValueChange: () => {\n            this.ctrlTonsTested.setValue(null);\n          },\n        },\n        {\n          key: ctrlTonsTested,\n          type: () => SpxInputTypeEnum.radio,\n          label: () => this.txtTonsTested,\n          show: () => this.suggestions?.[ctrlTonsTested] && this.suggestions?.[ctrlTonsTested].length && this.suggestions?.[ctrlTonsTested].length > 0\n        },\n        {\n          key: ctrlLicensePlate,\n          type: () => SpxInputTypeEnum.text,\n          label: () => this.txtLicensePlate,\n          capitalize: () => true,\n        },\n        {\n          key: ctrlCategory,\n          type: () => SpxInputTypeEnum.text,\n          label: () => this.txtCategory,\n          capitalize: () => true,\n          show: () => this.showCategory,\n          validators: () => this.showCategory ? [spxValidatorRequired()] : [],\n        }\n      ]\n    }\n  ];\n\n  get ctrlCategory(): FormControl { return this.formGroup.get(ctrlCategory) as FormControl; }\n  get ctrlContainerType(): FormControl { return this.formGroup.get(ctrlContainerType) as FormControl; }\n  get ctrlLicensePlate(): FormControl { return this.formGroup.get(ctrlLicensePlate) as FormControl; }\n  get ctrlTonsTested(): FormControl { return this.formGroup.get(ctrlTonsTested) as FormControl; }\n\n  private inputChanges?: Subscription;\n\n  constructor(readonly formBuilder: FormBuilder) {\n  }\n\n  createForm(): FormGroup {\n    return SpxFormViewComponent.createForm(this.formBuilder, this.sections);\n  }\n\n  ngOnDestroy(): void {\n    if (this.inputChanges) {\n      this.inputChanges.unsubscribe();\n    }\n  }\n\n  getRawValidators(formControl: FormControl) {\n    return (formControl as any)._rawValidators;\n  }\n\n  onSubmit(): void {\n    this.submit.emit({\n      category: this.ctrlCategory.value,\n      containerType: this.ctrlContainerType.value,\n      licensePlate: this.ctrlLicensePlate.value,\n      tonsTested: this.ctrlTonsTested.value,\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    [spxSections]=\"sections\"\n    [spxSuggestions]=\"suggestions\">\n  </spx-form-view>\n  <spx-button\n    [spxFullWidth]=\"true\"\n    [spxSeverity]=\"severitySuccess\">\n    Save\n  </spx-button>\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

@@ -5,7 +5,7 @@ import * as i1$1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i1 from '@angular/forms';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { SpxInputComponent } from '@softpak/components/spx-inputs';
+import { SpxInputTypeEnum, SpxInputComponent } from '@softpak/components/spx-inputs';
 import { SpxFormSectionComponent } from '@softpak/components/spx-form-section';
 import { SpxAppChannelTypeEnum } from '@softpak/components/spx-app-configuration';
 
@@ -54,11 +54,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImpor
 class SpxChannelSelectionComponent {
     constructor() {
         this.options = [];
+        this.inputTypeRadio = SpxInputTypeEnum.radio;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: SpxChannelSelectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.2", type: SpxChannelSelectionComponent, isStandalone: true, selector: "spx-channel-selection", inputs: { control: "control", options: "options", txtChannel: "txtChannel" }, ngImport: i0, template: `
   <spx-input [formControl]="control" [spxLabel]="txtChannel"
-      [spxType]="'radio'" [spxSuggestions]="options"></spx-input>
+      [spxType]="inputTypeRadio" [spxSuggestions]="options"></spx-input>
   `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: SpxInputComponent, selector: "spx-input", inputs: ["spxLabel", "spxMax", "spxMin", "spxName", "spxReadonly", "spxAutofocus", "spxInputMode", "spxPattern", "spxRequired", "spxSelectMonth", "spxSelectDay", "spxShowEdit", "spxShowHelp", "spxCompact", "spxShowClear", "spxShowSearch", "spxShowValidationMessages", "spxStep", "spxSuggestions", "spxType", "spxValidators", "value", "spxCapitalize", "spxFocused"], outputs: ["spxBlur", "spxClear", "spxChange", "spxFocus", "spxEdit", "spxHelp", "spxSearch"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: SpxChannelSelectionComponent, decorators: [{
@@ -67,7 +68,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImpor
                     selector: 'spx-channel-selection',
                     template: `
   <spx-input [formControl]="control" [spxLabel]="txtChannel"
-      [spxType]="'radio'" [spxSuggestions]="options"></spx-input>
+      [spxType]="inputTypeRadio" [spxSuggestions]="options"></spx-input>
   `,
                     standalone: true,
                     imports: [
@@ -88,12 +89,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImpor
 class SpxCompanySelectionComponent {
     constructor() {
         this.options = [];
+        this.inputTypeRadio = SpxInputTypeEnum.radio;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: SpxCompanySelectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.2", type: SpxCompanySelectionComponent, isStandalone: true, selector: "spx-company-selection", inputs: { control: "control", options: "options", txtChannel: "txtChannel", txtCompany: "txtCompany" }, ngImport: i0, template: `<spx-form-section [spxTitle]="txtChannel" [spxIndex]="2">
   <div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-3">
     <spx-input [formControl]="control" [spxLabel]="txtCompany"
-      [spxType]="'radio'" [spxSuggestions]="options"></spx-input>
+      [spxType]="inputTypeRadio" [spxSuggestions]="options"></spx-input>
   </div>
 </spx-form-section>`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: SpxInputComponent, selector: "spx-input", inputs: ["spxLabel", "spxMax", "spxMin", "spxName", "spxReadonly", "spxAutofocus", "spxInputMode", "spxPattern", "spxRequired", "spxSelectMonth", "spxSelectDay", "spxShowEdit", "spxShowHelp", "spxCompact", "spxShowClear", "spxShowSearch", "spxShowValidationMessages", "spxStep", "spxSuggestions", "spxType", "spxValidators", "value", "spxCapitalize", "spxFocused"], outputs: ["spxBlur", "spxClear", "spxChange", "spxFocus", "spxEdit", "spxHelp", "spxSearch"] }, { kind: "component", type: SpxFormSectionComponent, selector: "spx-form-section", inputs: ["spxIndex", "spxIndexSecondary", "spxTitle", "spxShowTitle"] }] }); }
 }
@@ -104,7 +106,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImpor
                     template: `<spx-form-section [spxTitle]="txtChannel" [spxIndex]="2">
   <div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-3">
     <spx-input [formControl]="control" [spxLabel]="txtCompany"
-      [spxType]="'radio'" [spxSuggestions]="options"></spx-input>
+      [spxType]="inputTypeRadio" [spxSuggestions]="options"></spx-input>
   </div>
 </spx-form-section>`,
                     standalone: true,

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

@@ -1 +1 @@
-{"version":3,"file":"softpak-components-spx-channel-selection.mjs","sources":["../../../../projects/softpak/components/spx-channel-selection/src/spx-channel-indicator.component.ts","../../../../projects/softpak/components/spx-channel-selection/src/spx-channel-selection.component.ts","../../../../projects/softpak/components/spx-channel-selection/src/spx-company-selection.component.ts","../../../../projects/softpak/components/spx-channel-selection/src/spx-welcome.component.ts","../../../../projects/softpak/components/spx-channel-selection/softpak-components-spx-channel-selection.ts"],"sourcesContent":["import { Component, Input, Output, EventEmitter } from '@angular/core';\nimport { SpxAppChannelI, SpxAppChannelTypeEnum } from '@softpak/components/spx-app-configuration';\nimport { SpxButtonComponent } from '@softpak/components/spx-button';\n\n@Component({\n  selector: 'spx-channel-indicator',\n  template: `<div class=\"bg-white p-3 rounded flex gap-3 items-center text-black\">\n    <div class=\"grow\">\n      <div class=\"text-lg font-bold\">{{ channel?.brand }}</div>\n      <div class=\"text-base text-gray-600\">{{ channelType }}</div>\n    </div>\n    <spx-button (click)=\"onChange()\" [spxType]=\"'button'\">{{ txtChange }}</spx-button>\n  </div>`,\n  standalone: true,\n  imports: [\n    SpxButtonComponent,\n  ],\n})\nexport class SpxChannelIndicatorComponent {\n  @Input() channel?: SpxAppChannelI;\n  @Input() channelType?: SpxAppChannelTypeEnum;\n  @Input() txtChange!: string;\n  @Output() spxChange: EventEmitter<void> = new EventEmitter<void>();\n\n  constructor(\n  ) { }\n\n  onChange() {\n    this.spxChange.emit();\n  }\n}\n","import { CommonModule } from '@angular/common';\nimport { Component, Input } from '@angular/core';\nimport { FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';\nimport { SpxInputComponent, SpxValuePair } from '@softpak/components/spx-inputs';\n\n@Component({\n  selector: 'spx-channel-selection',\n  template: `\n  <spx-input [formControl]=\"control\" [spxLabel]=\"txtChannel\"\n      [spxType]=\"'radio'\" [spxSuggestions]=\"options\"></spx-input>\n  `,\n  standalone: true,\n  imports: [\n    CommonModule,\n    FormsModule,\n    ReactiveFormsModule,\n    SpxInputComponent,\n  ]\n})\nexport class SpxChannelSelectionComponent {\n  @Input() control!: FormControl;\n  @Input() options: SpxValuePair<string>[] = [];\n  @Input() txtChannel!: string;\n\n  constructor(\n  ) { }\n}\n","import { CommonModule } from '@angular/common';\nimport { Component, Input } from '@angular/core';\nimport { FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';\nimport { SpxFormSectionComponent } from '@softpak/components/spx-form-section';\nimport { SpxInputComponent, SpxValuePair } from '@softpak/components/spx-inputs';\n\n\n@Component({\n  selector: 'spx-company-selection',\n  template: `<spx-form-section [spxTitle]=\"txtChannel\" [spxIndex]=\"2\">\n  <div class=\"grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-3\">\n    <spx-input [formControl]=\"control\" [spxLabel]=\"txtCompany\"\n      [spxType]=\"'radio'\" [spxSuggestions]=\"options\"></spx-input>\n  </div>\n</spx-form-section>`,\n  standalone: true,\n  imports: [\n    CommonModule,\n    FormsModule,\n    ReactiveFormsModule,\n    SpxInputComponent,\n    SpxFormSectionComponent,\n  ]\n})\nexport class SpxCompanySelectionComponent {\n  @Input() control!: FormControl;\n  @Input() options: SpxValuePair<string>[] = [];\n  @Input() txtChannel!: string;\n  @Input() txtCompany!: string;\n\n  constructor(\n  ) { }\n}\n","import { CommonModule } from '@angular/common';\nimport { Component, Input, Output, EventEmitter } from '@angular/core';\nimport { SpxAppChannelI, SpxAppChannelTypeEnum } from '@softpak/components/spx-app-configuration';\nimport { SpxButtonComponent } from '@softpak/components/spx-button';\n\n@Component({\n  selector: 'spx-welcome',\n  template: `<div class=\"flex flex-col gap-3\">\n    <spx-button [spxFullWidth]=\"true\" *ngFor=\"let channel of filteredChannels\" (click)=\"onSelectChannel(channel)\">\n      {{ channel.brand }}\n    </spx-button>\n  </div>`,\n  standalone: true,\n  imports: [\n    CommonModule,\n    SpxButtonComponent,\n  ]\n})\nexport class SpxWelcomeComponent {\n  @Input() public channels?: SpxAppChannelI[] = [];\n  @Output() public spxSelected: EventEmitter<SpxAppChannelI> = new EventEmitter<SpxAppChannelI>();\n\n  get filteredChannels () { return (this.channels ?? [])?.filter(channel => channel.channelTypes.includes(SpxAppChannelTypeEnum.production)); }\n\n  constructor(\n  ) { }\n\n  onSelectChannel(channel: SpxAppChannelI) {\n    this.spxSelected.emit(channel);\n  }\n}\n","/**\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-channel-selection.mjs","sources":["../../../../projects/softpak/components/spx-channel-selection/src/spx-channel-indicator.component.ts","../../../../projects/softpak/components/spx-channel-selection/src/spx-channel-selection.component.ts","../../../../projects/softpak/components/spx-channel-selection/src/spx-company-selection.component.ts","../../../../projects/softpak/components/spx-channel-selection/src/spx-welcome.component.ts","../../../../projects/softpak/components/spx-channel-selection/softpak-components-spx-channel-selection.ts"],"sourcesContent":["import { Component, Input, Output, EventEmitter } from '@angular/core';\nimport { SpxAppChannelI, SpxAppChannelTypeEnum } from '@softpak/components/spx-app-configuration';\nimport { SpxButtonComponent } from '@softpak/components/spx-button';\n\n@Component({\n  selector: 'spx-channel-indicator',\n  template: `<div class=\"bg-white p-3 rounded flex gap-3 items-center text-black\">\n    <div class=\"grow\">\n      <div class=\"text-lg font-bold\">{{ channel?.brand }}</div>\n      <div class=\"text-base text-gray-600\">{{ channelType }}</div>\n    </div>\n    <spx-button (click)=\"onChange()\" [spxType]=\"'button'\">{{ txtChange }}</spx-button>\n  </div>`,\n  standalone: true,\n  imports: [\n    SpxButtonComponent,\n  ],\n})\nexport class SpxChannelIndicatorComponent {\n  @Input() channel?: SpxAppChannelI;\n  @Input() channelType?: SpxAppChannelTypeEnum;\n  @Input() txtChange!: string;\n  @Output() spxChange: EventEmitter<void> = new EventEmitter<void>();\n\n  constructor(\n  ) { }\n\n  onChange() {\n    this.spxChange.emit();\n  }\n}\n","import { CommonModule } from '@angular/common';\nimport { Component, Input } from '@angular/core';\nimport { FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';\nimport { SpxInputComponent, SpxInputTypeEnum, SpxValuePair } from '@softpak/components/spx-inputs';\n\n@Component({\n  selector: 'spx-channel-selection',\n  template: `\n  <spx-input [formControl]=\"control\" [spxLabel]=\"txtChannel\"\n      [spxType]=\"inputTypeRadio\" [spxSuggestions]=\"options\"></spx-input>\n  `,\n  standalone: true,\n  imports: [\n    CommonModule,\n    FormsModule,\n    ReactiveFormsModule,\n    SpxInputComponent,\n  ]\n})\nexport class SpxChannelSelectionComponent {\n  @Input() control!: FormControl;\n  @Input() options: SpxValuePair<string>[] = [];\n  @Input() txtChannel!: string;\n  inputTypeRadio = SpxInputTypeEnum.radio;\n\n  constructor(\n  ) { }\n}\n","import { CommonModule } from '@angular/common';\nimport { Component, Input } from '@angular/core';\nimport { FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';\nimport { SpxFormSectionComponent } from '@softpak/components/spx-form-section';\nimport { SpxInputComponent, SpxInputTypeEnum, SpxValuePair } from '@softpak/components/spx-inputs';\n\n\n@Component({\n  selector: 'spx-company-selection',\n  template: `<spx-form-section [spxTitle]=\"txtChannel\" [spxIndex]=\"2\">\n  <div class=\"grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-3\">\n    <spx-input [formControl]=\"control\" [spxLabel]=\"txtCompany\"\n      [spxType]=\"inputTypeRadio\" [spxSuggestions]=\"options\"></spx-input>\n  </div>\n</spx-form-section>`,\n  standalone: true,\n  imports: [\n    CommonModule,\n    FormsModule,\n    ReactiveFormsModule,\n    SpxInputComponent,\n    SpxFormSectionComponent,\n  ]\n})\nexport class SpxCompanySelectionComponent {\n  @Input() control!: FormControl;\n  @Input() options: SpxValuePair<string>[] = [];\n  @Input() txtChannel!: string;\n  @Input() txtCompany!: string;\n  inputTypeRadio = SpxInputTypeEnum.radio;\n\n  constructor(\n  ) { }\n}\n","import { CommonModule } from '@angular/common';\nimport { Component, Input, Output, EventEmitter } from '@angular/core';\nimport { SpxAppChannelI, SpxAppChannelTypeEnum } from '@softpak/components/spx-app-configuration';\nimport { SpxButtonComponent } from '@softpak/components/spx-button';\n\n@Component({\n  selector: 'spx-welcome',\n  template: `<div class=\"flex flex-col gap-3\">\n    <spx-button [spxFullWidth]=\"true\" *ngFor=\"let channel of filteredChannels\" (click)=\"onSelectChannel(channel)\">\n      {{ channel.brand }}\n    </spx-button>\n  </div>`,\n  standalone: true,\n  imports: [\n    CommonModule,\n    SpxButtonComponent,\n  ]\n})\nexport class SpxWelcomeComponent {\n  @Input() public channels?: SpxAppChannelI[] = [];\n  @Output() public spxSelected: EventEmitter<SpxAppChannelI> = new EventEmitter<SpxAppChannelI>();\n\n  get filteredChannels () { return (this.channels ?? [])?.filter(channel => channel.channelTypes.includes(SpxAppChannelTypeEnum.production)); }\n\n  constructor(\n  ) { }\n\n  onSelectChannel(channel: SpxAppChannelI) {\n    this.spxSelected.emit(channel);\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;;;;;;;;MAkBa,4BAA4B,CAAA;AAMvC,IAAA,WAAA,GAAA;AAFU,QAAA,IAAA,CAAA,SAAS,GAAuB,IAAI,YAAY,EAAQ,CAAC;KAG9D;IAEL,QAAQ,GAAA;AACN,QAAA,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE,CAAC;KACvB;8GAXU,4BAA4B,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA,EAAA;AAA5B,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,4BAA4B,EAZ7B,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,uBAAA,EAAA,MAAA,EAAA,EAAA,OAAA,EAAA,SAAA,EAAA,WAAA,EAAA,aAAA,EAAA,SAAA,EAAA,WAAA,EAAA,EAAA,OAAA,EAAA,EAAA,SAAA,EAAA,WAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EAAA,CAAA;;;;;;AAMH,QAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAGL,kBAAkB,EAAA,QAAA,EAAA,YAAA,EAAA,MAAA,EAAA,CAAA,aAAA,EAAA,UAAA,EAAA,gBAAA,EAAA,SAAA,EAAA,eAAA,EAAA,cAAA,EAAA,aAAA,EAAA,SAAA,EAAA,aAAA,EAAA,SAAA,CAAA,EAAA,OAAA,EAAA,CAAA,UAAA,CAAA,EAAA,CAAA,EAAA,CAAA,CAAA,EAAA;;2FAGT,4BAA4B,EAAA,UAAA,EAAA,CAAA;kBAdxC,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,QAAQ,EAAE,uBAAuB;AACjC,oBAAA,QAAQ,EAAE,CAAA;;;;;;AAMH,QAAA,CAAA;AACP,oBAAA,UAAU,EAAE,IAAI;AAChB,oBAAA,OAAO,EAAE;wBACP,kBAAkB;AACnB,qBAAA;AACF,iBAAA,CAAA;wDAEU,OAAO,EAAA,CAAA;sBAAf,KAAK;gBACG,WAAW,EAAA,CAAA;sBAAnB,KAAK;gBACG,SAAS,EAAA,CAAA;sBAAjB,KAAK;gBACI,SAAS,EAAA,CAAA;sBAAlB,MAAM;;;MCHI,4BAA4B,CAAA;AAMvC,IAAA,WAAA,GAAA;QAJS,IAAO,CAAA,OAAA,GAA2B,EAAE,CAAC;AAE9C,QAAA,IAAA,CAAA,cAAc,GAAG,gBAAgB,CAAC,KAAK,CAAC;KAGnC;8GAPM,4BAA4B,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA,EAAA;AAA5B,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,4BAA4B,EAZ7B,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,uBAAA,EAAA,MAAA,EAAA,EAAA,OAAA,EAAA,SAAA,EAAA,OAAA,EAAA,SAAA,EAAA,UAAA,EAAA,YAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EAAA,CAAA;;;AAGT,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAGC,YAAY,EACZ,EAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAA,WAAW,EACX,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,eAAA,EAAA,QAAA,EAAA,2CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAA,mBAAmB,kNACnB,iBAAiB,EAAA,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,CAAA,UAAA,EAAA,QAAA,EAAA,QAAA,EAAA,SAAA,EAAA,aAAA,EAAA,cAAA,EAAA,cAAA,EAAA,YAAA,EAAA,aAAA,EAAA,gBAAA,EAAA,cAAA,EAAA,aAAA,EAAA,aAAA,EAAA,YAAA,EAAA,cAAA,EAAA,eAAA,EAAA,2BAAA,EAAA,SAAA,EAAA,gBAAA,EAAA,SAAA,EAAA,eAAA,EAAA,OAAA,EAAA,eAAA,EAAA,YAAA,CAAA,EAAA,OAAA,EAAA,CAAA,SAAA,EAAA,UAAA,EAAA,WAAA,EAAA,UAAA,EAAA,SAAA,EAAA,SAAA,EAAA,WAAA,CAAA,EAAA,CAAA,EAAA,CAAA,CAAA,EAAA;;2FAGR,4BAA4B,EAAA,UAAA,EAAA,CAAA;kBAdxC,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,QAAQ,EAAE,uBAAuB;AACjC,oBAAA,QAAQ,EAAE,CAAA;;;AAGT,EAAA,CAAA;AACD,oBAAA,UAAU,EAAE,IAAI;AAChB,oBAAA,OAAO,EAAE;wBACP,YAAY;wBACZ,WAAW;wBACX,mBAAmB;wBACnB,iBAAiB;AAClB,qBAAA;AACF,iBAAA,CAAA;wDAEU,OAAO,EAAA,CAAA;sBAAf,KAAK;gBACG,OAAO,EAAA,CAAA;sBAAf,KAAK;gBACG,UAAU,EAAA,CAAA;sBAAlB,KAAK;;;MCEK,4BAA4B,CAAA;AAOvC,IAAA,WAAA,GAAA;QALS,IAAO,CAAA,OAAA,GAA2B,EAAE,CAAC;AAG9C,QAAA,IAAA,CAAA,cAAc,GAAG,gBAAgB,CAAC,KAAK,CAAC;KAGnC;8GARM,4BAA4B,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA,EAAA;AAA5B,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,4BAA4B,EAf7B,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,uBAAA,EAAA,MAAA,EAAA,EAAA,OAAA,EAAA,SAAA,EAAA,OAAA,EAAA,SAAA,EAAA,UAAA,EAAA,YAAA,EAAA,UAAA,EAAA,YAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EAAA,CAAA;;;;;oBAKQ,EAGhB,QAAA,EAAA,IAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAA,YAAY,8BACZ,WAAW,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,eAAA,EAAA,QAAA,EAAA,2CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EACX,mBAAmB,EACnB,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,oBAAA,EAAA,QAAA,EAAA,eAAA,EAAA,MAAA,EAAA,CAAA,aAAA,EAAA,UAAA,EAAA,SAAA,CAAA,EAAA,OAAA,EAAA,CAAA,eAAA,CAAA,EAAA,QAAA,EAAA,CAAA,QAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,iBAAiB,kgBACjB,uBAAuB,EAAA,QAAA,EAAA,kBAAA,EAAA,MAAA,EAAA,CAAA,UAAA,EAAA,mBAAA,EAAA,UAAA,EAAA,cAAA,CAAA,EAAA,CAAA,EAAA,CAAA,CAAA,EAAA;;2FAGd,4BAA4B,EAAA,UAAA,EAAA,CAAA;kBAjBxC,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,QAAQ,EAAE,uBAAuB;AACjC,oBAAA,QAAQ,EAAE,CAAA;;;;;AAKQ,mBAAA,CAAA;AAClB,oBAAA,UAAU,EAAE,IAAI;AAChB,oBAAA,OAAO,EAAE;wBACP,YAAY;wBACZ,WAAW;wBACX,mBAAmB;wBACnB,iBAAiB;wBACjB,uBAAuB;AACxB,qBAAA;AACF,iBAAA,CAAA;wDAEU,OAAO,EAAA,CAAA;sBAAf,KAAK;gBACG,OAAO,EAAA,CAAA;sBAAf,KAAK;gBACG,UAAU,EAAA,CAAA;sBAAlB,KAAK;gBACG,UAAU,EAAA,CAAA;sBAAlB,KAAK;;;MCVK,mBAAmB,CAAA;AAI9B,IAAA,IAAI,gBAAgB,GAAA,EAAM,OAAO,CAAC,IAAI,CAAC,QAAQ,IAAI,EAAE,GAAG,MAAM,CAAC,OAAO,IAAI,OAAO,CAAC,YAAY,CAAC,QAAQ,CAAC,qBAAqB,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE;AAE7I,IAAA,WAAA,GAAA;QALgB,IAAQ,CAAA,QAAA,GAAsB,EAAE,CAAC;AAChC,QAAA,IAAA,CAAA,WAAW,GAAiC,IAAI,YAAY,EAAkB,CAAC;KAK3F;AAEL,IAAA,eAAe,CAAC,OAAuB,EAAA;AACrC,QAAA,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;KAChC;8GAXU,mBAAmB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA,EAAA;AAAnB,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,mBAAmB,EAXpB,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,aAAA,EAAA,MAAA,EAAA,EAAA,QAAA,EAAA,UAAA,EAAA,EAAA,OAAA,EAAA,EAAA,WAAA,EAAA,aAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EAAA,CAAA;;;;SAIH,EAGL,QAAA,EAAA,IAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAA,YAAY,8JACZ,kBAAkB,EAAA,QAAA,EAAA,YAAA,EAAA,MAAA,EAAA,CAAA,aAAA,EAAA,UAAA,EAAA,gBAAA,EAAA,SAAA,EAAA,eAAA,EAAA,cAAA,EAAA,aAAA,EAAA,SAAA,EAAA,aAAA,EAAA,SAAA,CAAA,EAAA,OAAA,EAAA,CAAA,UAAA,CAAA,EAAA,CAAA,EAAA,CAAA,CAAA,EAAA;;2FAGT,mBAAmB,EAAA,UAAA,EAAA,CAAA;kBAb/B,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,QAAQ,EAAE,aAAa;AACvB,oBAAA,QAAQ,EAAE,CAAA;;;;AAIH,QAAA,CAAA;AACP,oBAAA,UAAU,EAAE,IAAI;AAChB,oBAAA,OAAO,EAAE;wBACP,YAAY;wBACZ,kBAAkB;AACnB,qBAAA;AACF,iBAAA,CAAA;wDAEiB,QAAQ,EAAA,CAAA;sBAAvB,KAAK;gBACW,WAAW,EAAA,CAAA;sBAA3B,MAAM;;;ACpBT;;AAEG;;;;"}

package/fesm2022/softpak-components-spx-check-digit.mjs

@@ -8,7 +8,7 @@ import { spxValidatorRequired, spxValidatorMaxLength, spxValidatorMinLength, spx
 import { valuePairToValue, calcCheckDigit } from '@softpak/components/spx-helpers';
 import * as i2 from '@angular/common';
 import { CommonModule } from '@angular/common';
-import { SpxInputComponent } from '@softpak/components/spx-inputs';
+import { SpxInputTypeEnum, SpxInputComponent } from '@softpak/components/spx-inputs';
 
 const ctrlCheckDigit = 'checkDigit';
 const ctrlContainerNumber = 'containerNumber';
@@ -19,6 +19,8 @@ class SpxCheckDigitComponent {
     get ctrlContainerPrefix() { return this.formGroup.get(ctrlPrefix); }
     constructor(formBuilder) {
         this.formBuilder = formBuilder;
+        this.inputTypeOverlayNumber = SpxInputTypeEnum.overlayNumber;
+        this.inputTypeText = SpxInputTypeEnum.text;
         this.formGroup = this.formBuilder.group({
             [ctrlCheckDigit]: [null, []],
             [ctrlContainerNumber]: [null, [
@@ -65,7 +67,7 @@ class SpxCheckDigitComponent {
         return formControl._rawValidators;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: SpxCheckDigitComponent, deps: [{ token: i1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.2", type: SpxCheckDigitComponent, isStandalone: true, selector: "spx-check-digit", inputs: { txtCheckDigit: "txtCheckDigit", txtContainer: "txtContainer", txtPrefix: "txtPrefix" }, ngImport: i0, template: "<form [formGroup]=\"formGroup\" class=\"max-w-lg mx-auto flex flex-col gap-2\">\n  <spx-input\n    [formControl]=\"ctrlContainerNumber\"\n    [spxAutofocus]=\"true\"\n    [spxCapitalize]=\"true\"\n    [spxLabel]=\"txtContainer\"\n    [spxPattern]=\"'[0-9]*'\"\n    [spxRequired]=\"true\"\n    [spxShowValidationMessages]=\"ctrlContainerNumber && ctrlContainerNumber.errors && ctrlContainerNumber.touched\"\n    [spxType]=\"'overlaynumber'\"\n    [spxValidators]=\"getRawValidators(ctrlContainerNumber)\">\n    <spx-validate-control [control]=\"ctrlContainerNumber\" [label]=\"txtContainer\"></spx-validate-control>\n  </spx-input>\n  <spx-input\n    [formControl]=\"ctrlContainerPrefix\"\n    [spxCapitalize]=\"true\"\n    [spxLabel]=\"txtPrefix\"\n    [spxRequired]=\"true\"\n    [spxShowValidationMessages]=\"ctrlContainerPrefix && ctrlContainerPrefix.errors && ctrlContainerPrefix.touched\"\n    [spxType]=\"'text'\"\n    [spxValidators]=\"getRawValidators(ctrlContainerPrefix)\">\n    <spx-validate-control [control]=\"ctrlContainerPrefix\" [label]=\"txtPrefix\"></spx-validate-control>\n  </spx-input>\n  <spx-input\n    *ngIf=\"ctrlCheckDigit.value\"\n    [formControl]=\"ctrlCheckDigit\"\n    [spxLabel]=\"txtCheckDigit\"\n    [spxReadonly]=\"true\"\n    [spxType]=\"'text'\">\n  </spx-input>\n</form>", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: SpxValidationModule }, { kind: "component", type: i3.SpxValidateControlComponent, selector: "spx-validate-control", inputs: ["control", "label", "submitTried"] }, { kind: "component", type: SpxInputComponent, selector: "spx-input", inputs: ["spxLabel", "spxMax", "spxMin", "spxName", "spxReadonly", "spxAutofocus", "spxInputMode", "spxPattern", "spxRequired", "spxSelectMonth", "spxSelectDay", "spxShowEdit", "spxShowHelp", "spxCompact", "spxShowClear", "spxShowSearch", "spxShowValidationMessages", "spxStep", "spxSuggestions", "spxType", "spxValidators", "value", "spxCapitalize", "spxFocused"], outputs: ["spxBlur", "spxClear", "spxChange", "spxFocus", "spxEdit", "spxHelp", "spxSearch"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.2", type: SpxCheckDigitComponent, isStandalone: true, selector: "spx-check-digit", inputs: { txtCheckDigit: "txtCheckDigit", txtContainer: "txtContainer", txtPrefix: "txtPrefix" }, ngImport: i0, template: "<form [formGroup]=\"formGroup\" class=\"max-w-lg mx-auto flex flex-col gap-3\">\n  <spx-input\n    [formControl]=\"ctrlContainerNumber\"\n    [spxAutofocus]=\"true\"\n    [spxCapitalize]=\"true\"\n    [spxLabel]=\"txtContainer\"\n    [spxPattern]=\"'[0-9]*'\"\n    [spxRequired]=\"true\"\n    [spxShowValidationMessages]=\"ctrlContainerNumber && ctrlContainerNumber.errors && ctrlContainerNumber.touched\"\n    [spxType]=\"inputTypeOverlayNumber\"\n    [spxValidators]=\"getRawValidators(ctrlContainerNumber)\">\n    <spx-validate-control [control]=\"ctrlContainerNumber\" [label]=\"txtContainer\"></spx-validate-control>\n  </spx-input>\n  <spx-input\n    [formControl]=\"ctrlContainerPrefix\"\n    [spxCapitalize]=\"true\"\n    [spxLabel]=\"txtPrefix\"\n    [spxRequired]=\"true\"\n    [spxShowValidationMessages]=\"ctrlContainerPrefix && ctrlContainerPrefix.errors && ctrlContainerPrefix.touched\"\n    [spxType]=\"inputTypeText\"\n    [spxValidators]=\"getRawValidators(ctrlContainerPrefix)\">\n    <spx-validate-control [control]=\"ctrlContainerPrefix\" [label]=\"txtPrefix\"></spx-validate-control>\n  </spx-input>\n  <spx-input\n    *ngIf=\"ctrlCheckDigit.value\"\n    [formControl]=\"ctrlCheckDigit\"\n    [spxLabel]=\"txtCheckDigit\"\n    [spxReadonly]=\"true\"\n    [spxType]=\"inputTypeText\">\n  </spx-input>\n</form>", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: SpxValidationModule }, { kind: "component", type: i3.SpxValidateControlComponent, selector: "spx-validate-control", inputs: ["control", "label", "submitTried"] }, { kind: "component", type: SpxInputComponent, selector: "spx-input", inputs: ["spxLabel", "spxMax", "spxMin", "spxName", "spxReadonly", "spxAutofocus", "spxInputMode", "spxPattern", "spxRequired", "spxSelectMonth", "spxSelectDay", "spxShowEdit", "spxShowHelp", "spxCompact", "spxShowClear", "spxShowSearch", "spxShowValidationMessages", "spxStep", "spxSuggestions", "spxType", "spxValidators", "value", "spxCapitalize", "spxFocused"], outputs: ["spxBlur", "spxClear", "spxChange", "spxFocus", "spxEdit", "spxHelp", "spxSearch"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: SpxCheckDigitComponent, decorators: [{
             type: Component,
@@ -75,7 +77,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImpor
                         ReactiveFormsModule,
                         SpxValidationModule,
                         SpxInputComponent,
-                    ], template: "<form [formGroup]=\"formGroup\" class=\"max-w-lg mx-auto flex flex-col gap-2\">\n  <spx-input\n    [formControl]=\"ctrlContainerNumber\"\n    [spxAutofocus]=\"true\"\n    [spxCapitalize]=\"true\"\n    [spxLabel]=\"txtContainer\"\n    [spxPattern]=\"'[0-9]*'\"\n    [spxRequired]=\"true\"\n    [spxShowValidationMessages]=\"ctrlContainerNumber && ctrlContainerNumber.errors && ctrlContainerNumber.touched\"\n    [spxType]=\"'overlaynumber'\"\n    [spxValidators]=\"getRawValidators(ctrlContainerNumber)\">\n    <spx-validate-control [control]=\"ctrlContainerNumber\" [label]=\"txtContainer\"></spx-validate-control>\n  </spx-input>\n  <spx-input\n    [formControl]=\"ctrlContainerPrefix\"\n    [spxCapitalize]=\"true\"\n    [spxLabel]=\"txtPrefix\"\n    [spxRequired]=\"true\"\n    [spxShowValidationMessages]=\"ctrlContainerPrefix && ctrlContainerPrefix.errors && ctrlContainerPrefix.touched\"\n    [spxType]=\"'text'\"\n    [spxValidators]=\"getRawValidators(ctrlContainerPrefix)\">\n    <spx-validate-control [control]=\"ctrlContainerPrefix\" [label]=\"txtPrefix\"></spx-validate-control>\n  </spx-input>\n  <spx-input\n    *ngIf=\"ctrlCheckDigit.value\"\n    [formControl]=\"ctrlCheckDigit\"\n    [spxLabel]=\"txtCheckDigit\"\n    [spxReadonly]=\"true\"\n    [spxType]=\"'text'\">\n  </spx-input>\n</form>" }]
+                    ], template: "<form [formGroup]=\"formGroup\" class=\"max-w-lg mx-auto flex flex-col gap-3\">\n  <spx-input\n    [formControl]=\"ctrlContainerNumber\"\n    [spxAutofocus]=\"true\"\n    [spxCapitalize]=\"true\"\n    [spxLabel]=\"txtContainer\"\n    [spxPattern]=\"'[0-9]*'\"\n    [spxRequired]=\"true\"\n    [spxShowValidationMessages]=\"ctrlContainerNumber && ctrlContainerNumber.errors && ctrlContainerNumber.touched\"\n    [spxType]=\"inputTypeOverlayNumber\"\n    [spxValidators]=\"getRawValidators(ctrlContainerNumber)\">\n    <spx-validate-control [control]=\"ctrlContainerNumber\" [label]=\"txtContainer\"></spx-validate-control>\n  </spx-input>\n  <spx-input\n    [formControl]=\"ctrlContainerPrefix\"\n    [spxCapitalize]=\"true\"\n    [spxLabel]=\"txtPrefix\"\n    [spxRequired]=\"true\"\n    [spxShowValidationMessages]=\"ctrlContainerPrefix && ctrlContainerPrefix.errors && ctrlContainerPrefix.touched\"\n    [spxType]=\"inputTypeText\"\n    [spxValidators]=\"getRawValidators(ctrlContainerPrefix)\">\n    <spx-validate-control [control]=\"ctrlContainerPrefix\" [label]=\"txtPrefix\"></spx-validate-control>\n  </spx-input>\n  <spx-input\n    *ngIf=\"ctrlCheckDigit.value\"\n    [formControl]=\"ctrlCheckDigit\"\n    [spxLabel]=\"txtCheckDigit\"\n    [spxReadonly]=\"true\"\n    [spxType]=\"inputTypeText\">\n  </spx-input>\n</form>" }]
         }], ctorParameters: () => [{ type: i1.FormBuilder }], propDecorators: { txtCheckDigit: [{
                 type: Input
             }], txtContainer: [{