@universal-material/web 3.0.140 → 3.0.142

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

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

package/src/dialog/dialog.styles.scss

@@ -1,176 +0,0 @@
-@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

@@ -1,255 +0,0 @@
-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

@@ -1,25 +0,0 @@
-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

@@ -1,31 +0,0 @@
-@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

@@ -1,20 +0,0 @@
-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;
-  }
-}