orbiq-neural-ui-kit 1.1.25 → 1.1.27

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"
@@ -13831,6 +13842,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
             }] } });
 
 class NeuralSettingsDialogComponent {
+    dialog;
+    viewContainerRef;
     open = model(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
     size = input('4xl', /* @ts-ignore */
@@ -13839,58 +13852,145 @@ class NeuralSettingsDialogComponent {
     ...(ngDevMode ? [{ debugName: "hasTitleSlot" }] : /* istanbul ignore next */ []));
     hasDescriptionSlot = input(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "hasDescriptionSlot" }] : /* istanbul ignore next */ []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: NeuralSettingsDialogComponent, deps: [], 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" }, ngImport: i0, template: `
-    <neural-dialog [(openModel)]="open" [size]="size()" [bare]="true">
-      <div class="flex h-[100dvh] min-h-0 w-screen flex-col overflow-hidden sm:h-[min(860px,calc(100vh-8rem))] sm:min-h-[560px] sm:w-auto sm:flex-row">
-        <h1 class="sr-only">
-          @if (hasTitleSlot()) {
-            <ng-content select="[title]"></ng-content>
-          } @else {
-            Settings
-          }
-        </h1>
-        <p class="sr-only">
-          @if (hasDescriptionSlot()) {
-            <ng-content select="[description]"></ng-content>
-          } @else {
-            Manage your settings across the tabs in this dialog.
-          }
-        </p>
-        <ng-content></ng-content>
+    dismissible = input(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dismissible" }] : /* istanbul ignore next */ []));
+    dialogTemplate;
+    dialogRef = null;
+    constructor(dialog, viewContainerRef) {
+        this.dialog = dialog;
+        this.viewContainerRef = viewContainerRef;
+        effect(() => {
+            const isOpen = this.open();
+            if (isOpen && !this.dialogRef && this.dialogTemplate) {
+                this.openDialog();
+            }
+            else if (!isOpen && this.dialogRef) {
+                this.dialogRef.close();
+                this.dialogRef = null;
+            }
+        });
+    }
+    openDialog() {
+        this.dialogRef = this.dialog.open(this.dialogTemplate, {
+            disableClose: !this.dismissible(),
+            backdropClass: 'bg-black-overlay-200',
+            panelClass: ['w-full', 'h-full', 'bg-transparent', 'shadow-none'],
+            hasBackdrop: true,
+            viewContainerRef: this.viewContainerRef,
+        });
+        this.dialogRef.closed.subscribe(() => {
+            this.dialogRef = null;
+            if (this.open()) {
+                this.open.set(false);
+            }
+        });
+    }
+    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',
+            sm: 'max-w-sm',
+            md: 'max-w-md',
+            lg: 'max-w-lg',
+            xl: 'max-w-xl',
+            '2xl': 'max-w-2xl',
+            '3xl': 'max-w-3xl',
+            '4xl': 'max-w-4xl',
+            '5xl': 'max-w-5xl',
+            '6xl': 'max-w-6xl',
+            '7xl': 'max-w-7xl',
+        };
+        return map[this.size()] || 'max-w-4xl';
+    }, /* @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 }, 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" (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"
+            [class]="sizeClass()"
+          >
+            <div class="flex h-[100dvh] min-h-0 w-screen flex-col overflow-hidden sm:h-[min(860px,calc(100vh-8rem))] sm:min-h-[560px] sm:w-auto sm:flex-row">
+              <h1 class="sr-only">
+                @if (hasTitleSlot()) {
+                  <ng-content select="[title]"></ng-content>
+                } @else {
+                  Settings
+                }
+              </h1>
+              <p class="sr-only">
+                @if (hasDescriptionSlot()) {
+                  <ng-content select="[description]"></ng-content>
+                } @else {
+                  Manage your settings across the tabs in this dialog.
+                }
+              </p>
+              <ng-content></ng-content>
+            </div>
+          </div>
+        </div>
       </div>
-    </neural-dialog>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: NeuralDialogComponent, selector: "neural-dialog", inputs: ["openModel", "title", "message", "icon", "size", "position", "paddingTop", "actions", "dismissible", "showCloseButton", "bare", "hasTitleSlot", "hasActionsSlot", "hasDefaultSlot"], outputs: ["openModelChange"] }] });
+    </ng-template>
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: DialogModule }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: NeuralSettingsDialogComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'neural-settings-dialog',
                     standalone: true,
-                    imports: [CommonModule, NeuralDialogComponent],
+                    imports: [CommonModule, DialogModule],
                     template: `
-    <neural-dialog [(openModel)]="open" [size]="size()" [bare]="true">
-      <div class="flex h-[100dvh] min-h-0 w-screen flex-col overflow-hidden sm:h-[min(860px,calc(100vh-8rem))] sm:min-h-[560px] sm:w-auto sm:flex-row">
-        <h1 class="sr-only">
-          @if (hasTitleSlot()) {
-            <ng-content select="[title]"></ng-content>
-          } @else {
-            Settings
-          }
-        </h1>
-        <p class="sr-only">
-          @if (hasDescriptionSlot()) {
-            <ng-content select="[description]"></ng-content>
-          } @else {
-            Manage your settings across the tabs in this dialog.
-          }
-        </p>
-        <ng-content></ng-content>
+    <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 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"
+            [class]="sizeClass()"
+          >
+            <div class="flex h-[100dvh] min-h-0 w-screen flex-col overflow-hidden sm:h-[min(860px,calc(100vh-8rem))] sm:min-h-[560px] sm:w-auto sm:flex-row">
+              <h1 class="sr-only">
+                @if (hasTitleSlot()) {
+                  <ng-content select="[title]"></ng-content>
+                } @else {
+                  Settings
+                }
+              </h1>
+              <p class="sr-only">
+                @if (hasDescriptionSlot()) {
+                  <ng-content select="[description]"></ng-content>
+                } @else {
+                  Manage your settings across the tabs in this dialog.
+                }
+              </p>
+              <ng-content></ng-content>
+            </div>
+          </div>
+        </div>
       </div>
-    </neural-dialog>
+    </ng-template>
   `
                 }]
-        }], 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 }] }] } });
+        }], 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']
+            }] } });
 class NeuralSettingsSidebarComponent {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: NeuralSettingsSidebarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.4", type: NeuralSettingsSidebarComponent, isStandalone: true, selector: "neural-settings-sidebar", ngImport: i0, template: `