@api-client/ui 0.0.11 → 0.0.12

package/dist/ui/table/DataTable.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DataTable.d.ts","sourceRoot":"","sources":["../../../src/ui/table/DataTable.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,SAAS,EAAQ,cAAc,EAAE,MAAM,KAAK,CAAC;AAI3D,OAAO,+BAA+B,CAAC;AAEvC,MAAM,WAAW,iBAAiB;IAChC;;;OAGG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;OAEG;IACH,SAAS,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC;CAChC;AAED,MAAM,MAAM,aAAa,GAAG,MAAM,GAAG,cAAc,GAAG,cAAc,EAAE,CAAC;AAIvE,KAAK,YAAY,CAAC,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC,KAAK,cAAc,EAAE,CAAC;AACrD,KAAK,gBAAgB,CAAC,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC,KAAK,IAAI,CAAC;AAC7C,KAAK,cAAc,GAAG,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,EAAE,KAAK,IAAI,CAAC;AAMxD,MAAM,WAAW,YAAY;IAC3B;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;OAEG;IACH,IAAI,CAAC,EAAE;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,CAAA;KAAE,CAAC;IACpD;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,UAAU,YAAY;IACpB,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,MAAM,CAAC;CACd;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,qBAAa,SAAS,CAAC,CAAC;;IACtB,MAAM,KAAK,MAAM,IAAI,SAAS,CAgG7B;IAID,IAAI,KAAK,IAAI,SAAS,CAAC,CAAC,CAAC,GAAG,SAAS,CAEpC;IAED,IAAI,KAAK,CAAC,KAAK,EAAE,SAAS,CAAC,CAAC,CAAC,GAAG,SAAS,EAOxC;IAED,OAAO,EAAE,iBAAiB,CAAC;IAM3B;;;OAGG;IACH,QAAQ,EAAE,MAAM,EAAE,CAAM;IAExB;;;OAGG;IACH,SAAS,CAAC,OAAO,CAAC,EAAE,YAAY,CAAC;gBAErB,aAAa,EAAE,MAAM,SAAS,CAAC,CAAC,CAAC,EAAE,OAAO,GAAE,iBAAsB;IAS9E,gBAAgB,CAAC,IAAI,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,cAAc,EAAE,GAAG,IAAI;IAExE,gBAAgB,CAAC,IAAI,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,IAAI,GAAG,IAAI;IAE5D,gBAAgB,CAAC,IAAI,EAAE,MAAM,EAAE,QAAQ,EAAE,YAAY,CAAC,CAAC,CAAC,GAAG,IAAI;IAE/D,gBAAgB,CAAC,IAAI,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,GAAG,IAAI;IAErE,gBAAgB,CAAC,IAAI,EAAE,UAAU,EAAE,QAAQ,EAAE,gBAAgB,CAAC,CAAC,CAAC,GAAG,IAAI;IAEvE,gBAAgB,CAAC,IAAI,EAAE,QAAQ,EAAE,QAAQ,EAAE,cAAc,GAAG,IAAI;IAMhE;;;;;OAKG;IACH,MAAM,CAAC,OAAO,EAAE,aAAa,EAAE,OAAO,GAAE,YAAiB,GAAG,cAAc;IAU1E;;;;;OAKG;IACH,IAAI,CAAC,OAAO,EAAE,aAAa,EAAE,OAAO,GAAE,YAAiB,GAAG,cAAc;IAWxE,MAAM,IAAI,cAAc;IAwBxB,SAAS,CAAC,YAAY,CAAC,CAAC,EAAE,KAAK,GAAG,WAAW,GAAG,SAAS;IAezD,SAAS,CAAC,cAAc,CAAC,CAAC,EAAE,KAAK,GAAG,WAAW,GAAG,SAAS;IAY3D,SAAS,CAAC,qBAAqB,CAAC,CAAC,EAAE,KAAK,GAAG,YAAY;IAwCvD,SAAS,CAAC,gBAAgB,CAAC,CAAC,EAAE,KAAK,GAAG;QAAE,MAAM,EAAE,WAAW,CAAC;QAAC,GAAG,EAAE,WAAW,CAAA;KAAE,GAAG,SAAS;IAmB3F,SAAS,CAAC,WAAW,CAAC,CAAC,EAAE,KAAK,GAAG,IAAI;IAQrC,SAAS,CAAC,eAAe,CAAC,CAAC,EAAE,KAAK,GAAG,IAAI;IAkBzC,SAAS,CAAC,WAAW,CAAC,CAAC,EAAE,KAAK,GAAG,IAAI;IAgBrC,SAAS,CAAC,aAAa,CAAC,CAAC,EAAE,aAAa,GAAG,IAAI;IAiB/C,SAAS,CAAC,qBAAqB,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI;IASlD,SAAS,CAAC,oBAAoB,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI;IAYjD,SAAS,CAAC,cAAc,CAAC,KAAK,EAAE,WAAW,GAAG,IAAI;IAWlD,SAAS,CAAC,SAAS,CAAC,KAAK,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,GAAG,OAAO;IAqBpF,SAAS,CAAC,cAAc,CAAC,CAAC,EAAE,KAAK,GAAG,IAAI;IAgBxC,SAAS,CAAC,aAAa,CAAC,CAAC,EAAE,KAAK,GAAG,IAAI;IAgBvC,SAAS,CAAC,aAAa,CAAC,CAAC,EAAE,KAAK,GAAG,IAAI;IAgBvC,SAAS,CAAC,WAAW,CAAC,CAAC,EAAE,KAAK,GAAG,IAAI;IAgBrC,SAAS,CAAC,mBAAmB,CAAC,CAAC,EAAE,KAAK,GAAG,IAAI;IAqB7C,SAAS,CAAC,YAAY,IAAI,cAAc;IAWxC,SAAS,CAAC,UAAU,IAAI,cAAc;IAWtC,SAAS,CAAC,UAAU,CAAC,IAAI,EAAE,CAAC,GAAG,cAAc;IA2B7C,SAAS,CAAC,WAAW,IAAI,cAAc;IAWvC,SAAS,CAAC,cAAc,IAAI,cAAc,EAAE,GAAG,SAAS;IAexD,SAAS,CAAC,YAAY,CAAC,IAAI,EAAE,CAAC,GAAG,cAAc,EAAE,GAAG,SAAS;IAe7D,SAAS,CAAC,aAAa,IAAI,cAAc,GAAG,SAAS;IAerD,SAAS,CAAC,cAAc,IAAI,IAAI;IAahC,SAAS,CAAC,gBAAgB,CAAC,SAAS,EAAE,MAAM,GAAG,MAAM,EAAE,GAAG,IAAI;CAY/D"}
+{"version":3,"file":"DataTable.d.ts","sourceRoot":"","sources":["../../../src/ui/table/DataTable.ts"],"names":[],"mappings":"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"}

package/dist/ui/table/DataTable.js

@@ -158,6 +158,7 @@ export class DataTable {
         this.handleClick = this.handleClick.bind(this);
         this.handleKeyDown = this.handleKeyDown.bind(this);
         this.handleFocus = this.handleFocus.bind(this);
+        this.handleListScroll = this.handleListScroll.bind(this);
     }
     addEventListener(type, listener) {
         this.#listeners[type] = listener;
@@ -492,6 +493,14 @@ export class DataTable {
             this.handleMultiSelection(row.dataset.key);
         }
     }
+    handleListScroll(e) {
+        const list = e.target;
+        const { scrollTop, offsetHeight, scrollHeight } = list;
+        const bottom = scrollTop + offsetHeight >= scrollHeight - 20; // 20 is the offset which qualifies as the end. An arbitrary number.
+        if (bottom) {
+            this.dispatchScrollEnd();
+        }
+    }
     renderHeader() {
         const cells = this.dispatchHeader();
         return html `
@@ -508,7 +517,7 @@ export class DataTable {
         const contents = !!items && !!items.length ? items.map(item => this.renderItem(item)) : this.renderEmpty();
         const dbListener = active ? this.dblclickHandler : undefined;
         return html `
-    <div class="data-table-body" role="rowgroup" @dblclick="${dbListener}">
+    <div class="data-table-body" role="rowgroup" @dblclick="${dbListener}" @scroll="${{ handleEvent: this.handleListScroll, passive: true }}">
       ${contents}
     </div>`;
     }
@@ -620,5 +629,18 @@ export class DataTable {
             console.warn(e);
         }
     }
+    dispatchScrollEnd() {
+        const callback = this.#listeners.scrollend;
+        if (!callback) {
+            return;
+        }
+        try {
+            callback();
+        }
+        catch (e) {
+            // eslint-disable-next-line no-console
+            console.warn(e);
+        }
+    }
 }
 //# sourceMappingURL=DataTable.js.map

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' | 'scrollend';\n\ntype CellCallback<T> = (item: T) => TemplateResult[];\ntype ActivateCallback<T> = (item: T) => void;\ntype SelectCallback = (item: string | string[]) => void;\ntype Callback = () => void;\n\ntype DataEventsMap<T> = {\n  [key in DataEvents]?: Callback | 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    this.handleListScroll = this.handleListScroll.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: 'scrollend', listener: Callback): 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 handleListScroll(e: Event): void {\n    const list = e.target as HTMLElement;\n    const { scrollTop, offsetHeight, scrollHeight } = list;\n    const bottom = scrollTop + offsetHeight >= scrollHeight - 20; // 20 is the offset which qualifies as the end. An arbitrary number.\n    if (bottom) {\n      this.dispatchScrollEnd();\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}\" @scroll=\"${{ handleEvent: this.handleListScroll, passive: true }}\">\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  protected dispatchScrollEnd(): void {\n    const callback = this.#listeners.scrollend as Callback;\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"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@api-client/ui",
-  "version": "0.0.11",
+  "version": "0.0.12",
   "description": "UI for API Client.",
   "license": "CC-BY-2.0",
   "main": "dist/index.js",

package/src/bindings/base/StoreBindings.ts

@@ -129,11 +129,17 @@ export abstract class StoreBindings extends PlatformBindings {
 
   certificatesChannel = new BroadcastChannel(StoreBroadcast.certificates);
 
+  initialized = false;
+
   async initializeStore(): Promise<void> {
     // ...
   }
 
   async initialize(): Promise<void> {
+    if (this.initialized) {
+      return;
+    }
+    this.initialized = true;
     const target = document.body;
 
     window.addEventListener(EventTypes.Store.initEnvironment, this.handleInitializeEnvironment.bind(this));
@@ -156,6 +162,7 @@ export abstract class StoreBindings extends PlatformBindings {
     window.addEventListener(EventTypes.Store.File.delete, this.handleFileDelete.bind(this) as EventListener);
     window.addEventListener(EventTypes.Store.File.patchUsers, this.handleFilePatchUser.bind(this) as EventListener);
     window.addEventListener(EventTypes.Store.File.listUsers, this.handleListFileUsers.bind(this) as EventListener);
+    window.addEventListener(EventTypes.Store.File.breadcrumbs, this.handleFileBreadcrumbs.bind(this) as EventListener);
 
     // User
     window.addEventListener(EventTypes.Store.User.me, this.handlerMe.bind(this));
@@ -372,6 +379,11 @@ export abstract class StoreBindings extends PlatformBindings {
     event.detail.result = this.getStore().sdk.file.listUsers(this.space, event.detail.key);
   }
 
+  protected handleFileBreadcrumbs(event: CustomEvent<{ key: string, result: Promise<ContextListResult<FileBreadcrumb>> }>): void {
+    event.preventDefault();
+    event.detail.result = this.files.breadcrumbs(event.detail.key)
+    // this.getStore().sdk.file.breadcrumbs(this.space, event.detail.key);
+  }
 
   protected handlerMe(input: Event): void {
     const e = input as CustomEvent<{ result: Promise<IUser> }>;
@@ -822,10 +834,13 @@ export abstract class StoreBindings extends PlatformBindings {
   protected storeEventHandler(e: MessageEvent): void {
     const event = JSON.parse(e.data) as BroadcastEvent | BackendErrorEvent;
     if (event.type === 'error') {
-      // TODO: Report an error somehow
       throw new Error(event.cause);
     }
     if (event.space && event.space !== this.space) {
+      // we allow files here to support shared files.
+      if (event.path === RouteBuilder.files()) {
+        this.filesChannel.postMessage(event);
+      }
       return;
     }
     if (event.path === RouteBuilder.spaces()) {

package/src/define/store/file-picker.ts

@@ -0,0 +1,12 @@
+import { customElement } from "lit/decorators.js";
+import Element from "../../elements/store/FilePicker.element.js";
+
+@customElement('file-picker')
+export class FilePickerElement extends Element {
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'file-picker': Element;
+  }
+}

package/src/define/{files → store}/share-file.ts

@@ -1,6 +1,6 @@
 import { customElement } from 'lit/decorators.js';
-import Element from "../../elements/files/ShareFile.js";
-import styles from "../../elements/files/ShareFile.styles.js";
+import Element from "../../elements/store/ShareFile.element.js";
+import styles from "../../elements/store/ShareFile.styles.js";
 import dialogStyles from '../../ui/dialog/UiDialog.styles.js';
 
 @customElement('share-file')

package/src/elements/store/FilePicker.element.ts

@@ -0,0 +1,297 @@
+import { 
+  FolderKind, IFile, 
+  ListFileKind 
+} from "@api-client/core/build/browser.js";
+import { CSSResult, html, nothing, TemplateResult } from "lit";
+import { eventOptions, property, query, state } from "lit/decorators.js";
+import { classMap } from "lit/directives/class-map.js";
+import ApiElement from "../ApiElement.js";
+import styles from './FilePicker.styles.js';
+import { fileIcon } from "./FilesLib.js";
+import type UiList from "../../ui/list/UiList.js";
+import type { UiListSelection } from "../../ui/list/UiList.js";
+import { FileSystem } from "../../store/FileSystem.js";
+import '../../define/ui/ui-divider.js';
+import '../../define/ui/ui-button.js';
+import '../../define/ui/ui-icon-button.js';
+import '../../define/ui/ui-icon.js';
+import '../../define/ui/ui-list.js';
+import '../../define/ui/ui-list-item.js';
+import '../../define/ui/ui-progress.js';
+
+export interface FilePickerClosingReason {
+  /**
+   * Whether the picker was canceled.
+   */
+  canceled: boolean;
+  /**
+   * The file selected by the user. This is always and only selected when the `canceled` is false.
+   */
+  file?: IFile;
+}
+
+/**
+ * A portable element that allow to pick a file from the Store.
+ * 
+ * @fires close - When a file is selected or the user cancelled the dialog. The detail object is the picked file object. Note, this event bubbles.
+ * @fires querycomplete - When the page of results was loaded.
+ */
+export default class FilePicker extends ApiElement {
+  static override get styles(): CSSResult[] {
+    return styles;
+  }
+
+  /**
+   * The key of the parent folder to query for files.
+   * @attribute
+   */
+  @property({ type: String, hasChanged: () => false }) 
+  get folder(): string | undefined {
+    return this.fs.parent;
+  }
+
+  set folder(value: string | undefined) {
+    this.fs.selectFolder(value);
+  }
+
+  /**
+   * The page limit. Defaults to the store defaults.
+   * @attribute
+   */
+  @property({ type: Number, hasChanged: () => false }) 
+  set limit(value: number | undefined) {
+    this.fs.limit = value;
+  }
+
+  get limit(): number | undefined {
+    return this.fs.limit;
+  }
+
+  /**
+   * The timeout for the page query debouncer.
+   * @attribute
+   */
+  @property({ type: Number, hasChanged: () => false }) 
+  get debounceTimeout(): number {
+    return this.fs.debounceTimeout;
+  }
+
+  set debounceTimeout(value: number) {
+    this.fs.debounceTimeout = value || 0;
+  }
+
+  /**
+   * The list of file kinds to list.
+   * Folders are always included.
+   */
+  @property({ type: Array, hasChanged: () => false }) 
+  get kinds(): ListFileKind[] | undefined {
+    return this.fs.kinds;
+  }
+
+  set kinds(value: ListFileKind[] | undefined) {
+    this.fs.kinds = value;
+    this.fs.resetList();
+    this.fs.debounceQuery();
+  }
+
+  @query('ui-list') protected list?: UiList;
+
+  /**
+   * The currently selected in the picker file.
+   */
+  @state() protected selectedFile?: IFile;
+
+  @state() errorMessage?: string;
+
+  /**
+   * When set it does not query for files when attached to the DOM. 
+   * It will still query for files when attributes change. This is primarily used in tests.
+   * @attribute
+   */
+  @property({ type: Boolean }) manualQuery?: boolean;
+
+  get selectedKey(): string | undefined {
+    return this.selectedFile?.key;
+  }
+
+  fs = new FileSystem();
+
+  constructor() {
+    super();
+    this.fs.eventsTarget = this;
+    this.fs.addEventListener('change', () => this.requestUpdate());
+    this.fs.addEventListener('error', (e: Event) => {
+      const event = e as CustomEvent<string>;
+      this.errorMessage = event.detail;
+    });
+    this.fs.addEventListener('querycomplete', () => {
+      this.dispatchEvent(new Event('querycomplete'));
+    });
+    this.fs.addEventListener('delete', (e: Event) => {
+      const event = e as CustomEvent<string>;
+      if (this.selectedFile && this.selectedFile.key === event.detail) {
+        this.selectedFile = undefined;
+      }
+    });
+  }
+  
+  override connectedCallback(): void {
+    super.connectedCallback();
+    this.fs.observe();
+    if (!this.manualQuery) {
+      this.fs.debounceQuery();
+    }
+    if (!this.hasAttribute('tabindex')) {
+      this.setAttribute('tabindex', '0');
+    }
+  }
+  
+  override disconnectedCallback(): void {
+    super.disconnectedCallback();
+    this.fs.unobserve();
+  }
+
+  override focus(options?: FocusOptions | undefined): void {
+    const { list } = this;
+    if (list) {
+      list.focus(options);
+    }
+  }
+
+  protected handleFileSelect(e: CustomEvent<UiListSelection>): void {
+    // this prevents the dropdown list to close the UI.
+    e.preventDefault();
+    const file = this.fs.files[e.detail.index];
+    if (!file) {
+      return;
+    }
+    if (file.kind === FolderKind) {
+      this.fs.selectFolder(file.key);
+      this.selectedFile = undefined;
+      return;
+    }
+    this.selectedFile = file;
+  }
+
+  protected handleParentUp(): void {
+    this.fs.parentUp();
+    this.selectedFile = undefined;
+  }
+
+  protected notifyClose(canceled: boolean): void {
+    if (!canceled && !this.selectedFile) {
+      return;
+    }
+    const detail: FilePickerClosingReason = {
+      canceled,
+    };
+    if (!canceled) {
+      detail.file = this.selectedFile;
+    }
+    // this event bubbles so any dropdown on the way can close itself.
+    const e = new CustomEvent<FilePickerClosingReason>('close', {
+      bubbles: true,
+      cancelable: true,
+      composed: true,
+      detail,
+    });
+    this.dispatchEvent(e);
+  }
+
+  protected handleSelect(): void {
+    this.notifyClose(false);
+  }
+
+  protected handleCancel(): void {
+    this.notifyClose(true);
+  }
+
+  @eventOptions({ passive: true })
+  protected handleListScroll(e: Event): void {
+    const list = e.target as UiList;
+    if (this.fs.isListEnd(list)) {
+      this.fs.debounceQuery();
+    }
+  }
+
+  protected override render(): TemplateResult {
+    return html`
+    <div class="content">
+      ${this.renderHeader()}
+      <ui-divider></ui-divider>
+      ${this.renderFiles()}
+      ${this.errorMessage ? html`<p class="error">${this.errorMessage}</p>` : nothing}
+      <ui-divider></ui-divider>
+      ${this.renderActions()}
+    </div>
+    `;
+  }
+
+  protected renderHeader(): TemplateResult {
+    const { breadcrumbs = [], reading } = this.fs;
+    let content: TemplateResult;
+    let withIcon = false;
+    if (!breadcrumbs.length) {
+      content = html`<span class="title-large label">My files</span>`;
+    } else {
+      withIcon = true;
+      const [parent] = breadcrumbs;
+      content = html`
+        <ui-icon-button aria-label="Open parent folder" @click="${this.handleParentUp}" class="back-button">
+          <ui-icon role="presentation" icon="arrowBack"></ui-icon>
+        </ui-icon-button>
+        <span class="title-large label">${parent.name}</span>
+      `;
+    }
+    const classes = {
+      header: true,
+      withIcon,
+    }
+    return html`
+    <div class="${classMap(classes)}">
+      ${content}
+      ${reading ? html`<ui-progress indeterminate class="progress"></ui-progress>` : nothing}
+    </div>
+    `;
+  }
+
+  protected renderFiles(): TemplateResult {
+    const { files } = this.fs;
+    if (!files || !files.length) {
+      return this.renderEmptyList();
+    }
+    return html`
+    <ui-list class="list" role="menu" @select="${this.handleFileSelect}" selectActive @scroll="${this.handleListScroll}">
+      ${files.map(item => this.renderFileItem(item))}
+    </ui-list>
+    `;
+  }
+
+  protected renderEmptyList(): TemplateResult {
+    return html`
+    <p class="no-files body-large">No files in this view.</p>
+    `;
+  }
+
+  protected renderFileItem(item: IFile): TemplateResult {
+    const icon = fileIcon(item);
+    return html`
+    <ui-list-item role="menuitem" data-key="${item.key}" data-kind="${item.kind}">
+      ${icon ? html`<ui-icon icon="${icon}" class="file-icon"></ui-icon>` : nothing}
+      ${item.info.name || 'Unnamed file'}
+    </ui-list-item>
+    `;
+  }
+
+  protected renderActions(): TemplateResult {
+    const { selectedFile } = this;
+    const disableSelect = !selectedFile;
+    return html`
+    <div class="actions">
+      <ui-button type="text" @click="${this.handleCancel}" value="cancel">Cancel</ui-button>
+      <ui-button type="tonal" ?disabled="${disableSelect}" @click="${this.handleSelect}" value="select">Select</ui-button>
+    </div>
+    `;
+  }
+}