@acorex/components 16.19.10 → 16.19.12

package/fesm2022/acorex-components.mjs

@@ -6,7 +6,7 @@ import * as i1 from '@angular/cdk/overlay';
 import { OverlayContainer, Overlay, OverlayModule } from '@angular/cdk/overlay';
 import * as i1$3 from '@angular/cdk/portal';
 import { TemplatePortal, ComponentPortal, CdkPortalOutlet, PortalModule } from '@angular/cdk/portal';
-import { merge, Subject, Observable, debounceTime as debounceTime$1, takeUntil, interval } from 'rxjs';
+import { merge, Subject, Observable, debounceTime as debounceTime$1, takeUntil } from 'rxjs';
 import * as i2 from '@angular/cdk/bidi';
 import * as i1$1 from '@angular/common';
 import { DOCUMENT, CommonModule } from '@angular/common';
@@ -5653,6 +5653,7 @@ class AXToastMessageComponent {
     constructor(elRef) {
         this.elRef = elRef;
     }
+    progressBar;
     title = '';
     message;
     timeOut = 6000;
@@ -5662,16 +5663,24 @@ class AXToastMessageComponent {
     icon = '';
     toastWidth = signal(100);
     intervalSubscription;
-    ngOnInit() {
-        if (this.timeOut) {
-            this.intervalSubscription = interval(this.timeOut / 100).subscribe(() => {
-                this.toastWidth.update((prev) => prev - 1);
-                if (this.toastWidth() === 0) {
-                    this.intervalSubscription.unsubscribe();
-                    this.close();
-                }
+    ngAfterViewInit() {
+        if (this.progressBar) {
+            this.progressBar.nativeElement.addEventListener('animationend', () => {
+                this.close();
             });
         }
+    }
+    ngOnInit() {
+        // if (this.timeOut) {
+        //   const intervalDuration = this.timeOut / 100;
+        //   this.intervalSubscription = interval(intervalDuration).subscribe(() => {
+        //     this.toastWidth.update((prev) => prev - 1);
+        //     if (this.toastWidth() === 0) {
+        //       this.intervalSubscription.unsubscribe();
+        //       this.close();
+        //     }
+        //   });
+        // }
         switch (this.type) {
             case 'success':
                 this.style = 'success';
@@ -5705,12 +5714,15 @@ 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" }, viewQueries: [{ propertyName: "progressBar", first: true, predicate: ["progressBar"], descendants: true }], 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\n      #progressBar\n      class=\"toast-progress\"\n      [style.animation-duration.ms]=\"timeOut\"\n    ></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"] }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { title: [{
+            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\n      #progressBar\n      class=\"toast-progress\"\n      [style.animation-duration.ms]=\"timeOut\"\n    ></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: { progressBar: [{
+                type: ViewChild,
+                args: ['progressBar', { static: false }]
+            }], title: [{
                 type: Input
             }], message: [{
                 type: Input