@universal-material/web 3.0.138 → 3.0.140

package/src/dialog/dialog-button-def.ts

@@ -0,0 +1,6 @@
+import { UmButtonVariant } from '../button/button.js';
+
+export interface DialogButtonDef {
+  variant?: UmButtonVariant;
+  label?: string;
+}

package/src/dialog/dialog.styles.scss

@@ -0,0 +1,176 @@
+@use "../scss/api";
+@use "../scss/variables";
+
+:host {
+  --u-elevation-level: var(--u-dialog-elevation, 3);
+  --_icon-size: var(--u-dialog-icon-size, 24px);
+  --_divider-color: var(--u-dialog-divider-color, #{api.get-color-var(outline-variant)});
+  --_scrim-opacity: var(--u-dialog-scrim-opacity, .32);
+  --_padding: var(--u-dialog-padding, 24px);
+}
+
+:host(:not([has-headline])) {
+  .headline {
+    display: none;
+  }
+}
+
+:host([has-icon]) {
+  .icon {
+    display: flex;
+  }
+
+  .headline {
+    padding-top: 0;
+  }
+
+  .headline,
+  .container {
+    text-align: center;
+  }
+}
+
+:host([has-headline]),
+:host([has-icon]) {
+  .content.top-divider {
+    border-top: 1px solid var(--_divider-color);
+    margin-top: -1px;
+  }
+}
+
+.scrim {
+  position: fixed;
+  inset: 0;
+  background-color: var(--u-dialog-scrim-color, #{api.get-color-var(scrim)});
+  animation: scrim-show-animation 300ms;
+  animation-fill-mode: forwards;
+  z-index: -1;
+}
+
+dialog {
+  align-items: center;
+  background: none;
+  border: none;
+  overflow: visible;
+  padding: var(--_padding);
+  max-width: none;
+  max-height: none;
+  width: 100%;
+  height: 100%;
+
+  &[open] {
+    display: flex;
+  }
+
+  &::backdrop {
+    background: none;
+  }
+}
+
+.container {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  margin-inline: auto;
+  background-color: var(--u-dialog-container-bg-color, #{api.get-color-var(surface-container-high)});
+  border-radius: var(--u-dialog-border-radius, #{api.get-shape-corner-var(extra-large)});
+  min-width: min(var(--u-dialog-min-width, 280px), 100%);
+  max-width: var(--u-dialog-max-width, 560px);
+  max-height: min(var(--u-dialog-max-height, 560px), 100%);
+  animation: show 250ms variables.$awesome-cubic-bezier;
+  z-index: 1;
+}
+
+.headline,
+.icon,
+.content,
+.actions {
+  padding: var(--_padding);
+}
+
+.headline {
+  @include api.typo(headline-s, dialog-headline);
+  padding-bottom: var(--u-headline-padding, 16px);
+}
+
+.icon {
+  display: none;
+  justify-content: center;
+  align-items: center;
+  font-size: var(--_icon-size);
+  line-height: var(--_icon-size);
+  color: var(--u-dialog-icon-color, #{api.get-color-var(secondary)});
+  padding-bottom: var(--u-icon-padding, 16px);
+}
+
+.content {
+  @include api.typo(body-m, dialog-content);
+  color: var(--u-dialog-content-text-color, #{api.get-color-var(on-surface-variant)});
+  padding-block: 0;
+  overflow: auto;
+
+  &.bottom-divider {
+    border-bottom: 1px solid var(--_divider-color);
+    margin-bottom: -1px;
+  }
+}
+
+:host(:not([has-headline]):not([has-icon])) {
+  .content {
+    padding-top: var(--_padding);
+  }
+}
+
+.actions {
+  display: flex;
+  flex-direction: row-reverse;
+  flex-wrap: wrap-reverse;
+  gap: var(--u-dialog-actions-gap, 8px);
+}
+
+:host(.closing) {
+  .container {
+    animation-name: close;
+  }
+
+  .scrim {
+    animation-name: scrim-close-animation;
+  }
+}
+
+@keyframes scrim-show-animation {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: var(--_scrim-opacity);
+  }
+}
+
+
+@keyframes scrim-close-animation {
+  from {
+    opacity: var(--_scrim-opacity);
+  }
+  to {
+    opacity: 0;
+  }
+}
+
+@keyframes show {
+  from {
+    transform: scale3d(0, 0, 1);
+  }
+  to {
+    transform: scale3d(1, 1, 1);
+  }
+}
+
+@keyframes close {
+  from {
+    transform: scale3d(1, 1, 1);
+  }
+  to {
+    transform: scale3d(0, 0, 1);
+  }
+}

package/src/dialog/dialog.ts

@@ -0,0 +1,255 @@
+import { PropertyValues } from '@lit/reactive-element';
+
+import { html, HTMLTemplateResult, LitElement } from 'lit';
+import { customElement, property, query, queryAssignedElements } from 'lit/decorators.js';
+
+import { styles as baseStyles } from '../shared/base.styles.js';
+import { ConfirmDialogBuilder } from './confirm-dialog-builder.js';
+import { styles } from './dialog.styles.js';
+import { MessageDialogBuilder } from './message-dialog-builder.js';
+
+import '../elevation/elevation.js';
+
+const topDividerClass = 'top-divider';
+const bottomDividerClass = 'bottom-divider';
+
+@customElement('u-dialog')
+export class UmDialog extends LitElement {
+  static override styles = [baseStyles, styles];
+
+  #open = false;
+  #contentResizeObserver!: ResizeObserver | null;
+
+  @property({ type: Boolean })
+  get open(): boolean {
+    return this.#open;
+  }
+
+  set open(open: boolean) {
+    if (this.#open === open) {
+      return;
+    }
+
+    if (!open) {
+      this.close();
+      return;
+    }
+
+    this.show();
+  }
+
+  get returnValue() {
+    return this.dialog.returnValue;
+  }
+
+  /**
+   * Whether dialog has headline or not
+   *
+   * _Note:_ Readonly
+   */
+  @property({ type: Boolean, attribute: 'has-headline', reflect: true }) hasHeadline = false;
+
+  /**
+   * Whether dialog has icon
+   *
+   * _Note:_ Readonly
+   */
+  @property({ type: Boolean, attribute: 'has-icon', reflect: true }) hasIcon = false;
+
+  @query('dialog') dialog!: HTMLDialogElement;
+  @query('.scrim') scrim!: HTMLElement;
+  @query('.content') content!: HTMLElement;
+  @query('.container') container!: HTMLElement;
+
+  @queryAssignedElements({ slot: 'headline', flatten: true })
+  private readonly assignedHeadlines!: HTMLElement[];
+
+  @queryAssignedElements({ slot: 'icon', flatten: true })
+  private readonly assignedIcons!: HTMLElement[];
+
+  static message(message: string): MessageDialogBuilder {
+    return MessageDialogBuilder.create(message);
+  }
+
+  static confirm(message: string): ConfirmDialogBuilder {
+    return ConfirmDialogBuilder.create(message);
+  }
+
+  override render(): HTMLTemplateResult {
+    return html`
+      <dialog>
+        <div class="scrim" @click=${this.#handleScrimClick}></div>
+        <div class="container" part="container">
+          <u-elevation></u-elevation>
+          <div class="icon" part="icon">
+            <slot
+              name="icon"
+              @slotchange=${this.#handleIconSlotChange}>
+            </slot>
+          </div>
+          <div class="headline" part="headline">
+            <slot
+              name="headline"
+              @slotchange=${this.#handleHeadlineSlotChange}>
+            </slot>
+          </div>
+          <div
+            class="content"
+            part="content"
+            @scroll=${this.#handleScroll}>
+            <slot></slot>
+          </div>
+          <div class="actions" part="actions">
+            <slot name="actions"></slot>
+          </div>
+        </div>
+      </dialog>`;
+  }
+
+  override firstUpdated(changedProperties: PropertyValues) {
+    super.firstUpdated(changedProperties);
+
+    this.dialog.addEventListener('cancel', this.#handleCancel);
+  }
+
+  override connectedCallback() {
+    super.connectedCallback();
+    this.addEventListener('submit', this.#handleSubmit);
+
+    setTimeout(() => {
+      this.#contentResizeObserver = new ResizeObserver(() => this.#setScrollDividers());
+      this.#contentResizeObserver.observe(this.content);
+    });
+  }
+
+  override disconnectedCallback() {
+    super.disconnectedCallback();
+    this.removeEventListener('submit', this.#handleSubmit);
+
+    this.#contentResizeObserver!.disconnect();
+    this.#contentResizeObserver = null;
+  }
+
+  #handleSubmit(event: SubmitEvent) {
+    const form = event.target as HTMLFormElement;
+    const { submitter } = event;
+
+    if (form.method !== 'dialog' || !submitter) {
+      return;
+    }
+
+    this.close(submitter.getAttribute('value') ?? this.returnValue);
+  }
+
+  readonly #handleCancel = (e: Event) => {
+    e.preventDefault();
+
+    const cancelPrevented = !this.dispatchEvent(new Event('cancel', { cancelable: true }));
+
+    if (cancelPrevented) {
+      return;
+    }
+
+    this.close();
+  };
+
+  #handleIconSlotChange() {
+    this.hasIcon = this.assignedIcons.length > 0;
+  }
+
+  #handleHeadlineSlotChange() {
+    this.hasHeadline = this.assignedHeadlines.length > 0;
+  }
+
+  #handleScroll() {
+    this.#setScrollDividers();
+  }
+
+  #setScrollDividers() {
+    this.#setTopScrollDivider();
+    this.#setBottomScrollDivider();
+  }
+
+  #setBottomScrollDivider() {
+    const scrollBottom = this.content.scrollTop + this.content.offsetHeight;
+
+    if (scrollBottom >= this.content.scrollHeight) {
+      this.content.classList.remove(bottomDividerClass);
+      return;
+    }
+
+    this.content.classList.add(bottomDividerClass);
+  }
+
+  #setTopScrollDivider() {
+    if (this.content.scrollTop) {
+      this.content.classList.add(topDividerClass);
+      return;
+    }
+
+    this.content.classList.remove(topDividerClass);
+  }
+
+  async show() {
+    this.#open = true;
+    this.setAttribute('open', '');
+
+    await this.updateComplete;
+    this.dialog.showModal();
+    const autoFocusElement = this.querySelector<HTMLElement>('[autofocus]');
+    autoFocusElement?.focus();
+    this.content.scrollTop = 0;
+  }
+
+  async close(returnValue: string = this.returnValue) {
+    this.#open = false;
+    this.removeAttribute('open');
+
+    await this.updateComplete;
+
+    if (!this.dialog.open || this.open) {
+      return;
+    }
+
+    const preventClose = !this.dispatchEvent(new Event('close', { cancelable: true }));
+
+    if (preventClose) {
+      this.#open = true;
+      return;
+    }
+
+    this.open = false;
+
+    const closed = new Promise<void>(resolve =>
+      this.container.addEventListener(
+        'animationend',
+        () => {
+          resolve();
+          this.classList.remove('closing');
+          this.dialog.close(returnValue);
+          this.dispatchEvent(new Event('closed'));
+        },
+        { capture: true, once: true },
+      )
+    );
+
+    this.classList.add('closing');
+    await closed;
+  }
+
+  #handleScrimClick() {
+    const cancelPrevented = !this.dispatchEvent(new Event('cancel', { cancelable: true }));
+
+    if (cancelPrevented) {
+      return;
+    }
+
+    this.close();
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'u-dialog': UmDialog;
+  }
+}

package/src/dialog/message-dialog-builder.ts

@@ -0,0 +1,25 @@
+import { config } from '../config.js';
+import { DialogBuilder } from './dialog-builder.js';
+import { DialogButtonDef } from './dialog-button-def.js';
+import { UmDialog } from './dialog.js';
+
+export class MessageDialogBuilder extends DialogBuilder<MessageDialogBuilder, void> {
+  static create(message: string): MessageDialogBuilder {
+    return new MessageDialogBuilder(message);
+  }
+
+  #acknowledgeButtonDef?: DialogButtonDef;
+
+  acknowledgeButton(acknowledgeButtonDef: DialogButtonDef): MessageDialogBuilder {
+    this.#acknowledgeButtonDef = acknowledgeButtonDef;
+    return this;
+  }
+
+  override addButtons(dialog: UmDialog): void {
+
+    this.addButton(
+      dialog,
+      { ...config.dialog.alertDefaults.acknowledgeButton, ...this.#acknowledgeButtonDef },
+      () => dialog.close());
+  }
+}

package/src/elevation/elevation.styles.scss

@@ -0,0 +1,31 @@
+@use "../scss/functions";
+
+:host {
+  --_level: var(--u-elevation-level, 0);
+  --_shadow-color: #{functions.get-color-var(shadow)};
+
+  -webkit-tap-highlight-color: transparent;
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  pointer-events: none;
+
+  &::before,
+  &::after {
+    content: '';
+    position: absolute;
+    inset: 0;
+    border-radius: inherit;
+    transition: box-shadow 150ms ease-in-out;
+  }
+
+  &::before {
+    box-shadow: 0 calc(1px*(clamp(0,var(--_level),1) + clamp(0,var(--_level) - 3,1) + 2*clamp(0,var(--_level) - 4,1))) calc(1px*(2*clamp(0,var(--_level),1) + clamp(0,var(--_level) - 2,1) + clamp(0,var(--_level) - 4,1))) 0 var(--_shadow-color);
+    opacity: .3;
+  }
+
+  &::after {
+    box-shadow: 0 calc(1px*(clamp(0,var(--_level),1) + clamp(0,var(--_level) - 1,1) + 2*clamp(0,var(--_level) - 2,3))) calc(1px*(3*clamp(0,var(--_level),2) + 2*clamp(0,var(--_level) - 2,3))) calc(1px*(clamp(0,var(--_level),4) + 2*clamp(0,var(--_level) - 4,1))) var(--_shadow-color);
+    opacity: .15;
+  }
+}

package/src/elevation/elevation.ts

@@ -0,0 +1,20 @@
+import { LitElement } from 'lit';
+import { customElement } from 'lit/decorators.js';
+
+import { styles } from './elevation.styles.js';
+
+@customElement('u-elevation')
+export class UmElevation extends LitElement {
+  static override styles = styles;
+
+  override connectedCallback() {
+    super.connectedCallback();
+    this.ariaHidden = 'true';
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'u-elevation': UmElevation;
+  }
+}