npm - @softpak/components - Versions diffs - 19.15.2 → 19.15.4-beta - Mend

@softpak/components 19.15.2 → 19.15.4-beta

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (69) hide show

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

@@ -1,24 +1,29 @@
 import * as i0 from '@angular/core';
-import { Component, Input, ViewChild } from '@angular/core';
+import { input, viewChild, signal, computed, Component } from '@angular/core';
 import * as i1 from '@angular/forms';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { combineLatest, startWith, map } from 'rxjs';
 import { valuePairToValue, calcCheckDigit } from '@softpak/components/spx-helpers';
-import { SpxInputTypeEnum, SpxInputComponent } from '@softpak/components/spx-inputs';
+import { SpxInputComponent, SpxInputTypeEnum } from '@softpak/components/spx-inputs';
 import { spxValidatorRequired, spxValidatorMaxLength, spxValidatorMinLength, spxValidatorPattern, SpxValidateControlComponent } from '@softpak/components/spx-validation';
 const ctrlCheckDigit = 'checkDigit';
 const ctrlContainerNumber = 'containerNumber';
 const ctrlPrefix = 'prefix';
 class SpxCheckDigitComponent {
-    get ctrlCheckDigit() { return this.formGroup.get(ctrlCheckDigit); }
-    get ctrlContainerNumber() { return this.formGroup.get(ctrlContainerNumber); }
-    get ctrlContainerPrefix() { return this.formGroup.get(ctrlPrefix); }
     constructor(formBuilder) {
         this.formBuilder = formBuilder;
+        this.txtCheckDigit = input.required();
+        this.txtContainer = input.required();
+        this.txtPrefix = input.required();
+        this.ctrlContainerNumberRef = viewChild(SpxInputComponent);
         this.inputTypeOverlayNumber = SpxInputTypeEnum.overlayNumber;
         this.inputTypeText = SpxInputTypeEnum.text;
-        this.formGroup = this.formBuilder.group({
+        this.formGroup = signal(null);
+        this.ctrlCheckDigit = computed(() => this.formGroup()?.get(ctrlCheckDigit));
+        this.ctrlContainerNumber = computed(() => this.formGroup()?.get(ctrlContainerNumber));
+        this.ctrlContainerPrefix = computed(() => this.formGroup()?.get(ctrlPrefix));
+        this.formGroup.set(this.formBuilder.group({
             [ctrlCheckDigit]: [null, []],
             [ctrlContainerNumber]: [null, [
                     spxValidatorRequired(),
@@ -32,32 +37,32 @@ class SpxCheckDigitComponent {
                     spxValidatorMinLength(4),
                     spxValidatorPattern(/[a-zA-Z]{4}/),
                 ]],
-        });
+        }));
     }
     ngOnInit() {
         this.inputChanges = combineLatest([
-            this.ctrlContainerNumber.valueChanges.pipe(startWith(this.ctrlContainerNumber.value)),
-            this.ctrlContainerPrefix.valueChanges.pipe(startWith(this.ctrlContainerPrefix.value)),
+            this.ctrlContainerNumber().valueChanges.pipe(startWith(this.ctrlContainerNumber().value)),
+            this.ctrlContainerPrefix().valueChanges.pipe(startWith(this.ctrlContainerPrefix().value)),
         ])
             .pipe(map(([containerNumber$, prefix$]) => ({
             containerNumber: containerNumber$,
             prefix: prefix$
         })))
             .subscribe((v) => {
-            if (this.ctrlContainerNumber.invalid || this.ctrlContainerPrefix.invalid) {
-                this.ctrlCheckDigit.setValue(null, { emitEvent: false });
+            if (this.ctrlContainerNumber().invalid || this.ctrlContainerPrefix().invalid) {
+                this.ctrlCheckDigit().setValue(null, { emitEvent: false });
             }
             else {
-                const prefix = valuePairToValue(this.ctrlContainerPrefix.value);
-                const containerNumber = valuePairToValue(this.ctrlContainerNumber.value);
+                const prefix = valuePairToValue(this.ctrlContainerPrefix().value);
+                const containerNumber = valuePairToValue(this.ctrlContainerNumber().value);
                 const checkDigit = calcCheckDigit(`${prefix}${containerNumber}`);
-                this.ctrlCheckDigit.setValue({ value: checkDigit }, { emitEvent: false });
+                this.ctrlCheckDigit().setValue({ value: checkDigit }, { emitEvent: false });
             }
         });
     }
     ngAfterViewInit() {
         setTimeout(() => {
-            this.ctrlContainerNumberRef?.setFocusIn();
+            this.ctrlContainerNumberRef()?.setFocusIn();
         }, 250);
     }
     ngOnDestroy() {
@@ -69,7 +74,7 @@ class SpxCheckDigitComponent {
         return formControl._rawValidators;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SpxCheckDigitComponent, deps: [{ token: i1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: SpxCheckDigitComponent, isStandalone: true, selector: "spx-check-digit", inputs: { txtCheckDigit: "txtCheckDigit", txtContainer: "txtContainer", txtPrefix: "txtPrefix" }, viewQueries: [{ propertyName: "ctrlContainerNumberRef", first: true, predicate: ["ctrlContainerNumberRef"], descendants: true }], ngImport: i0, template: "<form [formGroup]=\"formGroup\" class=\"max-w-lg mx-auto flex flex-col gap-3\">\r\n  <spx-input\r\n    #ctrlContainerNumberRef\r\n    [formControl]=\"ctrlContainerNumber\"\r\n    [spxAutofocus]=\"true\"\r\n    [spxCapitalize]=\"true\"\r\n    [spxLabel]=\"txtContainer\"\r\n    [spxPattern]=\"'[0-9]*'\"\r\n    [spxRequired]=\"true\"\r\n    [spxShowValidationMessages]=\"ctrlContainerNumber && ctrlContainerNumber.errors && ctrlContainerNumber.touched\"\r\n    [spxType]=\"inputTypeOverlayNumber\"\r\n    [spxValidators]=\"getRawValidators(ctrlContainerNumber)\">\r\n    <spx-validate-control [control]=\"ctrlContainerNumber\" [label]=\"txtContainer\"></spx-validate-control>\r\n  </spx-input>\r\n  <spx-input\r\n    [formControl]=\"ctrlContainerPrefix\"\r\n    [spxCapitalize]=\"true\"\r\n    [spxLabel]=\"txtPrefix\"\r\n    [spxRequired]=\"true\"\r\n    [spxShowValidationMessages]=\"ctrlContainerPrefix && ctrlContainerPrefix.errors && ctrlContainerPrefix.touched\"\r\n    [spxType]=\"inputTypeText\"\r\n    [spxValidators]=\"getRawValidators(ctrlContainerPrefix)\">\r\n    <spx-validate-control [control]=\"ctrlContainerPrefix\" [label]=\"txtPrefix\"></spx-validate-control>\r\n  </spx-input>\r\n  @if (ctrlCheckDigit.value) {\r\n    <spx-input\r\n      [formControl]=\"ctrlCheckDigit\"\r\n      [spxLabel]=\"txtCheckDigit\"\r\n      [spxReadonly]=\"true\"\r\n      [spxType]=\"inputTypeText\">\r\n    </spx-input>\r\n  }\r\n</form>", dependencies: [{ 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: "component", type: SpxValidateControlComponent, selector: "spx-validate-control", inputs: ["control", "label", "submitTried"] }, { kind: "component", type: SpxInputComponent, selector: "spx-input", inputs: ["spxLabel", "spxMax", "spxMin", "spxName", "spxReadonly", "spxAutocomplete", "spxAutofocus", "spxInputMode", "spxPattern", "spxRequired", "spxSelectMonth", "spxSelectDay", "spxShowEdit", "spxShowHelp", "spxShowLabel", "spxCompact", "spxShowClear", "spxShowSearch", "spxAlert", "spxShowValidationMessages", "spxStep", "spxSuggestions", "spxType", "spxValidators", "spxCapitalize"], outputs: ["spxClear", "spxEdit", "spxHelp", "spxSearch", "spxBlur"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: SpxCheckDigitComponent, isStandalone: true, selector: "spx-check-digit", inputs: { txtCheckDigit: { classPropertyName: "txtCheckDigit", publicName: "txtCheckDigit", isSignal: true, isRequired: true, transformFunction: null }, txtContainer: { classPropertyName: "txtContainer", publicName: "txtContainer", isSignal: true, isRequired: true, transformFunction: null }, txtPrefix: { classPropertyName: "txtPrefix", publicName: "txtPrefix", isSignal: true, isRequired: true, transformFunction: null } }, viewQueries: [{ propertyName: "ctrlContainerNumberRef", first: true, predicate: SpxInputComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<form [formGroup]=\"formGroup()!\" class=\"max-w-lg mx-auto flex flex-col gap-3\">\r\n  <spx-input\r\n    #ctrlContainerNumberRef\r\n    [formControl]=\"ctrlContainerNumber()\"\r\n    [spxAutofocus]=\"true\"\r\n    [spxCapitalize]=\"true\"\r\n    [spxLabel]=\"txtContainer()\"\r\n    [spxPattern]=\"'[0-9]*'\"\r\n    [spxRequired]=\"true\"\r\n    [spxShowValidationMessages]=\"ctrlContainerNumber() && ctrlContainerNumber().errors && ctrlContainerNumber().touched\"\r\n    [spxType]=\"inputTypeOverlayNumber\"\r\n    [spxValidators]=\"getRawValidators(ctrlContainerNumber())\">\r\n    <spx-validate-control [control]=\"ctrlContainerNumber()\" [label]=\"txtContainer()\"></spx-validate-control>\r\n  </spx-input>\r\n  <spx-input\r\n    [formControl]=\"ctrlContainerPrefix()\"\r\n    [spxCapitalize]=\"true\"\r\n    [spxLabel]=\"txtPrefix()\"\r\n    [spxRequired]=\"true\"\r\n    [spxShowValidationMessages]=\"ctrlContainerPrefix() && ctrlContainerPrefix().errors && ctrlContainerPrefix().touched\"\r\n    [spxType]=\"inputTypeText\"\r\n    [spxValidators]=\"getRawValidators(ctrlContainerPrefix())\">\r\n    <spx-validate-control [control]=\"ctrlContainerPrefix()\" [label]=\"txtPrefix()\"></spx-validate-control>\r\n  </spx-input>\r\n  @if (ctrlCheckDigit().value) {\r\n    <spx-input\r\n      [formControl]=\"ctrlCheckDigit()\"\r\n      [spxLabel]=\"txtCheckDigit()\"\r\n      [spxReadonly]=\"true\"\r\n      [spxType]=\"inputTypeText\">\r\n    </spx-input>\r\n  }\r\n</form>", dependencies: [{ 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: "component", type: SpxValidateControlComponent, selector: "spx-validate-control", inputs: ["control", "label", "submitTried"] }, { kind: "component", type: SpxInputComponent, selector: "spx-input", inputs: ["spxLabel", "spxMax", "spxMin", "spxName", "spxReadonly", "spxAutocomplete", "spxAutofocus", "spxInputMode", "spxPattern", "spxRequired", "spxSelectMonth", "spxSelectDay", "spxShowEdit", "spxShowHelp", "spxShowLabel", "spxCompact", "spxShowClear", "spxShowSearch", "spxAlert", "spxShowValidationMessages", "spxStep", "spxSuggestions", "spxType", "spxValidators", "spxCapitalize"], outputs: ["spxClear", "spxEdit", "spxHelp", "spxSearch", "spxBlur"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SpxCheckDigitComponent, decorators: [{
             type: Component,
@@ -78,17 +83,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
                         ReactiveFormsModule,
                         SpxValidateControlComponent,
                         SpxInputComponent
-                    ], template: "<form [formGroup]=\"formGroup\" class=\"max-w-lg mx-auto flex flex-col gap-3\">\r\n  <spx-input\r\n    #ctrlContainerNumberRef\r\n    [formControl]=\"ctrlContainerNumber\"\r\n    [spxAutofocus]=\"true\"\r\n    [spxCapitalize]=\"true\"\r\n    [spxLabel]=\"txtContainer\"\r\n    [spxPattern]=\"'[0-9]*'\"\r\n    [spxRequired]=\"true\"\r\n    [spxShowValidationMessages]=\"ctrlContainerNumber && ctrlContainerNumber.errors && ctrlContainerNumber.touched\"\r\n    [spxType]=\"inputTypeOverlayNumber\"\r\n    [spxValidators]=\"getRawValidators(ctrlContainerNumber)\">\r\n    <spx-validate-control [control]=\"ctrlContainerNumber\" [label]=\"txtContainer\"></spx-validate-control>\r\n  </spx-input>\r\n  <spx-input\r\n    [formControl]=\"ctrlContainerPrefix\"\r\n    [spxCapitalize]=\"true\"\r\n    [spxLabel]=\"txtPrefix\"\r\n    [spxRequired]=\"true\"\r\n    [spxShowValidationMessages]=\"ctrlContainerPrefix && ctrlContainerPrefix.errors && ctrlContainerPrefix.touched\"\r\n    [spxType]=\"inputTypeText\"\r\n    [spxValidators]=\"getRawValidators(ctrlContainerPrefix)\">\r\n    <spx-validate-control [control]=\"ctrlContainerPrefix\" [label]=\"txtPrefix\"></spx-validate-control>\r\n  </spx-input>\r\n  @if (ctrlCheckDigit.value) {\r\n    <spx-input\r\n      [formControl]=\"ctrlCheckDigit\"\r\n      [spxLabel]=\"txtCheckDigit\"\r\n      [spxReadonly]=\"true\"\r\n      [spxType]=\"inputTypeText\">\r\n    </spx-input>\r\n  }\r\n</form>" }]
-        }], ctorParameters: () => [{ type: i1.FormBuilder }], propDecorators: { txtCheckDigit: [{
-                type: Input
-            }], txtContainer: [{
-                type: Input
-            }], txtPrefix: [{
-                type: Input
-            }], ctrlContainerNumberRef: [{
-                type: ViewChild,
-                args: ['ctrlContainerNumberRef']
-            }] } });
+                    ], template: "<form [formGroup]=\"formGroup()!\" class=\"max-w-lg mx-auto flex flex-col gap-3\">\r\n  <spx-input\r\n    #ctrlContainerNumberRef\r\n    [formControl]=\"ctrlContainerNumber()\"\r\n    [spxAutofocus]=\"true\"\r\n    [spxCapitalize]=\"true\"\r\n    [spxLabel]=\"txtContainer()\"\r\n    [spxPattern]=\"'[0-9]*'\"\r\n    [spxRequired]=\"true\"\r\n    [spxShowValidationMessages]=\"ctrlContainerNumber() && ctrlContainerNumber().errors && ctrlContainerNumber().touched\"\r\n    [spxType]=\"inputTypeOverlayNumber\"\r\n    [spxValidators]=\"getRawValidators(ctrlContainerNumber())\">\r\n    <spx-validate-control [control]=\"ctrlContainerNumber()\" [label]=\"txtContainer()\"></spx-validate-control>\r\n  </spx-input>\r\n  <spx-input\r\n    [formControl]=\"ctrlContainerPrefix()\"\r\n    [spxCapitalize]=\"true\"\r\n    [spxLabel]=\"txtPrefix()\"\r\n    [spxRequired]=\"true\"\r\n    [spxShowValidationMessages]=\"ctrlContainerPrefix() && ctrlContainerPrefix().errors && ctrlContainerPrefix().touched\"\r\n    [spxType]=\"inputTypeText\"\r\n    [spxValidators]=\"getRawValidators(ctrlContainerPrefix())\">\r\n    <spx-validate-control [control]=\"ctrlContainerPrefix()\" [label]=\"txtPrefix()\"></spx-validate-control>\r\n  </spx-input>\r\n  @if (ctrlCheckDigit().value) {\r\n    <spx-input\r\n      [formControl]=\"ctrlCheckDigit()\"\r\n      [spxLabel]=\"txtCheckDigit()\"\r\n      [spxReadonly]=\"true\"\r\n      [spxType]=\"inputTypeText\">\r\n    </spx-input>\r\n  }\r\n</form>" }]
+        }], ctorParameters: () => [{ type: i1.FormBuilder }] });
 /**
  * Generated bundle index. Do not edit.

package/fesm2022/softpak-components-spx-check-digit.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"softpak-components-spx-check-digit.mjs","sources":["../../../../projects/softpak/components/spx-check-digit/spx-check-digit.component.ts","../../../../projects/softpak/components/spx-check-digit/spx-check-digit.component.html","../../../../projects/softpak/components/spx-check-digit/softpak-components-spx-check-digit.ts"],"sourcesContent":["import { Component, Input, ViewChild } from '@angular/core';\r\nimport { FormBuilder, FormControl, FormGroup, FormsModule, ReactiveFormsModule } from '@angular/forms';\r\nimport { Subscription, combineLatest, map, startWith } from 'rxjs';\r\nimport { valuePairToValue, calcCheckDigit } from '@softpak/components/spx-helpers';\r\nimport { SpxInputComponent, SpxInputTypeEnum } from '@softpak/components/spx-inputs';\r\nimport { SpxValidateControlComponent, spxValidatorRequired, spxValidatorMaxLength, spxValidatorMinLength, spxValidatorPattern } from '@softpak/components/spx-validation';\r\n\r\nconst ctrlCheckDigit = 'checkDigit';\r\nconst ctrlContainerNumber = 'containerNumber';\r\nconst ctrlPrefix = 'prefix';\r\n\r\n@Component({\r\n selector: 'spx-check-digit',\r\n templateUrl: './spx-check-digit.component.html',\r\n imports: [\r\n FormsModule,\r\n ReactiveFormsModule,\r\n SpxValidateControlComponent,\r\n SpxInputComponent\r\n ]\r\n})\r\nexport class SpxCheckDigitComponent {\r\n @Input() txtCheckDigit!: string;\r\n @Input() txtContainer!: string;\r\n @Input() txtPrefix!: string;\r\n @ViewChild('ctrlContainerNumberRef') ctrlContainerNumberRef?: SpxInputComponent;\r\n inputTypeOverlayNumber = SpxInputTypeEnum.overlayNumber;\r\n inputTypeText = SpxInputTypeEnum.text;\r\n formGroup: FormGroup;\r\n\r\n get ctrlCheckDigit(): FormControl { return this.formGroup.get(ctrlCheckDigit) as FormControl; }\r\n get ctrlContainerNumber(): FormControl { return this.formGroup.get(ctrlContainerNumber) as FormControl; }\r\n get ctrlContainerPrefix(): FormControl { return this.formGroup.get(ctrlPrefix) as FormControl; }\r\n\r\n private inputChanges?: Subscription;\r\n\r\n constructor(\r\n private readonly formBuilder: FormBuilder,\r\n ) {\r\n this.formGroup = this.formBuilder.group({\r\n [ctrlCheckDigit]: [null, []],\r\n [ctrlContainerNumber]: [null, [\r\n spxValidatorRequired(),\r\n spxValidatorMaxLength(6),\r\n spxValidatorMinLength(6),\r\n spxValidatorPattern(/[0-9]{6}/),\r\n ]],\r\n [ctrlPrefix]: [null, [\r\n spxValidatorRequired(),\r\n spxValidatorMaxLength(4),\r\n spxValidatorMinLength(4),\r\n spxValidatorPattern(/[a-zA-Z]{4}/),\r\n ]],\r\n })\r\n }\r\n\r\n ngOnInit(): void {\r\n this.inputChanges = combineLatest([\r\n this.ctrlContainerNumber.valueChanges.pipe(startWith(this.ctrlContainerNumber.value)),\r\n this.ctrlContainerPrefix.valueChanges.pipe(startWith(this.ctrlContainerPrefix.value)),\r\n ])\r\n .pipe(map(([containerNumber$, prefix$]) => ({\r\n containerNumber: containerNumber$,\r\n prefix: prefix$\r\n })))\r\n .subscribe((v) => {\r\n if (this.ctrlContainerNumber.invalid \|\| this.ctrlContainerPrefix.invalid) {\r\n this.ctrlCheckDigit.setValue(null, { emitEvent: false });\r\n } else {\r\n const prefix = valuePairToValue(this.ctrlContainerPrefix.value);\r\n const containerNumber = valuePairToValue(this.ctrlContainerNumber.value);\r\n const checkDigit = calcCheckDigit(`${prefix}${containerNumber}`);\r\n this.ctrlCheckDigit.setValue({ value: checkDigit }, { emitEvent: false });\r\n }\r\n });\r\n }\r\n\r\n ngAfterViewInit(): void {\r\n setTimeout(() => {\r\n this.ctrlContainerNumberRef?.setFocusIn(); \r\n }, 250);\r\n }\r\n\r\n ngOnDestroy(): void {\r\n if (this.inputChanges) {\r\n this.inputChanges.unsubscribe();\r\n }\r\n }\r\n\r\n getRawValidators(formControl: FormControl) {\r\n return (formControl as any)._rawValidators;\r\n }\r\n}\r\n","<form [formGroup]=\"formGroup\" class=\"max-w-lg mx-auto flex flex-col gap-3\">\r\n <spx-input\r\n #ctrlContainerNumberRef\r\n [formControl]=\"ctrlContainerNumber\"\r\n [spxAutofocus]=\"true\"\r\n [spxCapitalize]=\"true\"\r\n [spxLabel]=\"txtContainer\"\r\n [spxPattern]=\"'[0-9]'\"\r\n [spxRequired]=\"true\"\r\n [spxShowValidationMessages]=\"ctrlContainerNumber && ctrlContainerNumber.errors && ctrlContainerNumber.touched\"\r\n [spxType]=\"inputTypeOverlayNumber\"\r\n [spxValidators]=\"getRawValidators(ctrlContainerNumber)\">\r\n <spx-validate-control [control]=\"ctrlContainerNumber\" [label]=\"txtContainer\"></spx-validate-control>\r\n </spx-input>\r\n <spx-input\r\n [formControl]=\"ctrlContainerPrefix\"\r\n [spxCapitalize]=\"true\"\r\n [spxLabel]=\"txtPrefix\"\r\n [spxRequired]=\"true\"\r\n [spxShowValidationMessages]=\"ctrlContainerPrefix && ctrlContainerPrefix.errors && ctrlContainerPrefix.touched\"\r\n [spxType]=\"inputTypeText\"\r\n [spxValidators]=\"getRawValidators(ctrlContainerPrefix)\">\r\n <spx-validate-control [control]=\"ctrlContainerPrefix\" [label]=\"txtPrefix\"></spx-validate-control>\r\n </spx-input>\r\n @if (ctrlCheckDigit.value) {\r\n <spx-input\r\n [formControl]=\"ctrlCheckDigit\"\r\n [spxLabel]=\"txtCheckDigit\"\r\n [spxReadonly]=\"true\"\r\n [spxType]=\"inputTypeText\">\r\n </spx-input>\r\n }\r\n</form>","/\n Generated bundle index. Do not edit.\n /\n\nexport from './public-api';\n"],"names":[],"mappings":";;;;;;;;;AAOA,MAAM,cAAc,GAAG,YAAY;AACnC,MAAM,mBAAmB,GAAG,iBAAiB;AAC7C,MAAM,UAAU,GAAG,QAAQ;MAYd,sBAAsB,CAAA;AASjC,IAAA,IAAI,cAAc,GAAA,EAAkB,OAAO,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,cAAc,CAAgB,CAAC;AAC7F,IAAA,IAAI,mBAAmB,GAAA,EAAkB,OAAO,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,mBAAmB,CAAgB,CAAC;AACvG,IAAA,IAAI,mBAAmB,GAAA,EAAkB,OAAO,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,UAAU,CAAgB,CAAC;AAI9F,IAAA,WAAA,CACmB,WAAwB,EAAA;QAAxB,IAAW,CAAA,WAAA,GAAX,WAAW;AAX9B,QAAA,IAAA,CAAA,sBAAsB,GAAG,gBAAgB,CAAC,aAAa;AACvD,QAAA,IAAA,CAAA,aAAa,GAAG,gBAAgB,CAAC,IAAI;QAYnC,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC;AACtC,YAAA,CAAC,cAAc,GAAG,CAAC,IAAI,EAAE,EAAE,CAAC;AAC5B,YAAA,CAAC,mBAAmB,GAAG,CAAC,IAAI,EAAE;AAC5B,oBAAA,oBAAoB,EAAE;oBACtB,qBAAqB,CAAC,CAAC,CAAC;oBACxB,qBAAqB,CAAC,CAAC,CAAC;oBACxB,mBAAmB,CAAC,UAAU,CAAC;iBAChC,CAAC;AACF,YAAA,CAAC,UAAU,GAAG,CAAC,IAAI,EAAE;AACnB,oBAAA,oBAAoB,EAAE;oBACtB,qBAAqB,CAAC,CAAC,CAAC;oBACxB,qBAAqB,CAAC,CAAC,CAAC;oBACxB,mBAAmB,CAAC,aAAa,CAAC;iBACnC,CAAC;AACH,SAAA,CAAC;;IAGJ,QAAQ,GAAA;AACN,QAAA,IAAI,CAAC,YAAY,GAAG,aAAa,CAAC;AAChC,YAAA,IAAI,CAAC,mBAAmB,CAAC,YAAY,CAAC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,mBAAmB,CAAC,KAAK,CAAC,CAAC;AACrF,YAAA,IAAI,CAAC,mBAAmB,CAAC,YAAY,CAAC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,mBAAmB,CAAC,KAAK,CAAC,CAAC;SACtF;AACA,aAAA,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,gBAAgB,EAAE,OAAO,CAAC,MAAM;AAC1C,YAAA,eAAe,EAAE,gBAAgB;AACjC,YAAA,MAAM,EAAE;AACT,SAAA,CAAC,CAAC;AACF,aAAA,SAAS,CAAC,CAAC,CAAC,KAAI;AACf,YAAA,IAAI,IAAI,CAAC,mBAAmB,CAAC,OAAO,IAAI,IAAI,CAAC,mBAAmB,CAAC,OAAO,EAAE;AACxE,gBAAA,IAAI,CAAC,cAAc,CAAC,QAAQ,CAAC,IAAI,EAAE,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;;iBACnD;gBACL,MAAM,MAAM,GAAG,gBAAgB,CAAC,IAAI,CAAC,mBAAmB,CAAC,KAAK,CAAC;gBAC/D,MAAM,eAAe,GAAG,gBAAgB,CAAC,IAAI,CAAC,mBAAmB,CAAC,KAAK,CAAC;gBACxE,MAAM,UAAU,GAAG,cAAc,CAAC,CAAA,EAAG,MAAM,CAAG,EAAA,eAAe,CAAE,CAAA,CAAC;AAChE,gBAAA,IAAI,CAAC,cAAc,CAAC,QAAQ,CAAC,EAAE,KAAK,EAAE,UAAU,EAAE,EAAE,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;;AAE7E,SAAC,CAAC;;IAGJ,eAAe,GAAA;QACb,UAAU,CAAC,MAAK;AACd,YAAA,IAAI,CAAC,sBAAsB,EAAE,UAAU,EAAE;SAC1C,EAAE,GAAG,CAAC;;IAGT,WAAW,GAAA;AACT,QAAA,IAAI,IAAI,CAAC,YAAY,EAAE;AACrB,YAAA,IAAI,CAAC,YAAY,CAAC,WAAW,EAAE;;;AAInC,IAAA,gBAAgB,CAAC,WAAwB,EAAA;QACvC,OAAQ,WAAmB,CAAC,cAAc;;8GArEjC,sBAAsB,EAAA,IAAA,EAAA,CAAA,EAAA,KAAA,EAAA,EAAA,CAAA,WAAA,EAAA,CAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;kGAAtB,sBAAsB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,EAAA,aAAA,EAAA,eAAA,EAAA,YAAA,EAAA,cAAA,EAAA,SAAA,EAAA,WAAA,EAAA,EAAA,WAAA,EAAA,CAAA,EAAA,YAAA,EAAA,wBAAA,EAAA,KAAA,EAAA,IAAA,EAAA,SAAA,EAAA,CAAA,wBAAA,CAAA,EAAA,WAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECrBnC,65CAgCO,EDjBC,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAA,WAAW,2YACX,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,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EACnB,2BAA2B,EAAA,QAAA,EAAA,sBAAA,EAAA,MAAA,EAAA,CAAA,SAAA,EAAA,OAAA,EAAA,aAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAC3B,iBAAiB,EAAA,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,CAAA,UAAA,EAAA,QAAA,EAAA,QAAA,EAAA,SAAA,EAAA,aAAA,EAAA,iBAAA,EAAA,cAAA,EAAA,cAAA,EAAA,YAAA,EAAA,aAAA,EAAA,gBAAA,EAAA,cAAA,EAAA,aAAA,EAAA,aAAA,EAAA,cAAA,EAAA,YAAA,EAAA,cAAA,EAAA,eAAA,EAAA,UAAA,EAAA,2BAAA,EAAA,SAAA,EAAA,gBAAA,EAAA,SAAA,EAAA,eAAA,EAAA,eAAA,CAAA,EAAA,OAAA,EAAA,CAAA,UAAA,EAAA,SAAA,EAAA,SAAA,EAAA,WAAA,EAAA,SAAA,CAAA,EAAA,CAAA,EAAA,CAAA,CAAA;;2FAGZ,sBAAsB,EAAA,UAAA,EAAA,CAAA;kBAVlC,SAAS;AACI,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,iBAAiB,EAElB,OAAA,EAAA;wBACL,WAAW;wBACX,mBAAmB;wBACnB,2BAA2B;wBAC3B;AACH,qBAAA,EAAA,QAAA,EAAA,65CAAA,EAAA;gFAGM,aAAa,EAAA,CAAA;sBAArB;gBACQ,YAAY,EAAA,CAAA;sBAApB;gBACQ,SAAS,EAAA,CAAA;sBAAjB;gBACoC,sBAAsB,EAAA,CAAA;sBAA1D,SAAS;uBAAC,wBAAwB;;;AEzBrC;;AAEG;;;;"}
1	+ {"version":3,"file":"softpak-components-spx-check-digit.mjs","sources":["../../../../projects/softpak/components/spx-check-digit/spx-check-digit.component.ts","../../../../projects/softpak/components/spx-check-digit/spx-check-digit.component.html","../../../../projects/softpak/components/spx-check-digit/softpak-components-spx-check-digit.ts"],"sourcesContent":["import { Component, computed, input, signal, viewChild } from '@angular/core';\r\nimport { FormBuilder, FormControl, FormGroup, FormsModule, ReactiveFormsModule } from '@angular/forms';\r\nimport { Subscription, combineLatest, map, startWith } from 'rxjs';\r\nimport { valuePairToValue, calcCheckDigit } from '@softpak/components/spx-helpers';\r\nimport { SpxInputComponent, SpxInputTypeEnum } from '@softpak/components/spx-inputs';\r\nimport { SpxValidateControlComponent, spxValidatorRequired, spxValidatorMaxLength, spxValidatorMinLength, spxValidatorPattern } from '@softpak/components/spx-validation';\r\n\r\nconst ctrlCheckDigit = 'checkDigit';\r\nconst ctrlContainerNumber = 'containerNumber';\r\nconst ctrlPrefix = 'prefix';\r\n\r\n@Component({\r\n selector: 'spx-check-digit',\r\n templateUrl: './spx-check-digit.component.html',\r\n imports: [\r\n FormsModule,\r\n ReactiveFormsModule,\r\n SpxValidateControlComponent,\r\n SpxInputComponent\r\n ]\r\n})\r\nexport class SpxCheckDigitComponent {\r\n readonly txtCheckDigit = input.required<string>();\r\n readonly txtContainer = input.required<string>();\r\n readonly txtPrefix = input.required<string>();\r\n ctrlContainerNumberRef = viewChild(SpxInputComponent);\r\n inputTypeOverlayNumber = SpxInputTypeEnum.overlayNumber;\r\n inputTypeText = SpxInputTypeEnum.text;\r\n formGroup = signal<FormGroup \| null>(null);\r\n ctrlCheckDigit = computed(() => this.formGroup()?.get(ctrlCheckDigit) as FormControl);\r\n ctrlContainerNumber = computed(() => this.formGroup()?.get(ctrlContainerNumber) as FormControl);\r\n ctrlContainerPrefix = computed(() => this.formGroup()?.get(ctrlPrefix) as FormControl);\r\n\r\n private inputChanges?: Subscription;\r\n\r\n constructor(\r\n private readonly formBuilder: FormBuilder,\r\n ) {\r\n this.formGroup.set(this.formBuilder.group({\r\n [ctrlCheckDigit]: [null, []],\r\n [ctrlContainerNumber]: [null, [\r\n spxValidatorRequired(),\r\n spxValidatorMaxLength(6),\r\n spxValidatorMinLength(6),\r\n spxValidatorPattern(/[0-9]{6}/),\r\n ]],\r\n [ctrlPrefix]: [null, [\r\n spxValidatorRequired(),\r\n spxValidatorMaxLength(4),\r\n spxValidatorMinLength(4),\r\n spxValidatorPattern(/[a-zA-Z]{4}/),\r\n ]],\r\n }));\r\n }\r\n\r\n ngOnInit(): void {\r\n this.inputChanges = combineLatest([\r\n this.ctrlContainerNumber().valueChanges.pipe(startWith(this.ctrlContainerNumber().value)),\r\n this.ctrlContainerPrefix().valueChanges.pipe(startWith(this.ctrlContainerPrefix().value)),\r\n ])\r\n .pipe(map(([containerNumber$, prefix$]) => ({\r\n containerNumber: containerNumber$,\r\n prefix: prefix$\r\n })))\r\n .subscribe((v) => {\r\n if (this.ctrlContainerNumber().invalid \|\| this.ctrlContainerPrefix().invalid) {\r\n this.ctrlCheckDigit().setValue(null, { emitEvent: false });\r\n } else {\r\n const prefix = valuePairToValue(this.ctrlContainerPrefix().value);\r\n const containerNumber = valuePairToValue(this.ctrlContainerNumber().value);\r\n const checkDigit = calcCheckDigit(`${prefix}${containerNumber}`);\r\n this.ctrlCheckDigit().setValue({ value: checkDigit }, { emitEvent: false });\r\n }\r\n });\r\n }\r\n\r\n ngAfterViewInit(): void {\r\n setTimeout(() => {\r\n this.ctrlContainerNumberRef()?.setFocusIn(); \r\n }, 250);\r\n }\r\n\r\n ngOnDestroy(): void {\r\n if (this.inputChanges) {\r\n this.inputChanges.unsubscribe();\r\n }\r\n }\r\n\r\n getRawValidators(formControl: FormControl) {\r\n return (formControl as any)._rawValidators;\r\n }\r\n}\r\n","<form [formGroup]=\"formGroup()!\" class=\"max-w-lg mx-auto flex flex-col gap-3\">\r\n <spx-input\r\n #ctrlContainerNumberRef\r\n [formControl]=\"ctrlContainerNumber()\"\r\n [spxAutofocus]=\"true\"\r\n [spxCapitalize]=\"true\"\r\n [spxLabel]=\"txtContainer()\"\r\n [spxPattern]=\"'[0-9]'\"\r\n [spxRequired]=\"true\"\r\n [spxShowValidationMessages]=\"ctrlContainerNumber() && ctrlContainerNumber().errors && ctrlContainerNumber().touched\"\r\n [spxType]=\"inputTypeOverlayNumber\"\r\n [spxValidators]=\"getRawValidators(ctrlContainerNumber())\">\r\n <spx-validate-control [control]=\"ctrlContainerNumber()\" [label]=\"txtContainer()\"></spx-validate-control>\r\n </spx-input>\r\n <spx-input\r\n [formControl]=\"ctrlContainerPrefix()\"\r\n [spxCapitalize]=\"true\"\r\n [spxLabel]=\"txtPrefix()\"\r\n [spxRequired]=\"true\"\r\n [spxShowValidationMessages]=\"ctrlContainerPrefix() && ctrlContainerPrefix().errors && ctrlContainerPrefix().touched\"\r\n [spxType]=\"inputTypeText\"\r\n [spxValidators]=\"getRawValidators(ctrlContainerPrefix())\">\r\n <spx-validate-control [control]=\"ctrlContainerPrefix()\" [label]=\"txtPrefix()\"></spx-validate-control>\r\n </spx-input>\r\n @if (ctrlCheckDigit().value) {\r\n <spx-input\r\n [formControl]=\"ctrlCheckDigit()\"\r\n [spxLabel]=\"txtCheckDigit()\"\r\n [spxReadonly]=\"true\"\r\n [spxType]=\"inputTypeText\">\r\n </spx-input>\r\n }\r\n</form>","/\n Generated bundle index. Do not edit.\n /\n\nexport from './public-api';\n"],"names":[],"mappings":"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"}

package/fesm2022/softpak-components-spx-confirm.mjs CHANGED Viewed

@@ -5,7 +5,7 @@ import { faTimes } from '@fortawesome/free-solid-svg-icons';
 import { SpxButtonComponent } from '@softpak/components/spx-button';
 import { SpxSeverityEnum } from '@softpak/components/spx-helpers';
 import * as i1 from '@ngrx/store';
-import { select, createAction, props, union, createFeature, createReducer, on } from '@ngrx/store';
+import { createAction, props, union, createFeature, createReducer, on } from '@ngrx/store';
 import * as i1$1 from '@ngrx/effects';
 import { createEffect, ofType } from '@ngrx/effects';
 import { withLatestFrom, mergeMap } from 'rxjs/operators';
@@ -29,21 +29,21 @@ class SpxConfirmComponent {
         this.spxConfirm.emit(this.id());
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SpxConfirmComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.5", type: SpxConfirmComponent, isStandalone: true, selector: "spx-confirm", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { spxCancel: "spxCancel", spxConfirm: "spxConfirm" }, ngImport: i0, template: "<div class=\"block spx-confirm h-full mt-12\">\r\n    <div class=\"bg-amber-400 flex gap-3 items-center px-3 py-1 rounded-t text-black\">\r\n        <div class=\"grow font-bold\">\r\n            <ng-content select=\"[confirm__title]\"></ng-content>\r\n        </div>\r\n        <spx-button (spxClick)=\"onCancel()\" [spxType]=\"'button'\" [spxSeverity]=\"severityInfo\"><fa-icon\r\n                [icon]=\"faTimes\"></fa-icon>\r\n        </spx-button>\r\n    </div>\r\n    <div class=\"flex flex-col gap-3 bg-black p-3\">\r\n        <ng-content select=\"[confirm__content]\"></ng-content>\r\n        <div class=\"grid grid-cols-1 grid-rows-2 sm:grid-rows-1 sm:grid-cols-2 gap-3 grid-flow-row\">\r\n            <spx-button (spxClick)=\"onCancel()\" [spxFullWidth]=\"true\" [spxType]=\"'button'\"\r\n                [spxSeverity]=\"severityError\">\r\n                <ng-content select=\"[confirm__btn_cancel]\"></ng-content>\r\n            </spx-button>\r\n            <spx-button #confirm (spxClick)=\"onConfirm()\" [spxFullWidth]=\"true\" [spxType]=\"'submit'\"\r\n                [spxSeverity]=\"severitySuccess\">\r\n                <ng-content select=\"[confirm__btn_confirm]\"></ng-content>\r\n            </spx-button>\r\n        </div>\r\n    </div>\r\n</div>", styles: [":host{position:absolute;z-index:var(--z-index--confirm);top:0;left:0;right:0;background-color:var(--color--backdrop)}.spx-confirm{background-color:var(--color--item--background);border-radius:3px;color:var(--ion-text-color, #000);position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:90%;max-width:960px}\n"], dependencies: [{ kind: "component", type: SpxButtonComponent, selector: "spx-button", inputs: ["spxDisabled", "spxClass", "spxClassObject", "spxForm", "spxFullHeight", "spxFullWidth", "spxSeverity", "spxSize", "spxTabIndex", "spxType"], outputs: ["spxClick"] }, { kind: "component", type: FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "mask", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "transform", "a11yRole"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.5", type: SpxConfirmComponent, isStandalone: true, selector: "spx-confirm", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { spxCancel: "spxCancel", spxConfirm: "spxConfirm" }, ngImport: i0, template: "<div class=\"block spx-confirm h-full mt-12\">\r\n    <div class=\"bg-amber-400 flex gap-3 items-center px-3 py-1 rounded-t text-black dark:text-white\">\r\n        <div class=\"grow font-bold\">\r\n            <ng-content select=\"[confirm__title]\"></ng-content>\r\n        </div>\r\n        <spx-button (spxClick)=\"onCancel()\" [spxType]=\"'button'\" [spxSeverity]=\"severityInfo\"><fa-icon\r\n                [icon]=\"faTimes\"></fa-icon>\r\n        </spx-button>\r\n    </div>\r\n    <div class=\"flex flex-col gap-3 dark:bg-gray-700 bg-white p-3\">\r\n        <ng-content select=\"[confirm__content]\"></ng-content>\r\n        <div class=\"grid grid-cols-1 grid-rows-2 sm:grid-rows-1 sm:grid-cols-2 gap-3 grid-flow-row\">\r\n            <spx-button (spxClick)=\"onCancel()\" [spxFullWidth]=\"true\" [spxType]=\"'button'\"\r\n                [spxSeverity]=\"severityError\">\r\n                <ng-content select=\"[confirm__btn_cancel]\"></ng-content>\r\n            </spx-button>\r\n            <spx-button #confirm (spxClick)=\"onConfirm()\" [spxFullWidth]=\"true\" [spxType]=\"'submit'\"\r\n                [spxSeverity]=\"severitySuccess\">\r\n                <ng-content select=\"[confirm__btn_confirm]\"></ng-content>\r\n            </spx-button>\r\n        </div>\r\n    </div>\r\n</div>", styles: [":host{position:absolute;z-index:var(--z-index--confirm);top:0;left:0;right:0;background-color:var(--color--backdrop)}.spx-confirm{background-color:var(--color--item--background);border-radius:3px;color:var(--ion-text-color, #000);position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:90%;max-width:960px}\n"], dependencies: [{ kind: "component", type: SpxButtonComponent, selector: "spx-button", inputs: ["spxDisabled", "spxClass", "spxClassObject", "spxForm", "spxFullHeight", "spxFullWidth", "spxSeverity", "spxSize", "spxTabIndex", "spxType"], outputs: ["spxClick"] }, { kind: "component", type: FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "mask", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "transform", "a11yRole"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SpxConfirmComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'spx-confirm', imports: [SpxButtonComponent, FaIconComponent], changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, template: "<div class=\"block spx-confirm h-full mt-12\">\r\n    <div class=\"bg-amber-400 flex gap-3 items-center px-3 py-1 rounded-t text-black\">\r\n        <div class=\"grow font-bold\">\r\n            <ng-content select=\"[confirm__title]\"></ng-content>\r\n        </div>\r\n        <spx-button (spxClick)=\"onCancel()\" [spxType]=\"'button'\" [spxSeverity]=\"severityInfo\"><fa-icon\r\n                [icon]=\"faTimes\"></fa-icon>\r\n        </spx-button>\r\n    </div>\r\n    <div class=\"flex flex-col gap-3 bg-black p-3\">\r\n        <ng-content select=\"[confirm__content]\"></ng-content>\r\n        <div class=\"grid grid-cols-1 grid-rows-2 sm:grid-rows-1 sm:grid-cols-2 gap-3 grid-flow-row\">\r\n            <spx-button (spxClick)=\"onCancel()\" [spxFullWidth]=\"true\" [spxType]=\"'button'\"\r\n                [spxSeverity]=\"severityError\">\r\n                <ng-content select=\"[confirm__btn_cancel]\"></ng-content>\r\n            </spx-button>\r\n            <spx-button #confirm (spxClick)=\"onConfirm()\" [spxFullWidth]=\"true\" [spxType]=\"'submit'\"\r\n                [spxSeverity]=\"severitySuccess\">\r\n                <ng-content select=\"[confirm__btn_confirm]\"></ng-content>\r\n            </spx-button>\r\n        </div>\r\n    </div>\r\n</div>", styles: [":host{position:absolute;z-index:var(--z-index--confirm);top:0;left:0;right:0;background-color:var(--color--backdrop)}.spx-confirm{background-color:var(--color--item--background);border-radius:3px;color:var(--ion-text-color, #000);position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:90%;max-width:960px}\n"] }]
+            args: [{ selector: 'spx-confirm', imports: [SpxButtonComponent, FaIconComponent], changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, template: "<div class=\"block spx-confirm h-full mt-12\">\r\n    <div class=\"bg-amber-400 flex gap-3 items-center px-3 py-1 rounded-t text-black dark:text-white\">\r\n        <div class=\"grow font-bold\">\r\n            <ng-content select=\"[confirm__title]\"></ng-content>\r\n        </div>\r\n        <spx-button (spxClick)=\"onCancel()\" [spxType]=\"'button'\" [spxSeverity]=\"severityInfo\"><fa-icon\r\n                [icon]=\"faTimes\"></fa-icon>\r\n        </spx-button>\r\n    </div>\r\n    <div class=\"flex flex-col gap-3 dark:bg-gray-700 bg-white p-3\">\r\n        <ng-content select=\"[confirm__content]\"></ng-content>\r\n        <div class=\"grid grid-cols-1 grid-rows-2 sm:grid-rows-1 sm:grid-cols-2 gap-3 grid-flow-row\">\r\n            <spx-button (spxClick)=\"onCancel()\" [spxFullWidth]=\"true\" [spxType]=\"'button'\"\r\n                [spxSeverity]=\"severityError\">\r\n                <ng-content select=\"[confirm__btn_cancel]\"></ng-content>\r\n            </spx-button>\r\n            <spx-button #confirm (spxClick)=\"onConfirm()\" [spxFullWidth]=\"true\" [spxType]=\"'submit'\"\r\n                [spxSeverity]=\"severitySuccess\">\r\n                <ng-content select=\"[confirm__btn_confirm]\"></ng-content>\r\n            </spx-button>\r\n        </div>\r\n    </div>\r\n</div>", styles: [":host{position:absolute;z-index:var(--z-index--confirm);top:0;left:0;right:0;background-color:var(--color--backdrop)}.spx-confirm{background-color:var(--color--item--background);border-radius:3px;color:var(--ion-text-color, #000);position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:90%;max-width:960px}\n"] }]
         }], ctorParameters: () => [] });
-class SPConfirmDisplayerComponent {
+class SpxConfirmDisplayerComponent {
     constructor(appStore) {
         this.appStore = appStore;
         this.confirms = signal([]);
         this.subscriptions = {};
     }
     ngOnInit() {
-        this.subscriptions.confirmState = this.appStore.pipe(select(spConfirmStateReducer.selectConfirms)).subscribe(confirms => {
+        this.subscriptions.confirmState = this.appStore.select(spxConfirmReducer$1.selectConfirms).subscribe(confirms => {
             if (confirms?.length === 0) {
                 this.confirms.set([]);
                 return;
@@ -66,10 +66,10 @@ class SPConfirmDisplayerComponent {
             id
         }));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SPConfirmDisplayerComponent, deps: [{ token: i1.Store }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: SPConfirmDisplayerComponent, isStandalone: true, selector: "spx-confirm-displayer", ngImport: i0, template: "@if (confirms().length > 0) {\r\n  <div class=\"bg-black/75 block relative h-full\" style=\"z-index: 1000\">\r\n    @for (confirm of confirms(); track confirm.id) {\r\n      <spx-confirm [id]=\"confirm.id\" (spxCancel)=\"onCancel($event)\"\r\n        (spxConfirm)=\"onConfirm($event)\">\r\n        <ng-container confirm__title>{{ confirm.title }}</ng-container>\r\n        <ng-container confirm__content>{{ confirm.content }}</ng-container>\r\n        <ng-container confirm__btn_cancel>{{confirm.noYesButton ? 'NO' : 'Cancel'}}</ng-container>\r\n        <ng-container confirm__btn_confirm>{{confirm.noYesButton ? 'YES' : 'OK'}}</ng-container>\r\n      </spx-confirm>\r\n    }\r\n  </div>\r\n}", styles: [""], dependencies: [{ kind: "component", type: SpxConfirmComponent, selector: "spx-confirm", inputs: ["id"], outputs: ["spxCancel", "spxConfirm"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SpxConfirmDisplayerComponent, deps: [{ token: i1.Store }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: SpxConfirmDisplayerComponent, isStandalone: true, selector: "spx-confirm-displayer", ngImport: i0, template: "@if (confirms().length > 0) {\r\n  <div class=\"bg-black/75 block relative h-full\" style=\"z-index: 1000\">\r\n    @for (confirm of confirms(); track confirm.id) {\r\n      <spx-confirm [id]=\"confirm.id\" (spxCancel)=\"onCancel($event)\"\r\n        (spxConfirm)=\"onConfirm($event)\">\r\n        <ng-container confirm__title>{{ confirm.title }}</ng-container>\r\n        <ng-container confirm__content>{{ confirm.content }}</ng-container>\r\n        <ng-container confirm__btn_cancel>{{confirm.noYesButton ? 'NO' : 'Cancel'}}</ng-container>\r\n        <ng-container confirm__btn_confirm>{{confirm.noYesButton ? 'YES' : 'OK'}}</ng-container>\r\n      </spx-confirm>\r\n    }\r\n  </div>\r\n}", styles: [""], dependencies: [{ kind: "component", type: SpxConfirmComponent, selector: "spx-confirm", inputs: ["id"], outputs: ["spxCancel", "spxConfirm"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SPConfirmDisplayerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SpxConfirmDisplayerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'spx-confirm-displayer', imports: [SpxConfirmComponent], changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, template: "@if (confirms().length > 0) {\r\n  <div class=\"bg-black/75 block relative h-full\" style=\"z-index: 1000\">\r\n    @for (confirm of confirms(); track confirm.id) {\r\n      <spx-confirm [id]=\"confirm.id\" (spxCancel)=\"onCancel($event)\"\r\n        (spxConfirm)=\"onConfirm($event)\">\r\n        <ng-container confirm__title>{{ confirm.title }}</ng-container>\r\n        <ng-container confirm__content>{{ confirm.content }}</ng-container>\r\n        <ng-container confirm__btn_cancel>{{confirm.noYesButton ? 'NO' : 'Cancel'}}</ng-container>\r\n        <ng-container confirm__btn_confirm>{{confirm.noYesButton ? 'YES' : 'OK'}}</ng-container>\r\n      </spx-confirm>\r\n    }\r\n  </div>\r\n}" }]
         }], ctorParameters: () => [{ type: i1.Store }] });
@@ -77,14 +77,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
 const answer = createAction('[Confirm] Answer', props());
 const reset = createAction('[Confirm] Reset', props());
 const show = createAction('[Confirm] Show', props());
+const answerConfirm = createAction('[Confirm] Answer Confirm', props());
 const all = union({
     reset,
     show,
+    answerConfirm,
 });
 var spxConfirm_actions = /*#__PURE__*/Object.freeze({
     __proto__: null,
     answer: answer,
+    answerConfirm: answerConfirm,
     reset: reset,
     show: show
 });
@@ -92,7 +95,7 @@ var spxConfirm_actions = /*#__PURE__*/Object.freeze({
 const initialState = {
     confirms: [],
 };
-var spConfirmStateReducer = createFeature({
+var spxConfirmReducer$1 = createFeature({
     name: 'spxConfirm',
     reducer: createReducer(initialState, on(reset, (state, {}) => ({
         ...state,
@@ -114,7 +117,7 @@ var spConfirmStateReducer = createFeature({
             ...state,
             confirms,
         };
-    }), on(answer, (state, { id }) => ({
+    }), on(answerConfirm, (state, { id }) => ({
         ...state,
         confirms: [
             ...state.confirms.filter((c) => c.id !== id),
@@ -124,22 +127,24 @@ var spConfirmStateReducer = createFeature({
 var spxConfirm_reducer = /*#__PURE__*/Object.freeze({
     __proto__: null,
-    default: spConfirmStateReducer
+    default: spxConfirmReducer$1
 });
 class SpxConfirmEffects {
     constructor(actions$, appStore) {
         this.actions$ = actions$;
         this.appStore = appStore;
-        this.afterAnswer$ = createEffect(() => this.actions$.pipe(ofType(answer), withLatestFrom(this.appStore.select(spConfirmStateReducer.selectConfirms)), mergeMap(([action, confirms]) => {
-            console.log(action, confirms);
+        this.onAnswer$ = createEffect(() => this.actions$.pipe(ofType(answer), withLatestFrom(this.appStore.select(spxConfirmReducer$1.selectConfirms)), mergeMap(([action, confirms]) => {
             if (action.confirm) {
                 confirms.find((c) => c.id === action.id)?.onOK?.();
             }
             if (action.cancel) {
                 confirms.find((c) => c.id === action.id)?.onCancel?.();
             }
-            return [spxSpinnerActions.hide({})];
+            return [
+                answerConfirm({ id: action.id }),
+                spxSpinnerActions.hide({})
+            ];
         })));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SpxConfirmEffects, deps: [{ token: i1$1.Actions }, { token: i1.Store }], target: i0.ɵɵFactoryTarget.Injectable }); }
@@ -158,5 +163,5 @@ var spxConfirm_effects = /*#__PURE__*/Object.freeze({
  * Generated bundle index. Do not edit.
  */
-export { SPConfirmDisplayerComponent, SpxConfirmComponent, spxConfirm_actions as spxConfirmActions, spxConfirm_effects as spxConfirmEffects, spxConfirm_reducer as spxConfirmReducer };
+export { SpxConfirmComponent, SpxConfirmDisplayerComponent, spxConfirm_actions as spxConfirmActions, spxConfirm_effects as spxConfirmEffects, spxConfirm_reducer as spxConfirmReducer };
 //# sourceMappingURL=softpak-components-spx-confirm.mjs.map

package/fesm2022/softpak-components-spx-confirm.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"softpak-components-spx-confirm.mjs","sources":["../../../../projects/softpak/components/spx-confirm/spx-confirm.component.ts","../../../../projects/softpak/components/spx-confirm/spx-confirm.component.html","../../../../projects/softpak/components/spx-confirm/spx-confirm-displayer/spx-confirm-displayer.component.ts","../../../../projects/softpak/components/spx-confirm/spx-confirm-displayer/spx-confirm-displayer.component.html","../../../../projects/softpak/components/spx-confirm/store/spx-confirm.actions.ts","../../../../projects/softpak/components/spx-confirm/store/spx-confirm.reducer.ts","../../../../projects/softpak/components/spx-confirm/store/spx-confirm.effects.ts","../../../../projects/softpak/components/spx-confirm/softpak-components-spx-confirm.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, input, output } from '@angular/core';\r\nimport { FaIconComponent } from '@fortawesome/angular-fontawesome';\r\nimport { faTimes } from '@fortawesome/free-solid-svg-icons';\r\nimport { SpxButtonComponent } from '@softpak/components/spx-button';\r\nimport { SpxSeverityEnum } from '@softpak/components/spx-helpers';\r\n\r\n@Component({\r\n selector: 'spx-confirm',\r\n templateUrl: './spx-confirm.component.html',\r\n styleUrls: ['./spx-confirm.component.scss'],\r\n imports: [SpxButtonComponent, FaIconComponent],\r\n changeDetection: ChangeDetectionStrategy.OnPush,\r\n standalone: true\r\n})\r\nexport class SpxConfirmComponent {\r\n id = input.required<string>();\r\n spxCancel = output<string>();\r\n spxConfirm = output<string>();\r\n faTimes = faTimes;\r\n severityError = SpxSeverityEnum.error;\r\n severityInfo = SpxSeverityEnum.info;\r\n severitySuccess = SpxSeverityEnum.success;\r\n\r\n constructor() { }\r\n\r\n onCancel() {\r\n this.spxCancel.emit(this.id());\r\n }\r\n\r\n onConfirm() {\r\n if(this.id()) {}\r\n this.spxConfirm.emit(this.id());\r\n }\r\n\r\n}\r\n","<div class=\"block spx-confirm h-full mt-12\">\r\n <div class=\"bg-amber-400 flex gap-3 items-center px-3 py-1 rounded-t text-black\">\r\n <div class=\"grow font-bold\">\r\n <ng-content select=\"[confirm__title]\"></ng-content>\r\n </div>\r\n <spx-button (spxClick)=\"onCancel()\" [spxType]=\"'button'\" [spxSeverity]=\"severityInfo\"><fa-icon\r\n [icon]=\"faTimes\"></fa-icon>\r\n </spx-button>\r\n </div>\r\n <div class=\"flex flex-col gap-3 bg-black p-3\">\r\n <ng-content select=\"[confirm__content]\"></ng-content>\r\n <div class=\"grid grid-cols-1 grid-rows-2 sm:grid-rows-1 sm:grid-cols-2 gap-3 grid-flow-row\">\r\n <spx-button (spxClick)=\"onCancel()\" [spxFullWidth]=\"true\" [spxType]=\"'button'\"\r\n [spxSeverity]=\"severityError\">\r\n <ng-content select=\"[confirm__btn_cancel]\"></ng-content>\r\n </spx-button>\r\n <spx-button #confirm (spxClick)=\"onConfirm()\" [spxFullWidth]=\"true\" [spxType]=\"'submit'\"\r\n [spxSeverity]=\"severitySuccess\">\r\n <ng-content select=\"[confirm__btn_confirm]\"></ng-content>\r\n </spx-button>\r\n </div>\r\n </div>\r\n</div>","import { ChangeDetectionStrategy, Component, OnDestroy, OnInit, signal } from '@angular/core';\r\nimport { Store, select } from '@ngrx/store';\r\nimport { Subscription } from 'rxjs';\r\nimport { SpxConfirmComponent } from '../spx-confirm.component';\r\nimport { spxConfirmActions, spxConfirmReducer } from '../public-api';\r\n\r\n@Component({\r\n selector: 'spx-confirm-displayer',\r\n templateUrl: './spx-confirm-displayer.component.html',\r\n styleUrls: ['./spx-confirm-displayer.component.scss'],\r\n imports: [SpxConfirmComponent],\r\n changeDetection: ChangeDetectionStrategy.OnPush,\r\n standalone: true\r\n})\r\nexport class SPConfirmDisplayerComponent implements OnInit, OnDestroy {\r\n confirms = signal<{\r\n content: string;\r\n id: string;\r\n title: string;\r\n cancelled?: boolean;\r\n confirmed?: boolean;\r\n noYesButton?: boolean;\r\n }[]>([]);\r\n\r\n private subscriptions: {\r\n confirmState?: Subscription;\r\n } = {};\r\n\r\n constructor(\r\n private readonly appStore: Store,\r\n ) { }\r\n\r\n ngOnInit() {\r\n this.subscriptions.confirmState = this.appStore.pipe(select(spxConfirmReducer.default.selectConfirms)).subscribe(confirms => {\r\n if (confirms?.length === 0) {\r\n this.confirms.set([]);\r\n return;\r\n }\r\n\r\n this.confirms.set(confirms);\r\n });\r\n }\r\n\r\n ngOnDestroy() {\r\n this.subscriptions?.confirmState?.unsubscribe();\r\n }\r\n\r\n onCancel(id: string) {\r\n this.appStore.dispatch(spxConfirmActions.answer({\r\n cancel: true,\r\n id\r\n }));\r\n }\r\n\r\n onConfirm(id: string) {\r\n this.appStore.dispatch(spxConfirmActions.answer({\r\n confirm: true,\r\n id\r\n }));\r\n }\r\n\r\n}\r\n","@if (confirms().length > 0) {\r\n <div class=\"bg-black/75 block relative h-full\" style=\"z-index: 1000\">\r\n @for (confirm of confirms(); track confirm.id) {\r\n <spx-confirm [id]=\"confirm.id\" (spxCancel)=\"onCancel($event)\"\r\n (spxConfirm)=\"onConfirm($event)\">\r\n <ng-container confirm__title>{{ confirm.title }}</ng-container>\r\n <ng-container confirm__content>{{ confirm.content }}</ng-container>\r\n <ng-container confirm__btn_cancel>{{confirm.noYesButton ? 'NO' : 'Cancel'}}</ng-container>\r\n <ng-container confirm__btn_confirm>{{confirm.noYesButton ? 'YES' : 'OK'}}</ng-container>\r\n </spx-confirm>\r\n }\r\n </div>\r\n}","import { createAction, props, union } from '@ngrx/store';\r\nimport { SpxConfirmI } from './spx-confirm.reducer';\r\n\r\nexport const answer = createAction('[Confirm] Answer', props<{\r\n cancel?: boolean;\r\n confirm?: boolean;\r\n id: string;\r\n}>());\r\nexport const reset = createAction('[Confirm] Reset', props<Record<string, unknown>>());\r\nexport const show = createAction('[Confirm] Show', props<SpxConfirmI>());\r\n\r\nconst all = union({\r\n reset,\r\n show,\r\n});\r\nexport type Actions = typeof all;\r\n","import * as actions from './spx-confirm.actions';\r\nimport { createFeature, createReducer, on } from '@ngrx/store';\r\n\r\nexport interface SpxConfirmI {\r\n content: string;\r\n id: string;\r\n title: string;\r\n noYesButton?: boolean;\r\n onOK?: () => void;\r\n onCancel?: () => void;\r\n}\r\n\r\nexport interface State {\r\n confirms: SpxConfirmI[];\r\n}\r\n\r\nconst initialState: State = {\r\n confirms: [],\r\n};\r\n\r\nexport default createFeature({\r\n name: 'spxConfirm',\r\n reducer: createReducer(\r\n initialState,\r\n on(\r\n actions.reset,\r\n (state: State, {}): State => ({\r\n ...state,\r\n })\r\n ),\r\n on(\r\n actions.show,\r\n (state: State, { content, id, title, noYesButton, onCancel, onOK }): State => {\r\n const confirms =\r\n state.confirms.filter((c) => c.id).length > 0\r\n ? state.confirms\r\n : [\r\n ...state.confirms,\r\n {\r\n content,\r\n id,\r\n title,\r\n noYesButton,\r\n onCancel,\r\n onOK,\r\n },\r\n ];\r\n return {\r\n ...state,\r\n confirms,\r\n };\r\n }\r\n ),\r\n on(\r\n actions.answer,\r\n (state: State, { id }): State => ({\r\n ...state,\r\n confirms: [\r\n ...state.confirms.filter((c) => c.id !== id),\r\n ],\r\n })\r\n )\r\n ),\r\n});\r\n","import { Actions, createEffect, ofType } from '@ngrx/effects';\r\nimport { Observable } from 'rxjs';\r\nimport { mergeMap, withLatestFrom } from 'rxjs/operators';\r\nimport { Injectable } from '@angular/core';\r\nimport * as actions from './spx-confirm.actions';\r\nimport { spxSpinnerActions } from '@softpak/components/spx-spinner';\r\nimport spConfirmStateReducer from './spx-confirm.reducer';\r\nimport { Store } from '@ngrx/store';\r\n\r\n@Injectable()\r\nexport class SpxConfirmEffects {\r\n afterAnswer$: Observable<any> = createEffect(() =>\r\n this.actions$.pipe(\r\n ofType(actions.answer),\r\n withLatestFrom(this.appStore.select(spConfirmStateReducer.selectConfirms)),\r\n mergeMap(([action, confirms]) => {\r\n console.log(action, confirms);\r\n if (action.confirm) {\r\n confirms.find((c) => c.id === action.id)?.onOK?.();\r\n }\r\n if (action.cancel) {\r\n confirms.find((c) => c.id === action.id)?.onCancel?.();\r\n }\r\n return [spxSpinnerActions.hide({})];\r\n })\r\n )\r\n );\r\n\r\n constructor(\r\n private readonly actions$: Actions,\r\n private readonly appStore: Store,\r\n ) {}\r\n}\r\n","/*\n Generated bundle index. Do not edit.\n /\n\nexport from './public-api';\n"],"names":["spxConfirmReducer.default","spxConfirmActions.answer","actions.reset","actions.show","actions.answer","i1","i2"],"mappings":"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"}
1	+ {"version":3,"file":"softpak-components-spx-confirm.mjs","sources":["../../../../projects/softpak/components/spx-confirm/spx-confirm.component.ts","../../../../projects/softpak/components/spx-confirm/spx-confirm.component.html","../../../../projects/softpak/components/spx-confirm/spx-confirm-displayer/spx-confirm-displayer.component.ts","../../../../projects/softpak/components/spx-confirm/spx-confirm-displayer/spx-confirm-displayer.component.html","../../../../projects/softpak/components/spx-confirm/store/spx-confirm.actions.ts","../../../../projects/softpak/components/spx-confirm/store/spx-confirm.reducer.ts","../../../../projects/softpak/components/spx-confirm/store/spx-confirm.effects.ts","../../../../projects/softpak/components/spx-confirm/softpak-components-spx-confirm.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, input, output } from '@angular/core';\r\nimport { FaIconComponent } from '@fortawesome/angular-fontawesome';\r\nimport { faTimes } from '@fortawesome/free-solid-svg-icons';\r\nimport { SpxButtonComponent } from '@softpak/components/spx-button';\r\nimport { SpxSeverityEnum } from '@softpak/components/spx-helpers';\r\n\r\n@Component({\r\n selector: 'spx-confirm',\r\n templateUrl: './spx-confirm.component.html',\r\n styleUrls: ['./spx-confirm.component.scss'],\r\n imports: [SpxButtonComponent, FaIconComponent],\r\n changeDetection: ChangeDetectionStrategy.OnPush,\r\n standalone: true\r\n})\r\nexport class SpxConfirmComponent {\r\n id = input.required<string>();\r\n spxCancel = output<string>();\r\n spxConfirm = output<string>();\r\n faTimes = faTimes;\r\n severityError = SpxSeverityEnum.error;\r\n severityInfo = SpxSeverityEnum.info;\r\n severitySuccess = SpxSeverityEnum.success;\r\n\r\n constructor() { }\r\n\r\n onCancel() {\r\n this.spxCancel.emit(this.id());\r\n }\r\n\r\n onConfirm() {\r\n if(this.id()) {}\r\n this.spxConfirm.emit(this.id());\r\n }\r\n\r\n}\r\n","<div class=\"block spx-confirm h-full mt-12\">\r\n <div class=\"bg-amber-400 flex gap-3 items-center px-3 py-1 rounded-t text-black dark:text-white\">\r\n <div class=\"grow font-bold\">\r\n <ng-content select=\"[confirm__title]\"></ng-content>\r\n </div>\r\n <spx-button (spxClick)=\"onCancel()\" [spxType]=\"'button'\" [spxSeverity]=\"severityInfo\"><fa-icon\r\n [icon]=\"faTimes\"></fa-icon>\r\n </spx-button>\r\n </div>\r\n <div class=\"flex flex-col gap-3 dark:bg-gray-700 bg-white p-3\">\r\n <ng-content select=\"[confirm__content]\"></ng-content>\r\n <div class=\"grid grid-cols-1 grid-rows-2 sm:grid-rows-1 sm:grid-cols-2 gap-3 grid-flow-row\">\r\n <spx-button (spxClick)=\"onCancel()\" [spxFullWidth]=\"true\" [spxType]=\"'button'\"\r\n [spxSeverity]=\"severityError\">\r\n <ng-content select=\"[confirm__btn_cancel]\"></ng-content>\r\n </spx-button>\r\n <spx-button #confirm (spxClick)=\"onConfirm()\" [spxFullWidth]=\"true\" [spxType]=\"'submit'\"\r\n [spxSeverity]=\"severitySuccess\">\r\n <ng-content select=\"[confirm__btn_confirm]\"></ng-content>\r\n </spx-button>\r\n </div>\r\n </div>\r\n</div>","import { ChangeDetectionStrategy, Component, OnDestroy, OnInit, signal } from '@angular/core';\r\nimport { Store } from '@ngrx/store';\r\nimport { Subscription } from 'rxjs';\r\nimport { SpxConfirmComponent } from '../spx-confirm.component';\r\nimport { spxConfirmActions, spxConfirmReducer } from '../public-api';\r\n\r\n@Component({\r\n selector: 'spx-confirm-displayer',\r\n templateUrl: './spx-confirm-displayer.component.html',\r\n styleUrls: ['./spx-confirm-displayer.component.scss'],\r\n imports: [SpxConfirmComponent],\r\n changeDetection: ChangeDetectionStrategy.OnPush,\r\n standalone: true\r\n})\r\nexport class SpxConfirmDisplayerComponent implements OnInit, OnDestroy {\r\n confirms = signal<{\r\n content: string;\r\n id: string;\r\n title: string;\r\n cancelled?: boolean;\r\n confirmed?: boolean;\r\n noYesButton?: boolean;\r\n }[]>([]);\r\n\r\n private subscriptions: {\r\n confirmState?: Subscription;\r\n } = {};\r\n\r\n constructor(\r\n private readonly appStore: Store,\r\n ) { }\r\n\r\n ngOnInit() {\r\n this.subscriptions.confirmState = this.appStore.select(spxConfirmReducer.default.selectConfirms).subscribe(confirms => {\r\n if (confirms?.length === 0) {\r\n this.confirms.set([]);\r\n return;\r\n }\r\n\r\n this.confirms.set(confirms);\r\n });\r\n }\r\n\r\n ngOnDestroy() {\r\n this.subscriptions?.confirmState?.unsubscribe();\r\n }\r\n\r\n onCancel(id: string) {\r\n this.appStore.dispatch(spxConfirmActions.answer({\r\n cancel: true,\r\n id\r\n }));\r\n }\r\n\r\n onConfirm(id: string) {\r\n this.appStore.dispatch(spxConfirmActions.answer({\r\n confirm: true,\r\n id\r\n }));\r\n }\r\n\r\n}\r\n","@if (confirms().length > 0) {\r\n <div class=\"bg-black/75 block relative h-full\" style=\"z-index: 1000\">\r\n @for (confirm of confirms(); track confirm.id) {\r\n <spx-confirm [id]=\"confirm.id\" (spxCancel)=\"onCancel($event)\"\r\n (spxConfirm)=\"onConfirm($event)\">\r\n <ng-container confirm__title>{{ confirm.title }}</ng-container>\r\n <ng-container confirm__content>{{ confirm.content }}</ng-container>\r\n <ng-container confirm__btn_cancel>{{confirm.noYesButton ? 'NO' : 'Cancel'}}</ng-container>\r\n <ng-container confirm__btn_confirm>{{confirm.noYesButton ? 'YES' : 'OK'}}</ng-container>\r\n </spx-confirm>\r\n }\r\n </div>\r\n}","import { createAction, props, union } from '@ngrx/store';\r\nimport { SpxConfirmI } from './spx-confirm.reducer';\r\n\r\nexport const answer = createAction('[Confirm] Answer', props<{\r\n cancel?: boolean;\r\n confirm?: boolean;\r\n id: string;\r\n}>());\r\nexport const reset = createAction('[Confirm] Reset', props<Record<string, unknown>>());\r\nexport const show = createAction('[Confirm] Show', props<SpxConfirmI>());\r\n\r\nexport const answerConfirm = createAction('[Confirm] Answer Confirm', props<{\r\n id: string;\r\n}>());\r\n\r\nconst all = union({\r\n reset,\r\n show,\r\n answerConfirm,\r\n});\r\nexport type Actions = typeof all;\r\n","import * as actions from './spx-confirm.actions';\r\nimport { createFeature, createReducer, on } from '@ngrx/store';\r\n\r\nexport interface SpxConfirmI {\r\n content: string;\r\n id: string;\r\n title: string;\r\n noYesButton?: boolean;\r\n onOK?: () => void;\r\n onCancel?: () => void;\r\n}\r\n\r\nexport interface State {\r\n confirms: SpxConfirmI[];\r\n}\r\n\r\nconst initialState: State = {\r\n confirms: [],\r\n};\r\n\r\nexport default createFeature({\r\n name: 'spxConfirm',\r\n reducer: createReducer(\r\n initialState,\r\n on(\r\n actions.reset,\r\n (state: State, {}): State => ({\r\n ...state,\r\n })\r\n ),\r\n on(\r\n actions.show,\r\n (state: State, { content, id, title, noYesButton, onCancel, onOK }): State => {\r\n const confirms =\r\n state.confirms.filter((c) => c.id).length > 0\r\n ? state.confirms\r\n : [\r\n ...state.confirms,\r\n {\r\n content,\r\n id,\r\n title,\r\n noYesButton,\r\n onCancel,\r\n onOK,\r\n },\r\n ];\r\n return {\r\n ...state,\r\n confirms,\r\n };\r\n }\r\n ),\r\n on(\r\n actions.answerConfirm,\r\n (state: State, { id }): State => ({\r\n ...state,\r\n confirms: [\r\n ...state.confirms.filter((c) => c.id !== id),\r\n ],\r\n })\r\n )\r\n ),\r\n});\r\n","import { Actions, createEffect, ofType } from '@ngrx/effects';\r\nimport { Observable } from 'rxjs';\r\nimport { mergeMap, withLatestFrom } from 'rxjs/operators';\r\nimport { Injectable } from '@angular/core';\r\nimport * as actions from './spx-confirm.actions';\r\nimport { spxSpinnerActions } from '@softpak/components/spx-spinner';\r\nimport { Store } from '@ngrx/store';\r\nimport spxConfirmReducer from './spx-confirm.reducer';\r\n\r\n@Injectable()\r\nexport class SpxConfirmEffects {\r\n onAnswer$: Observable<any> = createEffect(() =>\r\n this.actions$.pipe(\r\n ofType(actions.answer),\r\n withLatestFrom(this.appStore.select(spxConfirmReducer.selectConfirms)),\r\n mergeMap(([action, confirms]) => {\r\n\r\n if (action.confirm) {\r\n confirms.find((c) => c.id === action.id)?.onOK?.();\r\n }\r\n if (action.cancel) {\r\n confirms.find((c) => c.id === action.id)?.onCancel?.();\r\n }\r\n return [\r\n actions.answerConfirm({id: action.id}),\r\n spxSpinnerActions.hide({})\r\n ];\r\n })\r\n )\r\n );\r\n\r\n constructor(\r\n private readonly actions$: Actions,\r\n private readonly appStore: Store,\r\n ) {}\r\n}\r\n","/*\n Generated bundle index. Do not edit.\n /\n\nexport from './public-api';\n"],"names":["spxConfirmReducer.default","spxConfirmActions.answer","actions.reset","actions.show","actions.answerConfirm","actions.answer","spxConfirmReducer","i1","i2"],"mappings":"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"}

package/fesm2022/softpak-components-spx-form-section.mjs CHANGED Viewed

@@ -1,45 +1,20 @@
 import * as i0 from '@angular/core';
-import { Component, ChangeDetectionStrategy, Input } from '@angular/core';
+import { input, Component, ChangeDetectionStrategy } from '@angular/core';
 class SpxFormSectionComponent {
     constructor() {
-        this.spxShowTitle = true;
+        this.spxIndex = input();
+        this.spxIndexSecondary = input();
+        this.spxTitle = input();
+        this.spxShowTitle = input(true);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SpxFormSectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: SpxFormSectionComponent, isStandalone: true, selector: "spx-form-section", inputs: { spxIndex: "spxIndex", spxIndexSecondary: "spxIndexSecondary", spxTitle: "spxTitle", spxShowTitle: "spxShowTitle" }, ngImport: i0, template: `@if (this.spxShowTitle) {
-  <div class="spx-form-section__title mb-3 flex gap-3 items-center">
-    <div class="spx-form-section__title-index flex content-center text-center text-sm h-[30px] w-[30px] font-bold rounded">{{this.spxIndex}}@if (this.spxIndexSecondary) {
-      {{ this.spxIndexSecondary }}
-    }</div>
-    <div class="spx-form-section__content font-bold grow text-black dark:text-white">{{this.spxTitle}}</div>
-  </div>
-}
-<div class="flex flex-col gap-3">
-  <ng-content></ng-content>
-</div>`, isInline: true, styles: [":host{display:block}.spx-form-section__title-index{background-color:#000;display:inline-block;vertical-align:middle}.spx-form-section__title{color:var(--spx-form-section--color, #FFFFFF)}.spx-form-section__content{color:#000}@media (prefers-color-scheme: dark){.spx-form-section__title-index{background-color:var(--spx-form-section--color, #FFFFFF);color:#000}.spx-form-section__content{color:var(--spx-form-section--color, #FFFFFF)}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: SpxFormSectionComponent, isStandalone: true, selector: "spx-form-section", inputs: { spxIndex: { classPropertyName: "spxIndex", publicName: "spxIndex", isSignal: true, isRequired: false, transformFunction: null }, spxIndexSecondary: { classPropertyName: "spxIndexSecondary", publicName: "spxIndexSecondary", isSignal: true, isRequired: false, transformFunction: null }, spxTitle: { classPropertyName: "spxTitle", publicName: "spxTitle", isSignal: true, isRequired: false, transformFunction: null }, spxShowTitle: { classPropertyName: "spxShowTitle", publicName: "spxShowTitle", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (this.spxShowTitle()) {\r\n  <div class=\"spx-form-section__title mb-3 flex gap-3 items-center\">\r\n    <div class=\"spx-form-section__title-index flex content-center text-center text-sm h-[30px] w-[30px] font-bold rounded\">{{this.spxIndex()}}@if (this.spxIndexSecondary()) {\r\n      {{ this.spxIndexSecondary() }}\r\n    }</div>\r\n    <div class=\"spx-form-section__content font-bold grow text-black dark:text-white\">{{this.spxTitle()}}</div>\r\n  </div>\r\n}\r\n<div class=\"flex flex-col gap-3\">\r\n  <ng-content></ng-content>\r\n</div>", styles: [":host{display:block}.spx-form-section__title-index{background-color:#000;display:inline-block;vertical-align:middle}.spx-form-section__title{color:var(--spx-form-section--color, #FFFFFF)}.spx-form-section__content{color:#000}@media (prefers-color-scheme: dark){.spx-form-section__title-index{background-color:var(--spx-form-section--color, #FFFFFF);color:#000}.spx-form-section__content{color:var(--spx-form-section--color, #FFFFFF)}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SpxFormSectionComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'spx-form-section', imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: `@if (this.spxShowTitle) {
-  <div class="spx-form-section__title mb-3 flex gap-3 items-center">
-    <div class="spx-form-section__title-index flex content-center text-center text-sm h-[30px] w-[30px] font-bold rounded">{{this.spxIndex}}@if (this.spxIndexSecondary) {
-      {{ this.spxIndexSecondary }}
-    }</div>
-    <div class="spx-form-section__content font-bold grow text-black dark:text-white">{{this.spxTitle}}</div>
-  </div>
-}
-<div class="flex flex-col gap-3">
-  <ng-content></ng-content>
-</div>`, styles: [":host{display:block}.spx-form-section__title-index{background-color:#000;display:inline-block;vertical-align:middle}.spx-form-section__title{color:var(--spx-form-section--color, #FFFFFF)}.spx-form-section__content{color:#000}@media (prefers-color-scheme: dark){.spx-form-section__title-index{background-color:var(--spx-form-section--color, #FFFFFF);color:#000}.spx-form-section__content{color:var(--spx-form-section--color, #FFFFFF)}}\n"] }]
-        }], propDecorators: { spxIndex: [{
-                type: Input
-            }], spxIndexSecondary: [{
-                type: Input
-            }], spxTitle: [{
-                type: Input
-            }], spxShowTitle: [{
-                type: Input
-            }] } });
+            args: [{ selector: 'spx-form-section', imports: [], changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, template: "@if (this.spxShowTitle()) {\r\n  <div class=\"spx-form-section__title mb-3 flex gap-3 items-center\">\r\n    <div class=\"spx-form-section__title-index flex content-center text-center text-sm h-[30px] w-[30px] font-bold rounded\">{{this.spxIndex()}}@if (this.spxIndexSecondary()) {\r\n      {{ this.spxIndexSecondary() }}\r\n    }</div>\r\n    <div class=\"spx-form-section__content font-bold grow text-black dark:text-white\">{{this.spxTitle()}}</div>\r\n  </div>\r\n}\r\n<div class=\"flex flex-col gap-3\">\r\n  <ng-content></ng-content>\r\n</div>", styles: [":host{display:block}.spx-form-section__title-index{background-color:#000;display:inline-block;vertical-align:middle}.spx-form-section__title{color:var(--spx-form-section--color, #FFFFFF)}.spx-form-section__content{color:#000}@media (prefers-color-scheme: dark){.spx-form-section__title-index{background-color:var(--spx-form-section--color, #FFFFFF);color:#000}.spx-form-section__content{color:var(--spx-form-section--color, #FFFFFF)}}\n"] }]
+        }] });
 /**
  * Generated bundle index. Do not edit.

package/fesm2022/softpak-components-spx-form-section.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"softpak-components-spx-form-section.mjs","sources":["../../../../projects/softpak/components/spx-form-section/spx-form-section.component.ts","../../../../projects/softpak/components/spx-form-section/softpak-components-spx-form-section.ts"],"sourcesContent":["\r\nimport { ChangeDetectionStrategy, Component, ~~Input~~ } from '@angular/core';\r\n\r\n@Component({\r\n selector: 'spx-form-section',\r\n imports: [],\r\n changeDetection: ChangeDetectionStrategy.OnPush,\r\n ~~template~~: `@if (this.spxShowTitle) {\r\n <div class=\"spx-form-section__title mb-3 flex gap-3 items-center\">\r\n <div class=\"spx-form-section__title-index flex content-center text-center text-sm h-[30px] w-[30px] font-bold rounded\">{{this.spxIndex}}@if (this.spxIndexSecondary) {\r\n {{ this.spxIndexSecondary }}\r\n }</div>\r\n <div class=\"spx-form-section__content font-bold grow text-black dark:text-white\">{{this.spxTitle}}</div>\r\n </div>\r\n}\r\n<div class=\"flex flex-col gap-3\">\r\n <ng-content></ng-content>\r\n</div>`,\r\n styles: `\r\n :host {\r\n display: block;\r\n }\r\n \r\n .spx-form-section__title-index {\r\n background-color: #000000;\r\n display: inline-block;\r\n vertical-align: middle;\r\n }\r\n\r\n .spx-form-section__title {\r\n color: var(--spx-form-section--color, #FFFFFF);\r\n }\r\n\r\n .spx-form-section__content {\r\n color: #000000;\r\n }\r\n\r\n @media (prefers-color-scheme: dark) {\r\n .spx-form-section__title-index {\r\n background-color: var(--spx-form-section--color, #FFFFFF);\r\n color: #000000;\r\n }\r\n \r\n .spx-form-section__content {\r\n color: var(--spx-form-section--color, #FFFFFF);\r\n }\r\n}\r\n `\r\n})\r\nexport class SpxFormSectionComponent {\r\n @Input() spxIndex?: number;\r\n @Input() spxIndexSecondary?: number;\r\n @Input() spxTitle?: string;\r\n @Input() spxShowTitle = true;\r\n}\r\n","/*\n Generated bundle index. Do not edit.\n /\n\nexport from './public-api';\n"],"names":[],"mappings":";;;~~MAiDa~~,uBAAuB,CAAA;~~AA9CpC~~,IAAA,WAAA,GAAA;~~QAkDW~~,~~IAAY~~,CAAA,~~YAAA~~,GAAG,IAAI;~~AAC7B~~;8GALY,uBAAuB,EAAA,IAAA,EAAA,EAAA,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,~~EA1CtB~~,~~YAAA~~,EAAA,~~IAAA,EAAA,QAAA,EAAA,kBAAA,EAAA,~~MAAA,EAAA,~~EAAA,QAAA,EAAA,UAAA,EAAA,iBAAA,EAAA,mBAAA,EAAA,QAAA,EAAA,UAAA,EAAA,YAAA,EAAA,cAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EAAA,~~CAAA~~;;;;;;;;;;AAUP~~,~~MAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,MAAA,EAAA,CAAA,~~sbAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA;;~~2FAgCM~~,uBAAuB,EAAA,UAAA,EAAA,CAAA;~~kBA9CnC~~,SAAS;AACI,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,kBAAkB,WACnB,EAAE,EAAA,eAAA,~~EACM~~,uBAAuB,CAAC,MAAM,~~EACrC~~,~~QAAA~~,EAAA,~~CAAA;;;;;;;;;;AAUP~~,~~MAAA~~,~~CAAA~~,EAAA,MAAA,EAAA,CAAA,sbAAA,CAAA,EAAA~~;8BAiCI,QAAQ,EAAA,CAAA;sBAAhB;gBACQ,iBAAiB,EAAA,CAAA;sBAAzB;gBACQ,QAAQ,EAAA,CAAA;sBAAhB;gBACQ,YAAY,EAAA,CAAA;sBAApB~~;;;~~ACrDH~~;;AAEG;;;;"}
1	+ {"version":3,"file":"softpak-components-spx-form-section.mjs","sources":["../../../../projects/softpak/components/spx-form-section/spx-form-section.component.ts","../../../../projects/softpak/components/spx-form-section/spx-form-section.component.html","../../../../projects/softpak/components/spx-form-section/softpak-components-spx-form-section.ts"],"sourcesContent":["\r\nimport { ChangeDetectionStrategy, Component, input } from '@angular/core';\r\n\r\n@Component({\r\n selector: 'spx-form-section',\r\n imports: [],\r\n templateUrl: './spx-form-section.component.html',\r\n styleUrl: './spx-form-section.component.scss',\r\n changeDetection: ChangeDetectionStrategy.OnPush,\r\n standalone: true,\r\n})\r\nexport class SpxFormSectionComponent {\r\n readonly spxIndex = input<number>();\r\n readonly spxIndexSecondary = input<number>();\r\n readonly spxTitle = input<string>();\r\n readonly spxShowTitle = input<boolean>(true);\r\n}\r\n","@if (this.spxShowTitle()) {\r\n <div class=\"spx-form-section__title mb-3 flex gap-3 items-center\">\r\n <div class=\"spx-form-section__title-index flex content-center text-center text-sm h-[30px] w-[30px] font-bold rounded\">{{this.spxIndex()}}@if (this.spxIndexSecondary()) {\r\n {{ this.spxIndexSecondary() }}\r\n }</div>\r\n <div class=\"spx-form-section__content font-bold grow text-black dark:text-white\">{{this.spxTitle()}}</div>\r\n </div>\r\n}\r\n<div class=\"flex flex-col gap-3\">\r\n <ng-content></ng-content>\r\n</div>","/*\n Generated bundle index. Do not edit.\n /\n\nexport from './public-api';\n"],"names":[],"mappings":";;;MAWa,uBAAuB,CAAA;AARpC,IAAA,WAAA,GAAA;QASW,IAAQ,CAAA,QAAA,GAAG,KAAK,EAAU;QAC1B,IAAiB,CAAA,iBAAA,GAAG,KAAK,EAAU;QACnC,IAAQ,CAAA,QAAA,GAAG,KAAK,EAAU;AAC1B,QAAA,IAAA,CAAA,YAAY,GAAG,KAAK,CAAU,IAAI,CAAC;AAC7C;8GALY,uBAAuB,EAAA,IAAA,EAAA,EAAA,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,moBCXpC,uiBAUM,EAAA,MAAA,EAAA,CAAA,sbAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA;;2FDCO,uBAAuB,EAAA,UAAA,EAAA,CAAA;kBARnC,SAAS;AACI,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,kBAAkB,WACnB,EAAE,EAAA,eAAA,EAGM,uBAAuB,CAAC,MAAM,cACnC,IAAI,EAAA,QAAA,EAAA,uiBAAA,EAAA,MAAA,EAAA,CAAA,sbAAA,CAAA,EAAA;;;AETpB;;AAEG;;;;"}