@acorex/components 16.19.10 → 16.19.11

package/fesm2022/acorex-components.mjs

@@ -5664,7 +5664,8 @@ class AXToastMessageComponent {
     intervalSubscription;
     ngOnInit() {
         if (this.timeOut) {
-            this.intervalSubscription = interval(this.timeOut / 100).subscribe(() => {
+            const intervalDuration = this.timeOut / 100;
+            this.intervalSubscription = interval(intervalDuration).subscribe(() => {
                 this.toastWidth.update((prev) => prev - 1);
                 if (this.toastWidth() === 0) {
                     this.intervalSubscription.unsubscribe();
@@ -5705,11 +5706,11 @@ class AXToastMessageComponent {
         this.elRef.nativeElement.parentElement.removeChild(this.elRef.nativeElement);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: AXToastMessageComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: AXToastMessageComponent, isStandalone: false, selector: "ng-component", inputs: { title: "title", message: "message", timeOut: "timeOut", closeable: "closeable", type: "type" }, ngImport: i0, template: "@if (toastWidth()) {\n<div class=\"toast-container\">\n  @if (title) {\n  <header class=\"ax toast {{ style }}\">\n    <div><i class=\"{{ icon }}\"></i>&nbsp; {{ title }}</div>\n    @if (closeable) {\n    <div (click)=\"close()\" class=\"toast-close\">\n      <i class=\"far fa-times\"></i>\n    </div>\n    }\n  </header>\n  }\n  <div class=\"content ax toast {{ style }}\">\n    {{ message }}\n    @if (!title && closeable) {\n    <div (click)=\"close()\" class=\"toast-close\">\n      <i class=\"far fa-times\"></i>\n    </div>\n    }\n    <div class=\"toast-progress\" [style.animation-duration.ms]=\"timeOut\"></div>\n  </div>\n</div>\n\n}\n", styles: [".rtl .toast-progress{right:0;left:inherit!important}.toast-container{overflow:hidden;margin:.8rem 0;box-shadow:0 3px 6px #00000029,0 3px 6px #0000003b;animation:slide-in-bottom .3s cubic-bezier(.25,.46,.45,.94) both;-webkit-animation:slide-in-bottom .3s cubic-bezier(.25,.46,.45,.94) both;border-radius:var(--ax-size-border-radius)}.toast-container header{display:flex;justify-content:space-between;align-items:center;padding:.5rem .8rem;font-weight:500}.toast-container .content{padding:1rem;display:flex;align-items:center;justify-content:space-between}.toast-container .toast-close{cursor:pointer;font-size:1rem}.toast-container .toast-progress{position:absolute;background:#00000080;width:100%;bottom:0;left:0;height:6px;animation-duration:4s;animation-timing-function:linear;animation-name:progressBar}@keyframes progressBar{0%{width:100%}to{width:0%}}@keyframes slide-in-top{0%{transform:translateY(-1000px);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes slide-in-bottom{0%{transform:translateY(1000px);opacity:0}to{transform:translateY(0);opacity:1}}\n"], encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: AXToastMessageComponent, isStandalone: false, selector: "ng-component", inputs: { title: "title", message: "message", timeOut: "timeOut", closeable: "closeable", type: "type" }, ngImport: i0, template: "@if (toastWidth()) {\n<div class=\"toast-container\">\n  @if (title) {\n  <header class=\"ax toast {{ style }}\">\n    <div><i class=\"{{ icon }}\"></i>&nbsp; {{ title }}</div>\n    @if (closeable) {\n    <div (click)=\"close()\" class=\"toast-close\">\n      <i class=\"far fa-times\"></i>\n    </div>\n    }\n  </header>\n  }\n  <div class=\"content ax toast {{ style }}\">\n    {{ message }}\n    @if (!title && closeable) {\n    <div (click)=\"close()\" class=\"toast-close\">\n      <i class=\"far fa-times\"></i>\n    </div>\n    }\n    <div class=\"toast-progress\" [style.animation-duration.ms]=\"timeOut\"></div>\n  </div>\n</div>\n\n}\n", styles: [".rtl .toast-progress{right:0;left:inherit!important}.toast-container{overflow:hidden;margin:.8rem 0;box-shadow:0 3px 6px #00000029,0 3px 6px #0000003b;animation:slide-in-bottom .3s cubic-bezier(.25,.46,.45,.94) both;-webkit-animation:slide-in-bottom .3s cubic-bezier(.25,.46,.45,.94) both;border-radius:var(--ax-size-border-radius)}.toast-container header{display:flex;justify-content:space-between;align-items:center;padding:.5rem .8rem;font-weight:500}.toast-container .content{padding:1rem;display:flex;align-items:center;justify-content:space-between}.toast-container .toast-close{cursor:pointer;font-size:1rem}.toast-container .toast-progress{position:absolute;background:#00000080;width:100%;bottom:0;left:0;height:6px;animation-timing-function:linear;animation-name:progressBar}@keyframes progressBar{0%{width:100%}to{width:0%}}@keyframes slide-in-top{0%{transform:translateY(-1000px);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes slide-in-bottom{0%{transform:translateY(1000px);opacity:0}to{transform:translateY(0);opacity:1}}\n"], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: AXToastMessageComponent, decorators: [{
             type: Component,
-            args: [{ encapsulation: ViewEncapsulation.None, standalone: false, template: "@if (toastWidth()) {\n<div class=\"toast-container\">\n  @if (title) {\n  <header class=\"ax toast {{ style }}\">\n    <div><i class=\"{{ icon }}\"></i>&nbsp; {{ title }}</div>\n    @if (closeable) {\n    <div (click)=\"close()\" class=\"toast-close\">\n      <i class=\"far fa-times\"></i>\n    </div>\n    }\n  </header>\n  }\n  <div class=\"content ax toast {{ style }}\">\n    {{ message }}\n    @if (!title && closeable) {\n    <div (click)=\"close()\" class=\"toast-close\">\n      <i class=\"far fa-times\"></i>\n    </div>\n    }\n    <div class=\"toast-progress\" [style.animation-duration.ms]=\"timeOut\"></div>\n  </div>\n</div>\n\n}\n", styles: [".rtl .toast-progress{right:0;left:inherit!important}.toast-container{overflow:hidden;margin:.8rem 0;box-shadow:0 3px 6px #00000029,0 3px 6px #0000003b;animation:slide-in-bottom .3s cubic-bezier(.25,.46,.45,.94) both;-webkit-animation:slide-in-bottom .3s cubic-bezier(.25,.46,.45,.94) both;border-radius:var(--ax-size-border-radius)}.toast-container header{display:flex;justify-content:space-between;align-items:center;padding:.5rem .8rem;font-weight:500}.toast-container .content{padding:1rem;display:flex;align-items:center;justify-content:space-between}.toast-container .toast-close{cursor:pointer;font-size:1rem}.toast-container .toast-progress{position:absolute;background:#00000080;width:100%;bottom:0;left:0;height:6px;animation-duration:4s;animation-timing-function:linear;animation-name:progressBar}@keyframes progressBar{0%{width:100%}to{width:0%}}@keyframes slide-in-top{0%{transform:translateY(-1000px);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes slide-in-bottom{0%{transform:translateY(1000px);opacity:0}to{transform:translateY(0);opacity:1}}\n"] }]
+            args: [{ encapsulation: ViewEncapsulation.None, standalone: false, template: "@if (toastWidth()) {\n<div class=\"toast-container\">\n  @if (title) {\n  <header class=\"ax toast {{ style }}\">\n    <div><i class=\"{{ icon }}\"></i>&nbsp; {{ title }}</div>\n    @if (closeable) {\n    <div (click)=\"close()\" class=\"toast-close\">\n      <i class=\"far fa-times\"></i>\n    </div>\n    }\n  </header>\n  }\n  <div class=\"content ax toast {{ style }}\">\n    {{ message }}\n    @if (!title && closeable) {\n    <div (click)=\"close()\" class=\"toast-close\">\n      <i class=\"far fa-times\"></i>\n    </div>\n    }\n    <div class=\"toast-progress\" [style.animation-duration.ms]=\"timeOut\"></div>\n  </div>\n</div>\n\n}\n", styles: [".rtl .toast-progress{right:0;left:inherit!important}.toast-container{overflow:hidden;margin:.8rem 0;box-shadow:0 3px 6px #00000029,0 3px 6px #0000003b;animation:slide-in-bottom .3s cubic-bezier(.25,.46,.45,.94) both;-webkit-animation:slide-in-bottom .3s cubic-bezier(.25,.46,.45,.94) both;border-radius:var(--ax-size-border-radius)}.toast-container header{display:flex;justify-content:space-between;align-items:center;padding:.5rem .8rem;font-weight:500}.toast-container .content{padding:1rem;display:flex;align-items:center;justify-content:space-between}.toast-container .toast-close{cursor:pointer;font-size:1rem}.toast-container .toast-progress{position:absolute;background:#00000080;width:100%;bottom:0;left:0;height:6px;animation-timing-function:linear;animation-name:progressBar}@keyframes progressBar{0%{width:100%}to{width:0%}}@keyframes slide-in-top{0%{transform:translateY(-1000px);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes slide-in-bottom{0%{transform:translateY(1000px);opacity:0}to{transform:translateY(0);opacity:1}}\n"] }]
         }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { title: [{
                 type: Input
             }], message: [{