@api-client/ui 0.0.3 → 0.0.5

package/dist/ui/progress/Range.js.map

@@ -1 +1 @@
-{"version":3,"file":"Range.js","sourceRoot":"","sources":["../../../src/ui/progress/Range.ts"],"names":[],"mappings":"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","sourcesContent":["import { PropertyValues } from \"lit\";\nimport { property } from \"lit/decorators.js\";\nimport { floatConverter } from \"../lib/AttributeConverters.js\";\nimport { UiElement } from \"../UiElement.js\";\n\n/**\n * @fires ratiochange - When `ratio` computation is ready.\n */\nexport abstract class UiRange extends UiElement {\n  protected ratioInternal = 0;\n\n  protected debounceInternal?: number;\n\n  protected oldValue?: number;\n\n  /**\n   * @returns the ratio of the value.\n   */\n  get ratio(): number {\n    return this.ratioInternal;\n  }\n\n  /**\n   * The number that represents the current value.\n   * @attribute\n   */\n  @property({ type: Number, converter: floatConverter }) value = 0;\n\n  /**\n   * The number that indicates the minimum value of the range.\n   * @attribute\n   */\n  @property({ type: Number, converter: floatConverter }) min = 0;\n\n  /**\n   * The number that indicates the maximum value of the range.\n   * @attribute\n   */\n  @property({ type: Number, converter: floatConverter }) max = 100;\n\n  /**\n   * Specifies the value granularity of the range's value.\n   * @attribute\n   */\n  @property({ type: Number, converter: floatConverter }) step = 1;\n\n  protected override willUpdate(cp: PropertyValues<this>): void {\n    if (cp.has('value') || cp.has('min') || cp.has('max') || cp.has('step')) {\n      this.rangeChanged();\n    }\n  }\n\n  protected rangeChanged(): void {\n    this.validateValue();\n    const ratio = this.computeRatio(this.value) * 100;\n    if (this.ratioInternal !== ratio) {\n      this.ratioInternal = ratio;\n      this.dispatchEvent(new Event('ratiochange'));\n    }\n  }\n\n  /**\n   * Makes sure the value is in the right format.\n   * @returns True when the value has changed.\n   */\n  protected validateValue(): boolean {\n    const v = this.clampValue(this.value);\n    this.oldValue = Number.isNaN(v) ? this.oldValue : v;\n    this.value = this.oldValue || 0;\n    return this.value !== v;\n  }\n\n  protected clampValue(value: number): number {\n    return Math.min(this.max, Math.max(this.min, this.computeStep(value)));\n  }\n\n  protected computeStep(step: number): number {\n    const value = step;\n    if (!this.step) {\n      return value;\n    }\n    const numSteps = Math.round((value - this.min) / this.step);\n    if (this.step < 1) {\n      /**\n       * For small values of this.step, if we calculate the step using\n       * `Math.round(value / step) * step` we may hit a precision point issue\n       * eg. 0.1 * 0.2 =  0.020000000000000004\n       * http://docs.oracle.com/cd/E19957-01/806-3568/ncg_goldberg.html\n       *\n       * as a work around we can divide by the reciprocal of `step`\n       */\n      return numSteps / (1 / this.step) + this.min;\n    }\n    return numSteps * this.step + this.min;\n  }\n\n  protected computeRatio(value: number): number {\n    const denominator = this.max - this.min;\n    if (denominator === 0) {\n      return 0;\n    }\n    return (this.clampValue(value) - this.min) / (this.max - this.min);\n  }\n}\n"]}
+{"version":3,"file":"Range.js","sourceRoot":"","sources":["../../../src/ui/progress/Range.ts"],"names":[],"mappings":"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","sourcesContent":["import { PropertyValues } from \"lit\";\nimport { property } from \"lit/decorators.js\";\nimport { floatConverter } from \"../lib/AttributeConverters.js\";\nimport { UiElement } from \"../UiElement.js\";\n\n/**\n * @fires ratiochange - When `ratio` computation is ready.\n */\nexport abstract class UiRange extends UiElement {\n  protected ratioInternal = 0;\n\n  protected debounceInternal?: number;\n\n  protected oldValue?: number;\n\n  /**\n   * @returns the ratio of the value.\n   */\n  get ratio(): number {\n    return this.ratioInternal;\n  }\n\n  /**\n   * The number that represents the current value.\n   * @attribute\n   */\n  @property({ type: Number, converter: floatConverter }) value = 0;\n\n  /**\n   * The number that indicates the minimum value of the range.\n   * @attribute\n   */\n  @property({ type: Number, converter: floatConverter }) min = 0;\n\n  /**\n   * The number that indicates the maximum value of the range.\n   * @attribute\n   */\n  @property({ type: Number, converter: floatConverter }) max = 100;\n\n  /**\n   * Specifies the value granularity of the range's value.\n   * @attribute\n   */\n  @property({ type: Number, converter: floatConverter }) step = 1;\n\n  protected override willUpdate(cp: PropertyValues<this>): void {\n    if (cp.has('value') || cp.has('min') || cp.has('max') || cp.has('step')) {\n      this.rangeChanged();\n    }\n  }\n\n  protected rangeChanged(): void {\n    this.validateValue();\n    const ratio = this.computeRatio(this.value) * 100;\n    if (this.ratioInternal !== ratio) {\n      this.ratioInternal = ratio;\n      this.dispatchEvent(new Event('ratiochange'));\n    }\n  }\n\n  /**\n   * Makes sure the value is in the right format.\n   * @returns True when the value has changed.\n   */\n  protected validateValue(): boolean {\n    const v = this.clampValue(this.value);\n    this.oldValue = Number.isNaN(v) ? this.oldValue : v;\n    this.value = this.oldValue || 0;\n    return this.value !== v;\n  }\n\n  protected clampValue(value: number): number {\n    return Math.min(this.max, Math.max(this.min, this.computeStep(value)));\n  }\n\n  protected computeStep(step: number): number {\n    const value = step;\n    if (!this.step) {\n      return value;\n    }\n    const numSteps = Math.round((value - this.min) / this.step);\n    if (this.step < 1) {\n      /**\n       * For small values of this.step, if we calculate the step using\n       * `Math.round(value / step) * step` we may hit a precision point issue\n       * eg. 0.1 * 0.2 =  0.020000000000000004\n       * http://docs.oracle.com/cd/E19957-01/806-3568/ncg_goldberg.html\n       *\n       * as a work around we can divide by the reciprocal of `step`\n       */\n      return numSteps / (1 / this.step) + this.min;\n    }\n    return numSteps * this.step + this.min;\n  }\n\n  protected computeRatio(value: number): number {\n    const denominator = this.max - this.min;\n    if (denominator === 0) {\n      return 0;\n    }\n    return (this.clampValue(value) - this.min) / (this.max - this.min);\n  }\n}\n"]}

package/dist/ui/progress/UiProgress.js

@@ -7,7 +7,6 @@ import { UiRange } from "./Range.js";
 import { isDisabled, setDisabled } from "../lib/disabled.js";
 import { floatConverter } from "../lib/AttributeConverters.js";
 export default class UiProgress extends UiRange {
-    secondaryRatioInternal;
     get disabled() {
         return isDisabled(this);
     }
@@ -20,16 +19,6 @@ export default class UiProgress extends UiRange {
         setDisabled(this, value);
         this.requestUpdate('disabled', old);
     }
-    /**
-     * The number that represents the current secondary progress.
-     * @attr
-     */
-    secondaryProgress;
-    /**
-     * Use an indeterminate progress indicator.
-     * @attr
-     */
-    indeterminate;
     /**
      * @returns The ratio of the secondary progress.
      */

package/dist/ui/progress/UiProgress.js.map

@@ -1 +1 @@
-{"version":3,"file":"UiProgress.js","sourceRoot":"","sources":["../../../src/ui/progress/UiProgress.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, PropertyValues, TemplateResult } from \"lit\";\nimport { property } from \"lit/decorators.js\";\nimport { ClassInfo, classMap } from \"lit/directives/class-map.js\";\nimport { StyleInfo, styleMap } from \"lit/directives/style-map.js\";\nimport { UiRange } from \"./Range.js\";\nimport { isDisabled, setDisabled } from \"../lib/disabled.js\";\nimport { floatConverter } from \"../lib/AttributeConverters.js\";\n\nexport default class UiProgress extends UiRange {\n  protected secondaryRatioInternal?: number;\n  \n  get disabled(): boolean {\n    return isDisabled(this);\n  }\n\n  /**\n   * When set, the button is a disabled state.\n   * @attribute\n   */\n  @property({ reflect: true, type: Boolean })\n  set disabled(value: boolean) {\n    const old = isDisabled(this);\n    setDisabled(this, value);\n    this.requestUpdate('disabled', old);\n  }\n\n  /**\n   * The number that represents the current secondary progress.\n   * @attr\n   */\n  @property({ type: Number, converter: floatConverter }) secondaryProgress?: number;\n\n  /**\n   * Use an indeterminate progress indicator.\n   * @attr\n   */\n  @property({ reflect: true, type: Boolean }) indeterminate?: boolean;\n\n  /**\n   * @returns The ratio of the secondary progress.\n   */\n  get secondaryRatio(): number {\n    return this.secondaryRatioInternal || 0;\n  }\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    if (!this.hasAttribute('role')) {\n      this.setAttribute('role', 'progressbar');\n    }\n  }\n\n  protected override willUpdate(cp: PropertyValues<this>): void {\n    super.willUpdate(cp);\n    if (cp.has('secondaryProgress') || cp.has('indeterminate')) {\n      this.rangeChanged();\n    }\n  }\n\n  protected override updated(cp: PropertyValues<this>): void {\n    if (cp.has('min')) {\n      this.setAttribute('aria-valuemin', String(this.min));\n    }\n    if (cp.has('max')) {\n      this.setAttribute('aria-valuemax', String(this.max));\n    }\n    if (cp.has('indeterminate') || cp.has('value')) {\n      if (this.indeterminate) {\n        this.removeAttribute('aria-valuenow');\n      } else {\n        this.setAttribute('aria-valuenow', String(this.value));\n      }\n    }\n  }\n\n  protected override rangeChanged(): void {\n    super.rangeChanged();\n    const { secondaryProgress: sp } = this;\n    if (typeof sp === 'number') {\n      const secondary = this.clampValue(sp);\n      this.secondaryRatioInternal = this.computeRatio(secondary) * 100;\n    } else {\n      this.secondaryRatioInternal = undefined;\n    }\n  }\n\n  override render(): TemplateResult {\n    const { secondaryRatio = 0, indeterminate = false, ratio = 0, disabled = false } = this;\n    const primaryClasses = {\n      primary: true,\n      indeterminate: !disabled && indeterminate,\n      linear: !indeterminate,\n    };\n    const primaryStyle: StyleInfo = {};\n    if (!indeterminate) {\n      primaryStyle.transform = `scaleX(${(ratio / 100)})`;\n    }\n    const secondaryStyle = {\n      transform: `scaleX(${(secondaryRatio / 100)})`,\n    };\n    const containerClasses: ClassInfo = {\n      container: true,\n      disabled,\n    };\n    return html`\n    <div class=\"${classMap(containerClasses)}\">\n      <div class=\"secondary\" ?hidden=\"${secondaryRatio === 0}\" style=\"${styleMap(secondaryStyle)}\"></div>\n      <div class=\"${classMap(primaryClasses)}\" style=\"${styleMap(primaryStyle)}\"></div>\n    </div>\n    `;\n  }\n}\n"]}
+{"version":3,"file":"UiProgress.js","sourceRoot":"","sources":["../../../src/ui/progress/UiProgress.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, PropertyValues, TemplateResult } from \"lit\";\nimport { property } from \"lit/decorators.js\";\nimport { ClassInfo, classMap } from \"lit/directives/class-map.js\";\nimport { StyleInfo, styleMap } from \"lit/directives/style-map.js\";\nimport { UiRange } from \"./Range.js\";\nimport { isDisabled, setDisabled } from \"../lib/disabled.js\";\nimport { floatConverter } from \"../lib/AttributeConverters.js\";\n\nexport default class UiProgress extends UiRange {\n  protected secondaryRatioInternal?: number;\n  \n  get disabled(): boolean {\n    return isDisabled(this);\n  }\n\n  /**\n   * When set, the button is a disabled state.\n   * @attribute\n   */\n  @property({ reflect: true, type: Boolean })\n  set disabled(value: boolean) {\n    const old = isDisabled(this);\n    setDisabled(this, value);\n    this.requestUpdate('disabled', old);\n  }\n\n  /**\n   * The number that represents the current secondary progress.\n   * @attr\n   */\n  @property({ type: Number, converter: floatConverter }) secondaryProgress?: number;\n\n  /**\n   * Use an indeterminate progress indicator.\n   * @attr\n   */\n  @property({ reflect: true, type: Boolean }) indeterminate?: boolean;\n\n  /**\n   * @returns The ratio of the secondary progress.\n   */\n  get secondaryRatio(): number {\n    return this.secondaryRatioInternal || 0;\n  }\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    if (!this.hasAttribute('role')) {\n      this.setAttribute('role', 'progressbar');\n    }\n  }\n\n  protected override willUpdate(cp: PropertyValues<this>): void {\n    super.willUpdate(cp);\n    if (cp.has('secondaryProgress') || cp.has('indeterminate')) {\n      this.rangeChanged();\n    }\n  }\n\n  protected override updated(cp: PropertyValues<this>): void {\n    if (cp.has('min')) {\n      this.setAttribute('aria-valuemin', String(this.min));\n    }\n    if (cp.has('max')) {\n      this.setAttribute('aria-valuemax', String(this.max));\n    }\n    if (cp.has('indeterminate') || cp.has('value')) {\n      if (this.indeterminate) {\n        this.removeAttribute('aria-valuenow');\n      } else {\n        this.setAttribute('aria-valuenow', String(this.value));\n      }\n    }\n  }\n\n  protected override rangeChanged(): void {\n    super.rangeChanged();\n    const { secondaryProgress: sp } = this;\n    if (typeof sp === 'number') {\n      const secondary = this.clampValue(sp);\n      this.secondaryRatioInternal = this.computeRatio(secondary) * 100;\n    } else {\n      this.secondaryRatioInternal = undefined;\n    }\n  }\n\n  override render(): TemplateResult {\n    const { secondaryRatio = 0, indeterminate = false, ratio = 0, disabled = false } = this;\n    const primaryClasses = {\n      primary: true,\n      indeterminate: !disabled && indeterminate,\n      linear: !indeterminate,\n    };\n    const primaryStyle: StyleInfo = {};\n    if (!indeterminate) {\n      primaryStyle.transform = `scaleX(${(ratio / 100)})`;\n    }\n    const secondaryStyle = {\n      transform: `scaleX(${(secondaryRatio / 100)})`,\n    };\n    const containerClasses: ClassInfo = {\n      container: true,\n      disabled,\n    };\n    return html`\n    <div class=\"${classMap(containerClasses)}\">\n      <div class=\"secondary\" ?hidden=\"${secondaryRatio === 0}\" style=\"${styleMap(secondaryStyle)}\"></div>\n      <div class=\"${classMap(primaryClasses)}\" style=\"${styleMap(primaryStyle)}\"></div>\n    </div>\n    `;\n  }\n}\n"]}

package/dist/ui/table/DataTable.js

@@ -143,20 +143,15 @@ export class DataTable {
         const arr = Array.from(value);
         this.#renderItems = arr;
     }
-    options;
-    #listeners = {};
+    #listeners;
     #getItems;
-    /**
-     * The list of keys that correspond to the `key` set on the options of items that are currently selected.
-     * Note, this is a common list for single and multi selection. In a single selection only the first is taken into account.
-     */
-    selected = [];
-    /**
-     * Describes currently focused cell.
-     * The `row` is the index of the focused row (starting with the header) and the `cell` is the index of the focused cell.
-     */
-    focused;
     constructor(itemsCallback, options = {}) {
+        this.#listeners = {};
+        /**
+         * The list of keys that correspond to the `key` set on the options of items that are currently selected.
+         * Note, this is a common list for single and multi selection. In a single selection only the first is taken into account.
+         */
+        this.selected = [];
         this.options = options;
         this.#getItems = itemsCallback;
         this.dblclickHandler = this.dblclickHandler.bind(this);

package/dist/ui/table/DataTable.js.map

@@ -1 +1 @@
-{"version":3,"file":"DataTable.js","sourceRoot":"","sources":["../../../src/ui/table/DataTable.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, CSSResult, html, TemplateResult } from \"lit\";\nimport { ifDefined } from \"lit/directives/if-defined.js\";\nimport { ClassInfo, classMap } from \"lit/directives/class-map.js\";\nimport { dataAttr } from \"../../directives/data-attr.js\";\nimport '../../define/ui/ui-divider.js';\n\nexport interface IDataTableOptions {\n  /**\n   * The name of the property that identifies the key. The key is inserted into each row as `data-key`.\n   * Default to `key`.\n   */\n  key?: string;\n  /**\n   * The value of the aria-label to render on the table.\n   */\n  ariaLabel?: string;\n\n  /**\n   * When true it dispatches `activate` event when the user double click on a row.\n   */\n  active?: boolean;\n  /**\n   * When set it allows a single selection. A list item is highlighted and the `select` event is dispatched when the selection change.\n   */\n  selection?: 'single' | 'multi';\n}\n\nexport type RenderContent = string | TemplateResult | TemplateResult[];\n\ntype DataEvents = 'header' | 'item' | 'empty' | 'activate' | 'select' | 'render';\n\ntype CellCallback<T> = (item: T) => TemplateResult[];\ntype ActivateCallback<T> = (item: T) => void;\ntype SelectCallback = (item: string | string[]) => void;\n\ntype DataEventsMap<T> = {\n  [key in DataEvents]?: SelectCallback | CellCallback<T> | CellCallback<T[]> | ActivateCallback<T> | ActivateCallback<T[]> | {(): TemplateResult | TemplateResult[]};\n};\n\nexport interface ICellOptions {\n  /**\n   * The list of CSS class names to add to the cell.\n   */\n  class?: string;\n\n  /**\n   * The list of data attributes to set on the cell.\n   */\n  data?: { [key: string]: number | string | boolean };\n  /**\n   * The value of the aria-label to render on the cell.\n   */\n  ariaLabel?: string;\n}\n\ninterface CellPosition { \n  row: number; \n  cell: number; \n}\n\n/**\n * A helper class that allows to build a data table in a programmatic way.\n * \n * Usage:\n * \n * const dt = new DataTable(arrayOfItems, { key: 'key' });\n * // or dt.items = arrayOfItems;\n * dt.addEventListener('header', () => { \n *  const c1 = dt.header('name', { class: 'name-column', data: {a: b} });\n *  const c2 = dt.header('created', { class: 'created-column', data: {a: b} });\n *  return [c1, c2];\n * });\n * dt.addEventListener('item', (item) => { \n *   const c1 = dt.cell(html`cell template content`, { class: 'a b c', data: {a: b} });\n *   const c2 = dt.cell(`cell text content`, { class: 'xyz', data: {key: 'value'} });\n *   return [c1, c2];\n * });\n * dt.addEventListener('empty', () => { \n *   return html`<p>The table has no records.</p>`;\n * });\n * \n * const template = dt.render();\n * \n * @fires header - An event dispatched when a table header row is being rendered.\n * @fires item - An event dispatched when a table item row is being rendered.\n * @fires empty - An event dispatched when a table has no rows to render.\n * @fires activate - An event dispatched when the user double click on a row.\n * @fires select - An event dispatched when the user selected a table item in a single or multi selection table.\n * @fires render - An event dispatched when the internal state changed and the table must be rendered again.\n */\nexport class DataTable<T> {\n  static get styles(): CSSResult {\n    return css`\n    .data-table {\n      flex: 1;\n      display: flex;\n      flex-direction: column;\n      overflow: hidden;\n    }\n\n    .data-table-body {\n      flex: 1;\n      overflow: auto;\n    }\n\n    .data-table-row {\n      height: 44px;\n      position: relative;\n\n      display: flex;\n      align-items: center;\n\n      font-family: var(--md-sys-typescale-body-medium-font-family-name);\n      font-style: var(--md-sys-typescale-body-medium-font-family-style);\n      font-weight: var(--md-sys-typescale-body-medium-font-weight);\n      font-size: var(--md-sys-typescale-body-medium-font-size);\n      letter-spacing: var(--md-sys-typescale-body-medium-tracking);\n      line-height: var(--md-sys-typescale-body-medium-height);\n      text-transform: var(--md-sys-typescale-body-medium-text-transform);\n      text-decoration: var(--md-sys-typescale-body-medium-text-decoration);\n    }\n\n    .data-table-row-body {\n      height: inherit;\n      display: flex;\n      align-items: center;\n      flex: 1;\n    }\n\n    .data-table-body .data-table-row:not(.data-table-empty-row):hover::before {\n      content: '';\n      background-color: var(--md-sys-color-on-surface);\n      opacity: var(--md-sys-state-hover-state-layer-opacity);\n      position: absolute;\n      inset: 0;\n      z-index: -1;\n    }\n\n    .data-table-header {\n      font-family: var(--md-sys-typescale-label-large-font-family-name);\n      font-style: var(--md-sys-typescale-label-large-font-family-style);\n      font-weight: var(--md-sys-typescale-label-large-font-weight);\n      font-size: var(--md-sys-typescale-label-large-font-size);\n      letter-spacing: var(--md-sys-typescale-label-large-tracking);\n      line-height: var(--md-sys-typescale-label-large-height);\n      text-transform: var(--md-sys-typescale-label-large-text-transform);\n      text-decoration: var(--md-sys-typescale-label-large-text-decoration);\n    }\n\n    .data-table-cell {\n      display: flex;\n      align-items: center;\n      overflow: hidden;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n      height: inherit;\n      padding: 12px;\n      box-sizing: border-box;\n      position: relative;\n    }\n\n    .data-table-row.data-table-empty-row {\n      height: auto;\n      display: block;\n    }\n\n    .data-table-row.data-table-empty-row > [role=cell] {\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      justify-content: center;\n    }\n\n    .selected {\n      background-color: var(--md-sys-color-secondary-container);\n      border-radius: 8px;\n    }\n\n    .data-table-cell:focus-visible::before {\n      content: '';\n      background-color: var(--md-sys-color-on-surface);\n      opacity: var(--md-sys-state-focus-state-layer-opacity);\n      position: absolute;\n      inset: 0;\n      z-index: -1;\n    }\n    `;\n  }\n\n  #renderItems?: T[];\n\n  get items(): ArrayLike<T> | undefined {\n    return this.#renderItems;\n  }\n\n  set items(value: ArrayLike<T> | undefined) {\n    if (!value) {\n      this.#renderItems = undefined;\n      return;\n    }\n    const arr = Array.from(value);\n    this.#renderItems = arr;\n  }\n\n  options: IDataTableOptions;\n  \n  #listeners: DataEventsMap<T> = {};\n\n  #getItems: () => ArrayLike<T>;\n\n  /**\n   * The list of keys that correspond to the `key` set on the options of items that are currently selected.\n   * Note, this is a common list for single and multi selection. In a single selection only the first is taken into account.\n   */\n  selected: string[] = [];\n\n  /**\n   * Describes currently focused cell.\n   * The `row` is the index of the focused row (starting with the header) and the `cell` is the index of the focused cell.\n   */\n  protected focused?: CellPosition;\n\n  constructor(itemsCallback: () => ArrayLike<T>, options: IDataTableOptions = {}) {\n    this.options = options;\n    this.#getItems = itemsCallback;\n    this.dblclickHandler = this.dblclickHandler.bind(this);\n    this.handleClick = this.handleClick.bind(this);\n    this.handleKeyDown = this.handleKeyDown.bind(this);\n    this.handleFocus = this.handleFocus.bind(this);\n  }\n\n  addEventListener(type: 'header', listener: () => TemplateResult[]): void;\n\n  addEventListener(type: 'render', listener: () => void): void;\n\n  addEventListener(type: 'item', listener: CellCallback<T>): void;\n\n  addEventListener(type: 'empty', listener: () => TemplateResult): void;\n\n  addEventListener(type: 'activate', listener: ActivateCallback<T>): void;\n\n  addEventListener(type: 'select', listener: SelectCallback): void;\n\n  addEventListener(type: DataEvents, listener: SelectCallback | CellCallback<T> | CellCallback<T[]> | ActivateCallback<T> | ActivateCallback<T[]> | {(): TemplateResult | TemplateResult[]}): void {\n    this.#listeners[type] = listener;\n  }\n\n  /**\n   * Renders a header cell.\n   * \n   * @param content The content of the header cell to render.\n   * @param options Cell rendering options\n   */\n  header(content: RenderContent, options: ICellOptions = {}): TemplateResult {\n    const data = options.data || {};\n    return html`<span \n      role=\"columnheader\" \n      class=\"data-table-cell data-table-header-cell ${options.class || ''}\"\n      aria-label=\"${ifDefined(options.ariaLabel)}\"\n      ${dataAttr(data)}\n    >${content}</span>`;\n  }\n\n  /**\n   * Renders a body cell.\n   * \n   * @param content The content of the header cell to render.\n   * @param options Cell rendering options\n   */\n  cell(content: RenderContent, options: ICellOptions = {}): TemplateResult {\n    const data = options.data || {};\n    return html`\n    <span \n      role=\"gridcell\" \n      class=\"data-table-cell data-table-body-cell ${options.class || ''}\"\n      ${dataAttr(data)}\n    >${content}</span>\n    `;\n  }\n\n  render(): TemplateResult {\n    this.items = this.#getItems();\n    const { options } = this;\n    const clickListener = options.selection ? this.handleClick : undefined;\n    return html`\n    <div \n      class=\"data-table\" \n      role=\"grid\" \n      aria-label=\"${ifDefined(options.ariaLabel)}\"\n      aria-multiselectable=\"${options.selection === 'multi'}\"\n      aria-readonly=\"true\"\n      aria-rowcount=\"-1\"\n      tabindex=\"0\"\n      @focus=\"${this.handleFocus}\"\n      @click=\"${clickListener}\" \n      @keydown=\"${this.handleKeyDown}\"\n    >\n      ${this.renderHeader()}\n      <ui-divider></ui-divider>\n      ${this.renderBody()}\n    </div>\n    `;\n  }\n\n  protected rowFromEvent(e: Event): HTMLElement | undefined {\n    const path = e.composedPath();\n    const row = path.find(current => {\n      const element = current as Element;\n      if (element.classList && element.classList.contains('data-table-row')) {\n        return true;\n      }\n      return false;\n    }) as HTMLElement | undefined;\n    if (!row || !row.dataset.key) {\n      return undefined;\n    }\n    return row;\n  }\n\n  protected tableFromEvent(e: Event): HTMLElement | undefined {\n    const path = e.composedPath();\n    const row = path.find((current) => {\n      const element = current as Element;\n      if (element.classList && element.classList.contains('data-table')) {\n        return true;\n      }\n      return false;\n    }) as HTMLElement | undefined;\n    return row;\n  }\n\n  protected cellPositionFromEvent(e: Event): CellPosition {\n    const result: CellPosition = {\n      cell: 0,\n      row: 0,\n    };\n    let row: HTMLElement | undefined;\n    let column: HTMLElement | undefined;\n    let table: HTMLElement | undefined;\n    const path = e.composedPath();\n    for (const current of path.values()) {\n      const element = current as HTMLElement;\n      if (element.classList && element.classList.contains('data-table-row')) {\n        row = element;\n      } else if (element.classList && element.classList.contains('data-table-cell')) {\n        column = element;\n      } else if (element.classList && element.classList.contains('data-table')) {\n        table = element;\n        break;\n      }\n    }\n    if (!table) {\n      return result;\n    }\n    if (row) {\n      const rows = Array.from(table.querySelectorAll(`.data-table-row`));\n      const rowIndex = rows.indexOf(row);\n      if (rowIndex >= 0) {\n        result.row = rowIndex;\n      }\n      if (column) {\n        const columns = Array.from(row.querySelectorAll(`.data-table-cell`));\n        const cellIndex = columns.indexOf(column);\n        if (cellIndex >= 0) {\n          result.cell = cellIndex;\n        }\n      }\n    }\n    return result;\n  }\n\n  protected cellRowFromEvent(e: Event): { column: HTMLElement, row: HTMLElement } | undefined {\n    let row: HTMLElement | undefined;\n    let column: HTMLElement | undefined;\n    const path = e.composedPath();\n    for (const current of path.values()) {\n      const element = current as HTMLElement;\n      if (element.classList && element.classList.contains('data-table-row')) {\n        row = element;\n        break;\n      } else if (element.classList && element.classList.contains('data-table-cell')) {\n        column = element;\n      }\n    }\n    if (!row || !column) {\n      return undefined;\n    }\n    return { row, column }\n  }\n\n  protected handleFocus(e: Event): void {\n    const target = e.target as HTMLElement;\n    if (target.classList.contains('data-table')) {\n      // focusing on the table, move the focus to the first cell\n      this.focusFirstCell(target);\n    }\n  }\n\n  protected dblclickHandler(e: Event): void {\n    const callback = this.#listeners.activate as (item: T) => void;\n    if (!callback) {\n      return;\n    }\n    const row = this.rowFromEvent(e)\n    if (!row) {\n      return;\n    }\n    const { key } = row.dataset;\n    const keyProperty = this.options.key || 'key';\n    const item = this.#renderItems?.find(i => (i as unknown as {[key: string]: unknown})[keyProperty] === key);\n    if (!item) {\n      return;\n    }\n    callback(item);\n  }\n\n  protected handleClick(e: Event): void {\n    const { selection } = this.options;\n    const row = this.rowFromEvent(e)\n    if (!row) {\n      return;\n    }\n    if (selection === 'single') {\n      this.handleSingleSelection(row.dataset.key as string);\n    } else if (selection === 'multi') {\n      this.handleMultiSelection(row.dataset.key as string);\n    }\n    const table = this.tableFromEvent(e) as HTMLElement;\n    this.focused = this.cellPositionFromEvent(e);\n    this.focusCell(table, this.focused.row, this.focused.cell);\n  }\n\n  protected handleKeyDown(e: KeyboardEvent): void {\n    if (e.defaultPrevented) {\n      return;\n    }\n    if (['Space', 'Enter'].includes(e.code)) {\n      this.handlePrimaryAction(e);\n    } else if (e.code === 'ArrowRight') {\n      this.moveFocusRight(e);\n    } else if (e.code === 'ArrowDown') {\n      this.moveFocusDown(e);\n    } else if (e.code === 'ArrowUp') {\n      this.moveFocusUp(e);\n    } else if (e.code === 'ArrowLeft') {\n      this.moveFocusLeft(e);\n    }\n  }\n\n  protected handleSingleSelection(key: string): void {\n    if (this.selected.includes(key)) {\n      return;\n    }\n    this.selected = [key];\n    this.dispatchRender();\n    this.dispatchSelected(key);\n  }\n\n  protected handleMultiSelection(key: string): void {\n    const { selected } = this;\n    if (selected.includes(key)) {\n      const index = selected.indexOf(key);\n      selected.splice(index, 1);\n    } else {\n      selected.push(key);\n    }\n    this.dispatchRender();\n    this.dispatchSelected(selected);\n  }\n\n  protected focusFirstCell(table: HTMLElement): void {\n    const cell = table.querySelector('[role=\"columnheader\"]') as HTMLElement | null;\n    if (!cell) {\n      return;\n    }\n    cell.setAttribute('tabindex', '0');\n    cell.focus();\n    table.removeAttribute('tabindex');\n    this.focused = { cell: 0, row: 0 };\n  }\n\n  protected focusCell(table: HTMLElement, rowIndex: number, colIndex: number): boolean {\n    const row = table.querySelectorAll('[role=\"row\"]')[rowIndex];\n    if (!row) {\n      return false;\n    }\n    const cell = row.querySelectorAll(`.data-table-cell`)[colIndex] as HTMLElement | null;\n    if (!cell) {\n      return false;\n    }\n    const current = table.querySelector(`.data-table-cell[tabindex]`);\n    cell.setAttribute('tabindex', '0');\n    cell.focus();\n    if (current) {\n      current.removeAttribute('tabindex');\n    } \n    if (table.hasAttribute('tabindex')) {\n      table.removeAttribute('tabindex');\n    }\n    return true;\n  }\n\n  protected moveFocusRight(e: Event): void {\n    e.preventDefault();\n    const table = this.tableFromEvent(e);\n    if (!table) {\n      return;\n    }\n    const { focused } = this;\n    if (!focused) {\n      this.focusFirstCell(table);\n      return;\n    }\n    if (this.focusCell(table, focused.row, focused.cell + 1)) {\n      focused.cell += 1;\n    }\n  }\n\n  protected moveFocusLeft(e: Event): void {\n    e.preventDefault();\n    const table = this.tableFromEvent(e);\n    if (!table) {\n      return;\n    }\n    const { focused } = this;\n    if (!focused) {\n      this.focusFirstCell(table);\n      return;\n    }\n    if (this.focusCell(table, focused.row, focused.cell - 1)) {\n      focused.cell -= 1;\n    }\n  }\n\n  protected moveFocusDown(e: Event): void {\n    e.preventDefault();\n    const table = this.tableFromEvent(e);\n    if (!table) {\n      return;\n    }\n    const { focused } = this;\n    if (!focused) {\n      this.focusFirstCell(table);\n      return;\n    }\n    if (this.focusCell(table, focused.row + 1, focused.cell)) {\n      focused.row += 1;\n    }\n  }\n\n  protected moveFocusUp(e: Event): void {\n    e.preventDefault();\n    const table = this.tableFromEvent(e);\n    if (!table) {\n      return;\n    }\n    const { focused } = this;\n    if (!focused) {\n      this.focusFirstCell(table);\n      return;\n    }\n    if (this.focusCell(table, focused.row - 1, focused.cell)) {\n      focused.row -= 1;\n    }\n  }\n\n  protected handlePrimaryAction(e: Event): void {\n    e.preventDefault();\n    const info = this.cellRowFromEvent(e);\n    if (!info) {\n      return;\n    }\n    const { row, column } = info;\n    // first check if the cell has an focusable element. If so trigger action on it.\n    const focusable = column.querySelector('[tabindex=\"0\"]') as HTMLElement | null;\n    if (focusable) {\n      focusable.click();\n      return;\n    }\n    const { selection } = this.options;\n    if (selection === 'single') {\n      this.handleSingleSelection(row.dataset.key as string);\n    } else if (selection === 'multi') {\n      this.handleMultiSelection(row.dataset.key as string);\n    }\n  }\n\n  protected renderHeader(): TemplateResult {\n    const cells = this.dispatchHeader();\n    return html`\n    <div role=\"rowgroup\">\n      <div role=\"row\" class=\"data-table-row data-table-header\">\n        ${cells}\n      </div>\n    </div>\n    `;\n  }\n\n  protected renderBody(): TemplateResult {\n    const { active = false } = this.options;\n    const items = this.#renderItems;\n    const contents = !!items && !!items.length ? items.map(item => this.renderItem(item)) : this.renderEmpty();\n    const dbListener = active ? this.dblclickHandler : undefined;\n    return html`\n    <div class=\"data-table-body\" role=\"rowgroup\" @dblclick=\"${dbListener}\">\n      ${contents}\n    </div>`;\n  }\n\n  protected renderItem(item: T): TemplateResult {\n    const cells = this.dispatchItem(item);\n    const { selected, options } = this;\n    const typed = item as unknown as Record<string, string>;\n    const key = typed[options.key || 'key'];\n    let isSelected = false;\n    if (options.selection === 'single') {\n      const [selectedKey] = selected;\n      if (selectedKey === key) {\n        isSelected = true;\n      }\n    } else if (options.selection === 'multi') {\n      isSelected = selected.includes(key);\n    }\n    const classes: ClassInfo = {\n      'data-table-row': true,\n      selected: isSelected,\n    };\n    return html`\n    <div role=\"row\" class=\"${classMap(classes)}\" data-key=\"${key}\" aria-selected=\"${isSelected ? 'true' : 'false'}\">\n      <div class=\"data-table-row-body\" role=\"presentation\">\n        ${cells}\n      </div>\n    </div>\n    `;\n  }\n\n  protected renderEmpty(): TemplateResult {\n    const content = this.dispatchEmpty();\n    return html`\n    <div role=\"row\" class=\"data-table-row data-table-empty-row\">\n      <div role=\"cell\">\n      ${content}\n      </div>\n    </div>\n    `;\n  }\n\n  protected dispatchHeader(): TemplateResult[] | undefined {\n    const callback = this.#listeners.header as () => TemplateResult[] | undefined;\n    if (!callback) {\n      return undefined;\n    }\n    let content: TemplateResult[] | undefined;\n    try {\n      content = callback();\n    } catch (e) {\n      // eslint-disable-next-line no-console\n      console.warn(e);\n    }\n    return content;\n  }\n\n  protected dispatchItem(item: T): TemplateResult[] | undefined {\n    const callback = this.#listeners.item as CellCallback<T> | undefined;\n    if (!callback) {\n      return undefined;\n    }\n    let content: TemplateResult[] | undefined;\n    try {\n      content = callback(item);\n    } catch (e) {\n      // eslint-disable-next-line no-console\n      console.warn(e);\n    }\n    return content;\n  }\n\n  protected dispatchEmpty(): TemplateResult | undefined {\n    const callback = this.#listeners.empty as () => TemplateResult | undefined;\n    if (!callback) {\n      return undefined;\n    }\n    let content: TemplateResult | undefined;\n    try {\n      content = callback();\n    } catch (e) {\n      // eslint-disable-next-line no-console\n      console.warn(e);\n    }\n    return content;\n  }\n\n  protected dispatchRender(): void {\n    const callback = this.#listeners.render as () => void;\n    if (!callback) {\n      return;\n    }\n    try {\n      callback();\n    } catch (e) {\n      // eslint-disable-next-line no-console\n      console.warn(e);\n    }\n  }\n\n  protected dispatchSelected(selection: string | string[]): void {\n    const callback = this.#listeners.select as SelectCallback;\n    if (!callback) {\n      return;\n    }\n    try {\n      callback(selection);\n    } catch (e) {\n      // eslint-disable-next-line no-console\n      console.warn(e);\n    }\n  }\n}\n"]}
+{"version":3,"file":"DataTable.js","sourceRoot":"","sources":["../../../src/ui/table/DataTable.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, CSSResult, html, TemplateResult } from \"lit\";\nimport { ifDefined } from \"lit/directives/if-defined.js\";\nimport { ClassInfo, classMap } from \"lit/directives/class-map.js\";\nimport { dataAttr } from \"../../directives/data-attr.js\";\nimport '../../define/ui/ui-divider.js';\n\nexport interface IDataTableOptions {\n  /**\n   * The name of the property that identifies the key. The key is inserted into each row as `data-key`.\n   * Default to `key`.\n   */\n  key?: string;\n  /**\n   * The value of the aria-label to render on the table.\n   */\n  ariaLabel?: string;\n\n  /**\n   * When true it dispatches `activate` event when the user double click on a row.\n   */\n  active?: boolean;\n  /**\n   * When set it allows a single selection. A list item is highlighted and the `select` event is dispatched when the selection change.\n   */\n  selection?: 'single' | 'multi';\n}\n\nexport type RenderContent = string | TemplateResult | TemplateResult[];\n\ntype DataEvents = 'header' | 'item' | 'empty' | 'activate' | 'select' | 'render';\n\ntype CellCallback<T> = (item: T) => TemplateResult[];\ntype ActivateCallback<T> = (item: T) => void;\ntype SelectCallback = (item: string | string[]) => void;\n\ntype DataEventsMap<T> = {\n  [key in DataEvents]?: SelectCallback | CellCallback<T> | CellCallback<T[]> | ActivateCallback<T> | ActivateCallback<T[]> | {(): TemplateResult | TemplateResult[]};\n};\n\nexport interface ICellOptions {\n  /**\n   * The list of CSS class names to add to the cell.\n   */\n  class?: string;\n\n  /**\n   * The list of data attributes to set on the cell.\n   */\n  data?: { [key: string]: number | string | boolean };\n  /**\n   * The value of the aria-label to render on the cell.\n   */\n  ariaLabel?: string;\n}\n\ninterface CellPosition { \n  row: number; \n  cell: number; \n}\n\n/**\n * A helper class that allows to build a data table in a programmatic way.\n * \n * Usage:\n * \n * const dt = new DataTable(arrayOfItems, { key: 'key' });\n * // or dt.items = arrayOfItems;\n * dt.addEventListener('header', () => { \n *  const c1 = dt.header('name', { class: 'name-column', data: {a: b} });\n *  const c2 = dt.header('created', { class: 'created-column', data: {a: b} });\n *  return [c1, c2];\n * });\n * dt.addEventListener('item', (item) => { \n *   const c1 = dt.cell(html`cell template content`, { class: 'a b c', data: {a: b} });\n *   const c2 = dt.cell(`cell text content`, { class: 'xyz', data: {key: 'value'} });\n *   return [c1, c2];\n * });\n * dt.addEventListener('empty', () => { \n *   return html`<p>The table has no records.</p>`;\n * });\n * \n * const template = dt.render();\n * \n * @fires header - An event dispatched when a table header row is being rendered.\n * @fires item - An event dispatched when a table item row is being rendered.\n * @fires empty - An event dispatched when a table has no rows to render.\n * @fires activate - An event dispatched when the user double click on a row.\n * @fires select - An event dispatched when the user selected a table item in a single or multi selection table.\n * @fires render - An event dispatched when the internal state changed and the table must be rendered again.\n */\nexport class DataTable<T> {\n  static get styles(): CSSResult {\n    return css`\n    .data-table {\n      flex: 1;\n      display: flex;\n      flex-direction: column;\n      overflow: hidden;\n    }\n\n    .data-table-body {\n      flex: 1;\n      overflow: auto;\n    }\n\n    .data-table-row {\n      height: 44px;\n      position: relative;\n\n      display: flex;\n      align-items: center;\n\n      font-family: var(--md-sys-typescale-body-medium-font-family-name);\n      font-style: var(--md-sys-typescale-body-medium-font-family-style);\n      font-weight: var(--md-sys-typescale-body-medium-font-weight);\n      font-size: var(--md-sys-typescale-body-medium-font-size);\n      letter-spacing: var(--md-sys-typescale-body-medium-tracking);\n      line-height: var(--md-sys-typescale-body-medium-height);\n      text-transform: var(--md-sys-typescale-body-medium-text-transform);\n      text-decoration: var(--md-sys-typescale-body-medium-text-decoration);\n    }\n\n    .data-table-row-body {\n      height: inherit;\n      display: flex;\n      align-items: center;\n      flex: 1;\n    }\n\n    .data-table-body .data-table-row:not(.data-table-empty-row):hover::before {\n      content: '';\n      background-color: var(--md-sys-color-on-surface);\n      opacity: var(--md-sys-state-hover-state-layer-opacity);\n      position: absolute;\n      inset: 0;\n      z-index: -1;\n    }\n\n    .data-table-header {\n      font-family: var(--md-sys-typescale-label-large-font-family-name);\n      font-style: var(--md-sys-typescale-label-large-font-family-style);\n      font-weight: var(--md-sys-typescale-label-large-font-weight);\n      font-size: var(--md-sys-typescale-label-large-font-size);\n      letter-spacing: var(--md-sys-typescale-label-large-tracking);\n      line-height: var(--md-sys-typescale-label-large-height);\n      text-transform: var(--md-sys-typescale-label-large-text-transform);\n      text-decoration: var(--md-sys-typescale-label-large-text-decoration);\n    }\n\n    .data-table-cell {\n      display: flex;\n      align-items: center;\n      overflow: hidden;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n      height: inherit;\n      padding: 12px;\n      box-sizing: border-box;\n      position: relative;\n    }\n\n    .data-table-row.data-table-empty-row {\n      height: auto;\n      display: block;\n    }\n\n    .data-table-row.data-table-empty-row > [role=cell] {\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      justify-content: center;\n    }\n\n    .selected {\n      background-color: var(--md-sys-color-secondary-container);\n      border-radius: 8px;\n    }\n\n    .data-table-cell:focus-visible::before {\n      content: '';\n      background-color: var(--md-sys-color-on-surface);\n      opacity: var(--md-sys-state-focus-state-layer-opacity);\n      position: absolute;\n      inset: 0;\n      z-index: -1;\n    }\n    `;\n  }\n\n  #renderItems?: T[];\n\n  get items(): ArrayLike<T> | undefined {\n    return this.#renderItems;\n  }\n\n  set items(value: ArrayLike<T> | undefined) {\n    if (!value) {\n      this.#renderItems = undefined;\n      return;\n    }\n    const arr = Array.from(value);\n    this.#renderItems = arr;\n  }\n\n  options: IDataTableOptions;\n  \n  #listeners: DataEventsMap<T> = {};\n\n  #getItems: () => ArrayLike<T>;\n\n  /**\n   * The list of keys that correspond to the `key` set on the options of items that are currently selected.\n   * Note, this is a common list for single and multi selection. In a single selection only the first is taken into account.\n   */\n  selected: string[] = [];\n\n  /**\n   * Describes currently focused cell.\n   * The `row` is the index of the focused row (starting with the header) and the `cell` is the index of the focused cell.\n   */\n  protected focused?: CellPosition;\n\n  constructor(itemsCallback: () => ArrayLike<T>, options: IDataTableOptions = {}) {\n    this.options = options;\n    this.#getItems = itemsCallback;\n    this.dblclickHandler = this.dblclickHandler.bind(this);\n    this.handleClick = this.handleClick.bind(this);\n    this.handleKeyDown = this.handleKeyDown.bind(this);\n    this.handleFocus = this.handleFocus.bind(this);\n  }\n\n  addEventListener(type: 'header', listener: () => TemplateResult[]): void;\n\n  addEventListener(type: 'render', listener: () => void): void;\n\n  addEventListener(type: 'item', listener: CellCallback<T>): void;\n\n  addEventListener(type: 'empty', listener: () => TemplateResult): void;\n\n  addEventListener(type: 'activate', listener: ActivateCallback<T>): void;\n\n  addEventListener(type: 'select', listener: SelectCallback): void;\n\n  addEventListener(type: DataEvents, listener: SelectCallback | CellCallback<T> | CellCallback<T[]> | ActivateCallback<T> | ActivateCallback<T[]> | {(): TemplateResult | TemplateResult[]}): void {\n    this.#listeners[type] = listener;\n  }\n\n  /**\n   * Renders a header cell.\n   * \n   * @param content The content of the header cell to render.\n   * @param options Cell rendering options\n   */\n  header(content: RenderContent, options: ICellOptions = {}): TemplateResult {\n    const data = options.data || {};\n    return html`<span \n      role=\"columnheader\" \n      class=\"data-table-cell data-table-header-cell ${options.class || ''}\"\n      aria-label=\"${ifDefined(options.ariaLabel)}\"\n      ${dataAttr(data)}\n    >${content}</span>`;\n  }\n\n  /**\n   * Renders a body cell.\n   * \n   * @param content The content of the header cell to render.\n   * @param options Cell rendering options\n   */\n  cell(content: RenderContent, options: ICellOptions = {}): TemplateResult {\n    const data = options.data || {};\n    return html`\n    <span \n      role=\"gridcell\" \n      class=\"data-table-cell data-table-body-cell ${options.class || ''}\"\n      ${dataAttr(data)}\n    >${content}</span>\n    `;\n  }\n\n  render(): TemplateResult {\n    this.items = this.#getItems();\n    const { options } = this;\n    const clickListener = options.selection ? this.handleClick : undefined;\n    return html`\n    <div \n      class=\"data-table\" \n      role=\"grid\" \n      aria-label=\"${ifDefined(options.ariaLabel)}\"\n      aria-multiselectable=\"${options.selection === 'multi'}\"\n      aria-readonly=\"true\"\n      aria-rowcount=\"-1\"\n      tabindex=\"0\"\n      @focus=\"${this.handleFocus}\"\n      @click=\"${clickListener}\" \n      @keydown=\"${this.handleKeyDown}\"\n    >\n      ${this.renderHeader()}\n      <ui-divider></ui-divider>\n      ${this.renderBody()}\n    </div>\n    `;\n  }\n\n  protected rowFromEvent(e: Event): HTMLElement | undefined {\n    const path = e.composedPath();\n    const row = path.find(current => {\n      const element = current as Element;\n      if (element.classList && element.classList.contains('data-table-row')) {\n        return true;\n      }\n      return false;\n    }) as HTMLElement | undefined;\n    if (!row || !row.dataset.key) {\n      return undefined;\n    }\n    return row;\n  }\n\n  protected tableFromEvent(e: Event): HTMLElement | undefined {\n    const path = e.composedPath();\n    const row = path.find((current) => {\n      const element = current as Element;\n      if (element.classList && element.classList.contains('data-table')) {\n        return true;\n      }\n      return false;\n    }) as HTMLElement | undefined;\n    return row;\n  }\n\n  protected cellPositionFromEvent(e: Event): CellPosition {\n    const result: CellPosition = {\n      cell: 0,\n      row: 0,\n    };\n    let row: HTMLElement | undefined;\n    let column: HTMLElement | undefined;\n    let table: HTMLElement | undefined;\n    const path = e.composedPath();\n    for (const current of path.values()) {\n      const element = current as HTMLElement;\n      if (element.classList && element.classList.contains('data-table-row')) {\n        row = element;\n      } else if (element.classList && element.classList.contains('data-table-cell')) {\n        column = element;\n      } else if (element.classList && element.classList.contains('data-table')) {\n        table = element;\n        break;\n      }\n    }\n    if (!table) {\n      return result;\n    }\n    if (row) {\n      const rows = Array.from(table.querySelectorAll(`.data-table-row`));\n      const rowIndex = rows.indexOf(row);\n      if (rowIndex >= 0) {\n        result.row = rowIndex;\n      }\n      if (column) {\n        const columns = Array.from(row.querySelectorAll(`.data-table-cell`));\n        const cellIndex = columns.indexOf(column);\n        if (cellIndex >= 0) {\n          result.cell = cellIndex;\n        }\n      }\n    }\n    return result;\n  }\n\n  protected cellRowFromEvent(e: Event): { column: HTMLElement, row: HTMLElement } | undefined {\n    let row: HTMLElement | undefined;\n    let column: HTMLElement | undefined;\n    const path = e.composedPath();\n    for (const current of path.values()) {\n      const element = current as HTMLElement;\n      if (element.classList && element.classList.contains('data-table-row')) {\n        row = element;\n        break;\n      } else if (element.classList && element.classList.contains('data-table-cell')) {\n        column = element;\n      }\n    }\n    if (!row || !column) {\n      return undefined;\n    }\n    return { row, column }\n  }\n\n  protected handleFocus(e: Event): void {\n    const target = e.target as HTMLElement;\n    if (target.classList.contains('data-table')) {\n      // focusing on the table, move the focus to the first cell\n      this.focusFirstCell(target);\n    }\n  }\n\n  protected dblclickHandler(e: Event): void {\n    const callback = this.#listeners.activate as (item: T) => void;\n    if (!callback) {\n      return;\n    }\n    const row = this.rowFromEvent(e)\n    if (!row) {\n      return;\n    }\n    const { key } = row.dataset;\n    const keyProperty = this.options.key || 'key';\n    const item = this.#renderItems?.find(i => (i as unknown as {[key: string]: unknown})[keyProperty] === key);\n    if (!item) {\n      return;\n    }\n    callback(item);\n  }\n\n  protected handleClick(e: Event): void {\n    const { selection } = this.options;\n    const row = this.rowFromEvent(e)\n    if (!row) {\n      return;\n    }\n    if (selection === 'single') {\n      this.handleSingleSelection(row.dataset.key as string);\n    } else if (selection === 'multi') {\n      this.handleMultiSelection(row.dataset.key as string);\n    }\n    const table = this.tableFromEvent(e) as HTMLElement;\n    this.focused = this.cellPositionFromEvent(e);\n    this.focusCell(table, this.focused.row, this.focused.cell);\n  }\n\n  protected handleKeyDown(e: KeyboardEvent): void {\n    if (e.defaultPrevented) {\n      return;\n    }\n    if (['Space', 'Enter'].includes(e.code)) {\n      this.handlePrimaryAction(e);\n    } else if (e.code === 'ArrowRight') {\n      this.moveFocusRight(e);\n    } else if (e.code === 'ArrowDown') {\n      this.moveFocusDown(e);\n    } else if (e.code === 'ArrowUp') {\n      this.moveFocusUp(e);\n    } else if (e.code === 'ArrowLeft') {\n      this.moveFocusLeft(e);\n    }\n  }\n\n  protected handleSingleSelection(key: string): void {\n    if (this.selected.includes(key)) {\n      return;\n    }\n    this.selected = [key];\n    this.dispatchRender();\n    this.dispatchSelected(key);\n  }\n\n  protected handleMultiSelection(key: string): void {\n    const { selected } = this;\n    if (selected.includes(key)) {\n      const index = selected.indexOf(key);\n      selected.splice(index, 1);\n    } else {\n      selected.push(key);\n    }\n    this.dispatchRender();\n    this.dispatchSelected(selected);\n  }\n\n  protected focusFirstCell(table: HTMLElement): void {\n    const cell = table.querySelector('[role=\"columnheader\"]') as HTMLElement | null;\n    if (!cell) {\n      return;\n    }\n    cell.setAttribute('tabindex', '0');\n    cell.focus();\n    table.removeAttribute('tabindex');\n    this.focused = { cell: 0, row: 0 };\n  }\n\n  protected focusCell(table: HTMLElement, rowIndex: number, colIndex: number): boolean {\n    const row = table.querySelectorAll('[role=\"row\"]')[rowIndex];\n    if (!row) {\n      return false;\n    }\n    const cell = row.querySelectorAll(`.data-table-cell`)[colIndex] as HTMLElement | null;\n    if (!cell) {\n      return false;\n    }\n    const current = table.querySelector(`.data-table-cell[tabindex]`);\n    cell.setAttribute('tabindex', '0');\n    cell.focus();\n    if (current) {\n      current.removeAttribute('tabindex');\n    } \n    if (table.hasAttribute('tabindex')) {\n      table.removeAttribute('tabindex');\n    }\n    return true;\n  }\n\n  protected moveFocusRight(e: Event): void {\n    e.preventDefault();\n    const table = this.tableFromEvent(e);\n    if (!table) {\n      return;\n    }\n    const { focused } = this;\n    if (!focused) {\n      this.focusFirstCell(table);\n      return;\n    }\n    if (this.focusCell(table, focused.row, focused.cell + 1)) {\n      focused.cell += 1;\n    }\n  }\n\n  protected moveFocusLeft(e: Event): void {\n    e.preventDefault();\n    const table = this.tableFromEvent(e);\n    if (!table) {\n      return;\n    }\n    const { focused } = this;\n    if (!focused) {\n      this.focusFirstCell(table);\n      return;\n    }\n    if (this.focusCell(table, focused.row, focused.cell - 1)) {\n      focused.cell -= 1;\n    }\n  }\n\n  protected moveFocusDown(e: Event): void {\n    e.preventDefault();\n    const table = this.tableFromEvent(e);\n    if (!table) {\n      return;\n    }\n    const { focused } = this;\n    if (!focused) {\n      this.focusFirstCell(table);\n      return;\n    }\n    if (this.focusCell(table, focused.row + 1, focused.cell)) {\n      focused.row += 1;\n    }\n  }\n\n  protected moveFocusUp(e: Event): void {\n    e.preventDefault();\n    const table = this.tableFromEvent(e);\n    if (!table) {\n      return;\n    }\n    const { focused } = this;\n    if (!focused) {\n      this.focusFirstCell(table);\n      return;\n    }\n    if (this.focusCell(table, focused.row - 1, focused.cell)) {\n      focused.row -= 1;\n    }\n  }\n\n  protected handlePrimaryAction(e: Event): void {\n    e.preventDefault();\n    const info = this.cellRowFromEvent(e);\n    if (!info) {\n      return;\n    }\n    const { row, column } = info;\n    // first check if the cell has an focusable element. If so trigger action on it.\n    const focusable = column.querySelector('[tabindex=\"0\"]') as HTMLElement | null;\n    if (focusable) {\n      focusable.click();\n      return;\n    }\n    const { selection } = this.options;\n    if (selection === 'single') {\n      this.handleSingleSelection(row.dataset.key as string);\n    } else if (selection === 'multi') {\n      this.handleMultiSelection(row.dataset.key as string);\n    }\n  }\n\n  protected renderHeader(): TemplateResult {\n    const cells = this.dispatchHeader();\n    return html`\n    <div role=\"rowgroup\">\n      <div role=\"row\" class=\"data-table-row data-table-header\">\n        ${cells}\n      </div>\n    </div>\n    `;\n  }\n\n  protected renderBody(): TemplateResult {\n    const { active = false } = this.options;\n    const items = this.#renderItems;\n    const contents = !!items && !!items.length ? items.map(item => this.renderItem(item)) : this.renderEmpty();\n    const dbListener = active ? this.dblclickHandler : undefined;\n    return html`\n    <div class=\"data-table-body\" role=\"rowgroup\" @dblclick=\"${dbListener}\">\n      ${contents}\n    </div>`;\n  }\n\n  protected renderItem(item: T): TemplateResult {\n    const cells = this.dispatchItem(item);\n    const { selected, options } = this;\n    const typed = item as unknown as Record<string, string>;\n    const key = typed[options.key || 'key'];\n    let isSelected = false;\n    if (options.selection === 'single') {\n      const [selectedKey] = selected;\n      if (selectedKey === key) {\n        isSelected = true;\n      }\n    } else if (options.selection === 'multi') {\n      isSelected = selected.includes(key);\n    }\n    const classes: ClassInfo = {\n      'data-table-row': true,\n      selected: isSelected,\n    };\n    return html`\n    <div role=\"row\" class=\"${classMap(classes)}\" data-key=\"${key}\" aria-selected=\"${isSelected ? 'true' : 'false'}\">\n      <div class=\"data-table-row-body\" role=\"presentation\">\n        ${cells}\n      </div>\n    </div>\n    `;\n  }\n\n  protected renderEmpty(): TemplateResult {\n    const content = this.dispatchEmpty();\n    return html`\n    <div role=\"row\" class=\"data-table-row data-table-empty-row\">\n      <div role=\"cell\">\n      ${content}\n      </div>\n    </div>\n    `;\n  }\n\n  protected dispatchHeader(): TemplateResult[] | undefined {\n    const callback = this.#listeners.header as () => TemplateResult[] | undefined;\n    if (!callback) {\n      return undefined;\n    }\n    let content: TemplateResult[] | undefined;\n    try {\n      content = callback();\n    } catch (e) {\n      // eslint-disable-next-line no-console\n      console.warn(e);\n    }\n    return content;\n  }\n\n  protected dispatchItem(item: T): TemplateResult[] | undefined {\n    const callback = this.#listeners.item as CellCallback<T> | undefined;\n    if (!callback) {\n      return undefined;\n    }\n    let content: TemplateResult[] | undefined;\n    try {\n      content = callback(item);\n    } catch (e) {\n      // eslint-disable-next-line no-console\n      console.warn(e);\n    }\n    return content;\n  }\n\n  protected dispatchEmpty(): TemplateResult | undefined {\n    const callback = this.#listeners.empty as () => TemplateResult | undefined;\n    if (!callback) {\n      return undefined;\n    }\n    let content: TemplateResult | undefined;\n    try {\n      content = callback();\n    } catch (e) {\n      // eslint-disable-next-line no-console\n      console.warn(e);\n    }\n    return content;\n  }\n\n  protected dispatchRender(): void {\n    const callback = this.#listeners.render as () => void;\n    if (!callback) {\n      return;\n    }\n    try {\n      callback();\n    } catch (e) {\n      // eslint-disable-next-line no-console\n      console.warn(e);\n    }\n  }\n\n  protected dispatchSelected(selection: string | string[]): void {\n    const callback = this.#listeners.select as SelectCallback;\n    if (!callback) {\n      return;\n    }\n    try {\n      callback(selection);\n    } catch (e) {\n      // eslint-disable-next-line no-console\n      console.warn(e);\n    }\n  }\n}\n"]}

package/dist/ui/tabs/UiTab.js

@@ -21,29 +21,32 @@ export default class UiTab extends UiElement {
         setDisabled(this, value);
         this.requestUpdate('disabled', old);
     }
-    /**
-     * Whether the tab is selected. Note, this does not correspond to the `selected` state
-     * in the `ui-tabs`. This is only to render the tab in the selected state.
-     * @attribute
-     */
-    selected = false;
-    /**
-     * @attribute
-     */
-    priority = 'primary';
-    /**
-     * @attribute
-     */
-    indicated = false;
-    hasIcon = false;
-    showRipple = false;
-    ripple;
-    getRipple = () => {
-        this.showRipple = true;
-        return this.ripple;
-    };
     constructor() {
         super();
+        /**
+         * Whether the tab is selected. Note, this does not correspond to the `selected` state
+         * in the `ui-tabs`. This is only to render the tab in the selected state.
+         * @attribute
+         */
+        this.selected = false;
+        /**
+         * @attribute
+         */
+        this.priority = 'primary';
+        /**
+         * @attribute
+         */
+        this.indicated = false;
+        this.hasIcon = false;
+        this.showRipple = false;
+        this.getRipple = () => {
+            this.showRipple = true;
+            return this.ripple;
+        };
+        this.renderRipple = () => {
+            const { disabled } = this;
+            return html `<ui-ripple class="ripple" ?disabled="${disabled}"></ui-ripple>`;
+        };
         this.actionController.cancelKeyboardEvents = true;
         this.addEventListener('keydown', this.handleKeyDown.bind(this));
         this.addEventListener('keyup', this.handleKeyUp.bind(this));
@@ -134,10 +137,6 @@ export default class UiTab extends UiElement {
     </div>
     `;
     }
-    renderRipple = () => {
-        const { disabled } = this;
-        return html `<ui-ripple class="ripple" ?disabled="${disabled}"></ui-ripple>`;
-    };
     renderIndicator() {
         const { indicated, priority } = this;
         if (!indicated) {

package/dist/ui/tabs/UiTab.js.map

@@ -1 +1 @@
-{"version":3,"file":"UiTab.js","sourceRoot":"","sources":["../../../src/ui/tabs/UiTab.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, nothing, TemplateResult } from \"lit\";\nimport { property, queryAsync, state } from \"lit/decorators.js\";\nimport { ClassInfo, classMap } from \"lit/directives/class-map.js\";\nimport { when } from \"lit/directives/when.js\";\nimport { EndPressConfig } from \"../controllers/ActionController.js\";\nimport UiRipple from \"../effects/ripple.js\";\nimport { ripple } from \"../effects/rippleDirective.js\";\nimport { isDisabled, setDisabled } from \"../lib/disabled.js\";\nimport { UiElement } from \"../UiElement.js\";\n// eslint-disable-next-line import/no-cycle\nimport { TabsPriority } from \"./UiTabs.js\";\nimport { Easing } from \"../motion/animation.js\";\nimport '../../define/ui/ui-ripple.js';\n\nexport default class UiTab extends UiElement {\n  get disabled(): boolean {\n    return isDisabled(this);\n  }\n\n  /**\n   * When set, the button is a disabled state.\n   * @attribute\n   */\n  @property({ reflect: true, type: Boolean })\n  set disabled(value: boolean) {\n    const old = isDisabled(this);\n    setDisabled(this, value);\n    this.requestUpdate('disabled', old);\n  }\n\n  /**\n   * Whether the tab is selected. Note, this does not correspond to the `selected` state\n   * in the `ui-tabs`. This is only to render the tab in the selected state.\n   * @attribute\n   */\n  @property({ reflect: true, type: Boolean }) selected = false;\n  \n  /**\n   * @attribute\n   */\n  @property({ reflect: true, type: Boolean }) priority: TabsPriority = 'primary';\n\n  /**\n   * @attribute\n   */\n  @property({ reflect: true, type: Boolean }) indicated = false;\n  \n\n  @state() protected hasIcon = false;\n\n  @state() protected showRipple = false;\n\n  @queryAsync('ui-ripple') protected ripple!: Promise<UiRipple | null>;\n\n  protected readonly getRipple = (): Promise<UiRipple | null> => {\n    this.showRipple = true;\n    return this.ripple;\n  };\n\n  constructor() {\n    super();\n    this.actionController.cancelKeyboardEvents = true;\n    this.addEventListener('keydown', this.handleKeyDown.bind(this));\n    this.addEventListener('keyup', this.handleKeyUp.bind(this));\n    this.addEventListener('click', this.handleClick.bind(this));\n    this.addEventListener('pointerdown', this.handlePointerDown.bind(this));\n    this.addEventListener('pointerup', this.handlePointerUp.bind(this));\n    this.addEventListener('pointercancel', this.handlePointerCancel.bind(this));\n    this.addEventListener('pointerleave', this.handlePointerLeave.bind(this));\n    this.addEventListener('contextmenu', this.handleContextMenu.bind(this));\n  }\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    if (!this.hasAttribute('role')) {\n      this.setAttribute('role', 'tab');\n    }\n    if (!this.hasAttribute('aria-selected')) {\n      this.setAttribute('aria-selected', 'false');\n    }\n  }\n\n  override endPress(config: EndPressConfig): void {\n    super.endPress(config);\n    const { cancelled, reason } = config;\n    if (cancelled) {\n      return;\n    }\n    if (reason === 'enter' || reason === 'space') {\n      this.click();\n    }\n  }\n\n  /**\n   * Sets the `_hasIcon` state property when the \"icon\" slot change event is dispatched.\n   */\n  protected handleIconChange(e: Event): void {\n    const slot = e.target as HTMLSlotElement;\n    this.hasIcon = !!slot.assignedNodes().length;\n  }\n\n  /**\n   * When `indicated` is `true` it animates the indicator to highlight the position of the tab.\n   */\n  highlight(): void {\n    if (!this.indicated) {\n      return;\n    }\n    const pointer = this.shadowRoot?.querySelector('.pointer');\n    if (!pointer) {\n      return;\n    }\n    const frames: Keyframe[] = [\n      {\n        width: `40px`,\n      },\n      {\n        width: `80px`,\n      },\n      {\n        width: `40px`,\n      }\n    ];\n    \n    pointer.animate(frames, {\n      duration: 360,\n      iterations: 1,\n      easing: Easing.STANDARD,\n    });\n  }\n\n  protected override render(): TemplateResult {\n    const { pressed = false } = this;\n    const containerClasses = classMap({\n      surface: true,\n      withIcon: this.hasIcon,\n      pressed,\n    });\n    return html`\n    <div class=\"${containerClasses}\" ${ripple(this.getRipple)}>\n      <div class=\"container\"></div>\n      ${when(this.showRipple, this.renderRipple)}\n      <div class=\"content\">\n        ${this.renderIcon()}\n        <div class=\"tab-content\"><slot></slot></div>\n      </div>\n      ${this.renderIndicator()}\n    </div>\n    `;\n  }\n\n  protected renderIcon(): TemplateResult {\n    return html`\n    <div class=\"icon\">\n      <slot name=\"icon\" @slotchange=\"${this.handleIconChange}\"></slot>\n    </div>\n    `;\n  }\n\n  protected renderRipple = (): TemplateResult => {\n    const { disabled } = this;\n    return html`<ui-ripple class=\"ripple\" ?disabled=\"${disabled}\"></ui-ripple>`;\n  };\n\n  protected renderIndicator(): TemplateResult | typeof nothing {\n    const { indicated, priority } = this;\n    if (!indicated) {\n      return nothing;\n    }\n    const classes: ClassInfo = {\n      indicator: true,\n      primary: priority === 'primary',\n    };\n    return html`<div class=\"${classMap(classes)}\">\n      <span role=\"presentation\" class=\"pointer\"></span>\n    </div>`;\n  }\n}\n"]}
+{"version":3,"file":"UiTab.js","sourceRoot":"","sources":["../../../src/ui/tabs/UiTab.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, nothing, TemplateResult } from \"lit\";\nimport { property, queryAsync, state } from \"lit/decorators.js\";\nimport { ClassInfo, classMap } from \"lit/directives/class-map.js\";\nimport { when } from \"lit/directives/when.js\";\nimport { EndPressConfig } from \"../controllers/ActionController.js\";\nimport UiRipple from \"../effects/ripple.js\";\nimport { ripple } from \"../effects/rippleDirective.js\";\nimport { isDisabled, setDisabled } from \"../lib/disabled.js\";\nimport { UiElement } from \"../UiElement.js\";\n// eslint-disable-next-line import/no-cycle\nimport { TabsPriority } from \"./UiTabs.js\";\nimport { Easing } from \"../motion/animation.js\";\nimport '../../define/ui/ui-ripple.js';\n\nexport default class UiTab extends UiElement {\n  get disabled(): boolean {\n    return isDisabled(this);\n  }\n\n  /**\n   * When set, the button is a disabled state.\n   * @attribute\n   */\n  @property({ reflect: true, type: Boolean })\n  set disabled(value: boolean) {\n    const old = isDisabled(this);\n    setDisabled(this, value);\n    this.requestUpdate('disabled', old);\n  }\n\n  /**\n   * Whether the tab is selected. Note, this does not correspond to the `selected` state\n   * in the `ui-tabs`. This is only to render the tab in the selected state.\n   * @attribute\n   */\n  @property({ reflect: true, type: Boolean }) selected = false;\n  \n  /**\n   * @attribute\n   */\n  @property({ reflect: true, type: Boolean }) priority: TabsPriority = 'primary';\n\n  /**\n   * @attribute\n   */\n  @property({ reflect: true, type: Boolean }) indicated = false;\n  \n\n  @state() protected hasIcon = false;\n\n  @state() protected showRipple = false;\n\n  @queryAsync('ui-ripple') protected ripple!: Promise<UiRipple | null>;\n\n  protected readonly getRipple = (): Promise<UiRipple | null> => {\n    this.showRipple = true;\n    return this.ripple;\n  };\n\n  constructor() {\n    super();\n    this.actionController.cancelKeyboardEvents = true;\n    this.addEventListener('keydown', this.handleKeyDown.bind(this));\n    this.addEventListener('keyup', this.handleKeyUp.bind(this));\n    this.addEventListener('click', this.handleClick.bind(this));\n    this.addEventListener('pointerdown', this.handlePointerDown.bind(this));\n    this.addEventListener('pointerup', this.handlePointerUp.bind(this));\n    this.addEventListener('pointercancel', this.handlePointerCancel.bind(this));\n    this.addEventListener('pointerleave', this.handlePointerLeave.bind(this));\n    this.addEventListener('contextmenu', this.handleContextMenu.bind(this));\n  }\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    if (!this.hasAttribute('role')) {\n      this.setAttribute('role', 'tab');\n    }\n    if (!this.hasAttribute('aria-selected')) {\n      this.setAttribute('aria-selected', 'false');\n    }\n  }\n\n  override endPress(config: EndPressConfig): void {\n    super.endPress(config);\n    const { cancelled, reason } = config;\n    if (cancelled) {\n      return;\n    }\n    if (reason === 'enter' || reason === 'space') {\n      this.click();\n    }\n  }\n\n  /**\n   * Sets the `_hasIcon` state property when the \"icon\" slot change event is dispatched.\n   */\n  protected handleIconChange(e: Event): void {\n    const slot = e.target as HTMLSlotElement;\n    this.hasIcon = !!slot.assignedNodes().length;\n  }\n\n  /**\n   * When `indicated` is `true` it animates the indicator to highlight the position of the tab.\n   */\n  highlight(): void {\n    if (!this.indicated) {\n      return;\n    }\n    const pointer = this.shadowRoot?.querySelector('.pointer');\n    if (!pointer) {\n      return;\n    }\n    const frames: Keyframe[] = [\n      {\n        width: `40px`,\n      },\n      {\n        width: `80px`,\n      },\n      {\n        width: `40px`,\n      }\n    ];\n    \n    pointer.animate(frames, {\n      duration: 360,\n      iterations: 1,\n      easing: Easing.STANDARD,\n    });\n  }\n\n  protected override render(): TemplateResult {\n    const { pressed = false } = this;\n    const containerClasses = classMap({\n      surface: true,\n      withIcon: this.hasIcon,\n      pressed,\n    });\n    return html`\n    <div class=\"${containerClasses}\" ${ripple(this.getRipple)}>\n      <div class=\"container\"></div>\n      ${when(this.showRipple, this.renderRipple)}\n      <div class=\"content\">\n        ${this.renderIcon()}\n        <div class=\"tab-content\"><slot></slot></div>\n      </div>\n      ${this.renderIndicator()}\n    </div>\n    `;\n  }\n\n  protected renderIcon(): TemplateResult {\n    return html`\n    <div class=\"icon\">\n      <slot name=\"icon\" @slotchange=\"${this.handleIconChange}\"></slot>\n    </div>\n    `;\n  }\n\n  protected renderRipple = (): TemplateResult => {\n    const { disabled } = this;\n    return html`<ui-ripple class=\"ripple\" ?disabled=\"${disabled}\"></ui-ripple>`;\n  };\n\n  protected renderIndicator(): TemplateResult | typeof nothing {\n    const { indicated, priority } = this;\n    if (!indicated) {\n      return nothing;\n    }\n    const classes: ClassInfo = {\n      indicator: true,\n      primary: priority === 'primary',\n    };\n    return html`<div class=\"${classMap(classes)}\">\n      <span role=\"presentation\" class=\"pointer\"></span>\n    </div>`;\n  }\n}\n"]}

package/dist/ui/tabs/UiTabs.js

@@ -24,40 +24,27 @@ export function calcPercent(w, w0) {
  * @fires select - A non bubbling event when selection change through user interaction. The `event.detail` object contains the `item` and `index` properties. It also has the `select` property with the value of the `selectedAttribute` on the tab.
  */
 export default class UiTabs extends LitElement {
-    items = [];
-    activeItem = null;
-    assignedElements;
-    pointer;
-    content;
-    /**
-     * The priority of the tabs.
-     *
-     * @default primary
-     * @attribute
-     */
-    priority = 'primary';
-    /**
-     * If true, tabs are scrollable and the tab width is based on the label width.
-     * @attribute
-     */
-    scrollable;
-    /**
-     * The value of the selected tab.
-     * This is matched with the `aria-controls` of the tab.
-     * @attribute
-     */
-    selected;
-    /**
-     * The attribute on the `ui-tab` that indicates which value for `selected`
-     * corresponds to which tab.
-     *
-     * @default aria-controls
-     * @attribute
-     */
-    selectedAttribute = `aria-controls`;
-    pointerStyles;
-    contentScroll;
-    indicated = false;
+    constructor() {
+        super(...arguments);
+        this.items = [];
+        this.activeItem = null;
+        /**
+         * The priority of the tabs.
+         *
+         * @default primary
+         * @attribute
+         */
+        this.priority = 'primary';
+        /**
+         * The attribute on the `ui-tab` that indicates which value for `selected`
+         * corresponds to which tab.
+         *
+         * @default aria-controls
+         * @attribute
+         */
+        this.selectedAttribute = `aria-controls`;
+        this.indicated = false;
+    }
     // constructor() {
     //   super();
     //   // this.addEventListener('keydown', this.handleKeydown.bind(this));
@@ -206,7 +193,6 @@ export default class UiTabs extends LitElement {
         });
         this.moveAnimation = moveAnimation;
     }
-    moveAnimation;
     getPrimaryLeft(tab) {
         const contentBox = this.content.getBoundingClientRect();
         const tabRect = tab.getBoundingClientRect();

package/dist/ui/tabs/UiTabs.js.map

@@ -1 +1 @@
-{"version":3,"file":"UiTabs.js","sourceRoot":"","sources":["../../../src/ui/tabs/UiTabs.ts"],"names":[],"mappings":"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","sourcesContent":["/* eslint-disable import/no-cycle */\n/* eslint-disable no-param-reassign */\nimport { html, LitElement, nothing, TemplateResult } from \"lit\";\nimport { property, query, queryAssignedElements, state } from \"lit/decorators.js\";\nimport { ClassInfo, classMap } from \"lit/directives/class-map.js\";\nimport { StyleInfo, styleMap } from \"lit/directives/style-map.js\";\nimport { Easing } from \"../motion/animation.js\";\nimport UiTab from \"./UiTab.js\";\nimport '../../define/ui/ui-icon-button.js';\nimport '../../define/ui/ui-divider.js';\nimport '../../define/ui/ui-icon.js';\n\nexport type TabsPriority = 'primary' | 'secondary';\n\nexport interface TabSelectionDetail {\n  item: UiTab;\n  index: number;\n  select: string | null;\n}\n\n/**\n * Calculates value in percentages\n * @param w Element width\n * @param w0 Parent width\n * @return The percentage of element's width relative to parent.\n */\nexport function calcPercent(w: number, w0: number): number {\n  return (100 * w) / w0;\n}\n\n/**\n * A container for tabs.\n * \n * @fires select - A non bubbling event when selection change through user interaction. The `event.detail` object contains the `item` and `index` properties. It also has the `select` property with the value of the `selectedAttribute` on the tab.\n */\nexport default class UiTabs extends LitElement {\n  items: UiTab[] = [];\n\n  activeItem: UiTab | null = null;\n\n  @queryAssignedElements({ flatten: true }) protected assignedElements!: HTMLElement[] | null;\n\n  @query('.pointer') protected pointer!: HTMLElement;\n\n  @query('.content') protected content!: HTMLElement;\n\n  /**\n   * The priority of the tabs.\n   * \n   * @default primary\n   * @attribute\n   */\n  @property({ type: String, reflect: true }) priority: TabsPriority = 'primary';\n\n  /**\n   * If true, tabs are scrollable and the tab width is based on the label width.\n   * @attribute\n   */\n  @property({ type: Boolean }) scrollable?: boolean;\n\n  /**\n   * The value of the selected tab.\n   * This is matched with the `aria-controls` of the tab.\n   * @attribute\n   */\n  @property({ type: String }) selected?: string;\n\n  /**\n   * The attribute on the `ui-tab` that indicates which value for `selected` \n   * corresponds to which tab. \n   * \n   * @default aria-controls\n   * @attribute\n   */\n  @property({ type: String }) selectedAttribute = `aria-controls`;\n\n  @state() protected pointerStyles?: StyleInfo;\n\n  protected contentScroll?: number;\n\n  @state() protected indicated = false;\n\n  // constructor() {\n  //   super();\n\n  //   // this.addEventListener('keydown', this.handleKeydown.bind(this));\n  //   // this.addEventListener('click', this.handleClick.bind(this));\n  // }\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    if (!this.hasAttribute('role')) {\n      this.setAttribute('role', 'tablist');\n    }\n  }\n\n  protected async updateItems(): Promise<void> {\n    const elements = this.assignedElements || [];\n    const items = elements.filter(this.isTabItem, this);\n    this.items = items;\n    if (this.activeItem && !items.includes(this.activeItem)) {\n      this.activeItem = null;\n    }\n    await this.updateComplete;\n    this.ensureSelection();\n  }\n\n  /** \n   * @return Whether the given element is a list item element. \n   */\n  protected isTabItem(element: Element): element is UiTab {\n    if (element.nodeType !== Node.ELEMENT_NODE) {\n      return false;\n    }\n    return element.localName === 'ui-tab';\n  }\n\n  protected isSelectable(element: UiTab): boolean {\n    if (element.disabled) {\n      return false;\n    }\n    if (element.hidden && element.hasAttribute('hidden')) {\n      return false;\n    }\n    return true;\n  }\n\n  protected ensureSelection(): void {\n    const { selected, selectedAttribute, activeItem, items } = this;\n    if (!selectedAttribute) {\n      return;\n    }\n    const item = items.find(i => i.getAttribute(selectedAttribute) === selected);\n    if (item && item === activeItem) {\n      return;\n    }\n    this.makeSelection(item);\n  }\n\n  protected makeSelection(tab?: UiTab, focus = false): void {\n    const { activeItem } = this;\n    if (activeItem === tab) {\n      tab.highlight();\n      return;\n    }\n    if (activeItem) {\n      this.deselectItem(activeItem);\n    }\n    if (tab) {\n      this.selectItem(tab, focus);\n      this.positionPointer(tab, activeItem);\n      if (this.activeItem) {\n        // we set this here so we won't notify selection when initializing.\n        this.notifySelect(tab);\n      }\n    }\n  }\n\n  notifySelect(item: UiTab): void {\n    const index = this.items.indexOf(item);\n    if (index === -1) {\n      return;\n    }\n    const attrValue = item.getAttribute(this.selectedAttribute);\n    this.dispatchEvent(new CustomEvent<TabSelectionDetail>('select', {\n      detail: {\n        item,\n        index,\n        select: attrValue,\n      }\n    }));\n  }\n\n  protected selectItem(tab: UiTab, focus = false): void {\n    if (this.activeItem === tab) {\n      return;\n    }\n    if (this.hasAttribute('tabindex')) {\n      this.removeAttribute('tabindex');\n    }\n    tab.setAttribute('aria-selected', 'true');\n    tab.setAttribute('tabindex', '0');\n    tab.selected = true;\n    this.activeItem = tab;\n    tab.priority = this.priority;\n    tab.scrollIntoView({ inline: 'nearest', behavior: 'auto', block: 'nearest' });\n    if (focus) {\n      tab.focus();\n    }\n  }\n\n  protected deselectItem(tab: UiTab): void {\n    tab.setAttribute('aria-selected', 'false');\n    tab.setAttribute('tabindex', '-1');\n    tab.selected = false;\n    tab.indicated = false;\n  }\n\n  protected async positionPointer(tab: UiTab, old?: UiTab | null): Promise<void> {\n    const { items, pointer } = this;\n    const index = items.indexOf(tab);\n    if (index < 0 || !pointer) {\n      this.pointerStyles = undefined;\n      return;\n    }\n\n    if (!old) {\n      // no start animation, just show indicator.\n      tab.indicated = true;\n      return;\n    }\n\n    // first position this indicator in the place of the old one.\n    // update the view and then run the animation.\n    this.indicated = true;\n    const isPrimary = this.priority === 'primary';\n    const left = isPrimary ? this.getPrimaryLeft(old) : this.getSecondaryLeft(old);\n    this.pointerStyles = { left };\n    await this.updateComplete;\n    const final = isPrimary ? this.getPrimaryLeft(tab) : this.getSecondaryLeft(tab);\n    const frames = isPrimary ? this.getPrimaryKeyframes(left, final) : this.getSecondaryKeyframes(left, final);\n    \n    if (this.moveAnimation) {\n      this.moveAnimation.cancel();\n    }\n    const moveAnimation = pointer.animate(frames, {\n      duration: 360,\n      iterations: 1,\n      easing: Easing.DECELERATION,\n    }\n    );\n    const finalStyles: StyleInfo = {\n      left: `${final}px`,\n    };\n    moveAnimation.addEventListener('finish', () => {\n      this.pointerStyles = finalStyles;\n      this.moveAnimation = undefined;\n      tab.indicated = true;\n      this.indicated = false;\n    });\n    moveAnimation.addEventListener('cancel', () => {\n      this.pointerStyles = finalStyles;\n    });\n    this.moveAnimation = moveAnimation;\n  }\n\n  protected moveAnimation?: Animation;\n\n  protected getPrimaryLeft(tab: UiTab): string {\n    const contentBox = this.content.getBoundingClientRect();\n    const tabRect = tab.getBoundingClientRect();\n    const leftFromParent = tabRect.x - contentBox.x;\n    const offset = this.scrollable ? 48 : 0; // left button\n    const left = leftFromParent + (tabRect.width / 2) - 20 + offset;\n    return `${left}px`;\n  }\n\n  protected getSecondaryLeft(tab: UiTab): string {\n    const contentBox = this.content.getBoundingClientRect();\n    const tabRect = tab.getBoundingClientRect();\n    const offset = this.scrollable ? 48 : 0; // left button\n    const leftFromParent = tabRect.x - contentBox.x + offset;\n    return `${leftFromParent}px`;\n  }\n\n  protected getPrimaryKeyframes(start: string, final: string): Keyframe[] {\n    return [\n      {\n        left: start,\n        width: `40px`,\n      },\n      {\n        width: `80px`,\n      },\n      {\n        left: final,\n        width: `40px`,\n      }\n    ];\n  }\n\n  protected getSecondaryKeyframes(start: string, final: string): Keyframe[] {\n    return [\n      {\n        left: start,\n      },\n      {\n        left: final,\n      }\n    ];\n  }\n\n  protected contentClickHandler(e: PointerEvent): void {\n    this.activateFromEvent(e);\n  }\n\n  protected contentKeyDownHandler(e: KeyboardEvent): void {\n    if (['Enter', 'Space'].includes(e.code)) {\n      this.activateFromEvent(e);\n    }\n  }\n\n  protected activateFromEvent(e: Event): void {\n    const { items } = this;\n    const path = e.composedPath();\n    let item: UiTab | undefined;\n    while (!item) {\n      const next = path.shift() as UiTab;\n      if (!next) {\n        break;\n      }\n      if (items.includes(next)) {\n        item = next;\n      }\n    }\n    if (!item) {\n      return;\n    }\n    this.makeSelection(item, true);\n  }\n\n  protected handleScrollLeft(): void {\n    const { contentScroll = 0, content } = this;\n    if (contentScroll === 0) {\n      return;\n    }\n    let left = contentScroll - 80;\n    if (left < 0) {\n      left = 0;\n    }\n    this.contentScroll = left;\n    content.scrollTo({\n      behavior: 'smooth',\n      left,\n    });\n  }\n\n  protected handleScrollRight(): void {\n    const { contentScroll = 0, content } = this;\n    let left = contentScroll + 80;\n    if (left + content.clientWidth > content.scrollWidth) {\n      left = content.scrollWidth - content.clientWidth;\n    }\n    this.contentScroll = left;\n    content.scrollTo({\n      behavior: 'smooth',\n      left,\n    });\n  }\n\n  protected handleScroll(e: Event): void {\n    const div = e.target as HTMLElement;\n    this.contentScroll = div.scrollLeft;\n  }\n\n  protected handleKeyDown(e: KeyboardEvent): void {\n    if (e.code === 'ArrowRight') {\n      e.preventDefault();\n      const tab = this.activeItem ? this.getNextItem(this.activeItem) : this.items[0];\n      this.makeSelection(tab, true);\n    } else if (e.code === 'ArrowLeft') {\n      e.preventDefault();\n      const tab = this.activeItem ? this.getPreviousItem(this.activeItem) : this.items[0];\n      this.makeSelection(tab, true);\n    }\n  }\n\n  getPreviousItem(item: UiTab): UiTab {\n    const { items } = this;\n    const curIndex = items.indexOf(item);\n    if (curIndex < 0) {\n      return item;\n    }\n    let i = curIndex;\n    let result: HTMLElement | undefined;\n    do {\n      i--;\n      if (i === curIndex) {\n        // looped back from the end, no active element to find.\n        return item;\n      }\n      const tmp = items[i];\n      if (!tmp) {\n        i = items.length;\n        continue;\n      }\n      if (this.isSelectable(tmp)) {\n        result = tmp;\n      }\n    } while (!result);\n    return result as UiTab || item;\n  }\n\n  getNextItem(item: UiTab): UiTab {\n    const { items } = this;\n    const curIndex = items.indexOf(item);\n    if (curIndex < 0) {\n      return item;\n    }\n    let i = curIndex;\n    let next: HTMLElement | undefined;\n    do {\n      i++;\n      if (i === curIndex) {\n        // looped back from the start, no active element to find.\n        return item;\n      }\n      const tmp = items[i];\n      if (!tmp) {\n        i = -1;\n        continue;\n      }\n      if (this.isSelectable(tmp)) {\n        next = tmp;\n      }\n    } while (!next);\n    return next as UiTab || item;\n  }\n\n  override render(): TemplateResult {\n    const classes: ClassInfo = {\n      surface: true,\n      scrollable: !!this.scrollable,\n    }\n    return html`\n    <div class=\"${classMap(classes)}\">\n      ${this.renderLeftScrollControl()}\n      <div class=\"content\" @scroll=\"${this.handleScroll}\" @keydown=\"${this.handleKeyDown}\">\n        ${this.renderSlot()}\n      </div>\n      ${this.rightScrollControl()}\n      ${this.renderIndicator()}\n      <div class=\"divider\"></div>\n    </div>\n    `;\n  }\n\n  protected renderSlot(): TemplateResult {\n    return html`<slot \n      @slotchange=\"${this.updateItems}\" \n      @click=\"${this.contentClickHandler}\" \n      @keydown=\"${this.contentKeyDownHandler}\"></slot>`;\n  }\n\n  protected renderIndicator(): TemplateResult {\n    const classes: ClassInfo = {\n      indicator: true,\n      indicated: this.indicated,\n      primary: this.priority === 'primary',\n      secondary: this.priority === 'secondary',\n    }\n    return html`\n    <div class=\"${classMap(classes)}\">\n      <span role=\"presentation\" class=\"pointer\" style=\"${styleMap(this.pointerStyles || {})}\"></span>\n    </div>\n    `;\n  }\n\n  protected renderLeftScrollControl(): TemplateResult | typeof nothing {\n    if (!this.scrollable) {\n      return nothing;\n    }\n    return html`\n    <div class=\"scroll-control left\">\n      <ui-icon-button aria-label=\"Scroll tabs left\" title=\"Scroll tabs left\" @click=\"${this.handleScrollLeft}\">\n        <ui-icon icon=\"chevronLeft\"></ui-icon>\n      </ui-icon-button>\n    </div>`;\n  }\n\n  protected rightScrollControl(): TemplateResult | typeof nothing {\n    if (!this.scrollable) {\n      return nothing;\n    }\n    return html`<div class=\"scroll-control right\">\n      <ui-icon-button aria-label=\"Scroll tabs right\" title=\"Scroll tabs right\" @click=\"${this.handleScrollRight}\">\n        <ui-icon icon=\"chevronRight\"></ui-icon>\n      </ui-icon-button>\n    </div>`;\n  }\n}\n"]}
+{"version":3,"file":"UiTabs.js","sourceRoot":"","sources":["../../../src/ui/tabs/UiTabs.ts"],"names":[],"mappings":"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","sourcesContent":["/* eslint-disable import/no-cycle */\n/* eslint-disable no-param-reassign */\nimport { html, LitElement, nothing, TemplateResult } from \"lit\";\nimport { property, query, queryAssignedElements, state } from \"lit/decorators.js\";\nimport { ClassInfo, classMap } from \"lit/directives/class-map.js\";\nimport { StyleInfo, styleMap } from \"lit/directives/style-map.js\";\nimport { Easing } from \"../motion/animation.js\";\nimport UiTab from \"./UiTab.js\";\nimport '../../define/ui/ui-icon-button.js';\nimport '../../define/ui/ui-divider.js';\nimport '../../define/ui/ui-icon.js';\n\nexport type TabsPriority = 'primary' | 'secondary';\n\nexport interface TabSelectionDetail {\n  item: UiTab;\n  index: number;\n  select: string | null;\n}\n\n/**\n * Calculates value in percentages\n * @param w Element width\n * @param w0 Parent width\n * @return The percentage of element's width relative to parent.\n */\nexport function calcPercent(w: number, w0: number): number {\n  return (100 * w) / w0;\n}\n\n/**\n * A container for tabs.\n * \n * @fires select - A non bubbling event when selection change through user interaction. The `event.detail` object contains the `item` and `index` properties. It also has the `select` property with the value of the `selectedAttribute` on the tab.\n */\nexport default class UiTabs extends LitElement {\n  items: UiTab[] = [];\n\n  activeItem: UiTab | null = null;\n\n  @queryAssignedElements({ flatten: true }) protected assignedElements!: HTMLElement[] | null;\n\n  @query('.pointer') protected pointer!: HTMLElement;\n\n  @query('.content') protected content!: HTMLElement;\n\n  /**\n   * The priority of the tabs.\n   * \n   * @default primary\n   * @attribute\n   */\n  @property({ type: String, reflect: true }) priority: TabsPriority = 'primary';\n\n  /**\n   * If true, tabs are scrollable and the tab width is based on the label width.\n   * @attribute\n   */\n  @property({ type: Boolean }) scrollable?: boolean;\n\n  /**\n   * The value of the selected tab.\n   * This is matched with the `aria-controls` of the tab.\n   * @attribute\n   */\n  @property({ type: String }) selected?: string;\n\n  /**\n   * The attribute on the `ui-tab` that indicates which value for `selected` \n   * corresponds to which tab. \n   * \n   * @default aria-controls\n   * @attribute\n   */\n  @property({ type: String }) selectedAttribute = `aria-controls`;\n\n  @state() protected pointerStyles?: StyleInfo;\n\n  protected contentScroll?: number;\n\n  @state() protected indicated = false;\n\n  // constructor() {\n  //   super();\n\n  //   // this.addEventListener('keydown', this.handleKeydown.bind(this));\n  //   // this.addEventListener('click', this.handleClick.bind(this));\n  // }\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    if (!this.hasAttribute('role')) {\n      this.setAttribute('role', 'tablist');\n    }\n  }\n\n  protected async updateItems(): Promise<void> {\n    const elements = this.assignedElements || [];\n    const items = elements.filter(this.isTabItem, this);\n    this.items = items;\n    if (this.activeItem && !items.includes(this.activeItem)) {\n      this.activeItem = null;\n    }\n    await this.updateComplete;\n    this.ensureSelection();\n  }\n\n  /** \n   * @return Whether the given element is a list item element. \n   */\n  protected isTabItem(element: Element): element is UiTab {\n    if (element.nodeType !== Node.ELEMENT_NODE) {\n      return false;\n    }\n    return element.localName === 'ui-tab';\n  }\n\n  protected isSelectable(element: UiTab): boolean {\n    if (element.disabled) {\n      return false;\n    }\n    if (element.hidden && element.hasAttribute('hidden')) {\n      return false;\n    }\n    return true;\n  }\n\n  protected ensureSelection(): void {\n    const { selected, selectedAttribute, activeItem, items } = this;\n    if (!selectedAttribute) {\n      return;\n    }\n    const item = items.find(i => i.getAttribute(selectedAttribute) === selected);\n    if (item && item === activeItem) {\n      return;\n    }\n    this.makeSelection(item);\n  }\n\n  protected makeSelection(tab?: UiTab, focus = false): void {\n    const { activeItem } = this;\n    if (activeItem === tab) {\n      tab.highlight();\n      return;\n    }\n    if (activeItem) {\n      this.deselectItem(activeItem);\n    }\n    if (tab) {\n      this.selectItem(tab, focus);\n      this.positionPointer(tab, activeItem);\n      if (this.activeItem) {\n        // we set this here so we won't notify selection when initializing.\n        this.notifySelect(tab);\n      }\n    }\n  }\n\n  notifySelect(item: UiTab): void {\n    const index = this.items.indexOf(item);\n    if (index === -1) {\n      return;\n    }\n    const attrValue = item.getAttribute(this.selectedAttribute);\n    this.dispatchEvent(new CustomEvent<TabSelectionDetail>('select', {\n      detail: {\n        item,\n        index,\n        select: attrValue,\n      }\n    }));\n  }\n\n  protected selectItem(tab: UiTab, focus = false): void {\n    if (this.activeItem === tab) {\n      return;\n    }\n    if (this.hasAttribute('tabindex')) {\n      this.removeAttribute('tabindex');\n    }\n    tab.setAttribute('aria-selected', 'true');\n    tab.setAttribute('tabindex', '0');\n    tab.selected = true;\n    this.activeItem = tab;\n    tab.priority = this.priority;\n    tab.scrollIntoView({ inline: 'nearest', behavior: 'auto', block: 'nearest' });\n    if (focus) {\n      tab.focus();\n    }\n  }\n\n  protected deselectItem(tab: UiTab): void {\n    tab.setAttribute('aria-selected', 'false');\n    tab.setAttribute('tabindex', '-1');\n    tab.selected = false;\n    tab.indicated = false;\n  }\n\n  protected async positionPointer(tab: UiTab, old?: UiTab | null): Promise<void> {\n    const { items, pointer } = this;\n    const index = items.indexOf(tab);\n    if (index < 0 || !pointer) {\n      this.pointerStyles = undefined;\n      return;\n    }\n\n    if (!old) {\n      // no start animation, just show indicator.\n      tab.indicated = true;\n      return;\n    }\n\n    // first position this indicator in the place of the old one.\n    // update the view and then run the animation.\n    this.indicated = true;\n    const isPrimary = this.priority === 'primary';\n    const left = isPrimary ? this.getPrimaryLeft(old) : this.getSecondaryLeft(old);\n    this.pointerStyles = { left };\n    await this.updateComplete;\n    const final = isPrimary ? this.getPrimaryLeft(tab) : this.getSecondaryLeft(tab);\n    const frames = isPrimary ? this.getPrimaryKeyframes(left, final) : this.getSecondaryKeyframes(left, final);\n    \n    if (this.moveAnimation) {\n      this.moveAnimation.cancel();\n    }\n    const moveAnimation = pointer.animate(frames, {\n      duration: 360,\n      iterations: 1,\n      easing: Easing.DECELERATION,\n    }\n    );\n    const finalStyles: StyleInfo = {\n      left: `${final}px`,\n    };\n    moveAnimation.addEventListener('finish', () => {\n      this.pointerStyles = finalStyles;\n      this.moveAnimation = undefined;\n      tab.indicated = true;\n      this.indicated = false;\n    });\n    moveAnimation.addEventListener('cancel', () => {\n      this.pointerStyles = finalStyles;\n    });\n    this.moveAnimation = moveAnimation;\n  }\n\n  protected moveAnimation?: Animation;\n\n  protected getPrimaryLeft(tab: UiTab): string {\n    const contentBox = this.content.getBoundingClientRect();\n    const tabRect = tab.getBoundingClientRect();\n    const leftFromParent = tabRect.x - contentBox.x;\n    const offset = this.scrollable ? 48 : 0; // left button\n    const left = leftFromParent + (tabRect.width / 2) - 20 + offset;\n    return `${left}px`;\n  }\n\n  protected getSecondaryLeft(tab: UiTab): string {\n    const contentBox = this.content.getBoundingClientRect();\n    const tabRect = tab.getBoundingClientRect();\n    const offset = this.scrollable ? 48 : 0; // left button\n    const leftFromParent = tabRect.x - contentBox.x + offset;\n    return `${leftFromParent}px`;\n  }\n\n  protected getPrimaryKeyframes(start: string, final: string): Keyframe[] {\n    return [\n      {\n        left: start,\n        width: `40px`,\n      },\n      {\n        width: `80px`,\n      },\n      {\n        left: final,\n        width: `40px`,\n      }\n    ];\n  }\n\n  protected getSecondaryKeyframes(start: string, final: string): Keyframe[] {\n    return [\n      {\n        left: start,\n      },\n      {\n        left: final,\n      }\n    ];\n  }\n\n  protected contentClickHandler(e: PointerEvent): void {\n    this.activateFromEvent(e);\n  }\n\n  protected contentKeyDownHandler(e: KeyboardEvent): void {\n    if (['Enter', 'Space'].includes(e.code)) {\n      this.activateFromEvent(e);\n    }\n  }\n\n  protected activateFromEvent(e: Event): void {\n    const { items } = this;\n    const path = e.composedPath();\n    let item: UiTab | undefined;\n    while (!item) {\n      const next = path.shift() as UiTab;\n      if (!next) {\n        break;\n      }\n      if (items.includes(next)) {\n        item = next;\n      }\n    }\n    if (!item) {\n      return;\n    }\n    this.makeSelection(item, true);\n  }\n\n  protected handleScrollLeft(): void {\n    const { contentScroll = 0, content } = this;\n    if (contentScroll === 0) {\n      return;\n    }\n    let left = contentScroll - 80;\n    if (left < 0) {\n      left = 0;\n    }\n    this.contentScroll = left;\n    content.scrollTo({\n      behavior: 'smooth',\n      left,\n    });\n  }\n\n  protected handleScrollRight(): void {\n    const { contentScroll = 0, content } = this;\n    let left = contentScroll + 80;\n    if (left + content.clientWidth > content.scrollWidth) {\n      left = content.scrollWidth - content.clientWidth;\n    }\n    this.contentScroll = left;\n    content.scrollTo({\n      behavior: 'smooth',\n      left,\n    });\n  }\n\n  protected handleScroll(e: Event): void {\n    const div = e.target as HTMLElement;\n    this.contentScroll = div.scrollLeft;\n  }\n\n  protected handleKeyDown(e: KeyboardEvent): void {\n    if (e.code === 'ArrowRight') {\n      e.preventDefault();\n      const tab = this.activeItem ? this.getNextItem(this.activeItem) : this.items[0];\n      this.makeSelection(tab, true);\n    } else if (e.code === 'ArrowLeft') {\n      e.preventDefault();\n      const tab = this.activeItem ? this.getPreviousItem(this.activeItem) : this.items[0];\n      this.makeSelection(tab, true);\n    }\n  }\n\n  getPreviousItem(item: UiTab): UiTab {\n    const { items } = this;\n    const curIndex = items.indexOf(item);\n    if (curIndex < 0) {\n      return item;\n    }\n    let i = curIndex;\n    let result: HTMLElement | undefined;\n    do {\n      i--;\n      if (i === curIndex) {\n        // looped back from the end, no active element to find.\n        return item;\n      }\n      const tmp = items[i];\n      if (!tmp) {\n        i = items.length;\n        continue;\n      }\n      if (this.isSelectable(tmp)) {\n        result = tmp;\n      }\n    } while (!result);\n    return result as UiTab || item;\n  }\n\n  getNextItem(item: UiTab): UiTab {\n    const { items } = this;\n    const curIndex = items.indexOf(item);\n    if (curIndex < 0) {\n      return item;\n    }\n    let i = curIndex;\n    let next: HTMLElement | undefined;\n    do {\n      i++;\n      if (i === curIndex) {\n        // looped back from the start, no active element to find.\n        return item;\n      }\n      const tmp = items[i];\n      if (!tmp) {\n        i = -1;\n        continue;\n      }\n      if (this.isSelectable(tmp)) {\n        next = tmp;\n      }\n    } while (!next);\n    return next as UiTab || item;\n  }\n\n  override render(): TemplateResult {\n    const classes: ClassInfo = {\n      surface: true,\n      scrollable: !!this.scrollable,\n    }\n    return html`\n    <div class=\"${classMap(classes)}\">\n      ${this.renderLeftScrollControl()}\n      <div class=\"content\" @scroll=\"${this.handleScroll}\" @keydown=\"${this.handleKeyDown}\">\n        ${this.renderSlot()}\n      </div>\n      ${this.rightScrollControl()}\n      ${this.renderIndicator()}\n      <div class=\"divider\"></div>\n    </div>\n    `;\n  }\n\n  protected renderSlot(): TemplateResult {\n    return html`<slot \n      @slotchange=\"${this.updateItems}\" \n      @click=\"${this.contentClickHandler}\" \n      @keydown=\"${this.contentKeyDownHandler}\"></slot>`;\n  }\n\n  protected renderIndicator(): TemplateResult {\n    const classes: ClassInfo = {\n      indicator: true,\n      indicated: this.indicated,\n      primary: this.priority === 'primary',\n      secondary: this.priority === 'secondary',\n    }\n    return html`\n    <div class=\"${classMap(classes)}\">\n      <span role=\"presentation\" class=\"pointer\" style=\"${styleMap(this.pointerStyles || {})}\"></span>\n    </div>\n    `;\n  }\n\n  protected renderLeftScrollControl(): TemplateResult | typeof nothing {\n    if (!this.scrollable) {\n      return nothing;\n    }\n    return html`\n    <div class=\"scroll-control left\">\n      <ui-icon-button aria-label=\"Scroll tabs left\" title=\"Scroll tabs left\" @click=\"${this.handleScrollLeft}\">\n        <ui-icon icon=\"chevronLeft\"></ui-icon>\n      </ui-icon-button>\n    </div>`;\n  }\n\n  protected rightScrollControl(): TemplateResult | typeof nothing {\n    if (!this.scrollable) {\n      return nothing;\n    }\n    return html`<div class=\"scroll-control right\">\n      <ui-icon-button aria-label=\"Scroll tabs right\" title=\"Scroll tabs right\" @click=\"${this.handleScrollRight}\">\n        <ui-icon icon=\"chevronRight\"></ui-icon>\n      </ui-icon-button>\n    </div>`;\n  }\n}\n"]}