@universal-material/web 3.0.140 → 3.0.141

package/remove-scripts-from-package.js

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

@@ -1,42 +0,0 @@
-/**
- * @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

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

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

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

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

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

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

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

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