@universal-material/web 3.0.140 → 3.0.142

package/src/button/fab.styles.scss

@@ -1,90 +0,0 @@
-@use "../scss/functions";
-
-:host {
-  aspect-ratio: 1;
-  --u-elevation-level: var(--u-fab-button-elevation-level, 3);
-}
-
-:host([lowered]) {
-  --u-elevation-level: var(--u-fab-button-elevation-level, 1);
-}
-
-@media (hover: hover) {
-  :host(:hover:not(:focus-within):not(:active)) {
-    --u-elevation-level: var(--u-fab-button-hover-elevation-level, 4);
-  }
-
-  :host(:hover:not(:focus-within):not(:active)[lowered]) {
-    --u-elevation-level: var(--u-fab-button-elevation-level, 2);
-  }
-}
-
-@media (hover: hover) {
-  :host(:hover:not(:focus-within):not(:active)) {
-    --u-elevation-level: var(--u-fab-button-hover-elevation-level, 4);
-  }
-}
-
-:host([size="small"]) {
-  width: var(--u-fab-button-small-size, 40px);
-  border-radius: var(--u-fab-button-medium-shape-corner, #{functions.get-shape-corner-var(medium)});
-}
-
-:host([size="large"]) {
-  width: var(--u-fab-button-medium-size, 96px);
-  border-radius: var(--u-fab-button-medium-shape-corner, #{functions.get-shape-corner-var(extra-large)});
-}
-
-:host([extended]),
-:host([size="medium"]) {
-  width: var(--u-fab-button-medium-size, 56px);
-  border-radius: var(--u-fab-button-medium-shape-corner, #{functions.get-shape-corner-var(large)});
-}
-
-:host([size="large"]) .icon {
-  font-size: var(--u-fab-button-icon-size, 2rem);
-}
-
-:host([extended]) .icon,
-:host([size="small"]) .icon,
-:host([size="medium"]) .icon {
-  font-size: var(--u-fab-button-icon-size, 1.5rem);
-}
-
-:host([extended]) {
-  width: auto;
-  height: var(--u-extended-fab-button-height, 56px);
-  aspect-ratio: auto;
-  min-width: var(--u-extended-fab-button-min-width, 80px);
-  padding-inline: var(--u-extended-fab-button-padding, 16px 24px);
-}
-
-:host([extended]) .icon {
-  margin-inline-end: var(--u-extended-fab-button-icon-margin, 12px);
-}
-
-:host([color="primary"]) {
-  background-color: var(--u-fab-button-primary-bg-color, #{functions.get-color-var(primary-container)});
-  color: var(--u-fab-button-primary-text-color, #{functions.get-color-var(on-primary-container)});
-}
-
-:host([color="secondary"]) {
-  background-color: var(--u-fab-button-secondary-bg-color, #{functions.get-color-var(secondary-container)});
-  color: var(--u-fab-button-secondary-text-color, #{functions.get-color-var(on-secondary-container)});
-}
-
-:host([color="tertiary"]) {
-  background-color: var(--u-fab-button-tertiary-bg-color, #{functions.get-color-var(tertiary-container)});
-  color: var(--u-fab-button-tertiary-text-color, #{functions.get-color-var(on-tertiary-container)});
-}
-
-:host([color="branded"]),
-:host([color="surface"]) {
-  background-color: var(--u-fab-button-surface-bg-color, #{functions.get-color-var(surface-container-high)});
-  color: var(--u-fab-button-surface-text-color, var(--_color-primary));
-}
-
-:host([color="branded"][lowered]),
-:host([color="surface"][lowered]) {
-  background-color: var(--u-fab-button-surface-bg-color, #{functions.get-color-var(surface-container-low)});
-}

package/src/button/fab.ts

@@ -1,54 +0,0 @@
-import { html, HTMLTemplateResult, nothing } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
-
-import { UmButtonBase } from './button-base.js';
-import { styles } from './fab.styles.js';
-
-export type UmFabColor = 'primary' | 'secondary' | 'tertiary' | 'surface' | 'branded';
-export type UmFabSize = 'small' | 'medium' | 'large';
-
-@customElement('u-fab')
-export class UmFab extends UmButtonBase {
-
-  static override styles = [UmButtonBase.styles, styles];
-
-  /**
-   * The FAB color variant to render.
-   */
-  @property({ reflect: true }) color: UmFabColor = 'primary';
-
-  /**
-   * The size of the FAB.
-   */
-  @property({ reflect: true }) size: UmFabSize = 'medium';
-
-  /**
-   * The text to display the FAB.
-   */
-  @property({ reflect: true }) label: string | null = null;
-
-  /**
-   * Lowers the FAB's elevation.
-   */
-  @property({ type: Boolean, reflect: true }) lowered = false;
-
-  @property({ type: Boolean, reflect: true })
-  get extended(): boolean {
-    return !!this.label;
-  }
-
-  protected override renderContent(): HTMLTemplateResult {
-    const labelTag = html`<span>${this.label}</span>`;
-
-    return html`
-      <span class="icon" aria-hidden="true"><slot></slot></span>
-      ${this.label ? labelTag : nothing}
-    `;
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'u-fab': UmFab;
-  }
-}

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

@@ -1,80 +0,0 @@
-@use "../scss/functions";
-
-:host {
-  --_icon-button-size: var(--u-icon-button-size, 2.5rem);
-  --_color-surface-container-highest: #{functions.get-color-var(surface-container-highest)};
-
-  width: var(--_icon-button-size);
-  height: var(--_icon-button-size);
-  border-radius: var(--u-icon-button-shape-corner, 9999px);
-  font-family: #{functions.get-font-family-var()};
-}
-
-.icon {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  font-size: var(--u-icon-button-icon-size, 1.5rem);
-
-  &.icon-selected {
-    display: none;
-  }
-}
-
-:host([selected][has-selection-icon]) {
-  .icon:not(.icon-selected) {
-    display: none;
-  }
-
-  .icon.icon-selected {
-    display: inline-block;
-  }
-}
-
-:host([variant="filled"]) {
-  background-color: var(--u-filled-icon-button-unselected-bg-color, var(--_color-surface-container-highest));
-  color: var(--u-filled-icon-button-unselected-text-color, var(--_color-primary));
-}
-
-:host([variant="tonal"]) {
-  background-color: var(--u-total-icon-button-unselected-bg-color, var(--_color-surface-container-highest));
-  color: var(--u-tonal-icon-button-unselected-text-color, #{functions.get-color-var(on-surface-variant)});
-}
-
-:host([selected][variant="filled"]),
-:host([variant="filled"]:not([has-selection-icon])) {
-  background-color: var(--u-filled-icon-button-bg-color, var(--_color-primary));
-  color: var(--u-filled-icon-button-text-color, #{functions.get-color-var(on-primary)});
-}
-
-:host([selected][variant="tonal"]),
-:host([variant="tonal"]:not([has-selection-icon])) {
-  background-color: var(--u-tonal-icon-button-bg-color, #{functions.get-color-var(secondary-container)});
-  color: var(--u-tonal-icon-button-text-color, #{functions.get-color-var(on-secondary-container)});
-}
-
-:host([variant="standard"]),
-:host([variant="outlined"]) {
-  color: var(--u-standard-icon-button-color, #{functions.get-color-var(on-surface-variant)});
-}
-
-:host([variant="outlined"]) {
-  border: 1px solid #{functions.get-color-var(outline)};
-  color: var(--u-outlined-icon-button-color , var(--u-standard-icon-button-color, #{functions.get-color-var(on-surface-variant)}));
-}
-
-:host([selected][variant="outlined"]) {
-  border: none;
-  background-color: var(--u-outlined-icon-button-selected-bg-color, #{functions.get-color-var(inverse-surface)});
-  color: var(--u-outlined-icon-button-selected-text-color, #{functions.get-color-var(on-inverse-surface)});
-}
-
-:host([selected][variant="standard"]) {
-  color: var(--u-standard-icon-button-selected-text-color, var(--_color-primary));
-  background-color: var(--u-standard-icon-button-selected-bg-color, transparent);
-}
-
-:host([disabled][variant=outlined]) {
-  background-color: transparent !important;
-  border-color: var(--u-outlined-icon-button-disabled-border-color, #{functions.get-color-transparency-mix(functions.get-color-var(on-surface), var(--u-outlined-icon-button-disabled-border-opacity, 12%))}) !important;
-}

package/src/button/icon-button.ts

@@ -1,75 +0,0 @@
-import { html, HTMLTemplateResult } from 'lit';
-import { customElement, property, queryAssignedElements } from 'lit/decorators.js';
-
-import { UmButtonBase } from './button-base.js';
-import { styles } from './icon-button.styles.js';
-
-export type UmIconButtonVariant = 'standard' | 'filled' | 'tonal' | 'outlined';
-
-@customElement('u-icon-button')
-export class UmIconButton extends UmButtonBase {
-
-  static override styles = [UmButtonBase.styles, styles];
-
-  @property({ reflect: true }) variant: UmIconButtonVariant = 'standard';
-
-  /**
-   * When true, the button will toggle between selected and unselected
-   * states
-   */
-  @property({ type: Boolean }) toggle = false;
-
-  @property({ type: Boolean, attribute: 'has-selection-icon', reflect: true }) hasSelectionIcon = false;
-
-  /**
-   * Sets the selected state. When false, displays the default icon. When true,
-   * displays the selected icon, or the default icon If no `slot="selected"`
-   * icon is provided.
-   */
-  @property({ type: Boolean, reflect: true }) selected = false;
-
-  /**
-   * The `aria-label` of the button when the button is toggleable and selected.
-   */
-  @property({ attribute: 'aria-label-selected' }) ariaLabelSelected = '';
-
-  @queryAssignedElements({ slot: 'selected', flatten: true })
-  private readonly selectedIcons!: HTMLElement[];
-
-  protected override renderContent(): HTMLTemplateResult {
-
-    return html`
-      <span class="icon" aria-hidden="true"><slot></slot></span>
-      <span class="icon icon-selected" aria-hidden="true">
-        <slot name="selected" @slotchange="${this.handleSlotChange}"></slot>
-      </span>
-    `;
-  }
-
-  protected override handleClick(event: UIEvent): void {
-    super.handleClick(event);
-
-    if (!this.toggle) {
-      return;
-    }
-
-    this.selected = !this.selected;
-    this.dispatchEvent(new Event('change', { bubbles: true }));
-  }
-
-  override getAriaLabel(): string | null {
-    return this.selected
-      ? this.ariaLabelSelected || super.getAriaLabel()
-      : super.getAriaLabel();
-  }
-
-  private handleSlotChange() {
-    this.hasSelectionIcon = this.selectedIcons.length > 0;
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'u-icon-button': UmIconButton;
-  }
-}

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

@@ -1,13 +0,0 @@
-:host(:not([disabled])) .container {
-  cursor: pointer;
-}
-
-.button {
-  position: absolute;
-  inset: 0;
-  margin: 0;
-  padding: 0;
-  background: transparent;
-  border: none;
-  appearance: none;
-}

package/src/button-field/button-field.ts

@@ -1,53 +0,0 @@
-import { html, TemplateResult } from 'lit';
-import { customElement, property, query } from 'lit/decorators.js';
-import { html as staticHtml } from 'lit/static-html.js';
-
-import { UmTextFieldBase } from '../shared/text-field-base/text-field-base.js';
-import { styles } from './button-field.styles';
-
-@customElement('u-button-field')
-export class UmButtonField extends UmTextFieldBase {
-  static override styles = [UmTextFieldBase.styles, styles];
-
-  protected _value = '';
-  @property()
-  get value() {
-    return this._value;
-  }
-
-  set value(value: string) {
-    this._value = value;
-    this.empty = !value;
-    this.elementInternals.setFormValue(value);
-  }
-
-  @query('.button', true) _button!: HTMLButtonElement;
-  @query('.input', true) _input!: HTMLElement;
-
-  protected override renderControl(): TemplateResult {
-    return staticHtml`
-      <button 
-         class="button"
-         aria-expanded="false"
-         aria-owns="select"
-         ?disabled=${this.disabled}></button>
-      <div class="input">
-        <slot>${this.value}</slot>
-      </div>
-      <u-ripple ?disabled=${this.disabled}></u-ripple>`;
-  }
-
-  protected override renderAfterContent(): TemplateResult {
-    return html`
-      <u-menu>
-        <slot></slot>
-      </u-menu>
-    `;
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'u-button-field': UmButtonField;
-  }
-}

package/src/calendar/calendar-adapter.ts

@@ -1,5 +0,0 @@
-export interface CalendarAdapter {
-  getWeekDays(locale: string): string[];
-  getDay(date: Date): string;
-  getMonth(date: Date): string;
-}

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

@@ -1,82 +0,0 @@
-@use '../scss/functions';
-@use '../scss/api';
-
-:host {
-  --_date-size: var(--u-calendar-date-size, 40px);
-  display: inline-block;
-}
-
-.calendar {
-  display: grid;
-  grid-template-columns: repeat(7, 48px);
-  align-items: center;
-}
-
-.calendar-item {
-  --u-ripple-border-radius: 9999px;
-  position: relative;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 48px;
-  height: 48px;
-
-  &:has(.date) {
-    cursor: pointer;
-  }
-
-  u-ripple {
-    padding: 4px;
-  }
-}
-
-.month-button {
-  --u-common-button-padding: var(--u-calendar-month-button--padding, 16px);
-  color: var(--u-calendar-month-button-color, #{functions.get-color-var(on-surface-variant)});
-}
-
-.previous-month-button {
-  margin-inline-start: auto;
-}
-
-.week-day {
-  @include api.typo(body-l, calendar-week-day);
-
-  color: var(--u-calendar-week-day-color, #{functions.get-color-var(on-surface)});
-}
-
-.date {
-  @include api.typo(body-l, calendar-date);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: var(--_date-size);
-  height: var(--_date-size);
-  border-radius: var(--u-calendar-date-border-radius, 9999px);
-  color: var(--u-calendar-date-color, #{functions.get-color-var(on-surface)});
-}
-
-.date-outside-month {
-  .date {
-    color: var(--u-calendar-date-out-of-month-color, #{functions.get-color-var(on-surface-variant)});
-  }
-}
-
-
-.current-date {
-  .date {
-    border: 1px solid var(--u-calendar-current-date-color, #{functions.get-color-var(primary)});
-    color: var(--u-calendar-current-date-color, #{functions.get-color-var(primary)});
-  }
-}
-.selected-date {
-
-  .date {
-    background-color: var(--u-calendar-selected-date-background-color, #{functions.get-color-var(primary)});
-    color: var(--u-calendar-selected-date-color, #{functions.get-color-var(on-primary)});
-  }
-}
-
-.date-out-of-month {
-  color: var(--u-calendar-date-color, #{functions.get-color-var(on-surface-variant)});
-}

package/src/calendar/calendar-base.ts

@@ -1,225 +0,0 @@
-import { CSSResultGroup } from '@lit/reactive-element/css-tag';
-
-import { html, HTMLTemplateResult, LitElement } from 'lit';
-import { DirectiveResult } from 'lit-html/directive.js';
-import { ClassMapDirective } from 'lit-html/directives/class-map';
-import { property, state } from 'lit/decorators.js';
-import { classMap } from 'lit/directives/class-map.js';
-
-import { styles } from './calendar-base.styles.js';
-import { DefaultCalendarAdapter } from './default-calendar-adapter.js';
-
-export abstract class UmCalendarBase extends LitElement {
-  static override styles: CSSResultGroup = [styles];
-
-  @state() weekDays: string[] = [];
-  @state() dateRenderer: ((date: Date, day: string) => HTMLElement) | null = null;
-  @property({ type: Boolean }) dateOutsideMonth = false;
-
-  get year(): number {
-    return this._displayingMonthDate.getFullYear();
-  }
-
-  set year(year: number) {
-    this._displayingMonthDate.setFullYear(year);
-    this._displayingMonthDate = new Date(this._displayingMonthDate);
-  }
-
-  get month(): number {
-    return this._displayingMonthDate.getMonth();
-  }
-
-  set month(month: number) {
-    this._displayingMonthDate.setMonth(month);
-    this._displayingMonthDate = new Date(this._displayingMonthDate);
-  }
-
-  readonly #currentDate = new Date();
-  @state() _displayingMonthDate: Date;
-
-  @property() locale: string | null = null;
-  _innerLocale: string = navigator.language;
-  adapter = new DefaultCalendarAdapter();
-
-  protected constructor() {
-    super();
-
-    this.#currentDate.setHours(0);
-    this.#currentDate.setMinutes(0);
-    this.#currentDate.setSeconds(0);
-    this.#currentDate.setMilliseconds(0);
-    this._displayingMonthDate = new Date(this.#currentDate);
-    this._displayingMonthDate.setDate(1);
-  }
-
-  override connectedCallback() {
-    super.connectedCallback();
-
-    this.#setLocaleDependantProperties();
-
-    window.addEventListener('languagechange', () => {
-      if (this.locale !== null) {
-        return;
-      }
-
-      this._innerLocale = navigator.language;
-      this.#setLocaleDependantProperties();
-    });
-  }
-
-  override render(): HTMLTemplateResult {
-    return html`
-      <div>
-        <u-button-set>
-          <u-button class="month-button" type="button" variant="text">
-            ${this.adapter.getMonth(this.#getDisplayingMonthDate())}
-          </u-button>
-          <u-icon-button class="previous-month-button" @click=${() => this.#addMonth(-1)}>
-            <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>
-          </u-icon-button>
-          <u-icon-button @click=${() => this.#addMonth(1)}>
-            <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>
-          </u-icon-button>
-        </u-button-set>
-      </div>
-      <div class="calendar ${this._getCalendarClassMap()}">${this.#renderWeekDays()}${this.#renderDays()}</div>
-    `;
-  }
-
-  #renderWeekDays(): HTMLTemplateResult[] {
-    return this.weekDays.map(
-      weekDay =>
-        html`
-          <div class="calendar-item">
-            <span class="week-day">${weekDay}</span>
-          </div>
-        `,
-    );
-  }
-
-  #getDisplayingMonthDate(): Date {
-    return this._getDateFromIsoDate(`${this.year}-${this.month + 1}-1`);
-  }
-
-  #renderDays(): HTMLTemplateResult[] {
-    const date = new Date(this._displayingMonthDate);
-
-    date.setDate(date.getDate() - date.getDay());
-
-    const month = this.month;
-    const year = this.year;
-
-    const daysTemplates: HTMLTemplateResult[] = [];
-
-    do {
-      for (let i = 0; i < 7; i++) {
-        const dateOutsideMonth = date.getMonth() !== month;
-
-        const dateClasses = this._getSelectedDateClasses(date);
-
-        if (!Object.keys(dateClasses).length && this.#currentDate.getTime() === date.getTime()) {
-          dateClasses['current-date'] = true;
-        }
-
-        if (dateOutsideMonth) {
-          dateClasses['date-outside-month'] = true;
-        }
-
-        const classes = classMap(dateClasses);
-
-        const dateTemplate = dateOutsideMonth && !this.dateOutsideMonth
-          ? null
-          : html`
-              <u-ripple></u-ripple>
-              <span class="date">
-                ${this.dateRenderer
-                  ? this.dateRenderer(new Date(date), this.adapter.getDay(date))
-                  : this.adapter.getDay(date)}
-              </span>
-            `;
-
-        daysTemplates.push(html`
-          <div
-            class="calendar-item ${classes}"
-            @click=${this.#handleDateClick(new Date(date))}>
-            ${dateTemplate}
-          </div>
-        `);
-
-        date.setDate(date.getDate() + 1);
-      }
-    } while (date.getMonth() <= month && date.getFullYear() <= year);
-
-    return daysTemplates;
-  }
-
-  #handleDateClick(date: Date): () => void {
-    return () => this._selectDate(date);
-  }
-
-  protected _getCalendarClassMap(): DirectiveResult<typeof ClassMapDirective> | null {
-    return null;
-  }
-
-  protected abstract _selectDate(date: Date): void;
-  protected abstract _getSelectedDateClasses(date: Date): Record<string, boolean>;
-
-  protected _getDateFromIsoDate(isoDate: string): Date {
-    const date = new Date(isoDate);
-    const offsetMs = date.getTimezoneOffset() * 60 * 1000;
-    date.setTime(date.getTime() + offsetMs);
-
-    return date;
-  }
-
-  protected _getDateString(date: Date | null): string {
-
-    if (!date) {
-      return '';
-    }
-
-    return Intl
-      .DateTimeFormat('en-CA', {
-        year: 'numeric',
-        month: '2-digit',
-        day: '2-digit',
-      })
-      .format(date);
-  }
-
-  protected _getDateFromString(dateString: string): Date | null {
-    if (!dateString) {
-      return null;
-    }
-
-    const dateTime = Date.parse(dateString);
-
-    if (!dateTime && dateTime !== 0) {
-      return null;
-    }
-
-    return this._getDateFromIsoDate(dateString);
-  }
-
-  #addMonth(value: number): void {
-    this.month += value;
-  }
-
-  #setLocaleDependantProperties(): void {
-    this.weekDays = this.adapter.getWeekDays(this._innerLocale);
-  }
-}