npm - @francofantomius/material-components - Versions diffs - 1.1.1 → 1.2.0 - Mend

@francofantomius/material-components 1.1.1 → 1.2.0

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.

Files changed (380) hide show

package/dist/chunks/{table-CqHnneAj.js.map → table-C5rCvdFc.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"table-CqHnneAj.js","names":[],"sources":["../../src/components/table/table.css.ts","../../src/components/table/table.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const tableStyles = css`\n :host {\n display: block;\n width: 100%;\n position: relative;\n box-sizing: border-box;\n font-family: var(--md-sys-typescale-font-family, inherit);\n background-color: var(--md-sys-color-surface, #FEF7FF);\n color: var(--md-sys-color-on-surface, #1D1B20);\n border-radius: var(--md-sys-shape-corner-medium, 12px);\n overflow: hidden;\n transition: box-shadow 200ms cubic-bezier(0.2, 0, 0, 1),\n background-color 200ms cubic-bezier(0.2, 0, 0, 1);\n }\n\n :host([bordered]) {\n border: 1px solid var(--md-sys-color-outline-variant, #CAC4D0);\n }\n\n :host([elevated]) {\n box-shadow: var(--md-sys-elevation-level1, 0px 1px 3px 1px rgba(0, 0, 0, 0.15));\n }\n\n .table-wrapper {\n width: 100%;\n overflow-x: auto;\n -webkit-overflow-scrolling: touch;\n position: relative;\n }\n\n .progress-container {\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n z-index: 5;\n height: 4px;\n }\n\n .table {\n display: table;\n width: 100%;\n border-collapse: collapse;\n border-spacing: 0;\n text-align: left;\n font-size: var(--md-sys-typescale-body-medium-size, 14px);\n line-height: 20px;\n }\n\n /* Dense table variant /\n :host([dense]) {\n --md-table-cell-padding-y: 8px;\n --md-table-cell-padding-x: 12px;\n --md-table-header-padding-y: 10px;\n }\n\n / Default cell padding variables /\n :host {\n --md-table-cell-padding-y: 14px;\n --md-table-cell-padding-x: 16px;\n --md-table-header-padding-y: 16px;\n --md-table-header-padding-x: 16px;\n }\n`;\n\nexport const tableHeadStyles = css`\n :host {\n display: table-header-group;\n background-color: var(--md-sys-color-surface-container-low, #F7F2FA);\n border-bottom: 1px solid var(--md-sys-color-outline-variant, #CAC4D0);\n }\n\n :host-context([sticky-header]),\n :host([sticky]) {\n position: sticky;\n top: 0;\n z-index: 2;\n }\n`;\n\nexport const tableBodyStyles = css`\n :host {\n display: table-row-group;\n }\n`;\n\nexport const tableRowStyles = css`\n :host {\n display: table-row;\n position: relative;\n transition: background-color 150ms cubic-bezier(0.2, 0, 0, 1);\n border-bottom: 1px solid var(--md-sys-color-outline-variant, #CAC4D0);\n }\n\n :host(:last-of-type) {\n border-bottom: none;\n }\n\n / Hoverable rows /\n :host-context([hoverable]):hover,\n :host([hoverable]:hover),\n :host([interactive]:hover) {\n background-color: var(--md-sys-color-surface-container-high, #ECE6F0);\n }\n\n / Striped rows /\n :host-context([striped]):host(:nth-of-type(even)) {\n background-color: var(--md-sys-color-surface-container-lowest, #FFFFFF);\n }\n\n :host-context([striped]):host(:nth-of-type(odd)) {\n background-color: var(--md-sys-color-surface-container-low, #F7F2FA);\n }\n\n / Selected row /\n :host([selected]) {\n background-color: var(--md-sys-color-secondary-container, #E8DEF8) !important;\n }\n\n :host([interactive]) {\n cursor: pointer;\n }\n\n :host([disabled]) {\n opacity: 0.38;\n pointer-events: none;\n }\n`;\n\nexport const tableHeaderCellStyles = css`\n :host {\n display: table-cell;\n vertical-align: middle;\n padding: var(--md-table-header-padding-y, 16px) var(--md-table-header-padding-x, 16px);\n color: var(--md-sys-color-on-surface-variant, #49454F);\n font-size: var(--md-sys-typescale-title-small-size, 14px);\n font-weight: 600;\n letter-spacing: 0.1px;\n border-bottom: 1px solid var(--md-sys-color-outline-variant, #CAC4D0);\n user-select: none;\n box-sizing: border-box;\n white-space: nowrap;\n }\n\n :host([sortable]) {\n cursor: pointer;\n }\n\n :host([sortable]:hover) {\n color: var(--md-sys-color-on-surface, #1D1B20);\n background-color: rgba(0, 0, 0, 0.04);\n }\n\n :host([align=\"start\"]),\n :host([align=\"left\"]) {\n text-align: left;\n }\n\n :host([align=\"center\"]) {\n text-align: center;\n }\n\n :host([align=\"end\"]),\n :host([align=\"right\"]) {\n text-align: right;\n }\n\n .cell-content {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n width: 100%;\n }\n\n :host([align=\"center\"]) .cell-content {\n justify-content: center;\n }\n\n :host([align=\"end\"]) .cell-content,\n :host([align=\"right\"]) .cell-content {\n justify-content: flex-end;\n }\n\n .sort-icon {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n font-size: 18px;\n color: var(--md-sys-color-primary, #6750A4);\n opacity: 0;\n transition: transform 200ms cubic-bezier(0.2, 0, 0, 1), opacity 150ms ease;\n }\n\n :host([sort-direction=\"asc\"]) .sort-icon {\n opacity: 1;\n transform: rotate(0deg);\n }\n\n :host([sort-direction=\"desc\"]) .sort-icon {\n opacity: 1;\n transform: rotate(180deg);\n }\n\n :host([sortable]:hover:not([sort-direction=\"asc\"]):not([sort-direction=\"desc\"])) .sort-icon {\n opacity: 0.5;\n }\n`;\n\nexport const tableCellStyles = css`\n :host {\n display: table-cell;\n vertical-align: middle;\n padding: var(--md-table-cell-padding-y, 14px) var(--md-table-cell-padding-x, 16px);\n color: var(--md-sys-color-on-surface, #1D1B20);\n font-size: var(--md-sys-typescale-body-medium-size, 14px);\n border-bottom: 1px solid var(--md-sys-color-outline-variant, #CAC4D0);\n box-sizing: border-box;\n }\n\n :host([align=\"start\"]),\n :host([align=\"left\"]) {\n text-align: left;\n }\n\n :host([align=\"center\"]) {\n text-align: center;\n }\n\n :host([align=\"end\"]),\n :host([align=\"right\"]) {\n text-align: right;\n }\n\n :host([numeric]) {\n font-variant-numeric: tabular-nums;\n text-align: right;\n }\n\n :host([truncate]) {\n max-width: 200px;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n`;\n\nexport const tablePaginationStyles = css`\n :host {\n display: flex;\n align-items: center;\n justify-content: flex-end;\n gap: 16px;\n padding: 8px 16px;\n border-top: 1px solid var(--md-sys-color-outline-variant, #CAC4D0);\n background-color: var(--md-sys-color-surface, #FEF7FF);\n font-size: var(--md-sys-typescale-body-small-size, 12px);\n color: var(--md-sys-color-on-surface-variant, #49454F);\n box-sizing: border-box;\n }\n\n .rows-per-page {\n display: flex;\n align-items: center;\n gap: 8px;\n }\n\n select {\n padding: 4px 8px;\n border: 1px solid var(--md-sys-color-outline-variant, #CAC4D0);\n border-radius: var(--md-sys-shape-corner-extra-small, 4px);\n background-color: var(--md-sys-color-surface-container-low, #F7F2FA);\n color: var(--md-sys-color-on-surface, #1D1B20);\n font-family: inherit;\n font-size: inherit;\n outline: none;\n cursor: pointer;\n }\n\n select:focus {\n border-color: var(--md-sys-color-primary, #6750A4);\n }\n\n .range-label {\n user-select: none;\n }\n\n .actions {\n display: flex;\n align-items: center;\n gap: 4px;\n }\n`;\n\n","import { html, nothing, PropertyValues } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { MdBaseElement } from '../../internal/base-component.js';\nimport '../../internal/ripple/ripple.js';\nimport '../../internal/focus-ring/focus-ring.js';\nimport '../progress/progress.js';\nimport '../icon/icon.js';\nimport '../icon-button/icon-button.js';\nimport '../checkbox/checkbox.js';\nimport {\n tableStyles,\n tableHeadStyles,\n tableBodyStyles,\n tableRowStyles,\n tableHeaderCellStyles,\n tableCellStyles,\n tablePaginationStyles,\n} from './table.css.js';\n\nexport type SortDirection = 'asc' \| 'desc' \| 'none';\nexport type TableCellAlignment = 'start' \| 'center' \| 'end' \| 'left' \| 'right';\n\nexport interface TableColumn<T = any> {\n key: string;\n label: string;\n sortable?: boolean;\n align?: TableCellAlignment;\n width?: string;\n numeric?: boolean;\n render?: (row: T, index: number) => unknown;\n}\n\nexport interface SortChangeEventDetail {\n column: string;\n direction: SortDirection;\n}\n\nexport interface PageChangeEventDetail {\n page: number;\n pageSize: number;\n}\n\nexport interface RowSelectEventDetail<T = any> {\n row: T;\n index: number;\n selected: boolean;\n selectedRows: T[];\n}\n\n/\n Material Design 3 Table Header Cell\n /\n@customElement('md-table-header-cell')\nexport class MdTableHeaderCell extends MdBaseElement {\n static override styles = [MdBaseElement.styles, tableHeaderCellStyles];\n\n @property({ type: Boolean, reflect: true })\n sortable = false;\n\n @property({ type: String, reflect: true, attribute: 'sort-direction' })\n sortDirection: SortDirection = 'none';\n\n @property({ type: String, reflect: true })\n align: TableCellAlignment = 'start';\n\n @property({ type: String, attribute: 'column-key' })\n columnKey = '';\n\n @property({ type: String })\n width = '';\n\n override connectedCallback() {\n super.connectedCallback();\n this.setAttribute('role', 'columnheader');\n this.addEventListener('click', this.handleClick);\n }\n\n override disconnectedCallback() {\n super.disconnectedCallback();\n this.removeEventListener('click', this.handleClick);\n }\n\n override updated(changedProperties: PropertyValues) {\n super.updated(changedProperties);\n if (changedProperties.has('width') && this.width) {\n this.style.width = this.width;\n }\n if (changedProperties.has('sortDirection')) {\n if (this.sortDirection === 'asc') {\n this.setAttribute('aria-sort', 'ascending');\n } else if (this.sortDirection === 'desc') {\n this.setAttribute('aria-sort', 'descending');\n } else {\n this.removeAttribute('aria-sort');\n }\n }\n }\n\n private handleClick = () => {\n if (!this.sortable) return;\n let nextDirection: SortDirection = 'asc';\n if (this.sortDirection === 'asc') {\n nextDirection = 'desc';\n } else if (this.sortDirection === 'desc') {\n nextDirection = 'none';\n }\n this.sortDirection = nextDirection;\n this.emitEvent<SortChangeEventDetail>('sort-change', {\n column: this.columnKey,\n direction: this.sortDirection,\n });\n };\n\n override render() {\n return html`\n <div class=\"cell-content\">\n <slot></slot>\n ${this.sortable\n ? html`<span class=\"sort-icon\" aria-hidden=\"true\"><md-icon name=\"arrow_upward\" size=\"18\"></md-icon></span>`\n : nothing}\n </div>\n `;\n }\n}\n\n/\n Material Design 3 Table Cell\n /\n@customElement('md-table-cell')\nexport class MdTableCell extends MdBaseElement {\n static override styles = [MdBaseElement.styles, tableCellStyles];\n\n @property({ type: String, reflect: true })\n align: TableCellAlignment = 'start';\n\n @property({ type: Boolean, reflect: true })\n numeric = false;\n\n @property({ type: Boolean, reflect: true })\n truncate = false;\n\n override connectedCallback() {\n super.connectedCallback();\n this.setAttribute('role', 'cell');\n }\n\n override render() {\n return html`<slot></slot>`;\n }\n}\n\n/\n Material Design 3 Table Row\n /\n@customElement('md-table-row')\nexport class MdTableRow extends MdBaseElement {\n static override styles = [MdBaseElement.styles, tableRowStyles];\n\n @property({ type: Boolean, reflect: true })\n selected = false;\n\n @property({ type: Boolean, reflect: true })\n selectable = false;\n\n @property({ type: Boolean, reflect: true })\n interactive = false;\n\n @property({ type: Boolean, reflect: true })\n disabled = false;\n\n @property({ type: Boolean, reflect: true })\n hoverable = false;\n\n override connectedCallback() {\n super.connectedCallback();\n this.setAttribute('role', 'row');\n this.addEventListener('click', this.handleClick);\n }\n\n override disconnectedCallback() {\n super.disconnectedCallback();\n this.removeEventListener('click', this.handleClick);\n }\n\n override updated(changedProperties: PropertyValues) {\n super.updated(changedProperties);\n if (changedProperties.has('selected')) {\n this.setAttribute('aria-selected', this.selected ? 'true' : 'false');\n }\n }\n\n private handleClick = (event: MouseEvent) => {\n if (this.disabled) {\n event.preventDefault();\n event.stopImmediatePropagation();\n return;\n }\n\n this.emitEvent('row-click', { row: this });\n\n if (this.selectable) {\n this.selected = !this.selected;\n this.emitEvent('row-select', { selected: this.selected, row: this });\n }\n };\n\n override render() {\n return html`<slot></slot>`;\n }\n}\n\n/\n Material Design 3 Table Head\n /\n@customElement('md-table-head')\nexport class MdTableHead extends MdBaseElement {\n static override styles = [MdBaseElement.styles, tableHeadStyles];\n\n @property({ type: Boolean, reflect: true })\n sticky = false;\n\n override connectedCallback() {\n super.connectedCallback();\n this.setAttribute('role', 'rowgroup');\n }\n\n override render() {\n return html`<slot></slot>`;\n }\n}\n\n/\n Material Design 3 Table Body\n /\n@customElement('md-table-body')\nexport class MdTableBody extends MdBaseElement {\n static override styles = [MdBaseElement.styles, tableBodyStyles];\n\n override connectedCallback() {\n super.connectedCallback();\n this.setAttribute('role', 'rowgroup');\n }\n\n override render() {\n return html`<slot></slot>`;\n }\n}\n\n/\n Material Design 3 Table Pagination\n /\n@customElement('md-table-pagination')\nexport class MdTablePagination extends MdBaseElement {\n static override styles = [MdBaseElement.styles, tablePaginationStyles];\n\n @property({ type: Number })\n page = 1;\n\n @property({ type: Number, attribute: 'page-size' })\n pageSize = 10;\n\n @property({ type: Number })\n total = 0;\n\n @property({ type: Array, attribute: 'page-size-options' })\n pageSizeOptions: number[] = [5, 10, 25, 50];\n\n @property({ type: Boolean, attribute: 'show-first-last' })\n showFirstLast = true;\n\n get totalPages(): number {\n return Math.max(1, Math.ceil(this.total / Math.max(1, this.pageSize)));\n }\n\n private handlePageSizeChange = (event: Event) => {\n const select = event.target as HTMLSelectElement;\n const newSize = Number(select.value);\n this.pageSize = newSize;\n this.page = 1;\n this.emitEvent<PageChangeEventDetail>('page-size-change', {\n page: this.page,\n pageSize: this.pageSize,\n });\n this.emitEvent<PageChangeEventDetail>('page-change', {\n page: this.page,\n pageSize: this.pageSize,\n });\n };\n\n public firstPage = () => {\n if (this.page <= 1) return;\n this.page = 1;\n this.notifyPageChange();\n };\n\n public prevPage = () => {\n if (this.page <= 1) return;\n this.page -= 1;\n this.notifyPageChange();\n };\n\n public nextPage = () => {\n if (this.page >= this.totalPages) return;\n this.page += 1;\n this.notifyPageChange();\n };\n\n public lastPage = () => {\n if (this.page >= this.totalPages) return;\n this.page = this.totalPages;\n this.notifyPageChange();\n };\n\n private notifyPageChange() {\n this.emitEvent<PageChangeEventDetail>('page-change', {\n page: this.page,\n pageSize: this.pageSize,\n });\n }\n\n override render() {\n const start = this.total === 0 ? 0 : (this.page - 1) this.pageSize + 1;\n const end = Math.min(this.page * this.pageSize, this.total);\n const rangeText = `${start}–${end} of ${this.total}`;\n\n return html`\n <div class=\"rows-per-page\">\n <span>Rows per page:</span>\n <select .value=${String(this.pageSize)} @change=${this.handlePageSizeChange}>\n ${this.pageSizeOptions.map(\n (opt) => html`<option value=${opt} ?selected=${opt === this.pageSize}>${opt}</option>`\n )}\n </select>\n </div>\n\n <div class=\"range-label\">${rangeText}</div>\n\n <div class=\"actions\">\n ${this.showFirstLast\n ? html`\n <md-icon-button\n icon=\"first_page\"\n aria-label=\"First page\"\n ?disabled=${this.page <= 1}\n @click=${this.firstPage}\n ></md-icon-button>\n `\n : nothing}\n <md-icon-button\n icon=\"chevron_left\"\n aria-label=\"Previous page\"\n ?disabled=${this.page <= 1}\n @click=${this.prevPage}\n ></md-icon-button>\n <md-icon-button\n icon=\"chevron_right\"\n aria-label=\"Next page\"\n ?disabled=${this.page >= this.totalPages}\n @click=${this.nextPage}\n ></md-icon-button>\n ${this.showFirstLast\n ? html`\n <md-icon-button\n icon=\"last_page\"\n aria-label=\"Last page\"\n ?disabled=${this.page >= this.totalPages}\n @click=${this.lastPage}\n ></md-icon-button>\n `\n : nothing}\n </div>\n `;\n }\n}\n\n/*\n Material Design 3 Table / Data Table\n /\n@customElement('md-table')\nexport class MdTable extends MdBaseElement {\n static override styles = [MdBaseElement.styles, tableStyles];\n\n @property({ type: Boolean, reflect: true })\n bordered = false;\n\n @property({ type: Boolean, reflect: true })\n elevated = false;\n\n @property({ type: Boolean, reflect: true })\n striped = false;\n\n @property({ type: Boolean, reflect: true })\n hoverable = true;\n\n @property({ type: Boolean, reflect: true })\n dense = false;\n\n @property({ type: Boolean, reflect: true, attribute: 'sticky-header' })\n stickyHeader = false;\n\n @property({ type: Boolean, reflect: true })\n loading = false;\n\n @property({ type: Boolean, reflect: true })\n selectable = false;\n\n @property({ type: Array })\n columns: TableColumn[] = [];\n\n @property({ type: Array })\n rows: Record<string, any>[] = [];\n\n @property({ type: Array })\n selectedRows: Record<string, any>[] = [];\n\n @property({ type: String, attribute: 'sort-column' })\n sortColumn = '';\n\n @property({ type: String, attribute: 'sort-direction' })\n sortDirection: SortDirection = 'none';\n\n @property({ type: Boolean })\n paginated = false;\n\n @property({ type: Number })\n page = 1;\n\n @property({ type: Number, attribute: 'page-size' })\n pageSize = 10;\n\n @property({ type: Array, attribute: 'page-size-options' })\n pageSizeOptions: number[] = [5, 10, 25, 50];\n\n @property({ type: Number })\n total = 0;\n\n override connectedCallback() {\n super.connectedCallback();\n this.setAttribute('role', 'table');\n }\n\n private handleHeaderSortChange = (event: CustomEvent<SortChangeEventDetail>) => {\n this.sortColumn = event.detail.column;\n this.sortDirection = event.detail.direction;\n this.emitEvent<SortChangeEventDetail>('sort-change', event.detail);\n };\n\n private handleSelectAllToggle = (event: CustomEvent<{ checked: boolean }>) => {\n const isChecked = event.detail.checked;\n const currentRows = this.getProcessedRows();\n if (isChecked) {\n const newSelections = [...this.selectedRows];\n currentRows.forEach((r) => {\n if (!newSelections.includes(r)) {\n newSelections.push(r);\n }\n });\n this.selectedRows = newSelections;\n } else {\n this.selectedRows = this.selectedRows.filter((r) => !currentRows.includes(r));\n }\n\n this.emitEvent('selection-change', {\n selectedRows: this.selectedRows,\n allSelected: isChecked,\n });\n };\n\n private handleRowSelectToggle = (row: Record<string, any>, index: number) => {\n const isSelected = this.selectedRows.includes(row);\n if (isSelected) {\n this.selectedRows = this.selectedRows.filter((r) => r !== row);\n } else {\n this.selectedRows = [...this.selectedRows, row];\n }\n\n this.emitEvent<RowSelectEventDetail>('row-select', {\n row,\n index,\n selected: !isSelected,\n selectedRows: this.selectedRows,\n });\n this.emitEvent('selection-change', {\n selectedRows: this.selectedRows,\n });\n };\n\n private handlePaginationChange = (event: CustomEvent<PageChangeEventDetail>) => {\n this.page = event.detail.page;\n this.pageSize = event.detail.pageSize;\n this.emitEvent<PageChangeEventDetail>('page-change', event.detail);\n };\n\n private getProcessedRows(): Record<string, any>[] {\n if (!this.rows \|\| this.rows.length === 0) return [];\n let processed = [...this.rows];\n\n // Sorting\n if (this.sortColumn && this.sortDirection !== 'none') {\n const dir = this.sortDirection === 'asc' ? 1 : -1;\n processed.sort((a, b) => {\n const valA = a[this.sortColumn];\n const valB = b[this.sortColumn];\n if (valA == null && valB == null) return 0;\n if (valA == null) return 1;\n if (valB == null) return -1;\n if (typeof valA === 'number' && typeof valB === 'number') {\n return (valA - valB) dir;\n }\n return String(valA).localeCompare(String(valB)) * dir;\n });\n }\n\n // Pagination (if data-driven rows & paginated)\n if (this.paginated) {\n const startIndex = (this.page - 1) * this.pageSize;\n processed = processed.slice(startIndex, startIndex + this.pageSize);\n }\n\n return processed;\n }\n\n override render() {\n const isDataDriven = this.columns && this.columns.length > 0;\n const currentRows = isDataDriven ? this.getProcessedRows() : [];\n const totalCount = this.total \|\| (this.rows ? this.rows.length : 0);\n\n const allCurrentSelected =\n currentRows.length > 0 && currentRows.every((r) => this.selectedRows.includes(r));\n const someCurrentSelected =\n !allCurrentSelected && currentRows.some((r) => this.selectedRows.includes(r));\n\n return html`\n <div class=\"table-wrapper\">\n ${this.loading\n ? html`<div class=\"progress-container\"><md-linear-progress indeterminate></md-linear-progress></div>`\n : nothing}\n\n <div class=\"table\" role=\"table\">\n ${isDataDriven\n ? html`\n <md-table-head ?sticky=${this.stickyHeader}>\n <md-table-row>\n ${this.selectable\n ? html`\n <md-table-header-cell style=\"width: 48px; padding-right: 0;\">\n <md-checkbox\n .checked=${allCurrentSelected}\n .indeterminate=${someCurrentSelected}\n aria-label=\"Select all rows\"\n @change=${this.handleSelectAllToggle}\n ></md-checkbox>\n </md-table-header-cell>\n `\n : nothing}\n ${this.columns.map((col) => {\n const isSorted = this.sortColumn === col.key;\n const dir = isSorted ? this.sortDirection : 'none';\n return html`\n <md-table-header-cell\n column-key=${col.key}\n ?sortable=${Boolean(col.sortable)}\n sort-direction=${dir}\n align=${col.align \|\| (col.numeric ? 'end' : 'start')}\n width=${col.width \|\| ''}\n @sort-change=${this.handleHeaderSortChange}\n >\n ${col.label}\n </md-table-header-cell>\n `;\n })}\n </md-table-row>\n </md-table-head>\n\n <md-table-body>\n ${currentRows.map((row, index) => {\n const isSelected = this.selectedRows.includes(row);\n return html`\n <md-table-row\n ?selected=${isSelected}\n ?hoverable=${this.hoverable}\n @click=${() => this.emitEvent('row-click', { row, index })}\n >\n ${this.selectable\n ? html`\n <md-table-cell style=\"width: 48px; padding-right: 0;\">\n <md-checkbox\n .checked=${isSelected}\n aria-label=\"Select row\"\n @change=${(e: Event) => {\n e.stopPropagation();\n this.handleRowSelectToggle(row, index);\n }}\n ></md-checkbox>\n </md-table-cell>\n `\n : nothing}\n ${this.columns.map((col) => {\n const cellContent = col.render ? col.render(row, index) : row[col.key];\n return html`\n <md-table-cell\n align=${col.align \|\| (col.numeric ? 'end' : 'start')}\n ?numeric=${Boolean(col.numeric)}\n >\n ${cellContent}\n </md-table-cell>\n `;\n })}\n </md-table-row>\n `;\n })}\n </md-table-body>\n `\n : html`<slot></slot>`}\n </div>\n </div>\n\n ${this.paginated \|\| isDataDriven && this.rows.length > 0 && this.paginated\n ? html`\n <md-table-pagination\n .page=${this.page}\n .pageSize=${this.pageSize}\n .total=${totalCount}\n .pageSizeOptions=${this.pageSizeOptions}\n @page-change=${this.handlePaginationChange}\n @page-size-change=${this.handlePaginationChange}\n ></md-table-pagination>\n `\n : nothing}\n <slot name=\"pagination\"></slot>\n `;\n }\n}\n\n// Aliases\n@customElement('md-data-table')\nexport class MdDataTable extends MdTable {}\n\n@customElement('md-table-header')\nexport class MdTableHeader extends MdTableHead {}\n\n@customElement('md-table-head-cell')\nexport class MdTableHeadCell extends MdTableHeaderCell {}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'md-table': MdTable;\n 'md-data-table': MdDataTable;\n 'md-table-head': MdTableHead;\n 'md-table-header': MdTableHeader;\n 'md-table-body': MdTableBody;\n 'md-table-row': MdTableRow;\n 'md-table-cell': MdTableCell;\n 'md-table-header-cell': MdTableHeaderCell;\n 'md-table-head-cell': MdTableHeadCell;\n 'md-table-pagination': MdTablePagination;\n }\n}\n\n"],"mappings":"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"}
1	+ {"version":3,"file":"table-C5rCvdFc.js","names":[],"sources":["../../src/components/table/table.css.ts","../../src/components/table/table.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const tableStyles = css`\n :host {\n display: block;\n width: 100%;\n position: relative;\n box-sizing: border-box;\n font-family: var(--md-sys-typescale-font-family, inherit);\n background-color: var(--md-sys-color-surface, #FEF7FF);\n color: var(--md-sys-color-on-surface, #1D1B20);\n border-radius: var(--md-sys-shape-corner-medium, 12px);\n overflow: hidden;\n transition: box-shadow 200ms cubic-bezier(0.2, 0, 0, 1),\n background-color 200ms cubic-bezier(0.2, 0, 0, 1);\n }\n\n :host([bordered]) {\n border: 1px solid var(--md-sys-color-outline-variant, #CAC4D0);\n }\n\n :host([elevated]) {\n box-shadow: var(--md-sys-elevation-level1, 0px 1px 3px 1px rgba(0, 0, 0, 0.15));\n }\n\n .table-wrapper {\n width: 100%;\n overflow-x: auto;\n -webkit-overflow-scrolling: touch;\n position: relative;\n }\n\n .progress-container {\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n z-index: 5;\n height: 4px;\n }\n\n .table {\n display: table;\n width: 100%;\n border-collapse: collapse;\n border-spacing: 0;\n text-align: left;\n font-size: var(--md-sys-typescale-body-medium-size, 14px);\n line-height: 20px;\n }\n\n /* Dense table variant /\n :host([dense]) {\n --md-table-cell-padding-y: 8px;\n --md-table-cell-padding-x: 12px;\n --md-table-header-padding-y: 10px;\n }\n\n / Default cell padding variables /\n :host {\n --md-table-cell-padding-y: 14px;\n --md-table-cell-padding-x: 16px;\n --md-table-header-padding-y: 16px;\n --md-table-header-padding-x: 16px;\n }\n`;\n\nexport const tableHeadStyles = css`\n :host {\n display: table-header-group;\n background-color: var(--md-sys-color-surface-container-low, #F7F2FA);\n border-bottom: 1px solid var(--md-sys-color-outline-variant, #CAC4D0);\n }\n\n :host-context([sticky-header]),\n :host([sticky]) {\n position: sticky;\n top: 0;\n z-index: 2;\n }\n`;\n\nexport const tableBodyStyles = css`\n :host {\n display: table-row-group;\n }\n`;\n\nexport const tableRowStyles = css`\n :host {\n display: table-row;\n position: relative;\n transition: background-color 150ms cubic-bezier(0.2, 0, 0, 1);\n border-bottom: 1px solid var(--md-sys-color-outline-variant, #CAC4D0);\n }\n\n :host(:last-of-type) {\n border-bottom: none;\n }\n\n / Hoverable rows /\n :host-context([hoverable]):hover,\n :host([hoverable]:hover),\n :host([interactive]:hover) {\n background-color: var(--md-sys-color-surface-container-high, #ECE6F0);\n }\n\n / Striped rows /\n :host-context([striped]):host(:nth-of-type(even)) {\n background-color: var(--md-sys-color-surface-container-lowest, #FFFFFF);\n }\n\n :host-context([striped]):host(:nth-of-type(odd)) {\n background-color: var(--md-sys-color-surface-container-low, #F7F2FA);\n }\n\n / Selected row /\n :host([selected]) {\n background-color: var(--md-sys-color-secondary-container, #E8DEF8) !important;\n }\n\n :host([interactive]) {\n cursor: pointer;\n }\n\n :host([disabled]) {\n opacity: 0.38;\n pointer-events: none;\n }\n`;\n\nexport const tableHeaderCellStyles = css`\n :host {\n display: table-cell;\n vertical-align: middle;\n padding: var(--md-table-header-padding-y, 16px) var(--md-table-header-padding-x, 16px);\n color: var(--md-sys-color-on-surface-variant, #49454F);\n font-size: var(--md-sys-typescale-title-small-size, 14px);\n font-weight: 600;\n letter-spacing: 0.1px;\n border-bottom: 1px solid var(--md-sys-color-outline-variant, #CAC4D0);\n user-select: none;\n box-sizing: border-box;\n white-space: nowrap;\n }\n\n :host([sortable]) {\n cursor: pointer;\n }\n\n :host([sortable]:hover) {\n color: var(--md-sys-color-on-surface, #1D1B20);\n background-color: rgba(0, 0, 0, 0.04);\n }\n\n :host([align=\"start\"]),\n :host([align=\"left\"]) {\n text-align: left;\n }\n\n :host([align=\"center\"]) {\n text-align: center;\n }\n\n :host([align=\"end\"]),\n :host([align=\"right\"]) {\n text-align: right;\n }\n\n .cell-content {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n width: 100%;\n }\n\n :host([align=\"center\"]) .cell-content {\n justify-content: center;\n }\n\n :host([align=\"end\"]) .cell-content,\n :host([align=\"right\"]) .cell-content {\n justify-content: flex-end;\n }\n\n .sort-icon {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n font-size: 18px;\n color: var(--md-sys-color-primary, #6750A4);\n opacity: 0;\n transition: transform 200ms cubic-bezier(0.2, 0, 0, 1), opacity 150ms ease;\n }\n\n :host([sort-direction=\"asc\"]) .sort-icon {\n opacity: 1;\n transform: rotate(0deg);\n }\n\n :host([sort-direction=\"desc\"]) .sort-icon {\n opacity: 1;\n transform: rotate(180deg);\n }\n\n :host([sortable]:hover:not([sort-direction=\"asc\"]):not([sort-direction=\"desc\"])) .sort-icon {\n opacity: 0.5;\n }\n`;\n\nexport const tableCellStyles = css`\n :host {\n display: table-cell;\n vertical-align: middle;\n padding: var(--md-table-cell-padding-y, 14px) var(--md-table-cell-padding-x, 16px);\n color: var(--md-sys-color-on-surface, #1D1B20);\n font-size: var(--md-sys-typescale-body-medium-size, 14px);\n border-bottom: 1px solid var(--md-sys-color-outline-variant, #CAC4D0);\n box-sizing: border-box;\n }\n\n :host([align=\"start\"]),\n :host([align=\"left\"]) {\n text-align: left;\n }\n\n :host([align=\"center\"]) {\n text-align: center;\n }\n\n :host([align=\"end\"]),\n :host([align=\"right\"]) {\n text-align: right;\n }\n\n :host([numeric]) {\n font-variant-numeric: tabular-nums;\n text-align: right;\n }\n\n :host([truncate]) {\n max-width: 200px;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n`;\n\nexport const tablePaginationStyles = css`\n :host {\n display: flex;\n align-items: center;\n justify-content: flex-end;\n gap: 16px;\n padding: 8px 16px;\n border-top: 1px solid var(--md-sys-color-outline-variant, #CAC4D0);\n background-color: var(--md-sys-color-surface, #FEF7FF);\n font-size: var(--md-sys-typescale-body-small-size, 12px);\n color: var(--md-sys-color-on-surface-variant, #49454F);\n box-sizing: border-box;\n }\n\n .rows-per-page {\n display: flex;\n align-items: center;\n gap: 8px;\n }\n\n select {\n padding: 4px 8px;\n border: 1px solid var(--md-sys-color-outline-variant, #CAC4D0);\n border-radius: var(--md-sys-shape-corner-extra-small, 4px);\n background-color: var(--md-sys-color-surface-container-low, #F7F2FA);\n color: var(--md-sys-color-on-surface, #1D1B20);\n font-family: inherit;\n font-size: inherit;\n outline: none;\n cursor: pointer;\n }\n\n select:focus {\n border-color: var(--md-sys-color-primary, #6750A4);\n }\n\n .range-label {\n user-select: none;\n }\n\n .actions {\n display: flex;\n align-items: center;\n gap: 4px;\n }\n`;\n\n","import { html, nothing, PropertyValues } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { MdBaseElement } from '../../internal/base-component.js';\nimport '../../internal/ripple/ripple.js';\nimport '../../internal/focus-ring/focus-ring.js';\nimport '../progress/progress.js';\nimport '../icon/icon.js';\nimport '../icon-button/icon-button.js';\nimport '../checkbox/checkbox.js';\nimport {\n tableStyles,\n tableHeadStyles,\n tableBodyStyles,\n tableRowStyles,\n tableHeaderCellStyles,\n tableCellStyles,\n tablePaginationStyles,\n} from './table.css.js';\n\nexport type SortDirection = 'asc' \| 'desc' \| 'none';\nexport type TableCellAlignment = 'start' \| 'center' \| 'end' \| 'left' \| 'right';\n\nexport interface TableColumn<T = any> {\n key: string;\n label: string;\n sortable?: boolean;\n align?: TableCellAlignment;\n width?: string;\n numeric?: boolean;\n render?: (row: T, index: number) => unknown;\n}\n\nexport interface SortChangeEventDetail {\n column: string;\n direction: SortDirection;\n}\n\nexport interface PageChangeEventDetail {\n page: number;\n pageSize: number;\n}\n\nexport interface RowSelectEventDetail<T = any> {\n row: T;\n index: number;\n selected: boolean;\n selectedRows: T[];\n}\n\n/\n Material Design 3 Table Header Cell\n /\n@customElement('md-table-header-cell')\nexport class MdTableHeaderCell extends MdBaseElement {\n static override styles = [MdBaseElement.styles, tableHeaderCellStyles];\n\n @property({ type: Boolean, reflect: true })\n sortable = false;\n\n @property({ type: String, reflect: true, attribute: 'sort-direction' })\n sortDirection: SortDirection = 'none';\n\n @property({ type: String, reflect: true })\n align: TableCellAlignment = 'start';\n\n @property({ type: String, attribute: 'column-key' })\n columnKey = '';\n\n @property({ type: String })\n width = '';\n\n override connectedCallback() {\n super.connectedCallback();\n this.setAttribute('role', 'columnheader');\n this.addEventListener('click', this.handleClick);\n }\n\n override disconnectedCallback() {\n super.disconnectedCallback();\n this.removeEventListener('click', this.handleClick);\n }\n\n override updated(changedProperties: PropertyValues) {\n super.updated(changedProperties);\n if (changedProperties.has('width') && this.width) {\n this.style.width = this.width;\n }\n if (changedProperties.has('sortDirection')) {\n if (this.sortDirection === 'asc') {\n this.setAttribute('aria-sort', 'ascending');\n } else if (this.sortDirection === 'desc') {\n this.setAttribute('aria-sort', 'descending');\n } else {\n this.removeAttribute('aria-sort');\n }\n }\n }\n\n private handleClick = () => {\n if (!this.sortable) return;\n let nextDirection: SortDirection = 'asc';\n if (this.sortDirection === 'asc') {\n nextDirection = 'desc';\n } else if (this.sortDirection === 'desc') {\n nextDirection = 'none';\n }\n this.sortDirection = nextDirection;\n this.emitEvent<SortChangeEventDetail>('sort-change', {\n column: this.columnKey,\n direction: this.sortDirection,\n });\n };\n\n override render() {\n return html`\n <div class=\"cell-content\">\n <slot></slot>\n ${this.sortable\n ? html`<span class=\"sort-icon\" aria-hidden=\"true\"><md-icon name=\"arrow_upward\" size=\"18\"></md-icon></span>`\n : nothing}\n </div>\n `;\n }\n}\n\n/\n Material Design 3 Table Cell\n /\n@customElement('md-table-cell')\nexport class MdTableCell extends MdBaseElement {\n static override styles = [MdBaseElement.styles, tableCellStyles];\n\n @property({ type: String, reflect: true })\n align: TableCellAlignment = 'start';\n\n @property({ type: Boolean, reflect: true })\n numeric = false;\n\n @property({ type: Boolean, reflect: true })\n truncate = false;\n\n override connectedCallback() {\n super.connectedCallback();\n this.setAttribute('role', 'cell');\n }\n\n override render() {\n return html`<slot></slot>`;\n }\n}\n\n/\n Material Design 3 Table Row\n /\n@customElement('md-table-row')\nexport class MdTableRow extends MdBaseElement {\n static override styles = [MdBaseElement.styles, tableRowStyles];\n\n @property({ type: Boolean, reflect: true })\n selected = false;\n\n @property({ type: Boolean, reflect: true })\n selectable = false;\n\n @property({ type: Boolean, reflect: true })\n interactive = false;\n\n @property({ type: Boolean, reflect: true })\n disabled = false;\n\n @property({ type: Boolean, reflect: true })\n hoverable = false;\n\n override connectedCallback() {\n super.connectedCallback();\n this.setAttribute('role', 'row');\n this.addEventListener('click', this.handleClick);\n }\n\n override disconnectedCallback() {\n super.disconnectedCallback();\n this.removeEventListener('click', this.handleClick);\n }\n\n override updated(changedProperties: PropertyValues) {\n super.updated(changedProperties);\n if (changedProperties.has('selected')) {\n this.setAttribute('aria-selected', this.selected ? 'true' : 'false');\n }\n }\n\n private handleClick = (event: MouseEvent) => {\n if (this.disabled) {\n event.preventDefault();\n event.stopImmediatePropagation();\n return;\n }\n\n this.emitEvent('row-click', { row: this });\n\n if (this.selectable) {\n this.selected = !this.selected;\n this.emitEvent('row-select', { selected: this.selected, row: this });\n }\n };\n\n override render() {\n return html`<slot></slot>`;\n }\n}\n\n/\n Material Design 3 Table Head\n /\n@customElement('md-table-head')\nexport class MdTableHead extends MdBaseElement {\n static override styles = [MdBaseElement.styles, tableHeadStyles];\n\n @property({ type: Boolean, reflect: true })\n sticky = false;\n\n override connectedCallback() {\n super.connectedCallback();\n this.setAttribute('role', 'rowgroup');\n }\n\n override render() {\n return html`<slot></slot>`;\n }\n}\n\n/\n Material Design 3 Table Body\n /\n@customElement('md-table-body')\nexport class MdTableBody extends MdBaseElement {\n static override styles = [MdBaseElement.styles, tableBodyStyles];\n\n override connectedCallback() {\n super.connectedCallback();\n this.setAttribute('role', 'rowgroup');\n }\n\n override render() {\n return html`<slot></slot>`;\n }\n}\n\n/\n Material Design 3 Table Pagination\n /\n@customElement('md-table-pagination')\nexport class MdTablePagination extends MdBaseElement {\n static override styles = [MdBaseElement.styles, tablePaginationStyles];\n\n @property({ type: Number })\n page = 1;\n\n @property({ type: Number, attribute: 'page-size' })\n pageSize = 10;\n\n @property({ type: Number })\n total = 0;\n\n @property({ type: Array, attribute: 'page-size-options' })\n pageSizeOptions: number[] = [5, 10, 25, 50];\n\n @property({ type: Boolean, attribute: 'show-first-last' })\n showFirstLast = true;\n\n get totalPages(): number {\n return Math.max(1, Math.ceil(this.total / Math.max(1, this.pageSize)));\n }\n\n private handlePageSizeChange = (event: Event) => {\n const select = event.target as HTMLSelectElement;\n const newSize = Number(select.value);\n this.pageSize = newSize;\n this.page = 1;\n this.emitEvent<PageChangeEventDetail>('page-size-change', {\n page: this.page,\n pageSize: this.pageSize,\n });\n this.emitEvent<PageChangeEventDetail>('page-change', {\n page: this.page,\n pageSize: this.pageSize,\n });\n };\n\n public firstPage = () => {\n if (this.page <= 1) return;\n this.page = 1;\n this.notifyPageChange();\n };\n\n public prevPage = () => {\n if (this.page <= 1) return;\n this.page -= 1;\n this.notifyPageChange();\n };\n\n public nextPage = () => {\n if (this.page >= this.totalPages) return;\n this.page += 1;\n this.notifyPageChange();\n };\n\n public lastPage = () => {\n if (this.page >= this.totalPages) return;\n this.page = this.totalPages;\n this.notifyPageChange();\n };\n\n private notifyPageChange() {\n this.emitEvent<PageChangeEventDetail>('page-change', {\n page: this.page,\n pageSize: this.pageSize,\n });\n }\n\n override render() {\n const start = this.total === 0 ? 0 : (this.page - 1) this.pageSize + 1;\n const end = Math.min(this.page * this.pageSize, this.total);\n const rangeText = `${start}–${end} of ${this.total}`;\n\n return html`\n <div class=\"rows-per-page\">\n <span>Rows per page:</span>\n <select .value=${String(this.pageSize)} @change=${this.handlePageSizeChange}>\n ${this.pageSizeOptions.map(\n (opt) => html`<option value=${opt} ?selected=${opt === this.pageSize}>${opt}</option>`\n )}\n </select>\n </div>\n\n <div class=\"range-label\">${rangeText}</div>\n\n <div class=\"actions\">\n ${this.showFirstLast\n ? html`\n <md-icon-button\n icon=\"first_page\"\n aria-label=\"First page\"\n ?disabled=${this.page <= 1}\n @click=${this.firstPage}\n ></md-icon-button>\n `\n : nothing}\n <md-icon-button\n icon=\"chevron_left\"\n aria-label=\"Previous page\"\n ?disabled=${this.page <= 1}\n @click=${this.prevPage}\n ></md-icon-button>\n <md-icon-button\n icon=\"chevron_right\"\n aria-label=\"Next page\"\n ?disabled=${this.page >= this.totalPages}\n @click=${this.nextPage}\n ></md-icon-button>\n ${this.showFirstLast\n ? html`\n <md-icon-button\n icon=\"last_page\"\n aria-label=\"Last page\"\n ?disabled=${this.page >= this.totalPages}\n @click=${this.lastPage}\n ></md-icon-button>\n `\n : nothing}\n </div>\n `;\n }\n}\n\n/*\n Material Design 3 Table / Data Table\n /\n@customElement('md-table')\nexport class MdTable extends MdBaseElement {\n static override styles = [MdBaseElement.styles, tableStyles];\n\n @property({ type: Boolean, reflect: true })\n bordered = false;\n\n @property({ type: Boolean, reflect: true })\n elevated = false;\n\n @property({ type: Boolean, reflect: true })\n striped = false;\n\n @property({ type: Boolean, reflect: true })\n hoverable = true;\n\n @property({ type: Boolean, reflect: true })\n dense = false;\n\n @property({ type: Boolean, reflect: true, attribute: 'sticky-header' })\n stickyHeader = false;\n\n @property({ type: Boolean, reflect: true })\n loading = false;\n\n @property({ type: Boolean, reflect: true })\n selectable = false;\n\n @property({ type: Array })\n columns: TableColumn[] = [];\n\n @property({ type: Array })\n rows: Record<string, any>[] = [];\n\n @property({ type: Array })\n selectedRows: Record<string, any>[] = [];\n\n @property({ type: String, attribute: 'sort-column' })\n sortColumn = '';\n\n @property({ type: String, attribute: 'sort-direction' })\n sortDirection: SortDirection = 'none';\n\n @property({ type: Boolean })\n paginated = false;\n\n @property({ type: Number })\n page = 1;\n\n @property({ type: Number, attribute: 'page-size' })\n pageSize = 10;\n\n @property({ type: Array, attribute: 'page-size-options' })\n pageSizeOptions: number[] = [5, 10, 25, 50];\n\n @property({ type: Number })\n total = 0;\n\n override connectedCallback() {\n super.connectedCallback();\n this.setAttribute('role', 'table');\n }\n\n private handleHeaderSortChange = (event: CustomEvent<SortChangeEventDetail>) => {\n this.sortColumn = event.detail.column;\n this.sortDirection = event.detail.direction;\n this.emitEvent<SortChangeEventDetail>('sort-change', event.detail);\n };\n\n private handleSelectAllToggle = (event: CustomEvent<{ checked: boolean }>) => {\n const isChecked = event.detail.checked;\n const currentRows = this.getProcessedRows();\n if (isChecked) {\n const newSelections = [...this.selectedRows];\n currentRows.forEach((r) => {\n if (!newSelections.includes(r)) {\n newSelections.push(r);\n }\n });\n this.selectedRows = newSelections;\n } else {\n this.selectedRows = this.selectedRows.filter((r) => !currentRows.includes(r));\n }\n\n this.emitEvent('selection-change', {\n selectedRows: this.selectedRows,\n allSelected: isChecked,\n });\n };\n\n private handleRowSelectToggle = (row: Record<string, any>, index: number) => {\n const isSelected = this.selectedRows.includes(row);\n if (isSelected) {\n this.selectedRows = this.selectedRows.filter((r) => r !== row);\n } else {\n this.selectedRows = [...this.selectedRows, row];\n }\n\n this.emitEvent<RowSelectEventDetail>('row-select', {\n row,\n index,\n selected: !isSelected,\n selectedRows: this.selectedRows,\n });\n this.emitEvent('selection-change', {\n selectedRows: this.selectedRows,\n });\n };\n\n private handlePaginationChange = (event: CustomEvent<PageChangeEventDetail>) => {\n this.page = event.detail.page;\n this.pageSize = event.detail.pageSize;\n this.emitEvent<PageChangeEventDetail>('page-change', event.detail);\n };\n\n private getProcessedRows(): Record<string, any>[] {\n if (!this.rows \|\| this.rows.length === 0) return [];\n let processed = [...this.rows];\n\n // Sorting\n if (this.sortColumn && this.sortDirection !== 'none') {\n const dir = this.sortDirection === 'asc' ? 1 : -1;\n processed.sort((a, b) => {\n const valA = a[this.sortColumn];\n const valB = b[this.sortColumn];\n if (valA == null && valB == null) return 0;\n if (valA == null) return 1;\n if (valB == null) return -1;\n if (typeof valA === 'number' && typeof valB === 'number') {\n return (valA - valB) dir;\n }\n return String(valA).localeCompare(String(valB)) * dir;\n });\n }\n\n // Pagination (if data-driven rows & paginated)\n if (this.paginated) {\n const startIndex = (this.page - 1) * this.pageSize;\n processed = processed.slice(startIndex, startIndex + this.pageSize);\n }\n\n return processed;\n }\n\n override render() {\n const isDataDriven = this.columns && this.columns.length > 0;\n const currentRows = isDataDriven ? this.getProcessedRows() : [];\n const totalCount = this.total \|\| (this.rows ? this.rows.length : 0);\n\n const allCurrentSelected =\n currentRows.length > 0 && currentRows.every((r) => this.selectedRows.includes(r));\n const someCurrentSelected =\n !allCurrentSelected && currentRows.some((r) => this.selectedRows.includes(r));\n\n return html`\n <div class=\"table-wrapper\">\n ${this.loading\n ? html`<div class=\"progress-container\"><md-linear-progress indeterminate></md-linear-progress></div>`\n : nothing}\n\n <div class=\"table\" role=\"table\">\n ${isDataDriven\n ? html`\n <md-table-head ?sticky=${this.stickyHeader}>\n <md-table-row>\n ${this.selectable\n ? html`\n <md-table-header-cell style=\"width: 48px; padding-right: 0;\">\n <md-checkbox\n .checked=${allCurrentSelected}\n .indeterminate=${someCurrentSelected}\n aria-label=\"Select all rows\"\n @change=${this.handleSelectAllToggle}\n ></md-checkbox>\n </md-table-header-cell>\n `\n : nothing}\n ${this.columns.map((col) => {\n const isSorted = this.sortColumn === col.key;\n const dir = isSorted ? this.sortDirection : 'none';\n return html`\n <md-table-header-cell\n column-key=${col.key}\n ?sortable=${Boolean(col.sortable)}\n sort-direction=${dir}\n align=${col.align \|\| (col.numeric ? 'end' : 'start')}\n width=${col.width \|\| ''}\n @sort-change=${this.handleHeaderSortChange}\n >\n ${col.label}\n </md-table-header-cell>\n `;\n })}\n </md-table-row>\n </md-table-head>\n\n <md-table-body>\n ${currentRows.map((row, index) => {\n const isSelected = this.selectedRows.includes(row);\n return html`\n <md-table-row\n ?selected=${isSelected}\n ?hoverable=${this.hoverable}\n @click=${() => this.emitEvent('row-click', { row, index })}\n >\n ${this.selectable\n ? html`\n <md-table-cell style=\"width: 48px; padding-right: 0;\">\n <md-checkbox\n .checked=${isSelected}\n aria-label=\"Select row\"\n @change=${(e: Event) => {\n e.stopPropagation();\n this.handleRowSelectToggle(row, index);\n }}\n ></md-checkbox>\n </md-table-cell>\n `\n : nothing}\n ${this.columns.map((col) => {\n const cellContent = col.render ? col.render(row, index) : row[col.key];\n return html`\n <md-table-cell\n align=${col.align \|\| (col.numeric ? 'end' : 'start')}\n ?numeric=${Boolean(col.numeric)}\n >\n ${cellContent}\n </md-table-cell>\n `;\n })}\n </md-table-row>\n `;\n })}\n </md-table-body>\n `\n : html`<slot></slot>`}\n </div>\n </div>\n\n ${this.paginated \|\| isDataDriven && this.rows.length > 0 && this.paginated\n ? html`\n <md-table-pagination\n .page=${this.page}\n .pageSize=${this.pageSize}\n .total=${totalCount}\n .pageSizeOptions=${this.pageSizeOptions}\n @page-change=${this.handlePaginationChange}\n @page-size-change=${this.handlePaginationChange}\n ></md-table-pagination>\n `\n : nothing}\n <slot name=\"pagination\"></slot>\n `;\n }\n}\n\n// Aliases\n@customElement('md-data-table')\nexport class MdDataTable extends MdTable {}\n\n@customElement('md-table-header')\nexport class MdTableHeader extends MdTableHead {}\n\n@customElement('md-table-head-cell')\nexport class MdTableHeadCell extends MdTableHeaderCell {}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'md-table': MdTable;\n 'md-data-table': MdDataTable;\n 'md-table-head': MdTableHead;\n 'md-table-header': MdTableHeader;\n 'md-table-body': MdTableBody;\n 'md-table-row': MdTableRow;\n 'md-table-cell': MdTableCell;\n 'md-table-header-cell': MdTableHeaderCell;\n 'md-table-head-cell': MdTableHeadCell;\n 'md-table-pagination': MdTablePagination;\n }\n}\n\n"],"mappings":"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"}

package/dist/chunks/tabs-C0mtURlT.js ADDED Viewed

@@ -0,0 +1,182 @@
+import { n as e, t } from "./decorate-DknOJ8FJ.js";
+import "./ripple-CBOKeVfm.js";
+import "./focus-ring-K6SY_mIm.js";
+import "./icon-FvKeXi61.js";
+import { css as n, html as r, nothing as i } from "lit";
+import { customElement as a, property as o, query as s, queryAssignedElements as c } from "lit/decorators.js";
+//#region src/components/tabs/tabs.css.ts
+var l = n`
+  :host {
+    display: flex;
+    position: relative;
+    box-sizing: border-box;
+    border-bottom: 1px solid var(--md-sys-color-surface-variant, #E7E0EC);
+    overflow-x: auto;
+    scrollbar-width: none; /* Firefox */
+  }
+  :host::-webkit-scrollbar {
+    display: none; /* Safari and Chrome */
+  }
+  .tabs-container {
+    display: flex;
+    position: relative;
+    width: 100%;
+  }
+  .indicator {
+    position: absolute;
+    bottom: 0;
+    height: 3px;
+    background-color: var(--md-sys-color-primary, #6750A4);
+    border-radius: 3px 3px 0 0;
+    transition: transform 250ms cubic-bezier(0.2, 0, 0, 1),
+                width 250ms cubic-bezier(0.2, 0, 0, 1);
+    pointer-events: none;
+  }
+`, u = n`
+  :host {
+    display: inline-flex;
+    flex: 1;
+    min-width: 90px;
+    height: 48px;
+    outline: none;
+    cursor: pointer;
+    user-select: none;
+    -webkit-tap-highlight-color: transparent;
+  }
+  :host([disabled]) {
+    pointer-events: none;
+    opacity: 0.38;
+  }
+  .tab {
+    position: relative;
+    display: inline-flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+    padding: 0 16px;
+    gap: 8px;
+    font-family: var(--md-sys-typescale-font-family, inherit);
+    font-size: var(--md-sys-typescale-title-small-size, 14px);
+    font-weight: 500;
+    line-height: 20px;
+    letter-spacing: 0.1px;
+    color: var(--md-sys-color-on-surface-variant, #49454F);
+    transition: color 150ms cubic-bezier(0.2, 0, 0, 1);
+  }
+  :host([active]) .tab {
+    color: var(--md-sys-color-primary, #6750A4);
+  }
+  .content {
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    position: relative;
+    z-index: 1;
+  }
+`, d = class extends e {
+	constructor(...e) {
+		super(...e), this.active = !1, this.disabled = !1, this.icon = "", this.label = "";
+	}
+	static {
+		this.styles = [e.styles, u];
+	}
+	connectedCallback() {
+		super.connectedCallback(), this.setAttribute("role", "tab"), this.setAttribute("aria-selected", this.active ? "true" : "false"), this.tabIndex = this.active ? 0 : -1;
+	}
+	updated(e) {
+		super.updated(e), e.has("active") && (this.setAttribute("aria-selected", this.active ? "true" : "false"), this.tabIndex = this.active ? 0 : -1);
+	}
+	render() {
+		return r`
+      <div class="tab">
+        <md-ripple ?disabled=${this.disabled}></md-ripple>
+        <md-focus-ring></md-focus-ring>
+        <span class="content">
+          <slot name="icon">
+            ${this.icon ? r`<md-icon name=${this.icon}></md-icon>` : i}
+          </slot>
+          <slot>${this.label}</slot>
+        </span>
+      </div>
+    `;
+	}
+};
+t([o({
+	type: Boolean,
+	reflect: !0
+})], d.prototype, "active", void 0), t([o({
+	type: Boolean,
+	reflect: !0
+})], d.prototype, "disabled", void 0), t([o({ type: String })], d.prototype, "icon", void 0), t([o({ type: String })], d.prototype, "label", void 0), d = t([a("md-tab")], d);
+var f = class extends e {
+	constructor(...e) {
+		super(...e), this.activeIndex = 0, this.handleSlotChange = () => {
+			this.syncActiveTab();
+		}, this.handleClick = (e) => {
+			let t = e.target.closest("md-tab");
+			if (t && !t.disabled) {
+				let e = this.tabs.indexOf(t);
+				e !== -1 && e !== this.activeIndex && (this.activeIndex = e, this.syncActiveTab(), this.emitEvent("change", { activeIndex: this.activeIndex }));
+			}
+		}, this.handleKeyDown = (e) => {
+			let t = this.tabs.filter((e) => !e.disabled);
+			if (t.length === 0) return;
+			let n = this.tabs[this.activeIndex], r = t.indexOf(n), i = -1;
+			if (e.key === "ArrowRight" ? (e.preventDefault(), i = r < t.length - 1 ? r + 1 : 0) : e.key === "ArrowLeft" ? (e.preventDefault(), i = r > 0 ? r - 1 : t.length - 1) : e.key === "Home" ? (e.preventDefault(), i = 0) : e.key === "End" && (e.preventDefault(), i = t.length - 1), i !== -1 && t[i]) {
+				let e = t[i];
+				this.activeIndex = this.tabs.indexOf(e), this.syncActiveTab(), e.focus(), this.emitEvent("change", { activeIndex: this.activeIndex });
+			}
+		};
+	}
+	static {
+		this.styles = [e.styles, l];
+	}
+	connectedCallback() {
+		super.connectedCallback(), this.setAttribute("role", "tablist"), this.addEventListener("click", this.handleClick), this.addEventListener("keydown", this.handleKeyDown);
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback(), this.removeEventListener("click", this.handleClick), this.removeEventListener("keydown", this.handleKeyDown);
+	}
+	updated(e) {
+		super.updated(e), e.has("activeIndex") && this.syncActiveTab();
+	}
+	syncActiveTab() {
+		!this.tabs || this.tabs.length === 0 || (this.tabs.forEach((e, t) => {
+			e.active = t === this.activeIndex;
+		}), this.updateIndicator());
+	}
+	updateIndicator() {
+		if (!this.indicatorElement || !this.tabs || this.tabs.length === 0) return;
+		let e = this.tabs[this.activeIndex];
+		if (e) {
+			let t = this.getBoundingClientRect(), n = e.getBoundingClientRect(), r = n.left - t.left, i = n.width;
+			this.indicatorElement.style.transform = `translateX(${r}px)`, this.indicatorElement.style.width = `${i}px`;
+		}
+	}
+	render() {
+		return r`
+      <div class="tabs-container">
+        <slot @slotchange=${this.handleSlotChange}></slot>
+        <div class="indicator"></div>
+      </div>
+    `;
+	}
+};
+t([o({
+	type: Number,
+	reflect: !0,
+	attribute: "active-index"
+})], f.prototype, "activeIndex", void 0), t([c({ selector: "md-tab" })], f.prototype, "tabs", void 0), t([s(".indicator")], f.prototype, "indicatorElement", void 0), f = t([a("md-tabs")], f);
+//#endregion
+export { f as n, d as t };
+//# sourceMappingURL=tabs-C0mtURlT.js.map

package/dist/chunks/{tabs-BfOtoeir.js.map → tabs-C0mtURlT.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"tabs-BfOtoeir.js","names":[],"sources":["../../src/components/tabs/tabs.css.ts","../../src/components/tabs/tabs.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const tabsStyles = css`\n :host {\n display: flex;\n position: relative;\n box-sizing: border-box;\n border-bottom: 1px solid var(--md-sys-color-surface-variant, #E7E0EC);\n overflow-x: auto;\n scrollbar-width: none; /* Firefox /\n }\n\n :host::-webkit-scrollbar {\n display: none; / Safari and Chrome */\n }\n\n .tabs-container {\n display: flex;\n position: relative;\n width: 100%;\n }\n\n .indicator {\n position: absolute;\n bottom: 0;\n height: 3px;\n background-color: var(--md-sys-color-primary, #6750A4);\n border-radius: 3px 3px 0 0;\n transition: transform 250ms cubic-bezier(0.2, 0, 0, 1),\n width 250ms cubic-bezier(0.2, 0, 0, 1);\n pointer-events: none;\n }\n`;\n\nexport const tabStyles = css`\n :host {\n display: inline-flex;\n flex: 1;\n min-width: 90px;\n height: 48px;\n outline: none;\n cursor: pointer;\n user-select: none;\n -webkit-tap-highlight-color: transparent;\n }\n\n :host([disabled]) {\n pointer-events: none;\n opacity: 0.38;\n }\n\n .tab {\n position: relative;\n display: inline-flex;\n flex-direction: row;\n align-items: center;\n justify-content: center;\n width: 100%;\n height: 100%;\n padding: 0 16px;\n gap: 8px;\n font-family: var(--md-sys-typescale-font-family, inherit);\n font-size: var(--md-sys-typescale-title-small-size, 14px);\n font-weight: 500;\n line-height: 20px;\n letter-spacing: 0.1px;\n color: var(--md-sys-color-on-surface-variant, #49454F);\n transition: color 150ms cubic-bezier(0.2, 0, 0, 1);\n }\n\n :host([active]) .tab {\n color: var(--md-sys-color-primary, #6750A4);\n }\n\n .content {\n display: inline-flex;\n align-items: center;\n gap: 8px;\n position: relative;\n z-index: 1;\n }\n`;\n\n","import { html, nothing } from 'lit';\nimport { customElement, property, query, queryAssignedElements } from 'lit/decorators.js';\nimport { MdBaseElement } from '../../internal/base-component.js';\nimport '../../internal/ripple/ripple.js';\nimport '../../internal/focus-ring/focus-ring.js';\nimport '../icon/icon.js';\nimport { tabsStyles, tabStyles } from './tabs.css.js';\n\n@customElement('md-tab')\nexport class MdTab extends MdBaseElement {\n static override styles = [MdBaseElement.styles, tabStyles];\n\n @property({ type: Boolean, reflect: true })\n active = false;\n\n @property({ type: Boolean, reflect: true })\n disabled = false;\n\n @property({ type: String })\n icon = '';\n\n @property({ type: String })\n label = '';\n\n override connectedCallback() {\n super.connectedCallback();\n this.setAttribute('role', 'tab');\n this.setAttribute('aria-selected', this.active ? 'true' : 'false');\n this.tabIndex = this.active ? 0 : -1;\n }\n\n override updated(changedProperties: Map<string, unknown>) {\n super.updated(changedProperties);\n if (changedProperties.has('active')) {\n this.setAttribute('aria-selected', this.active ? 'true' : 'false');\n this.tabIndex = this.active ? 0 : -1;\n }\n }\n\n override render() {\n return html`\n <div class=\"tab\">\n <md-ripple ?disabled=${this.disabled}></md-ripple>\n <md-focus-ring></md-focus-ring>\n <span class=\"content\">\n <slot name=\"icon\">\n ${this.icon ? html`<md-icon name=${this.icon}></md-icon>` : nothing}\n </slot>\n <slot>${this.label}</slot>\n </span>\n </div>\n `;\n }\n}\n\n@customElement('md-tabs')\nexport class MdTabs extends MdBaseElement {\n static override styles = [MdBaseElement.styles, tabsStyles];\n\n @property({ type: Number, reflect: true, attribute: 'active-index' })\n activeIndex = 0;\n\n @queryAssignedElements({ selector: 'md-tab' })\n private tabs!: MdTab[];\n\n @query('.indicator')\n private indicatorElement?: HTMLElement;\n\n override connectedCallback() {\n super.connectedCallback();\n this.setAttribute('role', 'tablist');\n this.addEventListener('click', this.handleClick);\n this.addEventListener('keydown', this.handleKeyDown);\n }\n\n override disconnectedCallback() {\n super.disconnectedCallback();\n this.removeEventListener('click', this.handleClick);\n this.removeEventListener('keydown', this.handleKeyDown);\n }\n\n override updated(changedProperties: Map<string, unknown>) {\n super.updated(changedProperties);\n if (changedProperties.has('activeIndex')) {\n this.syncActiveTab();\n }\n }\n\n private handleSlotChange = () => {\n this.syncActiveTab();\n };\n\n private syncActiveTab() {\n if (!this.tabs \|\| this.tabs.length === 0) return;\n\n this.tabs.forEach((tab, index) => {\n tab.active = index === this.activeIndex;\n });\n\n this.updateIndicator();\n }\n\n private updateIndicator() {\n if (!this.indicatorElement \|\| !this.tabs \|\| this.tabs.length === 0) return;\n\n const activeTab = this.tabs[this.activeIndex];\n if (activeTab) {\n const parentRect = this.getBoundingClientRect();\n const tabRect = activeTab.getBoundingClientRect();\n const left = tabRect.left - parentRect.left;\n const width = tabRect.width;\n\n this.indicatorElement.style.transform = `translateX(${left}px)`;\n this.indicatorElement.style.width = `${width}px`;\n }\n }\n\n private handleClick = (event: MouseEvent) => {\n const target = (event.target as HTMLElement).closest('md-tab') as MdTab \| null;\n if (target && !target.disabled) {\n const index = this.tabs.indexOf(target);\n if (index !== -1 && index !== this.activeIndex) {\n this.activeIndex = index;\n this.syncActiveTab();\n this.emitEvent('change', { activeIndex: this.activeIndex });\n }\n }\n };\n\n private handleKeyDown = (event: KeyboardEvent) => {\n const enabledTabs = this.tabs.filter((t) => !t.disabled);\n if (enabledTabs.length === 0) return;\n\n const currentTab = this.tabs[this.activeIndex];\n const currentIndex = enabledTabs.indexOf(currentTab!);\n\n let nextIndex = -1;\n if (event.key === 'ArrowRight') {\n event.preventDefault();\n nextIndex = currentIndex < enabledTabs.length - 1 ? currentIndex + 1 : 0;\n } else if (event.key === 'ArrowLeft') {\n event.preventDefault();\n nextIndex = currentIndex > 0 ? currentIndex - 1 : enabledTabs.length - 1;\n } else if (event.key === 'Home') {\n event.preventDefault();\n nextIndex = 0;\n } else if (event.key === 'End') {\n event.preventDefault();\n nextIndex = enabledTabs.length - 1;\n }\n\n if (nextIndex !== -1 && enabledTabs[nextIndex]) {\n const targetTab = enabledTabs[nextIndex]!;\n this.activeIndex = this.tabs.indexOf(targetTab);\n this.syncActiveTab();\n targetTab.focus();\n this.emitEvent('change', { activeIndex: this.activeIndex });\n }\n };\n\n override render() {\n return html`\n <div class=\"tabs-container\">\n <slot @slotchange=${this.handleSlotChange}></slot>\n <div class=\"indicator\"></div>\n </div>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'md-tab': MdTab;\n 'md-tabs': MdTabs;\n }\n}\n\n"],"mappings":"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"}
1	+ {"version":3,"file":"tabs-C0mtURlT.js","names":[],"sources":["../../src/components/tabs/tabs.css.ts","../../src/components/tabs/tabs.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const tabsStyles = css`\n :host {\n display: flex;\n position: relative;\n box-sizing: border-box;\n border-bottom: 1px solid var(--md-sys-color-surface-variant, #E7E0EC);\n overflow-x: auto;\n scrollbar-width: none; /* Firefox /\n }\n\n :host::-webkit-scrollbar {\n display: none; / Safari and Chrome */\n }\n\n .tabs-container {\n display: flex;\n position: relative;\n width: 100%;\n }\n\n .indicator {\n position: absolute;\n bottom: 0;\n height: 3px;\n background-color: var(--md-sys-color-primary, #6750A4);\n border-radius: 3px 3px 0 0;\n transition: transform 250ms cubic-bezier(0.2, 0, 0, 1),\n width 250ms cubic-bezier(0.2, 0, 0, 1);\n pointer-events: none;\n }\n`;\n\nexport const tabStyles = css`\n :host {\n display: inline-flex;\n flex: 1;\n min-width: 90px;\n height: 48px;\n outline: none;\n cursor: pointer;\n user-select: none;\n -webkit-tap-highlight-color: transparent;\n }\n\n :host([disabled]) {\n pointer-events: none;\n opacity: 0.38;\n }\n\n .tab {\n position: relative;\n display: inline-flex;\n flex-direction: row;\n align-items: center;\n justify-content: center;\n width: 100%;\n height: 100%;\n padding: 0 16px;\n gap: 8px;\n font-family: var(--md-sys-typescale-font-family, inherit);\n font-size: var(--md-sys-typescale-title-small-size, 14px);\n font-weight: 500;\n line-height: 20px;\n letter-spacing: 0.1px;\n color: var(--md-sys-color-on-surface-variant, #49454F);\n transition: color 150ms cubic-bezier(0.2, 0, 0, 1);\n }\n\n :host([active]) .tab {\n color: var(--md-sys-color-primary, #6750A4);\n }\n\n .content {\n display: inline-flex;\n align-items: center;\n gap: 8px;\n position: relative;\n z-index: 1;\n }\n`;\n\n","import { html, nothing } from 'lit';\nimport { customElement, property, query, queryAssignedElements } from 'lit/decorators.js';\nimport { MdBaseElement } from '../../internal/base-component.js';\nimport '../../internal/ripple/ripple.js';\nimport '../../internal/focus-ring/focus-ring.js';\nimport '../icon/icon.js';\nimport { tabsStyles, tabStyles } from './tabs.css.js';\n\n@customElement('md-tab')\nexport class MdTab extends MdBaseElement {\n static override styles = [MdBaseElement.styles, tabStyles];\n\n @property({ type: Boolean, reflect: true })\n active = false;\n\n @property({ type: Boolean, reflect: true })\n disabled = false;\n\n @property({ type: String })\n icon = '';\n\n @property({ type: String })\n label = '';\n\n override connectedCallback() {\n super.connectedCallback();\n this.setAttribute('role', 'tab');\n this.setAttribute('aria-selected', this.active ? 'true' : 'false');\n this.tabIndex = this.active ? 0 : -1;\n }\n\n override updated(changedProperties: Map<string, unknown>) {\n super.updated(changedProperties);\n if (changedProperties.has('active')) {\n this.setAttribute('aria-selected', this.active ? 'true' : 'false');\n this.tabIndex = this.active ? 0 : -1;\n }\n }\n\n override render() {\n return html`\n <div class=\"tab\">\n <md-ripple ?disabled=${this.disabled}></md-ripple>\n <md-focus-ring></md-focus-ring>\n <span class=\"content\">\n <slot name=\"icon\">\n ${this.icon ? html`<md-icon name=${this.icon}></md-icon>` : nothing}\n </slot>\n <slot>${this.label}</slot>\n </span>\n </div>\n `;\n }\n}\n\n@customElement('md-tabs')\nexport class MdTabs extends MdBaseElement {\n static override styles = [MdBaseElement.styles, tabsStyles];\n\n @property({ type: Number, reflect: true, attribute: 'active-index' })\n activeIndex = 0;\n\n @queryAssignedElements({ selector: 'md-tab' })\n private tabs!: MdTab[];\n\n @query('.indicator')\n private indicatorElement?: HTMLElement;\n\n override connectedCallback() {\n super.connectedCallback();\n this.setAttribute('role', 'tablist');\n this.addEventListener('click', this.handleClick);\n this.addEventListener('keydown', this.handleKeyDown);\n }\n\n override disconnectedCallback() {\n super.disconnectedCallback();\n this.removeEventListener('click', this.handleClick);\n this.removeEventListener('keydown', this.handleKeyDown);\n }\n\n override updated(changedProperties: Map<string, unknown>) {\n super.updated(changedProperties);\n if (changedProperties.has('activeIndex')) {\n this.syncActiveTab();\n }\n }\n\n private handleSlotChange = () => {\n this.syncActiveTab();\n };\n\n private syncActiveTab() {\n if (!this.tabs \|\| this.tabs.length === 0) return;\n\n this.tabs.forEach((tab, index) => {\n tab.active = index === this.activeIndex;\n });\n\n this.updateIndicator();\n }\n\n private updateIndicator() {\n if (!this.indicatorElement \|\| !this.tabs \|\| this.tabs.length === 0) return;\n\n const activeTab = this.tabs[this.activeIndex];\n if (activeTab) {\n const parentRect = this.getBoundingClientRect();\n const tabRect = activeTab.getBoundingClientRect();\n const left = tabRect.left - parentRect.left;\n const width = tabRect.width;\n\n this.indicatorElement.style.transform = `translateX(${left}px)`;\n this.indicatorElement.style.width = `${width}px`;\n }\n }\n\n private handleClick = (event: MouseEvent) => {\n const target = (event.target as HTMLElement).closest('md-tab') as MdTab \| null;\n if (target && !target.disabled) {\n const index = this.tabs.indexOf(target);\n if (index !== -1 && index !== this.activeIndex) {\n this.activeIndex = index;\n this.syncActiveTab();\n this.emitEvent('change', { activeIndex: this.activeIndex });\n }\n }\n };\n\n private handleKeyDown = (event: KeyboardEvent) => {\n const enabledTabs = this.tabs.filter((t) => !t.disabled);\n if (enabledTabs.length === 0) return;\n\n const currentTab = this.tabs[this.activeIndex];\n const currentIndex = enabledTabs.indexOf(currentTab!);\n\n let nextIndex = -1;\n if (event.key === 'ArrowRight') {\n event.preventDefault();\n nextIndex = currentIndex < enabledTabs.length - 1 ? currentIndex + 1 : 0;\n } else if (event.key === 'ArrowLeft') {\n event.preventDefault();\n nextIndex = currentIndex > 0 ? currentIndex - 1 : enabledTabs.length - 1;\n } else if (event.key === 'Home') {\n event.preventDefault();\n nextIndex = 0;\n } else if (event.key === 'End') {\n event.preventDefault();\n nextIndex = enabledTabs.length - 1;\n }\n\n if (nextIndex !== -1 && enabledTabs[nextIndex]) {\n const targetTab = enabledTabs[nextIndex]!;\n this.activeIndex = this.tabs.indexOf(targetTab);\n this.syncActiveTab();\n targetTab.focus();\n this.emitEvent('change', { activeIndex: this.activeIndex });\n }\n };\n\n override render() {\n return html`\n <div class=\"tabs-container\">\n <slot @slotchange=${this.handleSlotChange}></slot>\n <div class=\"indicator\"></div>\n </div>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'md-tab': MdTab;\n 'md-tabs': MdTabs;\n }\n}\n\n"],"mappings":"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"}