@universal-material/web 3.0.138 → 3.0.140

package/src/chip/chip.styles.scss

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

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

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

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

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

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

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