@universal-material/web 3.0.140 → 3.0.142

package/src/calendar/calendar.ts

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

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

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

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

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

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

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

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

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

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

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

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

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

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

package/src/chip/chip-set.ts

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