@api-client/ui 0.0.1

package/src/ui/effects/rippleDirective.ts

@@ -0,0 +1,300 @@
+/**
+ * @license
+ * Copyright 2022 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { noChange } from 'lit';
+import { Directive, directive, DirectiveParameters, ElementPart, PartInfo, PartType } from 'lit/directive.js';
+
+import Ripple from './ripple.js';
+
+/**
+ * Delay reacting to touch so that we do not show the ripple for a swipe or
+ * scroll interaction.
+ */
+const TOUCH_DELAY_MS = 150;
+
+/**
+ * Interaction states for the ripple.
+ *
+ * On Touch:
+ *  - `INACTIVE -> TOUCH_DELAY -> WAITING_FOR_CLICK -> INACTIVE`
+ *  - `INACTIVE -> TOUCH_DELAY -> HOLDING -> WAITING_FOR_CLICK -> INACTIVE`
+ *
+ * On Mouse or Pen:
+ *   - `INACTIVE -> WAITING_FOR_CLICK -> INACTIVE`
+ */
+enum State {
+  /**
+   * Initial state of the control, no touch in progress.
+   *
+   * Transitions:
+   *   - on touch down: transition to `TOUCH_DELAY`.
+   *   - on mouse down: transition to `WAITING_FOR_CLICK`.
+   */
+  INACTIVE,
+  /**
+   * Touch down has been received, waiting to determine if it's a swipe or
+   * scroll.
+   *
+   * Transitions:
+   *   - on touch up: beginPress(); transition to `WAITING_FOR_CLICK`.
+   *   - on cancel: transition to `INACTIVE`.
+   *   - after `TOUCH_DELAY_MS`: beginPress(); transition to `HOLDING`.
+   */
+  TOUCH_DELAY,
+  /**
+   * A touch has been deemed to be a press
+   *
+   * Transitions:
+   *  - on up: transition to `WAITING_FOR_CLICK`.
+   */
+  HOLDING,
+  /**
+   * The user touch has finished, transition into rest state.
+   *
+   * Transitions:
+   *   - on click endPress(); transition to `INACTIVE`.
+   */
+  WAITING_FOR_CLICK
+}
+
+/**
+ * Normalized ripple accessor type.
+ *
+ * Use with `await rippleFunction()`
+ */
+type RippleFunction = () => Ripple | null | Promise<Ripple | null>;
+
+class RippleDirective extends Directive {
+  private rippleGetter: RippleFunction = async () => null;
+
+  private element?: HTMLElement;
+
+  private state: State = State.INACTIVE;
+
+  private checkBoundsAfterContextMenu = false;
+
+  private rippleStartEvent: PointerEvent | null = null;
+
+  private touchTimer: number | null = null;
+
+  private clickTimer: number | null = null;
+
+  constructor(partInfo: PartInfo) {
+    super(partInfo);
+    if (partInfo.type !== PartType.ELEMENT) {
+      throw new Error('The `ripple` directive must be used on an element');
+    }
+  }
+
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  render(ripple: RippleFunction | Promise<Ripple | null>): typeof noChange {
+    return noChange;
+  }
+
+  // Use EventListenerObject::handleEvent interface to handle events without
+  // generating bound event handlers
+  async handleEvent(event: Event): Promise<void> {
+    const ripple = await this.rippleGetter();
+    if (!ripple) {
+      return;
+    }
+    switch (event.type) {
+      case 'click':
+        this.click(ripple);
+        break;
+      case 'contextmenu':
+        this.contextMenu(ripple);
+        break;
+      case 'pointercancel':
+        this.pointerCancel(ripple, event as PointerEvent);
+        break;
+      case 'pointerdown':
+        this.pointerDown(ripple, event as PointerEvent);
+        break;
+      case 'pointerenter':
+        this.pointerEnter(ripple, event as PointerEvent);
+        break;
+      case 'pointerleave':
+        this.pointerLeave(ripple, event as PointerEvent);
+        break;
+      case 'pointerup':
+        this.pointerUp(ripple, event as PointerEvent);
+        break;
+      default:
+        break;
+    }
+  }
+
+  override update(part: ElementPart, [ripple]: DirectiveParameters<this>): typeof noChange {
+    if (!this.element) {
+      // NOTE: addEventListener typing needs to be used with HTMLElements or a
+      // subclass
+      this.element = part.element as HTMLElement;
+      this.element.addEventListener('click', this);
+      this.element.addEventListener('contextmenu', this);
+      this.element.addEventListener('pointercancel', this);
+      this.element.addEventListener('pointerdown', this);
+      this.element.addEventListener('pointerenter', this);
+      this.element.addEventListener('pointerleave', this);
+      this.element.addEventListener('pointerup', this);
+    }
+    // Normalize given ripple accessor
+    this.rippleGetter = typeof ripple === 'function' ? ripple : (): Promise<Ripple | null> => ripple;
+    return noChange;
+  }
+
+  /**
+   * Returns `true` if
+   *  - the ripple element is enabled
+   *  - the pointer is primary for the input type
+   *  - the pointer is the pointer that started the interaction, or will start
+   * the interaction
+   *  - the pointer is a touch, or the pointer state has the primary button
+   * held, or the pointer is hovering
+   */
+  private shouldReactToEvent(ripple: Ripple, ev: PointerEvent, hovering = false): boolean {
+    const enabled = !ripple.disabled;
+    const isPrimaryPointer = ev.isPrimary;
+    const isInteractionPointer = this.rippleStartEvent === null ||
+      this.rippleStartEvent.pointerId === ev.pointerId;
+    const isPrimaryButton = ev.buttons === 1;
+    return enabled && isPrimaryPointer && isInteractionPointer &&
+      (this.isTouch(ev) || isPrimaryButton || hovering);
+  }
+
+  private isTouch({ pointerType }: PointerEvent): boolean {
+    return pointerType === 'touch';
+  }
+
+  /**
+   * Check if the event is within the bounds of the element.
+   *
+   * This is only needed for the "stuck" contextmenu longpress on Chrome.
+   */
+  private inBounds({ x, y }: PointerEvent): boolean {
+    const { top, left, bottom, right } = (this.element as HTMLElement).getBoundingClientRect();
+    return x >= left && x <= right && y >= top && y <= bottom;
+  }
+
+  private beginPress(ripple: Ripple): void {
+    ripple.beginPress(this.rippleStartEvent);
+  }
+
+  private endPress(ripple: Ripple): void {
+    ripple.endPress();
+    this.state = State.INACTIVE;
+    this.rippleStartEvent = null;
+    if (this.touchTimer) {
+      clearTimeout(this.touchTimer);
+      this.touchTimer = null;
+    }
+    if (this.clickTimer) {
+      clearTimeout(this.clickTimer);
+      this.clickTimer = null;
+    }
+  }
+
+  private waitForTouchHold(): void {
+    if (this.touchTimer !== null) {
+      clearTimeout(this.touchTimer);
+    }
+    this.state = State.TOUCH_DELAY;
+    this.touchTimer = setTimeout(async () => {
+      const ripple = await this.rippleGetter();
+      if (ripple === null || this.state !== State.TOUCH_DELAY) {
+        return;
+      }
+      this.state = State.HOLDING;
+      this.beginPress(ripple);
+    }, TOUCH_DELAY_MS) as unknown as number;
+  }
+
+  private click(ripple: Ripple): void {
+    // Click is a MouseEvent in Firefox and Safari, so we cannot use
+    // `shouldReactToEvent`
+    if (ripple.disabled) {
+      return;
+    }
+    if (this.state === State.WAITING_FOR_CLICK) {
+      this.endPress(ripple);
+    } else if (this.state === State.INACTIVE) {
+      // keyboard synthesized click event
+      this.beginPress(ripple);
+      this.endPress(ripple);
+    }
+  }
+
+  private contextMenu(ripple: Ripple): void {
+    if (!ripple.disabled) {
+      this.checkBoundsAfterContextMenu = true;
+      this.endPress(ripple);
+    }
+  }
+
+  private pointerDown(ripple: Ripple, ev: PointerEvent): void {
+    if (!this.shouldReactToEvent(ripple, ev)) {
+      return;
+    }
+    this.rippleStartEvent = ev;
+    if (this.isTouch(ev)) {
+      // after a longpress contextmenu event, an extra `pointerdown` can be
+      // dispatched to the pressed element. Check that the down is within
+      // bounds of the element in this case.
+      if (this.checkBoundsAfterContextMenu && !this.inBounds(ev)) {
+        return;
+      }
+      this.checkBoundsAfterContextMenu = false;
+      this.waitForTouchHold();
+    } else {
+      this.state = State.WAITING_FOR_CLICK;
+      this.beginPress(ripple);
+    }
+  }
+
+  private pointerUp(ripple: Ripple, ev: PointerEvent): void {
+    if (!this.isTouch(ev) || !this.shouldReactToEvent(ripple, ev)) {
+      return;
+    }
+    if (this.state === State.HOLDING) {
+      this.state = State.WAITING_FOR_CLICK;
+    } else if (this.state === State.TOUCH_DELAY) {
+      this.state = State.WAITING_FOR_CLICK;
+      this.beginPress(ripple);
+    }
+  }
+
+  private pointerCancel(ripple: Ripple, ev: PointerEvent): void {
+    if (this.shouldReactToEvent(ripple, ev)) {
+      this.endPress(ripple);
+    }
+  }
+
+  private pointerEnter(ripple: Ripple, ev: PointerEvent): void {
+    if (this.shouldReactToEvent(ripple, ev, true)) {
+      ripple.beginHover(ev);
+    }
+  }
+
+  private pointerLeave(ripple: Ripple, ev: PointerEvent): void {
+    if (this.shouldReactToEvent(ripple, ev, true)) {
+      ripple.endHover();
+      // release a held mouse or pen press that moves outside the element
+      if (!this.isTouch(ev) && this.state !== State.INACTIVE) {
+        this.endPress(ripple);
+      }
+    }
+  }
+}
+
+/**
+ * Connects a Ripple element to a node that drives the interaction
+ *
+ * @param rippleGetter A function that returns an `md-ripple` element
+ * @param simulateKeyboardClick For elements that do not issue a click on
+ *     keyboard interaction, pass `true` to enable press animations on Enter or
+ *     Spacebar
+ */
+export const ripple = directive(RippleDirective);

package/src/ui/icons/Icons.ts

@@ -0,0 +1,72 @@
+import { svg, SVGTemplateResult } from 'lit';
+
+/**
+ * Wraps icon into an SVG container.
+ * @param tpl Icon definition
+ * @returns Complete SVG icon definition
+ */
+export const iconWrapper = (tpl: SVGTemplateResult, width = 24, height = 24): SVGTemplateResult => svg`<svg viewBox="0 0 ${width} ${height}" preserveAspectRatio="xMidYMid meet" focusable="false" style="pointer-events: none; display: block; width: 100%; height: 100%;">${tpl}</svg>`;
+
+export type IconType = 
+  'add' | 'api' | 'apps' | 'arrowBack' | 'arrowDropDown' | 'cancel' | 'cancelFilled' | 'check' | 'checkBox' | 'checkBoxBlank' | 'checkIndeterminate' | 'chevronLeft' | 'chevronRight' | 'close' | 'cloud' | 'cloudFilled' | 'collectionsBookmark' | 'deleteFile' | 'deleteOutline' | 'edit' | 'environment' | 'expandMore' | 
+  'fileDownload' | 'folder' | 'folderFilled' | 'folderShared' | 'help' | 'history' | 'info' | 'key' | 'menu' | 'leaderBoard' |
+  'moreVert' | 'openInNew' | 'personAdd' | 'playArrow' | 'project' | 'remove' | 'rename' | 'request' | 'restoreFromTrash' | 'save' |
+  'schema' | 'schemaEntity' | 'schemaModel' | 'schemaNamespace' | 'search' | 'send' | 'settings' | 'space' | 'taskAlt' | 'timeline' | 'viewGrid' | 'viewList' | 'visibility' | 'visibilityOff' | 'warning';
+
+export const add = iconWrapper(svg`<path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"></path>`);
+export const api = iconWrapper(svg`<path d="M0,0H24V24H0Z" style="fill:none"/><path d="M22.45,15.1a4.87,4.87,0,0,0-3.74-4.73,5.29,5.29,0,0,0,.05-.56A4.88,4.88,0,0,0,9.3,8.12,2.85,2.85,0,0,0,5,10.54,4.86,4.86,0,0,0,6.48,20H17.87v0A4.87,4.87,0,0,0,22.45,15.1Z"/>`);
+export const apps = iconWrapper(svg`<path d="M6 8Q5.175 8 4.588 7.412Q4 6.825 4 6Q4 5.175 4.588 4.588Q5.175 4 6 4Q6.825 4 7.412 4.588Q8 5.175 8 6Q8 6.825 7.412 7.412Q6.825 8 6 8ZM12 20Q11.175 20 10.588 19.413Q10 18.825 10 18Q10 17.175 10.588 16.587Q11.175 16 12 16Q12.825 16 13.413 16.587Q14 17.175 14 18Q14 18.825 13.413 19.413Q12.825 20 12 20ZM6 20Q5.175 20 4.588 19.413Q4 18.825 4 18Q4 17.175 4.588 16.587Q5.175 16 6 16Q6.825 16 7.412 16.587Q8 17.175 8 18Q8 18.825 7.412 19.413Q6.825 20 6 20ZM6 14Q5.175 14 4.588 13.412Q4 12.825 4 12Q4 11.175 4.588 10.587Q5.175 10 6 10Q6.825 10 7.412 10.587Q8 11.175 8 12Q8 12.825 7.412 13.412Q6.825 14 6 14ZM12 14Q11.175 14 10.588 13.412Q10 12.825 10 12Q10 11.175 10.588 10.587Q11.175 10 12 10Q12.825 10 13.413 10.587Q14 11.175 14 12Q14 12.825 13.413 13.412Q12.825 14 12 14ZM18 8Q17.175 8 16.587 7.412Q16 6.825 16 6Q16 5.175 16.587 4.588Q17.175 4 18 4Q18.825 4 19.413 4.588Q20 5.175 20 6Q20 6.825 19.413 7.412Q18.825 8 18 8ZM12 8Q11.175 8 10.588 7.412Q10 6.825 10 6Q10 5.175 10.588 4.588Q11.175 4 12 4Q12.825 4 13.413 4.588Q14 5.175 14 6Q14 6.825 13.413 7.412Q12.825 8 12 8ZM18 14Q17.175 14 16.587 13.412Q16 12.825 16 12Q16 11.175 16.587 10.587Q17.175 10 18 10Q18.825 10 19.413 10.587Q20 11.175 20 12Q20 12.825 19.413 13.412Q18.825 14 18 14ZM18 20Q17.175 20 16.587 19.413Q16 18.825 16 18Q16 17.175 16.587 16.587Q17.175 16 18 16Q18.825 16 19.413 16.587Q20 17.175 20 18Q20 18.825 19.413 19.413Q18.825 20 18 20Z"/>`);
+export const arrowBack = iconWrapper(svg`<path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"></path>`);
+export const arrowDropDown = iconWrapper(svg`<path d="M7 10l5 5 5-5z"/>`);
+export const cancel = iconWrapper(svg`<path d="M0 0h24v24H0V0z" fill="none" opacity=".87"/><path d="M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm3.59-13L12 10.59 8.41 7 7 8.41 10.59 12 7 15.59 8.41 17 12 13.41 15.59 17 17 15.59 13.41 12 17 8.41z"/>`);
+export const cancelFilled = iconWrapper(svg`<path d="M0 0h24v24H0z" fill="none"/><path d="M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12 17 15.59z"/>`);
+export const check = iconWrapper(svg`<path d="m9.55 18-5.7-5.7 1.425-1.425L9.55 15.15l9.175-9.175L20.15 7.4Z"/>`);
+export const checkBox = iconWrapper(svg`<path d="m10.6 16.2 7.05-7.05-1.4-1.4-5.65 5.65-2.85-2.85-1.4 1.4ZM5 21q-.825 0-1.413-.587Q3 19.825 3 19V5q0-.825.587-1.413Q4.175 3 5 3h14q.825 0 1.413.587Q21 4.175 21 5v14q0 .825-.587 1.413Q19.825 21 19 21Zm0-2h14V5H5v14ZM5 5v14V5Z"/>`);
+export const checkBoxBlank = iconWrapper(svg`<path d="M5 21q-.825 0-1.413-.587Q3 19.825 3 19V5q0-.825.587-1.413Q4.175 3 5 3h14q.825 0 1.413.587Q21 4.175 21 5v14q0 .825-.587 1.413Q19.825 21 19 21Zm0-2h14V5H5v14Z"/>`);
+export const checkIndeterminate = iconWrapper(svg`<path d="M7 13v-2h10v2Z"/>`);
+export const chevronLeft = iconWrapper(svg`<path d="m14 18-6-6 6-6 1.4 1.4-4.6 4.6 4.6 4.6Z"/>`);
+export const chevronRight = iconWrapper(svg`<path d="M0 0h24v24H0z" fill="none"/><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/>`);
+export const close = iconWrapper(svg`<path d="M6.4 19 5 17.6l5.6-5.6L5 6.4 6.4 5l5.6 5.6L17.6 5 19 6.4 13.4 12l5.6 5.6-1.4 1.4-5.6-5.6Z"></path>`);
+export const cloud = iconWrapper(svg`<path d="M12 6c2.62 0 4.88 1.86 5.39 4.43l.3 1.5 1.53.11c1.56.1 2.78 1.41 2.78 2.96 0 1.65-1.35 3-3 3H6c-2.21 0-4-1.79-4-4 0-2.05 1.53-3.76 3.56-3.97l1.07-.11.5-.95C8.08 7.14 9.94 6 12 6m0-2C9.11 4 6.6 5.64 5.35 8.04 2.34 8.36 0 10.91 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96C18.67 6.59 15.64 4 12 4z"/>`);
+export const cloudFilled = iconWrapper(svg`<path d="M6.5 20Q4.225 20 2.613 18.425Q1 16.85 1 14.575Q1 12.625 2.175 11.1Q3.35 9.575 5.25 9.15Q5.875 6.85 7.75 5.425Q9.625 4 12 4Q14.925 4 16.962 6.037Q19 8.075 19 11Q20.725 11.2 21.863 12.487Q23 13.775 23 15.5Q23 17.375 21.688 18.688Q20.375 20 18.5 20Z"/>`);
+export const collectionsBookmark = iconWrapper(svg`<path d="M8 16h12V4h-2v7l-2.5-1.5L13 11V4H8v12Zm0 2q-.825 0-1.412-.587Q6 16.825 6 16V4q0-.825.588-1.413Q7.175 2 8 2h12q.825 0 1.413.587Q22 3.175 22 4v12q0 .825-.587 1.413Q20.825 18 20 18Zm-4 4q-.825 0-1.412-.587Q2 20.825 2 20V6h2v14h14v2Zm9-18h5ZM8 4h12Z"/>`);
+export const deleteFile = iconWrapper(svg`<path d="M0 0h24v24H0V0z" fill="none"/><path d="M16 9v10H8V9h8m-1.5-6h-5l-1 1H5v2h14V4h-3.5l-1-1zM18 7H6v12c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7z"/>`);
+export const deleteOutline = iconWrapper(svg`<path d="M7 21q-.825 0-1.412-.587Q5 19.825 5 19V6H4V4h5V3h6v1h5v2h-1v13q0 .825-.587 1.413Q17.825 21 17 21ZM17 6H7v13h10ZM9 17h2V8H9Zm4 0h2V8h-2ZM7 6v13Z"/>`);
+export const edit = iconWrapper(svg`<path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"></path>`);
+export const environment = iconWrapper(svg`<path d="M160,32h0V160s0,0,0,0H32l0,0h0V32s0,0,0,0H160m0-12H32A12,12,0,0,0,20,32V160a12,12,0,0,0,12,12H160a12,12,0,0,0,12-12V32a12,12,0,0,0-12-12Z"/><path d="M96,68A28,28,0,1,1,68,96,28,28,0,0,1,96,68m0-12a40,40,0,1,0,40,40A40,40,0,0,0,96,56Z"/><rect width="192" height="192" style="fill:none"/>`, 192, 192);
+export const expandMore = iconWrapper(svg`<path d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"></path>`);
+export const fileDownload = iconWrapper(svg`<path d="M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z"></path>`);
+export const folder = iconWrapper(svg`<path d="M9.17 6l2 2H20v10H4V6h5.17M10 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2h-8l-2-2z"/>`);
+export const folderFilled = iconWrapper(svg`<path d="M4 20Q3.175 20 2.588 19.413Q2 18.825 2 18V6Q2 5.175 2.588 4.588Q3.175 4 4 4H10L12 6H20Q20.825 6 21.413 6.588Q22 7.175 22 8V18Q22 18.825 21.413 19.413Q20.825 20 20 20Z"/>`);
+export const folderShared = iconWrapper(svg`<path d="M20 6h-8l-2-2H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2zm0 12H4V6h5.17l2 2H20v10zm-5-5c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm-4 4h8v-1c0-1.33-2.67-2-4-2s-4 .67-4 2v1z"/>`);
+export const help = iconWrapper(svg`<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 17h-2v-2h2v2zm2.07-7.75l-.9.92C13.45 12.9 13 13.5 13 15h-2v-.5c0-1.1.45-2.1 1.17-2.83l1.24-1.26c.37-.36.59-.86.59-1.41 0-1.1-.9-2-2-2s-2 .9-2 2H8c0-2.21 1.79-4 4-4s4 1.79 4 4c0 .88-.36 1.68-.93 2.25z"></path>`);
+export const history = iconWrapper(svg`<path d="M13 3c-4.97 0-9 4.03-9 9H1l3.89 3.89.07.14L9 12H6c0-3.87 3.13-7 7-7s7 3.13 7 7-3.13 7-7 7c-1.93 0-3.68-.79-4.94-2.06l-1.42 1.42C8.27 19.99 10.51 21 13 21c4.97 0 9-4.03 9-9s-4.03-9-9-9zm-1 5v5l4.28 2.54.72-1.21-3.5-2.08V8H12z"></path>`);
+export const info = iconWrapper(svg`<path d="M11 17h2v-6h-2v6zm1-15C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zM11 9h2V7h-2v2z"></path>`);
+export const key = iconWrapper(svg`<g><rect fill="none" height="24" width="24"/></g><g><path d="M21,10h-8.35C11.83,7.67,9.61,6,7,6c-3.31,0-6,2.69-6,6s2.69,6,6,6c2.61,0,4.83-1.67,5.65-4H13l2,2l2-2l2,2l4-4.04L21,10z M7,15c-1.65,0-3-1.35-3-3c0-1.65,1.35-3,3-3s3,1.35,3,3C10,13.65,8.65,15,7,15z"/></g>`);
+export const leaderBoard = iconWrapper(svg`<rect fill="none" height="24" width="24"/><g><path d="M16,11V3H8v6H2v12h20V11H16z M10,5h4v14h-4V5z M4,11h4v8H4V11z M20,19h-4v-6h4V19z"/></g>`);
+export const menu = iconWrapper(svg`<path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"></path>`);
+export const moreVert = iconWrapper(svg`<path d="M0 0h24v24H0z" fill="none"/><path d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"/>`);
+export const openInNew = iconWrapper(svg`<path d="M19 19H5V5h7V3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2v-7h-2v7zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z"></path>`);
+export const personAdd = iconWrapper(svg`<g><rect fill="none" height="24" width="24"/></g><g><path d="M20,9V6h-2v3h-3v2h3v3h2v-3h3V9H20z M9,12c2.21,0,4-1.79,4-4c0-2.21-1.79-4-4-4S5,5.79,5,8C5,10.21,6.79,12,9,12z M9,6 c1.1,0,2,0.9,2,2c0,1.1-0.9,2-2,2S7,9.1,7,8C7,6.9,7.9,6,9,6z M15.39,14.56C13.71,13.7,11.53,13,9,13c-2.53,0-4.71,0.7-6.39,1.56 C1.61,15.07,1,16.1,1,17.22V20h16v-2.78C17,16.1,16.39,15.07,15.39,14.56z M15,18H3v-0.78c0-0.38,0.2-0.72,0.52-0.88 C4.71,15.73,6.63,15,9,15c2.37,0,4.29,0.73,5.48,1.34C14.8,16.5,15,16.84,15,17.22V18z"/></g>`);
+export const playArrow = iconWrapper(svg`<path d="M0 0h24v24H0V0z" fill="none"/><path d="M10 8.64L15.27 12 10 15.36V8.64M8 5v14l11-7L8 5z"/>`);
+export const project = iconWrapper(svg`<path d="M160,32h0V160s0,0,0,0H32l0,0h0V32s0,0,0,0H160m0-12H32A12,12,0,0,0,20,32V160a12,12,0,0,0,12,12H160a12,12,0,0,0,12-12V32a12,12,0,0,0-12-12Z"/><circle cx="63" cy="63" r="9" style="fill:none;stroke:#000;stroke-miterlimit:10;stroke-width:8px"/><circle cx="63" cy="96" r="9" style="fill:none;stroke:#000;stroke-miterlimit:10;stroke-width:8px"/><circle cx="63" cy="129" r="9" style="fill:none;stroke:#000;stroke-miterlimit:10;stroke-width:8px"/><rect width="192" height="192" style="fill:none"/>`, 192, 192);
+export const remove = iconWrapper(svg`<path d="M0 0h24v24H0V0z" fill="none"/><path d="M19 13H5v-2h14v2z"/>`);
+export const rename = iconWrapper(svg`<g><rect fill="none" height="24" width="24"/></g><g><g><polygon points="15,16 11,20 21,20 21,16"/><path d="M12.06,7.19L3,16.25V20h3.75l9.06-9.06L12.06,7.19z M5.92,18H5v-0.92l7.06-7.06l0.92,0.92L5.92,18z"/><path d="M18.71,8.04c0.39-0.39,0.39-1.02,0-1.41l-2.34-2.34C16.17,4.09,15.92,4,15.66,4c-0.25,0-0.51,0.1-0.7,0.29l-1.83,1.83 l3.75,3.75L18.71,8.04z"/></g></g>`);
+export const request = iconWrapper(svg`<polygon points="136 136 56 136 32 96 56 56 136 56 160 96 136 136" style="fill:none;stroke:#000;stroke-miterlimit:10;stroke-width:12px"/><rect width="192" height="192" style="fill:none"/>`, 192, 192);
+export const restoreFromTrash = iconWrapper(svg`<path d="M11 16h2v-4.15l1.6 1.55L16 12l-4-4-4 4 1.4 1.4 1.6-1.55Zm-4 5q-.825 0-1.412-.587Q5 19.825 5 19V6H4V4h5V3h6v1h5v2h-1v13q0 .825-.587 1.413Q17.825 21 17 21ZM17 6H7v13h10ZM7 6v13Z"/>`);
+export const save = iconWrapper(svg`<path d="M17 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V7l-4-4zm-5 16c-1.66 0-3-1.34-3-3s1.34-3 3-3 3 1.34 3 3-1.34 3-3 3zm3-10H5V5h10v4z"></path>`);
+export const schema = iconWrapper(svg`<path d="M83.31,32.21a8,8,0,0,0-5.66,2.34L22.34,89.86a8.63,8.63,0,0,0,0,11.8L77.65,157A8,8,0,0,0,89,145.65L39.07,95.76,89,45.86a8,8,0,0,0-5.66-13.65Z"/><path d="M108.9,32.53a8,8,0,0,0-5.66,13.65l49.9,49.9L103.24,146a8,8,0,0,0,11.32,11.32L169.87,102a8.63,8.63,0,0,0,0-11.8L114.56,34.87a8,8,0,0,0-5.66-2.34Z"/><rect width="192" height="192" style="fill:none"/>`, 192, 192);
+export const schemaEntity = iconWrapper(svg`<path d="M19.78,1.4H4.7A3.22,3.22,0,0,0,1.45,4.65V19.74A3.22,3.22,0,0,0,4.7,23H19.78A3.22,3.22,0,0,0,23,19.74V4.65A3.22,3.22,0,0,0,19.78,1.4Zm1.95,18.34a2,2,0,0,1-1.95,2H4.7a2,2,0,0,1-1.95-2V4.65a2,2,0,0,1,2-1.95H19.78a2,2,0,0,1,1.95,2Z"/><rect x="5.4" y="5.35" width="13.69" height="13.69" rx="2.06"/><rect x="6.44" y="6.39" width="11.61" height="11.61" rx="1.02"/><path d="M0,0H24V24H0Z" style="fill:none"/>`);
+export const schemaModel = iconWrapper(svg`<path d="M3.4,16.79H9.09a1.71,1.71,0,0,0,1.85-1.55V8.85A1.8,1.8,0,0,0,9.09,7.21H3.4A1.71,1.71,0,0,0,1.55,8.76s0,.06,0,.09v6.3A1.7,1.7,0,0,0,3.3,16.79ZM14.91,23H20.6a1.7,1.7,0,0,0,1.85-1.54s0-.07,0-.1V15.06a1.8,1.8,0,0,0-1.86-1.64H14.91A1.71,1.71,0,0,0,13.06,15v6.38C12.93,22.31,13.85,23,14.91,23Zm0-12.55H20.6A1.7,1.7,0,0,0,22.45,8.9s0-.07,0-.1V2.65A1.79,1.79,0,0,0,20.6,1H14.91a1.7,1.7,0,0,0-1.85,1.54V8.94C12.93,9.76,13.85,10.44,14.91,10.44Z" style="isolation:isolate"/><path d="M0,0H24V24H0Z" style="fill:none"/>`);
+export const schemaNamespace = iconWrapper(svg`<path d="M3.41,10.12H9.09a1.68,1.68,0,0,0,1.85-1.59V2.59A1.76,1.76,0,0,0,9.09,1H3.41A1.68,1.68,0,0,0,1.56,2.59V8.67A1.67,1.67,0,0,0,3.41,10.12Zm0,12.94H9.09a1.68,1.68,0,0,0,1.85-1.58V15.4a1.76,1.76,0,0,0-1.85-1.59H3.41A1.68,1.68,0,0,0,1.56,15.4v6.08A1.68,1.68,0,0,0,3.41,23.06Zm11.5,0h5.68a1.68,1.68,0,0,0,1.85-1.58V15.4a1.76,1.76,0,0,0-1.85-1.59H14.91a1.68,1.68,0,0,0-1.85,1.59v6.08C12.93,22.4,13.85,23.06,14.91,23.06Zm0-12.94h5.68a1.68,1.68,0,0,0,1.85-1.59V2.59A1.76,1.76,0,0,0,20.59,1H14.91a1.68,1.68,0,0,0-1.85,1.59V8.67C12.93,9.46,13.85,10.12,14.91,10.12Z"/><path d="M0,0H24V24H0Z" style="fill:none"/>`);
+export const search = iconWrapper(svg`<path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"></path>`);
+export const send = iconWrapper(svg`<path d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z"></path>`);
+export const settings = iconWrapper(svg`<path d="M0 0h24v24H0V0z" fill="none"/><path d="M19.43 12.98c.04-.32.07-.64.07-.98 0-.34-.03-.66-.07-.98l2.11-1.65c.19-.15.24-.42.12-.64l-2-3.46c-.09-.16-.26-.25-.44-.25-.06 0-.12.01-.17.03l-2.49 1c-.52-.4-1.08-.73-1.69-.98l-.38-2.65C14.46 2.18 14.25 2 14 2h-4c-.25 0-.46.18-.49.42l-.38 2.65c-.61.25-1.17.59-1.69.98l-2.49-1c-.06-.02-.12-.03-.18-.03-.17 0-.34.09-.43.25l-2 3.46c-.13.22-.07.49.12.64l2.11 1.65c-.04.32-.07.65-.07.98 0 .33.03.66.07.98l-2.11 1.65c-.19.15-.24.42-.12.64l2 3.46c.09.16.26.25.44.25.06 0 .12-.01.17-.03l2.49-1c.52.4 1.08.73 1.69.98l.38 2.65c.03.24.24.42.49.42h4c.25 0 .46-.18.49-.42l.38-2.65c.61-.25 1.17-.59 1.69-.98l2.49 1c.06.02.12.03.18.03.17 0 .34-.09.43-.25l2-3.46c.12-.22.07-.49-.12-.64l-2.11-1.65zm-1.98-1.71c.04.31.05.52.05.73 0 .21-.02.43-.05.73l-.14 1.13.89.7 1.08.84-.7 1.21-1.27-.51-1.04-.42-.9.68c-.43.32-.84.56-1.25.73l-1.06.43-.16 1.13-.2 1.35h-1.4l-.19-1.35-.16-1.13-1.06-.43c-.43-.18-.83-.41-1.23-.71l-.91-.7-1.06.43-1.27.51-.7-1.21 1.08-.84.89-.7-.14-1.13c-.03-.31-.05-.54-.05-.74s.02-.43.05-.73l.14-1.13-.89-.7-1.08-.84.7-1.21 1.27.51 1.04.42.9-.68c.43-.32.84-.56 1.25-.73l1.06-.43.16-1.13.2-1.35h1.39l.19 1.35.16 1.13 1.06.43c.43.18.83.41 1.23.71l.91.7 1.06-.43 1.27-.51.7 1.21-1.07.85-.89.7.14 1.13zM12 8c-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4-1.79-4-4-4zm0 6c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z"/>`);
+export const space = iconWrapper(svg`<path d="M62.14,110.18a11.26,11.26,0,1,1-11.27,11.26,11.29,11.29,0,0,1,11.27-11.26m0-11.27a22.53,22.53,0,1,0,22.52,22.53A22.6,22.6,0,0,0,62.14,98.91Zm33.78-45A11.26,11.26,0,1,1,84.66,65.13,11.3,11.3,0,0,1,95.92,53.87m0-11.26a22.52,22.52,0,1,0,22.52,22.52A22.58,22.58,0,0,0,95.92,42.61Zm33.78,67.57a11.26,11.26,0,1,1-11.26,11.26,11.28,11.28,0,0,1,11.26-11.26m0-11.27a22.53,22.53,0,1,0,22.53,22.53A22.6,22.6,0,0,0,129.7,98.91Z"/><rect width="192" height="192" style="fill:none"/>`, 192, 192);
+export const taskAlt = iconWrapper(svg`<rect fill="none" height="24" width="24"/><path d="M22,5.18L10.59,16.6l-4.24-4.24l1.41-1.41l2.83,2.83l10-10L22,5.18z M19.79,10.22C19.92,10.79,20,11.39,20,12 c0,4.42-3.58,8-8,8s-8-3.58-8-8c0-4.42,3.58-8,8-8c1.58,0,3.04,0.46,4.28,1.25l1.44-1.44C16.1,2.67,14.13,2,12,2C6.48,2,2,6.48,2,12 c0,5.52,4.48,10,10,10s10-4.48,10-10c0-1.19-0.22-2.33-0.6-3.39L19.79,10.22z"/>`);
+export const timeline = iconWrapper(svg`<path d="M3 18Q2.175 18 1.588 17.413Q1 16.825 1 16Q1 15.175 1.588 14.587Q2.175 14 3 14Q3.15 14 3.263 14Q3.375 14 3.5 14.05L8.05 9.5Q8 9.375 8 9.262Q8 9.15 8 9Q8 8.175 8.588 7.587Q9.175 7 10 7Q10.825 7 11.413 7.587Q12 8.175 12 9Q12 9.05 11.95 9.5L14.5 12.05Q14.625 12 14.738 12Q14.85 12 15 12Q15.15 12 15.262 12Q15.375 12 15.5 12.05L19.05 8.5Q19 8.375 19 8.262Q19 8.15 19 8Q19 7.175 19.587 6.588Q20.175 6 21 6Q21.825 6 22.413 6.588Q23 7.175 23 8Q23 8.825 22.413 9.412Q21.825 10 21 10Q20.85 10 20.738 10Q20.625 10 20.5 9.95L16.95 13.5Q17 13.625 17 13.738Q17 13.85 17 14Q17 14.825 16.413 15.412Q15.825 16 15 16Q14.175 16 13.588 15.412Q13 14.825 13 14Q13 13.85 13 13.738Q13 13.625 13.05 13.5L10.5 10.95Q10.375 11 10.262 11Q10.15 11 10 11Q9.95 11 9.5 10.95L4.95 15.5Q5 15.625 5 15.738Q5 15.85 5 16Q5 16.825 4.412 17.413Q3.825 18 3 18Z"/>`);
+export const viewGrid = iconWrapper(svg`<rect fill="none" height="24" width="24"/><path d="M3,5v14h18V5H3z M7,7v2H5V7H7z M5,13v-2h2v2H5z M5,15h2v2H5V15z M19,17H9v-2h10V17z M19,13H9v-2h10V13z M19,9H9V7h10V9z"/>`);
+export const viewList = iconWrapper(svg`<g><rect fill="none" height="24" width="24"/></g><path d="M3,3v8h8V3H3z M9,9H5V5h4V9z M3,13v8h8v-8H3z M9,19H5v-4h4V19z M13,3v8h8V3H13z M19,9h-4V5h4V9z M13,13v8h8v-8H13z M19,19h-4v-4h4V19z"/>`);
+export const visibility = iconWrapper(svg`<path d="M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z"></path>`);
+export const visibilityOff = iconWrapper(svg`<path d="M12 7c2.76 0 5 2.24 5 5 0 .65-.13 1.26-.36 1.83l2.92 2.92c1.51-1.26 2.7-2.89 3.43-4.75-1.73-4.39-6-7.5-11-7.5-1.4 0-2.74.25-3.98.7l2.16 2.16C10.74 7.13 11.35 7 12 7zM2 4.27l2.28 2.28.46.46C3.08 8.3 1.78 10.02 1 12c1.73 4.39 6 7.5 11 7.5 1.55 0 3.03-.3 4.38-.84l.42.42L19.73 22 21 20.73 3.27 3 2 4.27zM7.53 9.8l1.55 1.55c-.05.21-.08.43-.08.65 0 1.66 1.34 3 3 3 .22 0 .44-.03.65-.08l1.55 1.55c-.67.33-1.41.53-2.2.53-2.76 0-5-2.24-5-5 0-.79.2-1.53.53-2.2zm4.31-.78l3.15 3.15.02-.16c0-1.66-1.34-3-3-3l-.17.01z"></path>`);
+export const warning = iconWrapper(svg`<path d="M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z"></path>`);

package/src/ui/icons/UiIcon.styles.ts

@@ -0,0 +1,10 @@
+import { css } from 'lit';
+
+export default css`
+:host {
+  display: inline-block;
+  width: 24px;
+  height: 24px;
+  fill: currentColor;
+}
+`;

package/src/ui/icons/UiIcon.ts

@@ -0,0 +1,66 @@
+/*
+Copyright 2022 Pawel Psztyc
+Licensed under the CC-BY 2.0
+*/
+import { html, TemplateResult, LitElement, SVGTemplateResult } from 'lit';
+import { property } from 'lit/decorators.js';
+import * as Icons from './Icons.js';
+import { IconType } from './Icons.js';
+
+export default class UiIcon extends LitElement {
+  private iconInternal: IconType | undefined;
+
+  private hasIconInternal = false;
+
+  private iconValue: SVGTemplateResult | undefined;
+
+  /**
+   * An icon to be rendered from the ApiIcons library.
+   * When incorrect icon is referenced nothing is rendered.
+   * @attribute
+   */
+  @property()
+  get icon(): IconType | undefined {
+    return this.iconInternal;
+  }
+
+  set icon(value: IconType | undefined) {
+    const old = this.iconInternal;
+    if (old === value) {
+      return;
+    }
+    this.iconInternal = value;
+    this.updateIcon(value);
+    // don't request update here
+  }
+
+  /**
+   * @returns True when the icon was found and is rendered.
+   */
+  get hasIcon(): boolean {
+    return this.hasIconInternal;
+  }
+
+  /**
+   * Maps icon name to it's definition and sets `hasIcon` value.
+   *
+   * @param name Icon name
+   */
+  protected updateIcon(name: IconType | undefined): void {
+    const icon = (Icons as never)[name as IconType] as SVGTemplateResult | undefined;
+    this.hasIconInternal = !!icon;
+    this.iconValue = icon;
+    this.requestUpdate();
+  }
+
+  /**
+   * @return Template result for an icon
+   */
+  override render(): TemplateResult {
+    const { hasIcon, iconValue: _iconValue } = this;
+    if (!hasIcon) {
+      return html`<slot></slot>`;
+    }
+    return html`${_iconValue}`;
+  }
+}