@api-client/ui 0.0.1

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

@@ -0,0 +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"]}

package/dist/ui/tabs/UiTab.d.ts

@@ -0,0 +1,48 @@
+import { nothing, TemplateResult } from "lit";
+import { EndPressConfig } from "../controllers/ActionController.js";
+import UiRipple from "../effects/ripple.js";
+import { UiElement } from "../UiElement.js";
+import { TabsPriority } from "./UiTabs.js";
+import '../../define/ui/ui-ripple.js';
+export default class UiTab extends UiElement {
+    get disabled(): boolean;
+    /**
+     * When set, the button is a disabled state.
+     * @attribute
+     */
+    set disabled(value: boolean);
+    /**
+     * 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: boolean;
+    /**
+     * @attribute
+     */
+    priority: TabsPriority;
+    /**
+     * @attribute
+     */
+    indicated: boolean;
+    protected hasIcon: boolean;
+    protected showRipple: boolean;
+    protected ripple: Promise<UiRipple | null>;
+    protected readonly getRipple: () => Promise<UiRipple | null>;
+    constructor();
+    connectedCallback(): void;
+    endPress(config: EndPressConfig): void;
+    /**
+     * Sets the `_hasIcon` state property when the "icon" slot change event is dispatched.
+     */
+    protected handleIconChange(e: Event): void;
+    /**
+     * When `indicated` is `true` it animates the indicator to highlight the position of the tab.
+     */
+    highlight(): void;
+    protected render(): TemplateResult;
+    protected renderIcon(): TemplateResult;
+    protected renderRipple: () => TemplateResult;
+    protected renderIndicator(): TemplateResult | typeof nothing;
+}
+//# sourceMappingURL=UiTab.d.ts.map

package/dist/ui/tabs/UiTab.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"UiTab.d.ts","sourceRoot":"","sources":["../../../src/ui/tabs/UiTab.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,OAAO,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAIpD,OAAO,EAAE,cAAc,EAAE,MAAM,oCAAoC,CAAC;AACpE,OAAO,QAAQ,MAAM,sBAAsB,CAAC;AAG5C,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAE5C,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAE3C,OAAO,8BAA8B,CAAC;AAEtC,MAAM,CAAC,OAAO,OAAO,KAAM,SAAQ,SAAS;IAC1C,IAAI,QAAQ,IAAI,OAAO,CAEtB;IAED;;;OAGG;IACH,IACI,QAAQ,CAAC,KAAK,EAAE,OAAO,EAI1B;IAED;;;;OAIG;IACyC,QAAQ,UAAS;IAE7D;;OAEG;IACyC,QAAQ,EAAE,YAAY,CAAa;IAE/E;;OAEG;IACyC,SAAS,UAAS;IAGrD,SAAS,CAAC,OAAO,UAAS;IAE1B,SAAS,CAAC,UAAU,UAAS;IAEb,SAAS,CAAC,MAAM,EAAG,OAAO,CAAC,QAAQ,GAAG,IAAI,CAAC,CAAC;IAErE,SAAS,CAAC,QAAQ,CAAC,SAAS,QAAO,QAAQ,QAAQ,GAAG,IAAI,CAAC,CAGzD;;IAeO,iBAAiB,IAAI,IAAI;IAUzB,QAAQ,CAAC,MAAM,EAAE,cAAc,GAAG,IAAI;IAW/C;;OAEG;IACH,SAAS,CAAC,gBAAgB,CAAC,CAAC,EAAE,KAAK,GAAG,IAAI;IAK1C;;OAEG;IACH,SAAS,IAAI,IAAI;cA2BE,MAAM,IAAI,cAAc;IAoB3C,SAAS,CAAC,UAAU,IAAI,cAAc;IAQtC,SAAS,CAAC,YAAY,QAAO,cAAc,CAGzC;IAEF,SAAS,CAAC,eAAe,IAAI,cAAc,GAAG,OAAO,OAAO;CAa7D"}

package/dist/ui/tabs/UiTab.js

@@ -0,0 +1,176 @@
+import { __decorate } from "tslib";
+import { html, nothing } from "lit";
+import { property, queryAsync, state } from "lit/decorators.js";
+import { classMap } from "lit/directives/class-map.js";
+import { when } from "lit/directives/when.js";
+import { ripple } from "../effects/rippleDirective.js";
+import { isDisabled, setDisabled } from "../lib/disabled.js";
+import { UiElement } from "../UiElement.js";
+import { Easing } from "../motion/animation.js";
+import '../../define/ui/ui-ripple.js';
+export default class UiTab extends UiElement {
+    get disabled() {
+        return isDisabled(this);
+    }
+    /**
+     * When set, the button is a disabled state.
+     * @attribute
+     */
+    set disabled(value) {
+        const old = isDisabled(this);
+        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();
+        this.actionController.cancelKeyboardEvents = true;
+        this.addEventListener('keydown', this.handleKeyDown.bind(this));
+        this.addEventListener('keyup', this.handleKeyUp.bind(this));
+        this.addEventListener('click', this.handleClick.bind(this));
+        this.addEventListener('pointerdown', this.handlePointerDown.bind(this));
+        this.addEventListener('pointerup', this.handlePointerUp.bind(this));
+        this.addEventListener('pointercancel', this.handlePointerCancel.bind(this));
+        this.addEventListener('pointerleave', this.handlePointerLeave.bind(this));
+        this.addEventListener('contextmenu', this.handleContextMenu.bind(this));
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        if (!this.hasAttribute('role')) {
+            this.setAttribute('role', 'tab');
+        }
+        if (!this.hasAttribute('aria-selected')) {
+            this.setAttribute('aria-selected', 'false');
+        }
+    }
+    endPress(config) {
+        super.endPress(config);
+        const { cancelled, reason } = config;
+        if (cancelled) {
+            return;
+        }
+        if (reason === 'enter' || reason === 'space') {
+            this.click();
+        }
+    }
+    /**
+     * Sets the `_hasIcon` state property when the "icon" slot change event is dispatched.
+     */
+    handleIconChange(e) {
+        const slot = e.target;
+        this.hasIcon = !!slot.assignedNodes().length;
+    }
+    /**
+     * When `indicated` is `true` it animates the indicator to highlight the position of the tab.
+     */
+    highlight() {
+        if (!this.indicated) {
+            return;
+        }
+        const pointer = this.shadowRoot?.querySelector('.pointer');
+        if (!pointer) {
+            return;
+        }
+        const frames = [
+            {
+                width: `40px`,
+            },
+            {
+                width: `80px`,
+            },
+            {
+                width: `40px`,
+            }
+        ];
+        pointer.animate(frames, {
+            duration: 360,
+            iterations: 1,
+            easing: Easing.STANDARD,
+        });
+    }
+    render() {
+        const { pressed = false } = this;
+        const containerClasses = classMap({
+            surface: true,
+            withIcon: this.hasIcon,
+            pressed,
+        });
+        return html `
+    <div class="${containerClasses}" ${ripple(this.getRipple)}>
+      <div class="container"></div>
+      ${when(this.showRipple, this.renderRipple)}
+      <div class="content">
+        ${this.renderIcon()}
+        <div class="tab-content"><slot></slot></div>
+      </div>
+      ${this.renderIndicator()}
+    </div>
+    `;
+    }
+    renderIcon() {
+        return html `
+    <div class="icon">
+      <slot name="icon" @slotchange="${this.handleIconChange}"></slot>
+    </div>
+    `;
+    }
+    renderRipple = () => {
+        const { disabled } = this;
+        return html `<ui-ripple class="ripple" ?disabled="${disabled}"></ui-ripple>`;
+    };
+    renderIndicator() {
+        const { indicated, priority } = this;
+        if (!indicated) {
+            return nothing;
+        }
+        const classes = {
+            indicator: true,
+            primary: priority === 'primary',
+        };
+        return html `<div class="${classMap(classes)}">
+      <span role="presentation" class="pointer"></span>
+    </div>`;
+    }
+}
+__decorate([
+    property({ reflect: true, type: Boolean })
+], UiTab.prototype, "disabled", null);
+__decorate([
+    property({ reflect: true, type: Boolean })
+], UiTab.prototype, "selected", void 0);
+__decorate([
+    property({ reflect: true, type: Boolean })
+], UiTab.prototype, "priority", void 0);
+__decorate([
+    property({ reflect: true, type: Boolean })
+], UiTab.prototype, "indicated", void 0);
+__decorate([
+    state()
+], UiTab.prototype, "hasIcon", void 0);
+__decorate([
+    state()
+], UiTab.prototype, "showRipple", void 0);
+__decorate([
+    queryAsync('ui-ripple')
+], UiTab.prototype, "ripple", void 0);
+//# sourceMappingURL=UiTab.js.map

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

@@ -0,0 +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"]}

package/dist/ui/tabs/UiTab.styles.d.ts

@@ -0,0 +1,3 @@
+declare const _default: import("lit").CSSResult;
+export default _default;
+//# sourceMappingURL=UiTab.styles.d.ts.map

package/dist/ui/tabs/UiTab.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"UiTab.styles.d.ts","sourceRoot":"","sources":["../../../src/ui/tabs/UiTab.styles.ts"],"names":[],"mappings":";AAEA,wBAuIE"}

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

@@ -0,0 +1,138 @@
+import { css } from 'lit';
+export default css `
+:host {
+  display: inline-block;
+  vertical-align: top;
+  box-sizing: content-box;
+  outline: none;
+  text-rendering: auto;
+  cursor: default;
+  user-select: none;
+  width: auto;
+  -webkit-tap-highlight-color: transparent;
+
+  font-family: var(--md-sys-typescale-title-small-font-family-name);
+  font-style: var(--md-sys-typescale-title-small-font-family-style);
+  font-weight: var(--md-sys-typescale-title-small-font-weight);
+  font-size: var(--md-sys-typescale-title-small-font-size);
+  letter-spacing: var(--md-sys-typescale-title-small-tracking);
+  line-height: var(--md-sys-typescale-title-small-height);
+  text-transform: var(--md-sys-typescale-title-small-text-transform);
+  text-decoration: var(--md-sys-typescale-title-small-text-decoration);
+
+  --md-ripple-hover-state-layer-color: var(--md-sys-color-primary);
+  --md-ripple-focus-state-layer-color: var(--md-sys-color-primary);
+  --md-ripple-pressed-state-layer-color: var(--md-sys-color-primary);
+  /* background-color: var(--md-sys-color-surface); */
+  color: var(--md-sys-color-on-surface);
+}
+
+:host([hidden]) {
+  display: none;
+}
+
+.surface {
+  width: inherit;
+  height: inherit;
+  position: relative;
+  border-radius: inherit;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 48px;
+}
+
+.surface.withIcon {
+  height: 64px;
+}
+
+.container {
+  position: absolute;
+  inset: 0;
+  z-index: 1;
+}
+
+.content {
+  z-index: 2;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  padding: 0px 20px;
+}
+
+.tab-content {
+  display: flex;
+  align-items: center;
+}
+
+.ripple {
+  border-radius: inherit;
+  z-index: 3;
+}
+
+.icon ::slotted(*) {
+  color: var(--md-sys-color-on-surface-variant);
+  fill: var(--md-sys-color-on-surface-variant);
+  width: 24px;
+  height: 24px;
+}
+
+:host([selected]) .icon ::slotted(*) {
+  color: var(--md-sys-color-primary);
+  fill: var(--md-sys-color-primary);
+}
+
+:host([selected]) {
+  color: var(--md-sys-color-primary);
+}
+
+.indicator {
+  position: absolute;
+  bottom: 0px;
+  left: 0px;
+  right: 0px;
+  height: 2px;
+  display: flex;
+  justify-content: center;
+}
+
+.indicator.primary {
+  height: 3px;
+}
+
+.pointer {
+  height: inherit;
+  display: block;
+  background-color: var(--md-sys-color-primary);
+}
+
+.indicator.primary .pointer {
+  border-radius: 3px 3px 0px 0px;
+  width: 40px;
+}
+
+.indicator:not(.primary) .pointer {
+  flex: 1;
+}
+
+:host([disabled]) {
+  pointer-events: none;
+}
+
+:host([disabled]) .content {
+  color: var(--md-sys-color-on-surface);
+  opacity: .38;
+}
+
+:host(:hover) .container {
+  background-color: var(--md-sys-color-primary);
+  opacity: var(--md-sys-state-hover-state-layer-opacity);
+}
+
+:host(:focus) .container {
+  background-color: var(--md-sys-color-primary);
+  opacity: var(--md-sys-state-focus-state-layer-opacity);
+}
+`;
+//# sourceMappingURL=UiTab.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"UiTab.styles.js","sourceRoot":"","sources":["../../../src/ui/tabs/UiTab.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,eAAe,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuIjB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport default css`\n:host {\n  display: inline-block;\n  vertical-align: top;\n  box-sizing: content-box;\n  outline: none;\n  text-rendering: auto;\n  cursor: default;\n  user-select: none;\n  width: auto;\n  -webkit-tap-highlight-color: transparent;\n\n  font-family: var(--md-sys-typescale-title-small-font-family-name);\n  font-style: var(--md-sys-typescale-title-small-font-family-style);\n  font-weight: var(--md-sys-typescale-title-small-font-weight);\n  font-size: var(--md-sys-typescale-title-small-font-size);\n  letter-spacing: var(--md-sys-typescale-title-small-tracking);\n  line-height: var(--md-sys-typescale-title-small-height);\n  text-transform: var(--md-sys-typescale-title-small-text-transform);\n  text-decoration: var(--md-sys-typescale-title-small-text-decoration);\n\n  --md-ripple-hover-state-layer-color: var(--md-sys-color-primary);\n  --md-ripple-focus-state-layer-color: var(--md-sys-color-primary);\n  --md-ripple-pressed-state-layer-color: var(--md-sys-color-primary);\n  /* background-color: var(--md-sys-color-surface); */\n  color: var(--md-sys-color-on-surface);\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n.surface {\n  width: inherit;\n  height: inherit;\n  position: relative;\n  border-radius: inherit;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  height: 48px;\n}\n\n.surface.withIcon {\n  height: 64px;\n}\n\n.container {\n  position: absolute;\n  inset: 0;\n  z-index: 1;\n}\n\n.content {\n  z-index: 2;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  padding: 0px 20px;\n}\n\n.tab-content {\n  display: flex;\n  align-items: center;\n}\n\n.ripple {\n  border-radius: inherit;\n  z-index: 3;\n}\n\n.icon ::slotted(*) {\n  color: var(--md-sys-color-on-surface-variant);\n  fill: var(--md-sys-color-on-surface-variant);\n  width: 24px;\n  height: 24px;\n}\n\n:host([selected]) .icon ::slotted(*) {\n  color: var(--md-sys-color-primary);\n  fill: var(--md-sys-color-primary);\n}\n\n:host([selected]) {\n  color: var(--md-sys-color-primary);\n}\n\n.indicator {\n  position: absolute;\n  bottom: 0px;\n  left: 0px;\n  right: 0px;\n  height: 2px;\n  display: flex;\n  justify-content: center;\n}\n\n.indicator.primary {\n  height: 3px;\n}\n\n.pointer {\n  height: inherit;\n  display: block;\n  background-color: var(--md-sys-color-primary);\n}\n\n.indicator.primary .pointer {\n  border-radius: 3px 3px 0px 0px;\n  width: 40px;\n}\n\n.indicator:not(.primary) .pointer {\n  flex: 1;\n}\n\n:host([disabled]) {\n  pointer-events: none;\n}\n\n:host([disabled]) .content {\n  color: var(--md-sys-color-on-surface);\n  opacity: .38;\n}\n\n:host(:hover) .container {\n  background-color: var(--md-sys-color-primary);\n  opacity: var(--md-sys-state-hover-state-layer-opacity);\n}\n\n:host(:focus) .container {\n  background-color: var(--md-sys-color-primary);\n  opacity: var(--md-sys-state-focus-state-layer-opacity);\n}\n`;\n"]}

package/dist/ui/tabs/UiTabs.d.ts

@@ -0,0 +1,93 @@
+import { LitElement, nothing, TemplateResult } from "lit";
+import { StyleInfo } from "lit/directives/style-map.js";
+import UiTab from "./UiTab.js";
+import '../../define/ui/ui-icon-button.js';
+import '../../define/ui/ui-divider.js';
+import '../../define/ui/ui-icon.js';
+export type TabsPriority = 'primary' | 'secondary';
+export interface TabSelectionDetail {
+    item: UiTab;
+    index: number;
+    select: string | null;
+}
+/**
+ * Calculates value in percentages
+ * @param w Element width
+ * @param w0 Parent width
+ * @return The percentage of element's width relative to parent.
+ */
+export declare function calcPercent(w: number, w0: number): number;
+/**
+ * A container for tabs.
+ *
+ * @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: UiTab[];
+    activeItem: UiTab | null;
+    protected assignedElements: HTMLElement[] | null;
+    protected pointer: HTMLElement;
+    protected content: HTMLElement;
+    /**
+     * The priority of the tabs.
+     *
+     * @default primary
+     * @attribute
+     */
+    priority: TabsPriority;
+    /**
+     * If true, tabs are scrollable and the tab width is based on the label width.
+     * @attribute
+     */
+    scrollable?: boolean;
+    /**
+     * The value of the selected tab.
+     * This is matched with the `aria-controls` of the tab.
+     * @attribute
+     */
+    selected?: string;
+    /**
+     * The attribute on the `ui-tab` that indicates which value for `selected`
+     * corresponds to which tab.
+     *
+     * @default aria-controls
+     * @attribute
+     */
+    selectedAttribute: string;
+    protected pointerStyles?: StyleInfo;
+    protected contentScroll?: number;
+    protected indicated: boolean;
+    connectedCallback(): void;
+    protected updateItems(): Promise<void>;
+    /**
+     * @return Whether the given element is a list item element.
+     */
+    protected isTabItem(element: Element): element is UiTab;
+    protected isSelectable(element: UiTab): boolean;
+    protected ensureSelection(): void;
+    protected makeSelection(tab?: UiTab, focus?: boolean): void;
+    notifySelect(item: UiTab): void;
+    protected selectItem(tab: UiTab, focus?: boolean): void;
+    protected deselectItem(tab: UiTab): void;
+    protected positionPointer(tab: UiTab, old?: UiTab | null): Promise<void>;
+    protected moveAnimation?: Animation;
+    protected getPrimaryLeft(tab: UiTab): string;
+    protected getSecondaryLeft(tab: UiTab): string;
+    protected getPrimaryKeyframes(start: string, final: string): Keyframe[];
+    protected getSecondaryKeyframes(start: string, final: string): Keyframe[];
+    protected contentClickHandler(e: PointerEvent): void;
+    protected contentKeyDownHandler(e: KeyboardEvent): void;
+    protected activateFromEvent(e: Event): void;
+    protected handleScrollLeft(): void;
+    protected handleScrollRight(): void;
+    protected handleScroll(e: Event): void;
+    protected handleKeyDown(e: KeyboardEvent): void;
+    getPreviousItem(item: UiTab): UiTab;
+    getNextItem(item: UiTab): UiTab;
+    render(): TemplateResult;
+    protected renderSlot(): TemplateResult;
+    protected renderIndicator(): TemplateResult;
+    protected renderLeftScrollControl(): TemplateResult | typeof nothing;
+    protected rightScrollControl(): TemplateResult | typeof nothing;
+}
+//# sourceMappingURL=UiTabs.d.ts.map

package/dist/ui/tabs/UiTabs.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"UiTabs.d.ts","sourceRoot":"","sources":["../../../src/ui/tabs/UiTabs.ts"],"names":[],"mappings":"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"}