@covalent/components 0.0.0-COVALENT

package/src/chips/chip-base.ts

@@ -0,0 +1,276 @@
+import { addHasRemoveClass } from '@material/mwc-base';
+import { MDCChipFoundation } from '@material/chips/chip/foundation';
+import {
+  MDCChipAttributes,
+  MDCChipCssClasses,
+  MDCChipEvents,
+  MDCChipAnimation,
+} from '@material/chips/chip/constants';
+import { MDCChipAction, MDCChipActionEvents } from '@material/chips/action';
+import {
+  MDCChipActionFocusBehavior,
+  MDCChipActionType,
+} from '@material/chips/action/constants';
+import { MDCChipAdapter } from '@material/chips/chip/adapter';
+import { property, query } from 'lit/decorators.js';
+import { html, LitElement } from 'lit';
+import { classMap } from 'lit/directives/class-map.js';
+
+let tdChipsId = 0;
+
+export class ChipBase extends LitElement {
+  protected mdcFoundation?: MDCChipFoundation;
+  protected readonly mdcFoundationClass = MDCChipFoundation;
+  protected actions!: Map<MDCChipActionType, MDCChipAction>;
+  protected chipId!: number;
+
+  @query('.mdc-evolution-chip') protected mdcRoot!: HTMLElement;
+
+  /**
+   * The text label of the chip
+   */
+  @property()
+  label = '';
+
+  /**
+   * The icon name to use for primary or leading chip
+   */
+  @property({ type: String }) icon = '';
+
+  @property({ type: Boolean, reflect: true }) trailingIcon = false;
+
+  @property({ type: Boolean, reflect: true }) avatar = false;
+
+  /**
+   * The text label of the chip
+   */
+  @property({ type: Boolean, reflect: true }) disabled = false;
+
+  /**
+   * Set the filter chip varient
+   */
+  @property({ type: Boolean, reflect: true }) filter = false;
+
+  /**
+   * The state representation secondary|negative|positive|caution
+   */
+  @property()
+  state?: 'secondary' | 'negative' | 'positive' | 'caution';
+
+  constructor() {
+    super();
+    this.chipId = tdChipsId++;
+  }
+
+  protected override render() {
+    const classes = {
+      'mdc-evolution-chip': true,
+      'mdc-evolution-chip--disabled': this.disabled,
+      'mdc-evolution-chip--with-trailing-action': this.trailingIcon,
+      'mdc-evolution-chip--with-primary-graphic':
+        !this.trailingIcon && this.icon,
+      'mdc-evolution-chip--with-primary-icon': this.icon && !this.filter,
+      'mdc-evolution-chip--filter': this.filter,
+      'mdc-evolution-chip--selectable': this.filter,
+      'mdc-evolution-chip--with-avatar': this.avatar,
+      secondary: this.state === 'secondary',
+      positive: this.state === 'positive',
+      negative: this.state === 'negative',
+      caution: this.state === 'caution',
+    };
+    return html`
+      <span
+        class="${classMap(classes)}"
+        role="${this.filter ? 'presentation' : 'row'}"
+        id="cv-chip-${this.chipId}"
+      >
+        <span
+          class="mdc-evolution-chip__cell mdc-evolution-chip__cell--primary"
+          role="${this.filter ? 'presentation' : 'gridcell'}"
+        >
+          <button
+            class="mdc-evolution-chip__action mdc-evolution-chip__action--primary"
+            role="${this.filter ? 'option' : ''}"
+            type="button"
+            tabindex="-1"
+          >
+            <span
+              class="mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary"
+            ></span>
+            ${(!this.trailingIcon && this.icon) || this.filter
+              ? this.renderGraphic()
+              : ''}
+            <span class="mdc-evolution-chip__text-label">${this.label}</span>
+          </button>
+        </span>
+        ${this.trailingIcon ? this.renderTrailing() : ''}
+      </span>
+    `;
+  }
+
+  protected override async firstUpdated() {
+    if (this.mdcFoundation !== undefined) {
+      this.mdcFoundation.destroy();
+    }
+    this.mdcFoundation = new this.mdcFoundationClass(this.createAdapter());
+
+    this.actions = new Map();
+    const actionEls = this.mdcRoot.querySelectorAll(
+      '.mdc-evolution-chip__action'
+    );
+    for (let i = 0; i < actionEls.length; i++) {
+      const action = new MDCChipAction(actionEls[i] as HTMLElement);
+      this.actions.set(action.actionType(), action);
+      actionEls[i].addEventListener(
+        MDCChipActionEvents.INTERACTION,
+        (event) => {
+          this.mdcFoundation?.handleActionInteraction(event as any);
+        }
+      );
+      actionEls[i].addEventListener(MDCChipActionEvents.NAVIGATION, (event) => {
+        this.mdcFoundation?.handleActionNavigation(event as any);
+      });
+    }
+  }
+
+  protected renderGraphic() {
+    const graphicContent = this.filter
+      ? this.renderCheckMark()
+      : this.renderIcon();
+    return html`<span class="mdc-evolution-chip__graphic">
+      ${graphicContent}
+    </span>`;
+  }
+
+  protected renderCheckMark() {
+    return html` <span class="mdc-evolution-chip__checkmark">
+      <svg class="mdc-evolution-chip__checkmark-svg" viewBox="-2 -3 30 30">
+        <path
+          class="mdc-evolution-chip__checkmark-path"
+          fill="none"
+          d="M1.73,12.91 8.1,19.28 22.79,4.59"
+        />
+      </svg>
+    </span>`;
+  }
+
+  protected renderIcon(trailing = false) {
+    return html` <span
+      class="mdc-evolution-chip__icon mdc-evolution-chip__icon--${trailing
+        ? 'trailing'
+        : 'primary'}"
+    >
+      ${this.icon}
+    </span>`;
+  }
+
+  protected renderTrailing() {
+    return html` <span
+      class="mdc-evolution-chip__cell mdc-evolution-chip__cell--trailing"
+      role="gridcell"
+    >
+      <button
+        class="mdc-evolution-chip__action mdc-evolution-chip__action--trailing"
+        type="button"
+        tabindex="-1"
+        data-mdc-deletable="true"
+        aria-label="Remove ${this.label}"
+      >
+        <span
+          class="mdc-evolution-chip__ripple mdc-evolution-chip__ripple--trailing"
+        ></span>
+        ${this.renderIcon(true)}
+      </button>
+    </span>`;
+  }
+
+  protected createAdapter(): MDCChipAdapter {
+    return {
+      ...addHasRemoveClass(this.mdcRoot),
+      emitEvent: <D extends object>(eventName: MDCChipEvents, eventDetail: D) =>
+        this.dispatchEvent(
+          new CustomEvent(eventName, { bubbles: true, detail: eventDetail })
+        ),
+      /** Returns the child actions provided by the chip. */
+      getActions: () => {
+        const actions: MDCChipActionType[] = [];
+        for (const [key] of this.actions) {
+          actions.push(key);
+        }
+        return actions;
+      },
+      /** Returns the value for the given attribute, if it exists. */
+      getAttribute: (attrName: MDCChipAttributes) =>
+        this.mdcRoot.getAttribute(attrName),
+      /** Returns the ID of the root element. */
+      getElementID: () => this.mdcRoot.getAttribute('id') ?? '',
+      /** Returns the offset width of the root element. */
+      getOffsetWidth: () => this.mdcRoot.offsetWidth,
+      /** Returns true if the root element has the given class. */
+      hasClass: (className: MDCChipCssClasses) =>
+        this.mdcRoot.classList.contains(className),
+      /** Proxies to the MDCChipAction#isSelectable method. */
+      isActionSelectable: (action: MDCChipActionType) =>
+        this.actions.get(action)?.isSelectable() ?? true,
+      /** Proxies to the MDCChipAction#isSelected method. */
+      isActionSelected: (action: MDCChipActionType) =>
+        this.actions.get(action)?.isSelected() ?? false,
+      /** Proxies to the MDCChipAction#isFocusable method. */
+      isActionFocusable: (action: MDCChipActionType) =>
+        this.actions.get(action)?.isFocusable() ?? true,
+      /** Proxies to the MDCChipAction#isDisabled method. */
+      isActionDisabled: (action: MDCChipActionType) =>
+        this.actions.get(action)?.isDisabled() ?? false,
+      /** Returns true if the text direction is right-to-left. */
+      isRTL: () =>
+        window.getComputedStyle(this.mdcRoot).getPropertyValue('direction') ===
+        'rtl',
+      /** Proxies to the MDCChipAction#setDisabled method. */
+      setActionDisabled: (action: MDCChipActionType, isDisabled: boolean) =>
+        this.actions.get(action)?.setDisabled(isDisabled),
+      /** Proxies to the MDCChipAction#setFocus method. */
+      setActionFocus: (
+        action: MDCChipActionType,
+        behavior: MDCChipActionFocusBehavior
+      ) => this.actions.get(action)?.setFocus(behavior),
+      /** Proxies to the MDCChipAction#setSelected method. */
+      setActionSelected: (action: MDCChipActionType, isSelected: boolean) =>
+        this.actions.get(action)?.setSelected(isSelected),
+      /** Sets the style property to the given value. */
+      setStyleProperty: (property: string, value: string) =>
+        this.mdcRoot.style.setProperty(property, value),
+    };
+  }
+
+  getActions() {
+    return this.mdcFoundation?.getActions() ?? [];
+  }
+
+  getElementID() {
+    return this.mdcFoundation?.getElementID() ?? '';
+  }
+
+  isActionFocusable(action: MDCChipActionType) {
+    return this.mdcFoundation?.isActionFocusable(action) ?? false;
+  }
+
+  isActionSelectable(action: MDCChipActionType) {
+    return this.mdcFoundation?.isActionSelectable(action) ?? false;
+  }
+
+  isActionSelected(action: MDCChipActionType) {
+    return this.mdcFoundation?.isActionSelected(action) ?? false;
+  }
+
+  setActionFocus(action: MDCChipActionType, focus: MDCChipActionFocusBehavior) {
+    return this.mdcFoundation?.setActionFocus(action, focus);
+  }
+
+  setActionSelected(actionType: MDCChipActionType, isSelected: boolean) {
+    return this.mdcFoundation?.setActionSelected(actionType, isSelected);
+  }
+
+  startAnimation(animation: MDCChipAnimation) {
+    return this.mdcFoundation?.startAnimation(animation);
+  }
+}

package/src/chips/chip-set-base.ts

@@ -0,0 +1,184 @@
+import { MDCChipSetAdapter } from '@material/chips/chip-set/adapter';
+import {
+  MDCChipSetAttributes,
+  MDCChipSetEvents,
+} from '@material/chips/chip-set/constants';
+import { MDCChipEvents } from '@material/chips/chip/constants';
+import {
+  MDCChipActionType,
+  MDCChipActionFocusBehavior,
+} from '@material/chips/action/constants';
+import { MDCChipAnimation } from '@material/chips/chip/constants';
+import {
+  ChipAnimationEvent,
+  ChipInteractionEvent,
+  ChipNavigationEvent,
+} from '@material/chips/chip-set/types';
+import { MDCChipSetFoundation } from '@material/chips/chip-set/foundation';
+import { announce } from '@material/dom/announce';
+import { property, query } from 'lit/decorators.js';
+import { html, LitElement, PropertyValues } from 'lit';
+import { CovalentChip } from './chip';
+
+export class ChipSetBase extends LitElement {
+  protected mdcFoundation!: MDCChipSetFoundation;
+
+  @query('.mdc-evolution-chip-set') protected mdcRoot!: HTMLElement;
+
+  /**
+   * Set if the chips are selectable/actionable
+   */
+  @property({ type: Boolean, reflect: true }) selectable = false;
+
+  /**
+   * Set the chips are mulit-selectable
+   */
+  @property({ type: Boolean, reflect: true }) multi = false;
+
+  /**
+   * The arial label for the the chip set
+   */
+  @property()
+  label = '';
+
+  @property({ type: Number }) activeIndex = 0;
+
+  protected _previousActiveIndex = -1;
+
+  protected chips: CovalentChip[] = [];
+
+  override render() {
+    return html`<span
+      class="mdc-evolution-chip-set"
+      role="${this.selectable || this.multi ? 'listbox' : 'grid'}"
+      aria-label="${this.label}"
+      aria-multiselectable="${this.multi}"
+    >
+      <span class="mdc-evolution-chip-set__chips" role="presentation">
+        <slot></slot>
+      </span>
+    </span>`;
+  }
+
+  protected override async updated(changedProps: PropertyValues) {
+    super.updated(changedProps);
+    await this.updateComplete;
+    if (this.activeIndex != this._previousActiveIndex) {
+      this.mdcFoundation.setChipSelected(
+        this.activeIndex,
+        MDCChipActionType.PRIMARY,
+        true
+      );
+    }
+  }
+
+  protected override firstUpdated(changedProps: PropertyValues) {
+    super.firstUpdated(changedProps);
+    const slot = this.shadowRoot?.querySelector('slot');
+    const chipEls =
+      slot?.assignedElements().filter((node) => node instanceof CovalentChip) ??
+      [];
+
+    for (let i = 0; i < chipEls.length; i++) {
+      const chip = chipEls[i] as CovalentChip;
+      this.chips.push(chip);
+    }
+
+    if (this.mdcFoundation !== undefined) {
+      this.mdcFoundation.destroy();
+    }
+    this.mdcFoundation = new MDCChipSetFoundation(this.createAdapter());
+    this.mdcFoundation.init();
+  }
+
+  override connectedCallback(): void {
+    super.connectedCallback();
+    this.addEventListener(MDCChipEvents.ANIMATION, this._handleChipAnimation);
+    this.addEventListener(
+      MDCChipEvents.INTERACTION,
+      this._handleChipInteraction
+    );
+    this.addEventListener(MDCChipEvents.NAVIGATION, this._handleChipNavigation);
+  }
+
+  override disconnectedCallback(): void {
+    super.disconnectedCallback();
+    this.removeEventListener(
+      MDCChipEvents.ANIMATION,
+      this._handleChipAnimation
+    );
+    this.removeEventListener(
+      MDCChipEvents.INTERACTION,
+      this._handleChipInteraction
+    );
+    this.removeEventListener(
+      MDCChipEvents.NAVIGATION,
+      this._handleChipNavigation
+    );
+  }
+
+  protected createAdapter(): MDCChipSetAdapter {
+    return {
+      /** Announces the message via an aria-live region */
+      announceMessage: announce,
+      /** Emits the given event with the given detail. */
+      emitEvent: <D extends object>(
+        eventName: MDCChipSetEvents,
+        eventDetail: D
+      ) =>
+        this.dispatchEvent(
+          new CustomEvent(eventName, { bubbles: true, detail: eventDetail })
+        ),
+      /** Returns the value for the given attribute, if it exists. */
+      getAttribute: (attrName: MDCChipSetAttributes) =>
+        this.mdcRoot.getAttribute(attrName),
+      /** Returns the actions provided by the child chip at the given index. */
+      getChipActionsAtIndex: (index: number) => this.chips[index].getActions(),
+      /** Returns the number of child chips. */
+      getChipCount: () => this.chips.length,
+      /** Returns the ID of the chip at the given index. */
+      getChipIdAtIndex: (index: number) => this.chips[index].getElementID(),
+      /** Returns the index of the child chip with the matching ID. */
+      getChipIndexById: (chipID: string) =>
+        this.chips.findIndex((chip) => chip.getElementID() === chipID),
+      /** Proxies to the MDCChip#isActionFocusable method. */
+      isChipFocusableAtIndex: (index: number, actionType: MDCChipActionType) =>
+        this.chips[index].isActionFocusable(actionType),
+      /** Proxies to the MDCChip#isActionSelectable method. */
+      isChipSelectableAtIndex: (index: number, actionType: MDCChipActionType) =>
+        this.chips[index].isActionSelectable(actionType),
+      /** Proxies to the MDCChip#isActionSelected method. */
+      isChipSelectedAtIndex: (index: number, actionType: MDCChipActionType) =>
+        this.chips[index].isActionSelected(actionType),
+      /** Removes the chip at the given index. */
+      removeChipAtIndex: (index: number) => this.chips[index].remove(),
+      /** Proxies to the MDCChip#setActionFocus method. */
+      setChipFocusAtIndex: (
+        index: number,
+        action: MDCChipActionType,
+        focus: MDCChipActionFocusBehavior
+      ) => this.chips[index].setActionFocus(action, focus),
+      /** Proxies to the MDCChip#setActionSelected method. */
+      setChipSelectedAtIndex: (
+        index: number,
+        actionType: MDCChipActionType,
+        isSelected: boolean
+      ) => this.chips[index].setActionSelected(actionType, isSelected),
+      /** Starts the chip animation at the given index. */
+      startChipAnimationAtIndex: (index: number, animation: MDCChipAnimation) =>
+        this.chips[index].startAnimation(animation),
+    };
+  }
+
+  private _handleChipAnimation(event: Event): void {
+    this.mdcFoundation.handleChipAnimation(event as ChipAnimationEvent);
+  }
+
+  private _handleChipInteraction(event: Event): void {
+    this.mdcFoundation.handleChipInteraction(event as ChipInteractionEvent);
+  }
+
+  private _handleChipNavigation(event: Event): void {
+    this.mdcFoundation.handleChipNavigation(event as ChipNavigationEvent);
+  }
+}

package/src/chips/chip-set.scss

@@ -0,0 +1,15 @@
+@use 'sass:math';
+@use '@material/chips/chip-set';
+@use '@material/chips/chip-set-theme';
+@use '@material/rtl/rtl';
+
+@include chip-set.core-styles();
+
+$space: chip-set-theme.$space-between-chips;
+
+::slotted(cv-chip) {
+  @include rtl.reflexive-property(margin, $space, 0);
+
+  margin-top: math.div($space, 2);
+  margin-bottom: math.div($space, 2);
+}

package/src/chips/chip-set.spec.ts

@@ -0,0 +1,11 @@
+/**
+ * @vitest-environment jsdom
+ */
+import { it, describe, expect } from 'vitest';
+import { CovalentChipSet } from './chip-set';
+
+describe('Chip set', () => {
+  it('should work', () => {
+    expect(new CovalentChipSet()).toBeDefined();
+  });
+});

package/src/chips/chip-set.ts

@@ -0,0 +1,27 @@
+import { css, unsafeCSS } from 'lit';
+import { customElement } from 'lit/decorators.js';
+import { ChipSetBase } from './chip-set-base';
+import styles from './chip-set.scss?inline';
+
+/**
+ * Action ribbon
+ *
+ * @slot - This element has a slot
+ */
+@customElement('cv-chip-set')
+export class CovalentChipSet extends ChipSetBase {
+  static override styles = [
+    css`
+      ${unsafeCSS(styles)}
+    `,
+  ];
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'cv-chip-set': CovalentChipSet;
+  }
+}
+
+
+export default CovalentChipSet;

package/src/chips/chip.scss

@@ -0,0 +1,40 @@
+@use '@material/chips/chip';
+
+@include chip.core-styles();
+
+.mdc-evolution-chip {
+  background-color: var(--cv-theme-surface-container);
+
+  .mdc-evolution-chip__text-label {
+    color: var(--cv-theme-on-surface-container);
+  }
+
+  .mdc-evolution-chip__icon {
+    font-family: var(--mdc-icon-font, 'Material Symbols Rounded');
+    color: var(--mdc-theme-text-icon-on-background);
+  }
+
+  .mdc-evolution-chip__checkmark-path {
+    stroke: var(--mdc-theme-text-icon-on-background);
+  }
+
+  &.mdc-evolution-chip--selected {
+    background-color: var(--mdc-theme-surface-primary);
+  }
+
+  &.positive {
+    background-color: var(--cv-theme-surface-positive);
+  }
+
+  &.negative {
+    background-color: var(--mdc-theme-surface-negative);
+  }
+
+  &.caution {
+    background-color: var(--mdc-theme-surface-caution);
+  }
+
+  &.secondary {
+    background-color: var(--mdc-theme-surface-secondary);
+  }
+}

package/src/chips/chip.spec.ts

@@ -0,0 +1,11 @@
+/**
+ * @vitest-environment jsdom
+ */
+import { it, describe, expect } from 'vitest';
+import { CovalentChip } from './chip';
+
+describe('Chip', () => {
+  it('should work', () => {
+    expect(new CovalentChip()).toBeDefined();
+  });
+});

package/src/chips/chip.ts

@@ -0,0 +1,26 @@
+import { css, unsafeCSS } from 'lit';
+import { customElement } from 'lit/decorators.js';
+import { ChipBase } from './chip-base';
+import styles from './chip.scss?inline';
+
+/**
+ * Action ribbon
+ *
+ * @slot - This element has a slot
+ */
+@customElement('cv-chip')
+export class CovalentChip extends ChipBase {
+  static override styles = [
+    css`
+      ${unsafeCSS(styles)}
+    `,
+  ];
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'cv-chip': CovalentChip;
+  }
+}
+
+export default CovalentChip;

package/src/chips/chips.stories.js

@@ -0,0 +1,81 @@
+import './chip';
+import './chip-set';
+
+export default {
+  title: 'Components/Chips',
+  args: {
+    label: 'Chip',
+    icon: 'houseboat',
+    showIcon: false,
+    trailingIcon: false,
+    disabled: false,
+    avatar: false,
+  },
+};
+
+const Template = ({
+  avatar,
+  label,
+  disabled,
+  icon,
+  showIcon,
+  state,
+  trailingIcon,
+}) => {
+  return `<cv-chip-set label="test chips">
+           <cv-chip
+                label="${label}"
+                ${showIcon ? `icon="${icon}"` : ''}
+                ${showIcon && trailingIcon ? `trailingIcon` : ''}
+                ${avatar ? 'avatar' : ''}
+                ${state ? `state="${state}"` : ''}
+                ${disabled ? 'disabled' : ''} ></cv-chip>
+          </cv-chip-set>`;
+};
+
+const SelectableTemplate = ({ multiSelectable, label, disabled, state }) => {
+  return `<cv-chip-set 
+           label="test chips" 
+           selectable
+           activeIndex="0"
+           ${multiSelectable ? 'multi' : ''}>
+            <cv-chip
+                  label="${label}"
+                  filter
+                  ${state ? `state="${state}"` : ''}
+                  ${disabled ? 'disabled' : ''} ></cv-chip>
+            <cv-chip
+                  label="${label} 2"
+                  filter
+                  ${state ? `state="${state}"` : ''}
+                  ${disabled ? 'disabled' : ''} ></cv-chip>
+          </cv-chip-set>`;
+};
+
+export const Basic = Template.bind({});
+
+export const Secondary = Template.bind({});
+Secondary.args = {
+  state: 'secondary',
+};
+
+export const Caution = Template.bind({});
+Caution.args = {
+  state: 'caution',
+};
+
+export const Positive = Template.bind({});
+Positive.args = {
+  state: 'positive',
+};
+
+export const Negative = Template.bind({});
+Negative.args = {
+  state: 'negative',
+};
+
+export const Selectable = SelectableTemplate.bind({});
+Selectable.args = {
+  showIcon: true,
+  multiSelectable: false,
+};

package/src/circular-progress/circular-progress.spec.ts

@@ -0,0 +1,11 @@
+/**
+ * @vitest-environment jsdom
+ */
+import { it, describe, expect } from 'vitest';
+import { CovalentCircularProgress } from './circular-progress';
+
+describe('Circular progress', () => {
+  it('should work', () => {
+    expect(new CovalentCircularProgress()).toBeDefined();
+  });
+});