@ng-zen/cli 21.1.1 → 21.2.0

package/schematics/ui/files/dialog/dialog.stories.ts

@@ -0,0 +1,105 @@
+import { signal } from '@angular/core';
+import { argsToTemplate, Meta, moduleMetadata, StoryObj } from '@storybook/angular';
+
+import { ZenButton } from '../button';
+import { ZenDialog } from './dialog';
+
+type DialogSize = 'sm' | 'md' | 'lg' | 'xl' | 'full';
+
+type Story = StoryObj<ZenDialog>;
+
+const meta = {
+  title: 'UI/Dialog/Dialog',
+  component: ZenDialog,
+  tags: ['autodocs'],
+  decorators: [
+    moduleMetadata({
+      imports: [ZenButton, ZenDialog],
+    }),
+  ],
+  argTypes: {
+    size: {
+      name: 'size',
+      control: 'select',
+      options: ['sm', 'md', 'lg', 'xl', 'full'] satisfies DialogSize[],
+      table: {
+        category: 'inputs',
+        type: { summary: 'string' },
+        defaultValue: { summary: 'md' satisfies DialogSize },
+      },
+    },
+    header: { control: 'text', table: { category: 'inputs' } },
+    closable: { control: 'boolean', table: { category: 'inputs', defaultValue: { summary: 'true' } } },
+    backdrop: { control: 'boolean', table: { category: 'inputs', defaultValue: { summary: 'true' } } },
+    closeOnEscape: { control: 'boolean', table: { category: 'inputs', defaultValue: { summary: 'true' } } },
+    open: { control: 'boolean', table: { readonly: false, category: 'models' } },
+  },
+  args: {
+    size: 'md',
+    header: 'Dialog Title',
+    closable: true,
+    backdrop: true,
+    closeOnEscape: true,
+    open: false,
+  },
+} satisfies Meta<ZenDialog>;
+
+export default meta;
+
+export const Default: Story = {
+  render: ({ open, ...args }) => {
+    const mutatedArgs = { ...args, open: signal(open) };
+    return {
+      props: { ...mutatedArgs },
+      template: `
+      <button zen-btn (click)="open.set(true)">Open Dialog</button>
+
+      <dialog zen-dialog [(open)]="open" ${argsToTemplate(args)}>
+        <p>This is the dialog content. You can put any content here.</p>
+        <button zen-btn (click)="open.set(false)">Close</button>
+      </dialog>
+    `,
+    };
+  },
+};
+
+export const Sizes: Story = {
+  render: () => ({
+    props: {
+      openSm: signal(false),
+      openMd: signal(false),
+      openLg: signal(false),
+      openXl: signal(false),
+      openFull: signal(false),
+    },
+    template: `
+      <div style="display: flex; gap: 0.5rem; flex-wrap: wrap;">
+        <button zen-btn (click)="openSm.set(true)">Small</button>
+        <button zen-btn (click)="openMd.set(true)">Medium</button>
+        <button zen-btn (click)="openLg.set(true)">Large</button>
+        <button zen-btn (click)="openXl.set(true)">Extra Large</button>
+        <button zen-btn (click)="openFull.set(true)">Full Screen</button>
+      </div>
+
+      <dialog zen-dialog [(open)]="openSm" header="Small Dialog" size="sm">
+        <p>Small dialog content</p>
+      </dialog>
+
+      <dialog zen-dialog [(open)]="openMd" header="Medium Dialog" size="md">
+        <p>Medium dialog content</p>
+      </dialog>
+
+      <dialog zen-dialog [(open)]="openLg" header="Large Dialog" size="lg">
+        <p>Large dialog content with more space for complex layouts.</p>
+      </dialog>
+
+      <dialog zen-dialog [(open)]="openXl" header="Extra Large Dialog" size="xl">
+        <p>Extra large dialog content for data tables, forms, etc.</p>
+      </dialog>
+
+      <dialog zen-dialog [(open)]="openFull" header="Full Screen Dialog" size="full">
+        <p>Full screen dialog content</p>
+      </dialog>
+    `,
+  }),
+};

package/schematics/ui/files/dialog/dialog.ts

@@ -0,0 +1,143 @@
+import { ChangeDetectionStrategy, Component, effect, ElementRef, inject, input, model, untracked } from '@angular/core';
+import { Cancel01Icon } from '@hugeicons/core-free-icons';
+
+import { ZenIcon } from '../icon';
+
+type DialogSize = 'sm' | 'md' | 'lg' | 'xl' | 'full';
+
+/**
+ * ZenDialog is a reusable dialog component built on the native HTML `<dialog>` element.
+ * It provides a modal dialog with customizable header, size, and content.
+ *
+ * @example
+ * ```html
+ * <dialog zen-dialog [(open)]="isOpen" header="Dialog Title" size="md">
+ *   <p>Dialog content</p>
+ * </dialog>
+ * ```
+ *
+ * ### CSS Custom Properties
+ *
+ * You can customize the component using CSS custom properties:
+ * ```css
+ * :root {
+ *   --zen-dialog-padding: 1rem;
+ *   --zen-dialog-bg: white;
+ *   --zen-dialog-border-radius: 8px;
+ *   --zen-dialog-shadow: 0 4px 24px rgb(0 0 0 / 20%);
+ *   --zen-dialog-max-height: 90vh;
+ *   --zen-dialog-max-width: 90vw;
+ *   --zen-dialog-backdrop-bg: rgba(0, 0, 0, 0.5);
+ * }
+ * ```
+ *
+ * @author Konrad Stępień
+ * @license {@link https://github.com/kstepien3/ng-zen/blob/master/LICENSE|BSD-2-Clause}
+ * @see [GitHub](https://github.com/kstepien3/ng-zen)
+ * @see [MDN Dialog Element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog)
+ */
+@Component({
+  // eslint-disable-next-line @angular-eslint/component-selector
+  selector: 'dialog[zen-dialog]',
+  template: `
+    @if (header()) {
+      <header class="zen-dialog-header">
+        <h2>{{ header() }}</h2>
+        @if (closable()) {
+          <button (click)="onClose()" aria-label="Close dialog" class="zen-dialog-close" type="button">
+            <zen-icon [icon]="closeIcon" [size]="20" />
+          </button>
+        }
+      </header>
+    }
+    <div class="zen-dialog-content">
+      <ng-content />
+    </div>
+  `,
+  styleUrl: './dialog.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [ZenIcon],
+  host: {
+    '[attr.aria-label]': 'header()',
+    '[attr.data-size]': 'size()',
+    '(close)': 'onClose()',
+    '(cancel)': 'onCancel($event)',
+    '(click)': 'onDialogClick($event)',
+  },
+})
+export class ZenDialog {
+  /**
+   * Controls the open state of the dialog.
+   * Supports two-way binding via `[(open)]` syntax.
+   * When set to `true`, calls `showModal()` on the native dialog element.
+   * When set to `false`, calls `close()` on the native dialog element.
+   */
+  readonly open = model<boolean>(false);
+
+  /**
+   * Header title displayed at the top of the dialog.
+   * Also used as the `aria-label` for accessibility.
+   */
+  readonly header = input<string>('');
+
+  /**
+   * Size variant of the dialog.
+   * Affects the width of the dialog via the `data-size` attribute.
+   */
+  readonly size = input<DialogSize>('md');
+
+  /**
+   * Whether to show the close button (X) in the header.
+   */
+  readonly closable = input(true);
+
+  /**
+   * Whether clicking the backdrop closes the dialog.
+   * This is a native dialog feature.
+   */
+  readonly backdrop = input(true);
+
+  /**
+   * Whether pressing the Escape key closes the dialog.
+   * This is a native dialog feature.
+   */
+  readonly closeOnEscape = input(true);
+
+  protected readonly closeIcon = Cancel01Icon;
+
+  private readonly elementRef = inject(ElementRef<HTMLDialogElement>);
+
+  constructor() {
+    effect(() => {
+      const isOpen = this.open();
+      const element = this.elementRef.nativeElement;
+
+      untracked(() => {
+        if (isOpen) {
+          element.showModal();
+        } else if (element.open) {
+          element.close();
+        }
+      });
+    });
+  }
+
+  /** Close on backdrop click */
+  protected onDialogClick(event: MouseEvent): void {
+    if (!this.backdrop()) return;
+
+    if ((event.target as HTMLElement).tagName === 'DIALOG') {
+      this.onClose();
+    }
+  }
+
+  protected onCancel(event: Event): void {
+    if (!this.closeOnEscape()) {
+      event.preventDefault();
+    }
+  }
+
+  protected onClose(): void {
+    this.open.set(false);
+  }
+}

package/schematics/ui/files/dialog/index.ts

@@ -0,0 +1,3 @@
+export { ZenDialog } from './dialog';
+export type { DialogConfig, DialogRef } from './dialog.service';
+export { DIALOG_REF, ZenDialogService } from './dialog.service';

package/schematics/ui/schema.js.map

@@ -1 +1 @@
-{"version":3,"file":"schema.js","sourceRoot":"","sources":["../../../../../src/schematics/ui/schema.ts"],"names":[],"mappings":"","sourcesContent":["import { GeneratorSchemaBase } from '../../types';\n\nexport type UiType =\n  | 'alert'\n  | 'avatar'\n  | 'button'\n  | 'checkbox'\n  | 'divider'\n  | 'form-control'\n  | 'icon'\n  | 'input'\n  | 'popover'\n  | 'radio'\n  | 'skeleton'\n  | 'switch'\n  | 'textarea';\n\nexport interface Schema extends GeneratorSchemaBase {\n  ui: UiType[];\n}\n"]}
+{"version":3,"file":"schema.js","sourceRoot":"","sources":["../../../../../src/schematics/ui/schema.ts"],"names":[],"mappings":"","sourcesContent":["import { GeneratorSchemaBase } from '../../types';\n\nexport type UiType =\n  | 'alert'\n  | 'avatar'\n  | 'button'\n  | 'checkbox'\n  | 'dialog'\n  | 'divider'\n  | 'form-control'\n  | 'icon'\n  | 'input'\n  | 'popover'\n  | 'radio'\n  | 'skeleton'\n  | 'switch'\n  | 'textarea';\n\nexport interface Schema extends GeneratorSchemaBase {\n  ui: UiType[];\n}\n"]}

package/schematics/ui/schema.json

@@ -41,6 +41,7 @@
           "avatar",
           "button",
           "checkbox",
+          "dialog",
           "divider",
           "form-control",
           "icon",

package/schematics/ui/schema.ts

@@ -5,6 +5,7 @@ export type UiType =
   | 'avatar'
   | 'button'
   | 'checkbox'
+  | 'dialog'
   | 'divider'
   | 'form-control'
   | 'icon'