@softpak/components 0.0.5 → 0.0.6

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/softpak-components-spx-number-check.ts"],"sourcesContent":["import { NgIf } from '@angular/common';\nimport { Component, ElementRef, EventEmitter, Input, OnChanges, OnDestroy, OnInit, Output, SimpleChanges, ViewChild } from '@angular/core';\nimport { FormBuilder, FormControl, FormGroup, FormsModule, ReactiveFormsModule } from '@angular/forms';\nimport { SpxButtonComponent } from '@softpak/components/spx-button';\nimport { SpxSeverityEnum } from '@softpak/components/spx-helpers';\nimport { Subscription } from 'rxjs';\n\n@Component({\n  selector: 'spx-number-check',\n  standalone: true,\n  host: {\n    '(spxChange)': 'handleChangeEvent($event)'\n  },\n  imports: [\n    NgIf,\n    SpxButtonComponent,\n    FormsModule,\n    ReactiveFormsModule,\n  ],\n  template: `\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          <form *ngIf=\"!this.spxSimpleMode\" 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          <spx-button\n            *ngIf=\"this.spxSimpleMode\"\n            [spxFullWidth]=\"true\"\n            [spxSeverity]=\"this.severitySuccess\"\n            (spxClick)=\"this.handleConfirm()\"\n            >{{ this.txtConfirm }}</spx-button>\n          <spx-button\n            *ngIf=\"!this.spxSimpleMode\"\n            [spxFullWidth]=\"true\"\n            [spxSeverity]=\"this.severityWarning\"\n            (spxClick)=\"this.handleReset()\"\n            >{{ this.txtReset }}</spx-button>\n          <spx-button\n            [spxFullWidth]=\"true\"\n            [spxSeverity]=\"this.severityError\"\n            (spxClick)=\"this.handleCancel()\"\n            >{{ this.txtCancel }}</spx-button>\n        </div>\n      </div>\n    </div>\n  `,\n})\nexport class SpxNumberCheckComponent implements OnChanges, OnInit, OnDestroy {\n  @Input() spxAction!: string;\n  @Input() spxSimpleMode = false;\n  @Input() spxPincode!: string;\n  @Input() txtCancel!: string;\n  @Input() txtConfirm!: string;\n  @Input() txtConfirmMessage!: string;\n  @Input() txtReset!: string;\n  @Output() spxCancel: EventEmitter<void> = new EventEmitter<void>();\n  @Output() spxConfirm: EventEmitter<void> = new EventEmitter<void>();\n  @ViewChild('viewChild1') viewChild1!: ElementRef<HTMLInputElement>;\n  @ViewChild('viewChild2') viewChild2!: ElementRef<HTMLInputElement>;\n  @ViewChild('viewChild3') viewChild3!: ElementRef<HTMLInputElement>;\n  @ViewChild('viewChild4') viewChild4!: ElementRef<HTMLInputElement>;\n  form!: FormGroup;\n  severityError = SpxSeverityEnum.error;\n  severitySuccess = SpxSeverityEnum.success;\n  severityWarning = SpxSeverityEnum.warning;\n  accepted = false;\n  denied = false;\n  listenToCtrl1?: Subscription;\n  listenToCtrl2?: Subscription;\n  listenToCtrl3?: Subscription;\n  listenToCtrl4?: Subscription;\n  listenToTyping?: Subscription;\n\n  get ctrl1(): FormControl { return this.form.get('ctrl1') as FormControl; }\n  get ctrl2(): FormControl { return this.form.get('ctrl2') as FormControl; }\n  get ctrl3(): FormControl { return this.form.get('ctrl3') as FormControl; }\n  get ctrl4(): FormControl { return this.form.get('ctrl4') as FormControl; }\n\n  constructor(private readonly formBuilder: FormBuilder) {\n    this.form = this.formBuilder.group({\n      ctrl1: [null, []],\n      ctrl2: [null, []],\n      ctrl3: [null, []],\n      ctrl4: [null, []],\n    });\n  }\n\n  ngOnInit(): void {\n    this.listenToTyping =  this.form.valueChanges.subscribe(() => {\n      this.accepted = false;\n      this.denied = false;\n      if (this.ctrl1.value && this.ctrl2.value && this.ctrl3.value && this.ctrl4.value) {\n        this.checkPincode();\n      }\n    });\n\n    this.listenToCtrl1 = this.ctrl1.valueChanges.subscribe(value => {\n      if (value) {\n        this.viewChild2.nativeElement.focus();\n      } else {\n\n      }\n    });\n\n    this.listenToCtrl2 = this.ctrl2.valueChanges.subscribe(value => {\n      if (value) {\n        this.viewChild3.nativeElement.focus();\n      } else {\n\n      }\n    });\n\n    this.listenToCtrl3 = this.ctrl3.valueChanges.subscribe(value => {\n      if (value) {\n        this.viewChild4.nativeElement.focus();\n      } else {\n\n      }\n    });\n  }\n\n  ngOnChanges(changes: SimpleChanges): void {\n    setTimeout(() => {\n      if (this?.viewChild1?.nativeElement) {\n        this.viewChild1.nativeElement.focus();\n      }\n    }, 0);\n  }\n\n  ngOnDestroy(): void {\n    if (this.listenToTyping) {\n      this.listenToTyping.unsubscribe();\n    }\n    if (this.listenToCtrl1) {\n      this.listenToCtrl1.unsubscribe();\n    } \n    if (this.listenToCtrl2) {\n      this.listenToCtrl2.unsubscribe();\n    } \n    if (this.listenToCtrl3) {\n      this.listenToCtrl3.unsubscribe();\n    } \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 = false;\n    this.denied = false;\n  }\n\n  onDigitInput(event: any) {\n    let element: any;\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  onBackspace(event: any) {\n    event.srcElement.previousElementSibling.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 = true;\n      setTimeout(() => {\n        this.spxConfirm.emit();\n      }, 500);\n    } else {\n      this.denied = true;\n    }\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"softpak-components-spx-number-check.mjs","sources":["../../../../projects/softpak/components/spx-number-check/spx-number-check.component.ts","../../../../projects/softpak/components/spx-number-check/softpak-components-spx-number-check.ts"],"sourcesContent":["import { NgIf } from '@angular/common';\nimport { Component, ElementRef, EventEmitter, Input, OnChanges, OnDestroy, OnInit, Output, SimpleChanges, ViewChild } from '@angular/core';\nimport { FormBuilder, FormControl, FormGroup, FormsModule, ReactiveFormsModule } from '@angular/forms';\nimport { SpxButtonComponent } from '@softpak/components/spx-button';\nimport { SpxSeverityEnum } from '@softpak/components/spx-helpers';\nimport { Subscription } from 'rxjs';\n\n@Component({\n  selector: 'spx-number-check',\n  standalone: true,\n  host: {\n    '(spxChange)': 'handleChangeEvent($event)'\n  },\n  imports: [\n    NgIf,\n    SpxButtonComponent,\n    FormsModule,\n    ReactiveFormsModule,\n  ],\n  template: `\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          <form *ngIf=\"!this.spxSimpleMode\" 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          <spx-button\n            *ngIf=\"this.spxSimpleMode\"\n            [spxFullWidth]=\"true\"\n            [spxSeverity]=\"this.severitySuccess\"\n            (spxClick)=\"this.handleConfirm()\"\n            >{{ this.txtConfirm }}</spx-button>\n          <spx-button\n            *ngIf=\"!this.spxSimpleMode\"\n            [spxFullWidth]=\"true\"\n            [spxSeverity]=\"this.severityWarning\"\n            (spxClick)=\"this.handleReset()\"\n            >{{ this.txtReset }}</spx-button>\n          <spx-button\n            [spxFullWidth]=\"true\"\n            [spxSeverity]=\"this.severityError\"\n            (spxClick)=\"this.handleCancel()\"\n            >{{ this.txtCancel }}</spx-button>\n        </div>\n      </div>\n    </div>\n  `,\n})\nexport class SpxNumberCheckComponent implements OnChanges, OnInit, OnDestroy {\n  @Input() spxAction!: string;\n  @Input() spxSimpleMode = false;\n  @Input() spxPincode!: string;\n  @Input() txtCancel!: string;\n  @Input() txtConfirm!: string;\n  @Input() txtConfirmMessage!: string;\n  @Input() txtReset!: string;\n  @Output() spxCancel: EventEmitter<void> = new EventEmitter<void>();\n  @Output() spxConfirm: EventEmitter<void> = new EventEmitter<void>();\n  @ViewChild('viewChild1') viewChild1!: ElementRef<HTMLInputElement>;\n  @ViewChild('viewChild2') viewChild2!: ElementRef<HTMLInputElement>;\n  @ViewChild('viewChild3') viewChild3!: ElementRef<HTMLInputElement>;\n  @ViewChild('viewChild4') viewChild4!: ElementRef<HTMLInputElement>;\n  form!: FormGroup;\n  severityError = SpxSeverityEnum.error;\n  severitySuccess = SpxSeverityEnum.success;\n  severityWarning = SpxSeverityEnum.warning;\n  accepted = false;\n  denied = false;\n  listenToCtrl1?: Subscription;\n  listenToCtrl2?: Subscription;\n  listenToCtrl3?: Subscription;\n  listenToCtrl4?: Subscription;\n  listenToTyping?: Subscription;\n\n  get ctrl1(): FormControl { return this.form.get('ctrl1') as FormControl; }\n  get ctrl2(): FormControl { return this.form.get('ctrl2') as FormControl; }\n  get ctrl3(): FormControl { return this.form.get('ctrl3') as FormControl; }\n  get ctrl4(): FormControl { return this.form.get('ctrl4') as FormControl; }\n\n  constructor(private readonly formBuilder: FormBuilder) {\n    this.form = this.formBuilder.group({\n      ctrl1: [null, []],\n      ctrl2: [null, []],\n      ctrl3: [null, []],\n      ctrl4: [null, []],\n    });\n  }\n\n  ngOnInit(): void {\n    this.listenToTyping =  this.form.valueChanges.subscribe(() => {\n      this.accepted = false;\n      this.denied = false;\n      if (this.ctrl1.value && this.ctrl2.value && this.ctrl3.value && this.ctrl4.value) {\n        this.checkPincode();\n      }\n    });\n\n    this.listenToCtrl1 = this.ctrl1.valueChanges.subscribe(value => {\n      if (value) {\n        this.viewChild2.nativeElement.focus();\n      } else {\n\n      }\n    });\n\n    this.listenToCtrl2 = this.ctrl2.valueChanges.subscribe(value => {\n      if (value) {\n        this.viewChild3.nativeElement.focus();\n      } else {\n\n      }\n    });\n\n    this.listenToCtrl3 = this.ctrl3.valueChanges.subscribe(value => {\n      if (value) {\n        this.viewChild4.nativeElement.focus();\n      } else {\n\n      }\n    });\n  }\n\n  ngOnChanges(changes: SimpleChanges): void {\n    setTimeout(() => {\n      if (this?.viewChild1?.nativeElement) {\n        this.viewChild1.nativeElement.focus();\n      }\n    }, 0);\n  }\n\n  ngOnDestroy(): void {\n    if (this.listenToTyping) {\n      this.listenToTyping.unsubscribe();\n    }\n    if (this.listenToCtrl1) {\n      this.listenToCtrl1.unsubscribe();\n    } \n    if (this.listenToCtrl2) {\n      this.listenToCtrl2.unsubscribe();\n    } \n    if (this.listenToCtrl3) {\n      this.listenToCtrl3.unsubscribe();\n    } \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 = false;\n    this.denied = false;\n  }\n\n  onDigitInput(event: any) {\n    let element: any;\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  onBackspace(event: any) {\n    event.srcElement.previousElementSibling.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 = true;\n      setTimeout(() => {\n        this.spxConfirm.emit();\n      }, 500);\n    } else {\n      this.denied = true;\n    }\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}

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

@@ -28,8 +28,8 @@ class SpxPatchComponent {
         this.severityError = SpxSeverityEnum.error;
         this.severityWarning = SpxSeverityEnum.warning;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: SpxPatchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.2", type: SpxPatchComponent, isStandalone: true, selector: "spx-patch", inputs: { patchCheck: "patchCheck", releaseCheck: "releaseCheck" }, ngImport: i0, template: `<div class="flex flex-col gap-2">
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SpxPatchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: SpxPatchComponent, isStandalone: true, selector: "spx-patch", inputs: { patchCheck: "patchCheck", releaseCheck: "releaseCheck" }, ngImport: i0, template: `<div class="flex flex-col gap-2">
   <spx-alert *ngIf="releaseCheck" [spxTitle]="'Requires new release'" [spxSeverity]="severityError">
     This is new functionality introduced in release {{releaseCheck}}.
   </spx-alert>
@@ -39,7 +39,7 @@ class SpxPatchComponent {
   </spx-alert>
 </div>`, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: SpxAlertComponent, selector: "spx-alert", inputs: ["spxAutoclose", "spxCloseable", "spxHideTitle", "spxTitle", "spxMarginTop", "spxSeverity", "tick"], outputs: ["spxClose"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: SpxPatchComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SpxPatchComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'spx-patch',

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

@@ -1 +1 @@
-{"version":3,"file":"softpak-components-spx-patch.mjs","sources":["../../../../projects/softpak/components/spx-patch/patch-check.function.ts","../../../../projects/softpak/components/spx-patch/release-check.function.ts","../../../../projects/softpak/components/spx-patch/spx-patch.component.ts","../../../../projects/softpak/components/spx-patch/softpak-components-spx-patch.ts"],"sourcesContent":["import { SpxStorage, SpxStorageKeyEnum } from \"@softpak/components/spx-storage\";\n\nexport const patchCheck = (pair: { release: string; patchAtLeast: number; }[]) => {\n    const release = pair.find(p => p.release === SpxStorage.getSetting(SpxStorageKeyEnum.release));\n    if (!release || (parseInt(SpxStorage.getSetting(SpxStorageKeyEnum.patch) ?? '0', 10) >= release.patchAtLeast)) {\n        return null;\n    }\n    return release.patchAtLeast;\n};\n\n","import { SpxStorage, SpxStorageKeyEnum } from \"@softpak/components/spx-storage\";\n\nexport const releaseCheck = (releaseAtLeast: string) => {\n    const currentRelease = (SpxStorage.getSetting(SpxStorageKeyEnum.release) ?? '00.00').split('.').map((v: string) => parseInt(v, 10));\n    const requiredRelease = releaseAtLeast.split('.').map((v: string) => parseInt(v, 10));\n    \n    if (requiredRelease[0] < currentRelease[0] ||\n        requiredRelease[0] === currentRelease[0] && requiredRelease[1] <= currentRelease[1]\n    ) {\n        return null;\n    }\n    return releaseAtLeast;\n};\n\n","import { NgIf } from '@angular/common';\nimport { Component, Input } from '@angular/core';\nimport { SpxAlertComponent } from '@softpak/components/spx-alert';\nimport { SpxSeverityEnum } from '@softpak/components/spx-helpers';\n\n@Component({\n  selector: 'spx-patch',\n  standalone: true,\n  imports: [\n    NgIf,\n    SpxAlertComponent,\n  ],\n  template: `<div class=\"flex flex-col gap-2\">\n  <spx-alert *ngIf=\"releaseCheck\" [spxTitle]=\"'Requires new release'\" [spxSeverity]=\"severityError\">\n    This is new functionality introduced in release {{releaseCheck}}.\n  </spx-alert>\n\n  <spx-alert *ngIf=\"patchCheck\" [spxTitle]=\"'Softpak patch'\" [spxSeverity]=\"severityWarning\">\n    This functionality requires patch #{{patchCheck}} to be installed.\n  </spx-alert>\n</div>`,\n})\nexport class SpxPatchComponent {\n  @Input() patchCheck!: number | null;\n  @Input() releaseCheck!: string | null;\n  severityError = SpxSeverityEnum.error;\n  severityWarning = SpxSeverityEnum.warning;\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"softpak-components-spx-patch.mjs","sources":["../../../../projects/softpak/components/spx-patch/patch-check.function.ts","../../../../projects/softpak/components/spx-patch/release-check.function.ts","../../../../projects/softpak/components/spx-patch/spx-patch.component.ts","../../../../projects/softpak/components/spx-patch/softpak-components-spx-patch.ts"],"sourcesContent":["import { SpxStorage, SpxStorageKeyEnum } from \"@softpak/components/spx-storage\";\n\nexport const patchCheck = (pair: { release: string; patchAtLeast: number; }[]) => {\n    const release = pair.find(p => p.release === SpxStorage.getSetting(SpxStorageKeyEnum.release));\n    if (!release || (parseInt(SpxStorage.getSetting(SpxStorageKeyEnum.patch) ?? '0', 10) >= release.patchAtLeast)) {\n        return null;\n    }\n    return release.patchAtLeast;\n};\n\n","import { SpxStorage, SpxStorageKeyEnum } from \"@softpak/components/spx-storage\";\n\nexport const releaseCheck = (releaseAtLeast: string) => {\n    const currentRelease = (SpxStorage.getSetting(SpxStorageKeyEnum.release) ?? '00.00').split('.').map((v: string) => parseInt(v, 10));\n    const requiredRelease = releaseAtLeast.split('.').map((v: string) => parseInt(v, 10));\n    \n    if (requiredRelease[0] < currentRelease[0] ||\n        requiredRelease[0] === currentRelease[0] && requiredRelease[1] <= currentRelease[1]\n    ) {\n        return null;\n    }\n    return releaseAtLeast;\n};\n\n","import { NgIf } from '@angular/common';\nimport { Component, Input } from '@angular/core';\nimport { SpxAlertComponent } from '@softpak/components/spx-alert';\nimport { SpxSeverityEnum } from '@softpak/components/spx-helpers';\n\n@Component({\n  selector: 'spx-patch',\n  standalone: true,\n  imports: [\n    NgIf,\n    SpxAlertComponent,\n  ],\n  template: `<div class=\"flex flex-col gap-2\">\n  <spx-alert *ngIf=\"releaseCheck\" [spxTitle]=\"'Requires new release'\" [spxSeverity]=\"severityError\">\n    This is new functionality introduced in release {{releaseCheck}}.\n  </spx-alert>\n\n  <spx-alert *ngIf=\"patchCheck\" [spxTitle]=\"'Softpak patch'\" [spxSeverity]=\"severityWarning\">\n    This functionality requires patch #{{patchCheck}} to be installed.\n  </spx-alert>\n</div>`,\n})\nexport class SpxPatchComponent {\n  @Input() patchCheck!: number | null;\n  @Input() releaseCheck!: string | null;\n  severityError = SpxSeverityEnum.error;\n  severityWarning = SpxSeverityEnum.warning;\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}

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

@@ -2,8 +2,8 @@ import * as i0 from '@angular/core';
 import { Component, Input } from '@angular/core';
 
 class SpxProgressBarComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: SpxProgressBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.2", type: SpxProgressBarComponent, isStandalone: true, selector: "spx-progress-bar", inputs: { spxPercentage: "spxPercentage", spxTitle: "spxTitle" }, ngImport: i0, template: ` <div class="progress-bar">
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SpxProgressBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: SpxProgressBarComponent, isStandalone: true, selector: "spx-progress-bar", inputs: { spxPercentage: "spxPercentage", spxTitle: "spxTitle" }, ngImport: i0, template: ` <div class="progress-bar">
     <h1>{{this.spxTitle}}</h1>
     <div class="world">
       <div class="world__moving-object" [style.left]="'calc(' + (this.spxPercentage) + '% - ' + (120 * (this.spxPercentage / 100))  + 'px)'">
@@ -12,7 +12,7 @@ class SpxProgressBarComponent {
     <div class="text"></div>
   </div>`, isInline: true, 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,iVBORw0KGgoAAAANSUhEUgAAAfQAAACnCAYAAADnu65nAAAACXBIWXMAAC4jAAAuIwF4pT92AAAIb0lEQVR4nO3dQWwcVx3A4dmwbkpUFDuqQkVFY0CqqhKpFhUuEhF1qIqQUFGKUHKqkkogDlzaK5c2BySOzoEztrignJIrB+rcIKf4AqJIKLmAQJDULRTMTrto0mdk3MTZ9b6def77+yRfInsyO7P7fjOzb3Z7w+GwAgD2t0P2HwDsf4IOAAEIOgAE0Dvy4o+8iQ5wwPzzlz/u2eexOEMHgAAEHQACEHQACEDQASAAQQeAAAQdAAIQdAAIQNABIABBB4AABB0AAhB0AAhA0AEgAEEHgAAEHQAC6NuJAAdLb/hhNbd4dsluH9k7d65fvlH6Sgo6wAFz6IPN5gG/Zb+Pbm7x7Kt3rl9eKXkdXXIHgAf72dzi2QslbydBB4DRFB11QQeA0RUbdUEHgPEszy2eXShtmwk6AIznaFVVa6VFXdABYHzFRV3QAWBvioq6oAPA3m1FfbbrbSjoADCZIqIu6AAwuWe6jrqgA0AenUbdZ7kDUKxHHj1W9Q8/1Mrq1Zv/qf7xt9uTLuZu1Kuqan2inKADUKyTL71QffapL7Syepvv/6v61U9/niXqc4tnV+5cv9zqJ8q55A4AVVUdPvLJ6us/fOXuVYEMzjdRb3O7CjoAJE3Unz33reoTD2W5zN9q1AUdALY5/sTj1anvn8u1SVqLuqADwA5N1L/47RdzbZbzbXxDm6ADwD08/dVnqxOnvpxr00z9a1cFHQDuY/GlF6rjTz+Za/NMNeqCDgC7eP78d6rZxx/LtYmmFnVBB4AH+Nr3zuW6na1KUV/Kvc0FHQAeoLmd7SuvfjfX7WyNK7m/dlXQAWAEc48eu3s7W6aoZ/8udUEHgBE1t7OdfPkbuTZX1qgLOgCM4ckvncx5j/pW1OcnXZCgA8CYmnvUM97OdjS9pz7R164KOgDsQXM727HPn8i16Sb+LnVBB4A9OvXKmZy3s00UdUEHgD3a+srVjPYcdUEHgAk0Uc+sifrYM98FHQACEHQACEDQASAAQQeAAAQdAAIQdAAIQNABIABBB4AABB0AAhB0AAhA0AEgAEEHgAAEHQACEHQACEDQASAAQQeAAAQdAAIQdAAIQNABIABBB4AABB0AAhB0AAhA0AEggL6dCECp/vib9erPf7hp/4xA0AEo1l9/+7adMyKX3AEgAEEHgAAEHQACEHQACEDQASAAQQeAAAQdAAIQdAAIQNABIABBB4AABB0AAhB0AAhA0AEgAEEHgAAEHQACEHQACEDQASAAQQeAAAQdAAIQdAAIQNABIABBB4AABB0AAhB0AAhA0AEgAEEHgAAEHQACEHQACEDQASAAQQeAAAQdAAIQdAAIQNABIABBB4AABB0AAhB0AAhA0AEgAEEHgAAEHQACEHQACEDQASAAQQeAAAQdAAIQdAAIQNABIABBB4AABB0AAhB0AAhA0AEgAEEHgAAEHQACEHQACEDQASAAQQeAAAQdAAIQdAAIQNABIABBB4AABB0AAhB0AAhA0AEgAEEHgAAEHQACEHQACEDQASAAQQeAAAQdAAIQdAAIQNABIIB+VVUXJ30Yj/z9d9/sbW48V+Lm+GD2c6vvH/n0ze3/9vC/bz82c/vtH3S3VvfX6z98693jCyslrhtE9qk//fqNMh9eb/O9zzz3k5xLHFa92aqq3sm5zLb0N9+d//C9v5wvcd0O9Q//vp594heZFndzhN/5P73hcDjx/9rvz6xVVfX8xAuajtN1PVjbsb5LVVW9Vej6XqvrwVIB6wEHSr8/M/lgOCV1Peh5Nn7E+H1/LrkDQACCDgAB5Ar62gi/U5IbnrzADhuFbpBbBaxDSUp+77/TthyEM/SPbeC6HpT8hNhvB0cQRakH+mNPjoqsrgcln5B12pboZ+i3don3tZbXZVRevNCNUkPhiuLHrZe2QkmnLcwS9J2zyAuy23qV+iJxhg7d2I/j2EHl4Osecl5yv5pxWbns9kIo8V7v9boeOEOHbgj6/nGlwDW92vXbuTmDXtoG3qjrwX2jnd6HKW2yiQ+UgY6kwbi0E5PVwuf8dKKuB1cKnMTYeQOzBT3Fs6RALmf6nbZsCDp0rqQxoTIm7Kqo8Xu3E8i25J7l/mbXDyjZGHFnrxR0lLfsSBy6leYDlTJh9lrB85NKsFzS+F3AOuQNejpCKWH24UhxTL/zWjurtKtRD0CA6SthTKgKWo8ipfG7hJPI5m6qIk5mp3Ef+oUpLHMc6+Ns3HQQ0vUR+QVn51CGNL9m4i+tmtDFwu+3LkJdD5YLOInsunn/kz3o6Un4eu7ljmhjjxv3TIeXbi6lCR5AIdJJQVehuFbKGd8+0eX4fbGkt0Wm8klx6ahpdRrLfoClvRzVprPjpQ6eFM0MVpfVoExLHUR9PQWKEaVbfbsav4s68JraR7/W9eBCi1FvduTLk1yiSn/b5pNiNW0joEDbDvTbivp6Oinx9tuYjN8fmepnuacHPO3L77fSi2Diy9bbnhTTfgFfEnMo37aoT3uezVUxn8y28Xvat09fLHX8nvqXs6TL76entJGbF8FCzskj254Ul3Itc5utKwkus8M+0US2rgdLaaJc7jPAZnmv1/XgjJhPLo3fC1P6gKCmYadLnt/QyretNZMG6nown/EFcS1t2Km8CNIL+LV0IJLjyHwjPfZ5E+Bgf0oD+ULGtxJX0wmJW1YzSuP3mSmM3wulfy5Abzgctvof9vszs2nSRxPMZ8b404300XorbW/Ufn9mKc2eb9b76Bh/up4+vGbF0TfE0e/PzKcxrBkTTozxwG6lcWzZ9za04yCN360HfbsU96V01Nv8zO74lZvpZ62UI6P05Nha3/l7/MratnX2goXg+v2ZhTSOzadxYacbWz/uLe9WGr+39tX9xu+tfbW/xu+qqv4LoJle6/UweLQAAAAASUVORK5CYII=));background-size:contain;background-repeat:no-repeat;height:40px;width:120px;transition:left .1s}\n"] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: SpxProgressBarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SpxProgressBarComponent, decorators: [{
             type: Component,
             args: [{ selector: 'spx-progress-bar', standalone: true, template: ` <div class="progress-bar">
     <h1>{{this.spxTitle}}</h1>

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

@@ -1 +1 @@
-{"version":3,"file":"softpak-components-spx-progress-bar.mjs","sources":["../../../../projects/softpak/components/spx-progress-bar/spx-progress-bar.component.ts","../../../../projects/softpak/components/spx-progress-bar/softpak-components-spx-progress-bar.ts"],"sourcesContent":["import { Component, Input } from '@angular/core';\n\n@Component({\n  selector: 'spx-progress-bar',\n  standalone: true,\n  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>`,\n  styles: `\n  :host {\n  display: block;\n}\n\n.progress-bar {\n  background-color: #FFFFFF;\n  border-radius: 4px;\n  padding: 12px;\n}\n\nh1 {\n  box-sizing: border-box;\n  color: rgba(0, 0, 0, .8);\n  font-size: 16px;\n  font-weight: normal;\n  margin: 0 0 8px 0;\n  text-align: left;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.text {\n  background-color: #E8E8E8;\n  box-sizing: border-box;\n  font-size: 18px;\n  font-weight: bold;\n  text-align: center;\n}\n\n.world {\n  border-bottom: 2px solid #505050;\n  position: relative;\n  height: 42px;\n}\n\n.world__moving-object {\n  position: absolute;\n  background-image: var(--spf-progress-bar--truck-image, url('data:image/png;base64,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'));\n  background-size: contain;\n  background-repeat: no-repeat;\n  height: 40px;\n  width: 120px;\n  transition: left .1s;\n}\n  `,\n})\nexport class SpxProgressBarComponent {\n  @Input() spxPercentage!: number;\n  @Input() spxTitle!: string;\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;MA6Da,uBAAuB,CAAA;8GAAvB,uBAAuB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA,EAAA;AAAvB,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,uBAAuB,EAxDxB,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,kBAAA,EAAA,MAAA,EAAA,EAAA,aAAA,EAAA,eAAA,EAAA,QAAA,EAAA,UAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EAAA,CAAA;;;;;;;AAOH,QAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,MAAA,EAAA,CAAA,siHAAA,CAAA,EAAA,CAAA,CAAA,EAAA;;2FAiDI,uBAAuB,EAAA,UAAA,EAAA,CAAA;kBA3DnC,SAAS;+BACE,kBAAkB,EAAA,UAAA,EAChB,IAAI,EACN,QAAA,EAAA,CAAA;;;;;;;AAOH,QAAA,CAAA,EAAA,MAAA,EAAA,CAAA,siHAAA,CAAA,EAAA,CAAA;8BAkDE,aAAa,EAAA,CAAA;sBAArB,KAAK;gBACG,QAAQ,EAAA,CAAA;sBAAhB,KAAK;;;AC/DR;;AAEG;;;;"}
+{"version":3,"file":"softpak-components-spx-progress-bar.mjs","sources":["../../../../projects/softpak/components/spx-progress-bar/spx-progress-bar.component.ts","../../../../projects/softpak/components/spx-progress-bar/softpak-components-spx-progress-bar.ts"],"sourcesContent":["import { Component, Input } from '@angular/core';\n\n@Component({\n  selector: 'spx-progress-bar',\n  standalone: true,\n  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>`,\n  styles: `\n  :host {\n  display: block;\n}\n\n.progress-bar {\n  background-color: #FFFFFF;\n  border-radius: 4px;\n  padding: 12px;\n}\n\nh1 {\n  box-sizing: border-box;\n  color: rgba(0, 0, 0, .8);\n  font-size: 16px;\n  font-weight: normal;\n  margin: 0 0 8px 0;\n  text-align: left;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.text {\n  background-color: #E8E8E8;\n  box-sizing: border-box;\n  font-size: 18px;\n  font-weight: bold;\n  text-align: center;\n}\n\n.world {\n  border-bottom: 2px solid #505050;\n  position: relative;\n  height: 42px;\n}\n\n.world__moving-object {\n  position: absolute;\n  background-image: var(--spf-progress-bar--truck-image, url('data:image/png;base64,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'));\n  background-size: contain;\n  background-repeat: no-repeat;\n  height: 40px;\n  width: 120px;\n  transition: left .1s;\n}\n  `,\n})\nexport class SpxProgressBarComponent {\n  @Input() spxPercentage!: number;\n  @Input() spxTitle!: string;\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;MA6Da,uBAAuB,CAAA;+GAAvB,uBAAuB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA,EAAA;AAAvB,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,IAAA,EAAA,uBAAuB,EAxDxB,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,kBAAA,EAAA,MAAA,EAAA,EAAA,aAAA,EAAA,eAAA,EAAA,QAAA,EAAA,UAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EAAA,CAAA;;;;;;;AAOH,QAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,MAAA,EAAA,CAAA,siHAAA,CAAA,EAAA,CAAA,CAAA,EAAA;;4FAiDI,uBAAuB,EAAA,UAAA,EAAA,CAAA;kBA3DnC,SAAS;+BACE,kBAAkB,EAAA,UAAA,EAChB,IAAI,EACN,QAAA,EAAA,CAAA;;;;;;;AAOH,QAAA,CAAA,EAAA,MAAA,EAAA,CAAA,siHAAA,CAAA,EAAA,CAAA;8BAkDE,aAAa,EAAA,CAAA;sBAArB,KAAK;gBACG,QAAQ,EAAA,CAAA;sBAAhB,KAAK;;;AC/DR;;AAEG;;;;"}

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

@@ -6,8 +6,8 @@ class SpxSpinnerComponent {
     constructor() {
         this.spxShow = true;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: SpxSpinnerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.2", type: SpxSpinnerComponent, isStandalone: true, selector: "spx-spinner", inputs: { spxShow: "spxShow", spxLoaderText: "spxLoaderText" }, ngImport: i0, template: `<div class="spx-spinner__wrapper spx-spinner2"
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SpxSpinnerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: SpxSpinnerComponent, isStandalone: true, selector: "spx-spinner", inputs: { spxShow: "spxShow", spxLoaderText: "spxLoaderText" }, ngImport: i0, template: `<div class="spx-spinner__wrapper spx-spinner2"
   [class.is-shown]="this.spxShow">
   <div class="spx-spinner__content absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
     <svg class="spx-spinner__image bg-white rounded-full" xmlns="http://www.w3.org/2000/svg" width="100px" height="100px" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid">
@@ -77,7 +77,7 @@ class SpxSpinnerComponent {
   </div>
 </div>`, isInline: true, styles: [":host{background-color:#00000059;position:fixed;height:100%;inset:0;z-index:9}.is-shown{display:block!important}.spf-spinner__wrapper{display:none;position:absolute;right:0;left:0;margin:0 auto;text-align:center;opacity:1;z-index:500000}.spf-spinner__wrapper.spf-spinner1{top:calc(50vh - 25px);width:200px;height:50px}.spf-spinner1 .spf-spinner__ball{display:inline-block;width:50px;height:50px;border-radius:100%;background-color:#0065a4;animation:bouncedelay 1.4s infinite ease-in-out both}.spf-spinner1 .spf-spinner__ball--1{animation-delay:-.32s}.spf-spinner1 .spf-spinner__ball--2{animation-delay:-.16s}.spf-spinner__wrapper.spf-spinner2{top:calc(50vh - 65px);width:100%;max-width:120px}.spf-spinner2 .spf-spinner__content{box-shadow:0 19px 38px #0000004d,0 15px 12px #00000038;background:#fff;border-radius:10px;height:100%;width:100%;margin:0 auto;animation:.2s fadeIn forwards;overflow:hidden}.spf-spinner2 .spf-spinner__image{display:block;margin:0 auto;border-radius:10px}.spf-spinner2 svg{margin:auto;background:#fff;display:block;shape-rendering:auto}.spf-spinner__wrapper.spf-spinner3{top:calc(50vh - 30px)}.spf-spinner3 .spf-spinner__box{animation:loader-rotate 2s infinite linear;display:block;width:60px;height:60px;margin:0 auto}.spf-spinner3 .spf-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}.spf-spinner3 .spf-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"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: SpxSpinnerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SpxSpinnerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'spx-spinner', standalone: true, imports: [
                         NgIf

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

@@ -1 +1 @@
-{"version":3,"file":"softpak-components-spx-spinner.mjs","sources":["../../../../projects/softpak/components/spx-spinner/spx-spinner.component.ts","../../../../projects/softpak/components/spx-spinner/softpak-components-spx-spinner.ts"],"sourcesContent":["import { NgIf } from '@angular/common';\nimport { Component, Input } from '@angular/core';\n\n@Component({\n  selector: 'spx-spinner',\n  standalone: true,\n  imports: [\n    NgIf\n  ],\n  template: `<div class=\"spx-spinner__wrapper spx-spinner2\"\n  [class.is-shown]=\"this.spxShow\">\n  <div class=\"spx-spinner__content absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2\">\n    <svg class=\"spx-spinner__image bg-white rounded-full\" 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\n    <span *ngIf=\"this.spxLoaderText\" class=\"text-gray-900 pb-2 block\">{{this.spxLoaderText}}</span>\n  </div>\n</div>`,\n  styles: `\n  :host {\n  background-color: rgba(0, 0, 0, .35);\n  position: fixed;\n  height: 100%;\n  top: 0;\n  bottom: 0;\n  right: 0;\n  left: 0;\n  z-index: 9;\n}\n\n.is-shown {\n  display: block !important;\n}\n\n.spf-spinner__wrapper {\n  display: none;\n  position: absolute;\n  right: 0;\n  left: 0;\n  margin: 0 auto;\n  text-align: center;\n  opacity: 1;\n  z-index: 500000;\n}\n\n.spf-spinner__wrapper.spf-spinner1 {\n  top: calc((100vh / 2) - 25px);\n  width: 200px;\n  height: 50px;\n}\n\n.spf-spinner1 .spf-spinner__ball {\n  display: inline-block;\n  width: 50px;\n  height: 50px;\n  border-radius: 100%;\n  background-color: #0065a4;\n  animation: bouncedelay 1.4s infinite ease-in-out both;\n}\n\n.spf-spinner1 .spf-spinner__ball--1 {\n  animation-delay: -0.32s;\n}\n\n.spf-spinner1 .spf-spinner__ball--2 {\n  animation-delay: -0.16s;\n}\n\n\n.spf-spinner__wrapper.spf-spinner2 {\n  top: calc((100vh / 2) - 65px);\n  width: 100%;\n  max-width: 120px;\n}\n\n.spf-spinner2 .spf-spinner__content {\n  box-shadow: 0 19px 38px rgba(0, 0, 0, 0.30), 0 15px 12px rgba(0, 0, 0, 0.22);\n  background: white;\n  border-radius: 10px;\n  height: 100%;\n  width: 100%;\n  margin: 0 auto;\n  animation: .2s fadeIn forwards;\n  overflow: hidden;\n}\n\n.spf-spinner2 .spf-spinner__image {\n  display: block;\n  margin: 0 auto;\n  border-radius: 10px;\n}\n\n.spf-spinner2 svg {\n  margin: auto;\n  background: rgb(255, 255, 255);\n  display: block;\n  shape-rendering: auto;\n}\n\n.spf-spinner__wrapper.spf-spinner3 {\n  top: calc((100vh / 2) - 30px);\n}\n\n.spf-spinner3 .spf-spinner__box {\n  animation: loader-rotate 2s infinite linear;\n  display: block;\n  width: 60px;\n  height: 60px;\n  margin: 0 auto;\n}\n\n.spf-spinner3 .spf-spinner__dot {\n  animation: dot-bounce 2s infinite ease-in-out;\n  display: inline-block;\n  position: relative;\n  top: 0;\n  width: 50%;\n  height: 50%;\n  border-radius: 100%;\n  background-color: #555;\n}\n\n.spf-spinner3 .spf-spinner__dot--2 {\n  top: auto;\n  bottom: 0;\n  animation-delay: -1s;\n}\n\n\n@keyframes loader-rotate {\n  100% {\n    transform: rotate(360deg);\n  }\n}\n\n@keyframes dot-bounce {\n\n  0%,\n  100% {\n    transform: scale(0);\n  }\n\n  50% {\n    transform: scale(1);\n  }\n}\n\n@keyframes fadeIn {\n  0% {\n    opacity: 0;\n  }\n\n  30% {\n    opacity: 0.4;\n  }\n\n  100% {\n    opacity: 1;\n  }\n}\n\n@keyframes bouncedelay {\n\n  0%,\n  80%,\n  100% {\n    transform: scale(0);\n  }\n\n  40% {\n    transform: scale(1);\n  }\n}\n\n  `,\n})\nexport class SpxSpinnerComponent {\n  @Input() spxShow: boolean = true;\n  @Input() spxLoaderText!: string;\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;MA4Oa,mBAAmB,CAAA;AAzOhC,IAAA,WAAA,GAAA;QA0OW,IAAO,CAAA,OAAA,GAAY,IAAI,CAAC;AAElC,KAAA;8GAHY,mBAAmB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA,EAAA;AAAnB,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,mBAAmB,EAnOpB,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,aAAA,EAAA,MAAA,EAAA,EAAA,OAAA,EAAA,SAAA,EAAA,aAAA,EAAA,eAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoEL,MAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,MAAA,EAAA,CAAA,wuDAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAtEH,IAAI,EAAA,QAAA,EAAA,QAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,UAAA,EAAA,UAAA,CAAA,EAAA,CAAA,EAAA,CAAA,CAAA,EAAA;;2FAqOK,mBAAmB,EAAA,UAAA,EAAA,CAAA;kBAzO/B,SAAS;+BACE,aAAa,EAAA,UAAA,EACX,IAAI,EACP,OAAA,EAAA;wBACP,IAAI;qBACL,EACS,QAAA,EAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoEL,MAAA,CAAA,EAAA,MAAA,EAAA,CAAA,wuDAAA,CAAA,EAAA,CAAA;8BAgKI,OAAO,EAAA,CAAA;sBAAf,KAAK;gBACG,aAAa,EAAA,CAAA;sBAArB,KAAK;;;AC9OR;;AAEG;;;;"}
+{"version":3,"file":"softpak-components-spx-spinner.mjs","sources":["../../../../projects/softpak/components/spx-spinner/spx-spinner.component.ts","../../../../projects/softpak/components/spx-spinner/softpak-components-spx-spinner.ts"],"sourcesContent":["import { NgIf } from '@angular/common';\nimport { Component, Input } from '@angular/core';\n\n@Component({\n  selector: 'spx-spinner',\n  standalone: true,\n  imports: [\n    NgIf\n  ],\n  template: `<div class=\"spx-spinner__wrapper spx-spinner2\"\n  [class.is-shown]=\"this.spxShow\">\n  <div class=\"spx-spinner__content absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2\">\n    <svg class=\"spx-spinner__image bg-white rounded-full\" 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\n    <span *ngIf=\"this.spxLoaderText\" class=\"text-gray-900 pb-2 block\">{{this.spxLoaderText}}</span>\n  </div>\n</div>`,\n  styles: `\n  :host {\n  background-color: rgba(0, 0, 0, .35);\n  position: fixed;\n  height: 100%;\n  top: 0;\n  bottom: 0;\n  right: 0;\n  left: 0;\n  z-index: 9;\n}\n\n.is-shown {\n  display: block !important;\n}\n\n.spf-spinner__wrapper {\n  display: none;\n  position: absolute;\n  right: 0;\n  left: 0;\n  margin: 0 auto;\n  text-align: center;\n  opacity: 1;\n  z-index: 500000;\n}\n\n.spf-spinner__wrapper.spf-spinner1 {\n  top: calc((100vh / 2) - 25px);\n  width: 200px;\n  height: 50px;\n}\n\n.spf-spinner1 .spf-spinner__ball {\n  display: inline-block;\n  width: 50px;\n  height: 50px;\n  border-radius: 100%;\n  background-color: #0065a4;\n  animation: bouncedelay 1.4s infinite ease-in-out both;\n}\n\n.spf-spinner1 .spf-spinner__ball--1 {\n  animation-delay: -0.32s;\n}\n\n.spf-spinner1 .spf-spinner__ball--2 {\n  animation-delay: -0.16s;\n}\n\n\n.spf-spinner__wrapper.spf-spinner2 {\n  top: calc((100vh / 2) - 65px);\n  width: 100%;\n  max-width: 120px;\n}\n\n.spf-spinner2 .spf-spinner__content {\n  box-shadow: 0 19px 38px rgba(0, 0, 0, 0.30), 0 15px 12px rgba(0, 0, 0, 0.22);\n  background: white;\n  border-radius: 10px;\n  height: 100%;\n  width: 100%;\n  margin: 0 auto;\n  animation: .2s fadeIn forwards;\n  overflow: hidden;\n}\n\n.spf-spinner2 .spf-spinner__image {\n  display: block;\n  margin: 0 auto;\n  border-radius: 10px;\n}\n\n.spf-spinner2 svg {\n  margin: auto;\n  background: rgb(255, 255, 255);\n  display: block;\n  shape-rendering: auto;\n}\n\n.spf-spinner__wrapper.spf-spinner3 {\n  top: calc((100vh / 2) - 30px);\n}\n\n.spf-spinner3 .spf-spinner__box {\n  animation: loader-rotate 2s infinite linear;\n  display: block;\n  width: 60px;\n  height: 60px;\n  margin: 0 auto;\n}\n\n.spf-spinner3 .spf-spinner__dot {\n  animation: dot-bounce 2s infinite ease-in-out;\n  display: inline-block;\n  position: relative;\n  top: 0;\n  width: 50%;\n  height: 50%;\n  border-radius: 100%;\n  background-color: #555;\n}\n\n.spf-spinner3 .spf-spinner__dot--2 {\n  top: auto;\n  bottom: 0;\n  animation-delay: -1s;\n}\n\n\n@keyframes loader-rotate {\n  100% {\n    transform: rotate(360deg);\n  }\n}\n\n@keyframes dot-bounce {\n\n  0%,\n  100% {\n    transform: scale(0);\n  }\n\n  50% {\n    transform: scale(1);\n  }\n}\n\n@keyframes fadeIn {\n  0% {\n    opacity: 0;\n  }\n\n  30% {\n    opacity: 0.4;\n  }\n\n  100% {\n    opacity: 1;\n  }\n}\n\n@keyframes bouncedelay {\n\n  0%,\n  80%,\n  100% {\n    transform: scale(0);\n  }\n\n  40% {\n    transform: scale(1);\n  }\n}\n\n  `,\n})\nexport class SpxSpinnerComponent {\n  @Input() spxShow: boolean = true;\n  @Input() spxLoaderText!: string;\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;MA4Oa,mBAAmB,CAAA;AAzOhC,IAAA,WAAA,GAAA;QA0OW,IAAO,CAAA,OAAA,GAAY,IAAI,CAAC;AAElC,KAAA;+GAHY,mBAAmB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA,EAAA;AAAnB,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,IAAA,EAAA,mBAAmB,EAnOpB,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,aAAA,EAAA,MAAA,EAAA,EAAA,OAAA,EAAA,SAAA,EAAA,aAAA,EAAA,eAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoEL,MAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,MAAA,EAAA,CAAA,wuDAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAtEH,IAAI,EAAA,QAAA,EAAA,QAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,UAAA,EAAA,UAAA,CAAA,EAAA,CAAA,EAAA,CAAA,CAAA,EAAA;;4FAqOK,mBAAmB,EAAA,UAAA,EAAA,CAAA;kBAzO/B,SAAS;+BACE,aAAa,EAAA,UAAA,EACX,IAAI,EACP,OAAA,EAAA;wBACP,IAAI;qBACL,EACS,QAAA,EAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoEL,MAAA,CAAA,EAAA,MAAA,EAAA,CAAA,wuDAAA,CAAA,EAAA,CAAA;8BAgKI,OAAO,EAAA,CAAA;sBAAf,KAAK;gBACG,aAAa,EAAA,CAAA;sBAArB,KAAK;;;AC9OR;;AAEG;;;;"}

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

@@ -8,8 +8,8 @@ class SpxSuggestionComponent {
         this.spxSelected = false;
         this.spxTabbable = false;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: SpxSuggestionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.2", type: SpxSuggestionComponent, isStandalone: true, selector: "spx-suggestion", inputs: { spxDisabled: "spxDisabled", spxFocused: "spxFocused", spxSelected: "spxSelected", spxTabbable: "spxTabbable" }, ngImport: i0, template: `<button
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SpxSuggestionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: SpxSuggestionComponent, isStandalone: true, selector: "spx-suggestion", inputs: { spxDisabled: "spxDisabled", spxFocused: "spxFocused", spxSelected: "spxSelected", spxTabbable: "spxTabbable" }, ngImport: i0, template: `<button
     type="button"
     class="spx-suggestion block rounded text-gray-900 text-sm p-3 w-full text-left truncate outline-none"
     [class.bg-sky-100]="!this.spxSelected && !this.spxDisabled"
@@ -29,7 +29,7 @@ class SpxSuggestionComponent {
     <div class="text-ellipsis overflow-hidden whitespace-nowrap"><ng-content></ng-content></div>
     </button>`, isInline: true }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: SpxSuggestionComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SpxSuggestionComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'spx-suggestion',

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

@@ -1 +1 @@
-{"version":3,"file":"softpak-components-spx-suggestion.mjs","sources":["../../../../projects/softpak/components/spx-suggestion/spx-suggestion.component.ts","../../../../projects/softpak/components/spx-suggestion/softpak-components-spx-suggestion.ts"],"sourcesContent":["import { Component, Input } from '@angular/core';\n\n@Component({\n  selector: 'spx-suggestion',\n  standalone: true,\n  template: `<button\n    type=\"button\"\n    class=\"spx-suggestion block rounded text-gray-900 text-sm p-3 w-full text-left truncate outline-none\"\n    [class.bg-sky-100]=\"!this.spxSelected && !this.spxDisabled\"\n    [class.focus:ring-sky-300]=\"!this.spxSelected && !this.spxDisabled\"\n    [class.hover:bg-sky-300]=\"!this.spxSelected && !this.spxDisabled\"\n    [class.active:bg-sky-300]=\"!this.spxSelected && !this.spxDisabled\"\n    [class.bg-gray-200]=\"this.spxDisabled && !this.spxSelected\"\n    [class.bg-gray-400]=\"this.spxDisabled && this.spxSelected\"\n    [class.cursor-not-allowed]=\"this.spxDisabled\"\n    [class.opacity-60]=\"this.spxDisabled\"\n    [class.bg-teal-500]=\"this.spxSelected && !this.spxDisabled\"\n    [class.font-bold]=\"this.spxSelected\"\n    [attr.tabindex]=\"this.spxTabbable && !this.spxDisabled ? 0 : -1\"\n    [class.ring-2]=\"this.spxFocused && this.spxTabbable && !this.spxDisabled\"\n    [class.ring-offset-2]=\"this.spxFocused && this.spxTabbable && !this.spxDisabled\"\n    [class.ring-blue-500]=\"this.spxFocused && this.spxTabbable && !this.spxDisabled\">\n    <div class=\"text-ellipsis overflow-hidden whitespace-nowrap\"><ng-content></ng-content></div>\n    </button>`,\n})\nexport class SpxSuggestionComponent {\n  @Input() spxDisabled = false;\n  @Input() spxFocused = false;\n  @Input() spxSelected = false;\n  @Input() spxTabbable = false;\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;MAyBa,sBAAsB,CAAA;AAvBnC,IAAA,WAAA,GAAA;QAwBW,IAAW,CAAA,WAAA,GAAG,KAAK,CAAC;QACpB,IAAU,CAAA,UAAA,GAAG,KAAK,CAAC;QACnB,IAAW,CAAA,WAAA,GAAG,KAAK,CAAC;QACpB,IAAW,CAAA,WAAA,GAAG,KAAK,CAAC;AAC9B,KAAA;8GALY,sBAAsB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA,EAAA;AAAtB,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,sBAAsB,EApBvB,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,gBAAA,EAAA,MAAA,EAAA,EAAA,WAAA,EAAA,aAAA,EAAA,UAAA,EAAA,YAAA,EAAA,WAAA,EAAA,aAAA,EAAA,WAAA,EAAA,aAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EAAA,CAAA;;;;;;;;;;;;;;;;;;AAkBE,aAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,CAAA,CAAA,EAAA;;2FAED,sBAAsB,EAAA,UAAA,EAAA,CAAA;kBAvBlC,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,QAAQ,EAAE,gBAAgB;AAC1B,oBAAA,UAAU,EAAE,IAAI;AAChB,oBAAA,QAAQ,EAAE,CAAA;;;;;;;;;;;;;;;;;;AAkBE,aAAA,CAAA;AACb,iBAAA,CAAA;8BAEU,WAAW,EAAA,CAAA;sBAAnB,KAAK;gBACG,UAAU,EAAA,CAAA;sBAAlB,KAAK;gBACG,WAAW,EAAA,CAAA;sBAAnB,KAAK;gBACG,WAAW,EAAA,CAAA;sBAAnB,KAAK;;;AC7BR;;AAEG;;;;"}
+{"version":3,"file":"softpak-components-spx-suggestion.mjs","sources":["../../../../projects/softpak/components/spx-suggestion/spx-suggestion.component.ts","../../../../projects/softpak/components/spx-suggestion/softpak-components-spx-suggestion.ts"],"sourcesContent":["import { Component, Input } from '@angular/core';\n\n@Component({\n  selector: 'spx-suggestion',\n  standalone: true,\n  template: `<button\n    type=\"button\"\n    class=\"spx-suggestion block rounded text-gray-900 text-sm p-3 w-full text-left truncate outline-none\"\n    [class.bg-sky-100]=\"!this.spxSelected && !this.spxDisabled\"\n    [class.focus:ring-sky-300]=\"!this.spxSelected && !this.spxDisabled\"\n    [class.hover:bg-sky-300]=\"!this.spxSelected && !this.spxDisabled\"\n    [class.active:bg-sky-300]=\"!this.spxSelected && !this.spxDisabled\"\n    [class.bg-gray-200]=\"this.spxDisabled && !this.spxSelected\"\n    [class.bg-gray-400]=\"this.spxDisabled && this.spxSelected\"\n    [class.cursor-not-allowed]=\"this.spxDisabled\"\n    [class.opacity-60]=\"this.spxDisabled\"\n    [class.bg-teal-500]=\"this.spxSelected && !this.spxDisabled\"\n    [class.font-bold]=\"this.spxSelected\"\n    [attr.tabindex]=\"this.spxTabbable && !this.spxDisabled ? 0 : -1\"\n    [class.ring-2]=\"this.spxFocused && this.spxTabbable && !this.spxDisabled\"\n    [class.ring-offset-2]=\"this.spxFocused && this.spxTabbable && !this.spxDisabled\"\n    [class.ring-blue-500]=\"this.spxFocused && this.spxTabbable && !this.spxDisabled\">\n    <div class=\"text-ellipsis overflow-hidden whitespace-nowrap\"><ng-content></ng-content></div>\n    </button>`,\n})\nexport class SpxSuggestionComponent {\n  @Input() spxDisabled = false;\n  @Input() spxFocused = false;\n  @Input() spxSelected = false;\n  @Input() spxTabbable = false;\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;MAyBa,sBAAsB,CAAA;AAvBnC,IAAA,WAAA,GAAA;QAwBW,IAAW,CAAA,WAAA,GAAG,KAAK,CAAC;QACpB,IAAU,CAAA,UAAA,GAAG,KAAK,CAAC;QACnB,IAAW,CAAA,WAAA,GAAG,KAAK,CAAC;QACpB,IAAW,CAAA,WAAA,GAAG,KAAK,CAAC;AAC9B,KAAA;+GALY,sBAAsB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA,EAAA;AAAtB,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,IAAA,EAAA,sBAAsB,EApBvB,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,gBAAA,EAAA,MAAA,EAAA,EAAA,WAAA,EAAA,aAAA,EAAA,UAAA,EAAA,YAAA,EAAA,WAAA,EAAA,aAAA,EAAA,WAAA,EAAA,aAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EAAA,CAAA;;;;;;;;;;;;;;;;;;AAkBE,aAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,CAAA,CAAA,EAAA;;4FAED,sBAAsB,EAAA,UAAA,EAAA,CAAA;kBAvBlC,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,QAAQ,EAAE,gBAAgB;AAC1B,oBAAA,UAAU,EAAE,IAAI;AAChB,oBAAA,QAAQ,EAAE,CAAA;;;;;;;;;;;;;;;;;;AAkBE,aAAA,CAAA;AACb,iBAAA,CAAA;8BAEU,WAAW,EAAA,CAAA;sBAAnB,KAAK;gBACG,UAAU,EAAA,CAAA;sBAAlB,KAAK;gBACG,WAAW,EAAA,CAAA;sBAAnB,KAAK;gBACG,WAAW,EAAA,CAAA;sBAAnB,KAAK;;;AC7BR;;AAEG;;;;"}

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

@@ -27,17 +27,22 @@ function toasterAutocloseSpeed(autoCloseSpeed, messageText) {
 }
 
 class SpxToasterComponent {
-    constructor() {
+    constructor(renderer, el) {
+        this.renderer = renderer;
+        this.el = el;
         this.hostClass = true;
         this.spxClose = new EventEmitter();
+        this.count = 0;
     }
     ngOnChanges() {
         this.messages = this.messages.map(m => ({ ...m, autoClose: this.calcToasterAutocloseSpeed(m.autoClose, m.message) }));
-        console.log(this.messages);
         if (this.messages.length > 0) {
             setTimeout(() => {
                 this.messages = this.messages.map(message => {
                     if (message.autoClose) {
+                        // console.log(message.autoClose);
+                        // this.showProgressBar(message.autoClose, message.id)
+                        // this.showProgressBar(600000, message.id)
                         setTimeout(() => {
                             this.handleClose(message.id);
                         }, message.autoClose);
@@ -47,7 +52,14 @@ class SpxToasterComponent {
             }, 0);
         }
     }
-    ngOnInit() {
+    showProgressBar(autoclose, id) {
+        const alertElement = this.el.nativeElement.querySelector(`spx-alert[id="${id}"]`);
+        console.log(alertElement);
+        if (alertElement) {
+        }
+        else {
+            console.error(`spx-alert element with ID ${id} not found.`);
+        }
     }
     handleClose(id) {
         this.spxClose.emit(id);
@@ -62,11 +74,39 @@ class SpxToasterComponent {
                 return autoCloseSpeed;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: SpxToasterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.2", type: SpxToasterComponent, isStandalone: true, selector: "spx-toaster", inputs: { messages: "messages", spxAutoclose: "spxAutoclose" }, outputs: { spxClose: "spxClose" }, host: { properties: { "class.spx-toasts-displayer": "this.hostClass" } }, usesOnChanges: true, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SpxToasterComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: SpxToasterComponent, isStandalone: true, selector: "spx-toaster", inputs: { messages: "messages", spxAutoclose: "spxAutoclose" }, outputs: { spxClose: "spxClose" }, host: { properties: { "class.spx-toasts-displayer": "this.hostClass" } }, usesOnChanges: true, ngImport: i0, template: `
     <div 
         *ngIf="messages && messages.length > 0"
         class="flex flex-col gap-2 fixed bottom-16 left-0 right-0 mx-auto px-3 z-50">
+        <style>
+            .progress-bar-container {
+                width: 100%;
+                height: 5px;
+                background-color: #ccc;
+                margin-top: 8px;
+                border-radius: 2px;
+                overflow: hidden;
+            }
+
+            .progress-bar {
+                height: 100%;
+                background-color: #76c7c0;
+                animation-name: progress;
+                animation-timing-function: ease-in-out;
+                animation-fill-mode: forwards;
+                animation-duration: 5000;
+            }
+
+            @keyframes progress {
+                from {
+                    width: 0%;
+                }
+                to {
+                    width: 100%;
+                }
+            }
+        </style>
         <spx-alert
             *ngFor="let message of messages"
             [spxAutoclose]="message.autoClose"
@@ -75,11 +115,16 @@ class SpxToasterComponent {
             [spxTitle]="message.title"
             (spxClose)="handleClose(message.id)"
             (click)="handleClose(message.id)"
+            [id]="message.id"
             >{{message.message}}
+            <!-- <div *ngIf="message.autoClose" class="progress-bar-container">
+                <div class="progress-bar"></div>
+            </div> -->
         </spx-alert>
-    </div>`, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: SpxAlertComponent, selector: "spx-alert", inputs: ["spxAutoclose", "spxCloseable", "spxHideTitle", "spxTitle", "spxMarginTop", "spxSeverity", "tick"], outputs: ["spxClose"] }] }); }
+        
+    </div>`, isInline: true, styles: ["\n            .progress-bar-container {\n                width: 100%;\n                height: 5px;\n                background-color: #ccc;\n                margin-top: 8px;\n                border-radius: 2px;\n                overflow: hidden;\n            }\n\n            .progress-bar {\n                height: 100%;\n                background-color: #76c7c0;\n                animation-name: progress;\n                animation-timing-function: ease-in-out;\n                animation-fill-mode: forwards;\n                animation-duration: 5000;\n            }\n\n            @keyframes progress {\n                from {\n                    width: 0%;\n                }\n                to {\n                    width: 100%;\n                }\n            }\n        "], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: SpxAlertComponent, selector: "spx-alert", inputs: ["spxAutoclose", "spxCloseable", "spxHideTitle", "spxTitle", "spxMarginTop", "spxSeverity", "tick"], outputs: ["spxClose"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: SpxToasterComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SpxToasterComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'spx-toaster',
@@ -87,6 +132,34 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImpor
     <div 
         *ngIf="messages && messages.length > 0"
         class="flex flex-col gap-2 fixed bottom-16 left-0 right-0 mx-auto px-3 z-50">
+        <style>
+            .progress-bar-container {
+                width: 100%;
+                height: 5px;
+                background-color: #ccc;
+                margin-top: 8px;
+                border-radius: 2px;
+                overflow: hidden;
+            }
+
+            .progress-bar {
+                height: 100%;
+                background-color: #76c7c0;
+                animation-name: progress;
+                animation-timing-function: ease-in-out;
+                animation-fill-mode: forwards;
+                animation-duration: 5000;
+            }
+
+            @keyframes progress {
+                from {
+                    width: 0%;
+                }
+                to {
+                    width: 100%;
+                }
+            }
+        </style>
         <spx-alert
             *ngFor="let message of messages"
             [spxAutoclose]="message.autoClose"
@@ -95,8 +168,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImpor
             [spxTitle]="message.title"
             (spxClose)="handleClose(message.id)"
             (click)="handleClose(message.id)"
+            [id]="message.id"
             >{{message.message}}
+            <!-- <div *ngIf="message.autoClose" class="progress-bar-container">
+                <div class="progress-bar"></div>
+            </div> -->
         </spx-alert>
+        
     </div>`,
                     standalone: true,
                     imports: [
@@ -105,7 +183,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImpor
                         SpxAlertComponent,
                     ],
                 }]
-        }], propDecorators: { hostClass: [{
+        }], ctorParameters: () => [{ type: i0.Renderer2 }, { type: i0.ElementRef }], propDecorators: { hostClass: [{
                 type: HostBinding,
                 args: ['class.spx-toasts-displayer']
             }], messages: [{

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

@@ -1 +1 @@
-{"version":3,"file":"softpak-components-spx-toaster.mjs","sources":["../../../../projects/softpak/components/spx-toaster/src/spx-toaster-autoclose-speed.ts","../../../../projects/softpak/components/spx-toaster/src/spx-toaster.component.ts","../../../../projects/softpak/components/spx-toaster/src/spx-toaster-message.interface.ts","../../../../projects/softpak/components/spx-toaster/softpak-components-spx-toaster.ts"],"sourcesContent":["export enum SpxToasterSeverityEnum {\n    ERROR = 'error',\n    INFO = 'info',\n    SUCCESS = 'success',\n    WARNING = 'warning',\n}\n\nexport enum SpxToasterAutoCloseSpeedEnum {\n    DEFAULT = -1,\n    SLOW = -2,\n}\n\nexport function toasterAutocloseSpeed(autoCloseSpeed: SpxToasterAutoCloseSpeedEnum, messageText: string) {\n    switch (autoCloseSpeed) {\n        case SpxToasterAutoCloseSpeedEnum.DEFAULT:\n            return Math.min(Math.max(messageText.length * 50, 2000), 7000);\n        case SpxToasterAutoCloseSpeedEnum.SLOW:\n            return Math.min(Math.max(messageText.length * 60, 3000), 10000);\n        default:\n            return autoCloseSpeed;\n    }\n}\n","import {\n    Component,\n    EventEmitter,\n    HostBinding,\n    Input,\n    OnChanges,\n    OnInit,\n    Output\n} from '@angular/core';\nimport { SpxToasterMessageI } from './spx-toaster-message.interface';\nimport { SpxAlertComponent } from '@softpak/components/spx-alert';\nimport { NgFor, NgIf } from '@angular/common';\nimport { SpxToasterAutoCloseSpeedEnum } from './spx-toaster-autoclose-speed';\n\n@Component({\n    selector: 'spx-toaster',\n    template: `\n    <div \n        *ngIf=\"messages && messages.length > 0\"\n        class=\"flex flex-col gap-2 fixed bottom-16 left-0 right-0 mx-auto px-3 z-50\">\n        <spx-alert\n            *ngFor=\"let message of messages\"\n            [spxAutoclose]=\"message.autoClose\"\n            [spxCloseable]=\"message.closeable\"\n            [spxSeverity]=\"message.severity\"\n            [spxTitle]=\"message.title\"\n            (spxClose)=\"handleClose(message.id)\"\n            (click)=\"handleClose(message.id)\"\n            >{{message.message}}\n        </spx-alert>\n    </div>`,\n    standalone: true,\n    imports: [\n        NgIf,\n        NgFor,\n        SpxAlertComponent,\n        \n    ],\n})\nexport class SpxToasterComponent implements OnInit, OnChanges {\n    @HostBinding('class.spx-toasts-displayer') hostClass = true;\n    @Input() messages!: SpxToasterMessageI[];\n    @Output() spxClose: EventEmitter<number> = new EventEmitter<number>();\n    @Input() spxAutoclose: number | undefined;\n\n    ngOnChanges() {\n        this.messages = this.messages.map(m => ({...m, autoClose: this.calcToasterAutocloseSpeed(m.autoClose, m.message) }));\n        console.log(this.messages);\n\n        if(this.messages.length > 0){\n            setTimeout(() => {\n            this.messages = this.messages.map(message => { \n                if (message.autoClose) {\n                  setTimeout(() => {  \n                    this.handleClose(message.id)\n                  }, message.autoClose);\n                }\n                return message;\n            });\n        }, 0);\n        }\n    }\n\n    ngOnInit() {\n\n    }\n\n    public handleClose(id: number) {\n        this.spxClose.emit(id);\n    }\n\n    private calcToasterAutocloseSpeed(autoCloseSpeed: SpxToasterAutoCloseSpeedEnum, messageText: string): number {\n        switch (autoCloseSpeed) {\n            case SpxToasterAutoCloseSpeedEnum.DEFAULT:\n                return Math.min(Math.max(messageText.length * 50, 2000), 7000);\n            case SpxToasterAutoCloseSpeedEnum.SLOW:\n                return Math.min(Math.max(messageText.length * 60, 3000), 10000);\n            default:\n                return autoCloseSpeed;\n        }\n    }\n}\n","import { SpxSeverityEnum } from \"@softpak/components/spx-helpers\";\n\nexport class SpxToasterMessageI {\n    autoClose?: any;\n    title?: string;\n    closeable?: boolean;\n    id!: number;\n    message!: string;\n    severity!: SpxSeverityEnum;\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"softpak-components-spx-toaster.mjs","sources":["../../../../projects/softpak/components/spx-toaster/src/spx-toaster-autoclose-speed.ts","../../../../projects/softpak/components/spx-toaster/src/spx-toaster.component.ts","../../../../projects/softpak/components/spx-toaster/src/spx-toaster-message.interface.ts","../../../../projects/softpak/components/spx-toaster/softpak-components-spx-toaster.ts"],"sourcesContent":["export enum SpxToasterSeverityEnum {\n    ERROR = 'error',\n    INFO = 'info',\n    SUCCESS = 'success',\n    WARNING = 'warning',\n}\n\nexport enum SpxToasterAutoCloseSpeedEnum {\n    DEFAULT = -1,\n    SLOW = -2,\n}\n\nexport function toasterAutocloseSpeed(autoCloseSpeed: SpxToasterAutoCloseSpeedEnum, messageText: string) {\n    switch (autoCloseSpeed) {\n        case SpxToasterAutoCloseSpeedEnum.DEFAULT:\n            return Math.min(Math.max(messageText.length * 50, 2000), 7000);\n        case SpxToasterAutoCloseSpeedEnum.SLOW:\n            return Math.min(Math.max(messageText.length * 60, 3000), 10000);\n        default:\n            return autoCloseSpeed;\n    }\n}\n","import {\n    AfterViewInit,\n    Component,\n    ElementRef,\n    EventEmitter,\n    HostBinding,\n    Input,\n    OnChanges,\n    OnInit,\n    Output,\n    Renderer2\n} from '@angular/core';\nimport { SpxToasterMessageI } from './spx-toaster-message.interface';\nimport { SpxAlertComponent } from '@softpak/components/spx-alert';\nimport { NgFor, NgIf } from '@angular/common';\nimport { SpxToasterAutoCloseSpeedEnum } from './spx-toaster-autoclose-speed';\n\n@Component({\n    selector: 'spx-toaster',\n    template: `\n    <div \n        *ngIf=\"messages && messages.length > 0\"\n        class=\"flex flex-col gap-2 fixed bottom-16 left-0 right-0 mx-auto px-3 z-50\">\n        <style>\n            .progress-bar-container {\n                width: 100%;\n                height: 5px;\n                background-color: #ccc;\n                margin-top: 8px;\n                border-radius: 2px;\n                overflow: hidden;\n            }\n\n            .progress-bar {\n                height: 100%;\n                background-color: #76c7c0;\n                animation-name: progress;\n                animation-timing-function: ease-in-out;\n                animation-fill-mode: forwards;\n                animation-duration: 5000;\n            }\n\n            @keyframes progress {\n                from {\n                    width: 0%;\n                }\n                to {\n                    width: 100%;\n                }\n            }\n        </style>\n        <spx-alert\n            *ngFor=\"let message of messages\"\n            [spxAutoclose]=\"message.autoClose\"\n            [spxCloseable]=\"message.closeable\"\n            [spxSeverity]=\"message.severity\"\n            [spxTitle]=\"message.title\"\n            (spxClose)=\"handleClose(message.id)\"\n            (click)=\"handleClose(message.id)\"\n            [id]=\"message.id\"\n            >{{message.message}}\n            <!-- <div *ngIf=\"message.autoClose\" class=\"progress-bar-container\">\n                <div class=\"progress-bar\"></div>\n            </div> -->\n        </spx-alert>\n        \n    </div>`,\n    standalone: true,\n    imports: [\n        NgIf,\n        NgFor,\n        SpxAlertComponent,\n\n    ],\n})\nexport class SpxToasterComponent implements OnChanges {\n    @HostBinding('class.spx-toasts-displayer') hostClass = true;\n    @Input() messages!: SpxToasterMessageI[];\n    @Output() spxClose: EventEmitter<number> = new EventEmitter<number>();\n    @Input() spxAutoclose: number | undefined;\n    count: number = 0;\n    constructor(private renderer: Renderer2, private el: ElementRef) { \n\n    }\n\n\n    ngOnChanges() {\n        this.messages = this.messages.map(m => ({ ...m, autoClose: this.calcToasterAutocloseSpeed(m.autoClose, m.message) }));\n        if (this.messages.length > 0) {\n            setTimeout(() => {\n                this.messages = this.messages.map(message => {\n                    if (message.autoClose) {\n                        // console.log(message.autoClose);\n                        // this.showProgressBar(message.autoClose, message.id)\n                        // this.showProgressBar(600000, message.id)\n                        setTimeout(() => {\n                            this.handleClose(message.id)\n                        }, message.autoClose);\n                    }\n                    return message;\n                });\n            }, 0);\n        }\n    }\n      \n\n    showProgressBar(autoclose: number, id: number) {\n        const alertElement = this.el.nativeElement.querySelector(`spx-alert[id=\"${id}\"]`);\n        console.log(alertElement);\n        if (alertElement) {\n          \n        } else {\n          console.error(`spx-alert element with ID ${id} not found.`);\n        }\n      }\n      \n\n    public handleClose(id: number) {\n        this.spxClose.emit(id);\n    }\n\n    private calcToasterAutocloseSpeed(autoCloseSpeed: SpxToasterAutoCloseSpeedEnum, messageText: string): number {\n        switch (autoCloseSpeed) {\n            case SpxToasterAutoCloseSpeedEnum.DEFAULT:\n                return Math.min(Math.max(messageText.length * 50, 2000), 7000);\n            case SpxToasterAutoCloseSpeedEnum.SLOW:\n                return Math.min(Math.max(messageText.length * 60, 3000), 10000);\n            default:\n                return autoCloseSpeed;\n        }\n    }\n}\n","import { SpxSeverityEnum } from \"@softpak/components/spx-helpers\";\n\nexport class SpxToasterMessageI {\n    autoClose?: any;\n    title?: string;\n    closeable?: boolean;\n    id!: number;\n    message!: string;\n    severity!: SpxSeverityEnum;\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}

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

@@ -39,8 +39,8 @@ class SpxUpdateInfoComponent {
             value: appStoreVersion,
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: SpxUpdateInfoComponent, deps: [{ token: i1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.2", type: SpxUpdateInfoComponent, isStandalone: true, selector: "spx-update-info", inputs: { txtAppStoreVersion: "txtAppStoreVersion", txtChannel: "txtChannel", txtNextVersion: "txtNextVersion", txtVersion: "txtVersion" }, ngImport: i0, template: `<form [formGroup]="form" class="mt-3">
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SpxUpdateInfoComponent, deps: [{ token: i1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: SpxUpdateInfoComponent, isStandalone: true, selector: "spx-update-info", inputs: { txtAppStoreVersion: "txtAppStoreVersion", txtChannel: "txtChannel", txtNextVersion: "txtNextVersion", txtVersion: "txtVersion" }, ngImport: i0, template: `<form [formGroup]="form" class="mt-3">
     <div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-3">
       <spx-input [formControl]="ctrlVersionNumber" [spxLabel]="txtVersion | capitalize"
         [spxReadonly]="true"></spx-input>
@@ -53,7 +53,7 @@ class SpxUpdateInfoComponent {
     </div>
   </form>`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "pipe", type: SpxCapitalizePipe, name: "capitalize" }, { kind: "component", type: SpxInputComponent, selector: "spx-input", inputs: ["spxLabel", "spxMax", "spxMin", "spxName", "spxReadonly", "spxAutofocus", "spxInputMode", "spxPattern", "spxRequired", "spxSelectMonth", "spxSelectDay", "spxShowEdit", "spxShowHelp", "spxShowLabel", "spxCompact", "spxShowClear", "spxShowSearch", "spxShowValidationMessages", "spxStep", "spxSuggestions", "spxType", "spxValidators", "value", "spxCapitalize", "spxFocused"], outputs: ["spxBlur", "spxClear", "spxChange", "spxFocus", "spxEdit", "spxHelp", "spxSearch"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: SpxUpdateInfoComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SpxUpdateInfoComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'spx-update-info',
@@ -108,11 +108,11 @@ class SpxUpdateProgressComponent {
             this.syncTruckInterval = undefined;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: SpxUpdateProgressComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.2", type: SpxUpdateProgressComponent, isStandalone: true, selector: "spx-update-progress", inputs: { title: "title", percentage: "percentage" }, ngImport: i0, template: `<spx-progress-bar [spxPercentage]="delayedPercentage" [spxTitle]="title | capitalize">
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SpxUpdateProgressComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: SpxUpdateProgressComponent, isStandalone: true, selector: "spx-update-progress", inputs: { title: "title", percentage: "percentage" }, ngImport: i0, template: `<spx-progress-bar [spxPercentage]="delayedPercentage" [spxTitle]="title | capitalize">
   </spx-progress-bar>`, isInline: true, dependencies: [{ kind: "component", type: SpxProgressBarComponent, selector: "spx-progress-bar", inputs: ["spxPercentage", "spxTitle"] }, { kind: "pipe", type: SpxCapitalizePipe, name: "capitalize" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: SpxUpdateProgressComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SpxUpdateProgressComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'spx-update-progress',