@universal-material/web 3.0.140 → 3.0.141

package/src/menu/menu.ts

@@ -1,423 +0,0 @@
-import { html, HTMLTemplateResult, LitElement } from 'lit';
-import { customElement, property, query } from 'lit/decorators.js';
-import { classMap } from 'lit/directives/class-map.js';
-
-import { styles as baseStyles } from '../shared/base.styles.js';
-import { styles } from './menu.styles.js';
-
-import '../elevation/elevation.js';
-
-interface AnchorCornerBlockSide {
-  top: number;
-  bottom: number;
-  relativeY: number;
-}
-
-interface AnchorCornerInlineSide {
-  left: number;
-  right: number;
-  relativeX: number;
-}
-
-interface AnchorBounds {
-  top: AnchorCornerBlockSide;
-  bottom: AnchorCornerBlockSide;
-  start: AnchorCornerInlineSide;
-  end: AnchorCornerInlineSide;
-  width: number;
-  height: number;
-}
-
-interface MenuPosition {
-  bounds: AnchorBounds;
-  isRtl: boolean;
-}
-
-interface MenuSize {
-  width: number;
-  height: number;
-}
-
-@customElement('u-menu')
-export class UmMenu extends LitElement {
-  static override styles = [baseStyles, styles];
-
-  #open = false;
-  #preInitOpen = false;
-
-  /**
-   * Opens the menu and makes it visible. Alternative to the `.show()`, `.close()` and `.toggle()` methods
-   */
-  @property({ type: Boolean, reflect: true })
-  get open(): boolean {
-    return this.#open;
-  }
-
-  set open(open: boolean) {
-    if (!this.menu) {
-      this.#preInitOpen = open;
-      return;
-    }
-
-    if (this.open === open) {
-      return;
-    }
-
-    this.menu.removeEventListener('transitionend', this.#onClosed, true);
-    this.menu.removeEventListener('transitionend', this.#onOpened, true);
-
-    if (!open) {
-      const closePrevented = !this.dispatchEvent(new Event('close', { cancelable: true }));
-
-      if (closePrevented) {
-        return;
-      }
-
-      this.#open = open;
-
-      this.#hide();
-
-      return;
-    }
-
-    const openPrevented = !this.dispatchEvent(new Event('open', { cancelable: true }));
-
-    if (openPrevented) {
-      return;
-    }
-
-    this.#open = open;
-
-    this.#show();
-  }
-
-  #show() {
-    this.menu.style.display = '';
-    this.calcDropdownPositioning();
-
-    this.menu.addEventListener('transitionend', this.#onOpened, {
-      capture: true,
-      once: true,
-    });
-
-    setTimeout(() => document.addEventListener('click', this.close));
-
-    if (this.manualFocus) {
-      return;
-    }
-
-    setTimeout(() => this.querySelector<HTMLElement>('u-menu-item:not([disabled])')?.focus());
-  }
-
-  #hide() {
-    document.removeEventListener('click', this.close);
-
-    this.menu.addEventListener('transitionend', this.#onClosed, {
-      capture: true,
-      once: true,
-    });
-  }
-
-  @property({ reflect: true }) positioning: 'relative' | 'fixed' = 'relative';
-
-  @property({ type: Boolean }) manualFocus = false;
-
-  /**
-   * The corner of the anchor which to align the menu in the standard logical
-   * property style of <block>-<inline> e.g. `'end-start'`.
-   */
-  @property({ attribute: 'anchor-corner', reflect: true })
-  anchorCorner: 'auto-start' | 'auto-end' | 'start-start' | 'start-end' | 'end-start' | 'end-end' = 'end-start';
-
-  /**
-   * The direction of the menu. e.g. `'down-end'`.
-   *
-   * NOTE: This value may not be respected by the menu positioning algorithm
-   * if the menu would render outside the viewport.
-   */
-  @property({ reflect: true }) direction: 'up-start' | 'up-end' | 'down-start' | 'down-end' = 'down-end';
-
-  /**
-   * Don't limit the height of the menu
-   */
-  @property({ type: Boolean, attribute: 'allow-overflow', reflect: true }) allowOverflow = false;
-
-  @query('.menu') menu!: HTMLElement;
-  @query('.ref') ref!: HTMLElement;
-
-  get scrollContainer(): HTMLElement {
-    return this.menu;
-  }
-
-  readonly #onOpened = () => this.dispatchEvent(new Event('opened'));
-
-  readonly #onClosed = () => {
-    this.menu.style.display = 'none';
-    this.dispatchEvent(new Event('closed'));
-  };
-
-  #anchorElement: HTMLElement | null | undefined;
-
-  get anchorElement(): HTMLElement | null | undefined {
-    return this.#anchorElement ?? this.parentElement! ?? (this.getRootNode() as ShadowRoot).host;
-  }
-
-  set anchorElement(anchorElement: HTMLElement | null | undefined) {
-    this.#anchorElement = anchorElement;
-  }
-
-  protected override render(): HTMLTemplateResult {
-    const menuClasses = { open: this.open };
-
-    return html`
-      <div class="ref"></div>
-      <div class="menu ${classMap(menuClasses)}" part="menu" style="display: none" ?inert=${!this.open}>
-        <u-elevation></u-elevation>
-        <div role="menu" class="content" part="content">
-          <slot></slot>
-        </div>
-      </div>
-    `;
-  }
-
-  override connectedCallback() {
-    super.connectedCallback();
-    this.role = 'listbox';
-
-    this.#setInitOpen();
-  }
-
-  toggle = () => {
-    if (this.open) {
-      this.close();
-      return;
-    }
-
-    this.show();
-  };
-
-  show(): void {
-    this.open = true;
-  }
-
-  close = () => {
-    this.open = false;
-  };
-
-  async #setInitOpen() {
-    await this.updateComplete;
-
-    if (this.#preInitOpen) {
-      this.open = true;
-    }
-  }
-
-  private calcDropdownPositioning() {
-    if (!this.anchorElement) {
-      return;
-    }
-
-    const menuPosition = this.getMenuPosition();
-    const menuSize = this.getMenuSize();
-
-    this.#resetMenu();
-    this.#setToOpenUpOrDown(menuPosition, menuSize);
-    this.#setToOpenToStartOrEnd(menuPosition, menuSize);
-  }
-
-  #resetMenu() {
-    this.menu.className = 'menu';
-    this.menu.style.top = '';
-    this.menu.style.bottom = '';
-    this.menu.style.left = '';
-    this.menu.style.right = '';
-    this.menu.style.maxHeight = '';
-  }
-
-  #setToOpenUpOrDown(menuPosition: MenuPosition, menuSize: MenuSize): void {
-    if (this.anchorCorner.startsWith('auto-')) {
-      this.#openBlockAuto(menuPosition, menuSize);
-      return;
-    }
-
-    const side = this.anchorCorner.startsWith('start-') ? menuPosition.bounds.top : menuPosition.bounds.bottom;
-
-    if (this.direction.startsWith('up-')) {
-      this.#tryOpenUp(side, menuSize);
-      return;
-    }
-
-    this.#tryOpenDown(side, menuSize);
-  }
-
-  #openBlockAuto(menuPosition: MenuPosition, menuSize: MenuSize): void {
-    const topSide = menuPosition.bounds.top;
-    const bottomSide = menuPosition.bounds.bottom;
-
-    const viewPortHeight = window.innerHeight;
-
-    if (bottomSide.bottom >= topSide.top || viewPortHeight - (bottomSide.top + menuSize.height) >= 0) {
-      this.#openDown(bottomSide);
-      return;
-    }
-
-    this.#openUp(topSide);
-  }
-
-  #tryOpenUp(side: AnchorCornerBlockSide, menuSize: MenuSize): void {
-    if (side.top === side.bottom || side.top - menuSize.height >= 0) {
-      this.#openUp(side);
-      return;
-    }
-
-    this.#openToLargestBlockSide(side);
-  }
-
-  #tryOpenDown(side: AnchorCornerBlockSide, menuSize: MenuSize): void {
-    const viewPortHeight = window.innerHeight;
-
-    if (side.top === side.bottom || viewPortHeight - (side.top + menuSize.height) >= 0) {
-      this.#openDown(side);
-      return;
-    }
-
-    this.#openToLargestBlockSide(side);
-  }
-
-  #openToLargestBlockSide(side: AnchorCornerBlockSide) {
-    if (side.top > side.bottom) {
-      this.#openUp(side);
-      return;
-    }
-
-    this.#openDown(side);
-  }
-
-  #setToOpenToStartOrEnd(menuPosition: MenuPosition, menuSize: MenuSize): void {
-    const openStart = menuPosition.isRtl ? this.#tryOpenRight.bind(this) : this.#tryOpenLeft.bind(this);
-    const openEnd = menuPosition.isRtl ? this.#tryOpenLeft.bind(this) : this.#tryOpenRight.bind(this);
-
-    const side = this.anchorCorner.endsWith('-start') ? menuPosition.bounds.start : menuPosition.bounds.end;
-
-    if (this.direction.endsWith('-start')) {
-      openStart(side, menuSize);
-      return;
-    }
-
-    openEnd(side, menuSize);
-  }
-
-  #tryOpenLeft(side: AnchorCornerInlineSide, menuSize: MenuSize): void {
-    if (side.left === side.right || side.left - menuSize.width >= 0) {
-      this.menu.style.right = `${side.relativeX * -1}px`;
-      return;
-    }
-
-    this.#openToLargestInlineSide(side);
-  }
-
-  #tryOpenRight(side: AnchorCornerInlineSide, menuSize: MenuSize): void {
-    const viewPortWidth = window.innerWidth;
-
-    if (side.left === side.right || viewPortWidth - (side.left + menuSize.width) >= 0) {
-      this.menu.style.left = `${side.relativeX}px`;
-      return;
-    }
-
-    this.#openToLargestInlineSide(side);
-  }
-
-  #openToLargestInlineSide(side: AnchorCornerInlineSide) {
-    if (side.left > side.right) {
-      this.menu.style.right = `${side.relativeX * -1}px`;
-      return;
-    }
-
-    this.menu.style.left = `${side.relativeX}px`;
-  }
-
-  #openUp(side: AnchorCornerBlockSide) {
-    const viewPortHeight = window.innerHeight;
-
-    this.menu.style.bottom = `${side.relativeY * -1}px`;
-    this.menu.classList.add('up');
-    this.menu.style.maxHeight = this.allowOverflow ? '' : `${viewPortHeight - side.bottom}px`;
-  }
-
-  #openDown(side: AnchorCornerBlockSide) {
-    const viewPortHeight = window.innerHeight;
-    this.menu.style.top = `${side.relativeY}px`;
-    this.menu.style.maxHeight = this.allowOverflow ? '' : `${viewPortHeight - side.top}px`;
-  }
-
-  private getMenuPosition(): MenuPosition {
-    const viewPortWidth = window.innerWidth;
-    const viewPortHeight = window.innerHeight;
-
-    const anchorElement = this.anchorElement!;
-    const anchorRect = anchorElement.getBoundingClientRect();
-    const refRect = this.ref.getBoundingClientRect();
-    const anchorStyles = getComputedStyle(anchorElement);
-    const isRtl = anchorStyles.direction === 'rtl';
-
-    const width = parseInt(anchorStyles.width, 10);
-    const height = parseInt(anchorStyles.height, 10);
-
-    const rectX = refRect.left;
-    const rectY = refRect.top;
-
-    const leftPoint: AnchorCornerInlineSide = {
-      left: anchorRect.left,
-      right: viewPortWidth - anchorRect.left,
-      relativeX: anchorRect.left - rectX,
-    };
-
-    const rightPoint: AnchorCornerInlineSide = {
-      left: anchorRect.right,
-      right: viewPortWidth - anchorRect.right,
-      relativeX: leftPoint.relativeX + width,
-    };
-
-    const topPoint: AnchorCornerBlockSide = {
-      top: anchorRect.top,
-      relativeY: anchorRect.top - rectY,
-      bottom: viewPortHeight - anchorRect.top,
-    };
-
-    const anchorBounds: AnchorBounds = {
-      top: topPoint,
-      bottom: {
-        top: anchorRect.bottom,
-        relativeY: topPoint.relativeY + height,
-        bottom: viewPortHeight - anchorRect.bottom,
-      },
-      start: isRtl ? rightPoint : leftPoint,
-      end: isRtl ? leftPoint : rightPoint,
-      width,
-      height,
-    };
-
-    return {
-      isRtl,
-      bounds: anchorBounds,
-    };
-  }
-
-  private getMenuSize(): MenuSize {
-    const menu = this.menu;
-    const menuStyles = getComputedStyle(menu);
-    const width = parseInt(menuStyles.width, 10);
-    const height = parseInt(menuStyles.height, 10);
-
-    return {
-      width,
-      height,
-    };
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'u-menu': UmMenu;
-  }
-}

package/src/navigation/_side-navigation-base.styles.scss

@@ -1,101 +0,0 @@
-@use "../scss/variables";
-@use "../scss/functions";
-@use "../scss/mixins";
-
-:host {
-  --_navigation-width: 0;
-  --_navigation-drawer-width: min(var(--u-navigation-drawer-width, 360px), 85vw);
-  --_navigation-drawer-width-negative: calc(var(--_navigation-drawer-width) * -1);
-  --_navigation-drawer-corner-shape: var(--u-navigation-drawer-corner-shape, #{functions.get-shape-corner-var(large)});
-  --_scrim-opacity: var(--u-drawer-scrim-opacity, .4);
-
-  display: block;
-  width: 100%;
-  height: 100%;
-  --u-app-bar-offset: var(--_navigation-width);
-}
-
-:host(.disable-transition) * {
-  transition: none !important;
-
-  ::slotted(u-top-app-bar) {
-    transition: none !important;
-  }
-}
-
-.drawer {
-  transition: inset 375ms variables.$awesome-cubic-bezier;
-
-  &,
-  u-elevation,
-  .drawer-container {
-    border-start-end-radius: var(--_navigation-drawer-corner-shape);
-    border-end-end-radius: var(--_navigation-drawer-corner-shape);
-  }
-
-  &.toggle u-elevation {
-    --u-elevation-level: 1;
-  }
-}
-
-.drawer-container {
-  height: 100%;
-  overflow: hidden;
-}
-
-.scrim {
-  --_modal-drawer-open-progress: 0;
-
-  position: absolute;
-  inset-inline-start: 0;
-  inset-block-start: 0;
-  width: 100vw;
-  height: 100vh;
-  background: var(--u-drawer-scrim-color, #{functions.get-color-var(scrim)});
-  pointer-events: none;
-  opacity: calc(var(--_scrim-opacity) * var(--_modal-drawer-open-progress));
-  transition: opacity 375ms linear;
-
-  &.moving {
-    transition: none;
-  }
-
-  &.toggle {
-    --_modal-drawer-open-progress: 1;
-    pointer-events: auto;
-  }
-}
-
-@include mixins.media-breakpoint-up(md) {
-  .content slot {
-    display: flex;
-    flex-direction: column;
-    height: 100vh;
-  }
-}
-
-@include mixins.media-breakpoint-up(lg) {
-
-  .container {
-    --_navigation-width: var(--_navigation-drawer-width);
-
-    &:has(.drawer.toggle) {
-      --_navigation-width: 0;
-    }
-  }
-
-  .drawer {
-    border-radius: 0;
-    inset-inline-start: 0;
-
-    &.toggle {
-      inset-inline-start: var(--_navigation-drawer-width-negative);
-    }
-  }
-
-  u-elevation,
-  .scrim {
-    display: none;
-  }
-}
-

package/src/navigation/drawer-item.styles.scss

@@ -1,49 +0,0 @@
-@use '../scss/functions';
-@use '../scss/mixins';
-
-:host {
-  display: block;
-  --_drawer-item-icon-size: var(--u-drawer-item-icon-size, 1.125rem);
-  --_drawer-item-padding: var(--u-drawer-item-padding, 16px);
-
-  @include mixins.typo(label-l, drawer-item);
-
-  height: var(--u-drawer-item-height, 56px);
-  padding-inline: var(--_drawer-item-padding);
-  margin-inline: calc(var(--_drawer-item-padding) * -1);
-  border-radius: var(--u-drawer-item-shape-corner, #{functions.get-shape-corner-var(full)});
-  color: var(--u-drawer-item-label-inactive-color,  #{functions.get-color-var(on-surface-variant)});
-}
-
-:host(.active),
-:host([active]) {
-  color: var(--u-drawer-item-label-active-color, var(--_color-primary));
-}
-
-:host(:not([has-icon])) .icon,
-:host(:not([has-badge])) .badge {
-  display: none;
-}
-
-.icon {
-  display: flex;
-  width: 1em;
-  height: 1em;
-  align-items: center;
-  justify-content: center;
-  font-size: var(--_drawer-item-icon-size);
-  line-height: 1em;
-  margin-inline-end: var(--u-drawer-item-icon-margin, 16px);
-}
-
-.badge {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  margin-inline-start: auto;
-  padding-inline: var(--u-drawer-item-badge-padding, (12px 8px));
-}
-
-.content {
-  justify-content: flex-start;
-}

package/src/navigation/drawer-item.ts

@@ -1,94 +0,0 @@
-import { html, HTMLTemplateResult } from 'lit';
-import { customElement, property, queryAssignedElements } from 'lit/decorators.js';
-
-import { UmButtonWrapper } from '../shared/button-wrapper.js';
-import { styles } from './drawer-item.styles.js';
-
-@customElement('u-drawer-item')
-export class UmDrawerItem extends UmButtonWrapper {
-
-  static override styles = [
-    UmButtonWrapper.styles,
-    styles,
-  ];
-
-  /**
-   * Whether the drawer item has icon or not
-   *
-   * _Note:_ Readonly
-   */
-  @property({ type: Boolean, attribute: 'has-icon', reflect: true }) hasIcon = false;
-
-  /**
-   * Whether the drawer item has badge or not
-   *
-   * _Note:_ Readonly
-   */
-  @property({ type: Boolean, attribute: 'has-badge', reflect: true }) hasBadge = false;
-
-  /**
-   * Whether the drawer item is active or not
-   *
-   * _Note:_ Readonly
-   */
-  @property({ type: Boolean, reflect: true }) active = false;
-
-  /**
-   * If true, it will not attempt to close de navigation drawer on click
-   */
-  @property({ type: Boolean, attribute: 'keep-drawer-open', reflect: true }) keepDrawerOpen = false;
-
-  @queryAssignedElements({ slot: 'icon', flatten: true })
-  private readonly assignedIcons!: HTMLElement[];
-
-  @queryAssignedElements({ slot: 'badge', flatten: true })
-  private readonly assignedBadges!: HTMLElement[];
-
-  override connectedCallback() {
-    super.connectedCallback();
-    this.setAttribute('aria-labelledby', 'label');
-  }
-
-  protected override renderContent(): HTMLTemplateResult {
-    return html`
-      <div class="icon">
-        <slot
-          name="icon"
-          aria-hidden="true"
-          @slotchange="${this.handleIconSlotChange}"></slot>
-      </div>
-      <span class="label" id="text"><slot></slot></span>
-      <span class="badge">
-        <slot
-          name="badge"
-          @slotchange="${this.handleBadgeSlotChange}"></slot>
-      </span>
-    `;
-  }
-
-  private handleIconSlotChange() {
-    this.hasIcon = this.assignedIcons.length > 0;
-  }
-
-  private handleBadgeSlotChange() {
-    this.hasBadge = this.assignedBadges.length > 0;
-  }
-
-  override handleClick(): void {
-    if (this.keepDrawerOpen) {
-      return;
-    }
-
-    const sideNavigation = this.closest('u-side-navigation');
-
-    if (sideNavigation) {
-      sideNavigation.toggleDrawer = false;
-    }
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'u-drawer-item': UmDrawerItem;
-  }
-}

package/src/navigation/drawer.styles.scss

@@ -1,21 +0,0 @@
-@use "../scss/functions";
-@use "../scss/mixins";
-
-:host {
-  display: block;
-  height: 100vh;
-}
-
-.container {
-  background-color: var(--u-modal-drawer-bg-color, #{functions.get-color-var(surface-container-low)});
-  color: var(--u-drawer-text-color, #{functions.get-color-var(on-secondary-container)});
-  height: 100%;
-  overflow: auto;
-  padding-inline: var(--u-drawer-padding, 28px);
-}
-
-@include mixins.media-breakpoint-up(lg) {
-  .container {
-    background-color: var(--u-standard-drawer-bg-color, var(--u-color-body, #{functions.get-color-var(surface)}));
-  }
-}

package/src/navigation/drawer.ts

@@ -1,27 +0,0 @@
-import { html, HTMLTemplateResult, LitElement } from 'lit';
-import { customElement } from 'lit/decorators.js';
-
-import { styles as baseStyles } from '../shared/base.styles.js';
-import { styles } from './drawer.styles.js';
-
-@customElement('u-drawer')
-export class UmDrawer extends LitElement {
-  static override styles = [
-    baseStyles,
-    styles,
-  ];
-
-  protected override render(): HTMLTemplateResult {
-    return html`
-      <div class="container">
-        <slot></slot>
-      </div>
-    `;
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'u-drawer': UmDrawer;
-  }
-}