@ngx-smz/ui-kit 21.9.0-next.13 → 21.9.0-next.14

package/fesm2022/ngx-smz-ui-kit.mjs

@@ -2528,11 +2528,28 @@ class SmzToastContainerComponent {
         const key = this.key();
         return this.service.messages().filter((message) => (key ? message.key === key : !message.key));
     }, ...(ngDevMode ? [{ debugName: "visibleMessages" }] : []));
+    layer = viewChild('layer', ...(ngDevMode ? [{ debugName: "layer" }] : []));
     constructor() {
         effect(() => {
             for (const message of this.visibleMessages())
                 this.schedule(message);
         });
+        // Abre a camada quando ha mensagens (reabrindo a cada mudanca para ficar acima de overlays abertos depois) e fecha quando nao ha.
+        effect(() => {
+            const count = this.visibleMessages().length;
+            const element = this.layer()?.nativeElement;
+            if (!element || typeof element.showPopover !== 'function')
+                return;
+            try {
+                if (element.matches(':popover-open'))
+                    element.hidePopover?.();
+                if (count > 0)
+                    element.showPopover();
+            }
+            catch {
+                /* sem suporte: segue com z-index */
+            }
+        });
         inject(DestroyRef).onDestroy(() => this.timers.forEach((timer) => clearTimeout(timer.handle)));
     }
     toneClasses(message) {
@@ -2572,7 +2589,9 @@ class SmzToastContainerComponent {
         this.timers.delete(message.id);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: SmzToastContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: SmzToastContainerComponent, isStandalone: true, selector: "ui-toast", inputs: { position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, key: { classPropertyName: "key", publicName: "key", isSignal: true, isRequired: false, transformFunction: null }, life: { classPropertyName: "life", publicName: "life", isSignal: true, isRequired: false, transformFunction: null }, style: { classPropertyName: "style", publicName: "style", isSignal: true, isRequired: false, transformFunction: null }, styleClass: { classPropertyName: "styleClass", publicName: "styleClass", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: SmzToastContainerComponent, isStandalone: true, selector: "ui-toast", inputs: { position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, key: { classPropertyName: "key", publicName: "key", isSignal: true, isRequired: false, transformFunction: null }, life: { classPropertyName: "life", publicName: "life", isSignal: true, isRequired: false, transformFunction: null }, style: { classPropertyName: "style", publicName: "style", isSignal: true, isRequired: false, transformFunction: null }, styleClass: { classPropertyName: "styleClass", publicName: "styleClass", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "layer", first: true, predicate: ["layer"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    <!-- Camada na top layer (Popover API): overlays do CDK (drawer/dialog) ficam la e z-index nao os supera. -->
+    <div #layer popover="manual" class="pointer-events-none fixed inset-0 m-0 h-full w-full overflow-visible border-0 bg-transparent p-0">
     <div
       class="pointer-events-none fixed z-[2000] flex w-80 max-w-[95vw] flex-col gap-2"
       [class]="positionClasses()"
@@ -2615,6 +2634,7 @@ class SmzToastContainerComponent {
         </div>
       }
     </div>
+    </div>
   `, isInline: true, dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: SmzToastContainerComponent, decorators: [{
@@ -2624,6 +2644,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImpor
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     imports: [NgClass, NgStyle],
                     template: `
+    <!-- Camada na top layer (Popover API): overlays do CDK (drawer/dialog) ficam la e z-index nao os supera. -->
+    <div #layer popover="manual" class="pointer-events-none fixed inset-0 m-0 h-full w-full overflow-visible border-0 bg-transparent p-0">
     <div
       class="pointer-events-none fixed z-[2000] flex w-80 max-w-[95vw] flex-col gap-2"
       [class]="positionClasses()"
@@ -2666,9 +2688,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImpor
         </div>
       }
     </div>
+    </div>
   `,
                 }]
-        }], ctorParameters: () => [], propDecorators: { position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], key: [{ type: i0.Input, args: [{ isSignal: true, alias: "key", required: false }] }], life: [{ type: i0.Input, args: [{ isSignal: true, alias: "life", required: false }] }], style: [{ type: i0.Input, args: [{ isSignal: true, alias: "style", required: false }] }], styleClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "styleClass", required: false }] }] } });
+        }], ctorParameters: () => [], propDecorators: { position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], key: [{ type: i0.Input, args: [{ isSignal: true, alias: "key", required: false }] }], life: [{ type: i0.Input, args: [{ isSignal: true, alias: "life", required: false }] }], style: [{ type: i0.Input, args: [{ isSignal: true, alias: "style", required: false }] }], styleClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "styleClass", required: false }] }], layer: [{ type: i0.ViewChild, args: ['layer', { isSignal: true }] }] } });
 
 /* eslint-disable max-len -- classes Tailwind nos templates */
 const POSITIONS$1 = [