@universal-material/web 3.0.140 → 3.0.141

package/src/chip/chip.styles.scss

@@ -1,185 +0,0 @@
-@use "../scss/api";
-
-:host {
-  --_height: var(--u-chip-height, 32px);
-  --_outline-width: var(--u-chip-outline-width, 1px);
-  --_outline-color: var(--u-chip-outline-color, #{api.get-color-var(outline)});
-  --_shape: var(--u-chip-shape, #{api.get-shape-corner-var(small)});
-  --_gap: var(--u-chip-gap, 8px);
-  --_icon-size: var(--u-chip-icon-size, 1.125rem);
-  --_remove-button-margin: var(--u-chip-remove-button-margin, 2px);
-  --_remove-button-size: calc(var(--_height) - var(--_remove-button-margin) * 2);
-
-  --_selected-icon-color: var(--u-chip-selected-icon-color, #{api.get-color-var(on-secondary-container)});
-
-  display: inline-block;
-  height: var(--_height);
-  border-radius: var(--_shape);
-}
-
-:host(:not([disabled]):not([elevated]):not([selected])) {
-  .outline {
-    border: var(--_outline-width) solid var(--_outline-color);
-  }
-}
-
-:host([elevated]:not([disabled])) {
-  --u-elevation-level: var(--u-elevated-chip-elevation-level, 1);
-}
-
-@media (hover: hover) {
-  :host([elevated]:not([disabled]):hover) {
-    --u-elevation-level: var(--u-elevated-chip-hover-elevation-level, 2);
-  }
-}
-
-.outline {
-  position: absolute;
-  inset: 0;
-  border-radius: inherit;
-  pointer-events: none;
-}
-
-.container {
-  display: flex;
-  align-items: center;
-  border-radius: inherit;
-  height: 100%;
-  padding-inline: var(--u-chip-padding, 16px);
-  gap: var(--_gap);
-}
-
-.icon {
-  width: 1em;
-  height: var(--_icon-size);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: var(--_icon-size);
-}
-
-.leading {
-  color: var(--u-chip-leading-icon-color, #{api.get-color-var(primary)});
-}
-
-.selected {
-  color: var(--_selected-icon-color);
-}
-
-.trailing {
-  color: var(--u-chip-trailing-icon-color, #{api.get-color-var(on-surface-variant)});
-}
-
-.label {
-  @include api.typo(label-l, chip-label);
-}
-
-.remove-button {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  position: relative;
-  width: var(--_remove-button-size);
-  height: var(--_remove-button-size);
-  cursor: pointer;
-  padding: 0;
-  margin: 0;
-  margin-inline: calc((var(--_remove-button-size) - var(--_icon-size)) * -.5);
-  background: gray;
-  border: none;
-  border-radius: var(--u-chip-remove-button-border-radius, #{api.get-shape-corner-var(full)});
-  background: none;
-  appearance: none;
-  outline: 0;
-  outline-offset: 0;
-  z-index: 1;
-}
-
-::slotted([slot=remove-icon]),
-::slotted([slot=selected-icon]),
-::slotted([slot=leading-icon]),
-::slotted([slot=trailing-icon]) {
-  font-size: inherit !important;
-}
-
-slot[name="selected-icon"] {
-  display: none;
-}
-
-:host(:not([clickable]):not([toggle])) .button {
-  cursor: auto;
-}
-
-:host([selected]:not([hide-selected-icon])) {
-
-  .leading {
-    display: none;
-  }
-
-  slot[name="selected-icon"] {
-    display: contents;
-  }
-}
-
-.default-select-icon {
-  display: contents;
-}
-
-:host([has-selected-icon]) .default-select-icon {
-  display: none;
-}
-
-:host([selected]:not([disabled])) {
-  background-color: var(--u-chip-selected-bg-color, #{api.get-color-var(secondary-container)});
-
-  .leading {
-    color: var(--u-chip-selected-leading-icon-color, var(--_selected-icon-color));
-  }
-
-  .trailing {
-    color: var(--u-chip-selected-trailing-icon-color, var(--_selected-icon-color));
-  }
-}
-
-:host([has-leading-icon]),
-:host([selected]:not([hide-selected-icon])) {
-  .container {
-    padding-inline-start: var(--_gap);
-  }
-}
-
-:host([has-trailing-icon]),
-:host([removable]) {
-  .container {
-    padding-inline-end: var(--_gap);
-  }
-}
-
-:host(:not([has-leading-icon])) {
-  .leading {
-    display: none;
-  }
-}
-
-:host([hide-selected-icon]),
-:host(:not([selected])) {
-  .selected {
-    display: none;
-  }
-}
-
-:host(:not([has-trailing-icon])) {
-  .trailing {
-    display: none;
-  }
-}
-
-[part="default-selected-icon"] {
-  display: contents;
-}
-
-:host([disabled]) {
-  .remove-button {
-    cursor: default;
-  }
-}

package/src/chip/chip.ts

@@ -1,186 +0,0 @@
-import { html, HTMLTemplateResult, nothing } from 'lit';
-import { customElement, property, query, queryAssignedElements } from 'lit/decorators.js';
-
-import { UmRipple } from '../ripple/ripple.js';
-import { UmButtonWrapper } from '../shared/button-wrapper.js';
-import { styles } from './chip.styles.js';
-
-import '../ripple/ripple.js';
-import '../elevation/elevation.js';
-
-@customElement('u-chip')
-export class UmChip extends UmButtonWrapper {
-  static override styles = [UmButtonWrapper.styles, styles];
-
-  #clickable = false;
-  #toggle = false;
-
-  /**
-   * Whether the chip is selected or not
-   */
-  @property({ type: Boolean, reflect: true }) selected = false;
-
-  @property({ type: Boolean, reflect: true })
-  get clickable(): boolean {
-    return this.#clickable;
-  }
-
-  set clickable(value: boolean) {
-    this.#clickable = value;
-    this.renderRipple = this.#clickable || this.#toggle;
-  }
-
-  /**
-   * Adds elevation to the chip
-   */
-  @property({ type: Boolean, reflect: true }) elevated = false;
-
-  /**
-   * When true, the chip will toggle between selected and unselected
-   * states
-   */
-  @property({ type: Boolean, reflect: true })
-  get toggle(): boolean {
-    return this.#toggle;
-  }
-
-  set toggle(value: boolean) {
-    this.#toggle = value;
-    this.renderRipple = this.#clickable || this.#toggle;
-  }
-
-  /**
-   * Add the remove icon
-   */
-  @property({ type: Boolean, reflect: true }) removable = false;
-
-  /**
-   * Hide the selected icon
-   */
-  @property({ type: Boolean, attribute: 'hide-selected-icon', reflect: true }) hideSelectedIcon = false;
-
-  /**
-   * Whether the chip has a leading icon or not
-   *
-   * _Note:_ Readonly
-   */
-  @property({ type: Boolean, attribute: 'has-leading-icon', reflect: true }) hasLeadingIcon = false;
-
-  /**
-   * Whether the chip has a selected icon or not
-   *
-   * _Note:_ Readonly
-   */
-  @property({ type: Boolean, attribute: 'has-selected-icon', reflect: true }) hasSelectedIcon = false;
-
-  /**
-   * Whether the chip has a trailing icon or not
-   *
-   * _Note:_ Readonly
-   */
-  @property({ type: Boolean, attribute: 'has-trailing-icon', reflect: true }) hasTrailingIcon = false;
-
-  @queryAssignedElements({ slot: 'leading-icon', flatten: true })
-  private readonly assignedLeadingIcons!: HTMLElement[];
-
-  @queryAssignedElements({ slot: 'selected-icon', flatten: true })
-  private readonly assignedSelectedIcons!: HTMLElement[];
-
-  @queryAssignedElements({ slot: 'trailing-icon', flatten: true })
-  private readonly assignedTrailingIcons!: HTMLElement[];
-
-  @query('#remove-ripple') removeRipple!: UmRipple;
-
-  override connectedCallback() {
-    super.connectedCallback();
-    this.renderRipple = this.#clickable || this.#toggle;
-  }
-
-  #handleRemoveClick(e: Event) {
-    e.stopPropagation();
-
-    if (!(e as PointerEvent).pointerType) {
-      this.removeRipple.createRipple();
-    }
-
-    const removeEvent = new Event('remove', { cancelable: true });
-    this.dispatchEvent(removeEvent);
-
-    if (!removeEvent.defaultPrevented) {
-      this.remove();
-    }
-  }
-
-  #handleTrailingIconSlotChange() {
-    this.hasTrailingIcon = this.assignedTrailingIcons.length > 0;
-  }
-
-  #handleLeadingIconSlotChange() {
-    this.hasLeadingIcon = this.assignedLeadingIcons.length > 0;
-  }
-
-  #handleSelectedIconSlotChange() {
-    this.hasSelectedIcon = this.assignedSelectedIcons.length > 0;
-  }
-
-  protected override handleClick(event: UIEvent): void {
-    super.handleClick(event);
-
-    if (!this.toggle) {
-      return;
-    }
-
-    this.selected = !this.selected;
-    this.dispatchEvent(new Event('change', { bubbles: true }));
-  }
-
-  protected override renderContent(): HTMLTemplateResult {
-    const remove = html`
-      <button class="icon remove-button focus-ring" ?disabled=${this.disabled} @click=${this.#handleRemoveClick}>
-        <u-ripple id="remove-ripple" ?disabled=${this.disabled}></u-ripple>
-        <slot name="remove-icon">
-          <svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 -960 960 960" width="1em" fill="currentColor">
-            <path
-              d="m256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z" />
-          </svg>
-        </slot>
-      </button>
-    `;
-
-    return html`
-      <div class="container">
-        <div class="outline"></div>
-        <span class="icon leading" part="icon leading">
-          <slot name="leading-icon" @slotchange="${this.#handleLeadingIconSlotChange}"></slot>
-        </span>
-        <span class="icon selected" part="icon selected">
-          <slot name="selected-icon" @slotchange="${this.#handleSelectedIconSlotChange}">
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              height="1em"
-              viewBox="0 -960 960 960"
-              width="1em"
-              fill="currentColor">
-              <path d="M382-240 154-468l57-57 171 171 367-367 57 57-424 424Z" />
-            </svg>
-          </slot>
-        </span>
-        <div class="label">
-          <slot></slot>
-        </div>
-        <slot
-          class="icon trailing"
-          part="icon trailing"
-          name="trailing-icon"
-          @slotchange="${this.#handleTrailingIconSlotChange}"></slot>
-        ${this.removable ? remove : nothing}
-      </div>
-    `;
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'u-chip': UmChip;
-  }
-}

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

@@ -1,22 +0,0 @@
-@use "../scss/api";
-
-u-chip {
-  flex-basis: 0;
-}
-
-.input {
-  display: flex;
-  gap: var(--u-chip-field-chips-gap, #{api.get-spacing-var(extra-small)});
-  flex-wrap: wrap;
-
-  &:has(u-chip) {
-    margin-top: var(--u-chip-field-chips-margin, #{api.get-spacing-var(extra-small)});
-  }
-
-  input {
-    width: auto;
-    flex-basis: 200px;
-    padding: 4px 0;
-    margin-block: -4px;
-  }
-}

package/src/chip-field/chip-field.ts

@@ -1,182 +0,0 @@
-import { CSSResultGroup } from '@lit/reactive-element/css-tag';
-
-import { html, HTMLTemplateResult, nothing } from 'lit';
-import { unsafeHTML } from 'lit-html/directives/unsafe-html.js';
-import { customElement, property, query } from 'lit/decorators.js';
-
-import { UmTextFieldBase } from '../shared/text-field-base/text-field-base.js';
-import { styles } from './chip-field.styles.js';
-
-@customElement('u-chip-field')
-export class UmChipField extends UmTextFieldBase {
-  static override styles: CSSResultGroup = [UmTextFieldBase.styles, styles];
-
-  @query('input') input!: HTMLInputElement;
-  @property() name!: string;
-
-  /**
-   * If true, ignore enter key input
-   */
-  @property({ type: Boolean }) manual = false;
-
-  /**
-   * A function return a string based on a item from the `value`. Useful when the items of value are objects.
-   */
-  formatter: ((value: any) => string) | undefined;
-
-  /**
-   * A string representing an HTML to be rendered inside as leading icon of each chip.
-   *
-   * _Note:_ Subject to signature change
-   */
-  leadingIconTemplate: ((value: any) => string) | undefined;
-
-  #value: any[] = [];
-
-  /**
-   * An array containing the value representation of each chip.
-   *
-   * _Note:_ Add or remove items directly from value array won't trigger a render on Chip Field. Use the methods `add` or `removeAt`.
-   */
-  get value(): any[] {
-    return this.#value;
-  }
-
-  set value(value: any[]) {
-    this.#value = value;
-    this.#valueUpdate();
-  }
-
-  private setFormValue() {
-    const formData = new FormData();
-
-    for (const item of this.value) {
-      formData.append(this.name, this.getItemLabel(item));
-    }
-
-    this.elementInternals.setFormValue(formData);
-  }
-
-  override focus() {
-    this.input.focus();
-  }
-
-  protected override renderControl(): HTMLTemplateResult {
-    return html`
-      <div class="input">
-        ${this.#getChips()}
-        <input
-          part="input"
-          id=${this.id || nothing}
-          aria-labelledby="label"
-          ?disabled=${this.disabled}
-          placeholder=${this.placeholder || nothing}
-          @blur=${this.#handleBlur}
-          @keydown=${this.#handleKeyDown}
-          @input=${this.#handleInput} />
-      </div>
-    `;
-  }
-
-  #getChips() {
-    return this.value?.map((item, index) => {
-      const leadingIcon = this.leadingIconTemplate
-        ? html`
-            <span slot="leading-icon">${unsafeHTML(this.leadingIconTemplate(item))}</span>
-          `
-        : nothing;
-
-      return html`
-        <u-chip removable ?disabled=${this.disabled} @remove=${this.#removeChip(index)}>
-          ${leadingIcon} ${this.getItemLabel(item)}
-        </u-chip>
-      `;
-    });
-  }
-
-  #handleBlur() {
-    this.requestUpdate();
-  }
-
-  #handleInput() {
-    this.#setEmpty();
-  }
-
-  #handleKeyDown(e: KeyboardEvent) {
-    if (!this.manual && e.key === 'Enter') {
-      this.add(this.input.value, true);
-      this.input.value = '';
-      return;
-    }
-
-    if (e.key === 'Backspace' && this.input.selectionStart === 0 && this.input.selectionEnd === 0) {
-      this.#removeChip(this.value.length - 1)();
-      return;
-    }
-  }
-
-  add(value: any, triggerChange = false) {
-    this.value.push(value);
-
-    this.#changed(triggerChange);
-  }
-
-  removeAt(index: number, triggerChange = false) {
-    this.value.splice(index, 1);
-    this.#changed(triggerChange);
-  }
-
-  readonly #removeChip = (index: number) => (e?: Event) => {
-    e?.preventDefault();
-
-    this.input.focus();
-    const defaultPrevented = this.#dispatchRemoveEvent(index);
-
-    if (defaultPrevented) {
-      return;
-    }
-
-    this.removeAt(index, true);
-  };
-
-  #changed(triggerChange: boolean) {
-    this.#valueUpdate();
-
-    if (triggerChange) {
-      this.dispatchEvent(new Event('change', { bubbles: true }));
-    }
-  }
-
-  #valueUpdate() {
-    this.#setEmpty();
-    this.setFormValue();
-    this.requestUpdate();
-  }
-
-  #setEmpty() {
-    this.empty = !this.value?.length && !this.input?.value;
-  }
-
-  #dispatchRemoveEvent(index: number): boolean {
-    const item = this.value[index];
-
-    const event = new CustomEvent('remove', {
-      cancelable: true,
-      detail: item,
-    });
-
-    this.dispatchEvent(event);
-
-    return event.defaultPrevented;
-  }
-
-  private getItemLabel(item: any) {
-    return this.formatter ? this.formatter(item) : item.toString();
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'u-chip-field': UmChipField;
-  }
-}

package/src/config.ts

@@ -1,28 +0,0 @@
-import { UmButtonVariant } from './button/button.js';
-import { DialogButtonDef } from './dialog/dialog-button-def.js';
-
-const _config = {
-  dialog: {
-    alertDefaults: {
-      acknowledgeButton: {
-        label: 'Ok',
-        variant: 'text' as UmButtonVariant,
-      } as DialogButtonDef,
-    },
-    confirmDefaults: {
-      confirmButton: {
-        label: 'Ok',
-        variant: 'text' as UmButtonVariant,
-      } as DialogButtonDef,
-      cancelButton: {
-        label: 'Cancel',
-        variant: 'text' as UmButtonVariant,
-      } as DialogButtonDef,
-    },
-  },
-  navigationDrawer: {
-    useSwiperJs: false,
-  },
-};
-
-export const config = _config;

package/src/dialog/confirm-dialog-builder.ts

@@ -1,43 +0,0 @@
-import { config } from '../config.js';
-import { DialogBuilder } from './dialog-builder.js';
-import { DialogButtonDef } from './dialog-button-def.js';
-import { UmDialog } from './dialog.js';
-
-export class ConfirmDialogBuilder extends DialogBuilder<ConfirmDialogBuilder, Promise<boolean>> {
-  static create(message: string): ConfirmDialogBuilder {
-    return new ConfirmDialogBuilder(message);
-  }
-
-  #confirmButtonDef?: DialogButtonDef;
-  #cancelButtonDef?: DialogButtonDef;
-
-  confirmButton(confirmButtonDef: DialogButtonDef): ConfirmDialogBuilder {
-    this.#confirmButtonDef = confirmButtonDef;
-    return this;
-  }
-
-  cancelButton(cancelButtonDef: DialogButtonDef): ConfirmDialogBuilder {
-    this.#cancelButtonDef = cancelButtonDef;
-    return this;
-  }
-
-  override addButtons(dialog: UmDialog): void {
-
-    this.addButton(
-      dialog,
-      { ...config.dialog.confirmDefaults.confirmButton, ...this.#confirmButtonDef },
-      () => dialog.close('ok'));
-
-    this.addButton(
-      dialog,
-      { ...config.dialog.confirmDefaults.cancelButton, ...this.#cancelButtonDef },
-      () => dialog.close('cancel'));
-  }
-
-  protected override innerShow(dialog: UmDialog): Promise<boolean> {
-    super.innerShow(dialog);
-
-    return new Promise<boolean>(resolve =>
-      dialog.addEventListener('closed', () => resolve(dialog.returnValue === 'ok')));
-  }
-}

package/src/dialog/dialog-builder.ts

@@ -1,57 +0,0 @@
-import { DialogButtonDef } from './dialog-button-def.js';
-import { UmDialog } from './dialog.js';
-
-import './dialog.js';
-
-export abstract class DialogBuilder<TBuilder extends DialogBuilder<any, any>, TReturn> {
-  #headline?: string;
-
-  constructor(private readonly message: string) {
-
-  }
-
-  headline(headline: string): TBuilder {
-    this.#headline = headline;
-    return this as unknown as TBuilder;
-  }
-
-  show(): TReturn {
-    const dialog = document.createElement('u-dialog');
-    dialog.innerText = this.message;
-
-    this.addHeadline(dialog);
-    this.addButtons(dialog);
-
-    return this.innerShow(dialog) as TReturn;
-  }
-
-  protected innerShow(dialog: UmDialog): TReturn | void {
-    dialog.addEventListener('closed', () => dialog.remove());
-    document.body.appendChild(dialog);
-    dialog.show();
-
-    return;
-  }
-
-  protected abstract addButtons(dialog: UmDialog): void;
-
-  private addHeadline(dialog: HTMLElement) {
-    if (!this.#headline) {
-      return;
-    }
-
-    const headlineElement = document.createElement('span');
-    headlineElement.slot = 'headline';
-    headlineElement.textContent = this.#headline;
-    dialog.appendChild(headlineElement);
-  }
-
-  protected addButton(dialog: UmDialog, buttonDef: DialogButtonDef, click: () => void) {
-    const button = document.createElement('u-button');
-    button.variant = buttonDef.variant!;
-    button.textContent = buttonDef.label!;
-    button.slot = 'actions';
-    button.addEventListener('click', click);
-    dialog.appendChild(button);
-  }
-}