@universal-material/web 3.0.138 → 3.0.140

package/src/snackbar/snackbar.ts

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

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

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

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

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

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

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