@universal-material/web 3.0.139 → 3.0.140

package/src/calendar/calendar.ts

@@ -0,0 +1,44 @@
+import { CSSResultGroup } from '@lit/reactive-element/css-tag';
+
+import { customElement, property, state } from 'lit/decorators.js';
+
+import { UmCalendarBase } from './calendar-base';
+import { styles } from './calendar.styles.js';
+
+@customElement('u-calendar')
+export class UmCalendar extends UmCalendarBase {
+  static override styles: CSSResultGroup = [styles, UmCalendarBase.styles];
+
+  @state() dateValue: Date | null = null;
+
+  @property()
+  get value(): string {
+    return this._getDateString(this.dateValue);
+  }
+
+  set value(value: string) {
+    this.dateValue = this._getDateFromString(value);
+  }
+
+  protected override _selectDate(date: Date): void {
+    this.dateValue = date;
+
+    this.dispatchEvent(new InputEvent('input', { bubbles: true, composed: true }));
+    this.dispatchEvent(new Event('change', { bubbles: true }));
+
+    if (this.month === date.getMonth() && this.year === date.getFullYear()) {
+      return;
+    }
+
+    this.month = date.getMonth();
+    this.year = date.getFullYear();
+
+  }
+
+  protected override _getSelectedDateClasses(date: Date): Record<string, boolean> {
+    return this.dateValue?.getTime() === date.getTime()
+      ? { 'selected-date': true }
+      : {};
+
+  }
+}

package/src/calendar/default-calendar-adapter.ts

@@ -0,0 +1,40 @@
+import { CalendarAdapter } from './calendar-adapter';
+
+export class DefaultCalendarAdapter implements CalendarAdapter {
+  weekDayFormat: 'long' | 'short' | 'narrow' = 'narrow';
+  locale = 'pt-br';
+
+  getWeekDays(locale: string): string[] {
+    const date = new Date();
+
+    const intlLocale = new Intl.Locale(locale);
+    const weekInfo = intlLocale.getWeekInfo ? intlLocale.getWeekInfo() : intlLocale.weekinfo;
+
+    this.#setDateToFirstDayOfWeek(date, weekInfo.firstDay);
+    const weekDays: string[] = [];
+
+    for (let i = 0; i < 7; i++) {
+      weekDays.push(date.toLocaleDateString(locale, { weekday: this.weekDayFormat }));
+      date.setDate(date.getDate() + 1);
+    }
+
+    return weekDays;
+  }
+
+  #setDateToFirstDayOfWeek(date: Date, firstDayOfWeek: number): void {
+    const diffToFirstDayOfWeek = (firstDayOfWeek - date.getDay() + 7) % 7;
+
+    date.setDate(date.getDate() + diffToFirstDayOfWeek);
+  }
+
+  getDay(date: Date): string {
+    return date.toLocaleDateString(this.locale, { day: 'numeric' });
+  }
+
+  getMonth(date: Date): string {
+    return date.toLocaleDateString(this.locale, {
+      month: 'long',
+      year: 'numeric',
+    });
+  }
+}

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

@@ -0,0 +1,119 @@
+@use '../scss/functions';
+
+%highlighted-date {
+  &::before {
+    content: '';
+    position: absolute;
+    top: 50%;
+    left: 0;
+    width: 100%;
+    margin-top: calc(var(--_date-size) * -.5);
+    height: var(--_date-size);
+    background: var(--u-color-secondary-container);
+    z-index: -1;
+    pointer-events: none;
+  }
+}
+
+%start-date-highlight {
+  &::before {
+    left: 50%;
+    width: 50%;
+  }
+}
+
+%end-date-highlight {
+  &::before {
+    width: 50%;
+  }
+}
+
+.selecting {
+
+  .calendar-item:hover {
+    &:has(.date) {
+      @extend %highlighted-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)});
+    }
+  }
+
+  &:has(.selected-date) {
+    .selected-date:has(~ .calendar-item:hover .date) {
+      @extend %start-date-highlight;
+
+      &,
+      ~ .calendar-item:has(~ .calendar-item:hover .date) {
+        @extend %highlighted-date;
+      }
+
+      ~ .calendar-item:has(.date):hover {
+        @extend %end-date-highlight;
+      }
+    }
+
+    .calendar-item:hover:has(.date):has(~ .selected-date) {
+      @extend %start-date-highlight;
+
+      ~ .selected-date,
+      ~ .calendar-item:has(~ .selected-date) {
+        @extend %highlighted-date;
+      }
+
+      ~ .selected-date {
+        @extend %end-date-highlight;
+      }
+    }
+
+    .selected-date:hover::before {
+      display: none;
+    }
+  }
+
+  &.after-start-date-month:not(:has(.selected-date)) {
+    .calendar-item:has(.date):has(~ .calendar-item:hover .date) {
+      @extend %highlighted-date;
+    }
+
+    .calendar-item:has(.date):hover {
+      @extend %end-date-highlight;
+    }
+  }
+
+  &.before-start-date-month:not(:has(.selected-date)) {
+    .calendar-item:hover:has(.date) ~ .calendar-item:has(.date) {
+      @extend %highlighted-date;
+    }
+
+    .calendar-item:has(.date):hover {
+      @extend %start-date-highlight;
+    }
+  }
+}
+
+.selected {
+
+  &:not(:has(.start-date)):not(:has(.end-date)) .calendar-item:has(.date),
+  &:not(:has(.start-date)) .calendar-item:has(.date):has(~ .end-date),
+  &:not(:has(.end-date)) .start-date ~ .calendar-item:has(.date),
+  .start-date ~ .calendar-item:has(.date):has(~ .end-date),
+  .start-date:has(.date),
+  .end-date:has(.date) {
+    @extend %highlighted-date;
+  }
+
+  .start-date:has(.date) {
+    @extend %start-date-highlight;
+  }
+
+  .end-date:has(.date) {
+    @extend %end-date-highlight;
+  }
+
+  .start-date.end-date::before {
+    display: none;
+  }
+}

package/src/calendar/range-calendar.ts

@@ -0,0 +1,135 @@
+import { CSSResultGroup } from '@lit/reactive-element/css-tag';
+
+import { DirectiveResult } from 'lit-html/directive.js';
+import { ClassMapDirective } from 'lit-html/directives/class-map.js';
+import { customElement, property, state } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+
+import { UmCalendarBase } from './calendar-base';
+import { styles } from './range-calendar.styles.js';
+
+@customElement('u-range-calendar')
+export class UmRangeCalendar extends UmCalendarBase {
+  static override styles: CSSResultGroup = [styles, UmCalendarBase.styles];
+
+  @state() startDateValue: Date | null = null;
+  @state() endDateValue: Date | null = null;
+
+  @property()
+  get value(): string | null {
+    if (!this.startDateValue && !this.endDateValue) {
+      return '';
+    }
+
+    return `${this._getDateString(this.startDateValue)} - ${this._getDateString(this.endDateValue)}`;
+  }
+
+  set value(value: string) {
+    if (!value) {
+      this.startDateValue = null;
+      this.endDateValue = null;
+      return;
+    }
+
+    const values = value.split(' - ');
+
+    if (values.length !== 2) {
+      this.startDateValue = null;
+      this.endDateValue = null;
+      return;
+    }
+
+    const startDateString = values[0];
+    const endDateString = values[1];
+
+    this.startDateValue = this._getDateFromString(startDateString);
+    this.endDateValue = this._getDateFromString(endDateString);
+  }
+
+  #setStartEndDates(startDate: Date | null, endDate: Date | null): void {
+    this.startDateValue = startDate;
+    this.endDateValue = endDate;
+
+    this.dispatchEvent(new InputEvent('input', { bubbles: true, composed: true }));
+    this.dispatchEvent(new Event('change', { bubbles: true }));
+  }
+
+  protected override _selectDate(date: Date): void {
+    if (!this.startDateValue || !!this.endDateValue) {
+      this.#setStartEndDates(date, null);
+      return;
+    }
+
+    if (date > this.startDateValue) {
+      this.#setStartEndDates(this.startDateValue, date);
+      return;
+    }
+
+    this.#setStartEndDates(date, this.startDateValue);
+  }
+
+  protected override _getCalendarClassMap(): DirectiveResult<typeof ClassMapDirective> | null {
+
+    const map: Record<string, boolean> = {};
+
+    if (!this.startDateValue) {
+      return null;
+    }
+
+    if (this.startDateValue) {
+      const className = this.endDateValue
+        ? 'selected'
+        : 'selecting';
+
+      map[className] = true;
+    }
+
+    map[this.#getStartDateClass()] = true;
+
+    if (this.endDateValue) {
+      map[this.#getEndDateClass()] = true;
+    }
+
+    return classMap(map);
+  }
+
+  #getStartDateClass(): string {
+    return this.#getDateClass('start', this.startDateValue!);
+  }
+
+  #getEndDateClass(): string {
+    return this.#getDateClass('end', this.endDateValue!);
+  }
+
+  #getDateClass(name: string, date: Date): string {
+    const month = date.getMonth();
+    const year = date.getFullYear();
+
+    if (this.month === month && this.year === year) {
+      return `on-${name}-date-month`;
+    }
+
+    if (this.year > year || this.year === year && this.month > month) {
+      return `after-${name}-date-month`;
+    }
+
+    return `before-${name}-date-month`;
+  }
+
+  protected override _getSelectedDateClasses(date: Date): Record<string, boolean> {
+
+    const classes: Record<string, boolean> = {};
+
+    if (this.startDateValue?.getTime() === date.getTime()) {
+      classes['selected-date'] = true;
+      classes['start-date'] = true;
+    }
+
+    if (this.endDateValue?.getTime() === date.getTime()) {
+      classes['selected-date'] = true;
+      classes['end-date'] = true;
+    }
+
+    return classes;
+  }
+}

package/src/card/card-content.styles.scss

@@ -0,0 +1,15 @@
+:host {
+  display: block;
+}
+
+:host(:has(slot > *)) {
+  display: none;
+}
+
+:host([has-content]) {
+  padding: var(--u-card-padding, 16px);
+}
+
+slot {
+  border-radius: inherit;
+}

package/src/card/card-content.ts

@@ -0,0 +1,45 @@
+import { HTMLTemplateResult, LitElement, html } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+
+import { styles as baseStyles } from '../shared/base.styles.js';
+import { styles } from './card-content.styles.js';
+
+@customElement('u-card-content')
+export class UmCardContent extends LitElement {
+
+  static override styles = [baseStyles, styles];
+
+  @property({ type: Boolean, attribute: 'has-content', reflect: true }) hasContent = false;
+
+  override render(): HTMLTemplateResult {
+    return html`
+      <slot @slotchange="${this.handleSlotChange}"></slot>`;
+  }
+
+  private handleSlotChange(e: Event) {
+    const slot = e.target as HTMLSlotElement;
+
+    this.hasContent = slot.assignedElements({ flatten: true }).length > 0;
+
+    if (this.hasContent) {
+      return;
+    }
+
+    const nodes = slot.assignedNodes({ flatten: true });
+
+    for (const node of nodes) {
+      if (node.nodeValue?.trim()) {
+        this.hasContent = true;
+        return;
+      }
+    }
+
+    this.hasContent = false;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'u-card-content': UmCardContent;
+  }
+}

package/src/card/card-media.styles.scss

@@ -0,0 +1,9 @@
+:host {
+  display: block;
+  aspect-ratio: 1;
+  border-radius: var(--u-card-shape-corner, var(--u-shape-corner-medium, 12px));
+}
+
+:host([wide]) {
+  aspect-ratio: 16/9;
+}

package/src/card/card-media.ts

@@ -0,0 +1,24 @@
+import { HTMLTemplateResult, LitElement, html } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+
+import { styles as baseStyles } from '../shared/base.styles.js';
+import { styles } from './card-media.styles.js';
+
+@customElement('u-card-media')
+export class UmCardMedia extends LitElement {
+
+  static override styles = [baseStyles, styles];
+
+  @property({ type: Boolean, reflect: true }) wide = false;
+
+  override render(): HTMLTemplateResult {
+    return html`
+      <slot></slot>`;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'u-card-media': UmCardMedia;
+  }
+}

package/src/card/card.styles.scss

@@ -0,0 +1,30 @@
+@use "../scss/functions";
+
+:host {
+  display: block;
+  position: relative;
+  border-radius: var(--u-card-shape-corner, #{functions.get-shape-corner-var(medium)});
+}
+
+:host([variant=elevated]) {
+  --u-current-bg-color: var(--u-card-elevated-bg-color, #{functions.get-color-var(surface-container-low)});
+  background-color: var(--u-current-bg-color);
+
+  u-elevation {
+    --u-elevation-level: var(--u-elevated-card-elevation-level, 1);
+  }
+}
+
+:host([variant=filled]) {
+  --u-current-bg-color: var(--u-card-filled-bg-color, #{functions.get-color-var(surface-container-highest)});
+  background-color: var(--u-current-bg-color);
+}
+
+:host([variant=outlined]) {
+  border: var(--u-outlined-card-outline-width, 1px) solid var(--u-outlined-card-outline-color, #{functions.get-color-var(outline-variant)});
+}
+
+u-card-content,
+slot {
+  border-radius: inherit;
+}

package/src/card/card.ts

@@ -0,0 +1,38 @@
+import { html, HTMLTemplateResult, LitElement } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+
+import { styles as baseStyles } from '../shared/base.styles.js';
+import { styles } from './card.styles.js';
+
+import './card-content.js';
+import './card-media.js';
+import '../elevation/elevation.js';
+
+export type UmCardVariant = 'filled' | 'elevated' | 'outlined';
+
+@customElement('u-card')
+export class UmCard extends LitElement {
+  static override styles = [baseStyles, styles];
+
+  /**
+   * The Card variant to render.
+   */
+  @property({ reflect: true }) variant: UmCardVariant = 'filled';
+
+  override render(): HTMLTemplateResult {
+    return html`
+      <u-elevation></u-elevation>
+      <slot name="before-content"></slot>
+      <u-card-content>
+        <slot></slot>
+      </u-card-content>
+      <slot name="after-content"></slot>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'u-card': UmCard;
+  }
+}

package/src/checkbox/checkbox-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 { UmCheckbox } from './checkbox.js';
+
+@customElement('u-checkbox-list-item')
+export class UmCheckboxListItem extends mixinSelectionControlListItem(UmCheckbox) {
+
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'u-checkbox-list-item': UmCheckboxListItem;
+  }
+}

package/src/checkbox/checkbox.styles.scss

@@ -0,0 +1,69 @@
+@use "../scss/api";
+
+$control-name: checkbox;
+
+:host {
+  --_indicator-size: var(--u-checkbox-indicator-size, 1.125rem);
+  --_width: var(--u-checkbox-size, 3rem);
+  --_height: var(--_width);
+}
+
+.border {
+
+  width: var(--_indicator-size);
+  height: var(--_indicator-size);
+  box-shadow: 0 0 0 var(--u-checkbox-indicator-border-width, .125rem) var(--_indicator-color) inset;
+  border-radius: var(--u-checkbox-indicator-shaper-coner, 2px);
+  transition: box-shadow 175ms 175ms;
+}
+
+.indicator {
+  position: absolute;
+  display: flex;
+  justify-content: center;
+  width: var(--_indicator-size);
+  height: var(--_indicator-size);
+  overflow: hidden;
+  clip: rect(0, 0, var(--_indicator-size), 0);
+  transition: clip 275ms;
+
+  &::before {
+    position: relative;
+    top: 25%;
+    box-sizing: border-box;
+    display: block;
+    width: .75rem;
+    height: .35rem;
+    content: "";
+    border: var(--u-checkbox-indicator-border-width, .125rem) solid #{api.get-color-var(on-primary)};
+    border-top-style: none;
+    border-right-style: none;
+    transform: rotate(-45deg);
+    transition: border 175ms, transform 175ms;
+  }
+}
+
+input.indeterminate ~ .indicator-container,
+input:checked ~ .indicator-container {
+  .border {
+    box-shadow: 0 0 0 calc(var(--_indicator-size) / 2) var(--_indicator-color) inset;
+    transition: box-shadow 175ms;
+  }
+
+  .indicator {
+    clip: rect(0, var(--_indicator-size), var(--_indicator-size), 0);
+    transition: clip 175ms 175ms;
+  }
+}
+
+input.indeterminate ~ .indicator-container {
+  --_indicator-color: var(--u-checkbox-indicator-indeterminate-color, #{api.get-color-var(primary)});
+
+  .indicator {
+    &::before {
+      border-left-style: none;
+      transform: rotate(0);
+      width: .6rem;
+    }
+  }
+}

package/src/checkbox/checkbox.ts

@@ -0,0 +1,64 @@
+import { PropertyValues } from '@lit/reactive-element';
+
+import { html, HTMLTemplateResult } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+
+import { UmSelectionControl } from '../shared/selection-control/selection-control.js';
+import { styles } from './checkbox.styles.js';
+
+@customElement('u-checkbox')
+export class UmCheckbox extends UmSelectionControl {
+  static override styles = [UmSelectionControl.styles, styles];
+
+  #indeterminate = false;
+
+  @property({ type: Boolean, attribute: 'hide-state-layer', reflect: true }) hideStateLayer = false;
+
+  @property({ type: Boolean })
+  get indeterminate(): boolean {
+    return this.#indeterminate;
+  }
+
+  set indeterminate(indeterminate: boolean) {
+    this.#indeterminate = indeterminate;
+
+    if (!indeterminate) {
+      this.input?.classList.remove('indeterminate');
+      return;
+    }
+
+    this.input?.classList.add('indeterminate');
+    this.elementInternals.setFormValue(null);
+  }
+
+  override get checked(): boolean {
+    return super.checked;
+  }
+
+  override set checked(checked: boolean) {
+    super.checked = checked;
+    this.indeterminate = false;
+  }
+
+  constructor() {
+    super();
+  }
+
+  override firstUpdated(changedProperties: PropertyValues) {
+    super.firstUpdated(changedProperties);
+
+    this.indeterminate = this.indeterminate;
+  }
+
+  protected override renderIndicator(): HTMLTemplateResult {
+    return html`
+      <div class="border"><div class="indicator"></div></div>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'u-checkbox': UmCheckbox;
+  }
+}

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

@@ -0,0 +1,3 @@
+:host {
+  flex-wrap: wrap;
+}

package/src/chip/chip-set.ts

@@ -0,0 +1,15 @@
+import { customElement } from 'lit/decorators.js';
+
+import { UmSetBase } from '../shared/sets/set-base.js';
+import { styles } from './chip-set.styles.js';
+
+@customElement('u-chip-set')
+export class UmChipSet extends UmSetBase {
+  static override styles = [UmSetBase.styles, styles];
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'u-chip-set': UmChipSet;
+  }
+}