@api-client/ui 0.3.4 → 0.3.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -260,6 +260,40 @@ export declare abstract class DataTable<T extends object> extends LitElement {
260
260
  */
261
261
  protected createObserver(): void;
262
262
  protected revalidateSelection(): void;
263
+ /**
264
+ * Notifies about the selection change.
265
+ *
266
+ * This method dispatches a `select` event with the currently selected items.
267
+ *
268
+ * @param selectedItems - The array of currently selected items.
269
+ */
270
+ protected notifySelect(selectedItems: T[]): void;
271
+ /**
272
+ * Notifies about the scroll end event.
273
+ *
274
+ * This method dispatches a `scrollend` event when the user scrolls to the bottom of the table.
275
+ * It is typically used in conjunction with the `overflow` property to implement infinite scrolling.
276
+ */
277
+ protected notifyScrollEnd(): void;
278
+ /**
279
+ * Notifies about the activation of a row.
280
+ *
281
+ * This method dispatches an `activate` event with the activated item.
282
+ * It is typically used when a row is double-clicked or when the Enter/Space key is pressed while focused on a row.
283
+ *
284
+ * @param item - The data item that was activated.
285
+ */
286
+ protected notifyActivate(item: T): void;
287
+ /**
288
+ * Notifies about the sorting action.
289
+ *
290
+ * This method dispatches a `sort` event with the column name and sort direction.
291
+ * It is typically used when a sortable header cell is clicked.
292
+ *
293
+ * @param column - The name of the column being sorted.
294
+ * @param direction - The sort direction, either "asc" (ascending) or "desc" (descending).
295
+ */
296
+ protected notifySort(column: string, direction: 'asc' | 'desc'): void;
263
297
  /**
264
298
  * @internal
265
299
  * @description Handles the intersection of the sentinel element with the viewport.
@@ -1 +1 @@
1
- {"version":3,"file":"DataTable.d.ts","sourceRoot":"","sources":["../../../../src/elements/data-table/DataTable.ts"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"DataTable.d.ts","sourceRoot":"","sources":["../../../../src/elements/data-table/DataTable.ts"],"names":[],"mappings":"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"}
@@ -4,12 +4,12 @@ import { html, LitElement, nothing } from 'lit';
4
4
  import { property, state } from 'lit/decorators.js';
5
5
  import { classMap } from 'lit/directives/class-map.js';
6
6
  import { ref, createRef } from 'lit/directives/ref.js';
7
+ import { ifDefined } from 'lit/directives/if-defined.js';
7
8
  import { dataAttr } from '../../directives/data-attr.js';
8
9
  import '@material/web/icon/icon.js';
9
10
  import '@material/web/menu/menu.js';
10
11
  import '@material/web/menu/menu-item.js';
11
12
  import '@material/web/focus/md-focus-ring.js';
12
- import { ifDefined } from 'lit/directives/if-defined.js';
13
13
  /**
14
14
  * A versatile and accessible data table web component.
15
15
  *
@@ -367,11 +367,56 @@ let DataTable = (() => {
367
367
  const filteredSelectedItems = selectedItems.filter((selectedItem) => items.value.some((item) => item === selectedItem));
368
368
  if (filteredSelectedItems.length !== selectedItems.length) {
369
369
  this.selectedItems = filteredSelectedItems;
370
- this.dispatchEvent(new CustomEvent('select', {
371
- detail: { selectedItems: this.selectedItems },
372
- }));
370
+ this.notifySelect(filteredSelectedItems);
373
371
  }
374
372
  }
373
+ /**
374
+ * Notifies about the selection change.
375
+ *
376
+ * This method dispatches a `select` event with the currently selected items.
377
+ *
378
+ * @param selectedItems - The array of currently selected items.
379
+ */
380
+ notifySelect(selectedItems) {
381
+ this.dispatchEvent(new CustomEvent('select', { detail: { selectedItems } }));
382
+ }
383
+ /**
384
+ * Notifies about the scroll end event.
385
+ *
386
+ * This method dispatches a `scrollend` event when the user scrolls to the bottom of the table.
387
+ * It is typically used in conjunction with the `overflow` property to implement infinite scrolling.
388
+ */
389
+ notifyScrollEnd() {
390
+ this.dispatchEvent(new CustomEvent('scrollend'));
391
+ }
392
+ /**
393
+ * Notifies about the activation of a row.
394
+ *
395
+ * This method dispatches an `activate` event with the activated item.
396
+ * It is typically used when a row is double-clicked or when the Enter/Space key is pressed while focused on a row.
397
+ *
398
+ * @param item - The data item that was activated.
399
+ */
400
+ notifyActivate(item) {
401
+ this.dispatchEvent(new CustomEvent('activate', { detail: item }));
402
+ }
403
+ /**
404
+ * Notifies about the sorting action.
405
+ *
406
+ * This method dispatches a `sort` event with the column name and sort direction.
407
+ * It is typically used when a sortable header cell is clicked.
408
+ *
409
+ * @param column - The name of the column being sorted.
410
+ * @param direction - The sort direction, either "asc" (ascending) or "desc" (descending).
411
+ */
412
+ notifySort(column, direction) {
413
+ this.dispatchEvent(new CustomEvent('sort', {
414
+ detail: {
415
+ column,
416
+ direction,
417
+ },
418
+ }));
419
+ }
375
420
  /**
376
421
  * @internal
377
422
  * @description Handles the intersection of the sentinel element with the viewport.
@@ -384,7 +429,7 @@ let DataTable = (() => {
384
429
  */
385
430
  handleIntersection = (__runInitializers(this, _position_extraInitializers), (entries) => {
386
431
  if (entries.some((entry) => entry.isIntersecting)) {
387
- this.dispatchEvent(new CustomEvent('scrollend'));
432
+ this.notifyScrollEnd();
388
433
  }
389
434
  });
390
435
  /**
@@ -686,7 +731,7 @@ let DataTable = (() => {
686
731
  const endIndex = Math.max(this.lastSelectedIndex, clickedIndex);
687
732
  const newSelectedItems = this.items.value.slice(startIndex, endIndex + 1);
688
733
  this.selectedItems = newSelectedItems;
689
- this.dispatchEvent(new CustomEvent('select', { detail: { selectedItems: this.selectedItems } }));
734
+ this.notifySelect(newSelectedItems);
690
735
  }
691
736
  /**
692
737
  * @internal
@@ -710,7 +755,7 @@ let DataTable = (() => {
710
755
  if (!item) {
711
756
  return;
712
757
  }
713
- this.dispatchEvent(new CustomEvent('activate', { detail: item }));
758
+ this.notifyActivate(item);
714
759
  }
715
760
  /**
716
761
  * @internal
@@ -733,12 +778,7 @@ let DataTable = (() => {
733
778
  this.sort = sort;
734
779
  this.sortDirection = 'asc';
735
780
  }
736
- this.dispatchEvent(new CustomEvent('sort', {
737
- detail: {
738
- column: this.sort,
739
- direction: this.sortDirection,
740
- },
741
- }));
781
+ this.notifySort(this.sort, this.sortDirection);
742
782
  }
743
783
  /**
744
784
  * @public
@@ -780,7 +820,7 @@ let DataTable = (() => {
780
820
  this.selectedItems = this.selectedItems.filter((i) => i !== item);
781
821
  }
782
822
  }
783
- this.dispatchEvent(new CustomEvent('select', { detail: { selectedItems: this.selectedItems } }));
823
+ this.notifySelect(this.selectedItems);
784
824
  }
785
825
  /**
786
826
  * @internal
@@ -1 +1 @@
1
- {"version":3,"file":"DataTable.js","sourceRoot":"","sources":["../../../../src/elements/data-table/DataTable.ts"],"names":[],"mappings":"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","sourcesContent":["/* eslint-disable max-len */\nimport { html, LitElement, nothing, PropertyValues, TemplateResult } from 'lit'\nimport { property, state } from 'lit/decorators.js'\nimport { classMap } from 'lit/directives/class-map.js'\nimport { ref, createRef } from 'lit/directives/ref.js'\nimport { dataAttr } from '../../directives/data-attr.js'\nimport { LiveData } from '../../reactive/LiveData.js'\n\nimport '@material/web/icon/icon.js'\nimport '@material/web/menu/menu.js'\nimport '@material/web/menu/menu-item.js'\nimport '@material/web/focus/md-focus-ring.js'\nimport { ifDefined } from 'lit/directives/if-defined.js'\n\n/**\n * Options for rendering a table cell.\n */\nexport interface CellRenderOptions {\n /**\n * CSS classes to apply to the cell.\n */\n classes?: string[]\n /**\n * Data attributes to add to the cell (e.g., `data-id=\"my-id\"`).\n */\n data?: Record<string, string | number | boolean>\n /**\n * The value of the aria-label to render on the cell.\n */\n ariaLabel?: string\n /**\n * Used with interactive elements within the cell.\n * The content of the cell should have exactly one element\n * with the `tabindex=-1`. The table will automatically\n * focus on that element when activated.\n */\n delegateFocus?: boolean\n /**\n * Used for accessibility. Should be set on the cell that represents\n * the name for the row, like, a person name or a file name.\n */\n isPrimary?: boolean\n}\n\n/**\n * Options for rendering a table header cell. Extends CellRenderOptions.\n */\nexport interface HeaderCellRenderOptions extends CellRenderOptions {\n /**\n * The name of the sort property.\n */\n sort?: string\n}\n\nexport interface CellPosition {\n /**\n * The index of the selected row\n */\n row: number\n /**\n * The index of the selected cell\n */\n col: number\n\n /**\n * Whether the logic should ignore setting up focus.\n * This is used when tracking cell selection when using a pointer device.\n */\n ignoreFocus?: boolean\n}\n\nexport interface EventCellInfo {\n /**\n * The cell element.\n */\n cell: HTMLElement\n /**\n * The column index\n */\n col: number\n /**\n * The **table** row index (not items)\n */\n row: number\n}\n\n/**\n * A versatile and accessible data table web component.\n *\n * The `DataTable` component provides a highly customizable and accessible way to display tabular data.\n * It offers features such as:\n *\n * - **Accessibility:** Built with ARIA roles and attributes for screen reader compatibility and keyboard navigation.\n * - **Customizable Cells:** Allows complete control over the content and rendering of each cell in the table.\n * - **Header Customization:** Provides flexibility in defining and rendering table headers, including sorting.\n * - **Selection:** Supports single, multiple, or no selection of rows.\n * - **Activation:** Enables the activation of rows (e.g., via double-click or Enter/Space key).\n * - **Infinite Scrolling:** Supports \"load more\" functionality (infinite scroll) using a sentinel element.\n * - **Sorting:** Allows sorting of data by clicking on sortable header cells.\n * - **Keyboard Navigation:** Full keyboard support for navigating through the table.\n * - **Empty State:** Customizable content to display when the table has no data.\n * - **Focus Management:** Properly manages focus for both keyboard and pointer interactions.\n *\n * @slot empty - Optional. Content to display when the table is empty (i.e., `items` is an empty array).\n * Defaults to a message saying \"No data to display.\"\n *\n * @fires select - Dispatched when the selection changes.\n * - `detail`: An object with a `selectedItems` property, containing an array of the currently selected items.\n * - Example: `{ selectedItems: [item1, item2] }`\n *\n * @fires activate - Dispatched when a row is activated (e.g., double-clicked or Enter/Space pressed).\n * - `detail`: The data item that was activated.\n * - Example: `item1`\n *\n * @fires scrollend - Dispatched when the user scrolls to the bottom of the table (when the `overflow` property is true).\n * - No event detail.\n *\n * @fires sort - Dispatched when the user clicks on a sortable header to change the sorting.\n * - `detail`: An object with `column` and `direction` properties.\n * - `column`: The name of the column being sorted.\n * - `direction`: The sort direction, either \"asc\" (ascending) or \"desc\" (descending).\n * - Example: `{ column: \"name\", direction: \"asc\" }`\n *\n * @csspart table - The underlying `<table>` element.\n * @csspart cell - Individual `<td>` and `<th>` elements.\n * @csspart header-cell - Individual `<th>` elements.\n *\n * @cssprop --md-focus-ring-shape-start-start - The start-start corner shape for the focus ring.\n * @cssprop --md-focus-ring-shape-start-end - The start-end corner shape for the focus ring.\n * @cssprop --md-focus-ring-shape-end-end - The end-end corner shape for the focus ring.\n * @cssprop --md-focus-ring-shape-end-start - The end-start corner shape for the focus ring.\n * @cssprop --md-sys-typescale-label-large-font - The font family for label large.\n * @cssprop --md-sys-typescale-label-large-size - The font size for label large.\n * @cssprop --md-sys-typescale-label-large-tracking - The letter spacing for label large.\n * @cssprop --md-sys-typescale-label-large-height - The line height for label large.\n * @cssprop --md-sys-typescale-label-large-weight - The font weight for label large.\n * @cssprop --md-sys-color-outline-variant - The outline variant color.\n * @cssprop --md-sys-color-secondary-container - The secondary container color.\n * @cssprop --md-icon-size - The size of the icons.\n * @cssprop --md-sys-typescale-title-small-font - The font family for title small.\n * @cssprop --md-sys-typescale-title-small-weight - The font weight for title small.\n * @cssprop --md-sys-typescale-title-small-size - The font size for title small.\n * @cssprop --md-sys-typescale-title-small-tracking - The letter spacing for title small.\n * @cssprop --md-sys-typescale-title-small-height - The line height for title small.\n * @cssprop --md-sys-typescale-body-medium-font - The font family for body medium.\n * @cssprop --md-sys-typescale-body-medium-weight - The font weight for body medium.\n * @cssprop --md-sys-typescale-body-medium-size - The font size for body medium.\n * @cssprop --md-sys-typescale-body-medium-tracking - The letter spacing for body medium.\n * @cssprop --md-sys-typescale-body-medium-height - The line height for body medium.\n *\n * @typeParam T The type of data items in the table.\n *\n * @example\n * ```html\n * <data-table\n * .items=\"${myItems}\"\n * selection=\"multi\"\n * @select=\"${handleSelect}\"\n * @activate=\"${handleActivate}\"\n * @scrollend=\"${handleScrollEnd}\"\n * @sort=\"${handleSort}\"\n * overflow\n * >\n * <p slot=\"empty\">No items to display at this time.</p>\n * </data-table>\n * ```\n *\n * @example\n * ```typescript\n * // Inside a subclass of DataTable.\n * // Rendering a name cell.\n * #nameCell(item: MyItem, row: number, col: number): TemplateResult {\n * return this.renderCell(item.name, row, col, { isPrimary: true });\n * }\n *\n * // Rendering a header cell.\n * override renderHeader(): TemplateResult[] {\n * return [\n * this.renderHeaderCell('Name', 0, { sort: 'name' }),\n * this.renderHeaderCell('Value', 1, { sort: 'value' }),\n * ];\n * }\n * ```\n */\nexport abstract class DataTable<T extends object> extends LitElement {\n /**\n * The data items to display in the table.\n */\n @property({ type: Object }) accessor items: LiveData<T[]> | undefined\n\n /**\n * The selection mode. Can be \"none\", \"single\", or \"multi\".\n * - `none`: No selection is allowed.\n * - `single`: Only one item can be selected at a time.\n * - `multi`: Multiple items can be selected.\n * @attribute\n * @default \"none\"\n */\n @property({ type: String, reflect: true }) accessor selection: 'none' | 'single' | 'multi' = 'none'\n\n /**\n * The currently selected items.\n * @default []\n */\n @property({ type: Array }) accessor selectedItems: T[] = []\n\n /**\n * The ARIA label for the table. Used for accessibility.\n * @attribute\n * @default \"Data table\"\n */\n @property({ type: String, reflect: true }) override accessor ariaLabel = 'Data table'\n\n /**\n * Enables double-click and Enter/Space key activation of table items.\n * When `true`, items can be activated by:\n * - Double-clicking the item.\n * - Focusing on the item and pressing Enter or Space.\n * The `activate` event is dispatched when an item is activated.\n * @attribute\n * @default false\n */\n @property({ type: Boolean }) accessor active = false\n\n /**\n * Enables the \"load more\" functionality when the user scrolls to the bottom of the table.\n * When `true`, a sentinel element is added to the bottom of the table. When the sentinel\n * becomes visible, the `scrollend` event is dispatched.\n * This is commonly used for infinite scrolling or lazy loading of data.\n * @attribute\n * @default false\n */\n @property({ type: Boolean, reflect: true }) accessor overflow = false\n\n /**\n * The name of the property to sort the table by. If set, the table will\n * automatically indicate the sortable header.\n * @attribute\n * @default undefined\n */\n @property({ type: String }) accessor sort: string | undefined\n\n /**\n * The direction of the sort. Can be \"asc\" (ascending) or \"desc\" (descending).\n * If `sort` is set, this property will be used to determine the sort direction.\n * @attribute\n * @default undefined\n */\n @property({ type: String }) accessor sortDirection: 'asc' | 'desc' | undefined\n\n protected lastSelectedIndex = -1\n\n protected observer?: IntersectionObserver\n\n protected sentinel = createRef<HTMLElement>()\n\n /**\n * The current focus position.\n * It is used to support keyboard navigation.\n *\n * Initially we always allow to focus on the first cell, which\n * should be the first header cell. The keyboard navigation will\n * take over.\n */\n @state() accessor position: CellPosition = { row: 0, col: 0 }\n\n constructor() {\n super()\n this.handleLiveData = this.handleLiveData.bind(this)\n }\n\n override connectedCallback(): void {\n super.connectedCallback()\n if (this.overflow) {\n // Only create the observer if overflow is enabled\n this.createObserver()\n }\n }\n\n override disconnectedCallback(): void {\n super.disconnectedCallback()\n this.observer?.disconnect()\n this.observer = undefined\n }\n\n override firstUpdated(): void {\n if (this.overflow) {\n this.createObserver()\n }\n }\n\n protected override willUpdate(cp: PropertyValues<this>): void {\n if (cp.has('items')) {\n this.lastSelectedIndex = -1\n this.revalidateSelection()\n }\n }\n\n protected override updated(cp: PropertyValues<this>): void {\n if (cp.has('position')) {\n const { row, col, ignoreFocus = false } = this.position\n if (!ignoreFocus) {\n const cell = this.shadowRoot?.querySelector(`[data-row=\"${row}\"][data-col=\"${col}\"]`) as HTMLElement | null\n if (cell) {\n cell.focus()\n }\n }\n }\n if (cp.has('items')) {\n const old = cp.get('items')\n if (old) {\n old.removeEventListener('update', this.handleLiveData)\n }\n if (this.items) {\n this.items.addEventListener('update', this.handleLiveData)\n }\n }\n }\n\n handleLiveData(): void {\n this.requestUpdate()\n }\n\n /**\n * @internal\n * @description Creates and configures an `IntersectionObserver` to detect when the sentinel element is visible,\n * indicating the user has scrolled to the bottom of the table.\n *\n * This method sets up the observer to watch the sentinel element. When the sentinel intersects with the component's viewport,\n * it triggers the `scrollend` event.\n *\n * This function is used when `overflow` is set to true.\n *\n * @returns void\n */\n protected createObserver(): void {\n const { sentinel } = this\n if (!sentinel.value) {\n return\n }\n\n const options: IntersectionObserverInit = {\n root: this, // Observe within the component's viewport\n rootMargin: '0px', // No margin\n threshold: 0.0, // Trigger when the sentinel is 0% visible (at the very bottom)\n }\n\n this.observer = new IntersectionObserver(this.handleIntersection, options)\n this.observer.observe(sentinel.value) // Observe the sentinel.\n }\n\n protected revalidateSelection(): void {\n const { items, selectedItems = [] } = this\n if (!items || selectedItems.length === 0) {\n return\n }\n const filteredSelectedItems = selectedItems.filter((selectedItem) =>\n items.value.some((item) => item === selectedItem)\n )\n if (filteredSelectedItems.length !== selectedItems.length) {\n this.selectedItems = filteredSelectedItems\n this.dispatchEvent(\n new CustomEvent('select', {\n detail: { selectedItems: this.selectedItems },\n })\n )\n }\n }\n\n /**\n * @internal\n * @description Handles the intersection of the sentinel element with the viewport.\n *\n * This method is the callback function for the `IntersectionObserver`. When the sentinel becomes visible,\n * it dispatches the `scrollend` event to signal that the user has reached the bottom of the table.\n *\n * @param entries - An array of IntersectionObserverEntry objects.\n * @returns void\n */\n handleIntersection: IntersectionObserverCallback = (entries): void => {\n if (entries.some((entry) => entry.isIntersecting)) {\n this.dispatchEvent(new CustomEvent('scrollend'))\n }\n }\n\n /**\n * @internal\n * @description Extracts information about a cell from an event.\n *\n * This method analyzes the event's composed path to identify the clicked or focused cell (either `<td>` or `<th>`).\n * It returns the cell element, its column index, and its row index.\n * It is also capable of detecting if the user focused on an interactive element within a cell.\n *\n * @param e - The event object (typically a MouseEvent or KeyboardEvent).\n * @returns An object containing the cell element, column index, and row index, or `undefined` if the target is not a cell.\n */\n protected infoFromEvent(e: Event): EventCellInfo | undefined {\n const path = e.composedPath()\n let cell: HTMLElement | undefined\n for (const current of path.values()) {\n const element = current as Element\n if (element.nodeType !== Node.ELEMENT_NODE) {\n continue\n }\n const isTarget = ['TD', 'TH'].includes(element.nodeName)\n if (!isTarget && element.hasAttribute('tabindex')) {\n // It means that the user focusing on an interactive element\n // within a cell and we should abandon whatever we do right now.\n return\n }\n if (isTarget) {\n cell = element as HTMLElement\n break\n }\n }\n if (!cell) {\n return\n }\n const col = Number(cell.dataset.col)\n const row = Number(cell.dataset.row)\n if (isNaN(col) || isNaN(row)) {\n return\n }\n return { cell, col, row }\n }\n\n /**\n * @internal\n * @description Gets the number of columns and rows of the table.\n *\n * @returns An object with `cols` and `rows` properties indicating the number of columns and rows.\n */\n protected getSize(): { cols: number; rows: number } {\n const result = { cols: 0, rows: 0 }\n const table = this.shadowRoot?.querySelector('table')\n if (!table) {\n return result\n }\n const row = table.querySelector('tr')\n if (!row) {\n return result\n }\n const columns = row.querySelectorAll('th, td')\n result.cols = columns.length ? columns.length - 1 : 0\n const rows = table.rows\n result.rows = rows.length ? rows.length - 1 : 0\n return result\n }\n\n /**\n * @internal\n * @description Get the element containing the cell data.\n *\n * @param col - The column index of the cell.\n * @param row - The row index of the cell.\n * @returns An object with the cell element and `delegateFocus` flag, or `undefined` if the cell does not exist.\n */\n protected getCellInfo(col: number, row: number): { cell: HTMLElement; delegateFocus: boolean } | undefined {\n const cell = this.shadowRoot?.querySelector(`[data-col=\"${col}\"][data-row=\"${row}\"]`) as HTMLElement | null\n if (!cell) {\n return\n }\n const delegateFocus = cell.dataset.delegate === 'true'\n return { cell, delegateFocus }\n }\n\n /**\n * @internal\n * @description Delegates the focus to a specific interactive element within a cell.\n *\n * This method is used when the cell is configured to handle its own focus management (i.e., `delegateFocus` is `true`).\n *\n * @param parent - The parent element (the cell) containing the interactive element.\n * @returns void\n */\n protected delegateFocus(parent: HTMLElement): void {\n const delegate = parent.querySelector('[tabindex]') as HTMLElement | null\n if (delegate) {\n delegate.focus()\n }\n }\n\n /**\n * @internal\n * @description Moves the focus to the specified cell.\n *\n * This method updates the component's internal `position` state and then focuses on the corresponding cell.\n * If the cell has the `delegateFocus` property, it delegates the focus to the first interactive element inside of the cell.\n *\n * @param col - The column index of the cell to focus on.\n * @param row - The row index of the cell to focus on.\n * @returns void\n */\n protected moveFocusTo(col: number, row: number): void {\n const cell = this.getCellInfo(col, row)\n if (!cell) {\n return\n }\n this.position = { row, col }\n if (cell.delegateFocus) {\n this.position.ignoreFocus = true\n this.delegateFocus(cell.cell)\n }\n }\n\n /**\n * @internal\n * @description Handles keyboard navigation within the table.\n *\n * This method processes keyboard events to move the focus between cells. It supports arrow keys, Page Up/Down, Home/End, Enter and Space.\n * - ArrowRight: Moves focus to the next cell to the right.\n * - ArrowLeft: Moves focus to the next cell to the left.\n * - ArrowDown: Moves focus to the cell below.\n * - ArrowUp: Moves focus to the cell above.\n * - PageUp: Moves focus to the first row.\n * - PageDown: Moves focus to the last row.\n * - Home: Moves focus to the first cell of the current row (Ctrl+Home moves to the first cell of the first row).\n * - End: Moves focus to the last cell of the current row (Ctrl+End moves to the last cell of the last row).\n * - Enter: Activates the current row.\n * - Space: Manages selection.\n *\n * @param e - The KeyboardEvent object.\n * @returns void\n */\n protected handleKeyDown(e: KeyboardEvent) {\n if (e.defaultPrevented) {\n return\n }\n const info = this.infoFromEvent(e)\n if (!info) {\n // This also makes sure that when we are focusing on an element\n // within a `delegateFocus` cell, we won't interfere with its events.\n return\n }\n const { code } = e\n const { position } = this\n const size = this.getSize()\n if (code === 'ArrowRight') {\n e.preventDefault()\n if (position.col < size.cols) {\n this.moveFocusTo(position.col + 1, position.row)\n }\n } else if (code === 'ArrowLeft') {\n e.preventDefault()\n if (position.col > 0) {\n this.moveFocusTo(position.col - 1, position.row)\n }\n } else if (code === 'ArrowDown') {\n e.preventDefault()\n if (position.row < size.rows) {\n this.moveFocusTo(position.col, position.row + 1)\n }\n } else if (code === 'ArrowUp') {\n e.preventDefault()\n if (position.row > 0) {\n this.moveFocusTo(position.col, position.row - 1)\n }\n } else if (code === 'PageUp') {\n e.preventDefault()\n if (position.row > 1) {\n this.moveFocusTo(position.col, 1)\n }\n } else if (code === 'PageDown') {\n e.preventDefault()\n if (position.row < size.rows) {\n this.moveFocusTo(position.col, size.rows)\n }\n } else if (code === 'Home') {\n e.preventDefault()\n if (!e.ctrlKey && position.col > 0) {\n this.moveFocusTo(0, position.row)\n } else if (e.ctrlKey && (position.row > 1 || position.col > 0)) {\n this.moveFocusTo(0, 1)\n }\n } else if (code === 'End') {\n e.preventDefault()\n if (!e.ctrlKey && position.col < size.cols) {\n this.moveFocusTo(size.cols, position.row)\n } else if (e.ctrlKey && position.row < size.rows) {\n this.moveFocusTo(size.cols, size.rows)\n }\n } else if (code === 'Enter') {\n e.preventDefault()\n this.activateFromCellInfo(info)\n } else if (code === 'Space') {\n e.preventDefault()\n this.manageSelectionFromEvent(info, e)\n }\n }\n\n /**\n * @internal\n * @description Handles mouse click events on the table.\n *\n * @param e - The MouseEvent object.\n * @returns void\n */\n protected handleClick(e: MouseEvent): void {\n if (e.detail === 3) {\n return\n }\n const info = this.infoFromEvent(e)\n if (!info) {\n return\n }\n if (e.detail === 2) {\n this.activateFromCellInfo(info)\n } else {\n this.manageSelectionFromEvent(info, e)\n }\n }\n\n /**\n * @internal\n * @description Manages the selection state based on a mouse or keyboard event.\n *\n * This method determines the row and column from the event target and updates the `selectedItems` array accordingly.\n * It supports single, multiple and no selection based on the `selection` property. It also supports shift-click.\n *\n * @param info - The cell info.\n * @param e - The MouseEvent or KeyboardEvent object.\n * @returns void\n */\n protected manageSelectionFromEvent(info: EventCellInfo, e: MouseEvent | KeyboardEvent): void {\n if (!this.items) {\n return\n }\n const { row, col } = info\n const index = row - 1\n if (info.row === 0) {\n // Handle sort.\n this.sortFrom(info.cell)\n this.position = { row, col }\n return\n }\n const item = this.items.value[index]\n if (!item) {\n return\n }\n\n const isMultiSelect = this.selection === 'multi'\n if (isMultiSelect && (e.metaKey || e.ctrlKey)) {\n this.toggleSelection(item, 'add')\n } else if (isMultiSelect && e.shiftKey) {\n this.handleShiftClick(index, item)\n } else {\n this.toggleSelection(item, 'replace')\n this.lastSelectedIndex = index\n }\n // This won't cause the focus ring to be rendered because the cell\n // won't hey the `tabindex=0`, which is OK with pointer device navigation,\n // but it will keep track of the last cell in case the keyboard navigation starts.\n this.position = { row, col }\n }\n\n /**\n * @internal\n * @description Handles shift-click for range selection.\n *\n * When shift-clicking a row, it will select all the items between the last selected item and the clicked item.\n *\n * @param clickedIndex - The index of the clicked item.\n * @param item - The clicked item.\n * @returns void\n */\n protected handleShiftClick(clickedIndex: number, item: T) {\n if (!this.items) {\n return\n }\n if (this.lastSelectedIndex === -1) {\n // If no previous selection, just select the clicked item.\n this.toggleSelection(item)\n this.lastSelectedIndex = clickedIndex\n return\n }\n const startIndex = Math.min(this.lastSelectedIndex, clickedIndex)\n const endIndex = Math.max(this.lastSelectedIndex, clickedIndex)\n const newSelectedItems = this.items.value.slice(startIndex, endIndex + 1)\n this.selectedItems = newSelectedItems as T[]\n this.dispatchEvent(new CustomEvent('select', { detail: { selectedItems: this.selectedItems } }))\n }\n\n /**\n * @internal\n * @description Activates the row associated with the given event.\n *\n * This method is called when a row is double-clicked or when the Enter/Space key is pressed while a row is focused.\n *\n * @param e - The Event object.\n * @returns void\n */\n protected activateFromCellInfo(info: EventCellInfo): void {\n if (!this.items) {\n return\n }\n if (info.row === 0) {\n // Handle sort.\n this.sortFrom(info.cell)\n return\n }\n const item = this.items.value[info.row - 1]\n if (!item) {\n return\n }\n this.dispatchEvent(new CustomEvent('activate', { detail: item }))\n }\n\n /**\n * @internal\n * @description Handles sorting logic based on the clicked column header.\n *\n * This method updates the `sort` and `sortDirection` properties and dispatches the `sort` event.\n *\n * @param column - The header cell element.\n * @returns void\n */\n protected sortFrom(column: HTMLElement): void {\n const sort = column.dataset.sort\n if (!sort) {\n return\n }\n if (this.sort === sort) {\n this.sortDirection = this.sortDirection === 'asc' ? 'desc' : 'asc'\n } else {\n this.sort = sort\n this.sortDirection = 'asc'\n }\n this.dispatchEvent(\n new CustomEvent('sort', {\n detail: {\n column: this.sort,\n direction: this.sortDirection,\n },\n })\n )\n }\n\n /**\n * @public\n * @description Checks if an item is currently selected.\n *\n * @param item - The item to check.\n * @returns `true` if the item is selected, `false` otherwise.\n */\n isSelected(item: T): boolean {\n return this.selectedItems.includes(item)\n }\n\n /**\n * @public\n * @description Toggles the selection state of an item.\n *\n * This method adds or removes an item from the `selectedItems` array.\n *\n * @param item - The item to toggle selection for.\n * @param mode - The selection mode, either 'replace' or 'add' (defaults to 'replace').\n * @returns void\n */\n toggleSelection(item: T, mode: 'replace' | 'add' = 'replace') {\n if (this.selection === 'none') {\n return\n }\n\n if (this.selection === 'single') {\n this.selectedItems = [item]\n } else {\n // multi-select\n const index = this.selectedItems.indexOf(item)\n if (mode === 'replace') {\n this.selectedItems = [item]\n } else if (index === -1) {\n this.selectedItems = [...this.selectedItems, item]\n } else {\n this.selectedItems = this.selectedItems.filter((i) => i !== item)\n }\n }\n\n this.dispatchEvent(new CustomEvent('select', { detail: { selectedItems: this.selectedItems } }))\n }\n\n /**\n * @internal\n * @description Renders the table.\n *\n * @returns A `TemplateResult` for rendering.\n */\n override render(): TemplateResult {\n if (!this.items || !this.items.value.length) {\n return this.renderEmpty()\n }\n const isMulti = this.selection === 'multi'\n return html`\n <table\n part=\"table\"\n role=\"grid\"\n aria-multiselectable=\"${ifDefined(isMulti ? 'true' : undefined)}\"\n aria-label=\"${this.ariaLabel}\"\n @keydown=\"${this.handleKeyDown}\"\n @click=\"${this.handleClick}\"\n >\n <thead>\n <tr role=\"row\">\n ${this.renderHeader()}\n </tr>\n </thead>\n <tbody>\n ${this.items.value.map((item, index) => this.renderRow(item, index))}\n </tbody>\n </table>\n ${this.overflow ? html`<div class=\"scroll-sentinel\" ${ref(this.sentinel)}></div>` : nothing}\n `\n }\n\n /**\n * @internal\n * @description Renders the empty state of the table.\n *\n * @returns A `TemplateResult` for rendering.\n */\n renderEmpty(): TemplateResult {\n return html`\n <slot name=\"empty\">\n <p role=\"status\" class=\"empty\">No data to display.</p>\n </slot>\n `\n }\n\n /**\n * @internal\n * @description Renders the table header cells. Must be implemented by subclasses.\n *\n * @returns An array of `TemplateResult` objects representing the header cells.\n */\n abstract renderHeader(): TemplateResult[]\n\n /**\n * @internal\n * @description Renders the cells for a given row item. Must be implemented by subclasses.\n *\n * @param item The data item for the row.\n * @param index The index that should be passed back to the rendering function. This is not the item index.\n * @returns An array of `TemplateResult` objects representing the cells for the row.\n */\n abstract renderRowValues(item: T, index: number): TemplateResult[]\n\n /**\n * @internal\n * @description Renders a single row in the table.\n *\n * @param item - The data item for the row.\n * @param index - The index of the row.\n * @returns A `TemplateResult` for rendering.\n */\n protected renderRow(item: T, index: number): TemplateResult {\n const rowClasses = {\n selected: this.isSelected(item as T),\n }\n\n return html`\n <tr\n role=\"row\"\n aria-selected=\"${this.isSelected(item as T) ? 'true' : 'false'}\"\n data-index=\"${index}\"\n class=\"${classMap(rowClasses)}\"\n >\n ${this.renderRowValues(item, index + 1)}\n </tr>\n `\n }\n\n /**\n * @internal\n * A helper method to render a standard table cell.\n *\n * @param content The content of the cell.\n * @param row The 0-based row index of the rendered cell\n * @param col The 0-based column index of the rendered cell\n * @param opts Options for rendering the cell (classes, icon, data attributes).\n * @returns A `TemplateResult` representing the rendered cell.\n */\n protected renderCell(content: unknown, row: number, col: number, opts: CellRenderOptions = {}): TemplateResult {\n const { position } = this\n const { data = {}, classes = [], ariaLabel, delegateFocus = false, isPrimary = false } = opts\n const cellClasses: Record<string, boolean> = { 'grid-cell': true }\n classes?.forEach((c) => (cellClasses[c] = true))\n const isFocused = position?.col === col && position?.row === row\n let index: number | undefined\n if (!delegateFocus) {\n index = isFocused ? 0 : -1\n }\n const ring = !delegateFocus\n ? html`<md-focus-ring .inward=\"${this.overflow ? true : false}\"></md-focus-ring>`\n : nothing\n if (isPrimary) {\n // Lit does not allow dynamic element names so I decided to make a copy.\n return html`\n <th\n role=\"gridcell\"\n class=\"${classMap(cellClasses)}\"\n ${dataAttr(data)}\n aria-label=\"${ifDefined(ariaLabel)}\"\n tabindex=\"${ifDefined(index)}\"\n data-delegate=\"${ifDefined(delegateFocus ? true : undefined)}\"\n data-row=\"${row}\"\n data-col=\"${col}\"\n scope=\"row\"\n part=\"cell\"\n >\n ${ring}\n <div class=\"cell-content\">${content}</div>\n </th>\n `\n }\n return html`\n <td\n role=\"gridcell\"\n class=\"${classMap(cellClasses)}\"\n ${dataAttr(data)}\n aria-label=\"${ifDefined(ariaLabel)}\"\n tabindex=\"${ifDefined(index)}\"\n data-delegate=\"${ifDefined(delegateFocus ? true : undefined)}\"\n data-row=\"${row}\"\n data-col=\"${col}\"\n part=\"cell\"\n >\n ${ring}\n <div class=\"cell-content\">${content}</div>\n </td>\n `\n }\n\n /**\n * @internal\n * @description Returns the name of the icon to use for sorting indication.\n *\n * @returns The name of the Material Icon to use (either \"arrow_upward\" or \"arrow_downward\").\n */\n get sortIconName(): string {\n return this.sortDirection === 'asc' ? 'arrow_upward' : 'arrow_downward'\n }\n\n /**\n * @internal\n * A helper method to render a table header cell.\n *\n * @param content The content of the header cell.\n * @param opts Options for rendering the header cell (classes, data attributes).\n * @returns A `TemplateResult` representing the rendered header cell.\n */\n protected renderHeaderCell(content: unknown, col: number, opts: HeaderCellRenderOptions = {}): TemplateResult {\n const { position } = this\n const { data = {}, classes = [], sort, delegateFocus = false, ariaLabel } = opts\n const cellClasses: Record<string, boolean> = { 'grid-header': true }\n classes?.forEach((c) => (cellClasses[c] = true))\n const isSortable = !!sort\n const isSorted = this.sort === sort\n const sortIcon = isSorted ? this.sortIconName : undefined\n const isFocused = position?.col === col && position?.row === 0\n let index: number | undefined\n if (!delegateFocus) {\n index = isFocused ? 0 : -1\n }\n let ariaSort: 'ascending' | 'descending' | 'none' | undefined\n if (isSorted) {\n ariaSort = this.sortDirection === 'asc' ? 'ascending' : 'descending'\n } else if (isSortable) {\n ariaSort = 'none'\n }\n return html`<th\n role=\"columnheader\"\n scope=\"col\"\n class=\"${classMap(cellClasses)}\"\n ${dataAttr(data)}\n aria-sort=\"${ifDefined(ariaSort)}\"\n data-sort=\"${ifDefined(sort)}\"\n data-row=\"0\"\n data-col=\"${col}\"\n tabindex=\"${ifDefined(index)}\"\n data-delegate=\"${ifDefined(delegateFocus ? true : undefined)}\"\n aria-label=\"${ifDefined(ariaLabel)}\"\n part=\"header-cell\"\n >\n <md-focus-ring .inward=\"${this.overflow ? true : false}\"></md-focus-ring>\n <div class=\"cell-content\">\n ${content}\n ${isSortable && sortIcon ? html`<md-icon class=\"sort-icon\" role=\"presentation\">${sortIcon}</md-icon>` : nothing}\n </div>\n </th> `\n }\n}\n"]}
1
+ {"version":3,"file":"DataTable.js","sourceRoot":"","sources":["../../../../src/elements/data-table/DataTable.ts"],"names":[],"mappings":";AAAA,4BAA4B;AAC5B,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,OAAO,EAAkC,MAAM,KAAK,CAAA;AAC/E,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AACnD,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAA;AACtD,OAAO,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAA;AACtD,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAA;AACxD,OAAO,EAAE,QAAQ,EAAE,MAAM,+BAA+B,CAAA;AAGxD,OAAO,4BAA4B,CAAA;AACnC,OAAO,4BAA4B,CAAA;AACnC,OAAO,iCAAiC,CAAA;AACxC,OAAO,sCAAsC,CAAA;AA0E7C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiGG;IACmB,SAAS;sBAA2B,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAA9C,SAA4B,SAAQ,WAAU;;;iCAIjE,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;qCAU1B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;yCAMzC,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;qCAOzB,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;kCAWzC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;oCAU3B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;gCAQ1C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;yCAQ1B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;oCAgB1B,KAAK,EAAE;YA5EoB,oKAAS,KAAK,6BAAL,KAAK,qFAA2B;YAU1B,gLAAS,SAAS,6BAAT,SAAS,6FAAsC;YAMxE,4LAAS,aAAa,6BAAb,aAAa,qGAAU;YAOhB,gLAAkB,SAAS,6BAAT,SAAS,6FAAe;YAWxD,uKAAS,MAAM,6BAAN,MAAM,uFAAQ;YAUR,6KAAS,QAAQ,6BAAR,QAAQ,2FAAQ;YAQzC,iKAAS,IAAI,6BAAJ,IAAI,mFAAoB;YAQjC,4LAAS,aAAa,6BAAb,aAAa,qGAA4B;YAgBrE,6KAAS,QAAQ,6BAAR,QAAQ,2FAAmC;;;QA5EjC,+EAAyC;QAHrE;;WAEG;QACyB,IAAS,KAAK,2CAA2B;QAAzC,IAAS,KAAK,iDAA2B;QAU1B,mIAAkD,MAAM;QAEnG;;;WAGG;WALgG;QARnG;;;;;;;WAOG;QACwC,IAAS,SAAS,+CAAsC;QAAxD,IAAS,SAAS,qDAAsC;QAMxE,+IAA8B,EAAE;QAE3D;;;;WAIG;WANwD;QAJ3D;;;WAGG;QACwB,IAAS,aAAa,mDAAU;QAAhC,IAAS,aAAa,yDAAU;QAOhB,2IAA8B,YAAY;QAErF;;;;;;;;WAQG;WAVkF;QALrF;;;;WAIG;QACwC,IAAkB,SAAS,+CAAe;QAA1C,IAAkB,SAAS,qDAAe;QAWxD,iIAAkB,KAAK;QAEpD;;;;;;;WAOG;WATiD;QATpD;;;;;;;;WAQG;QAC0B,IAAS,MAAM,4CAAQ;QAAvB,IAAS,MAAM,kDAAQ;QAUR,kIAAoB,KAAK;QAErE;;;;;WAKG;WAPkE;QARrE;;;;;;;WAOG;QACyC,IAAS,QAAQ,8CAAQ;QAAzB,IAAS,QAAQ,oDAAQ;QAQzC,qIAAiC;QAN7D;;;;;WAKG;QACyB,IAAS,IAAI,0CAAoB;QAAjC,IAAS,IAAI,gDAAoB;QAQjC,mJAAkD;QAN9E;;;;;WAKG;QACyB,IAAS,aAAa,mDAA4B;QAAlD,IAAS,aAAa,yDAA4B;QAEpE,iBAAiB,+DAAG,CAAC,CAAC,EAAA;QAEtB,QAAQ,CAAuB;QAE/B,QAAQ,GAAG,SAAS,EAAe,CAAA;QAUpC,6EAAkC,EAAE,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,EAAA;QAR7D;;;;;;;WAOG;QACM,IAAS,QAAQ,8CAAmC;QAApD,IAAS,QAAQ,oDAAmC;QAE7D;YACE,KAAK,EAAE,CAAA;YACP,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;QACtD,CAAC;QAEQ,iBAAiB;YACxB,KAAK,CAAC,iBAAiB,EAAE,CAAA;YACzB,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;gBAClB,kDAAkD;gBAClD,IAAI,CAAC,cAAc,EAAE,CAAA;YACvB,CAAC;QACH,CAAC;QAEQ,oBAAoB;YAC3B,KAAK,CAAC,oBAAoB,EAAE,CAAA;YAC5B,IAAI,CAAC,QAAQ,EAAE,UAAU,EAAE,CAAA;YAC3B,IAAI,CAAC,QAAQ,GAAG,SAAS,CAAA;QAC3B,CAAC;QAEQ,YAAY;YACnB,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;gBAClB,IAAI,CAAC,cAAc,EAAE,CAAA;YACvB,CAAC;QACH,CAAC;QAEkB,UAAU,CAAC,EAAwB;YACpD,IAAI,EAAE,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE,CAAC;gBACpB,IAAI,CAAC,iBAAiB,GAAG,CAAC,CAAC,CAAA;gBAC3B,IAAI,CAAC,mBAAmB,EAAE,CAAA;YAC5B,CAAC;QACH,CAAC;QAEkB,OAAO,CAAC,EAAwB;YACjD,IAAI,EAAE,CAAC,GAAG,CAAC,UAAU,CAAC,EAAE,CAAC;gBACvB,MAAM,EAAE,GAAG,EAAE,GAAG,EAAE,WAAW,GAAG,KAAK,EAAE,GAAG,IAAI,CAAC,QAAQ,CAAA;gBACvD,IAAI,CAAC,WAAW,EAAE,CAAC;oBACjB,MAAM,IAAI,GAAG,IAAI,CAAC,UAAU,EAAE,aAAa,CAAC,cAAc,GAAG,gBAAgB,GAAG,IAAI,CAAuB,CAAA;oBAC3G,IAAI,IAAI,EAAE,CAAC;wBACT,IAAI,CAAC,KAAK,EAAE,CAAA;oBACd,CAAC;gBACH,CAAC;YACH,CAAC;YACD,IAAI,EAAE,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE,CAAC;gBACpB,MAAM,GAAG,GAAG,EAAE,CAAC,GAAG,CAAC,OAAO,CAAC,CAAA;gBAC3B,IAAI,GAAG,EAAE,CAAC;oBACR,GAAG,CAAC,mBAAmB,CAAC,QAAQ,EAAE,IAAI,CAAC,cAAc,CAAC,CAAA;gBACxD,CAAC;gBACD,IAAI,IAAI,CAAC,KAAK,EAAE,CAAC;oBACf,IAAI,CAAC,KAAK,CAAC,gBAAgB,CAAC,QAAQ,EAAE,IAAI,CAAC,cAAc,CAAC,CAAA;gBAC5D,CAAC;YACH,CAAC;QACH,CAAC;QAED,cAAc;YACZ,IAAI,CAAC,aAAa,EAAE,CAAA;QACtB,CAAC;QAED;;;;;;;;;;;WAWG;QACO,cAAc;YACtB,MAAM,EAAE,QAAQ,EAAE,GAAG,IAAI,CAAA;YACzB,IAAI,CAAC,QAAQ,CAAC,KAAK,EAAE,CAAC;gBACpB,OAAM;YACR,CAAC;YAED,MAAM,OAAO,GAA6B;gBACxC,IAAI,EAAE,IAAI,EAAE,0CAA0C;gBACtD,UAAU,EAAE,KAAK,EAAE,YAAY;gBAC/B,SAAS,EAAE,GAAG,EAAE,+DAA+D;aAChF,CAAA;YAED,IAAI,CAAC,QAAQ,GAAG,IAAI,oBAAoB,CAAC,IAAI,CAAC,kBAAkB,EAAE,OAAO,CAAC,CAAA;YAC1E,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAA,CAAC,wBAAwB;QAChE,CAAC;QAES,mBAAmB;YAC3B,MAAM,EAAE,KAAK,EAAE,aAAa,GAAG,EAAE,EAAE,GAAG,IAAI,CAAA;YAC1C,IAAI,CAAC,KAAK,IAAI,aAAa,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;gBACzC,OAAM;YACR,CAAC;YACD,MAAM,qBAAqB,GAAG,aAAa,CAAC,MAAM,CAAC,CAAC,YAAY,EAAE,EAAE,CAClE,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,KAAK,YAAY,CAAC,CAClD,CAAA;YACD,IAAI,qBAAqB,CAAC,MAAM,KAAK,aAAa,CAAC,MAAM,EAAE,CAAC;gBAC1D,IAAI,CAAC,aAAa,GAAG,qBAAqB,CAAA;gBAC1C,IAAI,CAAC,YAAY,CAAC,qBAAqB,CAAC,CAAA;YAC1C,CAAC;QACH,CAAC;QAED;;;;;;WAMG;QACO,YAAY,CAAC,aAAkB;YACvC,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,QAAQ,EAAE,EAAE,MAAM,EAAE,EAAE,aAAa,EAAE,EAAE,CAAC,CAAC,CAAA;QAC9E,CAAC;QAED;;;;;WAKG;QACO,eAAe;YACvB,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,WAAW,CAAC,CAAC,CAAA;QAClD,CAAC;QAED;;;;;;;WAOG;QACO,cAAc,CAAC,IAAO;YAC9B,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,UAAU,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,CAAC,CAAC,CAAA;QACnE,CAAC;QAED;;;;;;;;WAQG;QACO,UAAU,CAAC,MAAc,EAAE,SAAyB;YAC5D,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,MAAM,EAAE;gBACtB,MAAM,EAAE;oBACN,MAAM;oBACN,SAAS;iBACV;aACF,CAAC,CACH,CAAA;QACH,CAAC;QAED;;;;;;;;;WASG;QACH,kBAAkB,0DAAiC,CAAC,OAAO,EAAQ,EAAE;YACnE,IAAI,OAAO,CAAC,IAAI,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,cAAc,CAAC,EAAE,CAAC;gBAClD,IAAI,CAAC,eAAe,EAAE,CAAA;YACxB,CAAC;QACH,CAAC,EAAA;QAED;;;;;;;;;;WAUG;QACO,aAAa,CAAC,CAAQ;YAC9B,MAAM,IAAI,GAAG,CAAC,CAAC,YAAY,EAAE,CAAA;YAC7B,IAAI,IAA6B,CAAA;YACjC,KAAK,MAAM,OAAO,IAAI,IAAI,CAAC,MAAM,EAAE,EAAE,CAAC;gBACpC,MAAM,OAAO,GAAG,OAAkB,CAAA;gBAClC,IAAI,OAAO,CAAC,QAAQ,KAAK,IAAI,CAAC,YAAY,EAAE,CAAC;oBAC3C,SAAQ;gBACV,CAAC;gBACD,MAAM,QAAQ,GAAG,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC,QAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAA;gBACxD,IAAI,CAAC,QAAQ,IAAI,OAAO,CAAC,YAAY,CAAC,UAAU,CAAC,EAAE,CAAC;oBAClD,4DAA4D;oBAC5D,gEAAgE;oBAChE,OAAM;gBACR,CAAC;gBACD,IAAI,QAAQ,EAAE,CAAC;oBACb,IAAI,GAAG,OAAsB,CAAA;oBAC7B,MAAK;gBACP,CAAC;YACH,CAAC;YACD,IAAI,CAAC,IAAI,EAAE,CAAC;gBACV,OAAM;YACR,CAAC;YACD,MAAM,GAAG,GAAG,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,CAAA;YACpC,MAAM,GAAG,GAAG,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,CAAA;YACpC,IAAI,KAAK,CAAC,GAAG,CAAC,IAAI,KAAK,CAAC,GAAG,CAAC,EAAE,CAAC;gBAC7B,OAAM;YACR,CAAC;YACD,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,GAAG,EAAE,CAAA;QAC3B,CAAC;QAED;;;;;WAKG;QACO,OAAO;YACf,MAAM,MAAM,GAAG,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE,CAAA;YACnC,MAAM,KAAK,GAAG,IAAI,CAAC,UAAU,EAAE,aAAa,CAAC,OAAO,CAAC,CAAA;YACrD,IAAI,CAAC,KAAK,EAAE,CAAC;gBACX,OAAO,MAAM,CAAA;YACf,CAAC;YACD,MAAM,GAAG,GAAG,KAAK,CAAC,aAAa,CAAC,IAAI,CAAC,CAAA;YACrC,IAAI,CAAC,GAAG,EAAE,CAAC;gBACT,OAAO,MAAM,CAAA;YACf,CAAC;YACD,MAAM,OAAO,GAAG,GAAG,CAAC,gBAAgB,CAAC,QAAQ,CAAC,CAAA;YAC9C,MAAM,CAAC,IAAI,GAAG,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;YACrD,MAAM,IAAI,GAAG,KAAK,CAAC,IAAI,CAAA;YACvB,MAAM,CAAC,IAAI,GAAG,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;YAC/C,OAAO,MAAM,CAAA;QACf,CAAC;QAED;;;;;;;WAOG;QACO,WAAW,CAAC,GAAW,EAAE,GAAW;YAC5C,MAAM,IAAI,GAAG,IAAI,CAAC,UAAU,EAAE,aAAa,CAAC,cAAc,GAAG,gBAAgB,GAAG,IAAI,CAAuB,CAAA;YAC3G,IAAI,CAAC,IAAI,EAAE,CAAC;gBACV,OAAM;YACR,CAAC;YACD,MAAM,aAAa,GAAG,IAAI,CAAC,OAAO,CAAC,QAAQ,KAAK,MAAM,CAAA;YACtD,OAAO,EAAE,IAAI,EAAE,aAAa,EAAE,CAAA;QAChC,CAAC;QAED;;;;;;;;WAQG;QACO,aAAa,CAAC,MAAmB;YACzC,MAAM,QAAQ,GAAG,MAAM,CAAC,aAAa,CAAC,YAAY,CAAuB,CAAA;YACzE,IAAI,QAAQ,EAAE,CAAC;gBACb,QAAQ,CAAC,KAAK,EAAE,CAAA;YAClB,CAAC;QACH,CAAC;QAED;;;;;;;;;;WAUG;QACO,WAAW,CAAC,GAAW,EAAE,GAAW;YAC5C,MAAM,IAAI,GAAG,IAAI,CAAC,WAAW,CAAC,GAAG,EAAE,GAAG,CAAC,CAAA;YACvC,IAAI,CAAC,IAAI,EAAE,CAAC;gBACV,OAAM;YACR,CAAC;YACD,IAAI,CAAC,QAAQ,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,CAAA;YAC5B,IAAI,IAAI,CAAC,aAAa,EAAE,CAAC;gBACvB,IAAI,CAAC,QAAQ,CAAC,WAAW,GAAG,IAAI,CAAA;gBAChC,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;YAC/B,CAAC;QACH,CAAC;QAED;;;;;;;;;;;;;;;;;;WAkBG;QACO,aAAa,CAAC,CAAgB;YACtC,IAAI,CAAC,CAAC,gBAAgB,EAAE,CAAC;gBACvB,OAAM;YACR,CAAC;YACD,MAAM,IAAI,GAAG,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,CAAA;YAClC,IAAI,CAAC,IAAI,EAAE,CAAC;gBACV,+DAA+D;gBAC/D,qEAAqE;gBACrE,OAAM;YACR,CAAC;YACD,MAAM,EAAE,IAAI,EAAE,GAAG,CAAC,CAAA;YAClB,MAAM,EAAE,QAAQ,EAAE,GAAG,IAAI,CAAA;YACzB,MAAM,IAAI,GAAG,IAAI,CAAC,OAAO,EAAE,CAAA;YAC3B,IAAI,IAAI,KAAK,YAAY,EAAE,CAAC;gBAC1B,CAAC,CAAC,cAAc,EAAE,CAAA;gBAClB,IAAI,QAAQ,CAAC,GAAG,GAAG,IAAI,CAAC,IAAI,EAAE,CAAC;oBAC7B,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC,GAAG,GAAG,CAAC,EAAE,QAAQ,CAAC,GAAG,CAAC,CAAA;gBAClD,CAAC;YACH,CAAC;iBAAM,IAAI,IAAI,KAAK,WAAW,EAAE,CAAC;gBAChC,CAAC,CAAC,cAAc,EAAE,CAAA;gBAClB,IAAI,QAAQ,CAAC,GAAG,GAAG,CAAC,EAAE,CAAC;oBACrB,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC,GAAG,GAAG,CAAC,EAAE,QAAQ,CAAC,GAAG,CAAC,CAAA;gBAClD,CAAC;YACH,CAAC;iBAAM,IAAI,IAAI,KAAK,WAAW,EAAE,CAAC;gBAChC,CAAC,CAAC,cAAc,EAAE,CAAA;gBAClB,IAAI,QAAQ,CAAC,GAAG,GAAG,IAAI,CAAC,IAAI,EAAE,CAAC;oBAC7B,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC,GAAG,EAAE,QAAQ,CAAC,GAAG,GAAG,CAAC,CAAC,CAAA;gBAClD,CAAC;YACH,CAAC;iBAAM,IAAI,IAAI,KAAK,SAAS,EAAE,CAAC;gBAC9B,CAAC,CAAC,cAAc,EAAE,CAAA;gBAClB,IAAI,QAAQ,CAAC,GAAG,GAAG,CAAC,EAAE,CAAC;oBACrB,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC,GAAG,EAAE,QAAQ,CAAC,GAAG,GAAG,CAAC,CAAC,CAAA;gBAClD,CAAC;YACH,CAAC;iBAAM,IAAI,IAAI,KAAK,QAAQ,EAAE,CAAC;gBAC7B,CAAC,CAAC,cAAc,EAAE,CAAA;gBAClB,IAAI,QAAQ,CAAC,GAAG,GAAG,CAAC,EAAE,CAAC;oBACrB,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC,GAAG,EAAE,CAAC,CAAC,CAAA;gBACnC,CAAC;YACH,CAAC;iBAAM,IAAI,IAAI,KAAK,UAAU,EAAE,CAAC;gBAC/B,CAAC,CAAC,cAAc,EAAE,CAAA;gBAClB,IAAI,QAAQ,CAAC,GAAG,GAAG,IAAI,CAAC,IAAI,EAAE,CAAC;oBAC7B,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC,GAAG,EAAE,IAAI,CAAC,IAAI,CAAC,CAAA;gBAC3C,CAAC;YACH,CAAC;iBAAM,IAAI,IAAI,KAAK,MAAM,EAAE,CAAC;gBAC3B,CAAC,CAAC,cAAc,EAAE,CAAA;gBAClB,IAAI,CAAC,CAAC,CAAC,OAAO,IAAI,QAAQ,CAAC,GAAG,GAAG,CAAC,EAAE,CAAC;oBACnC,IAAI,CAAC,WAAW,CAAC,CAAC,EAAE,QAAQ,CAAC,GAAG,CAAC,CAAA;gBACnC,CAAC;qBAAM,IAAI,CAAC,CAAC,OAAO,IAAI,CAAC,QAAQ,CAAC,GAAG,GAAG,CAAC,IAAI,QAAQ,CAAC,GAAG,GAAG,CAAC,CAAC,EAAE,CAAC;oBAC/D,IAAI,CAAC,WAAW,CAAC,CAAC,EAAE,CAAC,CAAC,CAAA;gBACxB,CAAC;YACH,CAAC;iBAAM,IAAI,IAAI,KAAK,KAAK,EAAE,CAAC;gBAC1B,CAAC,CAAC,cAAc,EAAE,CAAA;gBAClB,IAAI,CAAC,CAAC,CAAC,OAAO,IAAI,QAAQ,CAAC,GAAG,GAAG,IAAI,CAAC,IAAI,EAAE,CAAC;oBAC3C,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,EAAE,QAAQ,CAAC,GAAG,CAAC,CAAA;gBAC3C,CAAC;qBAAM,IAAI,CAAC,CAAC,OAAO,IAAI,QAAQ,CAAC,GAAG,GAAG,IAAI,CAAC,IAAI,EAAE,CAAC;oBACjD,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,IAAI,CAAC,CAAA;gBACxC,CAAC;YACH,CAAC;iBAAM,IAAI,IAAI,KAAK,OAAO,EAAE,CAAC;gBAC5B,CAAC,CAAC,cAAc,EAAE,CAAA;gBAClB,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC,CAAA;YACjC,CAAC;iBAAM,IAAI,IAAI,KAAK,OAAO,EAAE,CAAC;gBAC5B,CAAC,CAAC,cAAc,EAAE,CAAA;gBAClB,IAAI,CAAC,wBAAwB,CAAC,IAAI,EAAE,CAAC,CAAC,CAAA;YACxC,CAAC;QACH,CAAC;QAED;;;;;;WAMG;QACO,WAAW,CAAC,CAAa;YACjC,IAAI,CAAC,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;gBACnB,OAAM;YACR,CAAC;YACD,MAAM,IAAI,GAAG,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,CAAA;YAClC,IAAI,CAAC,IAAI,EAAE,CAAC;gBACV,OAAM;YACR,CAAC;YACD,IAAI,CAAC,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;gBACnB,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC,CAAA;YACjC,CAAC;iBAAM,CAAC;gBACN,IAAI,CAAC,wBAAwB,CAAC,IAAI,EAAE,CAAC,CAAC,CAAA;YACxC,CAAC;QACH,CAAC;QAED;;;;;;;;;;WAUG;QACO,wBAAwB,CAAC,IAAmB,EAAE,CAA6B;YACnF,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE,CAAC;gBAChB,OAAM;YACR,CAAC;YACD,MAAM,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,IAAI,CAAA;YACzB,MAAM,KAAK,GAAG,GAAG,GAAG,CAAC,CAAA;YACrB,IAAI,IAAI,CAAC,GAAG,KAAK,CAAC,EAAE,CAAC;gBACnB,eAAe;gBACf,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;gBACxB,IAAI,CAAC,QAAQ,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,CAAA;gBAC5B,OAAM;YACR,CAAC;YACD,MAAM,IAAI,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,CAAA;YACpC,IAAI,CAAC,IAAI,EAAE,CAAC;gBACV,OAAM;YACR,CAAC;YAED,MAAM,aAAa,GAAG,IAAI,CAAC,SAAS,KAAK,OAAO,CAAA;YAChD,IAAI,aAAa,IAAI,CAAC,CAAC,CAAC,OAAO,IAAI,CAAC,CAAC,OAAO,CAAC,EAAE,CAAC;gBAC9C,IAAI,CAAC,eAAe,CAAC,IAAI,EAAE,KAAK,CAAC,CAAA;YACnC,CAAC;iBAAM,IAAI,aAAa,IAAI,CAAC,CAAC,QAAQ,EAAE,CAAC;gBACvC,IAAI,CAAC,gBAAgB,CAAC,KAAK,EAAE,IAAI,CAAC,CAAA;YACpC,CAAC;iBAAM,CAAC;gBACN,IAAI,CAAC,eAAe,CAAC,IAAI,EAAE,SAAS,CAAC,CAAA;gBACrC,IAAI,CAAC,iBAAiB,GAAG,KAAK,CAAA;YAChC,CAAC;YACD,kEAAkE;YAClE,0EAA0E;YAC1E,kFAAkF;YAClF,IAAI,CAAC,QAAQ,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,CAAA;QAC9B,CAAC;QAED;;;;;;;;;WASG;QACO,gBAAgB,CAAC,YAAoB,EAAE,IAAO;YACtD,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE,CAAC;gBAChB,OAAM;YACR,CAAC;YACD,IAAI,IAAI,CAAC,iBAAiB,KAAK,CAAC,CAAC,EAAE,CAAC;gBAClC,0DAA0D;gBAC1D,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,CAAA;gBAC1B,IAAI,CAAC,iBAAiB,GAAG,YAAY,CAAA;gBACrC,OAAM;YACR,CAAC;YACD,MAAM,UAAU,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,iBAAiB,EAAE,YAAY,CAAC,CAAA;YACjE,MAAM,QAAQ,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,iBAAiB,EAAE,YAAY,CAAC,CAAA;YAC/D,MAAM,gBAAgB,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,UAAU,EAAE,QAAQ,GAAG,CAAC,CAAC,CAAA;YACzE,IAAI,CAAC,aAAa,GAAG,gBAAuB,CAAA;YAC5C,IAAI,CAAC,YAAY,CAAC,gBAAgB,CAAC,CAAA;QACrC,CAAC;QAED;;;;;;;;WAQG;QACO,oBAAoB,CAAC,IAAmB;YAChD,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE,CAAC;gBAChB,OAAM;YACR,CAAC;YACD,IAAI,IAAI,CAAC,GAAG,KAAK,CAAC,EAAE,CAAC;gBACnB,eAAe;gBACf,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;gBACxB,OAAM;YACR,CAAC;YACD,MAAM,IAAI,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,GAAG,GAAG,CAAC,CAAC,CAAA;YAC3C,IAAI,CAAC,IAAI,EAAE,CAAC;gBACV,OAAM;YACR,CAAC;YACD,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,CAAA;QAC3B,CAAC;QAED;;;;;;;;WAQG;QACO,QAAQ,CAAC,MAAmB;YACpC,MAAM,IAAI,GAAG,MAAM,CAAC,OAAO,CAAC,IAAI,CAAA;YAChC,IAAI,CAAC,IAAI,EAAE,CAAC;gBACV,OAAM;YACR,CAAC;YACD,IAAI,IAAI,CAAC,IAAI,KAAK,IAAI,EAAE,CAAC;gBACvB,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,aAAa,KAAK,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,KAAK,CAAA;YACpE,CAAC;iBAAM,CAAC;gBACN,IAAI,CAAC,IAAI,GAAG,IAAI,CAAA;gBAChB,IAAI,CAAC,aAAa,GAAG,KAAK,CAAA;YAC5B,CAAC;YACD,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,aAAa,CAAC,CAAA;QAChD,CAAC;QAED;;;;;;WAMG;QACH,UAAU,CAAC,IAAO;YAChB,OAAO,IAAI,CAAC,aAAa,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAA;QAC1C,CAAC;QAED;;;;;;;;;WASG;QACH,eAAe,CAAC,IAAO,EAAE,OAA0B,SAAS;YAC1D,IAAI,IAAI,CAAC,SAAS,KAAK,MAAM,EAAE,CAAC;gBAC9B,OAAM;YACR,CAAC;YAED,IAAI,IAAI,CAAC,SAAS,KAAK,QAAQ,EAAE,CAAC;gBAChC,IAAI,CAAC,aAAa,GAAG,CAAC,IAAI,CAAC,CAAA;YAC7B,CAAC;iBAAM,CAAC;gBACN,eAAe;gBACf,MAAM,KAAK,GAAG,IAAI,CAAC,aAAa,CAAC,OAAO,CAAC,IAAI,CAAC,CAAA;gBAC9C,IAAI,IAAI,KAAK,SAAS,EAAE,CAAC;oBACvB,IAAI,CAAC,aAAa,GAAG,CAAC,IAAI,CAAC,CAAA;gBAC7B,CAAC;qBAAM,IAAI,KAAK,KAAK,CAAC,CAAC,EAAE,CAAC;oBACxB,IAAI,CAAC,aAAa,GAAG,CAAC,GAAG,IAAI,CAAC,aAAa,EAAE,IAAI,CAAC,CAAA;gBACpD,CAAC;qBAAM,CAAC;oBACN,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,CAAA;gBACnE,CAAC;YACH,CAAC;YAED,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,aAAa,CAAC,CAAA;QACvC,CAAC;QAED;;;;;WAKG;QACM,MAAM;YACb,IAAI,CAAC,IAAI,CAAC,KAAK,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,MAAM,EAAE,CAAC;gBAC5C,OAAO,IAAI,CAAC,WAAW,EAAE,CAAA;YAC3B,CAAC;YACD,MAAM,OAAO,GAAG,IAAI,CAAC,SAAS,KAAK,OAAO,CAAA;YAC1C,OAAO,IAAI,CAAA;;;;gCAIiB,SAAS,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,CAAC;sBACjD,IAAI,CAAC,SAAS;oBAChB,IAAI,CAAC,aAAa;kBACpB,IAAI,CAAC,WAAW;;;;cAIpB,IAAI,CAAC,YAAY,EAAE;;;;YAIrB,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CAAC,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;;;QAGtE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAA,gCAAgC,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC,SAAS,CAAC,CAAC,CAAC,OAAO;KAC5F,CAAA;QACH,CAAC;QAED;;;;;WAKG;QACH,WAAW;YACT,OAAO,IAAI,CAAA;;;;KAIV,CAAA;QACH,CAAC;QAoBD;;;;;;;WAOG;QACO,SAAS,CAAC,IAAO,EAAE,KAAa;YACxC,MAAM,UAAU,GAAG;gBACjB,QAAQ,EAAE,IAAI,CAAC,UAAU,CAAC,IAAS,CAAC;aACrC,CAAA;YAED,OAAO,IAAI,CAAA;;;yBAGU,IAAI,CAAC,UAAU,CAAC,IAAS,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO;sBAChD,KAAK;iBACV,QAAQ,CAAC,UAAU,CAAC;;UAE3B,IAAI,CAAC,eAAe,CAAC,IAAI,EAAE,KAAK,GAAG,CAAC,CAAC;;KAE1C,CAAA;QACH,CAAC;QAED;;;;;;;;;WASG;QACO,UAAU,CAAC,OAAgB,EAAE,GAAW,EAAE,GAAW,EAAE,OAA0B,EAAE;YAC3F,MAAM,EAAE,QAAQ,EAAE,GAAG,IAAI,CAAA;YACzB,MAAM,EAAE,IAAI,GAAG,EAAE,EAAE,OAAO,GAAG,EAAE,EAAE,SAAS,EAAE,aAAa,GAAG,KAAK,EAAE,SAAS,GAAG,KAAK,EAAE,GAAG,IAAI,CAAA;YAC7F,MAAM,WAAW,GAA4B,EAAE,WAAW,EAAE,IAAI,EAAE,CAAA;YAClE,OAAO,EAAE,OAAO,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,CAAC,CAAA;YAChD,MAAM,SAAS,GAAG,QAAQ,EAAE,GAAG,KAAK,GAAG,IAAI,QAAQ,EAAE,GAAG,KAAK,GAAG,CAAA;YAChE,IAAI,KAAyB,CAAA;YAC7B,IAAI,CAAC,aAAa,EAAE,CAAC;gBACnB,KAAK,GAAG,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;YAC5B,CAAC;YACD,MAAM,IAAI,GAAG,CAAC,aAAa;gBACzB,CAAC,CAAC,IAAI,CAAA,2BAA2B,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,oBAAoB;gBACjF,CAAC,CAAC,OAAO,CAAA;YACX,IAAI,SAAS,EAAE,CAAC;gBACd,wEAAwE;gBACxE,OAAO,IAAI,CAAA;;;mBAGE,QAAQ,CAAC,WAAW,CAAC;YAC5B,QAAQ,CAAC,IAAI,CAAC;wBACF,SAAS,CAAC,SAAS,CAAC;sBACtB,SAAS,CAAC,KAAK,CAAC;2BACX,SAAS,CAAC,aAAa,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS,CAAC;sBAChD,GAAG;sBACH,GAAG;;;;YAIb,IAAI;sCACsB,OAAO;;OAEtC,CAAA;YACH,CAAC;YACD,OAAO,IAAI,CAAA;;;iBAGE,QAAQ,CAAC,WAAW,CAAC;UAC5B,QAAQ,CAAC,IAAI,CAAC;sBACF,SAAS,CAAC,SAAS,CAAC;oBACtB,SAAS,CAAC,KAAK,CAAC;yBACX,SAAS,CAAC,aAAa,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS,CAAC;oBAChD,GAAG;oBACH,GAAG;;;UAGb,IAAI;oCACsB,OAAO;;KAEtC,CAAA;QACH,CAAC;QAED;;;;;WAKG;QACH,IAAI,YAAY;YACd,OAAO,IAAI,CAAC,aAAa,KAAK,KAAK,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,gBAAgB,CAAA;QACzE,CAAC;QAED;;;;;;;WAOG;QACO,gBAAgB,CAAC,OAAgB,EAAE,GAAW,EAAE,OAAgC,EAAE;YAC1F,MAAM,EAAE,QAAQ,EAAE,GAAG,IAAI,CAAA;YACzB,MAAM,EAAE,IAAI,GAAG,EAAE,EAAE,OAAO,GAAG,EAAE,EAAE,IAAI,EAAE,aAAa,GAAG,KAAK,EAAE,SAAS,EAAE,GAAG,IAAI,CAAA;YAChF,MAAM,WAAW,GAA4B,EAAE,aAAa,EAAE,IAAI,EAAE,CAAA;YACpE,OAAO,EAAE,OAAO,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,CAAC,CAAA;YAChD,MAAM,UAAU,GAAG,CAAC,CAAC,IAAI,CAAA;YACzB,MAAM,QAAQ,GAAG,IAAI,CAAC,IAAI,KAAK,IAAI,CAAA;YACnC,MAAM,QAAQ,GAAG,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,SAAS,CAAA;YACzD,MAAM,SAAS,GAAG,QAAQ,EAAE,GAAG,KAAK,GAAG,IAAI,QAAQ,EAAE,GAAG,KAAK,CAAC,CAAA;YAC9D,IAAI,KAAyB,CAAA;YAC7B,IAAI,CAAC,aAAa,EAAE,CAAC;gBACnB,KAAK,GAAG,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;YAC5B,CAAC;YACD,IAAI,QAAyD,CAAA;YAC7D,IAAI,QAAQ,EAAE,CAAC;gBACb,QAAQ,GAAG,IAAI,CAAC,aAAa,KAAK,KAAK,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,YAAY,CAAA;YACtE,CAAC;iBAAM,IAAI,UAAU,EAAE,CAAC;gBACtB,QAAQ,GAAG,MAAM,CAAA;YACnB,CAAC;YACD,OAAO,IAAI,CAAA;;;eAGA,QAAQ,CAAC,WAAW,CAAC;QAC5B,QAAQ,CAAC,IAAI,CAAC;mBACH,SAAS,CAAC,QAAQ,CAAC;mBACnB,SAAS,CAAC,IAAI,CAAC;;kBAEhB,GAAG;kBACH,SAAS,CAAC,KAAK,CAAC;uBACX,SAAS,CAAC,aAAa,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS,CAAC;oBAC9C,SAAS,CAAC,SAAS,CAAC;;;gCAGR,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK;;UAElD,OAAO;UACP,UAAU,IAAI,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAA,kDAAkD,QAAQ,YAAY,CAAC,CAAC,CAAC,OAAO;;WAE5G,CAAA;QACT,CAAC;;;SA90BmB,SAAS","sourcesContent":["/* eslint-disable max-len */\nimport { html, LitElement, nothing, PropertyValues, TemplateResult } from 'lit'\nimport { property, state } from 'lit/decorators.js'\nimport { classMap } from 'lit/directives/class-map.js'\nimport { ref, createRef } from 'lit/directives/ref.js'\nimport { ifDefined } from 'lit/directives/if-defined.js'\nimport { dataAttr } from '../../directives/data-attr.js'\nimport { LiveData } from '../../reactive/LiveData.js'\n\nimport '@material/web/icon/icon.js'\nimport '@material/web/menu/menu.js'\nimport '@material/web/menu/menu-item.js'\nimport '@material/web/focus/md-focus-ring.js'\n\n/**\n * Options for rendering a table cell.\n */\nexport interface CellRenderOptions {\n /**\n * CSS classes to apply to the cell.\n */\n classes?: string[]\n /**\n * Data attributes to add to the cell (e.g., `data-id=\"my-id\"`).\n */\n data?: Record<string, string | number | boolean>\n /**\n * The value of the aria-label to render on the cell.\n */\n ariaLabel?: string\n /**\n * Used with interactive elements within the cell.\n * The content of the cell should have exactly one element\n * with the `tabindex=-1`. The table will automatically\n * focus on that element when activated.\n */\n delegateFocus?: boolean\n /**\n * Used for accessibility. Should be set on the cell that represents\n * the name for the row, like, a person name or a file name.\n */\n isPrimary?: boolean\n}\n\n/**\n * Options for rendering a table header cell. Extends CellRenderOptions.\n */\nexport interface HeaderCellRenderOptions extends CellRenderOptions {\n /**\n * The name of the sort property.\n */\n sort?: string\n}\n\nexport interface CellPosition {\n /**\n * The index of the selected row\n */\n row: number\n /**\n * The index of the selected cell\n */\n col: number\n\n /**\n * Whether the logic should ignore setting up focus.\n * This is used when tracking cell selection when using a pointer device.\n */\n ignoreFocus?: boolean\n}\n\nexport interface EventCellInfo {\n /**\n * The cell element.\n */\n cell: HTMLElement\n /**\n * The column index\n */\n col: number\n /**\n * The **table** row index (not items)\n */\n row: number\n}\n\n/**\n * A versatile and accessible data table web component.\n *\n * The `DataTable` component provides a highly customizable and accessible way to display tabular data.\n * It offers features such as:\n *\n * - **Accessibility:** Built with ARIA roles and attributes for screen reader compatibility and keyboard navigation.\n * - **Customizable Cells:** Allows complete control over the content and rendering of each cell in the table.\n * - **Header Customization:** Provides flexibility in defining and rendering table headers, including sorting.\n * - **Selection:** Supports single, multiple, or no selection of rows.\n * - **Activation:** Enables the activation of rows (e.g., via double-click or Enter/Space key).\n * - **Infinite Scrolling:** Supports \"load more\" functionality (infinite scroll) using a sentinel element.\n * - **Sorting:** Allows sorting of data by clicking on sortable header cells.\n * - **Keyboard Navigation:** Full keyboard support for navigating through the table.\n * - **Empty State:** Customizable content to display when the table has no data.\n * - **Focus Management:** Properly manages focus for both keyboard and pointer interactions.\n *\n * @slot empty - Optional. Content to display when the table is empty (i.e., `items` is an empty array).\n * Defaults to a message saying \"No data to display.\"\n *\n * @fires select - Dispatched when the selection changes.\n * - `detail`: An object with a `selectedItems` property, containing an array of the currently selected items.\n * - Example: `{ selectedItems: [item1, item2] }`\n *\n * @fires activate - Dispatched when a row is activated (e.g., double-clicked or Enter/Space pressed).\n * - `detail`: The data item that was activated.\n * - Example: `item1`\n *\n * @fires scrollend - Dispatched when the user scrolls to the bottom of the table (when the `overflow` property is true).\n * - No event detail.\n *\n * @fires sort - Dispatched when the user clicks on a sortable header to change the sorting.\n * - `detail`: An object with `column` and `direction` properties.\n * - `column`: The name of the column being sorted.\n * - `direction`: The sort direction, either \"asc\" (ascending) or \"desc\" (descending).\n * - Example: `{ column: \"name\", direction: \"asc\" }`\n *\n * @csspart table - The underlying `<table>` element.\n * @csspart cell - Individual `<td>` and `<th>` elements.\n * @csspart header-cell - Individual `<th>` elements.\n *\n * @cssprop --md-focus-ring-shape-start-start - The start-start corner shape for the focus ring.\n * @cssprop --md-focus-ring-shape-start-end - The start-end corner shape for the focus ring.\n * @cssprop --md-focus-ring-shape-end-end - The end-end corner shape for the focus ring.\n * @cssprop --md-focus-ring-shape-end-start - The end-start corner shape for the focus ring.\n * @cssprop --md-sys-typescale-label-large-font - The font family for label large.\n * @cssprop --md-sys-typescale-label-large-size - The font size for label large.\n * @cssprop --md-sys-typescale-label-large-tracking - The letter spacing for label large.\n * @cssprop --md-sys-typescale-label-large-height - The line height for label large.\n * @cssprop --md-sys-typescale-label-large-weight - The font weight for label large.\n * @cssprop --md-sys-color-outline-variant - The outline variant color.\n * @cssprop --md-sys-color-secondary-container - The secondary container color.\n * @cssprop --md-icon-size - The size of the icons.\n * @cssprop --md-sys-typescale-title-small-font - The font family for title small.\n * @cssprop --md-sys-typescale-title-small-weight - The font weight for title small.\n * @cssprop --md-sys-typescale-title-small-size - The font size for title small.\n * @cssprop --md-sys-typescale-title-small-tracking - The letter spacing for title small.\n * @cssprop --md-sys-typescale-title-small-height - The line height for title small.\n * @cssprop --md-sys-typescale-body-medium-font - The font family for body medium.\n * @cssprop --md-sys-typescale-body-medium-weight - The font weight for body medium.\n * @cssprop --md-sys-typescale-body-medium-size - The font size for body medium.\n * @cssprop --md-sys-typescale-body-medium-tracking - The letter spacing for body medium.\n * @cssprop --md-sys-typescale-body-medium-height - The line height for body medium.\n *\n * @typeParam T The type of data items in the table.\n *\n * @example\n * ```html\n * <data-table\n * .items=\"${myItems}\"\n * selection=\"multi\"\n * @select=\"${handleSelect}\"\n * @activate=\"${handleActivate}\"\n * @scrollend=\"${handleScrollEnd}\"\n * @sort=\"${handleSort}\"\n * overflow\n * >\n * <p slot=\"empty\">No items to display at this time.</p>\n * </data-table>\n * ```\n *\n * @example\n * ```typescript\n * // Inside a subclass of DataTable.\n * // Rendering a name cell.\n * #nameCell(item: MyItem, row: number, col: number): TemplateResult {\n * return this.renderCell(item.name, row, col, { isPrimary: true });\n * }\n *\n * // Rendering a header cell.\n * override renderHeader(): TemplateResult[] {\n * return [\n * this.renderHeaderCell('Name', 0, { sort: 'name' }),\n * this.renderHeaderCell('Value', 1, { sort: 'value' }),\n * ];\n * }\n * ```\n */\nexport abstract class DataTable<T extends object> extends LitElement {\n /**\n * The data items to display in the table.\n */\n @property({ type: Object }) accessor items: LiveData<T[]> | undefined\n\n /**\n * The selection mode. Can be \"none\", \"single\", or \"multi\".\n * - `none`: No selection is allowed.\n * - `single`: Only one item can be selected at a time.\n * - `multi`: Multiple items can be selected.\n * @attribute\n * @default \"none\"\n */\n @property({ type: String, reflect: true }) accessor selection: 'none' | 'single' | 'multi' = 'none'\n\n /**\n * The currently selected items.\n * @default []\n */\n @property({ type: Array }) accessor selectedItems: T[] = []\n\n /**\n * The ARIA label for the table. Used for accessibility.\n * @attribute\n * @default \"Data table\"\n */\n @property({ type: String, reflect: true }) override accessor ariaLabel = 'Data table'\n\n /**\n * Enables double-click and Enter/Space key activation of table items.\n * When `true`, items can be activated by:\n * - Double-clicking the item.\n * - Focusing on the item and pressing Enter or Space.\n * The `activate` event is dispatched when an item is activated.\n * @attribute\n * @default false\n */\n @property({ type: Boolean }) accessor active = false\n\n /**\n * Enables the \"load more\" functionality when the user scrolls to the bottom of the table.\n * When `true`, a sentinel element is added to the bottom of the table. When the sentinel\n * becomes visible, the `scrollend` event is dispatched.\n * This is commonly used for infinite scrolling or lazy loading of data.\n * @attribute\n * @default false\n */\n @property({ type: Boolean, reflect: true }) accessor overflow = false\n\n /**\n * The name of the property to sort the table by. If set, the table will\n * automatically indicate the sortable header.\n * @attribute\n * @default undefined\n */\n @property({ type: String }) accessor sort: string | undefined\n\n /**\n * The direction of the sort. Can be \"asc\" (ascending) or \"desc\" (descending).\n * If `sort` is set, this property will be used to determine the sort direction.\n * @attribute\n * @default undefined\n */\n @property({ type: String }) accessor sortDirection: 'asc' | 'desc' | undefined\n\n protected lastSelectedIndex = -1\n\n protected observer?: IntersectionObserver\n\n protected sentinel = createRef<HTMLElement>()\n\n /**\n * The current focus position.\n * It is used to support keyboard navigation.\n *\n * Initially we always allow to focus on the first cell, which\n * should be the first header cell. The keyboard navigation will\n * take over.\n */\n @state() accessor position: CellPosition = { row: 0, col: 0 }\n\n constructor() {\n super()\n this.handleLiveData = this.handleLiveData.bind(this)\n }\n\n override connectedCallback(): void {\n super.connectedCallback()\n if (this.overflow) {\n // Only create the observer if overflow is enabled\n this.createObserver()\n }\n }\n\n override disconnectedCallback(): void {\n super.disconnectedCallback()\n this.observer?.disconnect()\n this.observer = undefined\n }\n\n override firstUpdated(): void {\n if (this.overflow) {\n this.createObserver()\n }\n }\n\n protected override willUpdate(cp: PropertyValues<this>): void {\n if (cp.has('items')) {\n this.lastSelectedIndex = -1\n this.revalidateSelection()\n }\n }\n\n protected override updated(cp: PropertyValues<this>): void {\n if (cp.has('position')) {\n const { row, col, ignoreFocus = false } = this.position\n if (!ignoreFocus) {\n const cell = this.shadowRoot?.querySelector(`[data-row=\"${row}\"][data-col=\"${col}\"]`) as HTMLElement | null\n if (cell) {\n cell.focus()\n }\n }\n }\n if (cp.has('items')) {\n const old = cp.get('items')\n if (old) {\n old.removeEventListener('update', this.handleLiveData)\n }\n if (this.items) {\n this.items.addEventListener('update', this.handleLiveData)\n }\n }\n }\n\n handleLiveData(): void {\n this.requestUpdate()\n }\n\n /**\n * @internal\n * @description Creates and configures an `IntersectionObserver` to detect when the sentinel element is visible,\n * indicating the user has scrolled to the bottom of the table.\n *\n * This method sets up the observer to watch the sentinel element. When the sentinel intersects with the component's viewport,\n * it triggers the `scrollend` event.\n *\n * This function is used when `overflow` is set to true.\n *\n * @returns void\n */\n protected createObserver(): void {\n const { sentinel } = this\n if (!sentinel.value) {\n return\n }\n\n const options: IntersectionObserverInit = {\n root: this, // Observe within the component's viewport\n rootMargin: '0px', // No margin\n threshold: 0.0, // Trigger when the sentinel is 0% visible (at the very bottom)\n }\n\n this.observer = new IntersectionObserver(this.handleIntersection, options)\n this.observer.observe(sentinel.value) // Observe the sentinel.\n }\n\n protected revalidateSelection(): void {\n const { items, selectedItems = [] } = this\n if (!items || selectedItems.length === 0) {\n return\n }\n const filteredSelectedItems = selectedItems.filter((selectedItem) =>\n items.value.some((item) => item === selectedItem)\n )\n if (filteredSelectedItems.length !== selectedItems.length) {\n this.selectedItems = filteredSelectedItems\n this.notifySelect(filteredSelectedItems)\n }\n }\n\n /**\n * Notifies about the selection change.\n *\n * This method dispatches a `select` event with the currently selected items.\n *\n * @param selectedItems - The array of currently selected items.\n */\n protected notifySelect(selectedItems: T[]): void {\n this.dispatchEvent(new CustomEvent('select', { detail: { selectedItems } }))\n }\n\n /**\n * Notifies about the scroll end event.\n *\n * This method dispatches a `scrollend` event when the user scrolls to the bottom of the table.\n * It is typically used in conjunction with the `overflow` property to implement infinite scrolling.\n */\n protected notifyScrollEnd(): void {\n this.dispatchEvent(new CustomEvent('scrollend'))\n }\n\n /**\n * Notifies about the activation of a row.\n *\n * This method dispatches an `activate` event with the activated item.\n * It is typically used when a row is double-clicked or when the Enter/Space key is pressed while focused on a row.\n *\n * @param item - The data item that was activated.\n */\n protected notifyActivate(item: T): void {\n this.dispatchEvent(new CustomEvent('activate', { detail: item }))\n }\n\n /**\n * Notifies about the sorting action.\n *\n * This method dispatches a `sort` event with the column name and sort direction.\n * It is typically used when a sortable header cell is clicked.\n *\n * @param column - The name of the column being sorted.\n * @param direction - The sort direction, either \"asc\" (ascending) or \"desc\" (descending).\n */\n protected notifySort(column: string, direction: 'asc' | 'desc'): void {\n this.dispatchEvent(\n new CustomEvent('sort', {\n detail: {\n column,\n direction,\n },\n })\n )\n }\n\n /**\n * @internal\n * @description Handles the intersection of the sentinel element with the viewport.\n *\n * This method is the callback function for the `IntersectionObserver`. When the sentinel becomes visible,\n * it dispatches the `scrollend` event to signal that the user has reached the bottom of the table.\n *\n * @param entries - An array of IntersectionObserverEntry objects.\n * @returns void\n */\n handleIntersection: IntersectionObserverCallback = (entries): void => {\n if (entries.some((entry) => entry.isIntersecting)) {\n this.notifyScrollEnd()\n }\n }\n\n /**\n * @internal\n * @description Extracts information about a cell from an event.\n *\n * This method analyzes the event's composed path to identify the clicked or focused cell (either `<td>` or `<th>`).\n * It returns the cell element, its column index, and its row index.\n * It is also capable of detecting if the user focused on an interactive element within a cell.\n *\n * @param e - The event object (typically a MouseEvent or KeyboardEvent).\n * @returns An object containing the cell element, column index, and row index, or `undefined` if the target is not a cell.\n */\n protected infoFromEvent(e: Event): EventCellInfo | undefined {\n const path = e.composedPath()\n let cell: HTMLElement | undefined\n for (const current of path.values()) {\n const element = current as Element\n if (element.nodeType !== Node.ELEMENT_NODE) {\n continue\n }\n const isTarget = ['TD', 'TH'].includes(element.nodeName)\n if (!isTarget && element.hasAttribute('tabindex')) {\n // It means that the user focusing on an interactive element\n // within a cell and we should abandon whatever we do right now.\n return\n }\n if (isTarget) {\n cell = element as HTMLElement\n break\n }\n }\n if (!cell) {\n return\n }\n const col = Number(cell.dataset.col)\n const row = Number(cell.dataset.row)\n if (isNaN(col) || isNaN(row)) {\n return\n }\n return { cell, col, row }\n }\n\n /**\n * @internal\n * @description Gets the number of columns and rows of the table.\n *\n * @returns An object with `cols` and `rows` properties indicating the number of columns and rows.\n */\n protected getSize(): { cols: number; rows: number } {\n const result = { cols: 0, rows: 0 }\n const table = this.shadowRoot?.querySelector('table')\n if (!table) {\n return result\n }\n const row = table.querySelector('tr')\n if (!row) {\n return result\n }\n const columns = row.querySelectorAll('th, td')\n result.cols = columns.length ? columns.length - 1 : 0\n const rows = table.rows\n result.rows = rows.length ? rows.length - 1 : 0\n return result\n }\n\n /**\n * @internal\n * @description Get the element containing the cell data.\n *\n * @param col - The column index of the cell.\n * @param row - The row index of the cell.\n * @returns An object with the cell element and `delegateFocus` flag, or `undefined` if the cell does not exist.\n */\n protected getCellInfo(col: number, row: number): { cell: HTMLElement; delegateFocus: boolean } | undefined {\n const cell = this.shadowRoot?.querySelector(`[data-col=\"${col}\"][data-row=\"${row}\"]`) as HTMLElement | null\n if (!cell) {\n return\n }\n const delegateFocus = cell.dataset.delegate === 'true'\n return { cell, delegateFocus }\n }\n\n /**\n * @internal\n * @description Delegates the focus to a specific interactive element within a cell.\n *\n * This method is used when the cell is configured to handle its own focus management (i.e., `delegateFocus` is `true`).\n *\n * @param parent - The parent element (the cell) containing the interactive element.\n * @returns void\n */\n protected delegateFocus(parent: HTMLElement): void {\n const delegate = parent.querySelector('[tabindex]') as HTMLElement | null\n if (delegate) {\n delegate.focus()\n }\n }\n\n /**\n * @internal\n * @description Moves the focus to the specified cell.\n *\n * This method updates the component's internal `position` state and then focuses on the corresponding cell.\n * If the cell has the `delegateFocus` property, it delegates the focus to the first interactive element inside of the cell.\n *\n * @param col - The column index of the cell to focus on.\n * @param row - The row index of the cell to focus on.\n * @returns void\n */\n protected moveFocusTo(col: number, row: number): void {\n const cell = this.getCellInfo(col, row)\n if (!cell) {\n return\n }\n this.position = { row, col }\n if (cell.delegateFocus) {\n this.position.ignoreFocus = true\n this.delegateFocus(cell.cell)\n }\n }\n\n /**\n * @internal\n * @description Handles keyboard navigation within the table.\n *\n * This method processes keyboard events to move the focus between cells. It supports arrow keys, Page Up/Down, Home/End, Enter and Space.\n * - ArrowRight: Moves focus to the next cell to the right.\n * - ArrowLeft: Moves focus to the next cell to the left.\n * - ArrowDown: Moves focus to the cell below.\n * - ArrowUp: Moves focus to the cell above.\n * - PageUp: Moves focus to the first row.\n * - PageDown: Moves focus to the last row.\n * - Home: Moves focus to the first cell of the current row (Ctrl+Home moves to the first cell of the first row).\n * - End: Moves focus to the last cell of the current row (Ctrl+End moves to the last cell of the last row).\n * - Enter: Activates the current row.\n * - Space: Manages selection.\n *\n * @param e - The KeyboardEvent object.\n * @returns void\n */\n protected handleKeyDown(e: KeyboardEvent) {\n if (e.defaultPrevented) {\n return\n }\n const info = this.infoFromEvent(e)\n if (!info) {\n // This also makes sure that when we are focusing on an element\n // within a `delegateFocus` cell, we won't interfere with its events.\n return\n }\n const { code } = e\n const { position } = this\n const size = this.getSize()\n if (code === 'ArrowRight') {\n e.preventDefault()\n if (position.col < size.cols) {\n this.moveFocusTo(position.col + 1, position.row)\n }\n } else if (code === 'ArrowLeft') {\n e.preventDefault()\n if (position.col > 0) {\n this.moveFocusTo(position.col - 1, position.row)\n }\n } else if (code === 'ArrowDown') {\n e.preventDefault()\n if (position.row < size.rows) {\n this.moveFocusTo(position.col, position.row + 1)\n }\n } else if (code === 'ArrowUp') {\n e.preventDefault()\n if (position.row > 0) {\n this.moveFocusTo(position.col, position.row - 1)\n }\n } else if (code === 'PageUp') {\n e.preventDefault()\n if (position.row > 1) {\n this.moveFocusTo(position.col, 1)\n }\n } else if (code === 'PageDown') {\n e.preventDefault()\n if (position.row < size.rows) {\n this.moveFocusTo(position.col, size.rows)\n }\n } else if (code === 'Home') {\n e.preventDefault()\n if (!e.ctrlKey && position.col > 0) {\n this.moveFocusTo(0, position.row)\n } else if (e.ctrlKey && (position.row > 1 || position.col > 0)) {\n this.moveFocusTo(0, 1)\n }\n } else if (code === 'End') {\n e.preventDefault()\n if (!e.ctrlKey && position.col < size.cols) {\n this.moveFocusTo(size.cols, position.row)\n } else if (e.ctrlKey && position.row < size.rows) {\n this.moveFocusTo(size.cols, size.rows)\n }\n } else if (code === 'Enter') {\n e.preventDefault()\n this.activateFromCellInfo(info)\n } else if (code === 'Space') {\n e.preventDefault()\n this.manageSelectionFromEvent(info, e)\n }\n }\n\n /**\n * @internal\n * @description Handles mouse click events on the table.\n *\n * @param e - The MouseEvent object.\n * @returns void\n */\n protected handleClick(e: MouseEvent): void {\n if (e.detail === 3) {\n return\n }\n const info = this.infoFromEvent(e)\n if (!info) {\n return\n }\n if (e.detail === 2) {\n this.activateFromCellInfo(info)\n } else {\n this.manageSelectionFromEvent(info, e)\n }\n }\n\n /**\n * @internal\n * @description Manages the selection state based on a mouse or keyboard event.\n *\n * This method determines the row and column from the event target and updates the `selectedItems` array accordingly.\n * It supports single, multiple and no selection based on the `selection` property. It also supports shift-click.\n *\n * @param info - The cell info.\n * @param e - The MouseEvent or KeyboardEvent object.\n * @returns void\n */\n protected manageSelectionFromEvent(info: EventCellInfo, e: MouseEvent | KeyboardEvent): void {\n if (!this.items) {\n return\n }\n const { row, col } = info\n const index = row - 1\n if (info.row === 0) {\n // Handle sort.\n this.sortFrom(info.cell)\n this.position = { row, col }\n return\n }\n const item = this.items.value[index]\n if (!item) {\n return\n }\n\n const isMultiSelect = this.selection === 'multi'\n if (isMultiSelect && (e.metaKey || e.ctrlKey)) {\n this.toggleSelection(item, 'add')\n } else if (isMultiSelect && e.shiftKey) {\n this.handleShiftClick(index, item)\n } else {\n this.toggleSelection(item, 'replace')\n this.lastSelectedIndex = index\n }\n // This won't cause the focus ring to be rendered because the cell\n // won't hey the `tabindex=0`, which is OK with pointer device navigation,\n // but it will keep track of the last cell in case the keyboard navigation starts.\n this.position = { row, col }\n }\n\n /**\n * @internal\n * @description Handles shift-click for range selection.\n *\n * When shift-clicking a row, it will select all the items between the last selected item and the clicked item.\n *\n * @param clickedIndex - The index of the clicked item.\n * @param item - The clicked item.\n * @returns void\n */\n protected handleShiftClick(clickedIndex: number, item: T) {\n if (!this.items) {\n return\n }\n if (this.lastSelectedIndex === -1) {\n // If no previous selection, just select the clicked item.\n this.toggleSelection(item)\n this.lastSelectedIndex = clickedIndex\n return\n }\n const startIndex = Math.min(this.lastSelectedIndex, clickedIndex)\n const endIndex = Math.max(this.lastSelectedIndex, clickedIndex)\n const newSelectedItems = this.items.value.slice(startIndex, endIndex + 1)\n this.selectedItems = newSelectedItems as T[]\n this.notifySelect(newSelectedItems)\n }\n\n /**\n * @internal\n * @description Activates the row associated with the given event.\n *\n * This method is called when a row is double-clicked or when the Enter/Space key is pressed while a row is focused.\n *\n * @param e - The Event object.\n * @returns void\n */\n protected activateFromCellInfo(info: EventCellInfo): void {\n if (!this.items) {\n return\n }\n if (info.row === 0) {\n // Handle sort.\n this.sortFrom(info.cell)\n return\n }\n const item = this.items.value[info.row - 1]\n if (!item) {\n return\n }\n this.notifyActivate(item)\n }\n\n /**\n * @internal\n * @description Handles sorting logic based on the clicked column header.\n *\n * This method updates the `sort` and `sortDirection` properties and dispatches the `sort` event.\n *\n * @param column - The header cell element.\n * @returns void\n */\n protected sortFrom(column: HTMLElement): void {\n const sort = column.dataset.sort\n if (!sort) {\n return\n }\n if (this.sort === sort) {\n this.sortDirection = this.sortDirection === 'asc' ? 'desc' : 'asc'\n } else {\n this.sort = sort\n this.sortDirection = 'asc'\n }\n this.notifySort(this.sort, this.sortDirection)\n }\n\n /**\n * @public\n * @description Checks if an item is currently selected.\n *\n * @param item - The item to check.\n * @returns `true` if the item is selected, `false` otherwise.\n */\n isSelected(item: T): boolean {\n return this.selectedItems.includes(item)\n }\n\n /**\n * @public\n * @description Toggles the selection state of an item.\n *\n * This method adds or removes an item from the `selectedItems` array.\n *\n * @param item - The item to toggle selection for.\n * @param mode - The selection mode, either 'replace' or 'add' (defaults to 'replace').\n * @returns void\n */\n toggleSelection(item: T, mode: 'replace' | 'add' = 'replace') {\n if (this.selection === 'none') {\n return\n }\n\n if (this.selection === 'single') {\n this.selectedItems = [item]\n } else {\n // multi-select\n const index = this.selectedItems.indexOf(item)\n if (mode === 'replace') {\n this.selectedItems = [item]\n } else if (index === -1) {\n this.selectedItems = [...this.selectedItems, item]\n } else {\n this.selectedItems = this.selectedItems.filter((i) => i !== item)\n }\n }\n\n this.notifySelect(this.selectedItems)\n }\n\n /**\n * @internal\n * @description Renders the table.\n *\n * @returns A `TemplateResult` for rendering.\n */\n override render(): TemplateResult {\n if (!this.items || !this.items.value.length) {\n return this.renderEmpty()\n }\n const isMulti = this.selection === 'multi'\n return html`\n <table\n part=\"table\"\n role=\"grid\"\n aria-multiselectable=\"${ifDefined(isMulti ? 'true' : undefined)}\"\n aria-label=\"${this.ariaLabel}\"\n @keydown=\"${this.handleKeyDown}\"\n @click=\"${this.handleClick}\"\n >\n <thead>\n <tr role=\"row\">\n ${this.renderHeader()}\n </tr>\n </thead>\n <tbody>\n ${this.items.value.map((item, index) => this.renderRow(item, index))}\n </tbody>\n </table>\n ${this.overflow ? html`<div class=\"scroll-sentinel\" ${ref(this.sentinel)}></div>` : nothing}\n `\n }\n\n /**\n * @internal\n * @description Renders the empty state of the table.\n *\n * @returns A `TemplateResult` for rendering.\n */\n renderEmpty(): TemplateResult {\n return html`\n <slot name=\"empty\">\n <p role=\"status\" class=\"empty\">No data to display.</p>\n </slot>\n `\n }\n\n /**\n * @internal\n * @description Renders the table header cells. Must be implemented by subclasses.\n *\n * @returns An array of `TemplateResult` objects representing the header cells.\n */\n abstract renderHeader(): TemplateResult[]\n\n /**\n * @internal\n * @description Renders the cells for a given row item. Must be implemented by subclasses.\n *\n * @param item The data item for the row.\n * @param index The index that should be passed back to the rendering function. This is not the item index.\n * @returns An array of `TemplateResult` objects representing the cells for the row.\n */\n abstract renderRowValues(item: T, index: number): TemplateResult[]\n\n /**\n * @internal\n * @description Renders a single row in the table.\n *\n * @param item - The data item for the row.\n * @param index - The index of the row.\n * @returns A `TemplateResult` for rendering.\n */\n protected renderRow(item: T, index: number): TemplateResult {\n const rowClasses = {\n selected: this.isSelected(item as T),\n }\n\n return html`\n <tr\n role=\"row\"\n aria-selected=\"${this.isSelected(item as T) ? 'true' : 'false'}\"\n data-index=\"${index}\"\n class=\"${classMap(rowClasses)}\"\n >\n ${this.renderRowValues(item, index + 1)}\n </tr>\n `\n }\n\n /**\n * @internal\n * A helper method to render a standard table cell.\n *\n * @param content The content of the cell.\n * @param row The 0-based row index of the rendered cell\n * @param col The 0-based column index of the rendered cell\n * @param opts Options for rendering the cell (classes, icon, data attributes).\n * @returns A `TemplateResult` representing the rendered cell.\n */\n protected renderCell(content: unknown, row: number, col: number, opts: CellRenderOptions = {}): TemplateResult {\n const { position } = this\n const { data = {}, classes = [], ariaLabel, delegateFocus = false, isPrimary = false } = opts\n const cellClasses: Record<string, boolean> = { 'grid-cell': true }\n classes?.forEach((c) => (cellClasses[c] = true))\n const isFocused = position?.col === col && position?.row === row\n let index: number | undefined\n if (!delegateFocus) {\n index = isFocused ? 0 : -1\n }\n const ring = !delegateFocus\n ? html`<md-focus-ring .inward=\"${this.overflow ? true : false}\"></md-focus-ring>`\n : nothing\n if (isPrimary) {\n // Lit does not allow dynamic element names so I decided to make a copy.\n return html`\n <th\n role=\"gridcell\"\n class=\"${classMap(cellClasses)}\"\n ${dataAttr(data)}\n aria-label=\"${ifDefined(ariaLabel)}\"\n tabindex=\"${ifDefined(index)}\"\n data-delegate=\"${ifDefined(delegateFocus ? true : undefined)}\"\n data-row=\"${row}\"\n data-col=\"${col}\"\n scope=\"row\"\n part=\"cell\"\n >\n ${ring}\n <div class=\"cell-content\">${content}</div>\n </th>\n `\n }\n return html`\n <td\n role=\"gridcell\"\n class=\"${classMap(cellClasses)}\"\n ${dataAttr(data)}\n aria-label=\"${ifDefined(ariaLabel)}\"\n tabindex=\"${ifDefined(index)}\"\n data-delegate=\"${ifDefined(delegateFocus ? true : undefined)}\"\n data-row=\"${row}\"\n data-col=\"${col}\"\n part=\"cell\"\n >\n ${ring}\n <div class=\"cell-content\">${content}</div>\n </td>\n `\n }\n\n /**\n * @internal\n * @description Returns the name of the icon to use for sorting indication.\n *\n * @returns The name of the Material Icon to use (either \"arrow_upward\" or \"arrow_downward\").\n */\n get sortIconName(): string {\n return this.sortDirection === 'asc' ? 'arrow_upward' : 'arrow_downward'\n }\n\n /**\n * @internal\n * A helper method to render a table header cell.\n *\n * @param content The content of the header cell.\n * @param opts Options for rendering the header cell (classes, data attributes).\n * @returns A `TemplateResult` representing the rendered header cell.\n */\n protected renderHeaderCell(content: unknown, col: number, opts: HeaderCellRenderOptions = {}): TemplateResult {\n const { position } = this\n const { data = {}, classes = [], sort, delegateFocus = false, ariaLabel } = opts\n const cellClasses: Record<string, boolean> = { 'grid-header': true }\n classes?.forEach((c) => (cellClasses[c] = true))\n const isSortable = !!sort\n const isSorted = this.sort === sort\n const sortIcon = isSorted ? this.sortIconName : undefined\n const isFocused = position?.col === col && position?.row === 0\n let index: number | undefined\n if (!delegateFocus) {\n index = isFocused ? 0 : -1\n }\n let ariaSort: 'ascending' | 'descending' | 'none' | undefined\n if (isSorted) {\n ariaSort = this.sortDirection === 'asc' ? 'ascending' : 'descending'\n } else if (isSortable) {\n ariaSort = 'none'\n }\n return html`<th\n role=\"columnheader\"\n scope=\"col\"\n class=\"${classMap(cellClasses)}\"\n ${dataAttr(data)}\n aria-sort=\"${ifDefined(ariaSort)}\"\n data-sort=\"${ifDefined(sort)}\"\n data-row=\"0\"\n data-col=\"${col}\"\n tabindex=\"${ifDefined(index)}\"\n data-delegate=\"${ifDefined(delegateFocus ? true : undefined)}\"\n aria-label=\"${ifDefined(ariaLabel)}\"\n part=\"header-cell\"\n >\n <md-focus-ring .inward=\"${this.overflow ? true : false}\"></md-focus-ring>\n <div class=\"cell-content\">\n ${content}\n ${isSortable && sortIcon ? html`<md-icon class=\"sort-icon\" role=\"presentation\">${sortIcon}</md-icon>` : nothing}\n </div>\n </th> `\n }\n}\n"]}
@@ -67,7 +67,7 @@ export default css `
67
67
  flex-shrink: 0;
68
68
  width: var(--_icon-size);
69
69
  height: var(--_icon-size);
70
- font-size: inherit;
70
+ font-size: var(--_icon-size);
71
71
  }
72
72
 
73
73
  /* Modern CSS: Container queries for responsive sizing */
@@ -1 +1 @@
1
- {"version":3,"file":"button.styles.js","sourceRoot":"","sources":["../../../../../src/md/button/internals/button.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,qEAAqE;AACrE,eAAe,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2TjB,CAAA","sourcesContent":["import { css } from 'lit'\n\n/* Material Design 3 Expressive Button - CSS-Native Implementation */\nexport default css`\n :host {\n all: unset;\n\n /* Layout and positioning */\n display: inline-flex;\n align-items: center;\n justify-content: center;\n position: relative;\n box-sizing: border-box;\n white-space: nowrap;\n\n /* Default sizing */\n min-height: 40px;\n min-width: 64px;\n padding-inline: 16px;\n gap: 8px;\n\n /* Typography from Material 3 tokens */\n font-family: var(--md-sys-typescale-label-large-font, var(--md-ref-typeface-plain, system-ui));\n font-size: var(--md-sys-typescale-label-large-size, 0.875rem);\n font-weight: var(--md-sys-typescale-label-large-weight, 500);\n line-height: var(--md-sys-typescale-label-large-height, 1.25);\n letter-spacing: var(--md-sys-typescale-label-large-tracking, 0.01em);\n\n --md-ripple-hover-state-layer-color: currentColor;\n --md-ripple-focus-state-layer-color: currentColor;\n --md-ripple-pressed-state-layer-color: currentColor;\n\n /* CSS custom property for pill radius - half of the button height */\n --_pill-radius: 20px;\n /* Default icon size */\n --_icon-size: var(--md-button-icon-size, 20px);\n --_background-color: transparent;\n --_color: inherit;\n --_shadow: var(--md-sys-elevation-0);\n\n border-end-end-radius: var(--ui-button-shape-end-end, var(--_pill-radius));\n border-end-start-radius: var(--ui-button-shape-end-start, var(--_pill-radius));\n border-start-end-radius: var(--ui-button-shape-start-end, var(--_pill-radius));\n border-start-start-radius: var(--ui-button-shape-start-start, var(--_pill-radius));\n background-color: var(--_background-color);\n color: var(--_color);\n box-shadow: var(--_shadow);\n\n /* Interaction styles */\n cursor: pointer;\n user-select: none;\n -webkit-tap-highlight-color: transparent;\n outline: none;\n\n transition:\n background-color var(--md-sys-motion-duration-short2, 200ms)\n var(--md-sys-motion-easing-standard, cubic-bezier(0.2, 0, 0, 1)),\n color var(--md-sys-motion-duration-short2, 200ms) var(--md-sys-motion-easing-standard, cubic-bezier(0.2, 0, 0, 1)),\n box-shadow var(--md-sys-motion-duration-short2, 200ms)\n var(--md-sys-motion-easing-standard, cubic-bezier(0.2, 0, 0, 1)),\n border-color var(--md-sys-motion-duration-short2, 200ms)\n var(--md-sys-motion-easing-standard, cubic-bezier(0.2, 0, 0, 1)),\n border-radius var(--md-sys-motion-duration-medium1) var(--md-sys-motion-easing-standard);\n }\n\n /* Icon styling */\n ::slotted([slot='icon']) {\n flex-shrink: 0;\n width: var(--_icon-size);\n height: var(--_icon-size);\n font-size: inherit;\n }\n\n /* Modern CSS: Container queries for responsive sizing */\n @container (min-width: 320px) {\n :host {\n min-width: 80px;\n }\n }\n\n .ripple {\n border-radius: inherit;\n transition: border-radius var(--md-sys-motion-duration-medium1) var(--md-sys-motion-easing-standard);\n }\n\n .ripple.activated {\n z-index: 1;\n }\n\n .focus-ring {\n --md-focus-ring-shape-end-end: var(--ui-button-shape-end-end, var(--_pill-radius));\n --md-focus-ring-shape-end-start: var(--ui-button-shape-end-start, var(--_pill-radius));\n --md-focus-ring-shape-start-end: var(--ui-button-shape-start-end, var(--_pill-radius));\n --md-focus-ring-shape-start-start: var(--ui-button-shape-start-start, var(--_pill-radius));\n transition: border-radius var(--md-sys-motion-duration-medium1) var(--md-sys-motion-easing-standard);\n }\n\n /* Disabled state */\n :host([disabled]) {\n background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent);\n color: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent);\n box-shadow: none;\n cursor: not-allowed;\n pointer-events: none;\n }\n\n /* Size Variations */\n :host([size='xs']) {\n min-height: 32px;\n padding-inline: 12px;\n font-size: var(--md-sys-typescale-label-medium-size, 0.75rem);\n gap: 6px;\n --_icon-size: 20px;\n }\n\n :host([size='s']) {\n min-height: 40px;\n padding-inline: 16px;\n --_icon-size: 20px;\n }\n\n :host([size='m']) {\n min-height: 56px;\n padding-inline: 24px;\n font-size: var(--md-sys-typescale-label-large-size, 1rem);\n gap: 10px;\n --_icon-size: 24px;\n }\n\n :host([size='l']) {\n min-height: 96px;\n padding-inline: 48px;\n font-size: var(--md-sys-typescale-title-medium-size, 1.125rem);\n gap: 12px;\n --_icon-size: 32px;\n }\n\n :host([size='xl']) {\n min-height: 136px;\n padding-inline: 64px;\n font-size: var(--md-sys-typescale-title-large-size, 1.375rem);\n gap: 16px;\n --_icon-size: 40px;\n }\n\n /* Pressed state is the same to all combinations of shape and size */\n :host([size='xs'].pressed),\n :host([size='s'].pressed) {\n --_pill-radius: 8px !important;\n }\n :host([size='m'].pressed) {\n --_pill-radius: 12px !important;\n }\n :host([size='xl'].pressed),\n :host([size='l'].pressed) {\n --_pill-radius: 16px !important;\n }\n\n /* Shape setup */\n /* For the round shape, we can't use the \"--md-sys-shape-corner-full\" value as it has a value of 999px and it would make animations impossible so see. */\n :host([toggle][selected][shape='square'][size='xs']),\n :host([shape='round'][size='xs']) {\n --_pill-radius: 16px; /* Half of 32px height */\n }\n :host([toggle][selected][shape='square'][size='s']),\n :host([shape='round'][size='s']) {\n --_pill-radius: 20px; /* Half of 40px height */\n }\n :host([toggle][selected][shape='square'][size='m']),\n :host([shape='round'][size='m']) {\n --_pill-radius: 28px; /* Half of 56px height */\n }\n :host([toggle][selected][shape='square'][size='l']),\n :host([shape='round'][size='l']) {\n --_pill-radius: 48px; /* Half of 96px height */\n }\n :host([toggle][selected][shape='square'][size='xl']),\n :host([shape='round'][size='xl']) {\n --_pill-radius: 68px; /* Half of 136px height */\n }\n\n :host([shape='square'][size='xs']),\n :host([shape='square'][size='s']) {\n --_pill-radius: var(--md-sys-shape-corner-medium);\n }\n\n :host([shape='square'][size='m']) {\n --_pill-radius: var(--md-sys-shape-corner-large);\n }\n\n :host([shape='square'][size='l']),\n :host([shape='square'][size='xl']) {\n --_pill-radius: var(--md-sys-shape-corner-extra-large);\n }\n\n /* Button Color Variants - Material 3 Expressive */\n\n /* Elevated Button */\n :host([color='elevated']) {\n --_background-color: var(--md-sys-color-surface-container-low);\n --_color: var(--md-sys-color-primary);\n --_shadow: var(--md-sys-elevation-1);\n }\n\n :host([color='elevated'][toggle][selected]) {\n --_background-color: var(--md-sys-color-primary);\n --_color: var(--md-sys-color-on-primary);\n }\n\n :host([color='elevated']:hover:not([disabled])) {\n --_shadow: var(--md-sys-elevation-2);\n }\n\n :host([color='elevated'][disabled]) {\n --_background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 10%, transparent);\n --_color: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent);\n --_shadow: var(--md-sys-elevation-0);\n }\n\n /* Filled Button */\n :host([color='filled']) {\n --_background-color: var(--md-sys-color-primary);\n --_color: var(--md-sys-color-on-primary);\n }\n\n :host([color='filled'][toggle]) {\n --_background-color: var(--md-sys-color-surface-container);\n --_color: var(--md-sys-color-on-surface-variant);\n }\n\n :host([color='filled'][toggle][selected]) {\n --_background-color: var(--md-sys-color-primary);\n --_color: var(--md-sys-color-on-primary);\n }\n\n :host([color='filled']:hover:not([disabled])) {\n --_shadow: var(--md-sys-elevation-1);\n }\n\n :host([color='filled'][disabled]) {\n --_background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 10%, transparent);\n --_color: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent);\n }\n\n /* Filled Tonal Button */\n :host([color='tonal']) {\n --_background-color: var(--md-sys-color-secondary-container);\n --_color: var(--md-sys-color-on-secondary-container);\n }\n\n :host([color='tonal'][toggle]) {\n --_background-color: var(--md-sys-color-secondary-container);\n --_color: var(--md-sys-color-on-secondary-container);\n }\n\n :host([color='tonal'][toggle][selected]) {\n --_background-color: var(--md-sys-color-secondary);\n --_color: var(--md-sys-color-on-secondary);\n }\n\n :host([color='tonal']:hover:not([disabled])) {\n --_shadow: var(--md-sys-elevation-1);\n }\n\n :host([color='tonal'][disabled]) {\n --_background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 10%, transparent);\n --_color: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent);\n }\n\n /* Outlined Button */\n :host([color='outlined']) {\n border: 1px var(--md-sys-color-outline-variant) solid;\n --_color: var(--md-sys-color-on-surface-variant);\n }\n\n :host([color='outlined'][toggle][selected]) {\n --_background-color: var(--md-sys-color-inverse-surface);\n --_color: var(--md-sys-color-inverse-on-surface);\n }\n\n :host([color='outlined'][disabled]) {\n border-color: color-mix(in srgb, var(--md-sys-color-on-surface) 10%, transparent);\n --_color: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent);\n }\n\n /* Text Button */\n :host([color='text']) {\n --_color: var(--md-sys-color-primary);\n }\n\n :host([color='text'][disabled]) {\n color: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent);\n }\n\n :host([toggle][selected][shape='round']) {\n --_pill-radius: var(--md-sys-shape-corner-medium);\n }\n\n /* Preference-based animations */\n @media (prefers-reduced-motion: reduce) {\n :host {\n transition-duration: 0.01ms;\n animation-duration: 0.01ms;\n }\n }\n\n /* High contrast mode support */\n @media (prefers-contrast: high) {\n :host {\n border-width: 2px;\n }\n\n :host([color='text']),\n :host([color='outlined']) {\n border-width: 2px;\n border-style: solid;\n }\n }\n`\n"]}
1
+ {"version":3,"file":"button.styles.js","sourceRoot":"","sources":["../../../../../src/md/button/internals/button.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,qEAAqE;AACrE,eAAe,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2TjB,CAAA","sourcesContent":["import { css } from 'lit'\n\n/* Material Design 3 Expressive Button - CSS-Native Implementation */\nexport default css`\n :host {\n all: unset;\n\n /* Layout and positioning */\n display: inline-flex;\n align-items: center;\n justify-content: center;\n position: relative;\n box-sizing: border-box;\n white-space: nowrap;\n\n /* Default sizing */\n min-height: 40px;\n min-width: 64px;\n padding-inline: 16px;\n gap: 8px;\n\n /* Typography from Material 3 tokens */\n font-family: var(--md-sys-typescale-label-large-font, var(--md-ref-typeface-plain, system-ui));\n font-size: var(--md-sys-typescale-label-large-size, 0.875rem);\n font-weight: var(--md-sys-typescale-label-large-weight, 500);\n line-height: var(--md-sys-typescale-label-large-height, 1.25);\n letter-spacing: var(--md-sys-typescale-label-large-tracking, 0.01em);\n\n --md-ripple-hover-state-layer-color: currentColor;\n --md-ripple-focus-state-layer-color: currentColor;\n --md-ripple-pressed-state-layer-color: currentColor;\n\n /* CSS custom property for pill radius - half of the button height */\n --_pill-radius: 20px;\n /* Default icon size */\n --_icon-size: var(--md-button-icon-size, 20px);\n --_background-color: transparent;\n --_color: inherit;\n --_shadow: var(--md-sys-elevation-0);\n\n border-end-end-radius: var(--ui-button-shape-end-end, var(--_pill-radius));\n border-end-start-radius: var(--ui-button-shape-end-start, var(--_pill-radius));\n border-start-end-radius: var(--ui-button-shape-start-end, var(--_pill-radius));\n border-start-start-radius: var(--ui-button-shape-start-start, var(--_pill-radius));\n background-color: var(--_background-color);\n color: var(--_color);\n box-shadow: var(--_shadow);\n\n /* Interaction styles */\n cursor: pointer;\n user-select: none;\n -webkit-tap-highlight-color: transparent;\n outline: none;\n\n transition:\n background-color var(--md-sys-motion-duration-short2, 200ms)\n var(--md-sys-motion-easing-standard, cubic-bezier(0.2, 0, 0, 1)),\n color var(--md-sys-motion-duration-short2, 200ms) var(--md-sys-motion-easing-standard, cubic-bezier(0.2, 0, 0, 1)),\n box-shadow var(--md-sys-motion-duration-short2, 200ms)\n var(--md-sys-motion-easing-standard, cubic-bezier(0.2, 0, 0, 1)),\n border-color var(--md-sys-motion-duration-short2, 200ms)\n var(--md-sys-motion-easing-standard, cubic-bezier(0.2, 0, 0, 1)),\n border-radius var(--md-sys-motion-duration-medium1) var(--md-sys-motion-easing-standard);\n }\n\n /* Icon styling */\n ::slotted([slot='icon']) {\n flex-shrink: 0;\n width: var(--_icon-size);\n height: var(--_icon-size);\n font-size: var(--_icon-size);\n }\n\n /* Modern CSS: Container queries for responsive sizing */\n @container (min-width: 320px) {\n :host {\n min-width: 80px;\n }\n }\n\n .ripple {\n border-radius: inherit;\n transition: border-radius var(--md-sys-motion-duration-medium1) var(--md-sys-motion-easing-standard);\n }\n\n .ripple.activated {\n z-index: 1;\n }\n\n .focus-ring {\n --md-focus-ring-shape-end-end: var(--ui-button-shape-end-end, var(--_pill-radius));\n --md-focus-ring-shape-end-start: var(--ui-button-shape-end-start, var(--_pill-radius));\n --md-focus-ring-shape-start-end: var(--ui-button-shape-start-end, var(--_pill-radius));\n --md-focus-ring-shape-start-start: var(--ui-button-shape-start-start, var(--_pill-radius));\n transition: border-radius var(--md-sys-motion-duration-medium1) var(--md-sys-motion-easing-standard);\n }\n\n /* Disabled state */\n :host([disabled]) {\n background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent);\n color: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent);\n box-shadow: none;\n cursor: not-allowed;\n pointer-events: none;\n }\n\n /* Size Variations */\n :host([size='xs']) {\n min-height: 32px;\n padding-inline: 12px;\n font-size: var(--md-sys-typescale-label-medium-size, 0.75rem);\n gap: 6px;\n --_icon-size: 20px;\n }\n\n :host([size='s']) {\n min-height: 40px;\n padding-inline: 16px;\n --_icon-size: 20px;\n }\n\n :host([size='m']) {\n min-height: 56px;\n padding-inline: 24px;\n font-size: var(--md-sys-typescale-label-large-size, 1rem);\n gap: 10px;\n --_icon-size: 24px;\n }\n\n :host([size='l']) {\n min-height: 96px;\n padding-inline: 48px;\n font-size: var(--md-sys-typescale-title-medium-size, 1.125rem);\n gap: 12px;\n --_icon-size: 32px;\n }\n\n :host([size='xl']) {\n min-height: 136px;\n padding-inline: 64px;\n font-size: var(--md-sys-typescale-title-large-size, 1.375rem);\n gap: 16px;\n --_icon-size: 40px;\n }\n\n /* Pressed state is the same to all combinations of shape and size */\n :host([size='xs'].pressed),\n :host([size='s'].pressed) {\n --_pill-radius: 8px !important;\n }\n :host([size='m'].pressed) {\n --_pill-radius: 12px !important;\n }\n :host([size='xl'].pressed),\n :host([size='l'].pressed) {\n --_pill-radius: 16px !important;\n }\n\n /* Shape setup */\n /* For the round shape, we can't use the \"--md-sys-shape-corner-full\" value as it has a value of 999px and it would make animations impossible so see. */\n :host([toggle][selected][shape='square'][size='xs']),\n :host([shape='round'][size='xs']) {\n --_pill-radius: 16px; /* Half of 32px height */\n }\n :host([toggle][selected][shape='square'][size='s']),\n :host([shape='round'][size='s']) {\n --_pill-radius: 20px; /* Half of 40px height */\n }\n :host([toggle][selected][shape='square'][size='m']),\n :host([shape='round'][size='m']) {\n --_pill-radius: 28px; /* Half of 56px height */\n }\n :host([toggle][selected][shape='square'][size='l']),\n :host([shape='round'][size='l']) {\n --_pill-radius: 48px; /* Half of 96px height */\n }\n :host([toggle][selected][shape='square'][size='xl']),\n :host([shape='round'][size='xl']) {\n --_pill-radius: 68px; /* Half of 136px height */\n }\n\n :host([shape='square'][size='xs']),\n :host([shape='square'][size='s']) {\n --_pill-radius: var(--md-sys-shape-corner-medium);\n }\n\n :host([shape='square'][size='m']) {\n --_pill-radius: var(--md-sys-shape-corner-large);\n }\n\n :host([shape='square'][size='l']),\n :host([shape='square'][size='xl']) {\n --_pill-radius: var(--md-sys-shape-corner-extra-large);\n }\n\n /* Button Color Variants - Material 3 Expressive */\n\n /* Elevated Button */\n :host([color='elevated']) {\n --_background-color: var(--md-sys-color-surface-container-low);\n --_color: var(--md-sys-color-primary);\n --_shadow: var(--md-sys-elevation-1);\n }\n\n :host([color='elevated'][toggle][selected]) {\n --_background-color: var(--md-sys-color-primary);\n --_color: var(--md-sys-color-on-primary);\n }\n\n :host([color='elevated']:hover:not([disabled])) {\n --_shadow: var(--md-sys-elevation-2);\n }\n\n :host([color='elevated'][disabled]) {\n --_background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 10%, transparent);\n --_color: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent);\n --_shadow: var(--md-sys-elevation-0);\n }\n\n /* Filled Button */\n :host([color='filled']) {\n --_background-color: var(--md-sys-color-primary);\n --_color: var(--md-sys-color-on-primary);\n }\n\n :host([color='filled'][toggle]) {\n --_background-color: var(--md-sys-color-surface-container);\n --_color: var(--md-sys-color-on-surface-variant);\n }\n\n :host([color='filled'][toggle][selected]) {\n --_background-color: var(--md-sys-color-primary);\n --_color: var(--md-sys-color-on-primary);\n }\n\n :host([color='filled']:hover:not([disabled])) {\n --_shadow: var(--md-sys-elevation-1);\n }\n\n :host([color='filled'][disabled]) {\n --_background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 10%, transparent);\n --_color: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent);\n }\n\n /* Filled Tonal Button */\n :host([color='tonal']) {\n --_background-color: var(--md-sys-color-secondary-container);\n --_color: var(--md-sys-color-on-secondary-container);\n }\n\n :host([color='tonal'][toggle]) {\n --_background-color: var(--md-sys-color-secondary-container);\n --_color: var(--md-sys-color-on-secondary-container);\n }\n\n :host([color='tonal'][toggle][selected]) {\n --_background-color: var(--md-sys-color-secondary);\n --_color: var(--md-sys-color-on-secondary);\n }\n\n :host([color='tonal']:hover:not([disabled])) {\n --_shadow: var(--md-sys-elevation-1);\n }\n\n :host([color='tonal'][disabled]) {\n --_background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 10%, transparent);\n --_color: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent);\n }\n\n /* Outlined Button */\n :host([color='outlined']) {\n border: 1px var(--md-sys-color-outline-variant) solid;\n --_color: var(--md-sys-color-on-surface-variant);\n }\n\n :host([color='outlined'][toggle][selected]) {\n --_background-color: var(--md-sys-color-inverse-surface);\n --_color: var(--md-sys-color-inverse-on-surface);\n }\n\n :host([color='outlined'][disabled]) {\n border-color: color-mix(in srgb, var(--md-sys-color-on-surface) 10%, transparent);\n --_color: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent);\n }\n\n /* Text Button */\n :host([color='text']) {\n --_color: var(--md-sys-color-primary);\n }\n\n :host([color='text'][disabled]) {\n color: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent);\n }\n\n :host([toggle][selected][shape='round']) {\n --_pill-radius: var(--md-sys-shape-corner-medium);\n }\n\n /* Preference-based animations */\n @media (prefers-reduced-motion: reduce) {\n :host {\n transition-duration: 0.01ms;\n animation-duration: 0.01ms;\n }\n }\n\n /* High contrast mode support */\n @media (prefers-contrast: high) {\n :host {\n border-width: 2px;\n }\n\n :host([color='text']),\n :host([color='outlined']) {\n border-width: 2px;\n border-style: solid;\n }\n }\n`\n"]}
@@ -1 +1 @@
1
- {"version":3,"file":"Dialog.styles.d.ts","sourceRoot":"","sources":["../../../../../src/md/dialog/internals/Dialog.styles.ts"],"names":[],"mappings":";AAEA,wBA4HC"}
1
+ {"version":3,"file":"Dialog.styles.d.ts","sourceRoot":"","sources":["../../../../../src/md/dialog/internals/Dialog.styles.ts"],"names":[],"mappings":";AAEA,wBAsHC"}
@@ -10,7 +10,7 @@ export default css `
10
10
 
11
11
  border: none;
12
12
  border-radius: var(--md-sys-shape-corner-extra-large);
13
- background-color: var(--md-sys-color-surface);
13
+ background-color: var(--md-sys-color-surface-container-high);
14
14
  box-shadow: var(--md-sys-elevation-3);
15
15
  color: var(--md-sys-color-on-surface-variant);
16
16
  padding: 24px;
@@ -21,16 +21,6 @@ export default css `
21
21
  height: var(--ui-dialog-height, revert);
22
22
  }
23
23
 
24
- dialog::after {
25
- content: '';
26
- position: absolute;
27
- inset: 0;
28
- border-radius: inherit;
29
- background-color: var(--md-sys-color-surface-tint);
30
- opacity: 0.11;
31
- pointer-events: none;
32
- }
33
-
34
24
  dialog:open {
35
25
  animation: 250ms cubic-bezier(0.2, 0, 0, 1) show-dialog;
36
26
  }
@@ -106,6 +96,10 @@ export default css `
106
96
  margin-right: 12px;
107
97
  }
108
98
 
99
+ .content ::slotted(*) {
100
+ background-color: var(--md-sys-color-surface-container-high);
101
+ }
102
+
109
103
  @keyframes show-dialog {
110
104
  from {
111
105
  transform: translateY(-110%) scaleY(0);
@@ -1 +1 @@
1
- {"version":3,"file":"Dialog.styles.js","sourceRoot":"","sources":["../../../../../src/md/dialog/internals/Dialog.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,eAAe,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4HjB,CAAA","sourcesContent":["import { css } from 'lit'\n\nexport default css`\n :host {\n display: contents;\n }\n\n dialog {\n overflow: hidden;\n /* Do not override the display value here. It will render the dialog even when hidden */\n\n border: none;\n border-radius: var(--md-sys-shape-corner-extra-large);\n background-color: var(--md-sys-color-surface);\n box-shadow: var(--md-sys-elevation-3);\n color: var(--md-sys-color-on-surface-variant);\n padding: 24px;\n\n max-width: var(--ui-dialog-max-width, revert);\n max-height: var(--ui-dialog-max-height, revert);\n width: var(--ui-dialog-width, revert);\n height: var(--ui-dialog-height, revert);\n }\n\n dialog::after {\n content: '';\n position: absolute;\n inset: 0;\n border-radius: inherit;\n background-color: var(--md-sys-color-surface-tint);\n opacity: 0.11;\n pointer-events: none;\n }\n\n dialog:open {\n animation: 250ms cubic-bezier(0.2, 0, 0, 1) show-dialog;\n }\n\n dialog:open::backdrop {\n animation: 250ms cubic-bezier(0.2, 0, 0, 1) show-backdrop;\n }\n\n .container {\n display: flex;\n flex-direction: column;\n }\n\n .icon {\n display: none;\n }\n\n .icon.with-icon {\n display: flex;\n align-items: center;\n justify-content: center;\n margin-bottom: 16px;\n }\n\n .icon ::slotted(*) {\n color: var(--md-sys-color-secondary);\n fill: var(--md-sys-color-secondary);\n width: 24px;\n height: 24px;\n }\n\n .title {\n display: none;\n color: var(--md-sys-color-on-surface);\n font-family: var(--md-sys-typescale-headline-small-font);\n font-weight: var(--md-sys-typescale-headline-small-weight);\n font-size: var(--md-sys-typescale-headline-small-size);\n letter-spacing: var(--md-sys-typescale-headline-small-tracking);\n line-height: var(--md-sys-typescale-headline-small-height);\n margin: 0;\n padding: 0;\n text-align: center;\n }\n\n .title.with-title {\n display: flex;\n align-items: center;\n justify-content: center;\n margin-bottom: 16px;\n }\n\n .content {\n overflow: auto;\n font-family: var(--md-sys-typescale-body-medium-font);\n font-weight: var(--md-sys-typescale-body-medium-weight);\n font-size: var(--md-sys-typescale-body-medium-size);\n letter-spacing: var(--md-sys-typescale-body-medium-tracking);\n line-height: var(--md-sys-typescale-body-medium-height);\n }\n\n .buttons {\n display: none;\n display: flex;\n align-items: center;\n justify-content: end;\n }\n\n .buttons.with-buttons {\n margin-top: 24px;\n }\n\n .buttons ::slotted(:not(:last-child)) {\n margin-right: 12px;\n }\n\n @keyframes show-dialog {\n from {\n transform: translateY(-110%) scaleY(0);\n }\n to {\n transform: translateY(0%) scaleY(1);\n }\n }\n\n @keyframes show-backdrop {\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n }\n`\n"]}
1
+ {"version":3,"file":"Dialog.styles.js","sourceRoot":"","sources":["../../../../../src/md/dialog/internals/Dialog.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,eAAe,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsHjB,CAAA","sourcesContent":["import { css } from 'lit'\n\nexport default css`\n :host {\n display: contents;\n }\n\n dialog {\n overflow: hidden;\n /* Do not override the display value here. It will render the dialog even when hidden */\n\n border: none;\n border-radius: var(--md-sys-shape-corner-extra-large);\n background-color: var(--md-sys-color-surface-container-high);\n box-shadow: var(--md-sys-elevation-3);\n color: var(--md-sys-color-on-surface-variant);\n padding: 24px;\n\n max-width: var(--ui-dialog-max-width, revert);\n max-height: var(--ui-dialog-max-height, revert);\n width: var(--ui-dialog-width, revert);\n height: var(--ui-dialog-height, revert);\n }\n\n dialog:open {\n animation: 250ms cubic-bezier(0.2, 0, 0, 1) show-dialog;\n }\n\n dialog:open::backdrop {\n animation: 250ms cubic-bezier(0.2, 0, 0, 1) show-backdrop;\n }\n\n .container {\n display: flex;\n flex-direction: column;\n }\n\n .icon {\n display: none;\n }\n\n .icon.with-icon {\n display: flex;\n align-items: center;\n justify-content: center;\n margin-bottom: 16px;\n }\n\n .icon ::slotted(*) {\n color: var(--md-sys-color-secondary);\n fill: var(--md-sys-color-secondary);\n width: 24px;\n height: 24px;\n }\n\n .title {\n display: none;\n color: var(--md-sys-color-on-surface);\n font-family: var(--md-sys-typescale-headline-small-font);\n font-weight: var(--md-sys-typescale-headline-small-weight);\n font-size: var(--md-sys-typescale-headline-small-size);\n letter-spacing: var(--md-sys-typescale-headline-small-tracking);\n line-height: var(--md-sys-typescale-headline-small-height);\n margin: 0;\n padding: 0;\n text-align: center;\n }\n\n .title.with-title {\n display: flex;\n align-items: center;\n justify-content: center;\n margin-bottom: 16px;\n }\n\n .content {\n overflow: auto;\n font-family: var(--md-sys-typescale-body-medium-font);\n font-weight: var(--md-sys-typescale-body-medium-weight);\n font-size: var(--md-sys-typescale-body-medium-size);\n letter-spacing: var(--md-sys-typescale-body-medium-tracking);\n line-height: var(--md-sys-typescale-body-medium-height);\n }\n\n .buttons {\n display: none;\n display: flex;\n align-items: center;\n justify-content: end;\n }\n\n .buttons.with-buttons {\n margin-top: 24px;\n }\n\n .buttons ::slotted(:not(:last-child)) {\n margin-right: 12px;\n }\n\n .content ::slotted(*) {\n background-color: var(--md-sys-color-surface-container-high);\n }\n\n @keyframes show-dialog {\n from {\n transform: translateY(-110%) scaleY(0);\n }\n to {\n transform: translateY(0%) scaleY(1);\n }\n }\n\n @keyframes show-backdrop {\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n }\n`\n"]}
@@ -53,11 +53,11 @@ export default css `
53
53
  .labelActive .label {
54
54
  transform: translateY(calc(-100% - 2px)) scale(0.75);
55
55
  position: absolute;
56
- background-color: var(--md-sys-color-surface);
56
+ background-color: var(--md-outlined-text-field-label-active-background-color, var(--md-sys-color-surface));
57
57
  }
58
58
 
59
59
  :host(:focus-within) .label {
60
- color: var(--md-sys-color-primary);
60
+ color: var(--md-outlined-text-field-label-active-color, var(--md-sys-color-primary));
61
61
  }
62
62
  `;
63
63
  //# sourceMappingURL=outlined.styles.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"outlined.styles.js","sourceRoot":"","sources":["../../../../../src/md/text-field/internals/outlined.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,eAAe,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4DjB,CAAA","sourcesContent":["import { css } from 'lit'\n\nexport default css`\n :host {\n --_border-color: var(--md-sys-color-outline);\n --_outline-color: var(--md-sys-color-primary);\n --_outline-width: 0px;\n }\n\n .highlight {\n display: none;\n }\n\n .surface {\n border-radius: var(--md-sys-shape-corner-extra-small);\n }\n\n .container {\n border: 1px var(--_border-color) solid;\n outline: var(--_outline-width) solid var(--_outline-color);\n outline-offset: calc(-1 * var(--_outline-width));\n transition:\n border-color 150ms cubic-bezier(0.4, 0, 0.2, 1),\n outline-width 150ms cubic-bezier(0.4, 0, 0.2, 1),\n outline-offset 150ms cubic-bezier(0.4, 0, 0.2, 1);\n }\n\n :host(:hover:not(:focus-within):not([invalid])) {\n --_border-color: var(--md-sys-color-on-surface);\n }\n\n :host(:focus-within:not([invalid])) {\n --_border-color: var(--md-sys-color-primary);\n }\n\n :host(:focus-within) {\n --_outline-width: 3px;\n }\n\n :host([invalid]) {\n --_border-color: var(--md-sys-color-error);\n --_outline-color: var(--md-sys-color-error);\n }\n\n :host([invalid]:hover) {\n --_outline-color: var(--md-sys-color-on-error-container);\n --_border-color: var(--md-sys-color-on-error-container);\n }\n\n .label {\n padding: 0 4px;\n }\n\n .labelActive .label {\n transform: translateY(calc(-100% - 2px)) scale(0.75);\n position: absolute;\n background-color: var(--md-sys-color-surface);\n }\n\n :host(:focus-within) .label {\n color: var(--md-sys-color-primary);\n }\n`\n"]}
1
+ {"version":3,"file":"outlined.styles.js","sourceRoot":"","sources":["../../../../../src/md/text-field/internals/outlined.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,eAAe,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4DjB,CAAA","sourcesContent":["import { css } from 'lit'\n\nexport default css`\n :host {\n --_border-color: var(--md-sys-color-outline);\n --_outline-color: var(--md-sys-color-primary);\n --_outline-width: 0px;\n }\n\n .highlight {\n display: none;\n }\n\n .surface {\n border-radius: var(--md-sys-shape-corner-extra-small);\n }\n\n .container {\n border: 1px var(--_border-color) solid;\n outline: var(--_outline-width) solid var(--_outline-color);\n outline-offset: calc(-1 * var(--_outline-width));\n transition:\n border-color 150ms cubic-bezier(0.4, 0, 0.2, 1),\n outline-width 150ms cubic-bezier(0.4, 0, 0.2, 1),\n outline-offset 150ms cubic-bezier(0.4, 0, 0.2, 1);\n }\n\n :host(:hover:not(:focus-within):not([invalid])) {\n --_border-color: var(--md-sys-color-on-surface);\n }\n\n :host(:focus-within:not([invalid])) {\n --_border-color: var(--md-sys-color-primary);\n }\n\n :host(:focus-within) {\n --_outline-width: 3px;\n }\n\n :host([invalid]) {\n --_border-color: var(--md-sys-color-error);\n --_outline-color: var(--md-sys-color-error);\n }\n\n :host([invalid]:hover) {\n --_outline-color: var(--md-sys-color-on-error-container);\n --_border-color: var(--md-sys-color-on-error-container);\n }\n\n .label {\n padding: 0 4px;\n }\n\n .labelActive .label {\n transform: translateY(calc(-100% - 2px)) scale(0.75);\n position: absolute;\n background-color: var(--md-outlined-text-field-label-active-background-color, var(--md-sys-color-surface));\n }\n\n :host(:focus-within) .label {\n color: var(--md-outlined-text-field-label-active-color, var(--md-sys-color-primary));\n }\n`\n"]}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@api-client/ui",
3
- "version": "0.3.4",
3
+ "version": "0.3.6",
4
4
  "description": "Internal UI component library for the API Client ecosystem.",
5
5
  "license": "UNLICENSED",
6
6
  "main": "build/src/index.js",
@@ -218,7 +218,7 @@
218
218
  "lint-staged": "^16.0.0",
219
219
  "oauth2-mock-server": "^8.0.0",
220
220
  "prettier": "^3.5.1",
221
- "sinon": "^20.0.0",
221
+ "sinon": "^21.0.0",
222
222
  "ts-lit-plugin": "^2.0.2",
223
223
  "typescript": "^5.5.2",
224
224
  "typescript-eslint": "^8.24.1",
@@ -3,6 +3,7 @@ import { html, LitElement, nothing, PropertyValues, TemplateResult } from 'lit'
3
3
  import { property, state } from 'lit/decorators.js'
4
4
  import { classMap } from 'lit/directives/class-map.js'
5
5
  import { ref, createRef } from 'lit/directives/ref.js'
6
+ import { ifDefined } from 'lit/directives/if-defined.js'
6
7
  import { dataAttr } from '../../directives/data-attr.js'
7
8
  import { LiveData } from '../../reactive/LiveData.js'
8
9
 
@@ -10,7 +11,6 @@ import '@material/web/icon/icon.js'
10
11
  import '@material/web/menu/menu.js'
11
12
  import '@material/web/menu/menu-item.js'
12
13
  import '@material/web/focus/md-focus-ring.js'
13
- import { ifDefined } from 'lit/directives/if-defined.js'
14
14
 
15
15
  /**
16
16
  * Options for rendering a table cell.
@@ -359,14 +359,63 @@ export abstract class DataTable<T extends object> extends LitElement {
359
359
  )
360
360
  if (filteredSelectedItems.length !== selectedItems.length) {
361
361
  this.selectedItems = filteredSelectedItems
362
- this.dispatchEvent(
363
- new CustomEvent('select', {
364
- detail: { selectedItems: this.selectedItems },
365
- })
366
- )
362
+ this.notifySelect(filteredSelectedItems)
367
363
  }
368
364
  }
369
365
 
366
+ /**
367
+ * Notifies about the selection change.
368
+ *
369
+ * This method dispatches a `select` event with the currently selected items.
370
+ *
371
+ * @param selectedItems - The array of currently selected items.
372
+ */
373
+ protected notifySelect(selectedItems: T[]): void {
374
+ this.dispatchEvent(new CustomEvent('select', { detail: { selectedItems } }))
375
+ }
376
+
377
+ /**
378
+ * Notifies about the scroll end event.
379
+ *
380
+ * This method dispatches a `scrollend` event when the user scrolls to the bottom of the table.
381
+ * It is typically used in conjunction with the `overflow` property to implement infinite scrolling.
382
+ */
383
+ protected notifyScrollEnd(): void {
384
+ this.dispatchEvent(new CustomEvent('scrollend'))
385
+ }
386
+
387
+ /**
388
+ * Notifies about the activation of a row.
389
+ *
390
+ * This method dispatches an `activate` event with the activated item.
391
+ * It is typically used when a row is double-clicked or when the Enter/Space key is pressed while focused on a row.
392
+ *
393
+ * @param item - The data item that was activated.
394
+ */
395
+ protected notifyActivate(item: T): void {
396
+ this.dispatchEvent(new CustomEvent('activate', { detail: item }))
397
+ }
398
+
399
+ /**
400
+ * Notifies about the sorting action.
401
+ *
402
+ * This method dispatches a `sort` event with the column name and sort direction.
403
+ * It is typically used when a sortable header cell is clicked.
404
+ *
405
+ * @param column - The name of the column being sorted.
406
+ * @param direction - The sort direction, either "asc" (ascending) or "desc" (descending).
407
+ */
408
+ protected notifySort(column: string, direction: 'asc' | 'desc'): void {
409
+ this.dispatchEvent(
410
+ new CustomEvent('sort', {
411
+ detail: {
412
+ column,
413
+ direction,
414
+ },
415
+ })
416
+ )
417
+ }
418
+
370
419
  /**
371
420
  * @internal
372
421
  * @description Handles the intersection of the sentinel element with the viewport.
@@ -379,7 +428,7 @@ export abstract class DataTable<T extends object> extends LitElement {
379
428
  */
380
429
  handleIntersection: IntersectionObserverCallback = (entries): void => {
381
430
  if (entries.some((entry) => entry.isIntersecting)) {
382
- this.dispatchEvent(new CustomEvent('scrollend'))
431
+ this.notifyScrollEnd()
383
432
  }
384
433
  }
385
434
 
@@ -677,7 +726,7 @@ export abstract class DataTable<T extends object> extends LitElement {
677
726
  const endIndex = Math.max(this.lastSelectedIndex, clickedIndex)
678
727
  const newSelectedItems = this.items.value.slice(startIndex, endIndex + 1)
679
728
  this.selectedItems = newSelectedItems as T[]
680
- this.dispatchEvent(new CustomEvent('select', { detail: { selectedItems: this.selectedItems } }))
729
+ this.notifySelect(newSelectedItems)
681
730
  }
682
731
 
683
732
  /**
@@ -702,7 +751,7 @@ export abstract class DataTable<T extends object> extends LitElement {
702
751
  if (!item) {
703
752
  return
704
753
  }
705
- this.dispatchEvent(new CustomEvent('activate', { detail: item }))
754
+ this.notifyActivate(item)
706
755
  }
707
756
 
708
757
  /**
@@ -725,14 +774,7 @@ export abstract class DataTable<T extends object> extends LitElement {
725
774
  this.sort = sort
726
775
  this.sortDirection = 'asc'
727
776
  }
728
- this.dispatchEvent(
729
- new CustomEvent('sort', {
730
- detail: {
731
- column: this.sort,
732
- direction: this.sortDirection,
733
- },
734
- })
735
- )
777
+ this.notifySort(this.sort, this.sortDirection)
736
778
  }
737
779
 
738
780
  /**
@@ -775,7 +817,7 @@ export abstract class DataTable<T extends object> extends LitElement {
775
817
  }
776
818
  }
777
819
 
778
- this.dispatchEvent(new CustomEvent('select', { detail: { selectedItems: this.selectedItems } }))
820
+ this.notifySelect(this.selectedItems)
779
821
  }
780
822
 
781
823
  /**
@@ -68,7 +68,7 @@ export default css`
68
68
  flex-shrink: 0;
69
69
  width: var(--_icon-size);
70
70
  height: var(--_icon-size);
71
- font-size: inherit;
71
+ font-size: var(--_icon-size);
72
72
  }
73
73
 
74
74
  /* Modern CSS: Container queries for responsive sizing */
@@ -11,7 +11,7 @@ export default css`
11
11
 
12
12
  border: none;
13
13
  border-radius: var(--md-sys-shape-corner-extra-large);
14
- background-color: var(--md-sys-color-surface);
14
+ background-color: var(--md-sys-color-surface-container-high);
15
15
  box-shadow: var(--md-sys-elevation-3);
16
16
  color: var(--md-sys-color-on-surface-variant);
17
17
  padding: 24px;
@@ -22,16 +22,6 @@ export default css`
22
22
  height: var(--ui-dialog-height, revert);
23
23
  }
24
24
 
25
- dialog::after {
26
- content: '';
27
- position: absolute;
28
- inset: 0;
29
- border-radius: inherit;
30
- background-color: var(--md-sys-color-surface-tint);
31
- opacity: 0.11;
32
- pointer-events: none;
33
- }
34
-
35
25
  dialog:open {
36
26
  animation: 250ms cubic-bezier(0.2, 0, 0, 1) show-dialog;
37
27
  }
@@ -107,6 +97,10 @@ export default css`
107
97
  margin-right: 12px;
108
98
  }
109
99
 
100
+ .content ::slotted(*) {
101
+ background-color: var(--md-sys-color-surface-container-high);
102
+ }
103
+
110
104
  @keyframes show-dialog {
111
105
  from {
112
106
  transform: translateY(-110%) scaleY(0);
@@ -54,10 +54,10 @@ export default css`
54
54
  .labelActive .label {
55
55
  transform: translateY(calc(-100% - 2px)) scale(0.75);
56
56
  position: absolute;
57
- background-color: var(--md-sys-color-surface);
57
+ background-color: var(--md-outlined-text-field-label-active-background-color, var(--md-sys-color-surface));
58
58
  }
59
59
 
60
60
  :host(:focus-within) .label {
61
- color: var(--md-sys-color-primary);
61
+ color: var(--md-outlined-text-field-label-active-color, var(--md-sys-color-primary));
62
62
  }
63
63
  `
@@ -1,18 +0,0 @@
1
- import { BroadcastCreatedEvent, DeletedBroadcastEvent } from '@api-client/core/models/store/Backend.js';
2
- import { type IRequestUiMeta, Kind as RequestUiMetaKind } from '@api-client/core/models/RequestUiMeta.js';
3
- /**
4
- * @deprecated
5
- */
6
- export interface ProjectUiCreatedBroadcastEvent extends BroadcastCreatedEvent {
7
- project: string;
8
- kind: typeof RequestUiMetaKind;
9
- data: IRequestUiMeta;
10
- }
11
- /**
12
- * @deprecated
13
- */
14
- export interface ProjectUiDeletedBroadcastEvent extends DeletedBroadcastEvent {
15
- project: string;
16
- kind: typeof RequestUiMetaKind;
17
- }
18
- //# sourceMappingURL=BroadcastUiEvents.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"BroadcastUiEvents.d.ts","sourceRoot":"","sources":["../../../src/events/BroadcastUiEvents.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,qBAAqB,EAAE,qBAAqB,EAAE,MAAM,0CAA0C,CAAA;AACvG,OAAO,EAAE,KAAK,cAAc,EAAE,IAAI,IAAI,iBAAiB,EAAE,MAAM,0CAA0C,CAAA;AAEzG;;GAEG;AACH,MAAM,WAAW,8BAA+B,SAAQ,qBAAqB;IAC3E,OAAO,EAAE,MAAM,CAAA;IACf,IAAI,EAAE,OAAO,iBAAiB,CAAA;IAC9B,IAAI,EAAE,cAAc,CAAA;CACrB;AAED;;GAEG;AACH,MAAM,WAAW,8BAA+B,SAAQ,qBAAqB;IAC3E,OAAO,EAAE,MAAM,CAAA;IACf,IAAI,EAAE,OAAO,iBAAiB,CAAA;CAC/B"}
@@ -1,2 +0,0 @@
1
- export {};
2
- //# sourceMappingURL=BroadcastUiEvents.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"BroadcastUiEvents.js","sourceRoot":"","sources":["../../../src/events/BroadcastUiEvents.ts"],"names":[],"mappings":"","sourcesContent":["import { BroadcastCreatedEvent, DeletedBroadcastEvent } from '@api-client/core/models/store/Backend.js'\nimport { type IRequestUiMeta, Kind as RequestUiMetaKind } from '@api-client/core/models/RequestUiMeta.js'\n\n/**\n * @deprecated\n */\nexport interface ProjectUiCreatedBroadcastEvent extends BroadcastCreatedEvent {\n project: string\n kind: typeof RequestUiMetaKind\n data: IRequestUiMeta\n}\n\n/**\n * @deprecated\n */\nexport interface ProjectUiDeletedBroadcastEvent extends DeletedBroadcastEvent {\n project: string\n kind: typeof RequestUiMetaKind\n}\n"]}
@@ -1,19 +0,0 @@
1
- import { BroadcastCreatedEvent, DeletedBroadcastEvent } from '@api-client/core/models/store/Backend.js'
2
- import { type IRequestUiMeta, Kind as RequestUiMetaKind } from '@api-client/core/models/RequestUiMeta.js'
3
-
4
- /**
5
- * @deprecated
6
- */
7
- export interface ProjectUiCreatedBroadcastEvent extends BroadcastCreatedEvent {
8
- project: string
9
- kind: typeof RequestUiMetaKind
10
- data: IRequestUiMeta
11
- }
12
-
13
- /**
14
- * @deprecated
15
- */
16
- export interface ProjectUiDeletedBroadcastEvent extends DeletedBroadcastEvent {
17
- project: string
18
- kind: typeof RequestUiMetaKind
19
- }