@universal-material/web 3.0.138 → 3.0.140

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@universal-material/web",
-  "version": "3.0.138",
+  "version": "3.0.140",
   "description": "Material web components",
   "type": "module",
   "keywords": [

package/remove-scripts-from-package.js

@@ -0,0 +1,9 @@
+import fs from 'fs';
+
+const path = './dist/package.json';
+
+const content = fs.readFileSync(path, 'utf8');
+
+const newContent = content.replaceAll(/,\n\s+"(postinstall|publish)":\s".+?"/g, '');
+
+fs.writeFileSync(path, newContent);

package/rollup.config.js

@@ -0,0 +1,42 @@
+/**
+ * @license
+ * Copyright 2018 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+
+import resolve from '@rollup/plugin-node-resolve';
+import replace from '@rollup/plugin-replace';
+import summary from 'rollup-plugin-summary';
+import { terser } from 'rollup-plugin-terser';
+
+export default {
+  input: './dist/index.js',
+  output: {
+    file: './docs/dist/js/index.js',
+    format: 'esm',
+  },
+  onwarn(warning) {
+    if (warning.code !== 'THIS_IS_UNDEFINED') {
+      console.error(`(!) ${warning.message}`);
+    }
+  },
+  plugins: [
+    replace({'Reflect.decorate': 'undefined'}),
+    resolve(),
+    /**
+     * This minification setup serves the static site generation.
+     * For bundling and minification, check the README.md file.
+     */
+    terser({
+      ecma: 2021,
+      module: true,
+      warnings: true,
+      mangle: {
+        properties: {
+          regex: /^__/,
+        },
+      },
+    }),
+    summary(),
+  ],
+};

package/src/app-bar/top-app-bar.styles.scss

@@ -0,0 +1,108 @@
+@use "../scss/variables";
+@use "../scss/api";
+
+:host {
+  display: block;
+  background-color: var(--u-top-app-bar-bg-color, var(--u-color-body, #{api.get-color-var(surface)}));
+  color: var(--u-top-app-bar-text-color, #{api.get-color-var(on-surface)});
+  transition: background-color 100ms, inset 375ms variables.$awesome-cubic-bezier;
+}
+
+:host([container-scrolled]) {
+  background-color: var(--u-top-app-bar-constrast-bg-color, #{api.get-color-var(surface-container)});
+}
+
+:host(:not([has-leading-icon])) .leading-icon {
+  display: none;
+}
+
+:host(:not([has-trailing-icon])) .trailing-icon {
+  display: none;
+}
+
+slot[name="leading-icon"],
+slot[name="trailing-icon"] {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--u-top-app-bar-icons-gap, 8px);
+}
+
+slot[name="leading-icon"]::slotted(u-icon-button) {
+  color: inherit;
+}
+
+:host([position=absolute]) .container {
+  position: absolute;
+}
+
+:host([position=fixed]) .container {
+  position: fixed;
+  inset-inline: 0;
+  inset-block-start: 0;
+  inset-inline-start: var(--u-app-bar-offset, 0);
+}
+
+:host([position=absolute]),
+:host([position=fixed]) {
+  padding-top: var(--_content-height);
+
+  .container {
+    z-index: var(--u-fixed-app-bar-z-index, 1010);
+  }
+}
+
+.extended-content {
+  display: flex;
+  align-items: flex-end;
+  padding-inline: var(--u-extended-content-inline-padding, 16px);
+}
+
+:host([size=medium]) {
+  .extended-content {
+    @include api.typo(headline-s, extended-content-medium);
+    height: var(--u-extended-content-medium-height, 3.5rem);
+    padding-bottom: var(--u-extended-content-medium-padding-bottom, 24px);
+  }
+}
+
+:host([size=large]) {
+  .extended-content {
+    @include api.typo(headline-m, extended-content-large);
+    height: var(--u-extended-content-medium-large, 6rem);
+    padding-bottom: var(--u-extended-content-large-padding-bottom, 28px);
+  }
+}
+
+.container {
+  background: inherit;
+}
+
+.content {
+  display: flex;
+  align-items: center;
+  background-color: inherit;
+  transition: inherit;
+  min-height: var(--u-top-app-bar-min-height, 56px);
+
+  @include api.media-breakpoint-up(md) {
+    min-height: var(--u-top-app-bar-extended-min-height, 64px);
+  }
+}
+
+.headline {
+  @include api.typo(title-l, top-app-bar-headline);
+  margin-inline: var(--u-headline-margin, 16px);
+
+  @at-root :host([has-leading-icon]) & {
+    margin-inline-start: 0;
+  }
+}
+
+.leading-icon {
+  margin-inline: var(--u-leading-icon-margin, 8px);
+}
+
+.trailing-icon {
+  padding-inline: var(--u-trailing-icon-margin, 8px);
+  margin-inline-start: auto;
+}

package/src/app-bar/top-app-bar.ts

@@ -0,0 +1,198 @@
+import { PropertyValues } from '@lit/reactive-element';
+
+import { html, HTMLTemplateResult, LitElement, nothing } from 'lit';
+import { customElement, property, query, queryAssignedElements } from 'lit/decorators.js';
+
+import { styles as baseStyles } from '../shared/base.styles';
+import { styles } from './top-app-bar.styles.js';
+
+@customElement('u-top-app-bar')
+export class UmTopAppBar extends LitElement {
+  static override styles = [baseStyles, styles];
+
+  /**
+   * Whether the app bar has leading icon or not
+   *
+   * _Note:_ Readonly
+   */
+  @property({ type: Boolean, attribute: 'has-leading-icon', reflect: true })
+  hasLeadingIcon = false;
+
+  /**
+   * Whether the app bar has trailing icon or not
+   *
+   * _Note:_ Readonly
+   */
+  @property({ type: Boolean, attribute: 'has-trailing-icon', reflect: true })
+  hasTrailingIcon = false;
+
+  @property({ reflect: true })
+  position: 'fixed' | 'absolute' | 'static' = 'fixed';
+
+  @property({ reflect: true })
+  size: 'small' | 'medium' | 'large' = 'small';
+
+  @property() headline = '';
+
+  @property({ reflect: true })
+  get scrollContainer(): 'none' | 'window' | string | undefined {
+    return this.attributes.getNamedItem('scrollContainer')?.value;
+  }
+
+  set scrollContainer(idOrElement: string | HTMLElement | undefined) {
+    this.scrollContainerElement?.removeEventListener('scroll', this.#updateScroll);
+
+    if (idOrElement === 'none') {
+      return;
+    }
+
+    this.scrollContainerElement = this.getScrollContainer(idOrElement)!;
+    this.scrollContainerElement?.addEventListener('scroll', this.#updateScroll);
+  }
+
+  @property({ type: Boolean, attribute: 'container-scrolled', reflect: true })
+  containerScrolled = false;
+
+  @queryAssignedElements({ slot: 'leading-icon', flatten: true })
+  private readonly assignedLeadingIcons!: HTMLElement[];
+
+  @queryAssignedElements({ slot: 'trailing-icon', flatten: true })
+  private readonly assignedTrailingIcons!: HTMLElement[];
+
+  @query('.container', true) private readonly _container!: HTMLElement;
+  @query('.extended-content') private readonly _extendedContent!: HTMLElement;
+  @query('.headline') private readonly _headlineElement!: HTMLElement;
+
+  private containerSizeObserver: ResizeObserver | null = null;
+
+  private scrollContainerElement: {
+    addEventListener: typeof window.addEventListener;
+    removeEventListener: typeof window.removeEventListener;
+  } | null = null;
+
+  private getScrollContainer(idOrElement: string | HTMLElement | undefined):
+    | {
+      addEventListener: typeof window.addEventListener;
+      removeEventListener: typeof window.removeEventListener;
+    }
+    | undefined {
+    if (idOrElement instanceof HTMLElement) {
+      return idOrElement;
+    }
+
+    if (idOrElement === 'window') {
+      return window;
+    }
+
+    return document.getElementById(idOrElement!)!;
+  }
+
+  private handleLeadingIconSlotChange() {
+    this.hasLeadingIcon = this.assignedLeadingIcons.length > 0;
+  }
+
+  private handleTrailingIconSlotChange() {
+    this.hasTrailingIcon = this.assignedTrailingIcons.length > 0;
+  }
+
+  override render(): HTMLTemplateResult {
+    const extendedContent = html`
+      <div class="extended-content" part="extended-content">
+        <slot name="extended-content">${this.headline}</slot>
+      </div>
+    `;
+
+    return html`
+      <div class="container" part="container">
+        <div class="content" part="content">
+          <div class="icon leading-icon" part="icon leading">
+            <slot name="leading-icon" @slotchange="${this.handleLeadingIconSlotChange}"></slot>
+          </div>
+          <div class="headline" part="headline">
+            <slot>
+              <span>${this.headline}</span>
+            </slot>
+          </div>
+
+          <div class="icon trailing-icon" part="icon trailing">
+            <slot name="trailing-icon" @slotchange="${this.handleTrailingIconSlotChange}"></slot>
+          </div>
+        </div>
+        <slot name="additional-content"></slot>
+      </div>
+      ${this.size !== 'small' ? extendedContent : nothing}
+    `;
+  }
+
+  protected override updated(_changedProperties: PropertyValues) {
+    super.updated(_changedProperties);
+    this.#updateScroll();
+  }
+
+  override firstUpdated(changedProperties: PropertyValues) {
+    super.firstUpdated(changedProperties);
+    this.containerSizeObserver = new ResizeObserver(() => this.setContentHeightProperty());
+    this.containerSizeObserver.observe(this._container);
+    this.setContentHeightProperty();
+  }
+
+  override connectedCallback() {
+    super.connectedCallback();
+
+    this.scrollContainer = this.scrollContainer || 'window';
+  }
+
+  override disconnectedCallback() {
+    super.disconnectedCallback();
+
+    this.containerSizeObserver!.disconnect();
+    this.containerSizeObserver = null;
+  }
+
+  readonly #updateScroll = () => {
+    const container = this.scrollContainerElement ?? window;
+
+    const extendedContentHeight = Math.max(this._extendedContent?.offsetHeight ?? 0, 0);
+
+    const scrollTop = UmTopAppBar.getScrollTop(container as any);
+
+    this.containerScrolled = scrollTop > extendedContentHeight;
+
+    this._headlineElement.style.opacity = scrollTop >= extendedContentHeight ? '1' : '0';
+
+    if (extendedContentHeight === 0) {
+      return;
+    }
+
+    const scrollOffset = this._extendedContent.offsetHeight * 0.7;
+
+    if (scrollTop > scrollOffset) {
+      this._extendedContent.style.opacity = '0';
+      return;
+    }
+
+    this._extendedContent.style.opacity = 1 - scrollTop / scrollOffset + '';
+  };
+
+  private static getScrollTop(container: HTMLElement & Window): number {
+    if (typeof container.scrollY === 'number') {
+      return container.scrollY;
+    }
+
+    if (typeof container.scrollTop === 'number') {
+      return container.scrollTop;
+    }
+
+    return document.body.scrollTop;
+  }
+
+  private setContentHeightProperty() {
+    this.style.setProperty('--_content-height', `${this._container.clientHeight}px`);
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'u-top-app-bar': UmTopAppBar;
+  }
+}

package/src/button/button-base.styles.scss

@@ -0,0 +1,12 @@
+.icon {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 1em;
+  height: 1em;
+  line-height: 1em;
+}
+
+::slotted([slot=icon]) {
+  display: inline-block;
+}

package/src/button/button-base.ts

@@ -0,0 +1,57 @@
+import { property } from 'lit/decorators.js';
+
+import { UmButtonWrapper } from '../shared/button-wrapper.js';
+import { styles } from './button-base.styles.js';
+
+export abstract class UmButtonBase extends UmButtonWrapper {
+
+  static readonly formAssociated = true;
+
+  static override styles = [UmButtonWrapper.styles, styles];
+
+  @property() type = 'submit';
+
+  @property({ reflect: true }) value = '';
+
+  get form(): HTMLFormElement | null {
+    return this.#elementInternals.form;
+  }
+
+  readonly #elementInternals: ElementInternals;
+
+  constructor() {
+    super();
+    this.#elementInternals = this.attachInternals();
+  }
+
+  protected override handleClick(_: UIEvent): void {
+
+    if (this.type === 'button' || !!this.href) {
+      return;
+    }
+
+    if (!this.form) {
+      return;
+    }
+
+    this.#elementInternals.setFormValue(this.value);
+
+    if (this.type === 'reset') {
+      this.form.reset();
+      return;
+    }
+
+    this.form.addEventListener(
+      'submit',
+      submitEvent => {
+        Object.defineProperty(submitEvent, 'submitter', {
+          configurable: true,
+          enumerable: true,
+          get: () => this,
+        });
+      },
+      { capture: true, once: true },
+    );
+    this.form.requestSubmit();
+  }
+}

package/src/button/button-set.styles.scss

@@ -0,0 +1,16 @@
+:host([stack][alignment=start]) {
+  align-items: flex-start;
+}
+
+:host([stack][alignment=center]) {
+  align-items: center;
+}
+
+:host([stack][alignment=end]) {
+  align-items: flex-end;
+}
+
+:host([stack]) {
+  flex-direction: column;
+  justify-content: flex-start;
+}

package/src/button/button-set.ts

@@ -0,0 +1,23 @@
+import { customElement, property } from 'lit/decorators.js';
+
+import { UmSetBase } from '../shared/sets/set-base.js';
+import { styles } from './button-set.styles.js';
+
+@customElement('u-button-set')
+export class UmButtonSet extends UmSetBase {
+
+  static override styles = [UmSetBase.styles, styles];
+
+  /**
+   * Whether to render the buttons stacked or not
+   */
+  @property({ type: Boolean, reflect: true }) stack = false;
+
+  override alignment: 'start' | 'center' | 'end' = 'end';
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'u-button-set': UmButtonSet;
+  }
+}

package/src/button/button.styles.scss

@@ -0,0 +1,104 @@
+@use "../scss/functions";
+
+:host {
+  --u-common-button-line-height: var(--u-label-large-line-height, 1.25rem);
+  --u-common-button-font-size: var(--u-label-large-font-size, 0.875rem);
+  --u-common-button-font-weight: #{functions.get-font-weight-var(medium)};
+  --_common-button-height: var(--u-common-button-height, 2.5rem);
+  --_common-button-padding: var(--u-common-button-padding, 24px);
+  --_common-button-icon-size: var(--u-common-button-icon-size, 1.125rem);
+  --_common-button-icon-padding: var(--u-common-button-icon-padding, 16px);
+  --_common-button-icon-margin: var(--u-common-button-icon-margin, 8px);
+
+  border-radius: var(--u-common-button-shape-corner, #{functions.get-shape-corner-var(full)});
+  font-family: #{functions.get-font-family-var()};
+  height: var(--u-common-button-height, 40px);
+  font-size: var(--u-common-button-font-size);
+  font-weight: var(--u-common-button-font-weight);
+  padding-inline: var(--_common-button-padding);
+  box-sizing: border-box;
+}
+
+:host([variant=filled]),
+:host([variant=filled][color=primary]) {
+  background-color: var(--u-filled-button-primary-container-color, var(--_color-primary));
+  color: var(--u-filled-button-primary-text-color, #{functions.get-color-var(on-primary)});
+}
+
+:host([variant=filled][color=secondary]) {
+  background-color: var(--u-filled-button-secondary-container-color, #{functions.get-color-var(secondary)});
+  color: var(--u-filled-button-secondary-text-color, #{functions.get-color-var(on-secondary)});
+}
+
+:host([variant=filled][color=tertiary]) {
+  background-color: var(--u-filled-button-tertiary-container-color, #{functions.get-color-var(tertiary)});
+  color: var(--u-filled-button-tertiary-text-color, #{functions.get-color-var(on-tertiary)});
+}
+
+:host([variant=filled][color=error]) {
+  background-color: var(--u-filled-button-error-container-color, #{functions.get-color-var(error)});
+  color: var(--u-filled-button-error-text-color, #{functions.get-color-var(on-error)});
+}
+
+:host([variant=tonal]) {
+  background-color: var(--u-tonal-button-bg-color, #{functions.get-color-var(secondary-container)});
+  color: var(--u-tonal-button-text-color, #{functions.get-color-var(on-secondary-container)});
+}
+
+:host([variant=elevated]) {
+  background-color: var(--u-elevated-button-bg-color, #{functions.get-color-var(surface-container-low)});
+  color: var(--u-tonal-button-text-color, #{functions.get-color-var(on-secondary-container)});
+}
+
+@media (hover: hover) {
+  :host([variant=filled]:hover:not(:focus-within):not(:active)),
+  :host([variant=tonal]:hover:not(:focus-within):not(:active)) {
+    --u-elevation-level: var(--u-filled-button-hover-elevation-level, 1);
+  }
+}
+
+:host([variant=text]) {
+  color: var(--u-text-button-text-color, var(--_color-primary));
+}
+
+:host([variant=outlined]) {
+  color: var(--u-outlined-button-text-color, var(--u-text-button-text-color, var(--_color-primary)));
+  border: 1px solid var(--u-outlined-button-outline-color, #{functions.get-color-var(outline)});
+}
+
+:host([variant=elevated]) {
+  --u-elevation-level: var(--u-elevated-button-elevation-level, 1);
+  color: var(--u-elevated-button-text-color, var(--_color-primary));
+}
+
+:host([disabled][variant=outlined]) {
+  background-color: transparent !important;
+  border-color: var(--u-outlined-button-disabled-border-color, #{functions.get-color-transparency-mix(functions.get-color-var(on-surface), var(--u-outlined-button-disabled-border-opacity, 12%))}) !important;
+}
+
+@media (hover: hover) {
+  :host([variant=elevated]:hover) {
+    --u-elevation-level: var(--u-elevated-button-hover-elevation-level, 2);
+  }
+}
+
+:host([has-icon]) {
+  padding-inline: var(--_common-button-icon-padding) var(--_common-button-padding);
+}
+
+:host([has-icon][trailing-icon]) {
+  padding-inline: var(--_common-button-padding) var(--_common-button-icon-padding);
+}
+
+:host(:not([has-icon])) .icon {
+  display: none;
+}
+
+.icon {
+  font-size: var(--_common-button-icon-size);
+  margin-inline-end: var(--_common-button-icon-margin);
+}
+
+:host([trailing-icon]) .icon {
+  margin-inline: var(--_common-button-icon-margin) 0;
+}

package/src/button/button.ts

@@ -0,0 +1,60 @@
+import { html, HTMLTemplateResult, nothing } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+
+import { UmButtonBase } from './button-base.js';
+import { styles } from './button.styles.js';
+
+import '../ripple/ripple.js';
+
+export type UmButtonVariant = 'filled' | 'tonal' | 'elevated' | 'outlined' | 'text';
+export type UmButtonColor = 'primary' | 'secondary' | 'tertiary' | 'error' | undefined;
+
+@customElement('u-button')
+export class UmButton extends UmButtonBase {
+  static override styles = [UmButtonBase.styles, styles];
+
+  /**
+   * The Button variant to render
+   */
+  @property({ reflect: true }) variant: UmButtonVariant = 'filled';
+
+  /**
+   * The Button color
+   *
+   1
+   */
+  @property({ reflect: true }) color: UmButtonColor;
+
+  @property({ type: Boolean, attribute: 'trailing-icon', reflect: true }) trailingIcon = false;
+
+  /**
+   * Whether the button has icon or not
+   *
+   * _Note:_ Readonly
+   */
+  @property({ type: Boolean, attribute: 'has-icon', reflect: true }) hasIcon = false;
+
+  protected override renderContent(): HTMLTemplateResult {
+    const icon = html`
+      <span class="icon">
+        <slot name="icon" aria-hidden="true" @slotchange="${this.handleSlotChange}"></slot>
+      </span>
+    `;
+
+    return html`
+      ${this.trailingIcon ? nothing : icon}
+      <span id="text"><slot></slot></span>
+      ${this.trailingIcon ? icon : nothing}
+    `;
+  }
+
+  private handleSlotChange(e: Event) {
+    this.hasIcon = (e.target as HTMLSlotElement).assignedElements({ flatten: true }).length > 0;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'u-button': UmButton;
+  }
+}