@softpak/components 21.0.1 → 21.1.0-beta.1

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

@@ -13,13 +13,13 @@ class SpxHomeTilesComponent {
     constructor() {
         this.spxCols = input(2, ...(ngDevMode ? [{ debugName: "spxCols" }] : []));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: SpxHomeTilesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.2.3", type: SpxHomeTilesComponent, isStandalone: true, selector: "spx-home-tiles", inputs: { spxCols: { classPropertyName: "spxCols", publicName: "spxCols", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"mx-auto max-w-lg grid gap-3\"\n    [class.grid-cols-1]=\"this.spxCols() === 1\"\n    [class.grid-cols-2]=\"this.spxCols() === 2\"><ng-content></ng-content></div>", changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SpxHomeTilesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.8", type: SpxHomeTilesComponent, isStandalone: true, selector: "spx-home-tiles", inputs: { spxCols: { classPropertyName: "spxCols", publicName: "spxCols", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"mx-auto max-w-lg grid gap-3\"\n    [class.grid-cols-1]=\"this.spxCols() === 1\"\n    [class.grid-cols-2]=\"this.spxCols() === 2\"><ng-content></ng-content></div>", changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: SpxHomeTilesComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SpxHomeTilesComponent, decorators: [{
             type: Component,
             args: [{ selector: 'spx-home-tiles', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"mx-auto max-w-lg grid gap-3\"\n    [class.grid-cols-1]=\"this.spxCols() === 1\"\n    [class.grid-cols-2]=\"this.spxCols() === 2\"><ng-content></ng-content></div>" }]
-        }] });
+        }], propDecorators: { spxCols: [{ type: i0.Input, args: [{ isSignal: true, alias: "spxCols", required: false }] }] } });
 
 class SpxHomeTileComponent {
     constructor() {
@@ -32,15 +32,15 @@ class SpxHomeTileComponent {
     setFocus() {
         this.buttonRef()?.nativeElement.focus();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: SpxHomeTileComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.3", type: SpxHomeTileComponent, isStandalone: true, selector: "spx-home-tile", inputs: { spxAutofocus: { classPropertyName: "spxAutofocus", publicName: "spxAutofocus", isSignal: true, isRequired: false, transformFunction: null }, spxClass: { classPropertyName: "spxClass", publicName: "spxClass", isSignal: true, isRequired: false, transformFunction: null }, spxSubtitle: { classPropertyName: "spxSubtitle", publicName: "spxSubtitle", isSignal: true, isRequired: false, transformFunction: null }, spxTitle: { classPropertyName: "spxTitle", publicName: "spxTitle", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "buttonRef", first: true, predicate: ["button"], descendants: true, isSignal: true }], ngImport: i0, template: "<button #button\n    class=\"border border-transparent flex flex-col w-full px-4 py-2 relative rounded text-center focus:outline-none focus:ring-2 focus:ring-offset-2\"\n    type=\"button\"\n    part=\"button\"\n    [attr.autofocus]=\"this.spxAutofocus() ? this.spxAutofocus() : undefined\"\n    [class.bg-blue-600]=\"!this.spxClass()\"\n    [class.focus:ring-blue-500]=\"!this.spxClass()\"\n    [class.hover:bg-blue-800]=\"!this.spxClass()\"\n    [class.text-white]=\"!this.spxClass()\"\n    [ngClass]=\"this.spxClass() ? this.spxClass() : undefined\">\n    <div class=\"flex gap-5 items-center\">\n      <div class=\"fal my-2 self-center text-xl w-5\"><ng-content></ng-content></div>\n      <div class=\"grow flex flex-col text-left\">\n        <div class=\"text-lg font-bold text-ellipsis overflow-hidden\">{{ this.spxTitle() }}</div>\n        @if (this.spxSubtitle()) {\n          <div class=\"text-sm opacity-70 text-ellipsis overflow-hidden\">{{ this.spxSubtitle() }}</div>\n        }\n      </div>\n    </div>\n  </button>", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SpxHomeTileComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: SpxHomeTileComponent, isStandalone: true, selector: "spx-home-tile", inputs: { spxAutofocus: { classPropertyName: "spxAutofocus", publicName: "spxAutofocus", isSignal: true, isRequired: false, transformFunction: null }, spxClass: { classPropertyName: "spxClass", publicName: "spxClass", isSignal: true, isRequired: false, transformFunction: null }, spxSubtitle: { classPropertyName: "spxSubtitle", publicName: "spxSubtitle", isSignal: true, isRequired: false, transformFunction: null }, spxTitle: { classPropertyName: "spxTitle", publicName: "spxTitle", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "buttonRef", first: true, predicate: ["button"], descendants: true, isSignal: true }], ngImport: i0, template: "<button #button\n    class=\"border border-transparent flex flex-col w-full px-4 py-2 relative rounded text-center focus:outline-none focus:ring-2 focus:ring-offset-2\"\n    type=\"button\"\n    part=\"button\"\n    [attr.autofocus]=\"this.spxAutofocus() ? this.spxAutofocus() : undefined\"\n    [class.bg-blue-600]=\"!this.spxClass()\"\n    [class.focus:ring-blue-500]=\"!this.spxClass()\"\n    [class.hover:bg-blue-800]=\"!this.spxClass()\"\n    [class.text-white]=\"!this.spxClass()\"\n    [ngClass]=\"this.spxClass() ? this.spxClass() : undefined\">\n    <div class=\"flex gap-5 items-center\">\n      <div class=\"fal my-2 self-center text-xl w-5\"><ng-content></ng-content></div>\n      <div class=\"grow flex flex-col text-left\">\n        <div class=\"text-lg font-bold text-ellipsis overflow-hidden\">{{ this.spxTitle() }}</div>\n        @if (this.spxSubtitle()) {\n          <div class=\"text-sm opacity-70 text-ellipsis overflow-hidden\">{{ this.spxSubtitle() }}</div>\n        }\n      </div>\n    </div>\n  </button>", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: SpxHomeTileComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SpxHomeTileComponent, decorators: [{
             type: Component,
             args: [{ selector: 'spx-home-tile', imports: [
                         NgClass
                     ], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<button #button\n    class=\"border border-transparent flex flex-col w-full px-4 py-2 relative rounded text-center focus:outline-none focus:ring-2 focus:ring-offset-2\"\n    type=\"button\"\n    part=\"button\"\n    [attr.autofocus]=\"this.spxAutofocus() ? this.spxAutofocus() : undefined\"\n    [class.bg-blue-600]=\"!this.spxClass()\"\n    [class.focus:ring-blue-500]=\"!this.spxClass()\"\n    [class.hover:bg-blue-800]=\"!this.spxClass()\"\n    [class.text-white]=\"!this.spxClass()\"\n    [ngClass]=\"this.spxClass() ? this.spxClass() : undefined\">\n    <div class=\"flex gap-5 items-center\">\n      <div class=\"fal my-2 self-center text-xl w-5\"><ng-content></ng-content></div>\n      <div class=\"grow flex flex-col text-left\">\n        <div class=\"text-lg font-bold text-ellipsis overflow-hidden\">{{ this.spxTitle() }}</div>\n        @if (this.spxSubtitle()) {\n          <div class=\"text-sm opacity-70 text-ellipsis overflow-hidden\">{{ this.spxSubtitle() }}</div>\n        }\n      </div>\n    </div>\n  </button>" }]
-        }] });
+        }], propDecorators: { spxAutofocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "spxAutofocus", required: false }] }], spxClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "spxClass", required: false }] }], spxSubtitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "spxSubtitle", required: false }] }], spxTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "spxTitle", required: false }] }], buttonRef: [{ type: i0.ViewChild, args: ['button', { isSignal: true }] }] } });
 
 const addPages = createAction('[SPX / Navigation] Add items', props());
 const initialize = createAction('[SPX / Navigation] Initialize', props());
@@ -120,10 +120,10 @@ class SpxNavigationComponent {
     onNavigate(link) {
         this.spxClick.emit(link);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: SpxNavigationComponent, deps: [{ token: i1.Store }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.3", type: SpxNavigationComponent, isStandalone: true, selector: "spx-navigation", inputs: { spxOverwriteNavItems: { classPropertyName: "spxOverwriteNavItems", publicName: "spxOverwriteNavItems", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { spxClick: "spxClick" }, viewQueries: [{ propertyName: "tiles", predicate: ["tiles"], descendants: true, isSignal: true }], ngImport: i0, template: "<spx-home-tiles [spxCols]=\"1\">\n  @if (spxOverwriteNavItems() && spxOverwriteNavItems()?.length) {\n    @for (item of spxOverwriteNavItems(); track item; let i = $index) {\n      <spx-home-tile #tiles (click)=\"item.onClick ? item.onClick() : (item.routerLink ? onNavigate(item.routerLink) : null)\"\n        [spxAutofocus]=\"i === 0\"\n        [spxClass]=\"item.tileClasses ? item.tileClasses : undefined\"\n        [spxTitle]=\"item.title | translate | capitalize\"\n        [spxSubtitle]=\"item.subtite ? (item.subtite | translate | capitalize) : undefined\">\n        <fa-icon [icon]=\"item.icon\"></fa-icon>\n      </spx-home-tile>\n    }\n  }\n  @else {\n    @for (item of navItems(); track item; let i = $index) {\n      <spx-home-tile #tiles (click)=\"item.onClick ? item.onClick() : (item.routerLink ? onNavigate(item.routerLink) : null)\"\n        [spxAutofocus]=\"i === 0\"\n        [spxClass]=\"item.tileClasses ? item.tileClasses : undefined\"\n        [spxTitle]=\"item.title | translate | capitalize\"\n        [spxSubtitle]=\"item.subtite ? (item.subtite | translate | capitalize) : undefined\">\n        <fa-icon [icon]=\"item.icon\"></fa-icon>\n      </spx-home-tile>\n    }\n  }\n</spx-home-tiles>\n", dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: FontAwesomeModule }, { kind: "component", type: i2.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: "component", type: SpxHomeTilesComponent, selector: "spx-home-tiles", inputs: ["spxCols"] }, { kind: "component", type: SpxHomeTileComponent, selector: "spx-home-tile", inputs: ["spxAutofocus", "spxClass", "spxSubtitle", "spxTitle"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { kind: "pipe", type: SpxCapitalizePipe, name: "capitalize" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SpxNavigationComponent, deps: [{ token: i1.Store }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: SpxNavigationComponent, isStandalone: true, selector: "spx-navigation", inputs: { spxOverwriteNavItems: { classPropertyName: "spxOverwriteNavItems", publicName: "spxOverwriteNavItems", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { spxClick: "spxClick" }, viewQueries: [{ propertyName: "tiles", predicate: ["tiles"], descendants: true, isSignal: true }], ngImport: i0, template: "<spx-home-tiles [spxCols]=\"1\">\n  @if (spxOverwriteNavItems() && spxOverwriteNavItems()?.length) {\n    @for (item of spxOverwriteNavItems(); track item; let i = $index) {\n      <spx-home-tile #tiles (click)=\"item.onClick ? item.onClick() : (item.routerLink ? onNavigate(item.routerLink) : null)\"\n        [spxAutofocus]=\"i === 0\"\n        [spxClass]=\"item.tileClasses ? item.tileClasses : undefined\"\n        [spxTitle]=\"item.title | translate | capitalize\"\n        [spxSubtitle]=\"item.subtite ? (item.subtite | translate | capitalize) : undefined\">\n        <fa-icon [icon]=\"item.icon\"></fa-icon>\n      </spx-home-tile>\n    }\n  }\n  @else {\n    @for (item of navItems(); track item; let i = $index) {\n      <spx-home-tile #tiles (click)=\"item.onClick ? item.onClick() : (item.routerLink ? onNavigate(item.routerLink) : null)\"\n        [spxAutofocus]=\"i === 0\"\n        [spxClass]=\"item.tileClasses ? item.tileClasses : undefined\"\n        [spxTitle]=\"item.title | translate | capitalize\"\n        [spxSubtitle]=\"item.subtite ? (item.subtite | translate | capitalize) : undefined\">\n        <fa-icon [icon]=\"item.icon\"></fa-icon>\n      </spx-home-tile>\n    }\n  }\n</spx-home-tiles>\n", dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: FontAwesomeModule }, { kind: "component", type: i2.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: "component", type: SpxHomeTilesComponent, selector: "spx-home-tiles", inputs: ["spxCols"] }, { kind: "component", type: SpxHomeTileComponent, selector: "spx-home-tile", inputs: ["spxAutofocus", "spxClass", "spxSubtitle", "spxTitle"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { kind: "pipe", type: SpxCapitalizePipe, name: "capitalize" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: SpxNavigationComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SpxNavigationComponent, decorators: [{
             type: Component,
             args: [{ selector: 'spx-navigation', imports: [
                         TranslateModule,
@@ -132,7 +132,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImpor
                         SpxHomeTilesComponent,
                         SpxHomeTileComponent
                     ], template: "<spx-home-tiles [spxCols]=\"1\">\n  @if (spxOverwriteNavItems() && spxOverwriteNavItems()?.length) {\n    @for (item of spxOverwriteNavItems(); track item; let i = $index) {\n      <spx-home-tile #tiles (click)=\"item.onClick ? item.onClick() : (item.routerLink ? onNavigate(item.routerLink) : null)\"\n        [spxAutofocus]=\"i === 0\"\n        [spxClass]=\"item.tileClasses ? item.tileClasses : undefined\"\n        [spxTitle]=\"item.title | translate | capitalize\"\n        [spxSubtitle]=\"item.subtite ? (item.subtite | translate | capitalize) : undefined\">\n        <fa-icon [icon]=\"item.icon\"></fa-icon>\n      </spx-home-tile>\n    }\n  }\n  @else {\n    @for (item of navItems(); track item; let i = $index) {\n      <spx-home-tile #tiles (click)=\"item.onClick ? item.onClick() : (item.routerLink ? onNavigate(item.routerLink) : null)\"\n        [spxAutofocus]=\"i === 0\"\n        [spxClass]=\"item.tileClasses ? item.tileClasses : undefined\"\n        [spxTitle]=\"item.title | translate | capitalize\"\n        [spxSubtitle]=\"item.subtite ? (item.subtite | translate | capitalize) : undefined\">\n        <fa-icon [icon]=\"item.icon\"></fa-icon>\n      </spx-home-tile>\n    }\n  }\n</spx-home-tiles>\n" }]
-        }], ctorParameters: () => [{ type: i1.Store }] });
+        }], ctorParameters: () => [{ type: i1.Store }], propDecorators: { spxOverwriteNavItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "spxOverwriteNavItems", required: false }] }], tiles: [{ type: i0.ViewChildren, args: ["tiles", { isSignal: true }] }], spxClick: [{ type: i0.Output, args: ["spxClick"] }] } });
 
 var spxNavigation_state = /*#__PURE__*/Object.freeze({
     __proto__: null

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

@@ -1 +1 @@
-{"version":3,"file":"softpak-components-spx-navigation.mjs","sources":["../../../../projects/softpak/components/spx-navigation/spx-home-tile/spx-home-tiles.component.ts","../../../../projects/softpak/components/spx-navigation/spx-home-tile/spx-home-tiles.component.html","../../../../projects/softpak/components/spx-navigation/spx-home-tile/spx-home-tile.component.ts","../../../../projects/softpak/components/spx-navigation/spx-home-tile/spx-home-tile.component.html","../../../../projects/softpak/components/spx-navigation/store/spx-navigation/spx-navigation.actions.ts","../../../../projects/softpak/components/spx-navigation/store/spx-navigation/spx-navigation.initial.ts","../../../../projects/softpak/components/spx-navigation/store/spx-navigation/spx-navigation.reducer.ts","../../../../projects/softpak/components/spx-navigation/spx-navigation.component.ts","../../../../projects/softpak/components/spx-navigation/spx-navigation.component.html","../../../../projects/softpak/components/spx-navigation/softpak-components-spx-navigation.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, input } from '@angular/core';\n\n@Component({\n  selector: 'spx-home-tiles',\n  standalone: true,\n  templateUrl: './spx-home-tiles.component.html',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class SpxHomeTilesComponent {\n  readonly spxCols = input<1 | 2>(2);\n}\n","<div class=\"mx-auto max-w-lg grid gap-3\"\n    [class.grid-cols-1]=\"this.spxCols() === 1\"\n    [class.grid-cols-2]=\"this.spxCols() === 2\"><ng-content></ng-content></div>","import { NgClass } from '@angular/common';\nimport { ChangeDetectionStrategy, Component, ElementRef, input, viewChild } from '@angular/core';\n\n@Component({\n    selector: 'spx-home-tile',\n    imports: [\n        NgClass\n    ],\n    templateUrl: './spx-home-tile.component.html',\n    standalone: true,\n    changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class SpxHomeTileComponent {\n  readonly spxAutofocus = input<boolean>();\n  readonly spxClass = input<string>();\n  readonly spxSubtitle = input<string>();\n  readonly spxTitle = input<string>();\n  private buttonRef = viewChild<ElementRef<HTMLButtonElement>>('button');\n\n  setFocus(): void {\n    this.buttonRef()?.nativeElement.focus();\n  }\n}\n","<button #button\n    class=\"border border-transparent flex flex-col w-full px-4 py-2 relative rounded text-center focus:outline-none focus:ring-2 focus:ring-offset-2\"\n    type=\"button\"\n    part=\"button\"\n    [attr.autofocus]=\"this.spxAutofocus() ? this.spxAutofocus() : undefined\"\n    [class.bg-blue-600]=\"!this.spxClass()\"\n    [class.focus:ring-blue-500]=\"!this.spxClass()\"\n    [class.hover:bg-blue-800]=\"!this.spxClass()\"\n    [class.text-white]=\"!this.spxClass()\"\n    [ngClass]=\"this.spxClass() ? this.spxClass() : undefined\">\n    <div class=\"flex gap-5 items-center\">\n      <div class=\"fal my-2 self-center text-xl w-5\"><ng-content></ng-content></div>\n      <div class=\"grow flex flex-col text-left\">\n        <div class=\"text-lg font-bold text-ellipsis overflow-hidden\">{{ this.spxTitle() }}</div>\n        @if (this.spxSubtitle()) {\n          <div class=\"text-sm opacity-70 text-ellipsis overflow-hidden\">{{ this.spxSubtitle() }}</div>\n        }\n      </div>\n    </div>\n  </button>","import { createAction, props, union } from '@ngrx/store';\nimport { SpxNavigationItemI } from '../../spx-navigation-item.interface';\n\nexport const addPages = createAction('[SPX / Navigation] Add items', props<{\n    navigationItems: SpxNavigationItemI[];\n}>());\nexport const initialize = createAction('[SPX / Navigation] Initialize', props<{\n    navigationItems: SpxNavigationItemI[];\n}>());\nexport const update = createAction('[SPX / Navigation] Update', props<{\n    accessList: string[];\n    signedIn: boolean;\n}>());\n\nconst all = union({\n    addPages,\n    initialize,\n    update\n});\n\nexport type Actions = typeof all;\n","import { StateI } from \"./spx-navigation.state\";\n\nexport const initialState: StateI = {\n    accessList: [],\n    navigationItems: [],\n    menuItems: [],\n    signedIn: false,\n    tabs: [],\n};\n","\nimport * as actions from './spx-navigation.actions';\nimport { createFeature, createReducer, on } from '@ngrx/store';\nimport { StateI } from './spx-navigation.state';\nimport { initialState } from './spx-navigation.initial';\n\nexport default createFeature({\n    name: 'spxNavigation',\n    reducer: createReducer(\n        initialState,\n        on(actions.initialize, (state: StateI, { navigationItems }): StateI => ({\n            ...state,\n            navigationItems: navigationItems,\n            menuItems: navigationItems.slice().filter(navigationItem => !navigationItem.signInRequired && (navigationItem.hasTile === undefined || navigationItem.hasTile)),\n            tabs: navigationItems.slice().filter(navigationItem => !navigationItem.signInRequired && navigationItem.hasTab),\n        })),\n        on(actions.update, (state: StateI, { accessList, signedIn }): StateI => ({\n            ...state,\n            accessList,\n            menuItems: state.navigationItems.slice().filter(navigationItem => (!navigationItem.signInRequired || signedIn) && navigationItem?.hasTile !== false).filter(item => item.accessKey === undefined || accessList.includes(item.accessKey)),\n            signedIn,\n            tabs: state.navigationItems.slice().filter(navigationItem => (!navigationItem.signInRequired || signedIn) && navigationItem.hasTab).filter(item => item.accessKey === undefined || accessList.includes(item.accessKey)),\n        })),\n        on(actions.addPages, (state: StateI, { navigationItems }): StateI => ({\n            ...state,\n            navigationItems: [...state.navigationItems.slice(), ...navigationItems],\n            menuItems: [...state.menuItems.slice(), ...navigationItems.slice().filter(navigationItem => (!navigationItem.signInRequired || state.signedIn) && navigationItem?.hasTile !== false).filter(item => item.accessKey === undefined || state.accessList.includes(item.accessKey))],\n            tabs: [...state.tabs.slice(), ...navigationItems.slice().filter(navigationItem => (!navigationItem.signInRequired || state.signedIn) && navigationItem.hasTab).filter(item => item.accessKey === undefined || state.accessList.includes(item.accessKey))],\n        })),\n    ),\n});\n","import { Component, input, OnDestroy, OnInit, output, signal, viewChildren } from '@angular/core';\nimport { TranslateModule } from '@ngx-translate/core';\nimport { FontAwesomeModule } from '@fortawesome/angular-fontawesome';\nimport { SpxCapitalizePipe } from '@softpak/components/spx-capitalize';\nimport { SpxHomeTilesComponent } from './spx-home-tile/spx-home-tiles.component';\nimport { SpxHomeTileComponent } from './spx-home-tile/spx-home-tile.component';\nimport { Store } from '@ngrx/store';\nimport spxNavigationReducer from './store/spx-navigation/spx-navigation.reducer';\nimport { AsyncPipe } from '@angular/common';\nimport { SpxNavigationItemI } from './spx-navigation-item.interface';\nimport { Subscription } from 'rxjs';\n\n@Component({\n  selector: 'spx-navigation',\n  templateUrl: './spx-navigation.component.html',\n  imports: [\n    TranslateModule,\n    FontAwesomeModule,\n    SpxCapitalizePipe,\n    SpxHomeTilesComponent,\n    SpxHomeTileComponent\n  ]\n})\nexport class SpxNavigationComponent implements OnInit, OnDestroy {\n  readonly spxOverwriteNavItems = input<SpxNavigationItemI[]>();\n  tiles = viewChildren<SpxHomeTileComponent>(\"tiles\");\n  spxClick = output<string>();\n  navItems = signal<SpxNavigationItemI[]>([]);\n  menuItemsSubscription: Subscription | null = null;\n  \n  constructor(\n    private readonly appStore: Store,\n  ) { }\n\n  ngOnInit() {\n    this.menuItemsSubscription = this.appStore.select(spxNavigationReducer.selectMenuItems).subscribe((items) => {\n      this.navItems.set(items);\n    });\n  }\n\n  ngOnDestroy() {\n    this.menuItemsSubscription?.unsubscribe();\n  }\n\n  setFocus(): void {\n    this.tiles()[0]?.setFocus();\n  }\n\n  onNavigate(link: string) {\n    this.spxClick.emit(link);\n  }\n}\n","<spx-home-tiles [spxCols]=\"1\">\n  @if (spxOverwriteNavItems() && spxOverwriteNavItems()?.length) {\n    @for (item of spxOverwriteNavItems(); track item; let i = $index) {\n      <spx-home-tile #tiles (click)=\"item.onClick ? item.onClick() : (item.routerLink ? onNavigate(item.routerLink) : null)\"\n        [spxAutofocus]=\"i === 0\"\n        [spxClass]=\"item.tileClasses ? item.tileClasses : undefined\"\n        [spxTitle]=\"item.title | translate | capitalize\"\n        [spxSubtitle]=\"item.subtite ? (item.subtite | translate | capitalize) : undefined\">\n        <fa-icon [icon]=\"item.icon\"></fa-icon>\n      </spx-home-tile>\n    }\n  }\n  @else {\n    @for (item of navItems(); track item; let i = $index) {\n      <spx-home-tile #tiles (click)=\"item.onClick ? item.onClick() : (item.routerLink ? onNavigate(item.routerLink) : null)\"\n        [spxAutofocus]=\"i === 0\"\n        [spxClass]=\"item.tileClasses ? item.tileClasses : undefined\"\n        [spxTitle]=\"item.title | translate | capitalize\"\n        [spxSubtitle]=\"item.subtite ? (item.subtite | translate | capitalize) : undefined\">\n        <fa-icon [icon]=\"item.icon\"></fa-icon>\n      </spx-home-tile>\n    }\n  }\n</spx-home-tiles>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":["actions.initialize","actions.update","actions.addPages","spxNavigationReducer"],"mappings":"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"}
+{"version":3,"file":"softpak-components-spx-navigation.mjs","sources":["../../../../projects/softpak/components/spx-navigation/spx-home-tile/spx-home-tiles.component.ts","../../../../projects/softpak/components/spx-navigation/spx-home-tile/spx-home-tiles.component.html","../../../../projects/softpak/components/spx-navigation/spx-home-tile/spx-home-tile.component.ts","../../../../projects/softpak/components/spx-navigation/spx-home-tile/spx-home-tile.component.html","../../../../projects/softpak/components/spx-navigation/store/spx-navigation/spx-navigation.actions.ts","../../../../projects/softpak/components/spx-navigation/store/spx-navigation/spx-navigation.initial.ts","../../../../projects/softpak/components/spx-navigation/store/spx-navigation/spx-navigation.reducer.ts","../../../../projects/softpak/components/spx-navigation/spx-navigation.component.ts","../../../../projects/softpak/components/spx-navigation/spx-navigation.component.html","../../../../projects/softpak/components/spx-navigation/softpak-components-spx-navigation.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, input } from '@angular/core';\n\n@Component({\n  selector: 'spx-home-tiles',\n  standalone: true,\n  templateUrl: './spx-home-tiles.component.html',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class SpxHomeTilesComponent {\n  readonly spxCols = input<1 | 2>(2);\n}\n","<div class=\"mx-auto max-w-lg grid gap-3\"\n    [class.grid-cols-1]=\"this.spxCols() === 1\"\n    [class.grid-cols-2]=\"this.spxCols() === 2\"><ng-content></ng-content></div>","import { NgClass } from '@angular/common';\nimport { ChangeDetectionStrategy, Component, ElementRef, input, viewChild } from '@angular/core';\n\n@Component({\n    selector: 'spx-home-tile',\n    imports: [\n        NgClass\n    ],\n    templateUrl: './spx-home-tile.component.html',\n    standalone: true,\n    changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class SpxHomeTileComponent {\n  readonly spxAutofocus = input<boolean>();\n  readonly spxClass = input<string>();\n  readonly spxSubtitle = input<string>();\n  readonly spxTitle = input<string>();\n  private buttonRef = viewChild<ElementRef<HTMLButtonElement>>('button');\n\n  setFocus(): void {\n    this.buttonRef()?.nativeElement.focus();\n  }\n}\n","<button #button\n    class=\"border border-transparent flex flex-col w-full px-4 py-2 relative rounded text-center focus:outline-none focus:ring-2 focus:ring-offset-2\"\n    type=\"button\"\n    part=\"button\"\n    [attr.autofocus]=\"this.spxAutofocus() ? this.spxAutofocus() : undefined\"\n    [class.bg-blue-600]=\"!this.spxClass()\"\n    [class.focus:ring-blue-500]=\"!this.spxClass()\"\n    [class.hover:bg-blue-800]=\"!this.spxClass()\"\n    [class.text-white]=\"!this.spxClass()\"\n    [ngClass]=\"this.spxClass() ? this.spxClass() : undefined\">\n    <div class=\"flex gap-5 items-center\">\n      <div class=\"fal my-2 self-center text-xl w-5\"><ng-content></ng-content></div>\n      <div class=\"grow flex flex-col text-left\">\n        <div class=\"text-lg font-bold text-ellipsis overflow-hidden\">{{ this.spxTitle() }}</div>\n        @if (this.spxSubtitle()) {\n          <div class=\"text-sm opacity-70 text-ellipsis overflow-hidden\">{{ this.spxSubtitle() }}</div>\n        }\n      </div>\n    </div>\n  </button>","import { createAction, props, union } from '@ngrx/store';\nimport { SpxNavigationItemI } from '../../spx-navigation-item.interface';\n\nexport const addPages = createAction('[SPX / Navigation] Add items', props<{\n    navigationItems: SpxNavigationItemI[];\n}>());\nexport const initialize = createAction('[SPX / Navigation] Initialize', props<{\n    navigationItems: SpxNavigationItemI[];\n}>());\nexport const update = createAction('[SPX / Navigation] Update', props<{\n    accessList: string[];\n    signedIn: boolean;\n}>());\n\nconst all = union({\n    addPages,\n    initialize,\n    update\n});\n\nexport type Actions = typeof all;\n","import { StateI } from \"./spx-navigation.state\";\n\nexport const initialState: StateI = {\n    accessList: [],\n    navigationItems: [],\n    menuItems: [],\n    signedIn: false,\n    tabs: [],\n};\n","\nimport * as actions from './spx-navigation.actions';\nimport { createFeature, createReducer, on } from '@ngrx/store';\nimport { StateI } from './spx-navigation.state';\nimport { initialState } from './spx-navigation.initial';\n\nexport default createFeature({\n    name: 'spxNavigation',\n    reducer: createReducer(\n        initialState,\n        on(actions.initialize, (state: StateI, { navigationItems }): StateI => ({\n            ...state,\n            navigationItems: navigationItems,\n            menuItems: navigationItems.slice().filter(navigationItem => !navigationItem.signInRequired && (navigationItem.hasTile === undefined || navigationItem.hasTile)),\n            tabs: navigationItems.slice().filter(navigationItem => !navigationItem.signInRequired && navigationItem.hasTab),\n        })),\n        on(actions.update, (state: StateI, { accessList, signedIn }): StateI => ({\n            ...state,\n            accessList,\n            menuItems: state.navigationItems.slice().filter(navigationItem => (!navigationItem.signInRequired || signedIn) && navigationItem?.hasTile !== false).filter(item => item.accessKey === undefined || accessList.includes(item.accessKey)),\n            signedIn,\n            tabs: state.navigationItems.slice().filter(navigationItem => (!navigationItem.signInRequired || signedIn) && navigationItem.hasTab).filter(item => item.accessKey === undefined || accessList.includes(item.accessKey)),\n        })),\n        on(actions.addPages, (state: StateI, { navigationItems }): StateI => ({\n            ...state,\n            navigationItems: [...state.navigationItems.slice(), ...navigationItems],\n            menuItems: [...state.menuItems.slice(), ...navigationItems.slice().filter(navigationItem => (!navigationItem.signInRequired || state.signedIn) && navigationItem?.hasTile !== false).filter(item => item.accessKey === undefined || state.accessList.includes(item.accessKey))],\n            tabs: [...state.tabs.slice(), ...navigationItems.slice().filter(navigationItem => (!navigationItem.signInRequired || state.signedIn) && navigationItem.hasTab).filter(item => item.accessKey === undefined || state.accessList.includes(item.accessKey))],\n        })),\n    ),\n});\n","import { Component, input, OnDestroy, OnInit, output, signal, viewChildren } from '@angular/core';\nimport { TranslateModule } from '@ngx-translate/core';\nimport { FontAwesomeModule } from '@fortawesome/angular-fontawesome';\nimport { SpxCapitalizePipe } from '@softpak/components/spx-capitalize';\nimport { SpxHomeTilesComponent } from './spx-home-tile/spx-home-tiles.component';\nimport { SpxHomeTileComponent } from './spx-home-tile/spx-home-tile.component';\nimport { Store } from '@ngrx/store';\nimport spxNavigationReducer from './store/spx-navigation/spx-navigation.reducer';\nimport { AsyncPipe } from '@angular/common';\nimport { SpxNavigationItemI } from './spx-navigation-item.interface';\nimport { Subscription } from 'rxjs';\n\n@Component({\n  selector: 'spx-navigation',\n  templateUrl: './spx-navigation.component.html',\n  imports: [\n    TranslateModule,\n    FontAwesomeModule,\n    SpxCapitalizePipe,\n    SpxHomeTilesComponent,\n    SpxHomeTileComponent\n  ]\n})\nexport class SpxNavigationComponent implements OnInit, OnDestroy {\n  readonly spxOverwriteNavItems = input<SpxNavigationItemI[]>();\n  tiles = viewChildren<SpxHomeTileComponent>(\"tiles\");\n  spxClick = output<string>();\n  navItems = signal<SpxNavigationItemI[]>([]);\n  menuItemsSubscription: Subscription | null = null;\n  \n  constructor(\n    private readonly appStore: Store,\n  ) { }\n\n  ngOnInit() {\n    this.menuItemsSubscription = this.appStore.select(spxNavigationReducer.selectMenuItems).subscribe((items) => {\n      this.navItems.set(items);\n    });\n  }\n\n  ngOnDestroy() {\n    this.menuItemsSubscription?.unsubscribe();\n  }\n\n  setFocus(): void {\n    this.tiles()[0]?.setFocus();\n  }\n\n  onNavigate(link: string) {\n    this.spxClick.emit(link);\n  }\n}\n","<spx-home-tiles [spxCols]=\"1\">\n  @if (spxOverwriteNavItems() && spxOverwriteNavItems()?.length) {\n    @for (item of spxOverwriteNavItems(); track item; let i = $index) {\n      <spx-home-tile #tiles (click)=\"item.onClick ? item.onClick() : (item.routerLink ? onNavigate(item.routerLink) : null)\"\n        [spxAutofocus]=\"i === 0\"\n        [spxClass]=\"item.tileClasses ? item.tileClasses : undefined\"\n        [spxTitle]=\"item.title | translate | capitalize\"\n        [spxSubtitle]=\"item.subtite ? (item.subtite | translate | capitalize) : undefined\">\n        <fa-icon [icon]=\"item.icon\"></fa-icon>\n      </spx-home-tile>\n    }\n  }\n  @else {\n    @for (item of navItems(); track item; let i = $index) {\n      <spx-home-tile #tiles (click)=\"item.onClick ? item.onClick() : (item.routerLink ? onNavigate(item.routerLink) : null)\"\n        [spxAutofocus]=\"i === 0\"\n        [spxClass]=\"item.tileClasses ? item.tileClasses : undefined\"\n        [spxTitle]=\"item.title | translate | capitalize\"\n        [spxSubtitle]=\"item.subtite ? (item.subtite | translate | capitalize) : undefined\">\n        <fa-icon [icon]=\"item.icon\"></fa-icon>\n      </spx-home-tile>\n    }\n  }\n</spx-home-tiles>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":["actions.initialize","actions.update","actions.addPages","spxNavigationReducer"],"mappings":"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"}

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

@@ -2,8 +2,8 @@ import * as i0 from '@angular/core';
 import { input, output, viewChild, signal, computed, ChangeDetectionStrategy, Component } from '@angular/core';
 import * as i1 from '@angular/forms';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { SpxButtonComponent } from '@softpak/components/spx-button';
 import { SpxSeverityEnum, unsubscribeSubscriptions } from '@softpak/components/spx-helpers';
+import { SpxButtonComponent } from '@softpak/components/spx-button';
 
 class SpxNumberCheckComponent {
     constructor(formBuilder) {
@@ -140,19 +140,17 @@ class SpxNumberCheckComponent {
             this.denied.set(true);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: SpxNumberCheckComponent, deps: [{ token: i1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.3", type: SpxNumberCheckComponent, isStandalone: true, selector: "spx-number-check", inputs: { spxAction: { classPropertyName: "spxAction", publicName: "spxAction", isSignal: true, isRequired: true, transformFunction: null }, spxSimpleMode: { classPropertyName: "spxSimpleMode", publicName: "spxSimpleMode", isSignal: true, isRequired: false, transformFunction: null }, spxPincode: { classPropertyName: "spxPincode", publicName: "spxPincode", isSignal: true, isRequired: true, transformFunction: null }, txtCancel: { classPropertyName: "txtCancel", publicName: "txtCancel", isSignal: true, isRequired: true, transformFunction: null }, txtConfirm: { classPropertyName: "txtConfirm", publicName: "txtConfirm", isSignal: true, isRequired: true, transformFunction: null }, txtConfirmMessage: { classPropertyName: "txtConfirmMessage", publicName: "txtConfirmMessage", isSignal: true, isRequired: true, transformFunction: null }, txtReset: { classPropertyName: "txtReset", publicName: "txtReset", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { spxCancel: "spxCancel", spxConfirm: "spxConfirm" }, host: { listeners: { "spxChange": "handleChangeEvent($event)" } }, viewQueries: [{ propertyName: "viewChild1", first: true, predicate: ["viewChild1"], descendants: true, isSignal: true }, { propertyName: "viewChild2", first: true, predicate: ["viewChild2"], descendants: true, isSignal: true }, { propertyName: "viewChild3", first: true, predicate: ["viewChild3"], descendants: true, isSignal: true }, { propertyName: "viewChild4", first: true, predicate: ["viewChild4"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"fixed top-0 left-0 right-0 bottom-0 z-40 bg-black\">\n  <div class=\"mx-auto mt-32 max-w-96 bg-black rounded-lg\">\n    <div class=\"flex flex-col gap-3 p-3\">\n      <div class=\"bg-yellow-300 text-black text-center rounded p-3 text-xl\">\n        <div class=\"font-bold\">{{ this.spxAction() }}</div>\n        {{ this.txtConfirmMessage() }}\n      </div>\n      @if (!this.spxSimpleMode()) {\n        <form class=\"block grid grid-cols-4 gap-3\" [formGroup]=\"this.form()!\" (ngSubmit)=\"null\">\n          <input #viewChild1 [formControl]=\"ctrl1()\" type=\"text\" autofocus class=\"w-full text-center font-bold text-2xl p-3 rounded-lg focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 text-white bg-neutral-700\" [class.bg-red-700]=\"this.denied()\" [class.bg-teal-700]=\"this.accepted()\" maxlength=\"1\" (keypress)=\"onDigitInput($event)\" pattern=\"[0-9]*\" inputmode=\"numeric\"  />\n          <input #viewChild2 [formControl]=\"ctrl2()\" type=\"text\" class=\"w-full text-center font-bold text-2xl p-3 rounded-lg focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 text-white bg-neutral-700\" [class.bg-red-700]=\"this.denied()\" [class.bg-teal-700]=\"this.accepted()\" maxlength=\"1\" (keypress)=\"onDigitInput($event)\" (keyup.backspace)=\"onBackspace($event)\" pattern=\"[0-9]*\" inputmode=\"numeric\" />\n          <input #viewChild3 [formControl]=\"ctrl3()\" type=\"text\" class=\"w-full text-center font-bold text-2xl p-3 rounded-lg focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 text-white bg-neutral-700\" [class.bg-red-700]=\"this.denied()\" [class.bg-teal-700]=\"this.accepted()\" maxlength=\"1\" (keypress)=\"onDigitInput($event)\" (keyup.backspace)=\"onBackspace($event)\" pattern=\"[0-9]*\" inputmode=\"numeric\" />\n          <input #viewChild4 [formControl]=\"ctrl4()\" type=\"text\" class=\"w-full text-center font-bold text-2xl p-3 rounded-lg focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 text-white bg-neutral-700\" [class.bg-red-700]=\"this.denied()\" [class.bg-teal-700]=\"this.accepted()\" maxlength=\"1\" (keypress)=\"onDigitInput($event)\" (keyup.backspace)=\"onBackspace($event)\" pattern=\"[0-9]*\" inputmode=\"numeric\" />\n        </form>\n      }\n      @if (this.spxSimpleMode()) {\n        <spx-button\n          [spxFullWidth]=\"true\"\n          [spxSeverity]=\"spxSeverity.success\"\n          (spxClick)=\"this.handleConfirm()\"\n        >{{ this.txtConfirm() }}</spx-button>\n      }\n      @if (!this.spxSimpleMode()) {\n        <spx-button\n          [spxFullWidth]=\"true\"\n          [spxSeverity]=\"spxSeverity.warning\"\n          (spxClick)=\"this.handleReset()\"\n        >{{ this.txtReset() }}</spx-button>\n      }\n      <spx-button\n        [spxFullWidth]=\"true\"\n        [spxSeverity]=\"spxSeverity.error\"\n        (spxClick)=\"this.handleCancel()\"\n      >{{ this.txtCancel() }}</spx-button>\n    </div>\n  </div>\n</div>", dependencies: [{ kind: "component", type: SpxButtonComponent, selector: "spx-button", inputs: ["spxDisabled", "spxClass", "spxClassObject", "spxForm", "spxFullHeight", "spxFullWidth", "spxSeverity", "spxSize", "spxTabIndex", "spxType", "spxName"], outputs: ["spxClick"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SpxNumberCheckComponent, deps: [{ token: i1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: SpxNumberCheckComponent, isStandalone: true, selector: "spx-number-check", inputs: { spxAction: { classPropertyName: "spxAction", publicName: "spxAction", isSignal: true, isRequired: true, transformFunction: null }, spxSimpleMode: { classPropertyName: "spxSimpleMode", publicName: "spxSimpleMode", isSignal: true, isRequired: false, transformFunction: null }, spxPincode: { classPropertyName: "spxPincode", publicName: "spxPincode", isSignal: true, isRequired: true, transformFunction: null }, txtCancel: { classPropertyName: "txtCancel", publicName: "txtCancel", isSignal: true, isRequired: true, transformFunction: null }, txtConfirm: { classPropertyName: "txtConfirm", publicName: "txtConfirm", isSignal: true, isRequired: true, transformFunction: null }, txtConfirmMessage: { classPropertyName: "txtConfirmMessage", publicName: "txtConfirmMessage", isSignal: true, isRequired: true, transformFunction: null }, txtReset: { classPropertyName: "txtReset", publicName: "txtReset", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { spxCancel: "spxCancel", spxConfirm: "spxConfirm" }, viewQueries: [{ propertyName: "viewChild1", first: true, predicate: ["viewChild1"], descendants: true, isSignal: true }, { propertyName: "viewChild2", first: true, predicate: ["viewChild2"], descendants: true, isSignal: true }, { propertyName: "viewChild3", first: true, predicate: ["viewChild3"], descendants: true, isSignal: true }, { propertyName: "viewChild4", first: true, predicate: ["viewChild4"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"fixed top-0 left-0 right-0 bottom-0 z-40 bg-black\">\n  <div class=\"mx-auto mt-32 max-w-96 bg-black rounded-lg\">\n    <div class=\"flex flex-col gap-3 p-3\">\n      <div class=\"bg-yellow-300 text-black text-center rounded p-3 text-xl\">\n        <div class=\"font-bold\">{{ this.spxAction() }}</div>\n        {{ this.txtConfirmMessage() }}\n      </div>\n      @if (!this.spxSimpleMode()) {\n        <form class=\"block grid grid-cols-4 gap-3\" [formGroup]=\"this.form()!\" (ngSubmit)=\"null\">\n          <input #viewChild1 [formControl]=\"ctrl1()\" type=\"text\" autofocus class=\"w-full text-center font-bold text-2xl p-3 rounded-lg focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 text-white bg-neutral-700\" [class.bg-red-700]=\"this.denied()\" [class.bg-teal-700]=\"this.accepted()\" maxlength=\"1\" (keypress)=\"onDigitInput($event)\" pattern=\"[0-9]*\" inputmode=\"numeric\"  />\n          <input #viewChild2 [formControl]=\"ctrl2()\" type=\"text\" class=\"w-full text-center font-bold text-2xl p-3 rounded-lg focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 text-white bg-neutral-700\" [class.bg-red-700]=\"this.denied()\" [class.bg-teal-700]=\"this.accepted()\" maxlength=\"1\" (keypress)=\"onDigitInput($event)\" (keyup.backspace)=\"onBackspace($event)\" pattern=\"[0-9]*\" inputmode=\"numeric\" />\n          <input #viewChild3 [formControl]=\"ctrl3()\" type=\"text\" class=\"w-full text-center font-bold text-2xl p-3 rounded-lg focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 text-white bg-neutral-700\" [class.bg-red-700]=\"this.denied()\" [class.bg-teal-700]=\"this.accepted()\" maxlength=\"1\" (keypress)=\"onDigitInput($event)\" (keyup.backspace)=\"onBackspace($event)\" pattern=\"[0-9]*\" inputmode=\"numeric\" />\n          <input #viewChild4 [formControl]=\"ctrl4()\" type=\"text\" class=\"w-full text-center font-bold text-2xl p-3 rounded-lg focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 text-white bg-neutral-700\" [class.bg-red-700]=\"this.denied()\" [class.bg-teal-700]=\"this.accepted()\" maxlength=\"1\" (keypress)=\"onDigitInput($event)\" (keyup.backspace)=\"onBackspace($event)\" pattern=\"[0-9]*\" inputmode=\"numeric\" />\n        </form>\n      }\n      @if (this.spxSimpleMode()) {\n        <spx-button\n          [spxFullWidth]=\"true\"\n          [spxSeverity]=\"spxSeverity.success\"\n          (spxClick)=\"this.handleConfirm()\"\n        >{{ this.txtConfirm() }}</spx-button>\n      }\n      @if (!this.spxSimpleMode()) {\n        <spx-button\n          [spxFullWidth]=\"true\"\n          [spxSeverity]=\"spxSeverity.warning\"\n          (spxClick)=\"this.handleReset()\"\n        >{{ this.txtReset() }}</spx-button>\n      }\n      <spx-button\n        [spxFullWidth]=\"true\"\n        [spxSeverity]=\"spxSeverity.error\"\n        (spxClick)=\"this.handleCancel()\"\n      >{{ this.txtCancel() }}</spx-button>\n    </div>\n  </div>\n</div>", dependencies: [{ kind: "component", type: SpxButtonComponent, selector: "spx-button", inputs: ["spxDisabled", "spxClass", "spxClassObject", "spxForm", "spxFullHeight", "spxFullWidth", "spxSeverity", "spxSize", "spxTabIndex", "spxType", "spxName"], outputs: ["spxClick"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: SpxNumberCheckComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SpxNumberCheckComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'spx-number-check', host: {
-                        '(spxChange)': 'handleChangeEvent($event)'
-                    }, imports: [
+            args: [{ selector: 'spx-number-check', imports: [
                         SpxButtonComponent,
                         FormsModule,
                         ReactiveFormsModule
                     ], changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, template: "<div class=\"fixed top-0 left-0 right-0 bottom-0 z-40 bg-black\">\n  <div class=\"mx-auto mt-32 max-w-96 bg-black rounded-lg\">\n    <div class=\"flex flex-col gap-3 p-3\">\n      <div class=\"bg-yellow-300 text-black text-center rounded p-3 text-xl\">\n        <div class=\"font-bold\">{{ this.spxAction() }}</div>\n        {{ this.txtConfirmMessage() }}\n      </div>\n      @if (!this.spxSimpleMode()) {\n        <form class=\"block grid grid-cols-4 gap-3\" [formGroup]=\"this.form()!\" (ngSubmit)=\"null\">\n          <input #viewChild1 [formControl]=\"ctrl1()\" type=\"text\" autofocus class=\"w-full text-center font-bold text-2xl p-3 rounded-lg focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 text-white bg-neutral-700\" [class.bg-red-700]=\"this.denied()\" [class.bg-teal-700]=\"this.accepted()\" maxlength=\"1\" (keypress)=\"onDigitInput($event)\" pattern=\"[0-9]*\" inputmode=\"numeric\"  />\n          <input #viewChild2 [formControl]=\"ctrl2()\" type=\"text\" class=\"w-full text-center font-bold text-2xl p-3 rounded-lg focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 text-white bg-neutral-700\" [class.bg-red-700]=\"this.denied()\" [class.bg-teal-700]=\"this.accepted()\" maxlength=\"1\" (keypress)=\"onDigitInput($event)\" (keyup.backspace)=\"onBackspace($event)\" pattern=\"[0-9]*\" inputmode=\"numeric\" />\n          <input #viewChild3 [formControl]=\"ctrl3()\" type=\"text\" class=\"w-full text-center font-bold text-2xl p-3 rounded-lg focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 text-white bg-neutral-700\" [class.bg-red-700]=\"this.denied()\" [class.bg-teal-700]=\"this.accepted()\" maxlength=\"1\" (keypress)=\"onDigitInput($event)\" (keyup.backspace)=\"onBackspace($event)\" pattern=\"[0-9]*\" inputmode=\"numeric\" />\n          <input #viewChild4 [formControl]=\"ctrl4()\" type=\"text\" class=\"w-full text-center font-bold text-2xl p-3 rounded-lg focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 text-white bg-neutral-700\" [class.bg-red-700]=\"this.denied()\" [class.bg-teal-700]=\"this.accepted()\" maxlength=\"1\" (keypress)=\"onDigitInput($event)\" (keyup.backspace)=\"onBackspace($event)\" pattern=\"[0-9]*\" inputmode=\"numeric\" />\n        </form>\n      }\n      @if (this.spxSimpleMode()) {\n        <spx-button\n          [spxFullWidth]=\"true\"\n          [spxSeverity]=\"spxSeverity.success\"\n          (spxClick)=\"this.handleConfirm()\"\n        >{{ this.txtConfirm() }}</spx-button>\n      }\n      @if (!this.spxSimpleMode()) {\n        <spx-button\n          [spxFullWidth]=\"true\"\n          [spxSeverity]=\"spxSeverity.warning\"\n          (spxClick)=\"this.handleReset()\"\n        >{{ this.txtReset() }}</spx-button>\n      }\n      <spx-button\n        [spxFullWidth]=\"true\"\n        [spxSeverity]=\"spxSeverity.error\"\n        (spxClick)=\"this.handleCancel()\"\n      >{{ this.txtCancel() }}</spx-button>\n    </div>\n  </div>\n</div>" }]
-        }], ctorParameters: () => [{ type: i1.FormBuilder }] });
+        }], ctorParameters: () => [{ type: i1.FormBuilder }], propDecorators: { spxAction: [{ type: i0.Input, args: [{ isSignal: true, alias: "spxAction", required: true }] }], spxSimpleMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "spxSimpleMode", required: false }] }], spxPincode: [{ type: i0.Input, args: [{ isSignal: true, alias: "spxPincode", required: true }] }], txtCancel: [{ type: i0.Input, args: [{ isSignal: true, alias: "txtCancel", required: true }] }], txtConfirm: [{ type: i0.Input, args: [{ isSignal: true, alias: "txtConfirm", required: true }] }], txtConfirmMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "txtConfirmMessage", required: true }] }], txtReset: [{ type: i0.Input, args: [{ isSignal: true, alias: "txtReset", required: true }] }], spxCancel: [{ type: i0.Output, args: ["spxCancel"] }], spxConfirm: [{ type: i0.Output, args: ["spxConfirm"] }], viewChild1: [{ type: i0.ViewChild, args: ['viewChild1', { isSignal: true }] }], viewChild2: [{ type: i0.ViewChild, args: ['viewChild2', { isSignal: true }] }], viewChild3: [{ type: i0.ViewChild, args: ['viewChild3', { isSignal: true }] }], viewChild4: [{ type: i0.ViewChild, args: ['viewChild4', { isSignal: true }] }] } });
 
 /**
  * Generated bundle index. Do not edit.

package/fesm2022/softpak-components-spx-number-check.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"softpak-components-spx-number-check.mjs","sources":["../../../../projects/softpak/components/spx-number-check/spx-number-check.component.ts","../../../../projects/softpak/components/spx-number-check/spx-number-check.component.html","../../../../projects/softpak/components/spx-number-check/softpak-components-spx-number-check.ts"],"sourcesContent":["\nimport { ChangeDetectionStrategy, Component, ElementRef, OnDestroy, OnInit, computed, input, output, signal, viewChild } from '@angular/core';\nimport { FormBuilder, FormControl, FormGroup, FormsModule, ReactiveFormsModule } from '@angular/forms';\nimport { SpxButtonComponent } from '@softpak/components/spx-button';\nimport { SpxSeverityEnum, unsubscribeSubscriptions } from '@softpak/components/spx-helpers';\nimport { Subscription } from 'rxjs';\n\n@Component({\n    selector: 'spx-number-check',\n    host: {\n        '(spxChange)': 'handleChangeEvent($event)'\n    },\n    imports: [\n        SpxButtonComponent,\n        FormsModule,\n        ReactiveFormsModule\n    ],\n    templateUrl: './spx-number-check.component.html',\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    standalone: true,\n})\nexport class SpxNumberCheckComponent implements OnInit, OnDestroy {\n  readonly spxAction = input.required<string>();\n  readonly spxSimpleMode = input(false);\n  readonly spxPincode = input.required<string>();\n  readonly txtCancel = input.required<string>();\n  readonly txtConfirm = input.required<string>();\n  readonly txtConfirmMessage = input.required<string>();\n  readonly txtReset = input.required<string>();\n  spxCancel = output();\n  spxConfirm = output();\n  readonly viewChild1 = viewChild.required<ElementRef<HTMLInputElement>>('viewChild1');\n  readonly viewChild2 = viewChild.required<ElementRef<HTMLInputElement>>('viewChild2');\n  readonly viewChild3 = viewChild.required<ElementRef<HTMLInputElement>>('viewChild3');\n  readonly viewChild4 = viewChild.required<ElementRef<HTMLInputElement>>('viewChild4');\n  form = signal<FormGroup| null>(null);\n  spxSeverity = SpxSeverityEnum;\n  accepted = signal<boolean>(false);\n  denied = signal<boolean>(false);\n  private subscription: {\n    listenToCtrl1?: Subscription;\n    listenToCtrl2?: Subscription;\n    listenToCtrl3?: Subscription;\n    listenToCtrl4?: Subscription;\n    listenToTyping?: Subscription;\n  } = {};\n\n  readonly ctrl1 = computed(() => this.form()?.get('ctrl1') as FormControl);\n  readonly ctrl2 = computed(() => this.form()?.get('ctrl2') as FormControl);\n  readonly ctrl3 = computed(() => this.form()?.get('ctrl3') as FormControl);\n  readonly ctrl4 = computed(() => this.form()?.get('ctrl4') as FormControl);\n\n  constructor(private readonly formBuilder: FormBuilder) {\n    this.form.set(this.formBuilder.group({\n      ctrl1: [null, []],\n      ctrl2: [null, []],\n      ctrl3: [null, []],\n      ctrl4: [null, []],\n    }));\n  }\n\n  ngOnInit(): void {\n    this.subscription.listenToTyping = this.form()!.valueChanges.subscribe(() => {\n      this.accepted.set(false);\n      this.denied.set(false);\n      if (this.ctrl1().value && this.ctrl2().value && this.ctrl3().value && this.ctrl4().value) {\n        this.checkPincode();\n      }\n    });\n\n    this.subscription.listenToCtrl1 = this.ctrl1().valueChanges.subscribe(value => {\n      if (value) {\n        this.viewChild2().nativeElement.focus();\n      } else {\n\n      }\n    });\n\n    this.subscription.listenToCtrl2 = this.ctrl2().valueChanges.subscribe(value => {\n      if (value) {\n        this.viewChild3().nativeElement.focus();\n      } else {\n\n      }\n    });\n\n    this.subscription.listenToCtrl3 = this.ctrl3().valueChanges.subscribe(value => {\n      if (value) {\n        this.viewChild4().nativeElement.focus();\n      } else {\n\n      }\n    });\n  }\n\n  //TODO CHECK THIS\n  // ngOnChanges(changes: SimpleChanges): void {\n  //   setTimeout(() => {\n  //     const viewChild1 = this?.viewChild1();\n  //     if (viewChild1?) {\n  //       viewChild1.focus();\n  //     }\n  //   }, 0);\n  // }\n\n  ngOnDestroy(): void {\n    unsubscribeSubscriptions(this.subscription);\n  }\n\n  handleCancel(): void {\n    this.spxCancel.emit();\n  }\n\n  handleConfirm(): void {\n    this.spxConfirm.emit();\n  }\n\n  handleReset(): void {\n    this.ctrl1().reset();\n    this.ctrl2().reset();\n    this.ctrl3().reset();\n    this.ctrl4().reset();\n    this.viewChild1().nativeElement?.focus();\n    this.accepted.set(false);\n    this.denied.set(false);\n  }\n\n  onDigitInput(event: KeyboardEvent) {\n    // let element: HTMLElement | null;\n    // if (\n    //   event.code === 'Digit0' ||\n    //   event.code === 'Digit1' ||\n    //   event.code === 'Digit2' ||\n    //   event.code === 'Digit3' ||\n    //   event.code === 'Digit4' ||\n    //   event.code === 'Digit5' ||\n    //   event.code === 'Digit6' ||\n    //   event.code === 'Digit7' ||\n    //   event.code === 'Digit8' ||\n    //   event.code === 'Digit9' ||\n    //   event.code === 'Numpad0' ||\n    //   event.code === 'Numpad1' ||\n    //   event.code === 'Numpad2' ||\n    //   event.code === 'Numpad3' ||\n    //   event.code === 'Numpad4' ||\n    //   event.code === 'Numpad5' ||\n    //   event.code === 'Numpad6' ||\n    //   event.code === 'Numpad7' ||\n    //   event.code === 'Numpad8' ||\n    //   event.code === 'Numpad9') {\n    //     element = event.srcElement.nextElementSibling;\n\n    //     if (element === null) {\n    //       return;\n    //     }\n    //     else {\n    //       // setTimeout(() => { element.focus(); });\n    //     }\n    // }\n    \n  }\n\n  onBackspace(event: Event) {\n    (event.target as HTMLElement)?.focus();\n  }\n\n  private checkPincode(): void {\n    if (this.spxPincode() === `${this.ctrl1().value}${this.ctrl2().value}${this.ctrl3().value}${this.ctrl4().value}`) {\n      this.accepted.set(true);\n      setTimeout(() => {\n        this.spxConfirm.emit();\n      }, 500);\n    } else {\n      this.denied.set(true);\n    }\n  }\n}\n","<div class=\"fixed top-0 left-0 right-0 bottom-0 z-40 bg-black\">\n  <div class=\"mx-auto mt-32 max-w-96 bg-black rounded-lg\">\n    <div class=\"flex flex-col gap-3 p-3\">\n      <div class=\"bg-yellow-300 text-black text-center rounded p-3 text-xl\">\n        <div class=\"font-bold\">{{ this.spxAction() }}</div>\n        {{ this.txtConfirmMessage() }}\n      </div>\n      @if (!this.spxSimpleMode()) {\n        <form class=\"block grid grid-cols-4 gap-3\" [formGroup]=\"this.form()!\" (ngSubmit)=\"null\">\n          <input #viewChild1 [formControl]=\"ctrl1()\" type=\"text\" autofocus class=\"w-full text-center font-bold text-2xl p-3 rounded-lg focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 text-white bg-neutral-700\" [class.bg-red-700]=\"this.denied()\" [class.bg-teal-700]=\"this.accepted()\" maxlength=\"1\" (keypress)=\"onDigitInput($event)\" pattern=\"[0-9]*\" inputmode=\"numeric\"  />\n          <input #viewChild2 [formControl]=\"ctrl2()\" type=\"text\" class=\"w-full text-center font-bold text-2xl p-3 rounded-lg focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 text-white bg-neutral-700\" [class.bg-red-700]=\"this.denied()\" [class.bg-teal-700]=\"this.accepted()\" maxlength=\"1\" (keypress)=\"onDigitInput($event)\" (keyup.backspace)=\"onBackspace($event)\" pattern=\"[0-9]*\" inputmode=\"numeric\" />\n          <input #viewChild3 [formControl]=\"ctrl3()\" type=\"text\" class=\"w-full text-center font-bold text-2xl p-3 rounded-lg focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 text-white bg-neutral-700\" [class.bg-red-700]=\"this.denied()\" [class.bg-teal-700]=\"this.accepted()\" maxlength=\"1\" (keypress)=\"onDigitInput($event)\" (keyup.backspace)=\"onBackspace($event)\" pattern=\"[0-9]*\" inputmode=\"numeric\" />\n          <input #viewChild4 [formControl]=\"ctrl4()\" type=\"text\" class=\"w-full text-center font-bold text-2xl p-3 rounded-lg focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 text-white bg-neutral-700\" [class.bg-red-700]=\"this.denied()\" [class.bg-teal-700]=\"this.accepted()\" maxlength=\"1\" (keypress)=\"onDigitInput($event)\" (keyup.backspace)=\"onBackspace($event)\" pattern=\"[0-9]*\" inputmode=\"numeric\" />\n        </form>\n      }\n      @if (this.spxSimpleMode()) {\n        <spx-button\n          [spxFullWidth]=\"true\"\n          [spxSeverity]=\"spxSeverity.success\"\n          (spxClick)=\"this.handleConfirm()\"\n        >{{ this.txtConfirm() }}</spx-button>\n      }\n      @if (!this.spxSimpleMode()) {\n        <spx-button\n          [spxFullWidth]=\"true\"\n          [spxSeverity]=\"spxSeverity.warning\"\n          (spxClick)=\"this.handleReset()\"\n        >{{ this.txtReset() }}</spx-button>\n      }\n      <spx-button\n        [spxFullWidth]=\"true\"\n        [spxSeverity]=\"spxSeverity.error\"\n        (spxClick)=\"this.handleCancel()\"\n      >{{ this.txtCancel() }}</spx-button>\n    </div>\n  </div>\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-number-check.mjs","sources":["../../../../projects/softpak/components/spx-number-check/spx-number-check.component.ts","../../../../projects/softpak/components/spx-number-check/spx-number-check.component.html","../../../../projects/softpak/components/spx-number-check/softpak-components-spx-number-check.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, ElementRef, OnDestroy, OnInit, computed, input, output, signal, viewChild } from '@angular/core';\nimport { FormBuilder, FormControl, FormGroup, FormsModule, ReactiveFormsModule } from '@angular/forms';\nimport { SpxSeverityEnum, unsubscribeSubscriptions } from '@softpak/components/spx-helpers';\n\nimport { SpxButtonComponent } from '@softpak/components/spx-button';\nimport { Subscription } from 'rxjs';\n\n@Component({\n    selector: 'spx-number-check',\n    imports: [\n        SpxButtonComponent,\n        FormsModule,\n        ReactiveFormsModule\n    ],\n    templateUrl: './spx-number-check.component.html',\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    standalone: true,\n})\nexport class SpxNumberCheckComponent implements OnInit, OnDestroy {\n  readonly spxAction = input.required<string>();\n  readonly spxSimpleMode = input(false);\n  readonly spxPincode = input.required<string>();\n  readonly txtCancel = input.required<string>();\n  readonly txtConfirm = input.required<string>();\n  readonly txtConfirmMessage = input.required<string>();\n  readonly txtReset = input.required<string>();\n  spxCancel = output();\n  spxConfirm = output();\n  readonly viewChild1 = viewChild.required<ElementRef<HTMLInputElement>>('viewChild1');\n  readonly viewChild2 = viewChild.required<ElementRef<HTMLInputElement>>('viewChild2');\n  readonly viewChild3 = viewChild.required<ElementRef<HTMLInputElement>>('viewChild3');\n  readonly viewChild4 = viewChild.required<ElementRef<HTMLInputElement>>('viewChild4');\n  form = signal<FormGroup| null>(null);\n  spxSeverity = SpxSeverityEnum;\n  accepted = signal<boolean>(false);\n  denied = signal<boolean>(false);\n  private subscription: {\n    listenToCtrl1?: Subscription;\n    listenToCtrl2?: Subscription;\n    listenToCtrl3?: Subscription;\n    listenToCtrl4?: Subscription;\n    listenToTyping?: Subscription;\n  } = {};\n\n  readonly ctrl1 = computed(() => this.form()?.get('ctrl1') as FormControl);\n  readonly ctrl2 = computed(() => this.form()?.get('ctrl2') as FormControl);\n  readonly ctrl3 = computed(() => this.form()?.get('ctrl3') as FormControl);\n  readonly ctrl4 = computed(() => this.form()?.get('ctrl4') as FormControl);\n\n  constructor(private readonly formBuilder: FormBuilder) {\n    this.form.set(this.formBuilder.group({\n      ctrl1: [null, []],\n      ctrl2: [null, []],\n      ctrl3: [null, []],\n      ctrl4: [null, []],\n    }));\n  }\n\n  ngOnInit(): void {\n    this.subscription.listenToTyping = this.form()!.valueChanges.subscribe(() => {\n      this.accepted.set(false);\n      this.denied.set(false);\n      if (this.ctrl1().value && this.ctrl2().value && this.ctrl3().value && this.ctrl4().value) {\n        this.checkPincode();\n      }\n    });\n\n    this.subscription.listenToCtrl1 = this.ctrl1().valueChanges.subscribe(value => {\n      if (value) {\n        this.viewChild2().nativeElement.focus();\n      } else {\n\n      }\n    });\n\n    this.subscription.listenToCtrl2 = this.ctrl2().valueChanges.subscribe(value => {\n      if (value) {\n        this.viewChild3().nativeElement.focus();\n      } else {\n\n      }\n    });\n\n    this.subscription.listenToCtrl3 = this.ctrl3().valueChanges.subscribe(value => {\n      if (value) {\n        this.viewChild4().nativeElement.focus();\n      } else {\n\n      }\n    });\n  }\n\n  //TODO CHECK THIS\n  // ngOnChanges(changes: SimpleChanges): void {\n  //   setTimeout(() => {\n  //     const viewChild1 = this?.viewChild1();\n  //     if (viewChild1?) {\n  //       viewChild1.focus();\n  //     }\n  //   }, 0);\n  // }\n\n  ngOnDestroy(): void {\n    unsubscribeSubscriptions(this.subscription);\n  }\n\n  handleCancel(): void {\n    this.spxCancel.emit();\n  }\n\n  handleConfirm(): void {\n    this.spxConfirm.emit();\n  }\n\n  handleReset(): void {\n    this.ctrl1().reset();\n    this.ctrl2().reset();\n    this.ctrl3().reset();\n    this.ctrl4().reset();\n    this.viewChild1().nativeElement?.focus();\n    this.accepted.set(false);\n    this.denied.set(false);\n  }\n\n  onDigitInput(event: KeyboardEvent) {\n    // let element: HTMLElement | null;\n    // if (\n    //   event.code === 'Digit0' ||\n    //   event.code === 'Digit1' ||\n    //   event.code === 'Digit2' ||\n    //   event.code === 'Digit3' ||\n    //   event.code === 'Digit4' ||\n    //   event.code === 'Digit5' ||\n    //   event.code === 'Digit6' ||\n    //   event.code === 'Digit7' ||\n    //   event.code === 'Digit8' ||\n    //   event.code === 'Digit9' ||\n    //   event.code === 'Numpad0' ||\n    //   event.code === 'Numpad1' ||\n    //   event.code === 'Numpad2' ||\n    //   event.code === 'Numpad3' ||\n    //   event.code === 'Numpad4' ||\n    //   event.code === 'Numpad5' ||\n    //   event.code === 'Numpad6' ||\n    //   event.code === 'Numpad7' ||\n    //   event.code === 'Numpad8' ||\n    //   event.code === 'Numpad9') {\n    //     element = event.srcElement.nextElementSibling;\n\n    //     if (element === null) {\n    //       return;\n    //     }\n    //     else {\n    //       // setTimeout(() => { element.focus(); });\n    //     }\n    // }\n    \n  }\n\n  onBackspace(event: Event) {\n    (event.target as HTMLElement)?.focus();\n  }\n\n  private checkPincode(): void {\n    if (this.spxPincode() === `${this.ctrl1().value}${this.ctrl2().value}${this.ctrl3().value}${this.ctrl4().value}`) {\n      this.accepted.set(true);\n      setTimeout(() => {\n        this.spxConfirm.emit();\n      }, 500);\n    } else {\n      this.denied.set(true);\n    }\n  }\n}\n","<div class=\"fixed top-0 left-0 right-0 bottom-0 z-40 bg-black\">\n  <div class=\"mx-auto mt-32 max-w-96 bg-black rounded-lg\">\n    <div class=\"flex flex-col gap-3 p-3\">\n      <div class=\"bg-yellow-300 text-black text-center rounded p-3 text-xl\">\n        <div class=\"font-bold\">{{ this.spxAction() }}</div>\n        {{ this.txtConfirmMessage() }}\n      </div>\n      @if (!this.spxSimpleMode()) {\n        <form class=\"block grid grid-cols-4 gap-3\" [formGroup]=\"this.form()!\" (ngSubmit)=\"null\">\n          <input #viewChild1 [formControl]=\"ctrl1()\" type=\"text\" autofocus class=\"w-full text-center font-bold text-2xl p-3 rounded-lg focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 text-white bg-neutral-700\" [class.bg-red-700]=\"this.denied()\" [class.bg-teal-700]=\"this.accepted()\" maxlength=\"1\" (keypress)=\"onDigitInput($event)\" pattern=\"[0-9]*\" inputmode=\"numeric\"  />\n          <input #viewChild2 [formControl]=\"ctrl2()\" type=\"text\" class=\"w-full text-center font-bold text-2xl p-3 rounded-lg focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 text-white bg-neutral-700\" [class.bg-red-700]=\"this.denied()\" [class.bg-teal-700]=\"this.accepted()\" maxlength=\"1\" (keypress)=\"onDigitInput($event)\" (keyup.backspace)=\"onBackspace($event)\" pattern=\"[0-9]*\" inputmode=\"numeric\" />\n          <input #viewChild3 [formControl]=\"ctrl3()\" type=\"text\" class=\"w-full text-center font-bold text-2xl p-3 rounded-lg focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 text-white bg-neutral-700\" [class.bg-red-700]=\"this.denied()\" [class.bg-teal-700]=\"this.accepted()\" maxlength=\"1\" (keypress)=\"onDigitInput($event)\" (keyup.backspace)=\"onBackspace($event)\" pattern=\"[0-9]*\" inputmode=\"numeric\" />\n          <input #viewChild4 [formControl]=\"ctrl4()\" type=\"text\" class=\"w-full text-center font-bold text-2xl p-3 rounded-lg focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 text-white bg-neutral-700\" [class.bg-red-700]=\"this.denied()\" [class.bg-teal-700]=\"this.accepted()\" maxlength=\"1\" (keypress)=\"onDigitInput($event)\" (keyup.backspace)=\"onBackspace($event)\" pattern=\"[0-9]*\" inputmode=\"numeric\" />\n        </form>\n      }\n      @if (this.spxSimpleMode()) {\n        <spx-button\n          [spxFullWidth]=\"true\"\n          [spxSeverity]=\"spxSeverity.success\"\n          (spxClick)=\"this.handleConfirm()\"\n        >{{ this.txtConfirm() }}</spx-button>\n      }\n      @if (!this.spxSimpleMode()) {\n        <spx-button\n          [spxFullWidth]=\"true\"\n          [spxSeverity]=\"spxSeverity.warning\"\n          (spxClick)=\"this.handleReset()\"\n        >{{ this.txtReset() }}</spx-button>\n      }\n      <spx-button\n        [spxFullWidth]=\"true\"\n        [spxSeverity]=\"spxSeverity.error\"\n        (spxClick)=\"this.handleCancel()\"\n      >{{ this.txtCancel() }}</spx-button>\n    </div>\n  </div>\n</div>","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;;;;MAkBa,uBAAuB,CAAA;AA+BlC,IAAA,WAAA,CAA6B,WAAwB,EAAA;QAAxB,IAAA,CAAA,WAAW,GAAX,WAAW;AA9B/B,QAAA,IAAA,CAAA,SAAS,GAAG,KAAK,CAAC,QAAQ,oDAAU;AACpC,QAAA,IAAA,CAAA,aAAa,GAAG,KAAK,CAAC,KAAK,yDAAC;AAC5B,QAAA,IAAA,CAAA,UAAU,GAAG,KAAK,CAAC,QAAQ,qDAAU;AACrC,QAAA,IAAA,CAAA,SAAS,GAAG,KAAK,CAAC,QAAQ,oDAAU;AACpC,QAAA,IAAA,CAAA,UAAU,GAAG,KAAK,CAAC,QAAQ,qDAAU;AACrC,QAAA,IAAA,CAAA,iBAAiB,GAAG,KAAK,CAAC,QAAQ,4DAAU;AAC5C,QAAA,IAAA,CAAA,QAAQ,GAAG,KAAK,CAAC,QAAQ,mDAAU;QAC5C,IAAA,CAAA,SAAS,GAAG,MAAM,EAAE;QACpB,IAAA,CAAA,UAAU,GAAG,MAAM,EAAE;AACZ,QAAA,IAAA,CAAA,UAAU,GAAG,SAAS,CAAC,QAAQ,CAA+B,YAAY,CAAC;AAC3E,QAAA,IAAA,CAAA,UAAU,GAAG,SAAS,CAAC,QAAQ,CAA+B,YAAY,CAAC;AAC3E,QAAA,IAAA,CAAA,UAAU,GAAG,SAAS,CAAC,QAAQ,CAA+B,YAAY,CAAC;AAC3E,QAAA,IAAA,CAAA,UAAU,GAAG,SAAS,CAAC,QAAQ,CAA+B,YAAY,CAAC;AACpF,QAAA,IAAA,CAAA,IAAI,GAAG,MAAM,CAAkB,IAAI,gDAAC;QACpC,IAAA,CAAA,WAAW,GAAG,eAAe;AAC7B,QAAA,IAAA,CAAA,QAAQ,GAAG,MAAM,CAAU,KAAK,oDAAC;AACjC,QAAA,IAAA,CAAA,MAAM,GAAG,MAAM,CAAU,KAAK,kDAAC;QACvB,IAAA,CAAA,YAAY,GAMhB,EAAE;AAEG,QAAA,IAAA,CAAA,KAAK,GAAG,QAAQ,CAAC,MAAM,IAAI,CAAC,IAAI,EAAE,EAAE,GAAG,CAAC,OAAO,CAAgB,iDAAC;AAChE,QAAA,IAAA,CAAA,KAAK,GAAG,QAAQ,CAAC,MAAM,IAAI,CAAC,IAAI,EAAE,EAAE,GAAG,CAAC,OAAO,CAAgB,iDAAC;AAChE,QAAA,IAAA,CAAA,KAAK,GAAG,QAAQ,CAAC,MAAM,IAAI,CAAC,IAAI,EAAE,EAAE,GAAG,CAAC,OAAO,CAAgB,iDAAC;AAChE,QAAA,IAAA,CAAA,KAAK,GAAG,QAAQ,CAAC,MAAM,IAAI,CAAC,IAAI,EAAE,EAAE,GAAG,CAAC,OAAO,CAAgB,iDAAC;QAGvE,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC;AACnC,YAAA,KAAK,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC;AACjB,YAAA,KAAK,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC;AACjB,YAAA,KAAK,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC;AACjB,YAAA,KAAK,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC;AAClB,SAAA,CAAC,CAAC;IACL;IAEA,QAAQ,GAAA;AACN,QAAA,IAAI,CAAC,YAAY,CAAC,cAAc,GAAG,IAAI,CAAC,IAAI,EAAG,CAAC,YAAY,CAAC,SAAS,CAAC,MAAK;AAC1E,YAAA,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,KAAK,CAAC;AACxB,YAAA,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,KAAK,CAAC;AACtB,YAAA,IAAI,IAAI,CAAC,KAAK,EAAE,CAAC,KAAK,IAAI,IAAI,CAAC,KAAK,EAAE,CAAC,KAAK,IAAI,IAAI,CAAC,KAAK,EAAE,CAAC,KAAK,IAAI,IAAI,CAAC,KAAK,EAAE,CAAC,KAAK,EAAE;gBACxF,IAAI,CAAC,YAAY,EAAE;YACrB;AACF,QAAA,CAAC,CAAC;AAEF,QAAA,IAAI,CAAC,YAAY,CAAC,aAAa,GAAG,IAAI,CAAC,KAAK,EAAE,CAAC,YAAY,CAAC,SAAS,CAAC,KAAK,IAAG;YAC5E,IAAI,KAAK,EAAE;gBACT,IAAI,CAAC,UAAU,EAAE,CAAC,aAAa,CAAC,KAAK,EAAE;YACzC;iBAAO;YAEP;AACF,QAAA,CAAC,CAAC;AAEF,QAAA,IAAI,CAAC,YAAY,CAAC,aAAa,GAAG,IAAI,CAAC,KAAK,EAAE,CAAC,YAAY,CAAC,SAAS,CAAC,KAAK,IAAG;YAC5E,IAAI,KAAK,EAAE;gBACT,IAAI,CAAC,UAAU,EAAE,CAAC,aAAa,CAAC,KAAK,EAAE;YACzC;iBAAO;YAEP;AACF,QAAA,CAAC,CAAC;AAEF,QAAA,IAAI,CAAC,YAAY,CAAC,aAAa,GAAG,IAAI,CAAC,KAAK,EAAE,CAAC,YAAY,CAAC,SAAS,CAAC,KAAK,IAAG;YAC5E,IAAI,KAAK,EAAE;gBACT,IAAI,CAAC,UAAU,EAAE,CAAC,aAAa,CAAC,KAAK,EAAE;YACzC;iBAAO;YAEP;AACF,QAAA,CAAC,CAAC;IACJ;;;;;;;;;;IAYA,WAAW,GAAA;AACT,QAAA,wBAAwB,CAAC,IAAI,CAAC,YAAY,CAAC;IAC7C;IAEA,YAAY,GAAA;AACV,QAAA,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE;IACvB;IAEA,aAAa,GAAA;AACX,QAAA,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE;IACxB;IAEA,WAAW,GAAA;AACT,QAAA,IAAI,CAAC,KAAK,EAAE,CAAC,KAAK,EAAE;AACpB,QAAA,IAAI,CAAC,KAAK,EAAE,CAAC,KAAK,EAAE;AACpB,QAAA,IAAI,CAAC,KAAK,EAAE,CAAC,KAAK,EAAE;AACpB,QAAA,IAAI,CAAC,KAAK,EAAE,CAAC,KAAK,EAAE;QACpB,IAAI,CAAC,UAAU,EAAE,CAAC,aAAa,EAAE,KAAK,EAAE;AACxC,QAAA,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,KAAK,CAAC;AACxB,QAAA,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,KAAK,CAAC;IACxB;AAEA,IAAA,YAAY,CAAC,KAAoB,EAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAiCjC;AAEA,IAAA,WAAW,CAAC,KAAY,EAAA;AACrB,QAAA,KAAK,CAAC,MAAsB,EAAE,KAAK,EAAE;IACxC;IAEQ,YAAY,GAAA;AAClB,QAAA,IAAI,IAAI,CAAC,UAAU,EAAE,KAAK,CAAA,EAAG,IAAI,CAAC,KAAK,EAAE,CAAC,KAAK,CAAA,EAAG,IAAI,CAAC,KAAK,EAAE,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,EAAE,CAAC,KAAK,CAAA,EAAG,IAAI,CAAC,KAAK,EAAE,CAAC,KAAK,CAAA,CAAE,EAAE;AAChH,YAAA,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,IAAI,CAAC;YACvB,UAAU,CAAC,MAAK;AACd,gBAAA,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE;YACxB,CAAC,EAAE,GAAG,CAAC;QACT;aAAO;AACL,YAAA,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,IAAI,CAAC;QACvB;IACF;8GA1JW,uBAAuB,EAAA,IAAA,EAAA,CAAA,EAAA,KAAA,EAAA,EAAA,CAAA,WAAA,EAAA,CAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAvB,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,uBAAuB,+gDClBpC,m2FAoCM,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,ED1BE,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,EAAA,SAAA,CAAA,EAAA,OAAA,EAAA,CAAA,UAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAClB,WAAW,m+BACX,mBAAmB,EAAA,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,EAAA,CAAA,kBAAA,EAAA,QAAA,EAAA,aAAA,EAAA,MAAA,EAAA,CAAA,WAAA,CAAA,EAAA,OAAA,EAAA,CAAA,UAAA,CAAA,EAAA,QAAA,EAAA,CAAA,QAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA;;2FAMd,uBAAuB,EAAA,UAAA,EAAA,CAAA;kBAXnC,SAAS;AACI,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,kBAAkB,EAAA,OAAA,EACnB;wBACL,kBAAkB;wBAClB,WAAW;wBACX;AACH,qBAAA,EAAA,eAAA,EAEgB,uBAAuB,CAAC,MAAM,EAAA,UAAA,EACnC,IAAI,EAAA,QAAA,EAAA,m2FAAA,EAAA;AAYqD,SAAA,CAAA,EAAA,cAAA,EAAA,MAAA,CAAA,EAAA,IAAA,EAAA,EAAA,CAAA,WAAA,EAAA,CAAA,EAAA,cAAA,EAAA,EAAA,SAAA,EAAA,CAAA,EAAA,IAAA,EAAA,EAAA,CAAA,KAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,KAAA,EAAA,WAAA,EAAA,QAAA,EAAA,IAAA,EAAA,CAAA,EAAA,CAAA,EAAA,aAAA,EAAA,CAAA,EAAA,IAAA,EAAA,EAAA,CAAA,KAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,KAAA,EAAA,eAAA,EAAA,QAAA,EAAA,KAAA,EAAA,CAAA,EAAA,CAAA,EAAA,UAAA,EAAA,CAAA,EAAA,IAAA,EAAA,EAAA,CAAA,KAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,KAAA,EAAA,YAAA,EAAA,QAAA,EAAA,IAAA,EAAA,CAAA,EAAA,CAAA,EAAA,SAAA,EAAA,CAAA,EAAA,IAAA,EAAA,EAAA,CAAA,KAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,KAAA,EAAA,WAAA,EAAA,QAAA,EAAA,IAAA,EAAA,CAAA,EAAA,CAAA,EAAA,UAAA,EAAA,CAAA,EAAA,IAAA,EAAA,EAAA,CAAA,KAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,KAAA,EAAA,YAAA,EAAA,QAAA,EAAA,IAAA,EAAA,CAAA,EAAA,CAAA,EAAA,iBAAA,EAAA,CAAA,EAAA,IAAA,EAAA,EAAA,CAAA,KAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,KAAA,EAAA,mBAAA,EAAA,QAAA,EAAA,IAAA,EAAA,CAAA,EAAA,CAAA,EAAA,QAAA,EAAA,CAAA,EAAA,IAAA,EAAA,EAAA,CAAA,KAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,KAAA,EAAA,UAAA,EAAA,QAAA,EAAA,IAAA,EAAA,CAAA,EAAA,CAAA,EAAA,SAAA,EAAA,CAAA,EAAA,IAAA,EAAA,EAAA,CAAA,MAAA,EAAA,IAAA,EAAA,CAAA,WAAA,CAAA,EAAA,CAAA,EAAA,UAAA,EAAA,CAAA,EAAA,IAAA,EAAA,EAAA,CAAA,MAAA,EAAA,IAAA,EAAA,CAAA,YAAA,CAAA,EAAA,CAAA,EAAA,UAAA,EAAA,CAAA,EAAA,IAAA,EAAA,EAAA,CAAA,SAAA,EAAA,IAAA,EAAA,CAAA,YAAY,EAAA,EAAA,QAAA,EAAA,IAAA,EAAA,CAAA,EAAA,CAAA,EAAA,UAAA,EAAA,CAAA,EAAA,IAAA,EAAA,EAAA,CAAA,SAAA,EAAA,IAAA,EAAA,CACZ,YAAY,EAAA,EAAA,QAAA,EAAA,IAAA,EAAA,CAAA,EAAA,CAAA,EAAA,UAAA,EAAA,CAAA,EAAA,IAAA,EAAA,EAAA,CAAA,SAAA,EAAA,IAAA,EAAA,CACZ,YAAY,oEACZ,YAAY,EAAA,EAAA,QAAA,EAAA,IAAA,EAAA,CAAA,EAAA,CAAA,EAAA,EAAA,CAAA;;AE/BrF;;AAEG;;;;"}

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

@@ -21,10 +21,10 @@ class SpxPaginationComponent {
     onPageChange(page) {
         this.spxPageChange.emit(page);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: SpxPaginationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.2.3", type: SpxPaginationComponent, isStandalone: true, selector: "spx-pagination", inputs: { faArrowLeft: { classPropertyName: "faArrowLeft", publicName: "faArrowLeft", isSignal: true, isRequired: true, transformFunction: null }, faArrowRight: { classPropertyName: "faArrowRight", publicName: "faArrowRight", isSignal: true, isRequired: true, transformFunction: null }, spxPage: { classPropertyName: "spxPage", publicName: "spxPage", isSignal: true, isRequired: true, transformFunction: null }, spxMaxPages: { classPropertyName: "spxMaxPages", publicName: "spxMaxPages", isSignal: true, isRequired: true, transformFunction: null }, textNext: { classPropertyName: "textNext", publicName: "textNext", isSignal: true, isRequired: true, transformFunction: null }, textPage: { classPropertyName: "textPage", publicName: "textPage", isSignal: true, isRequired: true, transformFunction: null }, textPrevious: { classPropertyName: "textPrevious", publicName: "textPrevious", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { spxPageChange: "spxPageChange" }, ngImport: i0, template: "<div class=\"inline mx-auto flex gap-3 items-center font-bold\">\n  <spx-button (click)=\"onPageChange(spxPage() - 1)\" [spxDisabled]=\"spxPage() === 1\">\n    <fa-icon [icon]=\"faArrowLeft()\"></fa-icon> {{ textPrevious() | translate | capitalize }}\n  </spx-button>\n  {{ textPage() | translate | capitalize }} {{ spxPage() }}\n  <spx-button [spxDisabled]=\"spxMaxPages() > spxPage()\" (click)=\"onPageChange(spxPage() + 1)\">\n    {{ textNext() | translate | capitalize }} <fa-icon [icon]=\"faArrowRight()\"></fa-icon>\n  </spx-button>\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"], outputs: ["iconChange", "titleChange", "animationChange", "maskChange", "flipChange", "sizeChange", "pullChange", "borderChange", "inverseChange", "symbolChange", "rotateChange", "fixedWidthChange", "transformChange", "a11yRoleChange"] }, { kind: "component", type: SpxButtonComponent, selector: "spx-button", inputs: ["spxDisabled", "spxClass", "spxClassObject", "spxForm", "spxFullHeight", "spxFullWidth", "spxSeverity", "spxSize", "spxTabIndex", "spxType", "spxName"], outputs: ["spxClick"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: SpxCapitalizePipe, name: "capitalize" }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SpxPaginationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.8", type: SpxPaginationComponent, isStandalone: true, selector: "spx-pagination", inputs: { faArrowLeft: { classPropertyName: "faArrowLeft", publicName: "faArrowLeft", isSignal: true, isRequired: true, transformFunction: null }, faArrowRight: { classPropertyName: "faArrowRight", publicName: "faArrowRight", isSignal: true, isRequired: true, transformFunction: null }, spxPage: { classPropertyName: "spxPage", publicName: "spxPage", isSignal: true, isRequired: true, transformFunction: null }, spxMaxPages: { classPropertyName: "spxMaxPages", publicName: "spxMaxPages", isSignal: true, isRequired: true, transformFunction: null }, textNext: { classPropertyName: "textNext", publicName: "textNext", isSignal: true, isRequired: true, transformFunction: null }, textPage: { classPropertyName: "textPage", publicName: "textPage", isSignal: true, isRequired: true, transformFunction: null }, textPrevious: { classPropertyName: "textPrevious", publicName: "textPrevious", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { spxPageChange: "spxPageChange" }, ngImport: i0, template: "<div class=\"inline mx-auto flex gap-3 items-center font-bold\">\n  <spx-button (click)=\"onPageChange(spxPage() - 1)\" [spxDisabled]=\"spxPage() === 1\">\n    <fa-icon [icon]=\"faArrowLeft()\"></fa-icon> {{ textPrevious() | translate | capitalize }}\n  </spx-button>\n  {{ textPage() | translate | capitalize }} {{ spxPage() }}\n  <spx-button [spxDisabled]=\"spxMaxPages() > spxPage()\" (click)=\"onPageChange(spxPage() + 1)\">\n    {{ textNext() | translate | capitalize }} <fa-icon [icon]=\"faArrowRight()\"></fa-icon>\n  </spx-button>\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"], outputs: ["iconChange", "titleChange", "animationChange", "maskChange", "flipChange", "sizeChange", "pullChange", "borderChange", "inverseChange", "symbolChange", "rotateChange", "fixedWidthChange", "transformChange", "a11yRoleChange"] }, { kind: "component", type: SpxButtonComponent, selector: "spx-button", inputs: ["spxDisabled", "spxClass", "spxClassObject", "spxForm", "spxFullHeight", "spxFullWidth", "spxSeverity", "spxSize", "spxTabIndex", "spxType", "spxName"], outputs: ["spxClick"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: SpxCapitalizePipe, name: "capitalize" }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: SpxPaginationComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SpxPaginationComponent, decorators: [{
             type: Component,
             args: [{ selector: 'spx-pagination', imports: [
                         FontAwesomeModule,
@@ -32,7 +32,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImpor
                         SpxCapitalizePipe,
                         TranslateModule,
                     ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"inline mx-auto flex gap-3 items-center font-bold\">\n  <spx-button (click)=\"onPageChange(spxPage() - 1)\" [spxDisabled]=\"spxPage() === 1\">\n    <fa-icon [icon]=\"faArrowLeft()\"></fa-icon> {{ textPrevious() | translate | capitalize }}\n  </spx-button>\n  {{ textPage() | translate | capitalize }} {{ spxPage() }}\n  <spx-button [spxDisabled]=\"spxMaxPages() > spxPage()\" (click)=\"onPageChange(spxPage() + 1)\">\n    {{ textNext() | translate | capitalize }} <fa-icon [icon]=\"faArrowRight()\"></fa-icon>\n  </spx-button>\n</div>" }]
-        }] });
+        }], propDecorators: { faArrowLeft: [{ type: i0.Input, args: [{ isSignal: true, alias: "faArrowLeft", required: true }] }], faArrowRight: [{ type: i0.Input, args: [{ isSignal: true, alias: "faArrowRight", required: true }] }], spxPage: [{ type: i0.Input, args: [{ isSignal: true, alias: "spxPage", required: true }] }], spxMaxPages: [{ type: i0.Input, args: [{ isSignal: true, alias: "spxMaxPages", required: true }] }], textNext: [{ type: i0.Input, args: [{ isSignal: true, alias: "textNext", required: true }] }], textPage: [{ type: i0.Input, args: [{ isSignal: true, alias: "textPage", required: true }] }], textPrevious: [{ type: i0.Input, args: [{ isSignal: true, alias: "textPrevious", required: true }] }], spxPageChange: [{ type: i0.Output, args: ["spxPageChange"] }] } });
 
 /**
  * Generated bundle index. Do not edit.

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

@@ -33,15 +33,15 @@ class SpxPatchComponent {
         this.severityError = SpxSeverityEnum.error;
         this.severityWarning = SpxSeverityEnum.warning;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: SpxPatchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.3", type: SpxPatchComponent, isStandalone: true, selector: "spx-patch", inputs: { spxText: { classPropertyName: "spxText", publicName: "spxText", isSignal: true, isRequired: true, transformFunction: null }, patchCheck: { classPropertyName: "patchCheck", publicName: "patchCheck", isSignal: true, isRequired: true, transformFunction: null }, releaseCheck: { classPropertyName: "releaseCheck", publicName: "releaseCheck", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div class=\"flex flex-col gap-2\">\n    @if (releaseCheck()) {\n      <spx-alert [spxTitle]=\"'Requires new release'\" [spxSeverity]=\"severityError\">\n        {{ spxText() ? spxText() : 'This new functionality' }} requires release {{releaseCheck()}}.\n      </spx-alert>\n    }\n  \n    @if (patchCheck()) {\n      <spx-alert [spxTitle]=\"'Softpak patch'\" [spxSeverity]=\"severityWarning\">\n        {{ spxText() ? spxText() : 'This new functionality' }} requires patch #{{patchCheck()}} to be installed.\n      </spx-alert>\n    }\n  </div>", dependencies: [{ kind: "component", type: SpxAlertComponent, selector: "spx-alert", inputs: ["spxAutoclose", "spxCloseable", "spxHideTitle", "spxTitle", "spxMarginTop", "spxSeverity"], outputs: ["spxClose", "spxTitleChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SpxPatchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: SpxPatchComponent, isStandalone: true, selector: "spx-patch", inputs: { spxText: { classPropertyName: "spxText", publicName: "spxText", isSignal: true, isRequired: true, transformFunction: null }, patchCheck: { classPropertyName: "patchCheck", publicName: "patchCheck", isSignal: true, isRequired: true, transformFunction: null }, releaseCheck: { classPropertyName: "releaseCheck", publicName: "releaseCheck", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div class=\"flex flex-col gap-2\">\n    @if (releaseCheck()) {\n      <spx-alert [spxTitle]=\"'Requires new release'\" [spxSeverity]=\"severityError\">\n        {{ spxText() ? spxText() : 'This new functionality' }} requires release {{releaseCheck()}}.\n      </spx-alert>\n    }\n  \n    @if (patchCheck()) {\n      <spx-alert [spxTitle]=\"'Softpak patch'\" [spxSeverity]=\"severityWarning\">\n        {{ spxText() ? spxText() : 'This new functionality' }} requires patch #{{patchCheck()}} to be installed.\n      </spx-alert>\n    }\n  </div>", dependencies: [{ kind: "component", type: SpxAlertComponent, selector: "spx-alert", inputs: ["spxAutoclose", "spxCloseable", "spxHideTitle", "spxTitle", "spxMarginTop", "spxSeverity"], outputs: ["spxClose", "spxTitleChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: SpxPatchComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SpxPatchComponent, decorators: [{
             type: Component,
             args: [{ selector: 'spx-patch', imports: [
                         SpxAlertComponent
                     ], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"flex flex-col gap-2\">\n    @if (releaseCheck()) {\n      <spx-alert [spxTitle]=\"'Requires new release'\" [spxSeverity]=\"severityError\">\n        {{ spxText() ? spxText() : 'This new functionality' }} requires release {{releaseCheck()}}.\n      </spx-alert>\n    }\n  \n    @if (patchCheck()) {\n      <spx-alert [spxTitle]=\"'Softpak patch'\" [spxSeverity]=\"severityWarning\">\n        {{ spxText() ? spxText() : 'This new functionality' }} requires patch #{{patchCheck()}} to be installed.\n      </spx-alert>\n    }\n  </div>" }]
-        }] });
+        }], propDecorators: { spxText: [{ type: i0.Input, args: [{ isSignal: true, alias: "spxText", required: true }] }], patchCheck: [{ type: i0.Input, args: [{ isSignal: true, alias: "patchCheck", required: true }] }], releaseCheck: [{ type: i0.Input, args: [{ isSignal: true, alias: "releaseCheck", required: true }] }] } });
 
 /**
  * Generated bundle index. Do not edit.

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

@@ -10,10 +10,10 @@ class IsSeverityPipe {
         }
         return value === targetSeverities;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: IsSeverityPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.2.3", ngImport: i0, type: IsSeverityPipe, isStandalone: true, name: "isSeverity" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IsSeverityPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.0.8", ngImport: i0, type: IsSeverityPipe, isStandalone: true, name: "isSeverity" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: IsSeverityPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IsSeverityPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'isSeverity'

package/fesm2022/softpak-components-spx-progress-bar.mjs

@@ -6,13 +6,13 @@ class SpxProgressBarComponent {
         this.spxPercentage = input.required(...(ngDevMode ? [{ debugName: "spxPercentage" }] : []));
         this.spxTitle = input.required(...(ngDevMode ? [{ debugName: "spxTitle" }] : []));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: SpxProgressBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.2.3", type: SpxProgressBarComponent, isStandalone: true, selector: "spx-progress-bar", inputs: { spxPercentage: { classPropertyName: "spxPercentage", publicName: "spxPercentage", isSignal: true, isRequired: true, transformFunction: null }, spxTitle: { classPropertyName: "spxTitle", publicName: "spxTitle", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div class=\"progress-bar\">\n  <h1>{{this.spxTitle()}}</h1>\n  <div class=\"world\">\n    <div class=\"world__moving-object\" [style.left]=\"'calc(' + (this.spxPercentage()) + '% - ' + (120 * (this.spxPercentage() / 100))  + 'px)'\">\n    </div>\n  </div>\n  <div class=\"text\"></div>\n</div>", styles: [":host{display:block}.progress-bar{background-color:#fff;border-radius:4px;padding:12px}h1{box-sizing:border-box;color:#000c;font-size:16px;font-weight:400;margin:0 0 8px;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.text{background-color:#e8e8e8;box-sizing:border-box;font-size:18px;font-weight:700;text-align:center}.world{border-bottom:2px solid #505050;position:relative;height:42px}.world__moving-object{position:absolute;background-image:var(--spf-progress-bar--truck-image, url(data:image/png;base64,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));background-size:contain;background-repeat:no-repeat;height:40px;width:120px;transition:left .1s}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SpxProgressBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.8", type: SpxProgressBarComponent, isStandalone: true, selector: "spx-progress-bar", inputs: { spxPercentage: { classPropertyName: "spxPercentage", publicName: "spxPercentage", isSignal: true, isRequired: true, transformFunction: null }, spxTitle: { classPropertyName: "spxTitle", publicName: "spxTitle", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div class=\"progress-bar\">\n  <h1>{{this.spxTitle()}}</h1>\n  <div class=\"world\">\n    <div class=\"world__moving-object\" [style.left]=\"'calc(' + (this.spxPercentage()) + '% - ' + (120 * (this.spxPercentage() / 100))  + 'px)'\">\n    </div>\n  </div>\n  <div class=\"text\"></div>\n</div>", styles: [":host{display:block}.progress-bar{background-color:#fff;border-radius:4px;padding:12px}h1{box-sizing:border-box;color:#000c;font-size:16px;font-weight:400;margin:0 0 8px;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.text{background-color:#e8e8e8;box-sizing:border-box;font-size:18px;font-weight:700;text-align:center}.world{border-bottom:2px solid #505050;position:relative;height:42px}.world__moving-object{position:absolute;background-image:var(--spf-progress-bar--truck-image, url(data:image/png;base64,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));background-size:contain;background-repeat:no-repeat;height:40px;width:120px;transition:left .1s}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: SpxProgressBarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SpxProgressBarComponent, decorators: [{
             type: Component,
             args: [{ selector: 'spx-progress-bar', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"progress-bar\">\n  <h1>{{this.spxTitle()}}</h1>\n  <div class=\"world\">\n    <div class=\"world__moving-object\" [style.left]=\"'calc(' + (this.spxPercentage()) + '% - ' + (120 * (this.spxPercentage() / 100))  + 'px)'\">\n    </div>\n  </div>\n  <div class=\"text\"></div>\n</div>", styles: [":host{display:block}.progress-bar{background-color:#fff;border-radius:4px;padding:12px}h1{box-sizing:border-box;color:#000c;font-size:16px;font-weight:400;margin:0 0 8px;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.text{background-color:#e8e8e8;box-sizing:border-box;font-size:18px;font-weight:700;text-align:center}.world{border-bottom:2px solid #505050;position:relative;height:42px}.world__moving-object{position:absolute;background-image:var(--spf-progress-bar--truck-image, url(data:image/png;base64,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));background-size:contain;background-repeat:no-repeat;height:40px;width:120px;transition:left .1s}\n"] }]
-        }] });
+        }], propDecorators: { spxPercentage: [{ type: i0.Input, args: [{ isSignal: true, alias: "spxPercentage", required: true }] }], spxTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "spxTitle", required: true }] }] } });
 
 /**
  * Generated bundle index. Do not edit.

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

@@ -7,13 +7,13 @@ class SpxSpinnerComponent {
         this.spxShow = input(true, ...(ngDevMode ? [{ debugName: "spxShow" }] : []));
         this.spxLoaderText = input.required(...(ngDevMode ? [{ debugName: "spxLoaderText" }] : []));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: SpxSpinnerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.3", type: SpxSpinnerComponent, isStandalone: true, selector: "spx-spinner", inputs: { spxShow: { classPropertyName: "spxShow", publicName: "spxShow", isSignal: true, isRequired: false, transformFunction: null }, spxLoaderText: { classPropertyName: "spxLoaderText", publicName: "spxLoaderText", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div class=\"spx-spinner__wrapper spx-spinner2\"\n    [class.is-shown]=\"this.spxShow()\">\n    <div class=\"rounded-xl bg-white text-black absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-[150px] h-[150px]\">\n      <div class=\"spx-spinner__content\">\n        <svg class=\"spx-spinner__image m-auto\" xmlns=\"http://www.w3.org/2000/svg\" width=\"100px\" height=\"100px\" viewBox=\"0 0 100 100\" preserveAspectRatio=\"xMidYMid\">\n          <g transform=\"rotate(0 50 50)\">\n            <rect x=\"47.5\" y=\"23.5\" rx=\"2.5\" ry=\"2.75\" width=\"5\" height=\"11\" fill=\"#00457c\">\n              <animate attributeName=\"opacity\" values=\"1;0\" keyTimes=\"0;1\" dur=\"1s\" begin=\"-0.9166666666666666s\" repeatCount=\"indefinite\"></animate>\n            </rect>\n          </g>\n          <g transform=\"rotate(30 50 50)\">\n            <rect x=\"47.5\" y=\"23.5\" rx=\"2.5\" ry=\"2.75\" width=\"5\" height=\"11\" fill=\"#00457c\">\n              <animate attributeName=\"opacity\" values=\"1;0\" keyTimes=\"0;1\" dur=\"1s\" begin=\"-0.8333333333333334s\" repeatCount=\"indefinite\"></animate>\n            </rect>\n          </g>\n          <g transform=\"rotate(60 50 50)\">\n            <rect x=\"47.5\" y=\"23.5\" rx=\"2.5\" ry=\"2.75\" width=\"5\" height=\"11\" fill=\"#00457c\">\n              <animate attributeName=\"opacity\" values=\"1;0\" keyTimes=\"0;1\" dur=\"1s\" begin=\"-0.75s\" repeatCount=\"indefinite\"></animate>\n            </rect>\n          </g>\n          <g transform=\"rotate(90 50 50)\">\n            <rect x=\"47.5\" y=\"23.5\" rx=\"2.5\" ry=\"2.75\" width=\"5\" height=\"11\" fill=\"#00457c\">\n              <animate attributeName=\"opacity\" values=\"1;0\" keyTimes=\"0;1\" dur=\"1s\" begin=\"-0.6666666666666666s\" repeatCount=\"indefinite\"></animate>\n            </rect>\n          </g>\n          <g transform=\"rotate(120 50 50)\">\n            <rect x=\"47.5\" y=\"23.5\" rx=\"2.5\" ry=\"2.75\" width=\"5\" height=\"11\" fill=\"#00457c\">\n              <animate attributeName=\"opacity\" values=\"1;0\" keyTimes=\"0;1\" dur=\"1s\" begin=\"-0.5833333333333334s\" repeatCount=\"indefinite\"></animate>\n            </rect>\n          </g>\n          <g transform=\"rotate(150 50 50)\">\n            <rect x=\"47.5\" y=\"23.5\" rx=\"2.5\" ry=\"2.75\" width=\"5\" height=\"11\" fill=\"#00457c\">\n              <animate attributeName=\"opacity\" values=\"1;0\" keyTimes=\"0;1\" dur=\"1s\" begin=\"-0.5s\" repeatCount=\"indefinite\"></animate>\n            </rect>\n          </g>\n          <g transform=\"rotate(180 50 50)\">\n            <rect x=\"47.5\" y=\"23.5\" rx=\"2.5\" ry=\"2.75\" width=\"5\" height=\"11\" fill=\"#00457c\">\n              <animate attributeName=\"opacity\" values=\"1;0\" keyTimes=\"0;1\" dur=\"1s\" begin=\"-0.4166666666666667s\" repeatCount=\"indefinite\"></animate>\n            </rect>\n          </g>\n          <g transform=\"rotate(210 50 50)\">\n            <rect x=\"47.5\" y=\"23.5\" rx=\"2.5\" ry=\"2.75\" width=\"5\" height=\"11\" fill=\"#00457c\">\n              <animate attributeName=\"opacity\" values=\"1;0\" keyTimes=\"0;1\" dur=\"1s\" begin=\"-0.3333333333333333s\" repeatCount=\"indefinite\"></animate>\n            </rect>\n          </g>\n          <g transform=\"rotate(240 50 50)\">\n            <rect x=\"47.5\" y=\"23.5\" rx=\"2.5\" ry=\"2.75\" width=\"5\" height=\"11\" fill=\"#00457c\">\n              <animate attributeName=\"opacity\" values=\"1;0\" keyTimes=\"0;1\" dur=\"1s\" begin=\"-0.25s\" repeatCount=\"indefinite\"></animate>\n            </rect>\n          </g>\n          <g transform=\"rotate(270 50 50)\">\n            <rect x=\"47.5\" y=\"23.5\" rx=\"2.5\" ry=\"2.75\" width=\"5\" height=\"11\" fill=\"#00457c\">\n              <animate attributeName=\"opacity\" values=\"1;0\" keyTimes=\"0;1\" dur=\"1s\" begin=\"-0.16666666666666666s\" repeatCount=\"indefinite\"></animate>\n            </rect>\n          </g>\n          <g transform=\"rotate(300 50 50)\">\n            <rect x=\"47.5\" y=\"23.5\" rx=\"2.5\" ry=\"2.75\" width=\"5\" height=\"11\" fill=\"#00457c\">\n              <animate attributeName=\"opacity\" values=\"1;0\" keyTimes=\"0;1\" dur=\"1s\" begin=\"-0.08333333333333333s\" repeatCount=\"indefinite\"></animate>\n            </rect>\n          </g>\n          <g transform=\"rotate(330 50 50)\">\n            <rect x=\"47.5\" y=\"23.5\" rx=\"2.5\" ry=\"2.75\" width=\"5\" height=\"11\" fill=\"#00457c\">\n              <animate attributeName=\"opacity\" values=\"1;0\" keyTimes=\"0;1\" dur=\"1s\" begin=\"0s\" repeatCount=\"indefinite\"></animate>\n            </rect>\n          </g>\n        </svg>\n        @if (this.spxLoaderText()) {\n          <span class=\"text-black pb-2 block text-center\">{{this.spxLoaderText()}}</span>\n        }\n      </div>\n    </div>\n  </div>", styles: [":host{background-color:#00000059;color:#000;position:fixed;height:100%;inset:0;z-index:9}.is-shown{display:block!important;opacity:1;animation:fadeIn .2s forwards,fadeOut .2s forwards}.spx-spinner__wrapper{display:none;position:absolute;right:0;left:0;margin:0 auto;text-align:center;opacity:0;z-index:500000}.spx-spinner__wrapper.spx-spinner1{top:calc(50vh - 25px);width:200px;height:50px}.spx-spinner1 .spx-spinner__ball{display:inline-block;width:50px;height:50px;border-radius:100%;background-color:#0065a4;animation:bouncedelay 1.4s infinite ease-in-out both}.spx-spinner1 .spx-spinner__ball--1{animation-delay:-.32s}.spx-spinner1 .spx-spinner__ball--2{animation-delay:-.16s}.spx-spinner__wrapper.spx-spinner2{top:calc(50vh - 65px);width:100%;max-width:120px}.spx-spinner2 .spx-spinner__content{box-shadow:0 19px 38px #0000004d,0 15px 12px #00000038;border-radius:10px;height:100%;width:100%;margin:0 auto;animation:.2s fadeIn forwards;overflow:hidden}.spx-spinner2 .spx-spinner__image{display:block;margin:0 auto;border-radius:10px}.spx-spinner2 svg{margin:auto;background:#fff;display:block;shape-rendering:auto}.spx-spinner__wrapper.spx-spinner3{top:calc(50vh - 30px)}.spx-spinner3 .spx-spinner__box{animation:loader-rotate 2s infinite linear;display:block;width:60px;height:60px;margin:0 auto}.spx-spinner3 .spx-spinner__dot{animation:dot-bounce 2s infinite ease-in-out;display:inline-block;position:relative;top:0;width:50%;height:50%;border-radius:100%;background-color:#555}.spx-spinner3 .spx-spinner__dot--2{top:auto;bottom:0;animation-delay:-1s}@keyframes loader-rotate{to{transform:rotate(360deg)}}@keyframes dot-bounce{0%,to{transform:scale(0)}50%{transform:scale(1)}}@keyframes fadeIn{0%{opacity:0}30%{opacity:.4}to{opacity:1}}@keyframes bouncedelay{0%,80%,to{transform:scale(0)}40%{transform:scale(1)}}\n"] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SpxSpinnerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: SpxSpinnerComponent, isStandalone: true, selector: "spx-spinner", inputs: { spxShow: { classPropertyName: "spxShow", publicName: "spxShow", isSignal: true, isRequired: false, transformFunction: null }, spxLoaderText: { classPropertyName: "spxLoaderText", publicName: "spxLoaderText", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div class=\"spx-spinner__wrapper spx-spinner2\"\n    [class.is-shown]=\"this.spxShow()\">\n    <div class=\"rounded-xl bg-white text-black absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-[150px] h-[150px]\">\n      <div class=\"spx-spinner__content\">\n        <svg class=\"spx-spinner__image m-auto\" xmlns=\"http://www.w3.org/2000/svg\" width=\"100px\" height=\"100px\" viewBox=\"0 0 100 100\" preserveAspectRatio=\"xMidYMid\">\n          <g transform=\"rotate(0 50 50)\">\n            <rect x=\"47.5\" y=\"23.5\" rx=\"2.5\" ry=\"2.75\" width=\"5\" height=\"11\" fill=\"#00457c\">\n              <animate attributeName=\"opacity\" values=\"1;0\" keyTimes=\"0;1\" dur=\"1s\" begin=\"-0.9166666666666666s\" repeatCount=\"indefinite\"></animate>\n            </rect>\n          </g>\n          <g transform=\"rotate(30 50 50)\">\n            <rect x=\"47.5\" y=\"23.5\" rx=\"2.5\" ry=\"2.75\" width=\"5\" height=\"11\" fill=\"#00457c\">\n              <animate attributeName=\"opacity\" values=\"1;0\" keyTimes=\"0;1\" dur=\"1s\" begin=\"-0.8333333333333334s\" repeatCount=\"indefinite\"></animate>\n            </rect>\n          </g>\n          <g transform=\"rotate(60 50 50)\">\n            <rect x=\"47.5\" y=\"23.5\" rx=\"2.5\" ry=\"2.75\" width=\"5\" height=\"11\" fill=\"#00457c\">\n              <animate attributeName=\"opacity\" values=\"1;0\" keyTimes=\"0;1\" dur=\"1s\" begin=\"-0.75s\" repeatCount=\"indefinite\"></animate>\n            </rect>\n          </g>\n          <g transform=\"rotate(90 50 50)\">\n            <rect x=\"47.5\" y=\"23.5\" rx=\"2.5\" ry=\"2.75\" width=\"5\" height=\"11\" fill=\"#00457c\">\n              <animate attributeName=\"opacity\" values=\"1;0\" keyTimes=\"0;1\" dur=\"1s\" begin=\"-0.6666666666666666s\" repeatCount=\"indefinite\"></animate>\n            </rect>\n          </g>\n          <g transform=\"rotate(120 50 50)\">\n            <rect x=\"47.5\" y=\"23.5\" rx=\"2.5\" ry=\"2.75\" width=\"5\" height=\"11\" fill=\"#00457c\">\n              <animate attributeName=\"opacity\" values=\"1;0\" keyTimes=\"0;1\" dur=\"1s\" begin=\"-0.5833333333333334s\" repeatCount=\"indefinite\"></animate>\n            </rect>\n          </g>\n          <g transform=\"rotate(150 50 50)\">\n            <rect x=\"47.5\" y=\"23.5\" rx=\"2.5\" ry=\"2.75\" width=\"5\" height=\"11\" fill=\"#00457c\">\n              <animate attributeName=\"opacity\" values=\"1;0\" keyTimes=\"0;1\" dur=\"1s\" begin=\"-0.5s\" repeatCount=\"indefinite\"></animate>\n            </rect>\n          </g>\n          <g transform=\"rotate(180 50 50)\">\n            <rect x=\"47.5\" y=\"23.5\" rx=\"2.5\" ry=\"2.75\" width=\"5\" height=\"11\" fill=\"#00457c\">\n              <animate attributeName=\"opacity\" values=\"1;0\" keyTimes=\"0;1\" dur=\"1s\" begin=\"-0.4166666666666667s\" repeatCount=\"indefinite\"></animate>\n            </rect>\n          </g>\n          <g transform=\"rotate(210 50 50)\">\n            <rect x=\"47.5\" y=\"23.5\" rx=\"2.5\" ry=\"2.75\" width=\"5\" height=\"11\" fill=\"#00457c\">\n              <animate attributeName=\"opacity\" values=\"1;0\" keyTimes=\"0;1\" dur=\"1s\" begin=\"-0.3333333333333333s\" repeatCount=\"indefinite\"></animate>\n            </rect>\n          </g>\n          <g transform=\"rotate(240 50 50)\">\n            <rect x=\"47.5\" y=\"23.5\" rx=\"2.5\" ry=\"2.75\" width=\"5\" height=\"11\" fill=\"#00457c\">\n              <animate attributeName=\"opacity\" values=\"1;0\" keyTimes=\"0;1\" dur=\"1s\" begin=\"-0.25s\" repeatCount=\"indefinite\"></animate>\n            </rect>\n          </g>\n          <g transform=\"rotate(270 50 50)\">\n            <rect x=\"47.5\" y=\"23.5\" rx=\"2.5\" ry=\"2.75\" width=\"5\" height=\"11\" fill=\"#00457c\">\n              <animate attributeName=\"opacity\" values=\"1;0\" keyTimes=\"0;1\" dur=\"1s\" begin=\"-0.16666666666666666s\" repeatCount=\"indefinite\"></animate>\n            </rect>\n          </g>\n          <g transform=\"rotate(300 50 50)\">\n            <rect x=\"47.5\" y=\"23.5\" rx=\"2.5\" ry=\"2.75\" width=\"5\" height=\"11\" fill=\"#00457c\">\n              <animate attributeName=\"opacity\" values=\"1;0\" keyTimes=\"0;1\" dur=\"1s\" begin=\"-0.08333333333333333s\" repeatCount=\"indefinite\"></animate>\n            </rect>\n          </g>\n          <g transform=\"rotate(330 50 50)\">\n            <rect x=\"47.5\" y=\"23.5\" rx=\"2.5\" ry=\"2.75\" width=\"5\" height=\"11\" fill=\"#00457c\">\n              <animate attributeName=\"opacity\" values=\"1;0\" keyTimes=\"0;1\" dur=\"1s\" begin=\"0s\" repeatCount=\"indefinite\"></animate>\n            </rect>\n          </g>\n        </svg>\n        @if (this.spxLoaderText()) {\n          <span class=\"text-black pb-2 block text-center\">{{this.spxLoaderText()}}</span>\n        }\n      </div>\n    </div>\n  </div>", styles: [":host{background-color:#00000059;color:#000;position:fixed;height:100%;inset:0;z-index:9}.is-shown{display:block!important;opacity:1;animation:fadeIn .2s forwards,fadeOut .2s forwards}.spx-spinner__wrapper{display:none;position:absolute;right:0;left:0;margin:0 auto;text-align:center;opacity:0;z-index:500000}.spx-spinner__wrapper.spx-spinner1{top:calc(50vh - 25px);width:200px;height:50px}.spx-spinner1 .spx-spinner__ball{display:inline-block;width:50px;height:50px;border-radius:100%;background-color:#0065a4;animation:bouncedelay 1.4s infinite ease-in-out both}.spx-spinner1 .spx-spinner__ball--1{animation-delay:-.32s}.spx-spinner1 .spx-spinner__ball--2{animation-delay:-.16s}.spx-spinner__wrapper.spx-spinner2{top:calc(50vh - 65px);width:100%;max-width:120px}.spx-spinner2 .spx-spinner__content{box-shadow:0 19px 38px #0000004d,0 15px 12px #00000038;border-radius:10px;height:100%;width:100%;margin:0 auto;animation:.2s fadeIn forwards;overflow:hidden}.spx-spinner2 .spx-spinner__image{display:block;margin:0 auto;border-radius:10px}.spx-spinner2 svg{margin:auto;background:#fff;display:block;shape-rendering:auto}.spx-spinner__wrapper.spx-spinner3{top:calc(50vh - 30px)}.spx-spinner3 .spx-spinner__box{animation:loader-rotate 2s infinite linear;display:block;width:60px;height:60px;margin:0 auto}.spx-spinner3 .spx-spinner__dot{animation:dot-bounce 2s infinite ease-in-out;display:inline-block;position:relative;top:0;width:50%;height:50%;border-radius:100%;background-color:#555}.spx-spinner3 .spx-spinner__dot--2{top:auto;bottom:0;animation-delay:-1s}@keyframes loader-rotate{to{transform:rotate(360deg)}}@keyframes dot-bounce{0%,to{transform:scale(0)}50%{transform:scale(1)}}@keyframes fadeIn{0%{opacity:0}30%{opacity:.4}to{opacity:1}}@keyframes bouncedelay{0%,80%,to{transform:scale(0)}40%{transform:scale(1)}}\n"] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: SpxSpinnerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SpxSpinnerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'spx-spinner', imports: [], template: "<div class=\"spx-spinner__wrapper spx-spinner2\"\n    [class.is-shown]=\"this.spxShow()\">\n    <div class=\"rounded-xl bg-white text-black absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-[150px] h-[150px]\">\n      <div class=\"spx-spinner__content\">\n        <svg class=\"spx-spinner__image m-auto\" xmlns=\"http://www.w3.org/2000/svg\" width=\"100px\" height=\"100px\" viewBox=\"0 0 100 100\" preserveAspectRatio=\"xMidYMid\">\n          <g transform=\"rotate(0 50 50)\">\n            <rect x=\"47.5\" y=\"23.5\" rx=\"2.5\" ry=\"2.75\" width=\"5\" height=\"11\" fill=\"#00457c\">\n              <animate attributeName=\"opacity\" values=\"1;0\" keyTimes=\"0;1\" dur=\"1s\" begin=\"-0.9166666666666666s\" repeatCount=\"indefinite\"></animate>\n            </rect>\n          </g>\n          <g transform=\"rotate(30 50 50)\">\n            <rect x=\"47.5\" y=\"23.5\" rx=\"2.5\" ry=\"2.75\" width=\"5\" height=\"11\" fill=\"#00457c\">\n              <animate attributeName=\"opacity\" values=\"1;0\" keyTimes=\"0;1\" dur=\"1s\" begin=\"-0.8333333333333334s\" repeatCount=\"indefinite\"></animate>\n            </rect>\n          </g>\n          <g transform=\"rotate(60 50 50)\">\n            <rect x=\"47.5\" y=\"23.5\" rx=\"2.5\" ry=\"2.75\" width=\"5\" height=\"11\" fill=\"#00457c\">\n              <animate attributeName=\"opacity\" values=\"1;0\" keyTimes=\"0;1\" dur=\"1s\" begin=\"-0.75s\" repeatCount=\"indefinite\"></animate>\n            </rect>\n          </g>\n          <g transform=\"rotate(90 50 50)\">\n            <rect x=\"47.5\" y=\"23.5\" rx=\"2.5\" ry=\"2.75\" width=\"5\" height=\"11\" fill=\"#00457c\">\n              <animate attributeName=\"opacity\" values=\"1;0\" keyTimes=\"0;1\" dur=\"1s\" begin=\"-0.6666666666666666s\" repeatCount=\"indefinite\"></animate>\n            </rect>\n          </g>\n          <g transform=\"rotate(120 50 50)\">\n            <rect x=\"47.5\" y=\"23.5\" rx=\"2.5\" ry=\"2.75\" width=\"5\" height=\"11\" fill=\"#00457c\">\n              <animate attributeName=\"opacity\" values=\"1;0\" keyTimes=\"0;1\" dur=\"1s\" begin=\"-0.5833333333333334s\" repeatCount=\"indefinite\"></animate>\n            </rect>\n          </g>\n          <g transform=\"rotate(150 50 50)\">\n            <rect x=\"47.5\" y=\"23.5\" rx=\"2.5\" ry=\"2.75\" width=\"5\" height=\"11\" fill=\"#00457c\">\n              <animate attributeName=\"opacity\" values=\"1;0\" keyTimes=\"0;1\" dur=\"1s\" begin=\"-0.5s\" repeatCount=\"indefinite\"></animate>\n            </rect>\n          </g>\n          <g transform=\"rotate(180 50 50)\">\n            <rect x=\"47.5\" y=\"23.5\" rx=\"2.5\" ry=\"2.75\" width=\"5\" height=\"11\" fill=\"#00457c\">\n              <animate attributeName=\"opacity\" values=\"1;0\" keyTimes=\"0;1\" dur=\"1s\" begin=\"-0.4166666666666667s\" repeatCount=\"indefinite\"></animate>\n            </rect>\n          </g>\n          <g transform=\"rotate(210 50 50)\">\n            <rect x=\"47.5\" y=\"23.5\" rx=\"2.5\" ry=\"2.75\" width=\"5\" height=\"11\" fill=\"#00457c\">\n              <animate attributeName=\"opacity\" values=\"1;0\" keyTimes=\"0;1\" dur=\"1s\" begin=\"-0.3333333333333333s\" repeatCount=\"indefinite\"></animate>\n            </rect>\n          </g>\n          <g transform=\"rotate(240 50 50)\">\n            <rect x=\"47.5\" y=\"23.5\" rx=\"2.5\" ry=\"2.75\" width=\"5\" height=\"11\" fill=\"#00457c\">\n              <animate attributeName=\"opacity\" values=\"1;0\" keyTimes=\"0;1\" dur=\"1s\" begin=\"-0.25s\" repeatCount=\"indefinite\"></animate>\n            </rect>\n          </g>\n          <g transform=\"rotate(270 50 50)\">\n            <rect x=\"47.5\" y=\"23.5\" rx=\"2.5\" ry=\"2.75\" width=\"5\" height=\"11\" fill=\"#00457c\">\n              <animate attributeName=\"opacity\" values=\"1;0\" keyTimes=\"0;1\" dur=\"1s\" begin=\"-0.16666666666666666s\" repeatCount=\"indefinite\"></animate>\n            </rect>\n          </g>\n          <g transform=\"rotate(300 50 50)\">\n            <rect x=\"47.5\" y=\"23.5\" rx=\"2.5\" ry=\"2.75\" width=\"5\" height=\"11\" fill=\"#00457c\">\n              <animate attributeName=\"opacity\" values=\"1;0\" keyTimes=\"0;1\" dur=\"1s\" begin=\"-0.08333333333333333s\" repeatCount=\"indefinite\"></animate>\n            </rect>\n          </g>\n          <g transform=\"rotate(330 50 50)\">\n            <rect x=\"47.5\" y=\"23.5\" rx=\"2.5\" ry=\"2.75\" width=\"5\" height=\"11\" fill=\"#00457c\">\n              <animate attributeName=\"opacity\" values=\"1;0\" keyTimes=\"0;1\" dur=\"1s\" begin=\"0s\" repeatCount=\"indefinite\"></animate>\n            </rect>\n          </g>\n        </svg>\n        @if (this.spxLoaderText()) {\n          <span class=\"text-black pb-2 block text-center\">{{this.spxLoaderText()}}</span>\n        }\n      </div>\n    </div>\n  </div>", styles: [":host{background-color:#00000059;color:#000;position:fixed;height:100%;inset:0;z-index:9}.is-shown{display:block!important;opacity:1;animation:fadeIn .2s forwards,fadeOut .2s forwards}.spx-spinner__wrapper{display:none;position:absolute;right:0;left:0;margin:0 auto;text-align:center;opacity:0;z-index:500000}.spx-spinner__wrapper.spx-spinner1{top:calc(50vh - 25px);width:200px;height:50px}.spx-spinner1 .spx-spinner__ball{display:inline-block;width:50px;height:50px;border-radius:100%;background-color:#0065a4;animation:bouncedelay 1.4s infinite ease-in-out both}.spx-spinner1 .spx-spinner__ball--1{animation-delay:-.32s}.spx-spinner1 .spx-spinner__ball--2{animation-delay:-.16s}.spx-spinner__wrapper.spx-spinner2{top:calc(50vh - 65px);width:100%;max-width:120px}.spx-spinner2 .spx-spinner__content{box-shadow:0 19px 38px #0000004d,0 15px 12px #00000038;border-radius:10px;height:100%;width:100%;margin:0 auto;animation:.2s fadeIn forwards;overflow:hidden}.spx-spinner2 .spx-spinner__image{display:block;margin:0 auto;border-radius:10px}.spx-spinner2 svg{margin:auto;background:#fff;display:block;shape-rendering:auto}.spx-spinner__wrapper.spx-spinner3{top:calc(50vh - 30px)}.spx-spinner3 .spx-spinner__box{animation:loader-rotate 2s infinite linear;display:block;width:60px;height:60px;margin:0 auto}.spx-spinner3 .spx-spinner__dot{animation:dot-bounce 2s infinite ease-in-out;display:inline-block;position:relative;top:0;width:50%;height:50%;border-radius:100%;background-color:#555}.spx-spinner3 .spx-spinner__dot--2{top:auto;bottom:0;animation-delay:-1s}@keyframes loader-rotate{to{transform:rotate(360deg)}}@keyframes dot-bounce{0%,to{transform:scale(0)}50%{transform:scale(1)}}@keyframes fadeIn{0%{opacity:0}30%{opacity:.4}to{opacity:1}}@keyframes bouncedelay{0%,80%,to{transform:scale(0)}40%{transform:scale(1)}}\n"] }]
-        }] });
+        }], propDecorators: { spxShow: [{ type: i0.Input, args: [{ isSignal: true, alias: "spxShow", required: false }] }], spxLoaderText: [{ type: i0.Input, args: [{ isSignal: true, alias: "spxLoaderText", required: true }] }] } });
 
 const hide = createAction('[SPX / Spinner] Hide', props());
 const reset = createAction('[SPX / Spinner] Reset', props());