orbiq-neural-ui-kit 1.1.26 → 1.1.28

package/fesm2022/orbiq-neural-ui-kit.mjs

@@ -10616,6 +10616,15 @@ class NeuralDialogComponent {
             this.dialogRef.close();
         }
     }
+    onContainerClick(event) {
+        const target = event.target;
+        // Close if the click is on the scroll container or the flex wrapper (not inside the dialog card)
+        if (target.classList.contains('dialog-scroll-container') || target.classList.contains('min-h-screen')) {
+            if (this.dismissible()) {
+                this.close();
+            }
+        }
+    }
     ngOnDestroy() {
         if (this.dialogRef) {
             this.dialogRef.close();
@@ -10737,6 +10746,7 @@ class NeuralDialogComponent {
     <ng-template #dialogTemplate>
       <div 
         class="fixed inset-0 z-50 overflow-y-auto dialog-scroll-container"
+        (click)="onContainerClick($event)"
       >
         <div
           class="flex min-h-screen flex-col items-center px-4 py-4 text-center"
@@ -10846,6 +10856,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
     <ng-template #dialogTemplate>
       <div 
         class="fixed inset-0 z-50 overflow-y-auto dialog-scroll-container"
+        (click)="onContainerClick($event)"
       >
         <div
           class="flex min-h-screen flex-col items-center px-4 py-4 text-center"
@@ -13841,6 +13852,8 @@ class NeuralSettingsDialogComponent {
     ...(ngDevMode ? [{ debugName: "hasTitleSlot" }] : /* istanbul ignore next */ []));
     hasDescriptionSlot = input(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "hasDescriptionSlot" }] : /* istanbul ignore next */ []));
+    dismissible = input(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dismissible" }] : /* istanbul ignore next */ []));
     dialogTemplate;
     dialogRef = null;
     constructor(dialog, viewContainerRef) {
@@ -13859,7 +13872,7 @@ class NeuralSettingsDialogComponent {
     }
     openDialog() {
         this.dialogRef = this.dialog.open(this.dialogTemplate, {
-            disableClose: false,
+            disableClose: !this.dismissible(),
             backdropClass: 'bg-black-overlay-200',
             panelClass: ['w-full', 'h-full', 'bg-transparent', 'shadow-none'],
             hasBackdrop: true,
@@ -13872,11 +13885,22 @@ class NeuralSettingsDialogComponent {
             }
         });
     }
-    ngOnDestroy() {
+    close() {
         if (this.dialogRef) {
             this.dialogRef.close();
         }
     }
+    onContainerClick(event) {
+        const target = event.target;
+        if (target.classList.contains('dialog-scroll-container') || target.classList.contains('min-h-screen')) {
+            if (this.dismissible()) {
+                this.close();
+            }
+        }
+    }
+    ngOnDestroy() {
+        this.close();
+    }
     sizeClass = computed(() => {
         const map = {
             xs: 'max-w-xs',
@@ -13895,9 +13919,9 @@ class NeuralSettingsDialogComponent {
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "sizeClass" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: NeuralSettingsDialogComponent, deps: [{ token: i1$3.Dialog }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: NeuralSettingsDialogComponent, isStandalone: true, selector: "neural-settings-dialog", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, hasTitleSlot: { classPropertyName: "hasTitleSlot", publicName: "hasTitleSlot", isSignal: true, isRequired: false, transformFunction: null }, hasDescriptionSlot: { classPropertyName: "hasDescriptionSlot", publicName: "hasDescriptionSlot", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange" }, viewQueries: [{ propertyName: "dialogTemplate", first: true, predicate: ["dialogTemplate"], descendants: true }], ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: NeuralSettingsDialogComponent, isStandalone: true, selector: "neural-settings-dialog", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, hasTitleSlot: { classPropertyName: "hasTitleSlot", publicName: "hasTitleSlot", isSignal: true, isRequired: false, transformFunction: null }, hasDescriptionSlot: { classPropertyName: "hasDescriptionSlot", publicName: "hasDescriptionSlot", isSignal: true, isRequired: false, transformFunction: null }, dismissible: { classPropertyName: "dismissible", publicName: "dismissible", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange" }, viewQueries: [{ propertyName: "dialogTemplate", first: true, predicate: ["dialogTemplate"], descendants: true }], ngImport: i0, template: `
     <ng-template #dialogTemplate>
-      <div class="fixed inset-0 z-50 overflow-y-auto dialog-scroll-container">
+      <div class="fixed inset-0 z-50 overflow-y-auto dialog-scroll-container" (click)="onContainerClick($event)">
         <div class="flex min-h-screen flex-col items-center justify-center px-4 py-4 text-center">
           <div
             class="my-8 inline-block w-full transform overflow-hidden rounded-7 bg-surface-elevation-1 text-start align-middle shadow-xl dialog-content focus-visible:outline-none"
@@ -13934,7 +13958,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
                     imports: [CommonModule, DialogModule],
                     template: `
     <ng-template #dialogTemplate>
-      <div class="fixed inset-0 z-50 overflow-y-auto dialog-scroll-container">
+      <div class="fixed inset-0 z-50 overflow-y-auto dialog-scroll-container" (click)="onContainerClick($event)">
         <div class="flex min-h-screen flex-col items-center justify-center px-4 py-4 text-center">
           <div
             class="my-8 inline-block w-full transform overflow-hidden rounded-7 bg-surface-elevation-1 text-start align-middle shadow-xl dialog-content focus-visible:outline-none"
@@ -13963,7 +13987,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
     </ng-template>
   `
                 }]
-        }], ctorParameters: () => [{ type: i1$3.Dialog }, { type: i0.ViewContainerRef }], propDecorators: { open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], hasTitleSlot: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasTitleSlot", required: false }] }], hasDescriptionSlot: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasDescriptionSlot", required: false }] }], dialogTemplate: [{
+        }], ctorParameters: () => [{ type: i1$3.Dialog }, { type: i0.ViewContainerRef }], propDecorators: { open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], hasTitleSlot: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasTitleSlot", required: false }] }], hasDescriptionSlot: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasDescriptionSlot", required: false }] }], dismissible: [{ type: i0.Input, args: [{ isSignal: true, alias: "dismissible", required: false }] }], dialogTemplate: [{
                 type: ViewChild,
                 args: ['dialogTemplate']
             }] } });