@universal-material/web 3.0.140 → 3.0.142

package/src/snackbar/snackbar.ts

@@ -1,156 +0,0 @@
-import { html, HTMLTemplateResult, LitElement, nothing } 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 './snackbar.styles.js';
-
-import '../button/button.js';
-import '../button/icon-button.js';
-
-export interface SnackbarConfig {
-  label: string;
-  duration?: SnackbarDuration;
-  buttonLabel?: string;
-  showClose?: boolean;
-}
-
-export enum SnackbarDuration {
-  short = 2500,
-  long = 5000,
-  infinite = -1,
-}
-
-@customElement('u-snackbar')
-export class UmSnackbar extends LitElement {
-  static override styles = [baseStyles, styles];
-
-  @property({ reflect: true }) label = '';
-  @property({ reflect: true }) buttonLabel = '';
-  @property({ type: Boolean, attribute: 'show-close', reflect: true })
-  showClose = false;
-  @property({ type: Boolean, reflect: true }) dismissed = false;
-
-  private duration!: SnackbarDuration | number;
-  @query('.snackbar') private readonly snackbar!: HTMLElement;
-
-  override render(): HTMLTemplateResult {
-    const classes = { dismiss: this.dismissed };
-
-    return html`
-      <div class="snackbar ${classMap(classes)}">
-        <div class="label">${this.label}</div>
-        ${this.renderButton()} ${this.renderCloseButton()}
-      </div>
-    `;
-  }
-
-  private renderButton() {
-    return this.buttonLabel
-      ? html`
-          <u-button variant="text">${this.buttonLabel}</u-button>
-        `
-      : nothing;
-  }
-
-  private renderCloseButton() {
-    return this.showClose
-      ? html`
-          <u-icon-button @click=${this.dismiss.bind(this)}>
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              height="1em"
-              viewBox="0 -960 960 960"
-              width="1em"
-              fill="currentColor">
-              <path
-                d="m256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z" />
-            </svg>
-          </u-icon-button>
-        `
-      : nothing;
-  }
-
-  dismiss(): void {
-    if (this.dismissed) {
-      return;
-    }
-
-    this.dismissed = true;
-
-    const onAnimationEnd = () => {
-      this.snackbar.removeEventListener('animationend', onAnimationEnd);
-      this.remove();
-
-      UmSnackbar.showNext();
-    };
-
-    this.snackbar.addEventListener('animationend', onAnimationEnd);
-  }
-
-  private static _queue: UmSnackbar[] = [];
-  private static _consuming: boolean;
-
-  static show(label: string): UmSnackbar;
-  static show(config: SnackbarConfig): UmSnackbar;
-  static show(configOrLabel: SnackbarConfig | string): UmSnackbar {
-    if (typeof configOrLabel === 'string') {
-      configOrLabel = {
-        label: configOrLabel,
-      };
-    }
-
-    configOrLabel.duration ??= SnackbarDuration.short;
-
-    const snackbar = this.createSnackbar(configOrLabel);
-    UmSnackbar._queue.push(snackbar);
-
-    if (!UmSnackbar._consuming) {
-      UmSnackbar.consumeQueue();
-    }
-
-    return snackbar;
-  }
-
-  private static consumeQueue() {
-    if (UmSnackbar._queue.length) {
-      UmSnackbar._consuming = true;
-      UmSnackbar.showNext();
-    }
-  }
-
-  private static showNext() {
-    if (!UmSnackbar._queue.length) {
-      UmSnackbar._consuming = false;
-      return;
-    }
-
-    const snackbar = UmSnackbar._queue[0];
-
-    UmSnackbar._queue = UmSnackbar._queue.slice(1);
-
-    document.body.appendChild(snackbar);
-
-    if (snackbar.duration === -1) {
-      return;
-    }
-
-    setTimeout(() => snackbar.dismiss(), snackbar.duration);
-  }
-
-  private static createSnackbar(config: SnackbarConfig): UmSnackbar {
-    const snackbar = document.createElement('u-snackbar');
-    snackbar.label = config.label;
-    snackbar.buttonLabel = config.buttonLabel!;
-    snackbar.showClose = config.showClose!;
-    snackbar.duration = config.duration!;
-
-    return snackbar;
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'u-snackbar': UmSnackbar;
-  }
-}

package/src/switch/switch-list-item.ts

@@ -1,15 +0,0 @@
-import { customElement } from 'lit/decorators.js';
-
-import { mixinSelectionControlListItem } from '../shared/selection-control/selection-control-list-item.js';
-import { UmSwitch } from './switch.js';
-
-@customElement('u-switch-list-item')
-export class UmSwitchListItem extends mixinSelectionControlListItem(UmSwitch) {
-
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'u-switch-list-item': UmSwitchListItem;
-  }
-}

package/src/switch/switch.styles.scss

@@ -1,87 +0,0 @@
-@use "../scss/api";
-
-$control-name: switch;
-
-:host {
-  --_width: 3.25rem;
-  --_height: 2rem;
-  --_state-layer-padding: 0;
-  --_selected-track-background: var(--u-switch-track-bg-color, #{api.get-color-var(primary)});
-  --_state-layer-size: var(--u-switch-state-layer-size, 2.5rem);
-  --_unselected-color: var(--u-switch-track-outline-color, #{api.get-color-var(outline)});
-  --_unselected-handle-size: var(--u-swich-unselected-handle-size, 1rem);
-  --_selected-handle-size: var(--u-swich-unselected-handle-size, 1.5rem);
-  --_active-handle-size: var(--u-swich-unselected-handle-size, 1.75rem);
-}
-
-.indicator-container {
-  display: flex;
-  justify-content: flex-end;
-  align-items: center;
-  width: var(--_height);
-  transition: width 200ms;
-}
-
-.state-layer,
-.indicator {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-.indicator {
-  width: var(--_height);
-  height: var(--_height);
-}
-
-.state-layer {
-  flex-shrink: 0;
-  width: var(--_state-layer-size);
-  height: var(--_state-layer-size);
-  border-radius: #{api.get-shape-corner-var(full)};
-}
-
-.handle {
-  width: var(--_unselected-handle-size);
-  height: var(--_unselected-handle-size);
-  background-color: var(--u-switch-unselected-handle-color, var(--_unselected-color));
-  border-radius: var(--u-switch-handle-shape-corner, #{api.get-shape-corner-var(full)});
-  transition: background 200ms, width 200ms, height 200ms;
-}
-
-input {
-  border: var(--u-switch-track-width, .125rem) solid var(--u-switch-unselected-track-outline-color, var(--_unselected-color));
-  background-color: var(--u-switch-unselected-track-bg-color, #{api.get-color-var(surface-container-highest)});
-  transition: background 200ms, border-color 200ms;
-
-  &:checked {
-    background-color: var(--_selected-track-background);
-    border-color: var(--_selected-track-background);
-
-    ~ .indicator-container {
-      width: 100%;
-
-      .handle {
-        width: var(--_selected-handle-size);
-        height: var(--_selected-handle-size);
-        background-color: var(--u-switch-selected-handle-color, #{api.get-color-var(on-primary)});
-      }
-    }
-  }
-}
-
-@media (hover: hover) {
-  :host(:not([disabled]):hover) {
-    .state-layer {
-      background-color: #{api.get-color-transparency-mix(api.get-color-var(on-surface), var(--u-switch-state-layer-hover-opacity, api.get-state-layer-opacity-var(hover)))};
-    }
-  }
-}
-
-:host(:not([disabled]):active) {
-
-  .indicator-container .handle {
-    width: var(--_active-handle-size);
-    height: var(--_active-handle-size);
-  }
-}

package/src/switch/switch.ts

@@ -1,32 +0,0 @@
-import { html, HTMLTemplateResult } from 'lit';
-import { customElement } from 'lit/decorators.js';
-
-import { UmSelectionControl } from '../shared/selection-control/selection-control.js';
-import { styles } from './switch.styles.js';
-
-@customElement('u-switch')
-export class UmSwitch extends UmSelectionControl {
-  static override styles = [UmSelectionControl.styles, styles];
-
-  constructor() {
-    super();
-  }
-
-  protected override renderRipple = false;
-
-  protected override renderIndicator(): HTMLTemplateResult {
-    return html`
-      <div class="indicator">
-        <div class="state-layer">
-          <div class="handle"></div>
-        </div>
-      </div>
-    `;
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'u-switch': UmSwitch;
-  }
-}

package/src/tab-bar/tab-bar.styles.scss

@@ -1,77 +0,0 @@
-@use "../scss/api";
-
-:host {
-  position: relative;
-  display: block;
-  --_active-color: var(--u-tab-active-color, #{api.get-color-var(primary)});
-  --_active-label-color: var(--u-tab-active-label-color, #{api.get-color-var(primary)});
-  overflow: hidden;
-}
-
-.container {
-  position: relative;
-  display: flex;
-  flex-direction: row;
-  width: 100%;
-  min-height: var(--u-tab-bar-min-height, 48px);
-  overflow: auto;
-  scroll-padding-inline: 128px;
-  scrollbar-width: none;
-
-  &::-webkit-scrollbar {
-    display: none;
-  }
-}
-
-.scroll-indicator {
-  --u-elevation-level: 2;
-
-  cursor: pointer;
-  position: absolute;
-  display: none;
-  align-items: center;
-  justify-content: center;
-  top: 0;
-  width: var(--u-tab-bar-scroll-indicator-size, 32px);
-  background-color: var(--u-scroll-indicator-bg-color, var(--u-current-bg-color, #{api.get-color-var(surface)}));
-  font-size: 1.5rem;
-  height: 100%;
-  z-index: 1;
-
-  &.active {
-    @media (hover: hover) {
-      @at-root :host(:hover) & {
-       display: flex;
-      }
-    }
-  }
-}
-
-.scroll-left {
-  left: 0;
-}
-
-.scroll-right {
-  right: 0;
-}
-
-.tab-indicator {
-  position: absolute;
-  background-color: var(--_active-color);
-  height: 3px;
-  bottom: 0;
-  transition: inset 200ms ease-out, width 200ms ease-out;
-}
-
-.container:not(.secondary) {
-  .tab-indicator {
-    border-radius: var(--u-tab-bar-primary-border-radius, 9999px 9999px 0 0);
-  }
-}
-
-.secondary {
-  --_active-label-color: var(--u-tab-secondary-active-label-color, #{api.get-color-var(on-surface)});
-  --_tab-content-direction: row;
-  --_tab-content-gap: 8px;
-  --u-tab-with-icon-height: var(--u-tab-secondary-with-icon-height, 48px);
-}

package/src/tab-bar/tab-bar.ts

@@ -1,232 +0,0 @@
-import { html, LitElement, TemplateResult } from 'lit';
-import {
-  customElement,
-  property,
-  query,
-  queryAssignedElements,
-} from 'lit/decorators.js';
-import { classMap } from 'lit/directives/class-map.js';
-
-import { styles as baseStyles } from '../shared/base.styles.js';
-import { styles } from './tab-bar.styles.js';
-import { UmTab } from './tab.js';
-
-@customElement('u-tab-bar')
-export class UmTabBar extends LitElement {
-  static override styles = [baseStyles, styles];
-
-  #tabs: UmTab[] = [];
-  #activeTab: UmTab | null = null;
-  readonly #resizeObserver: ResizeObserver = new ResizeObserver(() => {
-    this._setScrollIndicatorsActive();
-    this._updateTabIndicator();
-  });
-
-  @property({ reflect: true }) variant: 'primary' | 'secondary' = 'primary';
-
-  @query('.scroll-left') private readonly _scrollLeft!: HTMLElement;
-  @query('.scroll-right') private readonly _scrollRight!: HTMLElement;
-  @query('.container') private readonly _container!: HTMLElement;
-  @query('.tab-indicator') private readonly _tabIndicator?: HTMLElement;
-
-  @queryAssignedElements({ flatten: true }) assignedElements!: HTMLElement[];
-
-  get activeTabIndex(): number {
-    if (!this.activeTab) {
-      return -1;
-    }
-
-    return this.#tabs.indexOf(this.activeTab);
-  }
-
-  set activeTabIndex(index: number) {
-    this.activeTab = this.#tabs[index];
-  }
-
-  get activeTab(): UmTab | null {
-    return this.#activeTab;
-  }
-
-  set activeTab(activeTab: UmTab | null) {
-    if (!this.#tabs.length) {
-      this.#activeTab = null;
-      this._updateTabIndicator();
-      return;
-    }
-
-    if (
-      !activeTab
-      || this.#activeTab === activeTab
-      || !this.#tabs.includes(activeTab)
-    ) {
-      return;
-    }
-
-    const previouslyActiveTab = this.#activeTab;
-    this.#activeTab = activeTab;
-
-    previouslyActiveTab?.requestUpdate();
-
-    activeTab.scrollIntoView({ block: 'nearest', behavior: 'smooth' });
-    activeTab.requestUpdate();
-    this._updateTabIndicator();
-  }
-
-  override attributeChangedCallback(
-    name: string,
-    _: string | null,
-    __: string | null,
-  ) {
-    if (name === 'variant') {
-      this._updateTabIndicator();
-    }
-  }
-
-  override connectedCallback() {
-    super.connectedCallback();
-
-    this.#attach();
-  }
-
-  protected override render(): TemplateResult {
-    const classes = { secondary: this.variant === 'secondary' };
-
-    return html`
-      <div
-        class="scroll-indicator scroll-left active"
-        @click=${this.#scrollToLeft}>
-        <u-elevation></u-elevation>
-        <u-ripple></u-ripple>
-        <slot name="scroll-left">
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            height="1em"
-            viewBox="0 -960 960 960"
-            width="1em"
-            fill="currentColor">
-            <path d="M560-240 320-480l240-240 56 56-184 184 184 184-56 56Z" />
-          </svg>
-        </slot>
-      </div>
-      <div
-        class="container ${classMap(classes)}"
-        @scrollend=${this.#handleContainerScrollEnd}>
-        <slot @slotchange=${this.#handleSlotChange}></slot>
-        <div class="tab-indicator"></div>
-      </div>
-      <div
-        class="scroll-indicator scroll-right active"
-        @click=${this.#scrollToRight}>
-        <u-elevation></u-elevation>
-        <u-ripple></u-ripple>
-        <slot name="scroll-right">
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            height="1em"
-            viewBox="0 -960 960 960"
-            width="1em"
-            fill="currentColor">
-            <path d="M504-480 320-664l56-56 240 240-240 240-56-56 184-184Z" />
-          </svg>
-        </slot>
-      </div>
-    `;
-  }
-
-  constructor() {
-    super();
-    this.#resizeObserver.observe(this);
-  }
-
-  readonly #handleSlotChange = (e: Event) => {
-    const slot = e.target as HTMLSlotElement;
-    this.#tabs =
-      slot.assignedElements({ flatten: true }).filter(element => element instanceof UmTab);
-
-    for (const tab of this.#tabs) {
-      tab._bar = this;
-    }
-
-    if (this.activeTabIndex > -1) {
-      return;
-    }
-
-    this.activeTab = this.#tabs[0];
-  };
-
-  readonly #handleContainerScrollEnd = () => {
-    this._setScrollIndicatorsActive();
-  };
-
-  _updateTabIndicator() {
-    if (!this._tabIndicator) {
-      return;
-    }
-
-    if (!this.activeTab) {
-      this._tabIndicator.style.left = '0';
-      this._tabIndicator.style.width = '0';
-      return;
-    }
-
-    const tabStyles = getComputedStyle(this.activeTab);
-    const padding =
-      this.variant === 'primary' ? parseInt(tabStyles.paddingInline, 10) : 0;
-
-    this._tabIndicator.style.left = `${this.activeTab.offsetLeft + padding}px`;
-    this._tabIndicator.style.width = `${
-      this.activeTab.offsetWidth - padding * 2
-    }px`;
-  }
-
-  readonly #scrollToLeft = () => {
-    this._container.scrollBy({
-      left: this._container.offsetWidth / -2,
-      behavior: 'smooth',
-    });
-  };
-
-  readonly #scrollToRight = () => {
-    this._container.scrollBy({
-      left: this._container.offsetWidth / 2,
-      behavior: 'smooth',
-    });
-  };
-
-  _setScrollIndicatorsActive() {
-    const scrollSafeMargin = 1;
-
-    const scrollLength =
-      this._container.scrollWidth - this._container.offsetWidth;
-
-    const isRtl = getComputedStyle(this._container).direction === 'rtl';
-    const scrollStart = isRtl
-      ? this._container.scrollLeft + scrollLength
-      : this._container.scrollLeft;
-
-    if (scrollStart - scrollSafeMargin <= 0) {
-      this._container.scrollBy(-1, 0);
-      this._scrollLeft.classList.remove('active');
-    } else {
-      this._scrollLeft.classList.add('active');
-    }
-
-    if (scrollStart >= scrollLength - scrollSafeMargin) {
-      this._container.scrollBy(1, 0);
-      this._scrollRight.classList.remove('active');
-    } else {
-      this._scrollRight.classList.add('active');
-    }
-  }
-
-  async #attach(): Promise<void> {
-    await this.updateComplete;
-    this._setScrollIndicatorsActive();
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'u-tab-bar': UmTabBar;
-  }
-}

package/src/tab-bar/tab.styles.scss

@@ -1,53 +0,0 @@
-@use "../scss/api";
-
-:host {
-  --u-focus-ring-outline-offset: -4px;
-  --_tab-height: var(--u-tab-height, 48px);
-
-  display: block;
-  flex: .5;
-  padding-inline: var(--u-tab-padding, 16px);
-}
-
-.tab-content {
-  display: flex;
-  flex-direction: var(--_tab-content-direction, column);
-  align-items: center;
-  justify-content: center;
-  max-width: 100%;
-  height: var(--_tab-height);
-  gap: var(--_tab-content-gap, 0);
-}
-
-.has-icon {
-  --_tab-height: var(--u-tab-with-icon-height, 64px);
-}
-
-:host(.force-focus-ring) .button,
-.button:focus-visible {
-  border-radius: #{api.get-spacing-var(small)};
-}
-
-.label {
-  @include api.typo(title-s, tab-label);
-  color: var(--u-tab-label-text-color, #{api.get-color-var(on-surface-variant)});
-  max-width: 100%;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  overflow: hidden;
-}
-
-.icon {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 1.5rem;
-  color: var(--u-tab-label-text-color, #{api.get-color-var(on-surface-variant)});
-}
-
-.active {
-  .icon,
-  .label {
-    color: var(--_active-label-color);
-  }
-}