@universal-material/web 3.0.138 → 3.0.140

package/src/button/fab.styles.scss

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

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

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

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

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

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

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

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

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

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