@nuvia-ui/components 4.0.1

package/src/ds-dialog/ds-dialog.js

@@ -0,0 +1,466 @@
+import { LitElement, html, css } from 'lit';
+import '../ds-icon-button/ds-icon-button.js';
+import '../ds-icon/ds-icon.js';
+
+/**
+ * Dialog component for the Design System
+ * 
+ * @element ds-dialog
+ * 
+ * @prop {boolean} open - Whether the dialog is open
+ * @prop {string} heading - The title of the dialog
+ * @prop {boolean} preventClose - If true, clicking backdrop or Esc won't close it
+ * @prop {string} size - 'sm' | 'md' | 'lg' | 'fullscreen' (default: 'md')
+ * 
+ * @slot header - Content for the header (overrides default title/close)
+ * @slot body - Main content area
+ * @slot footer - Footer area (usually for ds-action-bar)
+ * @slot - Default slot, rendering into the body area
+ * 
+ * @event ds-close - Fired when the dialog is requested to close
+ * @event ds-open - Fired when the dialog opens
+ */
+export class DsDialog extends LitElement {
+  static properties = {
+    open: { type: Boolean, reflect: true },
+    heading: { type: String },
+    preventClose: { type: Boolean, attribute: 'prevent-close' },
+    size: { type: String, reflect: true },
+    modal: { type: Boolean, reflect: true },
+    position: { type: String, reflect: true }
+  };
+
+  static styles = css`
+    :host {
+      display: contents;
+    }
+
+    /* Native Dialog Reset & Base Styles */
+    dialog {
+      padding: 0;
+      border: none;
+      border-radius: var(--ds-radius-container, 0px);
+      background: var(--ds-color-bg-surface, #ffffff);
+      color: var(--ds-color-text-default);
+      
+      /* Tokens */
+      box-shadow: var(--ds-elevation-floating, 0 2px 12px 0 #e6e2dc);
+      z-index: var(--ds-zindex-modal, 900);
+      
+      box-sizing: border-box;
+      
+      /* Flex Column Layout for Sticky Header/Footer */
+      display: flex;
+      flex-direction: column;
+      
+      /* Height Best Practice:
+         Use fit-content so it only takes what it needs, 
+         up to the max-height constraint.
+      */
+      height: fit-content;
+      max-height: calc(100vh - 48px); /* Safety margin */
+      max-width: 100vw;
+      
+      /* Centering via native behavior */
+      margin: auto; 
+    }
+
+    /* 
+     * NON-MODAL (Floating Window) BEHAVIOR 
+     * Ensure it stays fixed on screen and doesn't block clicks outside.
+     */
+    dialog:not(.is-modal) {
+      position: fixed;
+      pointer-events: none; /* Let clicks pass through the "glass" */
+    }
+
+    /* POSITIONS for Non-Modal */
+    /* Center (Default) */
+    :host([position="center"]) dialog:not(.is-modal),
+    :host(:not([position])) dialog:not(.is-modal) {
+        inset: 0;
+        margin: auto;
+    }
+
+    /* Top Left */
+    :host([position="top-left"]) dialog:not(.is-modal) {
+        inset: auto;
+        top: 24px;
+        left: 24px;
+        margin: 0;
+    }
+
+    /* Top Right */
+    :host([position="top-right"]) dialog:not(.is-modal) {
+        inset: auto;
+        top: 24px;
+        right: 24px;
+        margin: 0;
+    }
+
+    /* Bottom Left */
+    :host([position="bottom-left"]) dialog:not(.is-modal) {
+        inset: auto;
+        bottom: 24px;
+        left: 24px;
+        margin: 0;
+    }
+
+    /* Bottom Right */
+    :host([position="bottom-right"]) dialog:not(.is-modal) {
+        inset: auto;
+        bottom: 24px;
+        right: 24px;
+        margin: 0;
+    }
+
+    /* Re-enable pointer events on the dialog content itself */
+    dialog:not(.is-modal) > * {
+      pointer-events: auto;
+    }
+    
+    /* Ensure styles apply when polyfilled or if display is overridden */
+    dialog:not([open]) {
+      display: none;
+    }
+
+    /* Remove default focus ring from the dialog container itself */
+    dialog:focus,
+    dialog:focus-visible {
+      outline: none;
+    }
+    
+    /* Only show backdrop for modal dialogs */
+    dialog.is-modal::backdrop {
+      background: var(--ds-color-bg-backdrop, #fbfaf9cc);
+      backdrop-filter: blur(2px); 
+      z-index: var(--ds-zindex-backdrop, 800);
+    }
+    
+    /* Fallback for browsers/polyfills where ::backdrop might not work as expected or for extra safety */
+    dialog:not([open])::backdrop {
+        display: none;
+    }
+    
+    /* 
+     * SIZES 
+     */
+     
+    /* SM: 300px - 520px */
+    :host([size="sm"]) dialog {
+       width: 100%;
+       min-width: 300px;
+       max-width: 520px;
+    }
+    
+    /* MD: 720px */
+    :host([size="md"]) dialog {
+       width: 720px;
+       max-width: calc(100vw - 32px); /* Safety margin */
+    }
+    
+    /* LG: 1080px */
+    :host([size="lg"]) dialog {
+       width: 1080px;
+       max-width: calc(100vw - 32px); /* Safety margin */
+    }
+    
+    /* Fullscreen */
+    :host([size="fullscreen"]) dialog { 
+      width: 100vw; 
+      height: 100vh; 
+      max-width: 100%; 
+      max-height: 100%;
+      border-radius: 0;
+    }
+    
+    /* 
+     * HEADER
+     * Padding: 16px Top, 16px Horizontal (0 Bottom, handled by Body gap)
+     * Sticky Top (Flex item doesn't shrink)
+     */
+    .header {
+      flex-shrink: 0;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 16px 16px 0 16px;
+    }
+    
+    .header-title {
+      /* Token: title-s -> typo_heading_sm */
+      font: var(--ds-typo-heading-sm, 700 18px 'Noto Sans', sans-serif);
+      margin: 0;
+      color: var(--ds-color-text-default);
+    }
+    
+    /* 
+     * BODY
+     * Scrollable area
+     * Padding: 8px Top, 24px Bottom, 16px Horizontal
+     * Token: body-default -> typo_content_body_regular
+     */
+    .body {
+      flex-grow: 1;
+      overflow-y: auto;
+      padding: 8px 16px 24px 16px;
+      font: var(--ds-typo-content-body-regular, 400 14px 'Noto Sans', sans-serif);
+      color: var(--ds-color-text-default);
+    }
+    
+    /* Remove default outline and apply custom one if needed, 
+       but typically internal content should manage its own focus styles.
+       User requested to remove the "native aspect". 
+       We'll remove the outline from the container and rely on children-level focus
+       or specific focus-visible style if strictly required. 
+       Reverting the previous .body:focus-visible to simple outline: none 
+       unless User explicitly asks for a specific focus style there again. 
+       The request was "focus now looks internal and keeps native aspect... remove that border".
+       This likely referred to the DIALOG border. 
+       We will keep the tokenized focus style for the body content purely for accessibility 
+       but ensure it's clean (no double borders).
+    */
+    .body:focus,
+    .body:focus-visible {
+      outline: none; /* Let inner elements handle focus, or use a very specific subtle style */
+    }
+    
+    /* 
+     * FOOTER 
+     * Sticky Bottom (Flex item doesn't shrink)
+     */
+    .footer {
+      flex-shrink: 0;
+    }
+  `;
+
+  constructor() {
+    super();
+    this.open = false;
+    this.heading = '';
+    this.preventClose = false;
+    this.size = 'md';
+    this.modal = false; // Default to non-modal (safer)
+    this.position = 'center';
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this._unlockScroll();
+  }
+
+  updated(changedProps) {
+    // If 'open' changed OR 'modal' changed while open
+    if (changedProps.has('open') || (this.open && changedProps.has('modal'))) {
+      const dialog = this.shadowRoot.querySelector('dialog');
+
+      // If we are switching modes (modal <-> non-modal) while open, we might need to reset
+      if (changedProps.has('modal') && this.open && dialog.open) {
+        dialog.close(); // Close first to reset mode
+        this._unlockScroll();
+      }
+
+      if (this.open) {
+        // Enforce explicit class for CSS styling (backdrop)
+        if (this.modal) {
+          dialog.classList.add('is-modal');
+        } else {
+          dialog.classList.remove('is-modal');
+        }
+
+        if (!dialog.open) {
+          // Modal vs Non-Modal
+          if (this.modal) {
+            dialog.showModal();
+            this._lockScroll();
+          } else {
+            dialog.show();
+            // Ensure scroll is unlocked if we switched to non-modal
+            this._unlockScroll();
+          }
+          // Only dispatch if it was a fresh open, but logic here might dispatch on mode switch. 
+          // Assuming typical usage doesn't toggle modal prop often while open, it's acceptable.
+          if (changedProps.has('open')) {
+            this.dispatchEvent(new CustomEvent('ds-open', { bubbles: true, composed: true }));
+          }
+        }
+      } else {
+        if (dialog.open) {
+          dialog.close();
+          this._unlockScroll();
+        }
+      }
+    }
+  }
+
+  // Helper to get all focusable elements including those inside slots
+  _getFocusableElements() {
+    const selector = 'a[href], area[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), iframe, object, embed, [tabindex="0"], [contenteditable], ds-button:not([disabled]), ds-icon-button:not([disabled]), ds-input:not([disabled]), ds-link, ds-textarea, ds-select, ds-checkbox, ds-radio';
+
+    const getAllFocusables = (parent) => {
+      let elements = [];
+
+      // Check children
+      const nodes = parent.querySelectorAll ? parent.querySelectorAll(selector) : [];
+      elements = [...nodes];
+
+      // Check slots
+      const slots = parent.querySelectorAll ? parent.querySelectorAll('slot') : [];
+      slots.forEach(slot => {
+        const assigned = slot.assignedElements({ flatten: true });
+        assigned.forEach(node => {
+          if (node.matches && node.matches(selector)) {
+            elements.push(node);
+          }
+          // Recursively find focusables inside the slotted element
+          if (node.querySelectorAll) {
+            elements = [...elements, ...node.querySelectorAll(selector)];
+          }
+        });
+      });
+
+      return elements;
+    };
+
+    // Start from the dialog element in shadow root
+    const dialog = this.shadowRoot.querySelector('dialog');
+    return getAllFocusables(dialog).filter(el => {
+      // Filter out invisible elements if needed, though 'display:none' is usually handled by not being focusable.
+      // Native 'inert' or 'hidden' check:
+      return el.offsetParent !== null;
+    });
+  }
+
+  _lockScroll() {
+    if (this.modal) {
+      document.body.style.overflow = 'hidden';
+    }
+  }
+
+  _unlockScroll() {
+    document.body.style.overflow = '';
+  }
+
+  // Internal method to trigger close event (explicit action)
+  _requestClose() {
+    // Unlock scroll BEFORE emitting close event so UI feels responsive
+    // Actually, better to do it when the prop changes to false, but 
+    // if the user handles the event by removing the element or setting open=false,
+    // the updated() or disconnectedCallback() will handle it.
+    // However, to be safe against edge cases (like simple removal):
+
+    this.dispatchEvent(new CustomEvent('ds-close', { bubbles: true, composed: true }));
+  }
+
+  _handleDialogCancel(e) {
+    e.preventDefault(); // Prevent native close immediately 
+
+    if (!this.preventClose) {
+      this._requestClose();
+    }
+  }
+
+  _handleBackdropClick(e) {
+    // Only applies to modal
+    if (!this.modal) return;
+
+    if (e.target.tagName === 'DIALOG') {
+      const rect = e.target.getBoundingClientRect();
+      const isInDialog = (rect.top <= e.clientY && e.clientY <= rect.top + rect.height &&
+        rect.left <= e.clientX && e.clientX <= rect.left + rect.width);
+
+      if (!isInDialog) {
+        if (!this.preventClose) {
+          this._requestClose();
+        }
+      }
+    }
+  }
+
+  _handleKeyDown(e) {
+    if (!this.open) return;
+
+    // Close on Escape (for non-modal mostly, as native handles modal Esc)
+    if (e.key === 'Escape') {
+      if (!this.modal && !this.preventClose) {
+        e.preventDefault();
+        this._requestClose();
+      }
+      return;
+    }
+
+    // Explicit Tab Trap for Modal
+    if (e.key === 'Tab' && this.modal) {
+      const focusables = this._getFocusableElements();
+      if (focusables.length === 0) return;
+
+      const first = focusables[0];
+      const last = focusables[focusables.length - 1];
+
+      // Check active element in both contexts
+      const isFirstFocused = (document.activeElement === first) || (this.shadowRoot.activeElement === first);
+      const isLastFocused = (document.activeElement === last) || (this.shadowRoot.activeElement === last);
+
+      if (e.shiftKey) { // Backward
+        if (isFirstFocused) {
+          e.preventDefault();
+          last.focus();
+        }
+      } else { // Forward
+        if (isLastFocused) {
+          e.preventDefault();
+          first.focus();
+        }
+      }
+    }
+  }
+
+  render() {
+    return html`
+      <dialog 
+        @cancel=${this._handleDialogCancel}
+        @click=${this._handleBackdropClick}
+        @keydown=${this._handleKeyDown}
+      >
+        <div class="header">
+          <slot name="header">
+             <h2 class="header-title">${this.heading}</h2>
+             <ds-icon-button 
+                variant="action" 
+                size="m" 
+                icon="close" 
+                @click=${this._requestClose}
+                label="Close dialog"
+             ></ds-icon-button>
+          </slot>
+        </div>
+        
+        <div class="body">
+          <slot name="body">
+            <slot></slot>
+          </slot>
+        </div>
+        
+        <div class="footer">
+          <slot name="footer" @slotchange=${this._handleFooterSlotChange}></slot>
+        </div>
+      </dialog>
+    `;
+  }
+
+
+
+  _handleFooterSlotChange(e) {
+    if (this.size === 'fullscreen') {
+      const slot = e.target;
+      const nodes = slot.assignedElements({ flatten: true });
+      nodes.forEach(node => {
+        if (node.tagName.toLowerCase() === 'ds-action-bar') {
+          node.setAttribute('variant', 'page');
+        }
+      });
+    }
+  }
+}
+
+customElements.define('ds-dialog', DsDialog);