@tedi-design-system/angular 9.0.1-rc.1 → 9.0.1-rc.3
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.
|
@@ -12449,7 +12449,12 @@ class PopoverComponent {
|
|
|
12449
12449
|
return;
|
|
12450
12450
|
const container = overlayEl.querySelector(".tedi-popover__container");
|
|
12451
12451
|
if (container) {
|
|
12452
|
-
|
|
12452
|
+
// Leave focus alone if the content already moved it inside (e.g. time picker column).
|
|
12453
|
+
setTimeout(() => {
|
|
12454
|
+
if (!container.contains(this.document.activeElement)) {
|
|
12455
|
+
container.focus({ preventScroll: true });
|
|
12456
|
+
}
|
|
12457
|
+
});
|
|
12453
12458
|
this.setupKeyboardNavigation(container);
|
|
12454
12459
|
}
|
|
12455
12460
|
this.horizontalPush.attach();
|
|
@@ -13294,7 +13299,6 @@ class TediTableComponent {
|
|
|
13294
13299
|
internalId = generateUUID();
|
|
13295
13300
|
resolvedId = computed(() => this.id() ?? `tedi-table-${this.internalId}`, ...(ngDevMode ? [{ debugName: "resolvedId" }] : []));
|
|
13296
13301
|
placeholderLabel = this.translation.track("table.no-data");
|
|
13297
|
-
rowDetailsLabel = this.translation.track("table.row-details");
|
|
13298
13302
|
dragColumnLabel = this.translation.track("table.drag-column");
|
|
13299
13303
|
dragRowLabel = this.translation.track("table.drag-row");
|
|
13300
13304
|
selectColumnLabel = this.translation.track("table.select-column");
|
|
@@ -14883,7 +14887,7 @@ class TediTableComponent {
|
|
|
14883
14887
|
useFactory: (component) => component.contextValue,
|
|
14884
14888
|
deps: [TediTableComponent],
|
|
14885
14889
|
},
|
|
14886
|
-
], queries: [{ propertyName: "customResultsTemplateRef", first: true, predicate: TediPaginationResultsDirective, descendants: true, read: TemplateRef, isSignal: true }], viewQueries: [{ propertyName: "scrollContainer", first: true, predicate: ["scrollContainer"], descendants: true, isSignal: true }, { propertyName: "tableElement", first: true, predicate: ["tableElement"], descendants: true, isSignal: true }], ngImport: i0, template: "<ng-content select=\"tedi-table-toolbar\" />\n<ng-content select=\"tedi-table-columns-menu\" />\n\n<!-- Live region for screen-reader announcements during keyboard reordering -->\n@if (reorderableColumns() || reorderableRows()) {\n <div\n [id]=\"liveRegionId\"\n aria-live=\"polite\"\n aria-atomic=\"true\"\n class=\"sr-only\"\n ></div>\n}\n\n@if (resolvedTopSlot(); as top) {\n <div class=\"tedi-table__pagination tedi-table__pagination--top\">\n <tedi-pagination\n [pageCount]=\"paginationPageCount()\"\n [page]=\"paginationPage()\"\n [totalItems]=\"paginationTotalItems()\"\n [pageSize]=\"paginationPageSize()\"\n [pageSizeOptions]=\"paginationPageSizeOptions()\"\n [boundaryCount]=\"top.boundaryCount\"\n [siblingCount]=\"top.siblingCount\"\n [labels]=\"top.labels\"\n [background]=\"top.background\"\n [align]=\"top.align\"\n [dividerPosition]=\"top.dividerPosition\"\n [hideResults]=\"top.hideResults\"\n [hidePageSize]=\"top.hidePageSize\"\n [hidePager]=\"top.hidePager\"\n [hideArrows]=\"top.hideArrows\"\n [disableArrowsAtBoundary]=\"top.disableArrowsAtBoundary\"\n [arrowVariant]=\"top.arrowVariant\"\n [showArrowLabels]=\"top.showArrowLabels\"\n [previousIcon]=\"top.previousIcon\"\n [nextIcon]=\"top.nextIcon\"\n [showModalTitle]=\"top.showModalTitle\"\n [xs]=\"top.xs\"\n [sm]=\"top.sm\"\n [md]=\"top.md\"\n [lg]=\"top.lg\"\n [xl]=\"top.xl\"\n [xxl]=\"top.xxl\"\n (pageChange)=\"handlePaginationPageChange($event)\"\n (pageSizeChange)=\"handlePaginationPageSizeChange($event)\"\n >\n @if (topResultsTemplate(); as tpl) {\n <span tediPaginationResults>\n <ng-container *ngTemplateOutlet=\"tpl\" />\n </span>\n }\n </tedi-pagination>\n </div>\n}\n\n<div\n #scrollContainer\n class=\"tedi-table__scroll\"\n [class.tedi-table__scroll--shadow-start]=\"hasStartShadow()\"\n [class.tedi-table__scroll--shadow-end]=\"hasEndShadow()\"\n [class.tedi-table__scroll--shadow-header]=\"hasHeaderShadow()\"\n [attr.style]=\"maxHeightStyle()\"\n cdkScrollable\n tabindex=\"0\"\n role=\"group\"\n [attr.aria-label]=\"scrollRegionLabel()\"\n (scroll)=\"onHorizontalScroll()\"\n>\n <table\n #tableElement\n class=\"tedi-table__table\"\n [attr.id]=\"id() || null\"\n [attr.aria-label]=\"ariaLabel() || null\"\n [attr.aria-labelledby]=\"ariaLabelledby() || null\"\n [attr.aria-rowcount]=\"ariaRowCount()\"\n [attr.aria-colcount]=\"leafColumnCount() > 0 ? leafColumnCount() : null\"\n >\n @if (caption(); as cap) {\n <caption class=\"tedi-table__caption\">\n @if (isString(cap)) {\n {{ cap }}\n } @else {\n <ng-container *ngTemplateOutlet=\"$any(cap)\" />\n }\n </caption>\n }\n\n <thead class=\"tedi-table__head\">\n @for (\n headerGroup of headerGroups();\n track headerGroup.id;\n let rowIndex = $index\n ) {\n <tr\n class=\"tedi-table__row\"\n [attr.aria-rowindex]=\"ariaRowIndexingEnabled() ? rowIndex + 1 : null\"\n [cdkDropListDisabled]=\"!reorderableColumns() || rowIndex > 0\"\n cdkDropList\n cdkDropListOrientation=\"horizontal\"\n cdkDropListAutoScrollDisabled\n (cdkDropListDropped)=\"handleColumnDrop($event)\"\n >\n @for (header of headerGroup.headers; track header.id) {\n @if (shouldRenderHeader(header, rowIndex)) {\n @let meta = getColumnMeta(header.column);\n @let ariaSort = getHeaderAriaSort(header.column);\n @let srHeaderLabel = getSrOnlyHeaderLabel(header.column);\n @let rowSpan = getHeaderRowSpan(header, rowIndex);\n @let headerAlign = meta?.headerAlign ?? meta?.align;\n <th\n scope=\"col\"\n cdkDrag\n [cdkDragDisabled]=\"\n !reorderableColumns() ||\n rowIndex > 0 ||\n header.column.id === SELECT_COLUMN_ID ||\n header.column.id === EXPAND_COLUMN_ID\n \"\n cdkDragLockAxis=\"x\"\n (keydown)=\"handleHeaderKeydown($event, header)\"\n [class]=\"\n 'tedi-table__header-cell' +\n (isHeaderGroup(header)\n ? ' tedi-table__header-cell--group'\n : '') +\n (headerAlign\n ? ' tedi-table__cell--align-' + headerAlign\n : '') +\n (meta?.vAlign\n ? ' tedi-table__cell--valign-' + meta?.vAlign\n : '') +\n (pickedUpColumnId() === header.column.id\n ? ' tedi-table__header-cell--picked-up'\n : '') +\n controlCellClass(header.column.id) +\n stickyLeftClass(header.column.id) +\n stickyRightClass(header.column.id)\n \"\n [attr.colspan]=\"header.colSpan > 1 ? header.colSpan : null\"\n [attr.rowspan]=\"rowSpan\"\n [attr.aria-sort]=\"ariaSort\"\n [style.width.px]=\"headerCellWidth(header.column)\"\n [style.min-width.px]=\"columnMinWidth(header.column)\"\n [style.max-width.px]=\"columnMaxWidth(header.column)\"\n [style.left.px]=\"stickyLeft(header.column.id)\"\n [style.right.px]=\"stickyRight(header.column.id)\"\n >\n @if (srHeaderLabel) {\n <span class=\"sr-only\">{{ srHeaderLabel }}</span>\n }\n @if (header.column.id === SELECT_COLUMN_ID) {\n @if (selectionMode() === \"multiple\") {\n <input\n tedi-checkbox\n type=\"checkbox\"\n [id]=\"resolvedId() + '-select-all'\"\n [name]=\"resolvedId() + '-select-all'\"\n [attr.aria-label]=\"selectAllLabel()\"\n [checked]=\"isAllPageRowsSelected()\"\n [indeterminate]=\"\n isSomePageRowsSelected() && !isAllPageRowsSelected()\n \"\n (change)=\"handleSelectAll($any($event.target).checked)\"\n />\n }\n } @else if (header.column.id === EXPAND_COLUMN_ID) {\n <!-- empty -->\n } @else if (header.column.id === DRAG_COLUMN_ID) {\n <!-- empty -->\n } @else {\n <span class=\"tedi-table__header-content\">\n @if (\n reorderableColumns() &&\n rowIndex === 0 &&\n !isHeaderGroup(header)\n ) {\n <button\n type=\"button\"\n cdkDragHandle\n class=\"tedi-table__drag-handle\"\n [class.tedi-table__drag-handle--picked-up]=\"\n pickedUpColumnId() === header.column.id\n \"\n [id]=\"reorderHandleId(header.column.id)\"\n [attr.aria-label]=\"dragColumnLabel()\"\n [attr.aria-pressed]=\"\n reorderableColumns()\n ? pickedUpColumnId() === header.column.id\n : null\n \"\n >\n <tedi-icon\n name=\"drag_indicator\"\n [size]=\"18\"\n color=\"inherit\"\n />\n </button>\n }\n <ng-container\n *flexRender=\"\n header.column.columnDef.header;\n props: header.getContext();\n let content\n \"\n >\n @if (shouldRenderSortableHeader(header.column, content)) {\n <button\n tedi-table-header-button\n [icon]=\"sortIcon(header.column)\"\n [selected]=\"!!header.column.getIsSorted()\"\n (click)=\"handleSortToggle(header.column)\"\n >\n {{ content }}\n </button>\n } @else if (isString(content) || isNumber(content)) {\n {{ content }}\n } @else {\n {{ content }}\n }\n </ng-container>\n @if (shouldRenderFilterButton(header.column)) {\n @if (filterUsesModal()) {\n <button\n tedi-table-header-button\n icon=\"filter_alt\"\n [selected]=\"filterIsActive(header.column)\"\n [filled]=\"filterIsActive(header.column)\"\n [aria-label]=\"filterAriaLabel(header.column)\"\n (click)=\"openFilterModal(header.column)\"\n ></button>\n } @else {\n <tedi-popover\n #filterPopover\n class=\"tedi-table__filter-popover\"\n position=\"bottom-end\"\n [preventOverflow]=\"true\"\n >\n <button\n tedi-popover-trigger\n tedi-table-header-button\n icon=\"filter_alt\"\n [selected]=\"filterIsActive(header.column)\"\n [filled]=\"filterIsActive(header.column)\"\n [aria-label]=\"filterAriaLabel(header.column)\"\n (click)=\"handleFilterTriggerClick(header.column)\"\n ></button>\n <tedi-popover-content\n [maxWidth]=\"filterPopoverWidthFor(header.column)\"\n >\n <div class=\"tedi-table__filter\">\n <div class=\"tedi-table__filter-body\">\n @if (filterTemplateFor(header.column); as tpl) {\n <ng-container\n *ngTemplateOutlet=\"\n tpl;\n context: filterContextFor(\n header.column,\n filterPopover\n )\n \"\n />\n }\n </div>\n <div class=\"tedi-table__filter-actions\">\n <button\n tedi-button\n variant=\"secondary\"\n size=\"small\"\n type=\"button\"\n (click)=\"\n handleFilterClear(\n header.column,\n filterPopover\n )\n \"\n >\n {{ filterClearLabel() }}\n </button>\n <button\n tedi-button\n variant=\"primary\"\n size=\"small\"\n type=\"button\"\n (click)=\"\n handleFilterApply(\n header.column,\n filterPopover\n )\n \"\n >\n {{ filterApplyLabel() }}\n </button>\n </div>\n </div>\n </tedi-popover-content>\n </tedi-popover>\n }\n }\n </span>\n }\n </th>\n }\n }\n </tr>\n }\n @if (enableColumnFilters()) {\n <tr\n class=\"tedi-table__row tedi-table__row--filter\"\n [attr.aria-rowindex]=\"\n ariaRowIndexingEnabled() ? headerGroups().length + 1 : null\n \"\n >\n @for (column of leafColumns(); track column.id) {\n @let filterId = resolvedId() + \"-filter-\" + column.id;\n <th class=\"tedi-table__header-cell\" scope=\"col\">\n @if (column.getCanFilter()) {\n <tedi-form-field size=\"small\">\n <input\n tedi-text-field\n type=\"text\"\n [id]=\"filterId\"\n [name]=\"filterId\"\n [attr.aria-label]=\"filterLabel(column)\"\n [placeholder]=\"filterPlaceholder()\"\n [value]=\"getFilterValue(column)\"\n (input)=\"\n handleColumnFilter(column, $any($event.target).value)\n \"\n (clear)=\"handleColumnFilter(column, '')\"\n />\n </tedi-form-field>\n }\n </th>\n }\n </tr>\n }\n </thead>\n\n <tbody\n class=\"tedi-table__body\"\n cdkDropList\n [cdkDropListDisabled]=\"!reorderableRows()\"\n (cdkDropListDropped)=\"handleRowDrop($any($event))\"\n >\n @if (rows().length === 0) {\n <tr class=\"tedi-table__row\">\n <td\n class=\"tedi-table__cell tedi-table__cell--placeholder\"\n [attr.colspan]=\"leafColumnCount() > 0 ? leafColumnCount() : 1\"\n >\n @if (placeholder(); as pl) {\n @if (placeholderRole()) {\n <div [attr.role]=\"placeholderRole()\">\n @if (isString(pl)) {\n {{ pl }}\n } @else {\n <ng-container *ngTemplateOutlet=\"$any(pl)\" />\n }\n </div>\n } @else {\n @if (isString(pl)) {\n {{ pl }}\n } @else {\n <ng-container *ngTemplateOutlet=\"$any(pl)\" />\n }\n }\n } @else {\n @if (placeholderRole()) {\n <div [attr.role]=\"placeholderRole()\">\n {{ placeholderLabel() }}\n </div>\n } @else {\n {{ placeholderLabel() }}\n }\n }\n </td>\n </tr>\n } @else {\n @for (row of rows(); track row.id) {\n @let isActiveRow =\n activeRowId() !== undefined && row.id === activeRowId();\n @let ariaRowIndex = rowAriaIndexById().get(row.id) ?? null;\n @let subRowId = resolvedId() + \"-sub-\" + row.id;\n @let expandsOnClick = rowExpandsOnClick(row);\n <tr\n cdkDrag\n [cdkDragDisabled]=\"!reorderableRows()\"\n cdkDragLockAxis=\"y\"\n [class]=\"\n 'tedi-table__row' +\n (this.selectedRowHighlight() && row.getIsSelected()\n ? ' tedi-table__row--selected'\n : '') +\n (isActiveRow ? ' tedi-table__row--active' : '') +\n (interactive() || expandsOnClick\n ? ' tedi-table__row--clickable'\n : '') +\n (row.depth > 0 ? ' tedi-table__row--sub-row' : '') +\n (groupStartRowIds().has(row.id)\n ? ' tedi-table__row--group-start'\n : '') +\n (pickedUpRow() === row.original\n ? ' tedi-table__row--picked-up'\n : '')\n \"\n [attr.role]=\"\n interactive() && !rowHasNestedInteractive(row) ? 'button' : null\n \"\n [attr.tabindex]=\"interactive() ? 0 : null\"\n [attr.aria-label]=\"rowAriaLabelFor(row)\"\n [attr.aria-rowindex]=\"ariaRowIndex\"\n [attr.aria-current]=\"isActiveRow ? 'true' : null\"\n (click)=\"\n (interactive() || expandsOnClick) && handleRowClick($event, row)\n \"\n (keydown)=\"handleRowKeydown($event, row)\"\n (mouseenter)=\"handleRowMouseEnter(row)\"\n (mouseleave)=\"handleRowMouseLeave()\"\n >\n @for (cell of row.getVisibleCells(); track cell.id) {\n @let cellMeta = getColumnMeta(cell.column);\n @let cellContext = cell.getContext();\n @let resolvedSpan = resolveRowSpan(cell, cellContext);\n @if (resolvedSpan !== 0) {\n <td\n [class]=\"\n 'tedi-table__cell' +\n (cellMeta?.align\n ? ' tedi-table__cell--align-' + cellMeta?.align\n : '') +\n (cellMeta?.vAlign\n ? ' tedi-table__cell--valign-' + cellMeta?.vAlign\n : '') +\n controlCellClass(cell.column.id) +\n stickyLeftClass(cell.column.id) +\n stickyRightClass(cell.column.id)\n \"\n [style.left.px]=\"stickyLeft(cell.column.id)\"\n [style.right.px]=\"stickyRight(cell.column.id)\"\n [attr.rowspan]=\"\n resolvedSpan !== null && resolvedSpan > 1\n ? resolvedSpan\n : null\n \"\n >\n @if (cell.column.id === DRAG_COLUMN_ID) {\n <button\n type=\"button\"\n cdkDragHandle\n class=\"tedi-table__drag-handle\"\n [class.tedi-table__drag-handle--picked-up]=\"\n pickedUpRow() === row.original\n \"\n [id]=\"rowReorderHandleId(row.id)\"\n [attr.aria-label]=\"dragRowLabel()\"\n [attr.aria-pressed]=\"\n reorderableRows()\n ? pickedUpRow() === row.original\n : null\n \"\n (click)=\"$event.stopPropagation()\"\n (keydown)=\"handleRowReorderKeydown($event, row)\"\n >\n <tedi-icon\n name=\"drag_indicator\"\n [size]=\"18\"\n color=\"inherit\"\n />\n </button>\n } @else if (cell.column.id === SELECT_COLUMN_ID) {\n @if (selectionMode() === \"multiple\") {\n <input\n tedi-checkbox\n type=\"checkbox\"\n [id]=\"resolvedId() + '-select-' + row.id\"\n [name]=\"resolvedId() + '-select-' + row.id\"\n [attr.aria-label]=\"selectRowLabel(row)\"\n [checked]=\"isRowSelected(row)\"\n [disabled]=\"!row.getCanSelect()\"\n [indeterminate]=\"isRowIndeterminate(row)\"\n (change)=\"\n handleSelectRow(row, $any($event.target).checked)\n \"\n (click)=\"$event.stopPropagation()\"\n />\n } @else {\n <input\n tedi-radio\n type=\"radio\"\n [id]=\"resolvedId() + '-select-' + row.id\"\n [name]=\"resolvedId() + '-select-row'\"\n [attr.aria-label]=\"selectRowLabel(row)\"\n [checked]=\"row.getIsSelected()\"\n [disabled]=\"!row.getCanSelect()\"\n (change)=\"\n handleSelectRow(row, $any($event.target).checked)\n \"\n (click)=\"$event.stopPropagation()\"\n />\n }\n } @else if (cell.column.id === EXPAND_COLUMN_ID) {\n <span\n class=\"tedi-table__expand-toggle\"\n [class.tedi-table__expand-toggle--icon-only]=\"\n !expandButtonHasLabel()\n \"\n >\n @if (row.getCanExpand()) {\n @let expandOpen = row.getIsExpanded();\n <button\n tedi-collapse-button\n [arrowType]=\"resolvedExpandVariant()\"\n [hideText]=\"!expandButtonHasLabel()\"\n [openText]=\"expandButtonOpenText()\"\n [closeText]=\"expandButtonCloseText()\"\n [open]=\"expandOpen\"\n [id]=\"resolvedId() + '-expand-' + row.id\"\n [ariaControls]=\"\n renderSubComponent() ? subRowId : undefined\n \"\n [ariaLabel]=\"\n expandButtonHasLabel()\n ? undefined\n : expandRowLabel(expandOpen)\n \"\n (openChange)=\"handleExpandToggle(row)\"\n (click)=\"$event.stopPropagation()\"\n (keydown)=\"handleExpandKeydown($event)\"\n ></button>\n }\n </span>\n } @else {\n <ng-container\n *flexRender=\"\n cell.column.columnDef.cell;\n props: cellContext;\n let content\n \"\n >\n {{ content }}\n </ng-container>\n }\n </td>\n }\n }\n </tr>\n @if (renderSubComponent(); as subTpl) {\n @if (row.getCanExpand()) {\n @let isExpanded = row.getIsExpanded();\n <tr\n [class]=\"\n 'tedi-table__row tedi-table__row--sub-component' +\n (isExpanded ? ' tedi-table__row--sub-component-open' : '')\n \"\n >\n <td\n class=\"tedi-table__cell tedi-table__cell--sub-component\"\n [attr.id]=\"subRowId\"\n [attr.role]=\"isExpanded ? 'region' : null\"\n [attr.aria-label]=\"isExpanded ? rowDetailsLabel() : null\"\n [attr.inert]=\"isExpanded ? null : ''\"\n [attr.colspan]=\"leafColumnCount() > 0 ? leafColumnCount() : 1\"\n >\n <div class=\"tedi-table__sub-component-wrapper\">\n <div class=\"tedi-table__sub-component-content\">\n <div class=\"tedi-table__sub-component-inner\">\n <ng-container\n *ngTemplateOutlet=\"\n subTpl;\n context: { $implicit: row }\n \"\n />\n </div>\n </div>\n </div>\n </td>\n </tr>\n }\n }\n }\n }\n </tbody>\n\n @if (hasFooter()) {\n <tfoot class=\"tedi-table__foot\">\n @for (group of footerGroups(); track group.id) {\n <tr class=\"tedi-table__row\">\n @for (header of group.headers; track header.id) {\n @let footerMeta = getColumnMeta(header.column);\n <td\n [class]=\"\n 'tedi-table__cell tedi-table__cell--footer' +\n (footerMeta?.align\n ? ' tedi-table__cell--align-' + footerMeta?.align\n : '') +\n (footerMeta?.vAlign\n ? ' tedi-table__cell--valign-' + footerMeta?.vAlign\n : '')\n \"\n [attr.colspan]=\"header.colSpan > 1 ? header.colSpan : null\"\n >\n @if (!header.isPlaceholder) {\n <ng-container\n *flexRender=\"\n header.column.columnDef.footer;\n props: header.getContext();\n let content\n \"\n >\n {{ content }}\n </ng-container>\n }\n </td>\n }\n </tr>\n }\n </tfoot>\n }\n </table>\n</div>\n\n@if (resolvedBottomSlot(); as bottom) {\n <div class=\"tedi-table__pagination tedi-table__pagination--bottom\">\n <tedi-pagination\n [pageCount]=\"paginationPageCount()\"\n [page]=\"paginationPage()\"\n [totalItems]=\"paginationTotalItems()\"\n [pageSize]=\"paginationPageSize()\"\n [pageSizeOptions]=\"paginationPageSizeOptions()\"\n [boundaryCount]=\"bottom.boundaryCount\"\n [siblingCount]=\"bottom.siblingCount\"\n [labels]=\"bottom.labels\"\n [background]=\"bottom.background\"\n [align]=\"bottom.align\"\n [dividerPosition]=\"bottom.dividerPosition\"\n [hideResults]=\"bottom.hideResults\"\n [hidePageSize]=\"bottom.hidePageSize\"\n [hidePager]=\"bottom.hidePager\"\n [hideArrows]=\"bottom.hideArrows\"\n [disableArrowsAtBoundary]=\"bottom.disableArrowsAtBoundary\"\n [arrowVariant]=\"bottom.arrowVariant\"\n [showArrowLabels]=\"bottom.showArrowLabels\"\n [previousIcon]=\"bottom.previousIcon\"\n [nextIcon]=\"bottom.nextIcon\"\n [showModalTitle]=\"bottom.showModalTitle\"\n [xs]=\"bottom.xs\"\n [sm]=\"bottom.sm\"\n [md]=\"bottom.md\"\n [lg]=\"bottom.lg\"\n [xl]=\"bottom.xl\"\n [xxl]=\"bottom.xxl\"\n (pageChange)=\"handlePaginationPageChange($event)\"\n (pageSizeChange)=\"handlePaginationPageSizeChange($event)\"\n >\n @if (bottomResultsTemplate(); as tpl) {\n <span tediPaginationResults>\n <ng-container *ngTemplateOutlet=\"tpl\" />\n </span>\n }\n </tedi-pagination>\n </div>\n}\n", styles: [".tedi-table{display:flex;flex-direction:column;gap:var(--tedi-dimensions-10);width:100%}.tedi-table__scroll{overflow-x:auto;background:var(--table-default);border:var(--tedi-borders-01) solid var(--table-border);border-radius:var(--table-radius)}.tedi-table__table{width:100%;font-size:var(--body-regular-size);line-height:var(--body-regular-line-height);color:var(--general-text-primary);border-spacing:0;border-collapse:collapse;background:var(--table-default)}.tedi-table__caption{padding:var(--tedi-dimensions-10) var(--table-header-padding-x);font-weight:var(--body-regular-weight);color:var(--general-text-primary);text-align:left;caption-side:top}.tedi-table__head{background:var(--table-default)}.tedi-table__header-cell{padding:var(--table-header-padding-y) var(--table-header-padding-x);font-size:var(--body-regular-size);font-weight:var(--body-regular-weight);color:var(--general-text-tertiary);text-align:left;white-space:nowrap;background:var(--table-default);border-bottom:1px solid var(--table-border-th)}.tedi-table__header-content{display:inline-flex;gap:var(--layout-grid-gutters-04);align-items:center}.tedi-table__filter-popover{display:inline-flex;align-items:center}.tedi-table__body .tedi-table__row>.tedi-table__cell{border-bottom:var(--tedi-borders-01) solid var(--table-border)}.tedi-table__body .tedi-table__row:last-child>.tedi-table__cell{border-bottom:0}.tedi-table--group-dividers-between .tedi-table__body .tedi-table__row>.tedi-table__cell{border-bottom:0}.tedi-table--group-dividers-between .tedi-table__body .tedi-table__row--group-start>.tedi-table__cell{border-top:var(--tedi-borders-01) solid var(--table-border)}.tedi-table--group-dividers-none .tedi-table__body .tedi-table__row>.tedi-table__cell{border-bottom:0}.tedi-table__cell{padding:var(--table-data-padding-y) var(--table-data-padding-x);vertical-align:middle;color:var(--general-text-primary);background:var(--table-default)}.tedi-table__cell--control{padding-right:var(--table-data-padding-x-sm);padding-left:var(--table-data-padding-x-sm)}.tedi-table__cell--control-fit{width:1%;white-space:nowrap}.tedi-table__cell--align-left{text-align:left}.tedi-table__cell--align-center{text-align:center}.tedi-table__cell--align-right{text-align:right}.tedi-table__cell--valign-top{vertical-align:top}.tedi-table__cell--valign-middle{vertical-align:middle}.tedi-table__cell--valign-bottom{vertical-align:bottom}.tedi-table__expand-toggle{display:flex;align-items:center}.tedi-table__expand-toggle--icon-only{min-height:var(--button-sm-icon-size)}.tedi-table__cell--placeholder{padding:var(--tedi-dimensions-14) var(--table-data-padding-x);color:var(--general-text-secondary);text-align:center}.tedi-table--small .tedi-table__header-cell{padding:var(--table-header-padding-y-sm) var(--table-header-padding-x-sm)}.tedi-table--small .tedi-table__cell{padding:var(--table-data-padding-y-sm) var(--table-data-padding-x-sm)}.tedi-table__foot{font-weight:var(--heading-weight);background:var(--table-default)}.tedi-table__cell--footer{color:var(--general-text-primary);border-top:var(--tedi-borders-01) solid var(--table-border-th)}.tedi-table__row--selected>.tedi-table__cell{background:var(--table-active)}.tedi-table__row--clickable{cursor:pointer}.tedi-table__row--clickable:focus-visible{outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:calc(var(--tedi-borders-02) * -1);background:transparent;border-color:transparent}.tedi-table__body .tedi-table__row--sub-component>.tedi-table__cell{background:var(--table-striped);border-bottom:0}.tedi-table__body .tedi-table__row--sub-component-open>.tedi-table__cell{border-bottom:var(--tedi-borders-01) solid var(--table-border)}.tedi-table__row--sub-row>.tedi-table__cell{background:var(--table-striped)}.tedi-table__cell--sub-component{padding:0}.tedi-table__sub-component-wrapper{display:grid;grid-template-rows:0fr}.tedi-table__row--sub-component-open .tedi-table__sub-component-wrapper{grid-template-rows:1fr}.tedi-table__sub-component-content{min-height:0;overflow:hidden}.tedi-table__sub-component-inner{padding:var(--table-data-padding-y) var(--table-data-padding-x)}.tedi-table__row--filter{background:var(--general-surface-primary)}.tedi-table__row--filter .tedi-table__header-cell{padding-top:var(--tedi-dimensions-05);padding-bottom:var(--tedi-dimensions-05);font-weight:var(--body-regular-weight);background:var(--general-surface-primary)}.tedi-table--striped .tedi-table__body .tedi-table__row:nth-of-type(2n)>.tedi-table__cell{background:var(--table-striped)}.tedi-table.tedi-table--row-hover .tedi-table__body .tedi-table__row:hover>.tedi-table__cell{background:var(--table-hover)}.tedi-table .tedi-table__body .tedi-table__row.tedi-table__row--active>.tedi-table__cell,.tedi-table .tedi-table__body .tedi-table__row.tedi-table__row--active:hover>.tedi-table__cell{background:var(--table-hover)}.tedi-table .tedi-table__body .tedi-table__row.tedi-table__row--picked-up>.tedi-table__cell{background:var(--table-hover)}.tedi-table--vertical-borders .tedi-table__header-cell,.tedi-table--vertical-borders .tedi-table__cell{border-right:var(--tedi-borders-01) solid var(--table-border)}.tedi-table--vertical-borders thead tr:first-child .tedi-table__header-cell:last-child,.tedi-table--vertical-borders .tedi-table__row>.tedi-table__cell:last-child{border-right:0}.tedi-table--borderless .tedi-table__scroll{background:transparent;border:0;border-radius:0}.tedi-table--has-pagination{gap:0}.tedi-table--has-pagination-bottom .tedi-table__scroll{border-bottom:0;border-bottom-right-radius:0;border-bottom-left-radius:0}.tedi-table--has-pagination-top .tedi-table__scroll{border-top:0;border-top-left-radius:0;border-top-right-radius:0}.tedi-table__pagination{overflow:hidden;border:var(--tedi-borders-01) solid var(--table-border)}.tedi-table__pagination--bottom{border-top:0;border-bottom-right-radius:var(--table-radius);border-bottom-left-radius:var(--table-radius)}.tedi-table__pagination--top{border-bottom:0;border-top-left-radius:var(--table-radius);border-top-right-radius:var(--table-radius)}.tedi-table--borderless .tedi-table__pagination{background:transparent;border:0}.tedi-table--sticky-first-column .tedi-table__header-cell.tedi-table__cell--sticky-left{position:sticky;z-index:2;background:var(--table-default)}.tedi-table--sticky-first-column .tedi-table__cell--sticky-left{position:sticky;z-index:1;background:var(--table-default)}.tedi-table--sticky-first-column .tedi-table__cell--sticky-left-edge{box-shadow:inset -1px 0 0 var(--table-border)}.tedi-table--sticky-first-column .tedi-table__cell--sticky-left-edge:after{position:absolute;top:0;bottom:0;left:100%;width:var(--tedi-dimensions-03);pointer-events:none;content:\"\"}.tedi-table--sticky-first-column .tedi-table__scroll--shadow-start .tedi-table__cell--sticky-left-edge:after{background:linear-gradient(to right,var(--tedi-alpha-10),transparent)}.tedi-table--sticky-first-column .tedi-table__body .tedi-table__row--sub-row>.tedi-table__cell--sticky-left{background:var(--table-striped)}.tedi-table--sticky-first-column.tedi-table--striped .tedi-table__body .tedi-table__row:nth-of-type(2n)>.tedi-table__cell--sticky-left{background:var(--table-striped)}.tedi-table--sticky-first-column .tedi-table__body .tedi-table__row--picked-up>.tedi-table__cell--sticky-left{background:var(--table-hover)}.tedi-table--sticky-first-column.tedi-table--striped .tedi-table__body .tedi-table__row--picked-up:nth-of-type(2n)>.tedi-table__cell--sticky-left{background:var(--table-hover)}.tedi-table--sticky-first-column .tedi-table__head .tedi-table__header-cell--picked-up.tedi-table__cell--sticky-left{background:var(--table-hover)}.tedi-table--sticky-first-column .tedi-table__row--clickable:focus-visible>.tedi-table__cell--sticky-left{box-shadow:inset 0 var(--tedi-borders-02) 0 var(--tedi-primary-500),inset 0 calc(var(--tedi-borders-02) * -1) 0 var(--tedi-primary-500)}.tedi-table--sticky-first-column .tedi-table__row--clickable:focus-visible>.tedi-table__cell--sticky-left-start{box-shadow:inset var(--tedi-borders-02) 0 0 var(--tedi-primary-500),inset 0 var(--tedi-borders-02) 0 var(--tedi-primary-500),inset 0 calc(var(--tedi-borders-02) * -1) 0 var(--tedi-primary-500)}.tedi-table--sticky-first-column .tedi-table__row--clickable:focus-visible>.tedi-table__cell--sticky-left-edge{box-shadow:inset -1px 0 0 var(--table-border),inset 0 var(--tedi-borders-02) 0 var(--tedi-primary-500),inset 0 calc(var(--tedi-borders-02) * -1) 0 var(--tedi-primary-500)}.tedi-table--sticky-first-column .tedi-table__row--clickable:focus-visible>.tedi-table__cell--sticky-left-start.tedi-table__cell--sticky-left-edge{box-shadow:inset -1px 0 0 var(--table-border),inset var(--tedi-borders-02) 0 0 var(--tedi-primary-500),inset 0 var(--tedi-borders-02) 0 var(--tedi-primary-500),inset 0 calc(var(--tedi-borders-02) * -1) 0 var(--tedi-primary-500)}.tedi-table--sticky-last-column .tedi-table__header-cell.tedi-table__cell--sticky-right{position:sticky;z-index:2;background:var(--table-default)}.tedi-table--sticky-last-column .tedi-table__cell--sticky-right{position:sticky;z-index:1;background:var(--table-default)}.tedi-table--sticky-last-column .tedi-table__cell--sticky-right-edge{box-shadow:inset 1px 0 0 var(--table-border)}.tedi-table--sticky-last-column .tedi-table__cell--sticky-right-edge:after{position:absolute;top:0;right:100%;bottom:0;width:var(--tedi-dimensions-03);pointer-events:none;content:\"\"}.tedi-table--sticky-last-column .tedi-table__scroll--shadow-end .tedi-table__cell--sticky-right-edge:after{background:linear-gradient(to left,var(--tedi-alpha-10),transparent)}.tedi-table--sticky-last-column .tedi-table__body .tedi-table__row--sub-row>.tedi-table__cell--sticky-right{background:var(--table-striped)}.tedi-table--sticky-last-column.tedi-table--striped .tedi-table__body .tedi-table__row:nth-of-type(2n)>.tedi-table__cell--sticky-right{background:var(--table-striped)}.tedi-table--sticky-last-column .tedi-table__body .tedi-table__row--picked-up>.tedi-table__cell--sticky-right{background:var(--table-hover)}.tedi-table--sticky-last-column.tedi-table--striped .tedi-table__body .tedi-table__row--picked-up:nth-of-type(2n)>.tedi-table__cell--sticky-right{background:var(--table-hover)}.tedi-table--sticky-last-column .tedi-table__head .tedi-table__header-cell--picked-up.tedi-table__cell--sticky-right{background:var(--table-hover)}.tedi-table--sticky-last-column .tedi-table__row--clickable:focus-visible>.tedi-table__cell--sticky-right{box-shadow:inset 0 var(--tedi-borders-02) 0 var(--tedi-primary-500),inset 0 calc(var(--tedi-borders-02) * -1) 0 var(--tedi-primary-500)}.tedi-table--sticky-last-column .tedi-table__row--clickable:focus-visible>.tedi-table__cell--sticky-right-start{box-shadow:inset calc(var(--tedi-borders-02) * -1) 0 0 var(--tedi-primary-500),inset 0 var(--tedi-borders-02) 0 var(--tedi-primary-500),inset 0 calc(var(--tedi-borders-02) * -1) 0 var(--tedi-primary-500)}.tedi-table--sticky-last-column .tedi-table__row--clickable:focus-visible>.tedi-table__cell--sticky-right-edge{box-shadow:inset 1px 0 0 var(--table-border),inset 0 var(--tedi-borders-02) 0 var(--tedi-primary-500),inset 0 calc(var(--tedi-borders-02) * -1) 0 var(--tedi-primary-500)}.tedi-table--sticky-last-column .tedi-table__row--clickable:focus-visible>.tedi-table__cell--sticky-right-start.tedi-table__cell--sticky-right-edge{box-shadow:inset 1px 0 0 var(--table-border),inset calc(var(--tedi-borders-02) * -1) 0 0 var(--tedi-primary-500),inset 0 var(--tedi-borders-02) 0 var(--tedi-primary-500),inset 0 calc(var(--tedi-borders-02) * -1) 0 var(--tedi-primary-500)}.tedi-table--sticky-header .tedi-table__head{border-bottom:0}.tedi-table--sticky-header .tedi-table__head .tedi-table__row{position:sticky;top:0;z-index:2;background:var(--table-default)}.tedi-table--sticky-header .tedi-table__head .tedi-table__header-cell{position:sticky;top:0;z-index:2;background:var(--table-default);border-bottom:0;box-shadow:inset 0 -1px 0 var(--table-border-th)}.tedi-table--sticky-header.tedi-table--sticky-first-column .tedi-table__head .tedi-table__header-cell.tedi-table__cell--sticky-left{z-index:3}.tedi-table--sticky-header.tedi-table--sticky-first-column .tedi-table__head .tedi-table__header-cell.tedi-table__cell--sticky-left-edge{box-shadow:inset -1px 0 0 var(--table-border),inset 0 -1px 0 var(--table-border-th)}.tedi-table--sticky-header.tedi-table--sticky-last-column .tedi-table__head .tedi-table__header-cell.tedi-table__cell--sticky-right{z-index:3}.tedi-table--sticky-header.tedi-table--sticky-last-column .tedi-table__head .tedi-table__header-cell.tedi-table__cell--sticky-right-edge{box-shadow:inset 1px 0 0 var(--table-border),inset 0 -1px 0 var(--table-border-th)}.tedi-table--sticky-header .tedi-table__scroll--shadow-header .tedi-table__head .tedi-table__row:after{position:absolute;top:100%;right:0;left:0;height:var(--tedi-dimensions-03);pointer-events:none;content:\"\";background:linear-gradient(to bottom,var(--tedi-alpha-10),transparent)}.tedi-table--fixed-layout .tedi-table__table{table-layout:fixed}.tedi-table__drag-handle{display:inline-flex;align-items:center;justify-content:center;padding:2px;color:var(--general-text-tertiary);cursor:grab;background:transparent;border:0;border-radius:var(--button-radius-sm)}.tedi-table__drag-handle:hover{color:var(--general-text-primary);background:var(--button-main-neutral-icon-only-background-hover)}.tedi-table__drag-handle:focus-visible{outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:0}.tedi-table__drag-handle.cdk-drag-disabled{color:var(--general-text-disabled);cursor:not-allowed}.tedi-table__drag-handle--picked-up{color:var(--tedi-primary-500);cursor:grabbing}.cdk-drag-preview .tedi-table__drag-handle,.cdk-drop-list-dragging .tedi-table__drag-handle{cursor:grabbing}.cdk-drag-preview.tedi-table__row,.cdk-drag-preview.tedi-table__header-cell{display:table;cursor:grabbing;background:var(--table-hover);border:var(--tedi-borders-01) solid var(--card-border-primary);border-radius:var(--table-radius);box-shadow:0 6px 16px var(--tedi-alpha-20)}.cdk-drag-preview.tedi-table__row>.tedi-table__cell{background:var(--table-hover)}.cdk-drag-placeholder.tedi-table__row,.cdk-drag-placeholder.tedi-table__header-cell{opacity:.3}.cdk-drop-list-dragging .tedi-table__row:not(.cdk-drag-placeholder),.cdk-drop-list-dragging .tedi-table__header-cell:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.tedi-table__filter{display:flex;flex-direction:column;gap:var(--tedi-dimensions-12);width:100%}.tedi-table__filter-actions{display:flex;gap:var(--button-gutter-x-sm)}.tedi-table__filter-actions>*{flex:1 1 0;justify-content:center}.tedi-table .tedi-table__head .tedi-table__header-cell--picked-up{cursor:grabbing;background:var(--table-hover)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: FlexRenderDirective, selector: "[flexRender]", inputs: ["flexRender", "flexRenderProps", "flexRenderInjector"] }, { kind: "component", type: PaginationComponent, selector: "tedi-pagination", inputs: ["pageCount", "page", "totalItems", "pageSize", "pageSizeOptions", "boundaryCount", "siblingCount", "labels", "background", "dividerPosition", "align", "hideResults", "hidePageSize", "hidePager", "hideArrows", "disableArrowsAtBoundary", "arrowVariant", "showArrowLabels", "previousIcon", "nextIcon", "showModalTitle", "xs", "sm", "md", "lg", "xl", "xxl"], outputs: ["pageChange", "pageSizeChange"] }, { kind: "directive", type: TediPaginationResultsDirective, selector: "[tediPaginationResults]" }, { kind: "component", type: TediTableHeaderButtonComponent, selector: "button[tedi-table-header-button]", inputs: ["icon", "filled", "selected", "disabled", "iconSize", "aria-label"] }, { kind: "component", type: CheckboxComponent, selector: "input[type=checkbox][tedi-checkbox]", inputs: ["size", "invalid", "value", "disabled"] }, { kind: "component", type: RadioComponent, selector: "input[type=radio][tedi-radio]", inputs: ["size", "invalid", "value", "disabled"] }, { kind: "component", type: TextFieldComponent, selector: "input[tedi-text-field]", inputs: ["value", "size", "invalid", "arrowsHidden", "disabled", "readonly", "readOnly"], outputs: ["valueChange", "clear"] }, { kind: "component", type: FormFieldComponent, selector: "tedi-form-field", inputs: ["size", "icon", "clearable", "showClearOnInteraction", "inputClass", "characterLimit"] }, { kind: "component", type: IconComponent, selector: "tedi-icon", inputs: ["name", "size", "color", "background", "variant", "type", "label"] }, { kind: "component", type: ButtonComponent, selector: "[tedi-button]", inputs: ["variant", "size"] }, { kind: "component", type: CollapseButtonComponent, selector: "button[tedi-collapse-button]", inputs: ["open", "openText", "closeText", "hideText", "arrowType", "size", "inverted", "underline", "ariaControls", "ariaLabel", "id"], outputs: ["openChange"] }, { kind: "component", type: PopoverComponent, selector: "tedi-popover", inputs: ["position", "preventOverflow", "dismissible", "hideOnScroll", "withBorder", "withArrow", "lockScroll", "timeoutDelay", "offset"] }, { kind: "component", type: PopoverContentComponent, selector: "tedi-popover-content", inputs: ["maxWidth", "title", "showClose"] }, { kind: "directive", type: PopoverTriggerDirective, selector: "[tedi-popover-trigger]", inputs: ["underline", "interactive"] }, { kind: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "directive", type: CdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
14890
|
+
], queries: [{ propertyName: "customResultsTemplateRef", first: true, predicate: TediPaginationResultsDirective, descendants: true, read: TemplateRef, isSignal: true }], viewQueries: [{ propertyName: "scrollContainer", first: true, predicate: ["scrollContainer"], descendants: true, isSignal: true }, { propertyName: "tableElement", first: true, predicate: ["tableElement"], descendants: true, isSignal: true }], ngImport: i0, template: "<ng-content select=\"tedi-table-toolbar\" />\n<ng-content select=\"tedi-table-columns-menu\" />\n\n<!-- Live region for screen-reader announcements during keyboard reordering -->\n@if (reorderableColumns() || reorderableRows()) {\n <div\n [id]=\"liveRegionId\"\n aria-live=\"polite\"\n aria-atomic=\"true\"\n class=\"sr-only\"\n ></div>\n}\n\n@if (resolvedTopSlot(); as top) {\n <div class=\"tedi-table__pagination tedi-table__pagination--top\">\n <tedi-pagination\n [pageCount]=\"paginationPageCount()\"\n [page]=\"paginationPage()\"\n [totalItems]=\"paginationTotalItems()\"\n [pageSize]=\"paginationPageSize()\"\n [pageSizeOptions]=\"paginationPageSizeOptions()\"\n [boundaryCount]=\"top.boundaryCount\"\n [siblingCount]=\"top.siblingCount\"\n [labels]=\"top.labels\"\n [background]=\"top.background\"\n [align]=\"top.align\"\n [dividerPosition]=\"top.dividerPosition\"\n [hideResults]=\"top.hideResults\"\n [hidePageSize]=\"top.hidePageSize\"\n [hidePager]=\"top.hidePager\"\n [hideArrows]=\"top.hideArrows\"\n [disableArrowsAtBoundary]=\"top.disableArrowsAtBoundary\"\n [arrowVariant]=\"top.arrowVariant\"\n [showArrowLabels]=\"top.showArrowLabels\"\n [previousIcon]=\"top.previousIcon\"\n [nextIcon]=\"top.nextIcon\"\n [showModalTitle]=\"top.showModalTitle\"\n [xs]=\"top.xs\"\n [sm]=\"top.sm\"\n [md]=\"top.md\"\n [lg]=\"top.lg\"\n [xl]=\"top.xl\"\n [xxl]=\"top.xxl\"\n (pageChange)=\"handlePaginationPageChange($event)\"\n (pageSizeChange)=\"handlePaginationPageSizeChange($event)\"\n >\n @if (topResultsTemplate(); as tpl) {\n <span tediPaginationResults>\n <ng-container *ngTemplateOutlet=\"tpl\" />\n </span>\n }\n </tedi-pagination>\n </div>\n}\n\n<div\n #scrollContainer\n class=\"tedi-table__scroll\"\n [class.tedi-table__scroll--shadow-start]=\"hasStartShadow()\"\n [class.tedi-table__scroll--shadow-end]=\"hasEndShadow()\"\n [class.tedi-table__scroll--shadow-header]=\"hasHeaderShadow()\"\n [attr.style]=\"maxHeightStyle()\"\n cdkScrollable\n tabindex=\"0\"\n role=\"group\"\n [attr.aria-label]=\"scrollRegionLabel()\"\n (scroll)=\"onHorizontalScroll()\"\n>\n <table\n #tableElement\n class=\"tedi-table__table\"\n [attr.id]=\"id() || null\"\n [attr.aria-label]=\"ariaLabel() || null\"\n [attr.aria-labelledby]=\"ariaLabelledby() || null\"\n [attr.aria-rowcount]=\"ariaRowCount()\"\n [attr.aria-colcount]=\"leafColumnCount() > 0 ? leafColumnCount() : null\"\n >\n @if (caption(); as cap) {\n <caption class=\"tedi-table__caption\">\n @if (isString(cap)) {\n {{ cap }}\n } @else {\n <ng-container *ngTemplateOutlet=\"$any(cap)\" />\n }\n </caption>\n }\n\n <thead class=\"tedi-table__head\">\n @for (\n headerGroup of headerGroups();\n track headerGroup.id;\n let rowIndex = $index\n ) {\n <tr\n class=\"tedi-table__row\"\n [attr.aria-rowindex]=\"ariaRowIndexingEnabled() ? rowIndex + 1 : null\"\n [cdkDropListDisabled]=\"!reorderableColumns() || rowIndex > 0\"\n cdkDropList\n cdkDropListOrientation=\"horizontal\"\n cdkDropListAutoScrollDisabled\n (cdkDropListDropped)=\"handleColumnDrop($event)\"\n >\n @for (header of headerGroup.headers; track header.id) {\n @if (shouldRenderHeader(header, rowIndex)) {\n @let meta = getColumnMeta(header.column);\n @let ariaSort = getHeaderAriaSort(header.column);\n @let srHeaderLabel = getSrOnlyHeaderLabel(header.column);\n @let rowSpan = getHeaderRowSpan(header, rowIndex);\n @let headerAlign = meta?.headerAlign ?? meta?.align;\n <th\n scope=\"col\"\n cdkDrag\n [cdkDragDisabled]=\"\n !reorderableColumns() ||\n rowIndex > 0 ||\n header.column.id === SELECT_COLUMN_ID ||\n header.column.id === EXPAND_COLUMN_ID\n \"\n cdkDragLockAxis=\"x\"\n (keydown)=\"handleHeaderKeydown($event, header)\"\n [class]=\"\n 'tedi-table__header-cell' +\n (isHeaderGroup(header)\n ? ' tedi-table__header-cell--group'\n : '') +\n (headerAlign\n ? ' tedi-table__cell--align-' + headerAlign\n : '') +\n (meta?.vAlign\n ? ' tedi-table__cell--valign-' + meta?.vAlign\n : '') +\n (pickedUpColumnId() === header.column.id\n ? ' tedi-table__header-cell--picked-up'\n : '') +\n controlCellClass(header.column.id) +\n stickyLeftClass(header.column.id) +\n stickyRightClass(header.column.id)\n \"\n [attr.colspan]=\"header.colSpan > 1 ? header.colSpan : null\"\n [attr.rowspan]=\"rowSpan\"\n [attr.aria-sort]=\"ariaSort\"\n [style.width.px]=\"headerCellWidth(header.column)\"\n [style.min-width.px]=\"columnMinWidth(header.column)\"\n [style.max-width.px]=\"columnMaxWidth(header.column)\"\n [style.left.px]=\"stickyLeft(header.column.id)\"\n [style.right.px]=\"stickyRight(header.column.id)\"\n >\n @if (srHeaderLabel) {\n <span class=\"sr-only\">{{ srHeaderLabel }}</span>\n }\n @if (header.column.id === SELECT_COLUMN_ID) {\n @if (selectionMode() === \"multiple\") {\n <input\n tedi-checkbox\n type=\"checkbox\"\n [id]=\"resolvedId() + '-select-all'\"\n [name]=\"resolvedId() + '-select-all'\"\n [attr.aria-label]=\"selectAllLabel()\"\n [checked]=\"isAllPageRowsSelected()\"\n [indeterminate]=\"\n isSomePageRowsSelected() && !isAllPageRowsSelected()\n \"\n (change)=\"handleSelectAll($any($event.target).checked)\"\n />\n }\n } @else if (header.column.id === EXPAND_COLUMN_ID) {\n <!-- empty -->\n } @else if (header.column.id === DRAG_COLUMN_ID) {\n <!-- empty -->\n } @else {\n <span class=\"tedi-table__header-content\">\n @if (\n reorderableColumns() &&\n rowIndex === 0 &&\n !isHeaderGroup(header)\n ) {\n <button\n type=\"button\"\n cdkDragHandle\n class=\"tedi-table__drag-handle\"\n [class.tedi-table__drag-handle--picked-up]=\"\n pickedUpColumnId() === header.column.id\n \"\n [id]=\"reorderHandleId(header.column.id)\"\n [attr.aria-label]=\"dragColumnLabel()\"\n [attr.aria-pressed]=\"\n reorderableColumns()\n ? pickedUpColumnId() === header.column.id\n : null\n \"\n >\n <tedi-icon\n name=\"drag_indicator\"\n [size]=\"18\"\n color=\"inherit\"\n />\n </button>\n }\n <ng-container\n *flexRender=\"\n header.column.columnDef.header;\n props: header.getContext();\n let content\n \"\n >\n @if (shouldRenderSortableHeader(header.column, content)) {\n <button\n tedi-table-header-button\n [icon]=\"sortIcon(header.column)\"\n [selected]=\"!!header.column.getIsSorted()\"\n (click)=\"handleSortToggle(header.column)\"\n >\n {{ content }}\n </button>\n } @else if (isString(content) || isNumber(content)) {\n {{ content }}\n } @else {\n {{ content }}\n }\n </ng-container>\n @if (shouldRenderFilterButton(header.column)) {\n @if (filterUsesModal()) {\n <button\n tedi-table-header-button\n icon=\"filter_alt\"\n [selected]=\"filterIsActive(header.column)\"\n [filled]=\"filterIsActive(header.column)\"\n [aria-label]=\"filterAriaLabel(header.column)\"\n (click)=\"openFilterModal(header.column)\"\n ></button>\n } @else {\n <tedi-popover\n #filterPopover\n class=\"tedi-table__filter-popover\"\n position=\"bottom-end\"\n [preventOverflow]=\"true\"\n >\n <button\n tedi-popover-trigger\n tedi-table-header-button\n icon=\"filter_alt\"\n [selected]=\"filterIsActive(header.column)\"\n [filled]=\"filterIsActive(header.column)\"\n [aria-label]=\"filterAriaLabel(header.column)\"\n (click)=\"handleFilterTriggerClick(header.column)\"\n ></button>\n <tedi-popover-content\n [maxWidth]=\"filterPopoverWidthFor(header.column)\"\n >\n <div class=\"tedi-table__filter\">\n <div class=\"tedi-table__filter-body\">\n @if (filterTemplateFor(header.column); as tpl) {\n <ng-container\n *ngTemplateOutlet=\"\n tpl;\n context: filterContextFor(\n header.column,\n filterPopover\n )\n \"\n />\n }\n </div>\n <div class=\"tedi-table__filter-actions\">\n <button\n tedi-button\n variant=\"secondary\"\n size=\"small\"\n type=\"button\"\n (click)=\"\n handleFilterClear(\n header.column,\n filterPopover\n )\n \"\n >\n {{ filterClearLabel() }}\n </button>\n <button\n tedi-button\n variant=\"primary\"\n size=\"small\"\n type=\"button\"\n (click)=\"\n handleFilterApply(\n header.column,\n filterPopover\n )\n \"\n >\n {{ filterApplyLabel() }}\n </button>\n </div>\n </div>\n </tedi-popover-content>\n </tedi-popover>\n }\n }\n </span>\n }\n </th>\n }\n }\n </tr>\n }\n @if (enableColumnFilters()) {\n <tr\n class=\"tedi-table__row tedi-table__row--filter\"\n [attr.aria-rowindex]=\"\n ariaRowIndexingEnabled() ? headerGroups().length + 1 : null\n \"\n >\n @for (column of leafColumns(); track column.id) {\n @let filterId = resolvedId() + \"-filter-\" + column.id;\n <th class=\"tedi-table__header-cell\" scope=\"col\">\n @if (column.getCanFilter()) {\n <tedi-form-field size=\"small\">\n <input\n tedi-text-field\n type=\"text\"\n [id]=\"filterId\"\n [name]=\"filterId\"\n [attr.aria-label]=\"filterLabel(column)\"\n [placeholder]=\"filterPlaceholder()\"\n [value]=\"getFilterValue(column)\"\n (input)=\"\n handleColumnFilter(column, $any($event.target).value)\n \"\n (clear)=\"handleColumnFilter(column, '')\"\n />\n </tedi-form-field>\n }\n </th>\n }\n </tr>\n }\n </thead>\n\n <tbody\n class=\"tedi-table__body\"\n cdkDropList\n [cdkDropListDisabled]=\"!reorderableRows()\"\n (cdkDropListDropped)=\"handleRowDrop($any($event))\"\n >\n @if (rows().length === 0) {\n <tr class=\"tedi-table__row\">\n <td\n class=\"tedi-table__cell tedi-table__cell--placeholder\"\n [attr.colspan]=\"leafColumnCount() > 0 ? leafColumnCount() : 1\"\n >\n @if (placeholder(); as pl) {\n @if (placeholderRole()) {\n <div [attr.role]=\"placeholderRole()\">\n @if (isString(pl)) {\n {{ pl }}\n } @else {\n <ng-container *ngTemplateOutlet=\"$any(pl)\" />\n }\n </div>\n } @else {\n @if (isString(pl)) {\n {{ pl }}\n } @else {\n <ng-container *ngTemplateOutlet=\"$any(pl)\" />\n }\n }\n } @else {\n @if (placeholderRole()) {\n <div [attr.role]=\"placeholderRole()\">\n {{ placeholderLabel() }}\n </div>\n } @else {\n {{ placeholderLabel() }}\n }\n }\n </td>\n </tr>\n } @else {\n @for (row of rows(); track row.id) {\n @let isActiveRow =\n activeRowId() !== undefined && row.id === activeRowId();\n @let ariaRowIndex = rowAriaIndexById().get(row.id) ?? null;\n @let subRowId = resolvedId() + \"-sub-\" + row.id;\n @let expandsOnClick = rowExpandsOnClick(row);\n <tr\n cdkDrag\n [cdkDragDisabled]=\"!reorderableRows()\"\n cdkDragLockAxis=\"y\"\n [class]=\"\n 'tedi-table__row' +\n (this.selectedRowHighlight() && row.getIsSelected()\n ? ' tedi-table__row--selected'\n : '') +\n (isActiveRow ? ' tedi-table__row--active' : '') +\n (interactive() || expandsOnClick\n ? ' tedi-table__row--clickable'\n : '') +\n (row.depth > 0 ? ' tedi-table__row--sub-row' : '') +\n (groupStartRowIds().has(row.id)\n ? ' tedi-table__row--group-start'\n : '') +\n (pickedUpRow() === row.original\n ? ' tedi-table__row--picked-up'\n : '')\n \"\n [attr.role]=\"\n interactive() && !rowHasNestedInteractive(row) ? 'button' : null\n \"\n [attr.tabindex]=\"interactive() ? 0 : null\"\n [attr.aria-label]=\"rowAriaLabelFor(row)\"\n [attr.aria-rowindex]=\"ariaRowIndex\"\n [attr.aria-current]=\"isActiveRow ? 'true' : null\"\n (click)=\"\n (interactive() || expandsOnClick) && handleRowClick($event, row)\n \"\n (keydown)=\"handleRowKeydown($event, row)\"\n (mouseenter)=\"handleRowMouseEnter(row)\"\n (mouseleave)=\"handleRowMouseLeave()\"\n >\n @for (cell of row.getVisibleCells(); track cell.id) {\n @let cellMeta = getColumnMeta(cell.column);\n @let cellContext = cell.getContext();\n @let resolvedSpan = resolveRowSpan(cell, cellContext);\n @if (resolvedSpan !== 0) {\n <td\n [class]=\"\n 'tedi-table__cell' +\n (cellMeta?.align\n ? ' tedi-table__cell--align-' + cellMeta?.align\n : '') +\n (cellMeta?.vAlign\n ? ' tedi-table__cell--valign-' + cellMeta?.vAlign\n : '') +\n controlCellClass(cell.column.id) +\n stickyLeftClass(cell.column.id) +\n stickyRightClass(cell.column.id)\n \"\n [style.left.px]=\"stickyLeft(cell.column.id)\"\n [style.right.px]=\"stickyRight(cell.column.id)\"\n [attr.rowspan]=\"\n resolvedSpan !== null && resolvedSpan > 1\n ? resolvedSpan\n : null\n \"\n >\n @if (cell.column.id === DRAG_COLUMN_ID) {\n <button\n type=\"button\"\n cdkDragHandle\n class=\"tedi-table__drag-handle\"\n [class.tedi-table__drag-handle--picked-up]=\"\n pickedUpRow() === row.original\n \"\n [id]=\"rowReorderHandleId(row.id)\"\n [attr.aria-label]=\"dragRowLabel()\"\n [attr.aria-pressed]=\"\n reorderableRows()\n ? pickedUpRow() === row.original\n : null\n \"\n (click)=\"$event.stopPropagation()\"\n (keydown)=\"handleRowReorderKeydown($event, row)\"\n >\n <tedi-icon\n name=\"drag_indicator\"\n [size]=\"18\"\n color=\"inherit\"\n />\n </button>\n } @else if (cell.column.id === SELECT_COLUMN_ID) {\n @if (selectionMode() === \"multiple\") {\n <input\n tedi-checkbox\n type=\"checkbox\"\n [id]=\"resolvedId() + '-select-' + row.id\"\n [name]=\"resolvedId() + '-select-' + row.id\"\n [attr.aria-label]=\"selectRowLabel(row)\"\n [checked]=\"isRowSelected(row)\"\n [disabled]=\"!row.getCanSelect()\"\n [indeterminate]=\"isRowIndeterminate(row)\"\n (change)=\"\n handleSelectRow(row, $any($event.target).checked)\n \"\n (click)=\"$event.stopPropagation()\"\n />\n } @else {\n <input\n tedi-radio\n type=\"radio\"\n [id]=\"resolvedId() + '-select-' + row.id\"\n [name]=\"resolvedId() + '-select-row'\"\n [attr.aria-label]=\"selectRowLabel(row)\"\n [checked]=\"row.getIsSelected()\"\n [disabled]=\"!row.getCanSelect()\"\n (change)=\"\n handleSelectRow(row, $any($event.target).checked)\n \"\n (click)=\"$event.stopPropagation()\"\n />\n }\n } @else if (cell.column.id === EXPAND_COLUMN_ID) {\n <span\n class=\"tedi-table__expand-toggle\"\n [class.tedi-table__expand-toggle--icon-only]=\"\n !expandButtonHasLabel()\n \"\n >\n @if (row.getCanExpand()) {\n @let expandOpen = row.getIsExpanded();\n <button\n tedi-collapse-button\n [arrowType]=\"resolvedExpandVariant()\"\n [hideText]=\"!expandButtonHasLabel()\"\n [openText]=\"expandButtonOpenText()\"\n [closeText]=\"expandButtonCloseText()\"\n [open]=\"expandOpen\"\n [id]=\"resolvedId() + '-expand-' + row.id\"\n [ariaControls]=\"\n renderSubComponent() ? subRowId : undefined\n \"\n [ariaLabel]=\"\n expandButtonHasLabel()\n ? undefined\n : expandRowLabel(expandOpen)\n \"\n (openChange)=\"handleExpandToggle(row)\"\n (click)=\"$event.stopPropagation()\"\n (keydown)=\"handleExpandKeydown($event)\"\n ></button>\n }\n </span>\n } @else {\n <ng-container\n *flexRender=\"\n cell.column.columnDef.cell;\n props: cellContext;\n let content\n \"\n >\n {{ content }}\n </ng-container>\n }\n </td>\n }\n }\n </tr>\n @if (renderSubComponent(); as subTpl) {\n @if (row.getCanExpand()) {\n @let isExpanded = row.getIsExpanded();\n <tr\n [class]=\"\n 'tedi-table__row tedi-table__row--sub-component' +\n (isExpanded ? ' tedi-table__row--sub-component-open' : '')\n \"\n >\n <!-- No region role: one landmark per open row would pile up\n (axe landmark-unique). The toggle's aria-controls points here. -->\n <td\n class=\"tedi-table__cell tedi-table__cell--sub-component\"\n [attr.id]=\"subRowId\"\n [attr.inert]=\"isExpanded ? null : ''\"\n [attr.colspan]=\"leafColumnCount() > 0 ? leafColumnCount() : 1\"\n >\n <div class=\"tedi-table__sub-component-wrapper\">\n <div class=\"tedi-table__sub-component-content\">\n <div class=\"tedi-table__sub-component-inner\">\n <ng-container\n *ngTemplateOutlet=\"\n subTpl;\n context: { $implicit: row }\n \"\n />\n </div>\n </div>\n </div>\n </td>\n </tr>\n }\n }\n }\n }\n </tbody>\n\n @if (hasFooter()) {\n <tfoot class=\"tedi-table__foot\">\n @for (group of footerGroups(); track group.id) {\n <tr class=\"tedi-table__row\">\n @for (header of group.headers; track header.id) {\n @let footerMeta = getColumnMeta(header.column);\n <td\n [class]=\"\n 'tedi-table__cell tedi-table__cell--footer' +\n (footerMeta?.align\n ? ' tedi-table__cell--align-' + footerMeta?.align\n : '') +\n (footerMeta?.vAlign\n ? ' tedi-table__cell--valign-' + footerMeta?.vAlign\n : '')\n \"\n [attr.colspan]=\"header.colSpan > 1 ? header.colSpan : null\"\n >\n @if (!header.isPlaceholder) {\n <ng-container\n *flexRender=\"\n header.column.columnDef.footer;\n props: header.getContext();\n let content\n \"\n >\n {{ content }}\n </ng-container>\n }\n </td>\n }\n </tr>\n }\n </tfoot>\n }\n </table>\n</div>\n\n@if (resolvedBottomSlot(); as bottom) {\n <div class=\"tedi-table__pagination tedi-table__pagination--bottom\">\n <tedi-pagination\n [pageCount]=\"paginationPageCount()\"\n [page]=\"paginationPage()\"\n [totalItems]=\"paginationTotalItems()\"\n [pageSize]=\"paginationPageSize()\"\n [pageSizeOptions]=\"paginationPageSizeOptions()\"\n [boundaryCount]=\"bottom.boundaryCount\"\n [siblingCount]=\"bottom.siblingCount\"\n [labels]=\"bottom.labels\"\n [background]=\"bottom.background\"\n [align]=\"bottom.align\"\n [dividerPosition]=\"bottom.dividerPosition\"\n [hideResults]=\"bottom.hideResults\"\n [hidePageSize]=\"bottom.hidePageSize\"\n [hidePager]=\"bottom.hidePager\"\n [hideArrows]=\"bottom.hideArrows\"\n [disableArrowsAtBoundary]=\"bottom.disableArrowsAtBoundary\"\n [arrowVariant]=\"bottom.arrowVariant\"\n [showArrowLabels]=\"bottom.showArrowLabels\"\n [previousIcon]=\"bottom.previousIcon\"\n [nextIcon]=\"bottom.nextIcon\"\n [showModalTitle]=\"bottom.showModalTitle\"\n [xs]=\"bottom.xs\"\n [sm]=\"bottom.sm\"\n [md]=\"bottom.md\"\n [lg]=\"bottom.lg\"\n [xl]=\"bottom.xl\"\n [xxl]=\"bottom.xxl\"\n (pageChange)=\"handlePaginationPageChange($event)\"\n (pageSizeChange)=\"handlePaginationPageSizeChange($event)\"\n >\n @if (bottomResultsTemplate(); as tpl) {\n <span tediPaginationResults>\n <ng-container *ngTemplateOutlet=\"tpl\" />\n </span>\n }\n </tedi-pagination>\n </div>\n}\n", styles: [".tedi-table{display:flex;flex-direction:column;gap:var(--tedi-dimensions-10);width:100%}.tedi-table__scroll{overflow-x:auto;background:var(--table-default);border:var(--tedi-borders-01) solid var(--table-border);border-radius:var(--table-radius)}.tedi-table__table{width:100%;font-size:var(--body-regular-size);line-height:var(--body-regular-line-height);color:var(--general-text-primary);border-spacing:0;border-collapse:collapse;background:var(--table-default)}.tedi-table__caption{padding:var(--tedi-dimensions-10) var(--table-header-padding-x);font-weight:var(--body-regular-weight);color:var(--general-text-primary);text-align:left;caption-side:top}.tedi-table__head{background:var(--table-default)}.tedi-table__header-cell{padding:var(--table-header-padding-y) var(--table-header-padding-x);font-size:var(--body-regular-size);font-weight:var(--body-regular-weight);color:var(--general-text-tertiary);text-align:left;white-space:nowrap;background:var(--table-default);border-bottom:1px solid var(--table-border-th)}.tedi-table__header-content{display:inline-flex;gap:var(--layout-grid-gutters-04);align-items:center}.tedi-table__filter-popover{display:inline-flex;align-items:center}.tedi-table__body .tedi-table__row>.tedi-table__cell{border-bottom:var(--tedi-borders-01) solid var(--table-border)}.tedi-table__body .tedi-table__row:last-child>.tedi-table__cell{border-bottom:0}.tedi-table--group-dividers-between>:where(.tedi-table__scroll)>:where(.tedi-table__table)>.tedi-table__body>.tedi-table__row>.tedi-table__cell{border-bottom:0}.tedi-table--group-dividers-between>:where(.tedi-table__scroll)>:where(.tedi-table__table)>.tedi-table__body>.tedi-table__row--group-start>.tedi-table__cell{border-top:var(--tedi-borders-01) solid var(--table-border)}.tedi-table--group-dividers-none>:where(.tedi-table__scroll)>:where(.tedi-table__table)>.tedi-table__body>.tedi-table__row>.tedi-table__cell{border-bottom:0}.tedi-table__cell{padding:var(--table-data-padding-y) var(--table-data-padding-x);vertical-align:middle;color:var(--general-text-primary);background:var(--table-default)}.tedi-table__cell--control{padding-right:var(--table-data-padding-x-sm);padding-left:var(--table-data-padding-x-sm)}.tedi-table__cell--control-fit{width:1%;white-space:nowrap}.tedi-table__cell--align-left{text-align:left}.tedi-table__cell--align-center{text-align:center}.tedi-table__cell--align-right{text-align:right}.tedi-table__cell--valign-top{vertical-align:top}.tedi-table__cell--valign-middle{vertical-align:middle}.tedi-table__cell--valign-bottom{vertical-align:bottom}.tedi-table__expand-toggle{display:flex;align-items:center}.tedi-table__expand-toggle--icon-only{min-height:var(--button-sm-icon-size)}.tedi-table__cell--placeholder{padding:var(--tedi-dimensions-14) var(--table-data-padding-x);color:var(--general-text-secondary);text-align:center}.tedi-table--small>:where(.tedi-table__scroll)>:where(.tedi-table__table)>*>*>.tedi-table__header-cell{padding:var(--table-header-padding-y-sm) var(--table-header-padding-x-sm)}.tedi-table--small>:where(.tedi-table__scroll)>:where(.tedi-table__table)>*>*>.tedi-table__cell{padding:var(--table-data-padding-y-sm) var(--table-data-padding-x-sm)}.tedi-table__foot{font-weight:var(--heading-weight);background:var(--table-default)}.tedi-table__cell--footer{color:var(--general-text-primary);border-top:var(--tedi-borders-01) solid var(--table-border-th)}.tedi-table__row--selected>.tedi-table__cell{background:var(--table-active)}.tedi-table__row--clickable{cursor:pointer}.tedi-table__row--clickable:focus-visible{outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:calc(var(--tedi-borders-02) * -1);background:transparent;border-color:transparent}.tedi-table__body .tedi-table__row--sub-component>.tedi-table__cell{background:var(--table-striped);border-bottom:0}.tedi-table__body .tedi-table__row--sub-component-open>.tedi-table__cell{border-bottom:var(--tedi-borders-01) solid var(--table-border)}.tedi-table__row--sub-row>.tedi-table__cell{background:var(--table-striped)}.tedi-table__cell--sub-component{padding:0}.tedi-table__sub-component-wrapper{display:grid;grid-template-rows:0fr}.tedi-table__row--sub-component-open>.tedi-table__cell--sub-component>.tedi-table__sub-component-wrapper{grid-template-rows:1fr}.tedi-table__sub-component-content{min-height:0;overflow:hidden}.tedi-table__sub-component-inner{padding:var(--table-data-padding-y) var(--table-data-padding-x)}.tedi-table__row--filter{background:var(--general-surface-primary)}.tedi-table__row--filter .tedi-table__header-cell{padding-top:var(--tedi-dimensions-05);padding-bottom:var(--tedi-dimensions-05);font-weight:var(--body-regular-weight);background:var(--general-surface-primary)}.tedi-table--striped>:where(.tedi-table__scroll)>:where(.tedi-table__table)>.tedi-table__body>.tedi-table__row:nth-of-type(2n)>.tedi-table__cell{background:var(--table-striped)}.tedi-table.tedi-table--row-hover>:where(.tedi-table__scroll)>:where(.tedi-table__table)>.tedi-table__body>.tedi-table__row:hover>.tedi-table__cell{background:var(--table-hover)}.tedi-table .tedi-table__body .tedi-table__row.tedi-table__row--active>.tedi-table__cell,.tedi-table .tedi-table__body .tedi-table__row.tedi-table__row--active:hover>.tedi-table__cell{background:var(--table-hover)}.tedi-table .tedi-table__body .tedi-table__row.tedi-table__row--picked-up>.tedi-table__cell{background:var(--table-hover)}.tedi-table--vertical-borders>:where(.tedi-table__scroll)>:where(.tedi-table__table)>*>*>.tedi-table__header-cell,.tedi-table--vertical-borders>:where(.tedi-table__scroll)>:where(.tedi-table__table)>*>*>.tedi-table__cell{border-right:var(--tedi-borders-01) solid var(--table-border)}.tedi-table--vertical-borders>:where(.tedi-table__scroll)>:where(.tedi-table__table)>thead>tr:first-child>.tedi-table__header-cell:last-child,.tedi-table--vertical-borders>:where(.tedi-table__scroll)>:where(.tedi-table__table)>*>.tedi-table__row>.tedi-table__cell:last-child{border-right:0}.tedi-table--borderless>.tedi-table__scroll{background:transparent;border:0;border-radius:0}.tedi-table--has-pagination{gap:0}.tedi-table--has-pagination-bottom>.tedi-table__scroll{border-bottom:0;border-bottom-right-radius:0;border-bottom-left-radius:0}.tedi-table--has-pagination-top>.tedi-table__scroll{border-top:0;border-top-left-radius:0;border-top-right-radius:0}.tedi-table__pagination{overflow:hidden;border:var(--tedi-borders-01) solid var(--table-border)}.tedi-table__pagination--bottom{border-top:0;border-bottom-right-radius:var(--table-radius);border-bottom-left-radius:var(--table-radius)}.tedi-table__pagination--top{border-bottom:0;border-top-left-radius:var(--table-radius);border-top-right-radius:var(--table-radius)}.tedi-table--borderless>.tedi-table__pagination{background:transparent;border:0}.tedi-table--sticky-first-column>:where(.tedi-table__scroll)>:where(.tedi-table__table)>*>*>.tedi-table__header-cell.tedi-table__cell--sticky-left{position:sticky;z-index:2;background:var(--table-default)}.tedi-table--sticky-first-column>:where(.tedi-table__scroll)>:where(.tedi-table__table)>*>*>.tedi-table__cell--sticky-left{position:sticky;z-index:1;background:var(--table-default)}.tedi-table--sticky-first-column>:where(.tedi-table__scroll)>:where(.tedi-table__table)>*>*>.tedi-table__cell--sticky-left-edge{box-shadow:inset -1px 0 0 var(--table-border)}.tedi-table--sticky-first-column>:where(.tedi-table__scroll)>:where(.tedi-table__table)>*>*>.tedi-table__cell--sticky-left-edge:after{position:absolute;top:0;bottom:0;left:100%;width:var(--tedi-dimensions-03);pointer-events:none;content:\"\"}.tedi-table--sticky-first-column>.tedi-table__scroll--shadow-start>:where(.tedi-table__table)>*>*>.tedi-table__cell--sticky-left-edge:after{background:linear-gradient(to right,var(--tedi-alpha-10),transparent)}.tedi-table--sticky-first-column>:where(.tedi-table__scroll)>:where(.tedi-table__table)>.tedi-table__body>.tedi-table__row--sub-row>.tedi-table__cell--sticky-left{background:var(--table-striped)}.tedi-table--sticky-first-column.tedi-table--striped>:where(.tedi-table__scroll)>:where(.tedi-table__table)>.tedi-table__body>.tedi-table__row:nth-of-type(2n)>.tedi-table__cell--sticky-left{background:var(--table-striped)}.tedi-table--sticky-first-column>:where(.tedi-table__scroll)>:where(.tedi-table__table)>.tedi-table__body>.tedi-table__row--picked-up>.tedi-table__cell--sticky-left{background:var(--table-hover)}.tedi-table--sticky-first-column.tedi-table--striped>:where(.tedi-table__scroll)>:where(.tedi-table__table)>.tedi-table__body>.tedi-table__row--picked-up:nth-of-type(2n)>.tedi-table__cell--sticky-left{background:var(--table-hover)}.tedi-table--sticky-first-column>:where(.tedi-table__scroll)>:where(.tedi-table__table)>.tedi-table__head>*>.tedi-table__header-cell--picked-up.tedi-table__cell--sticky-left{background:var(--table-hover)}.tedi-table--sticky-first-column>:where(.tedi-table__scroll)>:where(.tedi-table__table)>*>.tedi-table__row--clickable:focus-visible>.tedi-table__cell--sticky-left{box-shadow:inset 0 var(--tedi-borders-02) 0 var(--tedi-primary-500),inset 0 calc(var(--tedi-borders-02) * -1) 0 var(--tedi-primary-500)}.tedi-table--sticky-first-column>:where(.tedi-table__scroll)>:where(.tedi-table__table)>*>.tedi-table__row--clickable:focus-visible>.tedi-table__cell--sticky-left-start{box-shadow:inset var(--tedi-borders-02) 0 0 var(--tedi-primary-500),inset 0 var(--tedi-borders-02) 0 var(--tedi-primary-500),inset 0 calc(var(--tedi-borders-02) * -1) 0 var(--tedi-primary-500)}.tedi-table--sticky-first-column>:where(.tedi-table__scroll)>:where(.tedi-table__table)>*>.tedi-table__row--clickable:focus-visible>.tedi-table__cell--sticky-left-edge{box-shadow:inset -1px 0 0 var(--table-border),inset 0 var(--tedi-borders-02) 0 var(--tedi-primary-500),inset 0 calc(var(--tedi-borders-02) * -1) 0 var(--tedi-primary-500)}.tedi-table--sticky-first-column>:where(.tedi-table__scroll)>:where(.tedi-table__table)>*>.tedi-table__row--clickable:focus-visible>.tedi-table__cell--sticky-left-start.tedi-table__cell--sticky-left-edge{box-shadow:inset -1px 0 0 var(--table-border),inset var(--tedi-borders-02) 0 0 var(--tedi-primary-500),inset 0 var(--tedi-borders-02) 0 var(--tedi-primary-500),inset 0 calc(var(--tedi-borders-02) * -1) 0 var(--tedi-primary-500)}.tedi-table--sticky-last-column>:where(.tedi-table__scroll)>:where(.tedi-table__table)>*>*>.tedi-table__header-cell.tedi-table__cell--sticky-right{position:sticky;z-index:2;background:var(--table-default)}.tedi-table--sticky-last-column>:where(.tedi-table__scroll)>:where(.tedi-table__table)>*>*>.tedi-table__cell--sticky-right{position:sticky;z-index:1;background:var(--table-default)}.tedi-table--sticky-last-column>:where(.tedi-table__scroll)>:where(.tedi-table__table)>*>*>.tedi-table__cell--sticky-right-edge{box-shadow:inset 1px 0 0 var(--table-border)}.tedi-table--sticky-last-column>:where(.tedi-table__scroll)>:where(.tedi-table__table)>*>*>.tedi-table__cell--sticky-right-edge:after{position:absolute;top:0;right:100%;bottom:0;width:var(--tedi-dimensions-03);pointer-events:none;content:\"\"}.tedi-table--sticky-last-column>.tedi-table__scroll--shadow-end>:where(.tedi-table__table)>*>*>.tedi-table__cell--sticky-right-edge:after{background:linear-gradient(to left,var(--tedi-alpha-10),transparent)}.tedi-table--sticky-last-column>:where(.tedi-table__scroll)>:where(.tedi-table__table)>.tedi-table__body>.tedi-table__row--sub-row>.tedi-table__cell--sticky-right{background:var(--table-striped)}.tedi-table--sticky-last-column.tedi-table--striped>:where(.tedi-table__scroll)>:where(.tedi-table__table)>.tedi-table__body>.tedi-table__row:nth-of-type(2n)>.tedi-table__cell--sticky-right{background:var(--table-striped)}.tedi-table--sticky-last-column>:where(.tedi-table__scroll)>:where(.tedi-table__table)>.tedi-table__body>.tedi-table__row--picked-up>.tedi-table__cell--sticky-right{background:var(--table-hover)}.tedi-table--sticky-last-column.tedi-table--striped>:where(.tedi-table__scroll)>:where(.tedi-table__table)>.tedi-table__body>.tedi-table__row--picked-up:nth-of-type(2n)>.tedi-table__cell--sticky-right{background:var(--table-hover)}.tedi-table--sticky-last-column>:where(.tedi-table__scroll)>:where(.tedi-table__table)>.tedi-table__head>*>.tedi-table__header-cell--picked-up.tedi-table__cell--sticky-right{background:var(--table-hover)}.tedi-table--sticky-last-column>:where(.tedi-table__scroll)>:where(.tedi-table__table)>*>.tedi-table__row--clickable:focus-visible>.tedi-table__cell--sticky-right{box-shadow:inset 0 var(--tedi-borders-02) 0 var(--tedi-primary-500),inset 0 calc(var(--tedi-borders-02) * -1) 0 var(--tedi-primary-500)}.tedi-table--sticky-last-column>:where(.tedi-table__scroll)>:where(.tedi-table__table)>*>.tedi-table__row--clickable:focus-visible>.tedi-table__cell--sticky-right-start{box-shadow:inset calc(var(--tedi-borders-02) * -1) 0 0 var(--tedi-primary-500),inset 0 var(--tedi-borders-02) 0 var(--tedi-primary-500),inset 0 calc(var(--tedi-borders-02) * -1) 0 var(--tedi-primary-500)}.tedi-table--sticky-last-column>:where(.tedi-table__scroll)>:where(.tedi-table__table)>*>.tedi-table__row--clickable:focus-visible>.tedi-table__cell--sticky-right-edge{box-shadow:inset 1px 0 0 var(--table-border),inset 0 var(--tedi-borders-02) 0 var(--tedi-primary-500),inset 0 calc(var(--tedi-borders-02) * -1) 0 var(--tedi-primary-500)}.tedi-table--sticky-last-column>:where(.tedi-table__scroll)>:where(.tedi-table__table)>*>.tedi-table__row--clickable:focus-visible>.tedi-table__cell--sticky-right-start.tedi-table__cell--sticky-right-edge{box-shadow:inset 1px 0 0 var(--table-border),inset calc(var(--tedi-borders-02) * -1) 0 0 var(--tedi-primary-500),inset 0 var(--tedi-borders-02) 0 var(--tedi-primary-500),inset 0 calc(var(--tedi-borders-02) * -1) 0 var(--tedi-primary-500)}.tedi-table--sticky-header>:where(.tedi-table__scroll)>:where(.tedi-table__table)>.tedi-table__head{border-bottom:0}.tedi-table--sticky-header>:where(.tedi-table__scroll)>:where(.tedi-table__table)>.tedi-table__head>.tedi-table__row{position:sticky;top:0;z-index:2;background:var(--table-default)}.tedi-table--sticky-header>:where(.tedi-table__scroll)>:where(.tedi-table__table)>.tedi-table__head>*>.tedi-table__header-cell{position:sticky;top:0;z-index:2;background:var(--table-default);border-bottom:0;box-shadow:inset 0 -1px 0 var(--table-border-th)}.tedi-table--sticky-header.tedi-table--sticky-first-column>:where(.tedi-table__scroll)>:where(.tedi-table__table)>.tedi-table__head>*>.tedi-table__header-cell.tedi-table__cell--sticky-left{z-index:3}.tedi-table--sticky-header.tedi-table--sticky-first-column>:where(.tedi-table__scroll)>:where(.tedi-table__table)>.tedi-table__head>*>.tedi-table__header-cell.tedi-table__cell--sticky-left-edge{box-shadow:inset -1px 0 0 var(--table-border),inset 0 -1px 0 var(--table-border-th)}.tedi-table--sticky-header.tedi-table--sticky-last-column>:where(.tedi-table__scroll)>:where(.tedi-table__table)>.tedi-table__head>*>.tedi-table__header-cell.tedi-table__cell--sticky-right{z-index:3}.tedi-table--sticky-header.tedi-table--sticky-last-column>:where(.tedi-table__scroll)>:where(.tedi-table__table)>.tedi-table__head>*>.tedi-table__header-cell.tedi-table__cell--sticky-right-edge{box-shadow:inset 1px 0 0 var(--table-border),inset 0 -1px 0 var(--table-border-th)}.tedi-table--sticky-header>.tedi-table__scroll--shadow-header>:where(.tedi-table__table)>.tedi-table__head>.tedi-table__row:after{position:absolute;top:100%;right:0;left:0;height:var(--tedi-dimensions-03);pointer-events:none;content:\"\";background:linear-gradient(to bottom,var(--tedi-alpha-10),transparent)}.tedi-table--fixed-layout>:where(.tedi-table__scroll)>.tedi-table__table{table-layout:fixed}.tedi-table__drag-handle{display:inline-flex;align-items:center;justify-content:center;padding:2px;color:var(--general-text-tertiary);cursor:grab;background:transparent;border:0;border-radius:var(--button-radius-sm)}.tedi-table__drag-handle:hover{color:var(--general-text-primary);background:var(--button-main-neutral-icon-only-background-hover)}.tedi-table__drag-handle:focus-visible{outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:0}.tedi-table__drag-handle.cdk-drag-disabled{color:var(--general-text-disabled);cursor:not-allowed}.tedi-table__drag-handle--picked-up{color:var(--tedi-primary-500);cursor:grabbing}.cdk-drag-preview .tedi-table__drag-handle,.cdk-drop-list-dragging .tedi-table__drag-handle{cursor:grabbing}.cdk-drag-preview.tedi-table__row,.cdk-drag-preview.tedi-table__header-cell{display:table;cursor:grabbing;background:var(--table-hover);border:var(--tedi-borders-01) solid var(--card-border-primary);border-radius:var(--table-radius);box-shadow:0 6px 16px var(--tedi-alpha-20)}.cdk-drag-preview.tedi-table__row>.tedi-table__cell{background:var(--table-hover)}.cdk-drag-placeholder.tedi-table__row,.cdk-drag-placeholder.tedi-table__header-cell{opacity:.3}.cdk-drop-list-dragging .tedi-table__row:not(.cdk-drag-placeholder),.cdk-drop-list-dragging .tedi-table__header-cell:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.tedi-table__filter{display:flex;flex-direction:column;gap:var(--tedi-dimensions-12);width:100%}.tedi-table__filter-actions{display:flex;gap:var(--button-gutter-x-sm)}.tedi-table__filter-actions>*{flex:1 1 0;justify-content:center}.tedi-table .tedi-table__head .tedi-table__header-cell--picked-up{cursor:grabbing;background:var(--table-hover)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: FlexRenderDirective, selector: "[flexRender]", inputs: ["flexRender", "flexRenderProps", "flexRenderInjector"] }, { kind: "component", type: PaginationComponent, selector: "tedi-pagination", inputs: ["pageCount", "page", "totalItems", "pageSize", "pageSizeOptions", "boundaryCount", "siblingCount", "labels", "background", "dividerPosition", "align", "hideResults", "hidePageSize", "hidePager", "hideArrows", "disableArrowsAtBoundary", "arrowVariant", "showArrowLabels", "previousIcon", "nextIcon", "showModalTitle", "xs", "sm", "md", "lg", "xl", "xxl"], outputs: ["pageChange", "pageSizeChange"] }, { kind: "directive", type: TediPaginationResultsDirective, selector: "[tediPaginationResults]" }, { kind: "component", type: TediTableHeaderButtonComponent, selector: "button[tedi-table-header-button]", inputs: ["icon", "filled", "selected", "disabled", "iconSize", "aria-label"] }, { kind: "component", type: CheckboxComponent, selector: "input[type=checkbox][tedi-checkbox]", inputs: ["size", "invalid", "value", "disabled"] }, { kind: "component", type: RadioComponent, selector: "input[type=radio][tedi-radio]", inputs: ["size", "invalid", "value", "disabled"] }, { kind: "component", type: TextFieldComponent, selector: "input[tedi-text-field]", inputs: ["value", "size", "invalid", "arrowsHidden", "disabled", "readonly", "readOnly"], outputs: ["valueChange", "clear"] }, { kind: "component", type: FormFieldComponent, selector: "tedi-form-field", inputs: ["size", "icon", "clearable", "showClearOnInteraction", "inputClass", "characterLimit"] }, { kind: "component", type: IconComponent, selector: "tedi-icon", inputs: ["name", "size", "color", "background", "variant", "type", "label"] }, { kind: "component", type: ButtonComponent, selector: "[tedi-button]", inputs: ["variant", "size"] }, { kind: "component", type: CollapseButtonComponent, selector: "button[tedi-collapse-button]", inputs: ["open", "openText", "closeText", "hideText", "arrowType", "size", "inverted", "underline", "ariaControls", "ariaLabel", "id"], outputs: ["openChange"] }, { kind: "component", type: PopoverComponent, selector: "tedi-popover", inputs: ["position", "preventOverflow", "dismissible", "hideOnScroll", "withBorder", "withArrow", "lockScroll", "timeoutDelay", "offset"] }, { kind: "component", type: PopoverContentComponent, selector: "tedi-popover-content", inputs: ["maxWidth", "title", "showClose"] }, { kind: "directive", type: PopoverTriggerDirective, selector: "[tedi-popover-trigger]", inputs: ["underline", "interactive"] }, { kind: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "directive", type: CdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
14887
14891
|
}
|
|
14888
14892
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: TediTableComponent, decorators: [{
|
|
14889
14893
|
type: Component,
|
|
@@ -14917,7 +14921,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImpo
|
|
|
14917
14921
|
useFactory: (component) => component.contextValue,
|
|
14918
14922
|
deps: [TediTableComponent],
|
|
14919
14923
|
},
|
|
14920
|
-
], template: "<ng-content select=\"tedi-table-toolbar\" />\n<ng-content select=\"tedi-table-columns-menu\" />\n\n<!-- Live region for screen-reader announcements during keyboard reordering -->\n@if (reorderableColumns() || reorderableRows()) {\n <div\n [id]=\"liveRegionId\"\n aria-live=\"polite\"\n aria-atomic=\"true\"\n class=\"sr-only\"\n ></div>\n}\n\n@if (resolvedTopSlot(); as top) {\n <div class=\"tedi-table__pagination tedi-table__pagination--top\">\n <tedi-pagination\n [pageCount]=\"paginationPageCount()\"\n [page]=\"paginationPage()\"\n [totalItems]=\"paginationTotalItems()\"\n [pageSize]=\"paginationPageSize()\"\n [pageSizeOptions]=\"paginationPageSizeOptions()\"\n [boundaryCount]=\"top.boundaryCount\"\n [siblingCount]=\"top.siblingCount\"\n [labels]=\"top.labels\"\n [background]=\"top.background\"\n [align]=\"top.align\"\n [dividerPosition]=\"top.dividerPosition\"\n [hideResults]=\"top.hideResults\"\n [hidePageSize]=\"top.hidePageSize\"\n [hidePager]=\"top.hidePager\"\n [hideArrows]=\"top.hideArrows\"\n [disableArrowsAtBoundary]=\"top.disableArrowsAtBoundary\"\n [arrowVariant]=\"top.arrowVariant\"\n [showArrowLabels]=\"top.showArrowLabels\"\n [previousIcon]=\"top.previousIcon\"\n [nextIcon]=\"top.nextIcon\"\n [showModalTitle]=\"top.showModalTitle\"\n [xs]=\"top.xs\"\n [sm]=\"top.sm\"\n [md]=\"top.md\"\n [lg]=\"top.lg\"\n [xl]=\"top.xl\"\n [xxl]=\"top.xxl\"\n (pageChange)=\"handlePaginationPageChange($event)\"\n (pageSizeChange)=\"handlePaginationPageSizeChange($event)\"\n >\n @if (topResultsTemplate(); as tpl) {\n <span tediPaginationResults>\n <ng-container *ngTemplateOutlet=\"tpl\" />\n </span>\n }\n </tedi-pagination>\n </div>\n}\n\n<div\n #scrollContainer\n class=\"tedi-table__scroll\"\n [class.tedi-table__scroll--shadow-start]=\"hasStartShadow()\"\n [class.tedi-table__scroll--shadow-end]=\"hasEndShadow()\"\n [class.tedi-table__scroll--shadow-header]=\"hasHeaderShadow()\"\n [attr.style]=\"maxHeightStyle()\"\n cdkScrollable\n tabindex=\"0\"\n role=\"group\"\n [attr.aria-label]=\"scrollRegionLabel()\"\n (scroll)=\"onHorizontalScroll()\"\n>\n <table\n #tableElement\n class=\"tedi-table__table\"\n [attr.id]=\"id() || null\"\n [attr.aria-label]=\"ariaLabel() || null\"\n [attr.aria-labelledby]=\"ariaLabelledby() || null\"\n [attr.aria-rowcount]=\"ariaRowCount()\"\n [attr.aria-colcount]=\"leafColumnCount() > 0 ? leafColumnCount() : null\"\n >\n @if (caption(); as cap) {\n <caption class=\"tedi-table__caption\">\n @if (isString(cap)) {\n {{ cap }}\n } @else {\n <ng-container *ngTemplateOutlet=\"$any(cap)\" />\n }\n </caption>\n }\n\n <thead class=\"tedi-table__head\">\n @for (\n headerGroup of headerGroups();\n track headerGroup.id;\n let rowIndex = $index\n ) {\n <tr\n class=\"tedi-table__row\"\n [attr.aria-rowindex]=\"ariaRowIndexingEnabled() ? rowIndex + 1 : null\"\n [cdkDropListDisabled]=\"!reorderableColumns() || rowIndex > 0\"\n cdkDropList\n cdkDropListOrientation=\"horizontal\"\n cdkDropListAutoScrollDisabled\n (cdkDropListDropped)=\"handleColumnDrop($event)\"\n >\n @for (header of headerGroup.headers; track header.id) {\n @if (shouldRenderHeader(header, rowIndex)) {\n @let meta = getColumnMeta(header.column);\n @let ariaSort = getHeaderAriaSort(header.column);\n @let srHeaderLabel = getSrOnlyHeaderLabel(header.column);\n @let rowSpan = getHeaderRowSpan(header, rowIndex);\n @let headerAlign = meta?.headerAlign ?? meta?.align;\n <th\n scope=\"col\"\n cdkDrag\n [cdkDragDisabled]=\"\n !reorderableColumns() ||\n rowIndex > 0 ||\n header.column.id === SELECT_COLUMN_ID ||\n header.column.id === EXPAND_COLUMN_ID\n \"\n cdkDragLockAxis=\"x\"\n (keydown)=\"handleHeaderKeydown($event, header)\"\n [class]=\"\n 'tedi-table__header-cell' +\n (isHeaderGroup(header)\n ? ' tedi-table__header-cell--group'\n : '') +\n (headerAlign\n ? ' tedi-table__cell--align-' + headerAlign\n : '') +\n (meta?.vAlign\n ? ' tedi-table__cell--valign-' + meta?.vAlign\n : '') +\n (pickedUpColumnId() === header.column.id\n ? ' tedi-table__header-cell--picked-up'\n : '') +\n controlCellClass(header.column.id) +\n stickyLeftClass(header.column.id) +\n stickyRightClass(header.column.id)\n \"\n [attr.colspan]=\"header.colSpan > 1 ? header.colSpan : null\"\n [attr.rowspan]=\"rowSpan\"\n [attr.aria-sort]=\"ariaSort\"\n [style.width.px]=\"headerCellWidth(header.column)\"\n [style.min-width.px]=\"columnMinWidth(header.column)\"\n [style.max-width.px]=\"columnMaxWidth(header.column)\"\n [style.left.px]=\"stickyLeft(header.column.id)\"\n [style.right.px]=\"stickyRight(header.column.id)\"\n >\n @if (srHeaderLabel) {\n <span class=\"sr-only\">{{ srHeaderLabel }}</span>\n }\n @if (header.column.id === SELECT_COLUMN_ID) {\n @if (selectionMode() === \"multiple\") {\n <input\n tedi-checkbox\n type=\"checkbox\"\n [id]=\"resolvedId() + '-select-all'\"\n [name]=\"resolvedId() + '-select-all'\"\n [attr.aria-label]=\"selectAllLabel()\"\n [checked]=\"isAllPageRowsSelected()\"\n [indeterminate]=\"\n isSomePageRowsSelected() && !isAllPageRowsSelected()\n \"\n (change)=\"handleSelectAll($any($event.target).checked)\"\n />\n }\n } @else if (header.column.id === EXPAND_COLUMN_ID) {\n <!-- empty -->\n } @else if (header.column.id === DRAG_COLUMN_ID) {\n <!-- empty -->\n } @else {\n <span class=\"tedi-table__header-content\">\n @if (\n reorderableColumns() &&\n rowIndex === 0 &&\n !isHeaderGroup(header)\n ) {\n <button\n type=\"button\"\n cdkDragHandle\n class=\"tedi-table__drag-handle\"\n [class.tedi-table__drag-handle--picked-up]=\"\n pickedUpColumnId() === header.column.id\n \"\n [id]=\"reorderHandleId(header.column.id)\"\n [attr.aria-label]=\"dragColumnLabel()\"\n [attr.aria-pressed]=\"\n reorderableColumns()\n ? pickedUpColumnId() === header.column.id\n : null\n \"\n >\n <tedi-icon\n name=\"drag_indicator\"\n [size]=\"18\"\n color=\"inherit\"\n />\n </button>\n }\n <ng-container\n *flexRender=\"\n header.column.columnDef.header;\n props: header.getContext();\n let content\n \"\n >\n @if (shouldRenderSortableHeader(header.column, content)) {\n <button\n tedi-table-header-button\n [icon]=\"sortIcon(header.column)\"\n [selected]=\"!!header.column.getIsSorted()\"\n (click)=\"handleSortToggle(header.column)\"\n >\n {{ content }}\n </button>\n } @else if (isString(content) || isNumber(content)) {\n {{ content }}\n } @else {\n {{ content }}\n }\n </ng-container>\n @if (shouldRenderFilterButton(header.column)) {\n @if (filterUsesModal()) {\n <button\n tedi-table-header-button\n icon=\"filter_alt\"\n [selected]=\"filterIsActive(header.column)\"\n [filled]=\"filterIsActive(header.column)\"\n [aria-label]=\"filterAriaLabel(header.column)\"\n (click)=\"openFilterModal(header.column)\"\n ></button>\n } @else {\n <tedi-popover\n #filterPopover\n class=\"tedi-table__filter-popover\"\n position=\"bottom-end\"\n [preventOverflow]=\"true\"\n >\n <button\n tedi-popover-trigger\n tedi-table-header-button\n icon=\"filter_alt\"\n [selected]=\"filterIsActive(header.column)\"\n [filled]=\"filterIsActive(header.column)\"\n [aria-label]=\"filterAriaLabel(header.column)\"\n (click)=\"handleFilterTriggerClick(header.column)\"\n ></button>\n <tedi-popover-content\n [maxWidth]=\"filterPopoverWidthFor(header.column)\"\n >\n <div class=\"tedi-table__filter\">\n <div class=\"tedi-table__filter-body\">\n @if (filterTemplateFor(header.column); as tpl) {\n <ng-container\n *ngTemplateOutlet=\"\n tpl;\n context: filterContextFor(\n header.column,\n filterPopover\n )\n \"\n />\n }\n </div>\n <div class=\"tedi-table__filter-actions\">\n <button\n tedi-button\n variant=\"secondary\"\n size=\"small\"\n type=\"button\"\n (click)=\"\n handleFilterClear(\n header.column,\n filterPopover\n )\n \"\n >\n {{ filterClearLabel() }}\n </button>\n <button\n tedi-button\n variant=\"primary\"\n size=\"small\"\n type=\"button\"\n (click)=\"\n handleFilterApply(\n header.column,\n filterPopover\n )\n \"\n >\n {{ filterApplyLabel() }}\n </button>\n </div>\n </div>\n </tedi-popover-content>\n </tedi-popover>\n }\n }\n </span>\n }\n </th>\n }\n }\n </tr>\n }\n @if (enableColumnFilters()) {\n <tr\n class=\"tedi-table__row tedi-table__row--filter\"\n [attr.aria-rowindex]=\"\n ariaRowIndexingEnabled() ? headerGroups().length + 1 : null\n \"\n >\n @for (column of leafColumns(); track column.id) {\n @let filterId = resolvedId() + \"-filter-\" + column.id;\n <th class=\"tedi-table__header-cell\" scope=\"col\">\n @if (column.getCanFilter()) {\n <tedi-form-field size=\"small\">\n <input\n tedi-text-field\n type=\"text\"\n [id]=\"filterId\"\n [name]=\"filterId\"\n [attr.aria-label]=\"filterLabel(column)\"\n [placeholder]=\"filterPlaceholder()\"\n [value]=\"getFilterValue(column)\"\n (input)=\"\n handleColumnFilter(column, $any($event.target).value)\n \"\n (clear)=\"handleColumnFilter(column, '')\"\n />\n </tedi-form-field>\n }\n </th>\n }\n </tr>\n }\n </thead>\n\n <tbody\n class=\"tedi-table__body\"\n cdkDropList\n [cdkDropListDisabled]=\"!reorderableRows()\"\n (cdkDropListDropped)=\"handleRowDrop($any($event))\"\n >\n @if (rows().length === 0) {\n <tr class=\"tedi-table__row\">\n <td\n class=\"tedi-table__cell tedi-table__cell--placeholder\"\n [attr.colspan]=\"leafColumnCount() > 0 ? leafColumnCount() : 1\"\n >\n @if (placeholder(); as pl) {\n @if (placeholderRole()) {\n <div [attr.role]=\"placeholderRole()\">\n @if (isString(pl)) {\n {{ pl }}\n } @else {\n <ng-container *ngTemplateOutlet=\"$any(pl)\" />\n }\n </div>\n } @else {\n @if (isString(pl)) {\n {{ pl }}\n } @else {\n <ng-container *ngTemplateOutlet=\"$any(pl)\" />\n }\n }\n } @else {\n @if (placeholderRole()) {\n <div [attr.role]=\"placeholderRole()\">\n {{ placeholderLabel() }}\n </div>\n } @else {\n {{ placeholderLabel() }}\n }\n }\n </td>\n </tr>\n } @else {\n @for (row of rows(); track row.id) {\n @let isActiveRow =\n activeRowId() !== undefined && row.id === activeRowId();\n @let ariaRowIndex = rowAriaIndexById().get(row.id) ?? null;\n @let subRowId = resolvedId() + \"-sub-\" + row.id;\n @let expandsOnClick = rowExpandsOnClick(row);\n <tr\n cdkDrag\n [cdkDragDisabled]=\"!reorderableRows()\"\n cdkDragLockAxis=\"y\"\n [class]=\"\n 'tedi-table__row' +\n (this.selectedRowHighlight() && row.getIsSelected()\n ? ' tedi-table__row--selected'\n : '') +\n (isActiveRow ? ' tedi-table__row--active' : '') +\n (interactive() || expandsOnClick\n ? ' tedi-table__row--clickable'\n : '') +\n (row.depth > 0 ? ' tedi-table__row--sub-row' : '') +\n (groupStartRowIds().has(row.id)\n ? ' tedi-table__row--group-start'\n : '') +\n (pickedUpRow() === row.original\n ? ' tedi-table__row--picked-up'\n : '')\n \"\n [attr.role]=\"\n interactive() && !rowHasNestedInteractive(row) ? 'button' : null\n \"\n [attr.tabindex]=\"interactive() ? 0 : null\"\n [attr.aria-label]=\"rowAriaLabelFor(row)\"\n [attr.aria-rowindex]=\"ariaRowIndex\"\n [attr.aria-current]=\"isActiveRow ? 'true' : null\"\n (click)=\"\n (interactive() || expandsOnClick) && handleRowClick($event, row)\n \"\n (keydown)=\"handleRowKeydown($event, row)\"\n (mouseenter)=\"handleRowMouseEnter(row)\"\n (mouseleave)=\"handleRowMouseLeave()\"\n >\n @for (cell of row.getVisibleCells(); track cell.id) {\n @let cellMeta = getColumnMeta(cell.column);\n @let cellContext = cell.getContext();\n @let resolvedSpan = resolveRowSpan(cell, cellContext);\n @if (resolvedSpan !== 0) {\n <td\n [class]=\"\n 'tedi-table__cell' +\n (cellMeta?.align\n ? ' tedi-table__cell--align-' + cellMeta?.align\n : '') +\n (cellMeta?.vAlign\n ? ' tedi-table__cell--valign-' + cellMeta?.vAlign\n : '') +\n controlCellClass(cell.column.id) +\n stickyLeftClass(cell.column.id) +\n stickyRightClass(cell.column.id)\n \"\n [style.left.px]=\"stickyLeft(cell.column.id)\"\n [style.right.px]=\"stickyRight(cell.column.id)\"\n [attr.rowspan]=\"\n resolvedSpan !== null && resolvedSpan > 1\n ? resolvedSpan\n : null\n \"\n >\n @if (cell.column.id === DRAG_COLUMN_ID) {\n <button\n type=\"button\"\n cdkDragHandle\n class=\"tedi-table__drag-handle\"\n [class.tedi-table__drag-handle--picked-up]=\"\n pickedUpRow() === row.original\n \"\n [id]=\"rowReorderHandleId(row.id)\"\n [attr.aria-label]=\"dragRowLabel()\"\n [attr.aria-pressed]=\"\n reorderableRows()\n ? pickedUpRow() === row.original\n : null\n \"\n (click)=\"$event.stopPropagation()\"\n (keydown)=\"handleRowReorderKeydown($event, row)\"\n >\n <tedi-icon\n name=\"drag_indicator\"\n [size]=\"18\"\n color=\"inherit\"\n />\n </button>\n } @else if (cell.column.id === SELECT_COLUMN_ID) {\n @if (selectionMode() === \"multiple\") {\n <input\n tedi-checkbox\n type=\"checkbox\"\n [id]=\"resolvedId() + '-select-' + row.id\"\n [name]=\"resolvedId() + '-select-' + row.id\"\n [attr.aria-label]=\"selectRowLabel(row)\"\n [checked]=\"isRowSelected(row)\"\n [disabled]=\"!row.getCanSelect()\"\n [indeterminate]=\"isRowIndeterminate(row)\"\n (change)=\"\n handleSelectRow(row, $any($event.target).checked)\n \"\n (click)=\"$event.stopPropagation()\"\n />\n } @else {\n <input\n tedi-radio\n type=\"radio\"\n [id]=\"resolvedId() + '-select-' + row.id\"\n [name]=\"resolvedId() + '-select-row'\"\n [attr.aria-label]=\"selectRowLabel(row)\"\n [checked]=\"row.getIsSelected()\"\n [disabled]=\"!row.getCanSelect()\"\n (change)=\"\n handleSelectRow(row, $any($event.target).checked)\n \"\n (click)=\"$event.stopPropagation()\"\n />\n }\n } @else if (cell.column.id === EXPAND_COLUMN_ID) {\n <span\n class=\"tedi-table__expand-toggle\"\n [class.tedi-table__expand-toggle--icon-only]=\"\n !expandButtonHasLabel()\n \"\n >\n @if (row.getCanExpand()) {\n @let expandOpen = row.getIsExpanded();\n <button\n tedi-collapse-button\n [arrowType]=\"resolvedExpandVariant()\"\n [hideText]=\"!expandButtonHasLabel()\"\n [openText]=\"expandButtonOpenText()\"\n [closeText]=\"expandButtonCloseText()\"\n [open]=\"expandOpen\"\n [id]=\"resolvedId() + '-expand-' + row.id\"\n [ariaControls]=\"\n renderSubComponent() ? subRowId : undefined\n \"\n [ariaLabel]=\"\n expandButtonHasLabel()\n ? undefined\n : expandRowLabel(expandOpen)\n \"\n (openChange)=\"handleExpandToggle(row)\"\n (click)=\"$event.stopPropagation()\"\n (keydown)=\"handleExpandKeydown($event)\"\n ></button>\n }\n </span>\n } @else {\n <ng-container\n *flexRender=\"\n cell.column.columnDef.cell;\n props: cellContext;\n let content\n \"\n >\n {{ content }}\n </ng-container>\n }\n </td>\n }\n }\n </tr>\n @if (renderSubComponent(); as subTpl) {\n @if (row.getCanExpand()) {\n @let isExpanded = row.getIsExpanded();\n <tr\n [class]=\"\n 'tedi-table__row tedi-table__row--sub-component' +\n (isExpanded ? ' tedi-table__row--sub-component-open' : '')\n \"\n >\n <td\n class=\"tedi-table__cell tedi-table__cell--sub-component\"\n [attr.id]=\"subRowId\"\n [attr.role]=\"isExpanded ? 'region' : null\"\n [attr.aria-label]=\"isExpanded ? rowDetailsLabel() : null\"\n [attr.inert]=\"isExpanded ? null : ''\"\n [attr.colspan]=\"leafColumnCount() > 0 ? leafColumnCount() : 1\"\n >\n <div class=\"tedi-table__sub-component-wrapper\">\n <div class=\"tedi-table__sub-component-content\">\n <div class=\"tedi-table__sub-component-inner\">\n <ng-container\n *ngTemplateOutlet=\"\n subTpl;\n context: { $implicit: row }\n \"\n />\n </div>\n </div>\n </div>\n </td>\n </tr>\n }\n }\n }\n }\n </tbody>\n\n @if (hasFooter()) {\n <tfoot class=\"tedi-table__foot\">\n @for (group of footerGroups(); track group.id) {\n <tr class=\"tedi-table__row\">\n @for (header of group.headers; track header.id) {\n @let footerMeta = getColumnMeta(header.column);\n <td\n [class]=\"\n 'tedi-table__cell tedi-table__cell--footer' +\n (footerMeta?.align\n ? ' tedi-table__cell--align-' + footerMeta?.align\n : '') +\n (footerMeta?.vAlign\n ? ' tedi-table__cell--valign-' + footerMeta?.vAlign\n : '')\n \"\n [attr.colspan]=\"header.colSpan > 1 ? header.colSpan : null\"\n >\n @if (!header.isPlaceholder) {\n <ng-container\n *flexRender=\"\n header.column.columnDef.footer;\n props: header.getContext();\n let content\n \"\n >\n {{ content }}\n </ng-container>\n }\n </td>\n }\n </tr>\n }\n </tfoot>\n }\n </table>\n</div>\n\n@if (resolvedBottomSlot(); as bottom) {\n <div class=\"tedi-table__pagination tedi-table__pagination--bottom\">\n <tedi-pagination\n [pageCount]=\"paginationPageCount()\"\n [page]=\"paginationPage()\"\n [totalItems]=\"paginationTotalItems()\"\n [pageSize]=\"paginationPageSize()\"\n [pageSizeOptions]=\"paginationPageSizeOptions()\"\n [boundaryCount]=\"bottom.boundaryCount\"\n [siblingCount]=\"bottom.siblingCount\"\n [labels]=\"bottom.labels\"\n [background]=\"bottom.background\"\n [align]=\"bottom.align\"\n [dividerPosition]=\"bottom.dividerPosition\"\n [hideResults]=\"bottom.hideResults\"\n [hidePageSize]=\"bottom.hidePageSize\"\n [hidePager]=\"bottom.hidePager\"\n [hideArrows]=\"bottom.hideArrows\"\n [disableArrowsAtBoundary]=\"bottom.disableArrowsAtBoundary\"\n [arrowVariant]=\"bottom.arrowVariant\"\n [showArrowLabels]=\"bottom.showArrowLabels\"\n [previousIcon]=\"bottom.previousIcon\"\n [nextIcon]=\"bottom.nextIcon\"\n [showModalTitle]=\"bottom.showModalTitle\"\n [xs]=\"bottom.xs\"\n [sm]=\"bottom.sm\"\n [md]=\"bottom.md\"\n [lg]=\"bottom.lg\"\n [xl]=\"bottom.xl\"\n [xxl]=\"bottom.xxl\"\n (pageChange)=\"handlePaginationPageChange($event)\"\n (pageSizeChange)=\"handlePaginationPageSizeChange($event)\"\n >\n @if (bottomResultsTemplate(); as tpl) {\n <span tediPaginationResults>\n <ng-container *ngTemplateOutlet=\"tpl\" />\n </span>\n }\n </tedi-pagination>\n </div>\n}\n", styles: [".tedi-table{display:flex;flex-direction:column;gap:var(--tedi-dimensions-10);width:100%}.tedi-table__scroll{overflow-x:auto;background:var(--table-default);border:var(--tedi-borders-01) solid var(--table-border);border-radius:var(--table-radius)}.tedi-table__table{width:100%;font-size:var(--body-regular-size);line-height:var(--body-regular-line-height);color:var(--general-text-primary);border-spacing:0;border-collapse:collapse;background:var(--table-default)}.tedi-table__caption{padding:var(--tedi-dimensions-10) var(--table-header-padding-x);font-weight:var(--body-regular-weight);color:var(--general-text-primary);text-align:left;caption-side:top}.tedi-table__head{background:var(--table-default)}.tedi-table__header-cell{padding:var(--table-header-padding-y) var(--table-header-padding-x);font-size:var(--body-regular-size);font-weight:var(--body-regular-weight);color:var(--general-text-tertiary);text-align:left;white-space:nowrap;background:var(--table-default);border-bottom:1px solid var(--table-border-th)}.tedi-table__header-content{display:inline-flex;gap:var(--layout-grid-gutters-04);align-items:center}.tedi-table__filter-popover{display:inline-flex;align-items:center}.tedi-table__body .tedi-table__row>.tedi-table__cell{border-bottom:var(--tedi-borders-01) solid var(--table-border)}.tedi-table__body .tedi-table__row:last-child>.tedi-table__cell{border-bottom:0}.tedi-table--group-dividers-between .tedi-table__body .tedi-table__row>.tedi-table__cell{border-bottom:0}.tedi-table--group-dividers-between .tedi-table__body .tedi-table__row--group-start>.tedi-table__cell{border-top:var(--tedi-borders-01) solid var(--table-border)}.tedi-table--group-dividers-none .tedi-table__body .tedi-table__row>.tedi-table__cell{border-bottom:0}.tedi-table__cell{padding:var(--table-data-padding-y) var(--table-data-padding-x);vertical-align:middle;color:var(--general-text-primary);background:var(--table-default)}.tedi-table__cell--control{padding-right:var(--table-data-padding-x-sm);padding-left:var(--table-data-padding-x-sm)}.tedi-table__cell--control-fit{width:1%;white-space:nowrap}.tedi-table__cell--align-left{text-align:left}.tedi-table__cell--align-center{text-align:center}.tedi-table__cell--align-right{text-align:right}.tedi-table__cell--valign-top{vertical-align:top}.tedi-table__cell--valign-middle{vertical-align:middle}.tedi-table__cell--valign-bottom{vertical-align:bottom}.tedi-table__expand-toggle{display:flex;align-items:center}.tedi-table__expand-toggle--icon-only{min-height:var(--button-sm-icon-size)}.tedi-table__cell--placeholder{padding:var(--tedi-dimensions-14) var(--table-data-padding-x);color:var(--general-text-secondary);text-align:center}.tedi-table--small .tedi-table__header-cell{padding:var(--table-header-padding-y-sm) var(--table-header-padding-x-sm)}.tedi-table--small .tedi-table__cell{padding:var(--table-data-padding-y-sm) var(--table-data-padding-x-sm)}.tedi-table__foot{font-weight:var(--heading-weight);background:var(--table-default)}.tedi-table__cell--footer{color:var(--general-text-primary);border-top:var(--tedi-borders-01) solid var(--table-border-th)}.tedi-table__row--selected>.tedi-table__cell{background:var(--table-active)}.tedi-table__row--clickable{cursor:pointer}.tedi-table__row--clickable:focus-visible{outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:calc(var(--tedi-borders-02) * -1);background:transparent;border-color:transparent}.tedi-table__body .tedi-table__row--sub-component>.tedi-table__cell{background:var(--table-striped);border-bottom:0}.tedi-table__body .tedi-table__row--sub-component-open>.tedi-table__cell{border-bottom:var(--tedi-borders-01) solid var(--table-border)}.tedi-table__row--sub-row>.tedi-table__cell{background:var(--table-striped)}.tedi-table__cell--sub-component{padding:0}.tedi-table__sub-component-wrapper{display:grid;grid-template-rows:0fr}.tedi-table__row--sub-component-open .tedi-table__sub-component-wrapper{grid-template-rows:1fr}.tedi-table__sub-component-content{min-height:0;overflow:hidden}.tedi-table__sub-component-inner{padding:var(--table-data-padding-y) var(--table-data-padding-x)}.tedi-table__row--filter{background:var(--general-surface-primary)}.tedi-table__row--filter .tedi-table__header-cell{padding-top:var(--tedi-dimensions-05);padding-bottom:var(--tedi-dimensions-05);font-weight:var(--body-regular-weight);background:var(--general-surface-primary)}.tedi-table--striped .tedi-table__body .tedi-table__row:nth-of-type(2n)>.tedi-table__cell{background:var(--table-striped)}.tedi-table.tedi-table--row-hover .tedi-table__body .tedi-table__row:hover>.tedi-table__cell{background:var(--table-hover)}.tedi-table .tedi-table__body .tedi-table__row.tedi-table__row--active>.tedi-table__cell,.tedi-table .tedi-table__body .tedi-table__row.tedi-table__row--active:hover>.tedi-table__cell{background:var(--table-hover)}.tedi-table .tedi-table__body .tedi-table__row.tedi-table__row--picked-up>.tedi-table__cell{background:var(--table-hover)}.tedi-table--vertical-borders .tedi-table__header-cell,.tedi-table--vertical-borders .tedi-table__cell{border-right:var(--tedi-borders-01) solid var(--table-border)}.tedi-table--vertical-borders thead tr:first-child .tedi-table__header-cell:last-child,.tedi-table--vertical-borders .tedi-table__row>.tedi-table__cell:last-child{border-right:0}.tedi-table--borderless .tedi-table__scroll{background:transparent;border:0;border-radius:0}.tedi-table--has-pagination{gap:0}.tedi-table--has-pagination-bottom .tedi-table__scroll{border-bottom:0;border-bottom-right-radius:0;border-bottom-left-radius:0}.tedi-table--has-pagination-top .tedi-table__scroll{border-top:0;border-top-left-radius:0;border-top-right-radius:0}.tedi-table__pagination{overflow:hidden;border:var(--tedi-borders-01) solid var(--table-border)}.tedi-table__pagination--bottom{border-top:0;border-bottom-right-radius:var(--table-radius);border-bottom-left-radius:var(--table-radius)}.tedi-table__pagination--top{border-bottom:0;border-top-left-radius:var(--table-radius);border-top-right-radius:var(--table-radius)}.tedi-table--borderless .tedi-table__pagination{background:transparent;border:0}.tedi-table--sticky-first-column .tedi-table__header-cell.tedi-table__cell--sticky-left{position:sticky;z-index:2;background:var(--table-default)}.tedi-table--sticky-first-column .tedi-table__cell--sticky-left{position:sticky;z-index:1;background:var(--table-default)}.tedi-table--sticky-first-column .tedi-table__cell--sticky-left-edge{box-shadow:inset -1px 0 0 var(--table-border)}.tedi-table--sticky-first-column .tedi-table__cell--sticky-left-edge:after{position:absolute;top:0;bottom:0;left:100%;width:var(--tedi-dimensions-03);pointer-events:none;content:\"\"}.tedi-table--sticky-first-column .tedi-table__scroll--shadow-start .tedi-table__cell--sticky-left-edge:after{background:linear-gradient(to right,var(--tedi-alpha-10),transparent)}.tedi-table--sticky-first-column .tedi-table__body .tedi-table__row--sub-row>.tedi-table__cell--sticky-left{background:var(--table-striped)}.tedi-table--sticky-first-column.tedi-table--striped .tedi-table__body .tedi-table__row:nth-of-type(2n)>.tedi-table__cell--sticky-left{background:var(--table-striped)}.tedi-table--sticky-first-column .tedi-table__body .tedi-table__row--picked-up>.tedi-table__cell--sticky-left{background:var(--table-hover)}.tedi-table--sticky-first-column.tedi-table--striped .tedi-table__body .tedi-table__row--picked-up:nth-of-type(2n)>.tedi-table__cell--sticky-left{background:var(--table-hover)}.tedi-table--sticky-first-column .tedi-table__head .tedi-table__header-cell--picked-up.tedi-table__cell--sticky-left{background:var(--table-hover)}.tedi-table--sticky-first-column .tedi-table__row--clickable:focus-visible>.tedi-table__cell--sticky-left{box-shadow:inset 0 var(--tedi-borders-02) 0 var(--tedi-primary-500),inset 0 calc(var(--tedi-borders-02) * -1) 0 var(--tedi-primary-500)}.tedi-table--sticky-first-column .tedi-table__row--clickable:focus-visible>.tedi-table__cell--sticky-left-start{box-shadow:inset var(--tedi-borders-02) 0 0 var(--tedi-primary-500),inset 0 var(--tedi-borders-02) 0 var(--tedi-primary-500),inset 0 calc(var(--tedi-borders-02) * -1) 0 var(--tedi-primary-500)}.tedi-table--sticky-first-column .tedi-table__row--clickable:focus-visible>.tedi-table__cell--sticky-left-edge{box-shadow:inset -1px 0 0 var(--table-border),inset 0 var(--tedi-borders-02) 0 var(--tedi-primary-500),inset 0 calc(var(--tedi-borders-02) * -1) 0 var(--tedi-primary-500)}.tedi-table--sticky-first-column .tedi-table__row--clickable:focus-visible>.tedi-table__cell--sticky-left-start.tedi-table__cell--sticky-left-edge{box-shadow:inset -1px 0 0 var(--table-border),inset var(--tedi-borders-02) 0 0 var(--tedi-primary-500),inset 0 var(--tedi-borders-02) 0 var(--tedi-primary-500),inset 0 calc(var(--tedi-borders-02) * -1) 0 var(--tedi-primary-500)}.tedi-table--sticky-last-column .tedi-table__header-cell.tedi-table__cell--sticky-right{position:sticky;z-index:2;background:var(--table-default)}.tedi-table--sticky-last-column .tedi-table__cell--sticky-right{position:sticky;z-index:1;background:var(--table-default)}.tedi-table--sticky-last-column .tedi-table__cell--sticky-right-edge{box-shadow:inset 1px 0 0 var(--table-border)}.tedi-table--sticky-last-column .tedi-table__cell--sticky-right-edge:after{position:absolute;top:0;right:100%;bottom:0;width:var(--tedi-dimensions-03);pointer-events:none;content:\"\"}.tedi-table--sticky-last-column .tedi-table__scroll--shadow-end .tedi-table__cell--sticky-right-edge:after{background:linear-gradient(to left,var(--tedi-alpha-10),transparent)}.tedi-table--sticky-last-column .tedi-table__body .tedi-table__row--sub-row>.tedi-table__cell--sticky-right{background:var(--table-striped)}.tedi-table--sticky-last-column.tedi-table--striped .tedi-table__body .tedi-table__row:nth-of-type(2n)>.tedi-table__cell--sticky-right{background:var(--table-striped)}.tedi-table--sticky-last-column .tedi-table__body .tedi-table__row--picked-up>.tedi-table__cell--sticky-right{background:var(--table-hover)}.tedi-table--sticky-last-column.tedi-table--striped .tedi-table__body .tedi-table__row--picked-up:nth-of-type(2n)>.tedi-table__cell--sticky-right{background:var(--table-hover)}.tedi-table--sticky-last-column .tedi-table__head .tedi-table__header-cell--picked-up.tedi-table__cell--sticky-right{background:var(--table-hover)}.tedi-table--sticky-last-column .tedi-table__row--clickable:focus-visible>.tedi-table__cell--sticky-right{box-shadow:inset 0 var(--tedi-borders-02) 0 var(--tedi-primary-500),inset 0 calc(var(--tedi-borders-02) * -1) 0 var(--tedi-primary-500)}.tedi-table--sticky-last-column .tedi-table__row--clickable:focus-visible>.tedi-table__cell--sticky-right-start{box-shadow:inset calc(var(--tedi-borders-02) * -1) 0 0 var(--tedi-primary-500),inset 0 var(--tedi-borders-02) 0 var(--tedi-primary-500),inset 0 calc(var(--tedi-borders-02) * -1) 0 var(--tedi-primary-500)}.tedi-table--sticky-last-column .tedi-table__row--clickable:focus-visible>.tedi-table__cell--sticky-right-edge{box-shadow:inset 1px 0 0 var(--table-border),inset 0 var(--tedi-borders-02) 0 var(--tedi-primary-500),inset 0 calc(var(--tedi-borders-02) * -1) 0 var(--tedi-primary-500)}.tedi-table--sticky-last-column .tedi-table__row--clickable:focus-visible>.tedi-table__cell--sticky-right-start.tedi-table__cell--sticky-right-edge{box-shadow:inset 1px 0 0 var(--table-border),inset calc(var(--tedi-borders-02) * -1) 0 0 var(--tedi-primary-500),inset 0 var(--tedi-borders-02) 0 var(--tedi-primary-500),inset 0 calc(var(--tedi-borders-02) * -1) 0 var(--tedi-primary-500)}.tedi-table--sticky-header .tedi-table__head{border-bottom:0}.tedi-table--sticky-header .tedi-table__head .tedi-table__row{position:sticky;top:0;z-index:2;background:var(--table-default)}.tedi-table--sticky-header .tedi-table__head .tedi-table__header-cell{position:sticky;top:0;z-index:2;background:var(--table-default);border-bottom:0;box-shadow:inset 0 -1px 0 var(--table-border-th)}.tedi-table--sticky-header.tedi-table--sticky-first-column .tedi-table__head .tedi-table__header-cell.tedi-table__cell--sticky-left{z-index:3}.tedi-table--sticky-header.tedi-table--sticky-first-column .tedi-table__head .tedi-table__header-cell.tedi-table__cell--sticky-left-edge{box-shadow:inset -1px 0 0 var(--table-border),inset 0 -1px 0 var(--table-border-th)}.tedi-table--sticky-header.tedi-table--sticky-last-column .tedi-table__head .tedi-table__header-cell.tedi-table__cell--sticky-right{z-index:3}.tedi-table--sticky-header.tedi-table--sticky-last-column .tedi-table__head .tedi-table__header-cell.tedi-table__cell--sticky-right-edge{box-shadow:inset 1px 0 0 var(--table-border),inset 0 -1px 0 var(--table-border-th)}.tedi-table--sticky-header .tedi-table__scroll--shadow-header .tedi-table__head .tedi-table__row:after{position:absolute;top:100%;right:0;left:0;height:var(--tedi-dimensions-03);pointer-events:none;content:\"\";background:linear-gradient(to bottom,var(--tedi-alpha-10),transparent)}.tedi-table--fixed-layout .tedi-table__table{table-layout:fixed}.tedi-table__drag-handle{display:inline-flex;align-items:center;justify-content:center;padding:2px;color:var(--general-text-tertiary);cursor:grab;background:transparent;border:0;border-radius:var(--button-radius-sm)}.tedi-table__drag-handle:hover{color:var(--general-text-primary);background:var(--button-main-neutral-icon-only-background-hover)}.tedi-table__drag-handle:focus-visible{outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:0}.tedi-table__drag-handle.cdk-drag-disabled{color:var(--general-text-disabled);cursor:not-allowed}.tedi-table__drag-handle--picked-up{color:var(--tedi-primary-500);cursor:grabbing}.cdk-drag-preview .tedi-table__drag-handle,.cdk-drop-list-dragging .tedi-table__drag-handle{cursor:grabbing}.cdk-drag-preview.tedi-table__row,.cdk-drag-preview.tedi-table__header-cell{display:table;cursor:grabbing;background:var(--table-hover);border:var(--tedi-borders-01) solid var(--card-border-primary);border-radius:var(--table-radius);box-shadow:0 6px 16px var(--tedi-alpha-20)}.cdk-drag-preview.tedi-table__row>.tedi-table__cell{background:var(--table-hover)}.cdk-drag-placeholder.tedi-table__row,.cdk-drag-placeholder.tedi-table__header-cell{opacity:.3}.cdk-drop-list-dragging .tedi-table__row:not(.cdk-drag-placeholder),.cdk-drop-list-dragging .tedi-table__header-cell:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.tedi-table__filter{display:flex;flex-direction:column;gap:var(--tedi-dimensions-12);width:100%}.tedi-table__filter-actions{display:flex;gap:var(--button-gutter-x-sm)}.tedi-table__filter-actions>*{flex:1 1 0;justify-content:center}.tedi-table .tedi-table__head .tedi-table__header-cell--picked-up{cursor:grabbing;background:var(--table-hover)}\n"] }]
|
|
14924
|
+
], template: "<ng-content select=\"tedi-table-toolbar\" />\n<ng-content select=\"tedi-table-columns-menu\" />\n\n<!-- Live region for screen-reader announcements during keyboard reordering -->\n@if (reorderableColumns() || reorderableRows()) {\n <div\n [id]=\"liveRegionId\"\n aria-live=\"polite\"\n aria-atomic=\"true\"\n class=\"sr-only\"\n ></div>\n}\n\n@if (resolvedTopSlot(); as top) {\n <div class=\"tedi-table__pagination tedi-table__pagination--top\">\n <tedi-pagination\n [pageCount]=\"paginationPageCount()\"\n [page]=\"paginationPage()\"\n [totalItems]=\"paginationTotalItems()\"\n [pageSize]=\"paginationPageSize()\"\n [pageSizeOptions]=\"paginationPageSizeOptions()\"\n [boundaryCount]=\"top.boundaryCount\"\n [siblingCount]=\"top.siblingCount\"\n [labels]=\"top.labels\"\n [background]=\"top.background\"\n [align]=\"top.align\"\n [dividerPosition]=\"top.dividerPosition\"\n [hideResults]=\"top.hideResults\"\n [hidePageSize]=\"top.hidePageSize\"\n [hidePager]=\"top.hidePager\"\n [hideArrows]=\"top.hideArrows\"\n [disableArrowsAtBoundary]=\"top.disableArrowsAtBoundary\"\n [arrowVariant]=\"top.arrowVariant\"\n [showArrowLabels]=\"top.showArrowLabels\"\n [previousIcon]=\"top.previousIcon\"\n [nextIcon]=\"top.nextIcon\"\n [showModalTitle]=\"top.showModalTitle\"\n [xs]=\"top.xs\"\n [sm]=\"top.sm\"\n [md]=\"top.md\"\n [lg]=\"top.lg\"\n [xl]=\"top.xl\"\n [xxl]=\"top.xxl\"\n (pageChange)=\"handlePaginationPageChange($event)\"\n (pageSizeChange)=\"handlePaginationPageSizeChange($event)\"\n >\n @if (topResultsTemplate(); as tpl) {\n <span tediPaginationResults>\n <ng-container *ngTemplateOutlet=\"tpl\" />\n </span>\n }\n </tedi-pagination>\n </div>\n}\n\n<div\n #scrollContainer\n class=\"tedi-table__scroll\"\n [class.tedi-table__scroll--shadow-start]=\"hasStartShadow()\"\n [class.tedi-table__scroll--shadow-end]=\"hasEndShadow()\"\n [class.tedi-table__scroll--shadow-header]=\"hasHeaderShadow()\"\n [attr.style]=\"maxHeightStyle()\"\n cdkScrollable\n tabindex=\"0\"\n role=\"group\"\n [attr.aria-label]=\"scrollRegionLabel()\"\n (scroll)=\"onHorizontalScroll()\"\n>\n <table\n #tableElement\n class=\"tedi-table__table\"\n [attr.id]=\"id() || null\"\n [attr.aria-label]=\"ariaLabel() || null\"\n [attr.aria-labelledby]=\"ariaLabelledby() || null\"\n [attr.aria-rowcount]=\"ariaRowCount()\"\n [attr.aria-colcount]=\"leafColumnCount() > 0 ? leafColumnCount() : null\"\n >\n @if (caption(); as cap) {\n <caption class=\"tedi-table__caption\">\n @if (isString(cap)) {\n {{ cap }}\n } @else {\n <ng-container *ngTemplateOutlet=\"$any(cap)\" />\n }\n </caption>\n }\n\n <thead class=\"tedi-table__head\">\n @for (\n headerGroup of headerGroups();\n track headerGroup.id;\n let rowIndex = $index\n ) {\n <tr\n class=\"tedi-table__row\"\n [attr.aria-rowindex]=\"ariaRowIndexingEnabled() ? rowIndex + 1 : null\"\n [cdkDropListDisabled]=\"!reorderableColumns() || rowIndex > 0\"\n cdkDropList\n cdkDropListOrientation=\"horizontal\"\n cdkDropListAutoScrollDisabled\n (cdkDropListDropped)=\"handleColumnDrop($event)\"\n >\n @for (header of headerGroup.headers; track header.id) {\n @if (shouldRenderHeader(header, rowIndex)) {\n @let meta = getColumnMeta(header.column);\n @let ariaSort = getHeaderAriaSort(header.column);\n @let srHeaderLabel = getSrOnlyHeaderLabel(header.column);\n @let rowSpan = getHeaderRowSpan(header, rowIndex);\n @let headerAlign = meta?.headerAlign ?? meta?.align;\n <th\n scope=\"col\"\n cdkDrag\n [cdkDragDisabled]=\"\n !reorderableColumns() ||\n rowIndex > 0 ||\n header.column.id === SELECT_COLUMN_ID ||\n header.column.id === EXPAND_COLUMN_ID\n \"\n cdkDragLockAxis=\"x\"\n (keydown)=\"handleHeaderKeydown($event, header)\"\n [class]=\"\n 'tedi-table__header-cell' +\n (isHeaderGroup(header)\n ? ' tedi-table__header-cell--group'\n : '') +\n (headerAlign\n ? ' tedi-table__cell--align-' + headerAlign\n : '') +\n (meta?.vAlign\n ? ' tedi-table__cell--valign-' + meta?.vAlign\n : '') +\n (pickedUpColumnId() === header.column.id\n ? ' tedi-table__header-cell--picked-up'\n : '') +\n controlCellClass(header.column.id) +\n stickyLeftClass(header.column.id) +\n stickyRightClass(header.column.id)\n \"\n [attr.colspan]=\"header.colSpan > 1 ? header.colSpan : null\"\n [attr.rowspan]=\"rowSpan\"\n [attr.aria-sort]=\"ariaSort\"\n [style.width.px]=\"headerCellWidth(header.column)\"\n [style.min-width.px]=\"columnMinWidth(header.column)\"\n [style.max-width.px]=\"columnMaxWidth(header.column)\"\n [style.left.px]=\"stickyLeft(header.column.id)\"\n [style.right.px]=\"stickyRight(header.column.id)\"\n >\n @if (srHeaderLabel) {\n <span class=\"sr-only\">{{ srHeaderLabel }}</span>\n }\n @if (header.column.id === SELECT_COLUMN_ID) {\n @if (selectionMode() === \"multiple\") {\n <input\n tedi-checkbox\n type=\"checkbox\"\n [id]=\"resolvedId() + '-select-all'\"\n [name]=\"resolvedId() + '-select-all'\"\n [attr.aria-label]=\"selectAllLabel()\"\n [checked]=\"isAllPageRowsSelected()\"\n [indeterminate]=\"\n isSomePageRowsSelected() && !isAllPageRowsSelected()\n \"\n (change)=\"handleSelectAll($any($event.target).checked)\"\n />\n }\n } @else if (header.column.id === EXPAND_COLUMN_ID) {\n <!-- empty -->\n } @else if (header.column.id === DRAG_COLUMN_ID) {\n <!-- empty -->\n } @else {\n <span class=\"tedi-table__header-content\">\n @if (\n reorderableColumns() &&\n rowIndex === 0 &&\n !isHeaderGroup(header)\n ) {\n <button\n type=\"button\"\n cdkDragHandle\n class=\"tedi-table__drag-handle\"\n [class.tedi-table__drag-handle--picked-up]=\"\n pickedUpColumnId() === header.column.id\n \"\n [id]=\"reorderHandleId(header.column.id)\"\n [attr.aria-label]=\"dragColumnLabel()\"\n [attr.aria-pressed]=\"\n reorderableColumns()\n ? pickedUpColumnId() === header.column.id\n : null\n \"\n >\n <tedi-icon\n name=\"drag_indicator\"\n [size]=\"18\"\n color=\"inherit\"\n />\n </button>\n }\n <ng-container\n *flexRender=\"\n header.column.columnDef.header;\n props: header.getContext();\n let content\n \"\n >\n @if (shouldRenderSortableHeader(header.column, content)) {\n <button\n tedi-table-header-button\n [icon]=\"sortIcon(header.column)\"\n [selected]=\"!!header.column.getIsSorted()\"\n (click)=\"handleSortToggle(header.column)\"\n >\n {{ content }}\n </button>\n } @else if (isString(content) || isNumber(content)) {\n {{ content }}\n } @else {\n {{ content }}\n }\n </ng-container>\n @if (shouldRenderFilterButton(header.column)) {\n @if (filterUsesModal()) {\n <button\n tedi-table-header-button\n icon=\"filter_alt\"\n [selected]=\"filterIsActive(header.column)\"\n [filled]=\"filterIsActive(header.column)\"\n [aria-label]=\"filterAriaLabel(header.column)\"\n (click)=\"openFilterModal(header.column)\"\n ></button>\n } @else {\n <tedi-popover\n #filterPopover\n class=\"tedi-table__filter-popover\"\n position=\"bottom-end\"\n [preventOverflow]=\"true\"\n >\n <button\n tedi-popover-trigger\n tedi-table-header-button\n icon=\"filter_alt\"\n [selected]=\"filterIsActive(header.column)\"\n [filled]=\"filterIsActive(header.column)\"\n [aria-label]=\"filterAriaLabel(header.column)\"\n (click)=\"handleFilterTriggerClick(header.column)\"\n ></button>\n <tedi-popover-content\n [maxWidth]=\"filterPopoverWidthFor(header.column)\"\n >\n <div class=\"tedi-table__filter\">\n <div class=\"tedi-table__filter-body\">\n @if (filterTemplateFor(header.column); as tpl) {\n <ng-container\n *ngTemplateOutlet=\"\n tpl;\n context: filterContextFor(\n header.column,\n filterPopover\n )\n \"\n />\n }\n </div>\n <div class=\"tedi-table__filter-actions\">\n <button\n tedi-button\n variant=\"secondary\"\n size=\"small\"\n type=\"button\"\n (click)=\"\n handleFilterClear(\n header.column,\n filterPopover\n )\n \"\n >\n {{ filterClearLabel() }}\n </button>\n <button\n tedi-button\n variant=\"primary\"\n size=\"small\"\n type=\"button\"\n (click)=\"\n handleFilterApply(\n header.column,\n filterPopover\n )\n \"\n >\n {{ filterApplyLabel() }}\n </button>\n </div>\n </div>\n </tedi-popover-content>\n </tedi-popover>\n }\n }\n </span>\n }\n </th>\n }\n }\n </tr>\n }\n @if (enableColumnFilters()) {\n <tr\n class=\"tedi-table__row tedi-table__row--filter\"\n [attr.aria-rowindex]=\"\n ariaRowIndexingEnabled() ? headerGroups().length + 1 : null\n \"\n >\n @for (column of leafColumns(); track column.id) {\n @let filterId = resolvedId() + \"-filter-\" + column.id;\n <th class=\"tedi-table__header-cell\" scope=\"col\">\n @if (column.getCanFilter()) {\n <tedi-form-field size=\"small\">\n <input\n tedi-text-field\n type=\"text\"\n [id]=\"filterId\"\n [name]=\"filterId\"\n [attr.aria-label]=\"filterLabel(column)\"\n [placeholder]=\"filterPlaceholder()\"\n [value]=\"getFilterValue(column)\"\n (input)=\"\n handleColumnFilter(column, $any($event.target).value)\n \"\n (clear)=\"handleColumnFilter(column, '')\"\n />\n </tedi-form-field>\n }\n </th>\n }\n </tr>\n }\n </thead>\n\n <tbody\n class=\"tedi-table__body\"\n cdkDropList\n [cdkDropListDisabled]=\"!reorderableRows()\"\n (cdkDropListDropped)=\"handleRowDrop($any($event))\"\n >\n @if (rows().length === 0) {\n <tr class=\"tedi-table__row\">\n <td\n class=\"tedi-table__cell tedi-table__cell--placeholder\"\n [attr.colspan]=\"leafColumnCount() > 0 ? leafColumnCount() : 1\"\n >\n @if (placeholder(); as pl) {\n @if (placeholderRole()) {\n <div [attr.role]=\"placeholderRole()\">\n @if (isString(pl)) {\n {{ pl }}\n } @else {\n <ng-container *ngTemplateOutlet=\"$any(pl)\" />\n }\n </div>\n } @else {\n @if (isString(pl)) {\n {{ pl }}\n } @else {\n <ng-container *ngTemplateOutlet=\"$any(pl)\" />\n }\n }\n } @else {\n @if (placeholderRole()) {\n <div [attr.role]=\"placeholderRole()\">\n {{ placeholderLabel() }}\n </div>\n } @else {\n {{ placeholderLabel() }}\n }\n }\n </td>\n </tr>\n } @else {\n @for (row of rows(); track row.id) {\n @let isActiveRow =\n activeRowId() !== undefined && row.id === activeRowId();\n @let ariaRowIndex = rowAriaIndexById().get(row.id) ?? null;\n @let subRowId = resolvedId() + \"-sub-\" + row.id;\n @let expandsOnClick = rowExpandsOnClick(row);\n <tr\n cdkDrag\n [cdkDragDisabled]=\"!reorderableRows()\"\n cdkDragLockAxis=\"y\"\n [class]=\"\n 'tedi-table__row' +\n (this.selectedRowHighlight() && row.getIsSelected()\n ? ' tedi-table__row--selected'\n : '') +\n (isActiveRow ? ' tedi-table__row--active' : '') +\n (interactive() || expandsOnClick\n ? ' tedi-table__row--clickable'\n : '') +\n (row.depth > 0 ? ' tedi-table__row--sub-row' : '') +\n (groupStartRowIds().has(row.id)\n ? ' tedi-table__row--group-start'\n : '') +\n (pickedUpRow() === row.original\n ? ' tedi-table__row--picked-up'\n : '')\n \"\n [attr.role]=\"\n interactive() && !rowHasNestedInteractive(row) ? 'button' : null\n \"\n [attr.tabindex]=\"interactive() ? 0 : null\"\n [attr.aria-label]=\"rowAriaLabelFor(row)\"\n [attr.aria-rowindex]=\"ariaRowIndex\"\n [attr.aria-current]=\"isActiveRow ? 'true' : null\"\n (click)=\"\n (interactive() || expandsOnClick) && handleRowClick($event, row)\n \"\n (keydown)=\"handleRowKeydown($event, row)\"\n (mouseenter)=\"handleRowMouseEnter(row)\"\n (mouseleave)=\"handleRowMouseLeave()\"\n >\n @for (cell of row.getVisibleCells(); track cell.id) {\n @let cellMeta = getColumnMeta(cell.column);\n @let cellContext = cell.getContext();\n @let resolvedSpan = resolveRowSpan(cell, cellContext);\n @if (resolvedSpan !== 0) {\n <td\n [class]=\"\n 'tedi-table__cell' +\n (cellMeta?.align\n ? ' tedi-table__cell--align-' + cellMeta?.align\n : '') +\n (cellMeta?.vAlign\n ? ' tedi-table__cell--valign-' + cellMeta?.vAlign\n : '') +\n controlCellClass(cell.column.id) +\n stickyLeftClass(cell.column.id) +\n stickyRightClass(cell.column.id)\n \"\n [style.left.px]=\"stickyLeft(cell.column.id)\"\n [style.right.px]=\"stickyRight(cell.column.id)\"\n [attr.rowspan]=\"\n resolvedSpan !== null && resolvedSpan > 1\n ? resolvedSpan\n : null\n \"\n >\n @if (cell.column.id === DRAG_COLUMN_ID) {\n <button\n type=\"button\"\n cdkDragHandle\n class=\"tedi-table__drag-handle\"\n [class.tedi-table__drag-handle--picked-up]=\"\n pickedUpRow() === row.original\n \"\n [id]=\"rowReorderHandleId(row.id)\"\n [attr.aria-label]=\"dragRowLabel()\"\n [attr.aria-pressed]=\"\n reorderableRows()\n ? pickedUpRow() === row.original\n : null\n \"\n (click)=\"$event.stopPropagation()\"\n (keydown)=\"handleRowReorderKeydown($event, row)\"\n >\n <tedi-icon\n name=\"drag_indicator\"\n [size]=\"18\"\n color=\"inherit\"\n />\n </button>\n } @else if (cell.column.id === SELECT_COLUMN_ID) {\n @if (selectionMode() === \"multiple\") {\n <input\n tedi-checkbox\n type=\"checkbox\"\n [id]=\"resolvedId() + '-select-' + row.id\"\n [name]=\"resolvedId() + '-select-' + row.id\"\n [attr.aria-label]=\"selectRowLabel(row)\"\n [checked]=\"isRowSelected(row)\"\n [disabled]=\"!row.getCanSelect()\"\n [indeterminate]=\"isRowIndeterminate(row)\"\n (change)=\"\n handleSelectRow(row, $any($event.target).checked)\n \"\n (click)=\"$event.stopPropagation()\"\n />\n } @else {\n <input\n tedi-radio\n type=\"radio\"\n [id]=\"resolvedId() + '-select-' + row.id\"\n [name]=\"resolvedId() + '-select-row'\"\n [attr.aria-label]=\"selectRowLabel(row)\"\n [checked]=\"row.getIsSelected()\"\n [disabled]=\"!row.getCanSelect()\"\n (change)=\"\n handleSelectRow(row, $any($event.target).checked)\n \"\n (click)=\"$event.stopPropagation()\"\n />\n }\n } @else if (cell.column.id === EXPAND_COLUMN_ID) {\n <span\n class=\"tedi-table__expand-toggle\"\n [class.tedi-table__expand-toggle--icon-only]=\"\n !expandButtonHasLabel()\n \"\n >\n @if (row.getCanExpand()) {\n @let expandOpen = row.getIsExpanded();\n <button\n tedi-collapse-button\n [arrowType]=\"resolvedExpandVariant()\"\n [hideText]=\"!expandButtonHasLabel()\"\n [openText]=\"expandButtonOpenText()\"\n [closeText]=\"expandButtonCloseText()\"\n [open]=\"expandOpen\"\n [id]=\"resolvedId() + '-expand-' + row.id\"\n [ariaControls]=\"\n renderSubComponent() ? subRowId : undefined\n \"\n [ariaLabel]=\"\n expandButtonHasLabel()\n ? undefined\n : expandRowLabel(expandOpen)\n \"\n (openChange)=\"handleExpandToggle(row)\"\n (click)=\"$event.stopPropagation()\"\n (keydown)=\"handleExpandKeydown($event)\"\n ></button>\n }\n </span>\n } @else {\n <ng-container\n *flexRender=\"\n cell.column.columnDef.cell;\n props: cellContext;\n let content\n \"\n >\n {{ content }}\n </ng-container>\n }\n </td>\n }\n }\n </tr>\n @if (renderSubComponent(); as subTpl) {\n @if (row.getCanExpand()) {\n @let isExpanded = row.getIsExpanded();\n <tr\n [class]=\"\n 'tedi-table__row tedi-table__row--sub-component' +\n (isExpanded ? ' tedi-table__row--sub-component-open' : '')\n \"\n >\n <!-- No region role: one landmark per open row would pile up\n (axe landmark-unique). The toggle's aria-controls points here. -->\n <td\n class=\"tedi-table__cell tedi-table__cell--sub-component\"\n [attr.id]=\"subRowId\"\n [attr.inert]=\"isExpanded ? null : ''\"\n [attr.colspan]=\"leafColumnCount() > 0 ? leafColumnCount() : 1\"\n >\n <div class=\"tedi-table__sub-component-wrapper\">\n <div class=\"tedi-table__sub-component-content\">\n <div class=\"tedi-table__sub-component-inner\">\n <ng-container\n *ngTemplateOutlet=\"\n subTpl;\n context: { $implicit: row }\n \"\n />\n </div>\n </div>\n </div>\n </td>\n </tr>\n }\n }\n }\n }\n </tbody>\n\n @if (hasFooter()) {\n <tfoot class=\"tedi-table__foot\">\n @for (group of footerGroups(); track group.id) {\n <tr class=\"tedi-table__row\">\n @for (header of group.headers; track header.id) {\n @let footerMeta = getColumnMeta(header.column);\n <td\n [class]=\"\n 'tedi-table__cell tedi-table__cell--footer' +\n (footerMeta?.align\n ? ' tedi-table__cell--align-' + footerMeta?.align\n : '') +\n (footerMeta?.vAlign\n ? ' tedi-table__cell--valign-' + footerMeta?.vAlign\n : '')\n \"\n [attr.colspan]=\"header.colSpan > 1 ? header.colSpan : null\"\n >\n @if (!header.isPlaceholder) {\n <ng-container\n *flexRender=\"\n header.column.columnDef.footer;\n props: header.getContext();\n let content\n \"\n >\n {{ content }}\n </ng-container>\n }\n </td>\n }\n </tr>\n }\n </tfoot>\n }\n </table>\n</div>\n\n@if (resolvedBottomSlot(); as bottom) {\n <div class=\"tedi-table__pagination tedi-table__pagination--bottom\">\n <tedi-pagination\n [pageCount]=\"paginationPageCount()\"\n [page]=\"paginationPage()\"\n [totalItems]=\"paginationTotalItems()\"\n [pageSize]=\"paginationPageSize()\"\n [pageSizeOptions]=\"paginationPageSizeOptions()\"\n [boundaryCount]=\"bottom.boundaryCount\"\n [siblingCount]=\"bottom.siblingCount\"\n [labels]=\"bottom.labels\"\n [background]=\"bottom.background\"\n [align]=\"bottom.align\"\n [dividerPosition]=\"bottom.dividerPosition\"\n [hideResults]=\"bottom.hideResults\"\n [hidePageSize]=\"bottom.hidePageSize\"\n [hidePager]=\"bottom.hidePager\"\n [hideArrows]=\"bottom.hideArrows\"\n [disableArrowsAtBoundary]=\"bottom.disableArrowsAtBoundary\"\n [arrowVariant]=\"bottom.arrowVariant\"\n [showArrowLabels]=\"bottom.showArrowLabels\"\n [previousIcon]=\"bottom.previousIcon\"\n [nextIcon]=\"bottom.nextIcon\"\n [showModalTitle]=\"bottom.showModalTitle\"\n [xs]=\"bottom.xs\"\n [sm]=\"bottom.sm\"\n [md]=\"bottom.md\"\n [lg]=\"bottom.lg\"\n [xl]=\"bottom.xl\"\n [xxl]=\"bottom.xxl\"\n (pageChange)=\"handlePaginationPageChange($event)\"\n (pageSizeChange)=\"handlePaginationPageSizeChange($event)\"\n >\n @if (bottomResultsTemplate(); as tpl) {\n <span tediPaginationResults>\n <ng-container *ngTemplateOutlet=\"tpl\" />\n </span>\n }\n </tedi-pagination>\n </div>\n}\n", styles: [".tedi-table{display:flex;flex-direction:column;gap:var(--tedi-dimensions-10);width:100%}.tedi-table__scroll{overflow-x:auto;background:var(--table-default);border:var(--tedi-borders-01) solid var(--table-border);border-radius:var(--table-radius)}.tedi-table__table{width:100%;font-size:var(--body-regular-size);line-height:var(--body-regular-line-height);color:var(--general-text-primary);border-spacing:0;border-collapse:collapse;background:var(--table-default)}.tedi-table__caption{padding:var(--tedi-dimensions-10) var(--table-header-padding-x);font-weight:var(--body-regular-weight);color:var(--general-text-primary);text-align:left;caption-side:top}.tedi-table__head{background:var(--table-default)}.tedi-table__header-cell{padding:var(--table-header-padding-y) var(--table-header-padding-x);font-size:var(--body-regular-size);font-weight:var(--body-regular-weight);color:var(--general-text-tertiary);text-align:left;white-space:nowrap;background:var(--table-default);border-bottom:1px solid var(--table-border-th)}.tedi-table__header-content{display:inline-flex;gap:var(--layout-grid-gutters-04);align-items:center}.tedi-table__filter-popover{display:inline-flex;align-items:center}.tedi-table__body .tedi-table__row>.tedi-table__cell{border-bottom:var(--tedi-borders-01) solid var(--table-border)}.tedi-table__body .tedi-table__row:last-child>.tedi-table__cell{border-bottom:0}.tedi-table--group-dividers-between>:where(.tedi-table__scroll)>:where(.tedi-table__table)>.tedi-table__body>.tedi-table__row>.tedi-table__cell{border-bottom:0}.tedi-table--group-dividers-between>:where(.tedi-table__scroll)>:where(.tedi-table__table)>.tedi-table__body>.tedi-table__row--group-start>.tedi-table__cell{border-top:var(--tedi-borders-01) solid var(--table-border)}.tedi-table--group-dividers-none>:where(.tedi-table__scroll)>:where(.tedi-table__table)>.tedi-table__body>.tedi-table__row>.tedi-table__cell{border-bottom:0}.tedi-table__cell{padding:var(--table-data-padding-y) var(--table-data-padding-x);vertical-align:middle;color:var(--general-text-primary);background:var(--table-default)}.tedi-table__cell--control{padding-right:var(--table-data-padding-x-sm);padding-left:var(--table-data-padding-x-sm)}.tedi-table__cell--control-fit{width:1%;white-space:nowrap}.tedi-table__cell--align-left{text-align:left}.tedi-table__cell--align-center{text-align:center}.tedi-table__cell--align-right{text-align:right}.tedi-table__cell--valign-top{vertical-align:top}.tedi-table__cell--valign-middle{vertical-align:middle}.tedi-table__cell--valign-bottom{vertical-align:bottom}.tedi-table__expand-toggle{display:flex;align-items:center}.tedi-table__expand-toggle--icon-only{min-height:var(--button-sm-icon-size)}.tedi-table__cell--placeholder{padding:var(--tedi-dimensions-14) var(--table-data-padding-x);color:var(--general-text-secondary);text-align:center}.tedi-table--small>:where(.tedi-table__scroll)>:where(.tedi-table__table)>*>*>.tedi-table__header-cell{padding:var(--table-header-padding-y-sm) var(--table-header-padding-x-sm)}.tedi-table--small>:where(.tedi-table__scroll)>:where(.tedi-table__table)>*>*>.tedi-table__cell{padding:var(--table-data-padding-y-sm) var(--table-data-padding-x-sm)}.tedi-table__foot{font-weight:var(--heading-weight);background:var(--table-default)}.tedi-table__cell--footer{color:var(--general-text-primary);border-top:var(--tedi-borders-01) solid var(--table-border-th)}.tedi-table__row--selected>.tedi-table__cell{background:var(--table-active)}.tedi-table__row--clickable{cursor:pointer}.tedi-table__row--clickable:focus-visible{outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:calc(var(--tedi-borders-02) * -1);background:transparent;border-color:transparent}.tedi-table__body .tedi-table__row--sub-component>.tedi-table__cell{background:var(--table-striped);border-bottom:0}.tedi-table__body .tedi-table__row--sub-component-open>.tedi-table__cell{border-bottom:var(--tedi-borders-01) solid var(--table-border)}.tedi-table__row--sub-row>.tedi-table__cell{background:var(--table-striped)}.tedi-table__cell--sub-component{padding:0}.tedi-table__sub-component-wrapper{display:grid;grid-template-rows:0fr}.tedi-table__row--sub-component-open>.tedi-table__cell--sub-component>.tedi-table__sub-component-wrapper{grid-template-rows:1fr}.tedi-table__sub-component-content{min-height:0;overflow:hidden}.tedi-table__sub-component-inner{padding:var(--table-data-padding-y) var(--table-data-padding-x)}.tedi-table__row--filter{background:var(--general-surface-primary)}.tedi-table__row--filter .tedi-table__header-cell{padding-top:var(--tedi-dimensions-05);padding-bottom:var(--tedi-dimensions-05);font-weight:var(--body-regular-weight);background:var(--general-surface-primary)}.tedi-table--striped>:where(.tedi-table__scroll)>:where(.tedi-table__table)>.tedi-table__body>.tedi-table__row:nth-of-type(2n)>.tedi-table__cell{background:var(--table-striped)}.tedi-table.tedi-table--row-hover>:where(.tedi-table__scroll)>:where(.tedi-table__table)>.tedi-table__body>.tedi-table__row:hover>.tedi-table__cell{background:var(--table-hover)}.tedi-table .tedi-table__body .tedi-table__row.tedi-table__row--active>.tedi-table__cell,.tedi-table .tedi-table__body .tedi-table__row.tedi-table__row--active:hover>.tedi-table__cell{background:var(--table-hover)}.tedi-table .tedi-table__body .tedi-table__row.tedi-table__row--picked-up>.tedi-table__cell{background:var(--table-hover)}.tedi-table--vertical-borders>:where(.tedi-table__scroll)>:where(.tedi-table__table)>*>*>.tedi-table__header-cell,.tedi-table--vertical-borders>:where(.tedi-table__scroll)>:where(.tedi-table__table)>*>*>.tedi-table__cell{border-right:var(--tedi-borders-01) solid var(--table-border)}.tedi-table--vertical-borders>:where(.tedi-table__scroll)>:where(.tedi-table__table)>thead>tr:first-child>.tedi-table__header-cell:last-child,.tedi-table--vertical-borders>:where(.tedi-table__scroll)>:where(.tedi-table__table)>*>.tedi-table__row>.tedi-table__cell:last-child{border-right:0}.tedi-table--borderless>.tedi-table__scroll{background:transparent;border:0;border-radius:0}.tedi-table--has-pagination{gap:0}.tedi-table--has-pagination-bottom>.tedi-table__scroll{border-bottom:0;border-bottom-right-radius:0;border-bottom-left-radius:0}.tedi-table--has-pagination-top>.tedi-table__scroll{border-top:0;border-top-left-radius:0;border-top-right-radius:0}.tedi-table__pagination{overflow:hidden;border:var(--tedi-borders-01) solid var(--table-border)}.tedi-table__pagination--bottom{border-top:0;border-bottom-right-radius:var(--table-radius);border-bottom-left-radius:var(--table-radius)}.tedi-table__pagination--top{border-bottom:0;border-top-left-radius:var(--table-radius);border-top-right-radius:var(--table-radius)}.tedi-table--borderless>.tedi-table__pagination{background:transparent;border:0}.tedi-table--sticky-first-column>:where(.tedi-table__scroll)>:where(.tedi-table__table)>*>*>.tedi-table__header-cell.tedi-table__cell--sticky-left{position:sticky;z-index:2;background:var(--table-default)}.tedi-table--sticky-first-column>:where(.tedi-table__scroll)>:where(.tedi-table__table)>*>*>.tedi-table__cell--sticky-left{position:sticky;z-index:1;background:var(--table-default)}.tedi-table--sticky-first-column>:where(.tedi-table__scroll)>:where(.tedi-table__table)>*>*>.tedi-table__cell--sticky-left-edge{box-shadow:inset -1px 0 0 var(--table-border)}.tedi-table--sticky-first-column>:where(.tedi-table__scroll)>:where(.tedi-table__table)>*>*>.tedi-table__cell--sticky-left-edge:after{position:absolute;top:0;bottom:0;left:100%;width:var(--tedi-dimensions-03);pointer-events:none;content:\"\"}.tedi-table--sticky-first-column>.tedi-table__scroll--shadow-start>:where(.tedi-table__table)>*>*>.tedi-table__cell--sticky-left-edge:after{background:linear-gradient(to right,var(--tedi-alpha-10),transparent)}.tedi-table--sticky-first-column>:where(.tedi-table__scroll)>:where(.tedi-table__table)>.tedi-table__body>.tedi-table__row--sub-row>.tedi-table__cell--sticky-left{background:var(--table-striped)}.tedi-table--sticky-first-column.tedi-table--striped>:where(.tedi-table__scroll)>:where(.tedi-table__table)>.tedi-table__body>.tedi-table__row:nth-of-type(2n)>.tedi-table__cell--sticky-left{background:var(--table-striped)}.tedi-table--sticky-first-column>:where(.tedi-table__scroll)>:where(.tedi-table__table)>.tedi-table__body>.tedi-table__row--picked-up>.tedi-table__cell--sticky-left{background:var(--table-hover)}.tedi-table--sticky-first-column.tedi-table--striped>:where(.tedi-table__scroll)>:where(.tedi-table__table)>.tedi-table__body>.tedi-table__row--picked-up:nth-of-type(2n)>.tedi-table__cell--sticky-left{background:var(--table-hover)}.tedi-table--sticky-first-column>:where(.tedi-table__scroll)>:where(.tedi-table__table)>.tedi-table__head>*>.tedi-table__header-cell--picked-up.tedi-table__cell--sticky-left{background:var(--table-hover)}.tedi-table--sticky-first-column>:where(.tedi-table__scroll)>:where(.tedi-table__table)>*>.tedi-table__row--clickable:focus-visible>.tedi-table__cell--sticky-left{box-shadow:inset 0 var(--tedi-borders-02) 0 var(--tedi-primary-500),inset 0 calc(var(--tedi-borders-02) * -1) 0 var(--tedi-primary-500)}.tedi-table--sticky-first-column>:where(.tedi-table__scroll)>:where(.tedi-table__table)>*>.tedi-table__row--clickable:focus-visible>.tedi-table__cell--sticky-left-start{box-shadow:inset var(--tedi-borders-02) 0 0 var(--tedi-primary-500),inset 0 var(--tedi-borders-02) 0 var(--tedi-primary-500),inset 0 calc(var(--tedi-borders-02) * -1) 0 var(--tedi-primary-500)}.tedi-table--sticky-first-column>:where(.tedi-table__scroll)>:where(.tedi-table__table)>*>.tedi-table__row--clickable:focus-visible>.tedi-table__cell--sticky-left-edge{box-shadow:inset -1px 0 0 var(--table-border),inset 0 var(--tedi-borders-02) 0 var(--tedi-primary-500),inset 0 calc(var(--tedi-borders-02) * -1) 0 var(--tedi-primary-500)}.tedi-table--sticky-first-column>:where(.tedi-table__scroll)>:where(.tedi-table__table)>*>.tedi-table__row--clickable:focus-visible>.tedi-table__cell--sticky-left-start.tedi-table__cell--sticky-left-edge{box-shadow:inset -1px 0 0 var(--table-border),inset var(--tedi-borders-02) 0 0 var(--tedi-primary-500),inset 0 var(--tedi-borders-02) 0 var(--tedi-primary-500),inset 0 calc(var(--tedi-borders-02) * -1) 0 var(--tedi-primary-500)}.tedi-table--sticky-last-column>:where(.tedi-table__scroll)>:where(.tedi-table__table)>*>*>.tedi-table__header-cell.tedi-table__cell--sticky-right{position:sticky;z-index:2;background:var(--table-default)}.tedi-table--sticky-last-column>:where(.tedi-table__scroll)>:where(.tedi-table__table)>*>*>.tedi-table__cell--sticky-right{position:sticky;z-index:1;background:var(--table-default)}.tedi-table--sticky-last-column>:where(.tedi-table__scroll)>:where(.tedi-table__table)>*>*>.tedi-table__cell--sticky-right-edge{box-shadow:inset 1px 0 0 var(--table-border)}.tedi-table--sticky-last-column>:where(.tedi-table__scroll)>:where(.tedi-table__table)>*>*>.tedi-table__cell--sticky-right-edge:after{position:absolute;top:0;right:100%;bottom:0;width:var(--tedi-dimensions-03);pointer-events:none;content:\"\"}.tedi-table--sticky-last-column>.tedi-table__scroll--shadow-end>:where(.tedi-table__table)>*>*>.tedi-table__cell--sticky-right-edge:after{background:linear-gradient(to left,var(--tedi-alpha-10),transparent)}.tedi-table--sticky-last-column>:where(.tedi-table__scroll)>:where(.tedi-table__table)>.tedi-table__body>.tedi-table__row--sub-row>.tedi-table__cell--sticky-right{background:var(--table-striped)}.tedi-table--sticky-last-column.tedi-table--striped>:where(.tedi-table__scroll)>:where(.tedi-table__table)>.tedi-table__body>.tedi-table__row:nth-of-type(2n)>.tedi-table__cell--sticky-right{background:var(--table-striped)}.tedi-table--sticky-last-column>:where(.tedi-table__scroll)>:where(.tedi-table__table)>.tedi-table__body>.tedi-table__row--picked-up>.tedi-table__cell--sticky-right{background:var(--table-hover)}.tedi-table--sticky-last-column.tedi-table--striped>:where(.tedi-table__scroll)>:where(.tedi-table__table)>.tedi-table__body>.tedi-table__row--picked-up:nth-of-type(2n)>.tedi-table__cell--sticky-right{background:var(--table-hover)}.tedi-table--sticky-last-column>:where(.tedi-table__scroll)>:where(.tedi-table__table)>.tedi-table__head>*>.tedi-table__header-cell--picked-up.tedi-table__cell--sticky-right{background:var(--table-hover)}.tedi-table--sticky-last-column>:where(.tedi-table__scroll)>:where(.tedi-table__table)>*>.tedi-table__row--clickable:focus-visible>.tedi-table__cell--sticky-right{box-shadow:inset 0 var(--tedi-borders-02) 0 var(--tedi-primary-500),inset 0 calc(var(--tedi-borders-02) * -1) 0 var(--tedi-primary-500)}.tedi-table--sticky-last-column>:where(.tedi-table__scroll)>:where(.tedi-table__table)>*>.tedi-table__row--clickable:focus-visible>.tedi-table__cell--sticky-right-start{box-shadow:inset calc(var(--tedi-borders-02) * -1) 0 0 var(--tedi-primary-500),inset 0 var(--tedi-borders-02) 0 var(--tedi-primary-500),inset 0 calc(var(--tedi-borders-02) * -1) 0 var(--tedi-primary-500)}.tedi-table--sticky-last-column>:where(.tedi-table__scroll)>:where(.tedi-table__table)>*>.tedi-table__row--clickable:focus-visible>.tedi-table__cell--sticky-right-edge{box-shadow:inset 1px 0 0 var(--table-border),inset 0 var(--tedi-borders-02) 0 var(--tedi-primary-500),inset 0 calc(var(--tedi-borders-02) * -1) 0 var(--tedi-primary-500)}.tedi-table--sticky-last-column>:where(.tedi-table__scroll)>:where(.tedi-table__table)>*>.tedi-table__row--clickable:focus-visible>.tedi-table__cell--sticky-right-start.tedi-table__cell--sticky-right-edge{box-shadow:inset 1px 0 0 var(--table-border),inset calc(var(--tedi-borders-02) * -1) 0 0 var(--tedi-primary-500),inset 0 var(--tedi-borders-02) 0 var(--tedi-primary-500),inset 0 calc(var(--tedi-borders-02) * -1) 0 var(--tedi-primary-500)}.tedi-table--sticky-header>:where(.tedi-table__scroll)>:where(.tedi-table__table)>.tedi-table__head{border-bottom:0}.tedi-table--sticky-header>:where(.tedi-table__scroll)>:where(.tedi-table__table)>.tedi-table__head>.tedi-table__row{position:sticky;top:0;z-index:2;background:var(--table-default)}.tedi-table--sticky-header>:where(.tedi-table__scroll)>:where(.tedi-table__table)>.tedi-table__head>*>.tedi-table__header-cell{position:sticky;top:0;z-index:2;background:var(--table-default);border-bottom:0;box-shadow:inset 0 -1px 0 var(--table-border-th)}.tedi-table--sticky-header.tedi-table--sticky-first-column>:where(.tedi-table__scroll)>:where(.tedi-table__table)>.tedi-table__head>*>.tedi-table__header-cell.tedi-table__cell--sticky-left{z-index:3}.tedi-table--sticky-header.tedi-table--sticky-first-column>:where(.tedi-table__scroll)>:where(.tedi-table__table)>.tedi-table__head>*>.tedi-table__header-cell.tedi-table__cell--sticky-left-edge{box-shadow:inset -1px 0 0 var(--table-border),inset 0 -1px 0 var(--table-border-th)}.tedi-table--sticky-header.tedi-table--sticky-last-column>:where(.tedi-table__scroll)>:where(.tedi-table__table)>.tedi-table__head>*>.tedi-table__header-cell.tedi-table__cell--sticky-right{z-index:3}.tedi-table--sticky-header.tedi-table--sticky-last-column>:where(.tedi-table__scroll)>:where(.tedi-table__table)>.tedi-table__head>*>.tedi-table__header-cell.tedi-table__cell--sticky-right-edge{box-shadow:inset 1px 0 0 var(--table-border),inset 0 -1px 0 var(--table-border-th)}.tedi-table--sticky-header>.tedi-table__scroll--shadow-header>:where(.tedi-table__table)>.tedi-table__head>.tedi-table__row:after{position:absolute;top:100%;right:0;left:0;height:var(--tedi-dimensions-03);pointer-events:none;content:\"\";background:linear-gradient(to bottom,var(--tedi-alpha-10),transparent)}.tedi-table--fixed-layout>:where(.tedi-table__scroll)>.tedi-table__table{table-layout:fixed}.tedi-table__drag-handle{display:inline-flex;align-items:center;justify-content:center;padding:2px;color:var(--general-text-tertiary);cursor:grab;background:transparent;border:0;border-radius:var(--button-radius-sm)}.tedi-table__drag-handle:hover{color:var(--general-text-primary);background:var(--button-main-neutral-icon-only-background-hover)}.tedi-table__drag-handle:focus-visible{outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:0}.tedi-table__drag-handle.cdk-drag-disabled{color:var(--general-text-disabled);cursor:not-allowed}.tedi-table__drag-handle--picked-up{color:var(--tedi-primary-500);cursor:grabbing}.cdk-drag-preview .tedi-table__drag-handle,.cdk-drop-list-dragging .tedi-table__drag-handle{cursor:grabbing}.cdk-drag-preview.tedi-table__row,.cdk-drag-preview.tedi-table__header-cell{display:table;cursor:grabbing;background:var(--table-hover);border:var(--tedi-borders-01) solid var(--card-border-primary);border-radius:var(--table-radius);box-shadow:0 6px 16px var(--tedi-alpha-20)}.cdk-drag-preview.tedi-table__row>.tedi-table__cell{background:var(--table-hover)}.cdk-drag-placeholder.tedi-table__row,.cdk-drag-placeholder.tedi-table__header-cell{opacity:.3}.cdk-drop-list-dragging .tedi-table__row:not(.cdk-drag-placeholder),.cdk-drop-list-dragging .tedi-table__header-cell:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.tedi-table__filter{display:flex;flex-direction:column;gap:var(--tedi-dimensions-12);width:100%}.tedi-table__filter-actions{display:flex;gap:var(--button-gutter-x-sm)}.tedi-table__filter-actions>*{flex:1 1 0;justify-content:center}.tedi-table .tedi-table__head .tedi-table__header-cell--picked-up{cursor:grabbing;background:var(--table-hover)}\n"] }]
|
|
14921
14925
|
}], ctorParameters: () => [], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: true }] }], columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: true }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], caption: [{ type: i0.Input, args: [{ isSignal: true, alias: "caption", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], ariaLabelledby: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabelledby", required: false }] }], striped: [{ type: i0.Input, args: [{ isSignal: true, alias: "striped", required: false }] }], verticalBorders: [{ type: i0.Input, args: [{ isSignal: true, alias: "verticalBorders", required: false }] }], borderless: [{ type: i0.Input, args: [{ isSignal: true, alias: "borderless", required: false }] }], stickyFirstColumn: [{ type: i0.Input, args: [{ isSignal: true, alias: "stickyFirstColumn", required: false }] }], stickyLastColumn: [{ type: i0.Input, args: [{ isSignal: true, alias: "stickyLastColumn", required: false }] }], stickyHeader: [{ type: i0.Input, args: [{ isSignal: true, alias: "stickyHeader", required: false }] }], fixedLayout: [{ type: i0.Input, args: [{ isSignal: true, alias: "fixedLayout", required: false }] }], maxHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxHeight", required: false }] }], activeRowId: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeRowId", required: false }] }], selectedRowHighlight: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedRowHighlight", required: false }] }], rowHover: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowHover", required: false }] }], enableRowSelection: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableRowSelection", required: false }] }], selectionMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectionMode", required: false }] }], enableColumnFilters: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableColumnFilters", required: false }] }], renderSubComponent: [{ type: i0.Input, args: [{ isSignal: true, alias: "renderSubComponent", required: false }] }], getRowCanExpand: [{ type: i0.Input, args: [{ isSignal: true, alias: "getRowCanExpand", required: false }] }], expandTrigger: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandTrigger", required: false }] }], expandButtonVariant: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandButtonVariant", required: false }] }], expandButtonLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandButtonLabel", required: false }] }], getSubRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "getSubRows", required: false }] }], getRowId: [{ type: i0.Input, args: [{ isSignal: true, alias: "getRowId", required: false }] }], groupRowsBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "groupRowsBy", required: false }] }], rowGroupDividers: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowGroupDividers", required: false }] }], controlColumnOrder: [{ type: i0.Input, args: [{ isSignal: true, alias: "controlColumnOrder", required: false }] }], filterModalBreakpoint: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterModalBreakpoint", required: false }] }], filterModalFullscreen: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterModalFullscreen", required: false }] }], filterPopoverWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterPopoverWidth", required: false }] }], pagination: [{ type: i0.Input, args: [{ isSignal: true, alias: "pagination", required: false }] }], paginationTop: [{ type: i0.Input, args: [{ isSignal: true, alias: "paginationTop", required: false }] }], manualPagination: [{ type: i0.Input, args: [{ isSignal: true, alias: "manualPagination", required: false }] }], manualSorting: [{ type: i0.Input, args: [{ isSignal: true, alias: "manualSorting", required: false }] }], manualFiltering: [{ type: i0.Input, args: [{ isSignal: true, alias: "manualFiltering", required: false }] }], pageCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageCount", required: false }] }], rowCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowCount", required: false }] }], state: [{ type: i0.Input, args: [{ isSignal: true, alias: "state", required: false }] }], defaultState: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultState", required: false }] }], persist: [{ type: i0.Input, args: [{ isSignal: true, alias: "persist", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], placeholderRole: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholderRole", required: false }] }], interactive: [{ type: i0.Input, args: [{ isSignal: true, alias: "interactive", required: false }] }], rowAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowAriaLabel", required: false }] }], reorderableRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "reorderableRows", required: false }] }], reorderableColumns: [{ type: i0.Input, args: [{ isSignal: true, alias: "reorderableColumns", required: false }] }], stateChange: [{ type: i0.Output, args: ["stateChange"] }], rowClick: [{ type: i0.Output, args: ["rowClick"] }], rowDrop: [{ type: i0.Output, args: ["rowDrop"] }], customResultsTemplateRef: [{ type: i0.ContentChild, args: [i0.forwardRef(() => TediPaginationResultsDirective), { ...{ read: TemplateRef }, isSignal: true }] }], scrollContainer: [{ type: i0.ViewChild, args: ["scrollContainer", { isSignal: true }] }], tableElement: [{ type: i0.ViewChild, args: ["tableElement", { isSignal: true }] }] } });
|
|
14922
14926
|
|
|
14923
14927
|
class TediTableToolbarComponent {
|
|
@@ -19621,6 +19625,11 @@ class TimePickerComponent {
|
|
|
19621
19625
|
trapFocus = input(false, ...(ngDevMode ? [{ debugName: "trapFocus" }] : []));
|
|
19622
19626
|
/** Emitted when the picker requests to be closed (Tab while `trapFocus` is `true`). */
|
|
19623
19627
|
closeRequested = output();
|
|
19628
|
+
/**
|
|
19629
|
+
* Emitted when the user explicitly picks a value: a minute click or Enter on the minute column (`scroll`),
|
|
19630
|
+
* or a slot/item selection (`slots`/`dropdown`). Scrolling or arrowing the wheels does not emit.
|
|
19631
|
+
*/
|
|
19632
|
+
selectionCommitted = output();
|
|
19624
19633
|
el = inject((ElementRef));
|
|
19625
19634
|
uniqueId = inject(_IdGenerator).getId("tedi-time-picker-");
|
|
19626
19635
|
formDisabled = signal(false, ...(ngDevMode ? [{ debugName: "formDisabled" }] : []));
|
|
@@ -19822,8 +19831,8 @@ class TimePickerComponent {
|
|
|
19822
19831
|
selectMinute(minute) {
|
|
19823
19832
|
if (this.isDisabled())
|
|
19824
19833
|
return;
|
|
19825
|
-
|
|
19826
|
-
const hourStr =
|
|
19834
|
+
// With no value, use the hour the wheel is parked on.
|
|
19835
|
+
const hourStr = String(this.selectedHourIndex()).padStart(2, "0");
|
|
19827
19836
|
const newValue = `${hourStr}:${minute}`;
|
|
19828
19837
|
if (this.value() === newValue)
|
|
19829
19838
|
return;
|
|
@@ -19837,6 +19846,7 @@ class TimePickerComponent {
|
|
|
19837
19846
|
this.value.set(slot);
|
|
19838
19847
|
this.onTouched();
|
|
19839
19848
|
this.onChange(slot);
|
|
19849
|
+
this.selectionCommitted.emit();
|
|
19840
19850
|
}
|
|
19841
19851
|
isSlotSelected(slot) {
|
|
19842
19852
|
return this.value() === slot;
|
|
@@ -19855,6 +19865,7 @@ class TimePickerComponent {
|
|
|
19855
19865
|
onMinuteClick(minute) {
|
|
19856
19866
|
if (this.isDisabled())
|
|
19857
19867
|
return;
|
|
19868
|
+
this.settlePendingScrollSelection();
|
|
19858
19869
|
this.hasUserGesture.minute = false;
|
|
19859
19870
|
this.clearGestureTimer("minute");
|
|
19860
19871
|
const list = this.minutes();
|
|
@@ -19863,6 +19874,7 @@ class TimePickerComponent {
|
|
|
19863
19874
|
this.scrollColumnToIndex("minute", idx, "smooth");
|
|
19864
19875
|
this.selectMinute(minute);
|
|
19865
19876
|
this.minuteColumns()[0]?.nativeElement.focus({ preventScroll: true });
|
|
19877
|
+
this.selectionCommitted.emit();
|
|
19866
19878
|
}
|
|
19867
19879
|
onColumnKeydown(event, type) {
|
|
19868
19880
|
if (this.isDisabled())
|
|
@@ -19877,8 +19889,18 @@ class TimePickerComponent {
|
|
|
19877
19889
|
}
|
|
19878
19890
|
if (event.key === "Enter" || event.key === " ") {
|
|
19879
19891
|
event.preventDefault();
|
|
19880
|
-
if (type === "hour")
|
|
19892
|
+
if (type === "hour") {
|
|
19881
19893
|
this.focusOtherColumn("hour");
|
|
19894
|
+
}
|
|
19895
|
+
else {
|
|
19896
|
+
// The highlight can be ahead of the value (no value yet, or a scroll
|
|
19897
|
+
// still in its debounce), so commit the highlighted hour and minute.
|
|
19898
|
+
this.settlePendingScrollSelection();
|
|
19899
|
+
const minute = this.minutes()[this.highlightedMinuteIndex()];
|
|
19900
|
+
if (minute !== undefined)
|
|
19901
|
+
this.selectMinute(minute);
|
|
19902
|
+
this.selectionCommitted.emit();
|
|
19903
|
+
}
|
|
19882
19904
|
return;
|
|
19883
19905
|
}
|
|
19884
19906
|
const list = type === "hour" ? this.hours : this.minutes();
|
|
@@ -20030,6 +20052,25 @@ class TimePickerComponent {
|
|
|
20030
20052
|
this.selectMinute(list[index]);
|
|
20031
20053
|
}, SCROLL_DEBOUNCE_MS);
|
|
20032
20054
|
}
|
|
20055
|
+
/**
|
|
20056
|
+
* Called before a minute commit, which may close the picker. A debounce left
|
|
20057
|
+
* running would fire on the closed column, read scrollTop 0 and overwrite the
|
|
20058
|
+
* value. The pending hour is applied from its highlighted row; the pending
|
|
20059
|
+
* minute is dropped, as the commit picks the minute itself.
|
|
20060
|
+
*/
|
|
20061
|
+
settlePendingScrollSelection() {
|
|
20062
|
+
["hour", "minute"].forEach((type) => {
|
|
20063
|
+
const timer = this.scrollDebounceTimer[type];
|
|
20064
|
+
if (!timer)
|
|
20065
|
+
return;
|
|
20066
|
+
clearTimeout(timer);
|
|
20067
|
+
delete this.scrollDebounceTimer[type];
|
|
20068
|
+
this.hasUserGesture[type] = false;
|
|
20069
|
+
this.clearGestureTimer(type);
|
|
20070
|
+
if (type === "hour")
|
|
20071
|
+
this.selectHour(this.hours[this.hourScrollIndex()]);
|
|
20072
|
+
});
|
|
20073
|
+
}
|
|
20033
20074
|
/**
|
|
20034
20075
|
* Gecko hands a torn-down scroll container's offset to the one replacing it
|
|
20035
20076
|
* in the same position, so a picker can arrive already scrolled to the
|
|
@@ -20123,6 +20164,10 @@ class TimePickerComponent {
|
|
|
20123
20164
|
}
|
|
20124
20165
|
}
|
|
20125
20166
|
scrollToSelected() {
|
|
20167
|
+
// A smooth scroll cut short by the picker closing (closeOnSelect) would
|
|
20168
|
+
// otherwise keep its lock and stop alignScroll from moving the column.
|
|
20169
|
+
this.clearProgrammaticScroll("hour");
|
|
20170
|
+
this.clearProgrammaticScroll("minute");
|
|
20126
20171
|
this.alignScroll("instant");
|
|
20127
20172
|
}
|
|
20128
20173
|
getColumnElement(type) {
|
|
@@ -20208,7 +20253,7 @@ class TimePickerComponent {
|
|
|
20208
20253
|
delete this.programmaticScrollTarget[type];
|
|
20209
20254
|
}
|
|
20210
20255
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: TimePickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
20211
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: TimePickerComponent, isStandalone: true, selector: "tedi-time-picker", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, timeSlots: { classPropertyName: "timeSlots", publicName: "timeSlots", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, showSlotIndicator: { classPropertyName: "showSlotIndicator", publicName: "showSlotIndicator", isSignal: true, isRequired: false, transformFunction: null }, minuteStep: { classPropertyName: "minuteStep", publicName: "minuteStep", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, border: { classPropertyName: "border", publicName: "border", isSignal: true, isRequired: false, transformFunction: null }, trapFocus: { classPropertyName: "trapFocus", publicName: "trapFocus", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", closeRequested: "closeRequested" }, host: { properties: { "class.tedi-time-picker--scroll": "variant() === 'scroll'", "class.tedi-time-picker--slots": "variant() === 'slots'", "class.tedi-time-picker--dropdown": "variant() === 'dropdown'", "class.tedi-time-picker--disabled": "isDisabled()", "class.tedi-time-picker--bordered": "border()" }, classAttribute: "tedi-time-picker" }, providers: [
|
|
20256
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: TimePickerComponent, isStandalone: true, selector: "tedi-time-picker", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, timeSlots: { classPropertyName: "timeSlots", publicName: "timeSlots", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, showSlotIndicator: { classPropertyName: "showSlotIndicator", publicName: "showSlotIndicator", isSignal: true, isRequired: false, transformFunction: null }, minuteStep: { classPropertyName: "minuteStep", publicName: "minuteStep", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, border: { classPropertyName: "border", publicName: "border", isSignal: true, isRequired: false, transformFunction: null }, trapFocus: { classPropertyName: "trapFocus", publicName: "trapFocus", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", closeRequested: "closeRequested", selectionCommitted: "selectionCommitted" }, host: { properties: { "class.tedi-time-picker--scroll": "variant() === 'scroll'", "class.tedi-time-picker--slots": "variant() === 'slots'", "class.tedi-time-picker--dropdown": "variant() === 'dropdown'", "class.tedi-time-picker--disabled": "isDisabled()", "class.tedi-time-picker--bordered": "border()" }, classAttribute: "tedi-time-picker" }, providers: [
|
|
20212
20257
|
{
|
|
20213
20258
|
provide: NG_VALUE_ACCESSOR,
|
|
20214
20259
|
useExisting: forwardRef(() => TimePickerComponent),
|
|
@@ -20237,7 +20282,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImpo
|
|
|
20237
20282
|
multi: true,
|
|
20238
20283
|
},
|
|
20239
20284
|
], template: "@if (variant() === \"scroll\") {\n <div class=\"tedi-time-picker__columns\" role=\"group\">\n <div\n #hourColumn\n class=\"tedi-time-picker__column\"\n role=\"listbox\"\n [attr.tabindex]=\"isDisabled() ? -1 : 0\"\n [attr.aria-label]=\"'time-picker.hours' | tediTranslate\"\n [attr.aria-activedescendant]=\"hourActiveId()\"\n [attr.aria-disabled]=\"isDisabled()\"\n (keydown)=\"onColumnKeydown($event, 'hour')\"\n (scroll)=\"onColumnScroll('hour')\"\n >\n @for (hour of hours; track hour; let i = $index) {\n <button\n type=\"button\"\n class=\"tedi-time-picker__item\"\n role=\"option\"\n [id]=\"hourItemId(i)\"\n [class.tedi-time-picker__item--selected]=\"\n highlightedHourIndex() === i\n \"\n [attr.aria-selected]=\"selectedHour() === +hour\"\n [disabled]=\"isDisabled()\"\n tabindex=\"-1\"\n (click)=\"onHourClick(hour)\"\n >\n {{ hour }}\n </button>\n }\n </div>\n <div class=\"tedi-time-picker__separator\"></div>\n <div\n #minuteColumn\n class=\"tedi-time-picker__column\"\n role=\"listbox\"\n [attr.tabindex]=\"isDisabled() ? -1 : 0\"\n [attr.aria-label]=\"'time-picker.minutes' | tediTranslate\"\n [attr.aria-activedescendant]=\"minuteActiveId()\"\n [attr.aria-disabled]=\"isDisabled()\"\n (keydown)=\"onColumnKeydown($event, 'minute')\"\n (scroll)=\"onColumnScroll('minute')\"\n >\n @for (minute of minutes(); track minute; let i = $index) {\n <button\n type=\"button\"\n class=\"tedi-time-picker__item\"\n role=\"option\"\n [id]=\"minuteItemId(i)\"\n [class.tedi-time-picker__item--selected]=\"\n highlightedMinuteIndex() === i\n \"\n [attr.aria-selected]=\"selectedMinute() === +minute\"\n [disabled]=\"isDisabled()\"\n tabindex=\"-1\"\n (click)=\"onMinuteClick(minute)\"\n >\n {{ minute }}\n </button>\n }\n </div>\n </div>\n} @else if (variant() === \"dropdown\") {\n @if (timeSlots().length === 0) {\n <p class=\"tedi-time-picker__empty\">\n {{ \"time-picker.no-slots\" | tediTranslate }}\n </p>\n } @else {\n <div\n class=\"tedi-time-picker__dropdown\"\n role=\"listbox\"\n [attr.aria-label]=\"'time-picker.times' | tediTranslate\"\n [attr.aria-disabled]=\"isDisabled() ? true : null\"\n >\n @for (slot of timeSlots(); track slot; let i = $index) {\n <div\n class=\"tedi-time-picker__dropdown-item\"\n role=\"option\"\n [class.tedi-time-picker__dropdown-item--selected]=\"\n isSlotSelected(slot)\n \"\n [attr.aria-selected]=\"isSlotSelected(slot)\"\n [attr.aria-disabled]=\"isDisabled() ? true : null\"\n [attr.tabindex]=\"isDisabled() ? -1 : getDropdownTabIndex(i)\"\n (click)=\"!isDisabled() && selectSlot(slot)\"\n (keydown)=\"onDropdownKeydown($event)\"\n >\n {{ slot }}\n </div>\n }\n </div>\n }\n} @else if (variant() === \"slots\") {\n @if (timeSlots().length === 0) {\n <p class=\"tedi-time-picker__empty\">\n {{ \"time-picker.no-slots\" | tediTranslate }}\n </p>\n } @else {\n <tedi-radio-card-group\n class=\"tedi-time-picker__grid\"\n role=\"radiogroup\"\n [style]=\"gridStyle()\"\n >\n @for (slot of timeSlots(); track slot; let i = $index) {\n <label\n tedi-radio-card\n variant=\"secondary\"\n class=\"tedi-time-picker__slot\"\n [showIndicator]=\"showSlotIndicator()\"\n [for]=\"slotId(i)\"\n >\n <input\n tedi-radio\n type=\"radio\"\n [id]=\"slotId(i)\"\n [name]=\"radioGroupName\"\n [value]=\"slot\"\n [checked]=\"isSlotSelected(slot)\"\n [disabled]=\"isDisabled()\"\n (change)=\"onRadioChange(slot)\"\n />\n {{ slot }}\n </label>\n }\n </tedi-radio-card-group>\n }\n}\n", styles: [".tedi-time-picker{--tedi-time-picker-item-height: var(--tedi-dimensions-16);--tedi-time-picker-columns-height: 12.5rem;--tedi-time-picker-width: var(--tedi-containers-01);--_tedi-time-picker-snap-padding: calc((var(--tedi-time-picker-columns-height) - var(--tedi-time-picker-item-height)) / 2);display:block;width:fit-content}.tedi-time-picker--disabled{pointer-events:none;opacity:.5}.tedi-time-picker--disabled .tedi-time-picker__column,.tedi-time-picker--disabled .tedi-time-picker__dropdown{overflow:hidden}.tedi-time-picker--bordered{overflow:hidden;border:var(--tedi-borders-01) solid var(--general-border-primary);border-radius:var(--card-radius-rounded)}@media(max-width:61.98rem){.tedi-time-picker{--tedi-time-picker-item-height: var(--tedi-dimensions-18);--tedi-time-picker-columns-height: 15.75rem}}.tedi-time-picker__columns{position:relative;display:flex;width:var(--tedi-time-picker-width);height:var(--tedi-time-picker-columns-height);overflow:hidden;-webkit-user-select:none;user-select:none;background:var(--card-background-primary)}.tedi-time-picker__columns:before{position:absolute;inset:0;z-index:3;pointer-events:none;content:\"\";background:linear-gradient(to bottom,var(--card-background-primary) 0%,transparent 30%,transparent 70%,var(--card-background-primary) 100%)}.tedi-time-picker__columns:after{position:absolute;top:50%;right:0;left:0;z-index:1;height:var(--tedi-time-picker-item-height);pointer-events:none;content:\"\";background:var(--form-datepicker-date-selected);transform:translateY(-50%)}.tedi-time-picker__column{position:relative;z-index:2;flex:1;height:100%;padding:var(--_tedi-time-picker-snap-padding) 0;overflow-y:scroll;scroll-behavior:smooth;overscroll-behavior-y:contain;scroll-snap-type:y mandatory;scroll-padding:var(--_tedi-time-picker-snap-padding);scrollbar-width:none;-webkit-overflow-scrolling:touch;-ms-overflow-style:none}.tedi-time-picker__column::-webkit-scrollbar{display:none}.tedi-time-picker__column:focus{outline:none}.tedi-time-picker__column:focus-visible{z-index:5;outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:calc(-1 * var(--tedi-borders-02))}.tedi-time-picker__separator{position:relative;z-index:2;width:var(--tedi-borders-02);background:var(--general-border-primary)}.tedi-time-picker__item{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;width:100%;height:var(--tedi-time-picker-item-height);padding:var(--dropdown-item-padding-y) var(--dropdown-item-padding-x);font-size:var(--body-regular-size);color:var(--general-text-primary);cursor:pointer;scroll-snap-align:center;scroll-snap-stop:always;background:none;border:0}.tedi-time-picker__item:disabled{cursor:not-allowed}.tedi-time-picker__item:focus,.tedi-time-picker__item:focus-visible{outline:none;box-shadow:none}.tedi-time-picker__item--selected{z-index:2;color:var(--form-datepicker-date-text-selected)}.tedi-time-picker__dropdown{display:flex;flex-direction:column;min-width:var(--tedi-time-picker-dropdown-min-width, auto);overflow:auto;border-radius:var(--dropdown-item-radius)}.tedi-time-picker__empty{padding:var(--dropdown-item-padding-y) var(--dropdown-item-padding-x);margin:0;font-size:var(--body-small-regular-size);color:var(--general-text-secondary);text-align:center}.tedi-time-picker__dropdown-item{display:flex;align-items:center;width:100%;min-height:var(--tedi-dimensions-16);padding:var(--dropdown-item-padding-y) var(--dropdown-item-padding-x);font-size:var(--body-regular-size);color:var(--dropdown-item-default-text);cursor:pointer;background:var(--dropdown-item-default-background)}.tedi-time-picker__dropdown-item:hover{color:var(--dropdown-item-hover-text);background:var(--dropdown-item-hover-background)}.tedi-time-picker__dropdown-item:focus-visible{outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:calc(-1 * var(--tedi-borders-02))}.tedi-time-picker__dropdown-item[aria-disabled=true]{cursor:not-allowed}.tedi-time-picker__dropdown-item[aria-disabled=true]:hover{color:var(--dropdown-item-default-text);background:var(--dropdown-item-default-background)}.tedi-time-picker__dropdown-item--selected,.tedi-time-picker__dropdown-item--selected:hover{color:var(--dropdown-item-active-text);background:var(--dropdown-item-active-background)}.tedi-time-picker__grid{gap:var(--layout-grid-gutters-08);padding:var(--card-padding-md-default)}\n"] }]
|
|
20240
|
-
}], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], timeSlots: [{ type: i0.Input, args: [{ isSignal: true, alias: "timeSlots", required: false }] }], columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }], showSlotIndicator: [{ type: i0.Input, args: [{ isSignal: true, alias: "showSlotIndicator", required: false }] }], minuteStep: [{ type: i0.Input, args: [{ isSignal: true, alias: "minuteStep", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], border: [{ type: i0.Input, args: [{ isSignal: true, alias: "border", required: false }] }], trapFocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "trapFocus", required: false }] }], closeRequested: [{ type: i0.Output, args: ["closeRequested"] }], hourColumns: [{ type: i0.ViewChildren, args: ["hourColumn", { isSignal: true }] }], minuteColumns: [{ type: i0.ViewChildren, args: ["minuteColumn", { isSignal: true }] }] } });
|
|
20285
|
+
}], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], timeSlots: [{ type: i0.Input, args: [{ isSignal: true, alias: "timeSlots", required: false }] }], columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }], showSlotIndicator: [{ type: i0.Input, args: [{ isSignal: true, alias: "showSlotIndicator", required: false }] }], minuteStep: [{ type: i0.Input, args: [{ isSignal: true, alias: "minuteStep", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], border: [{ type: i0.Input, args: [{ isSignal: true, alias: "border", required: false }] }], trapFocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "trapFocus", required: false }] }], closeRequested: [{ type: i0.Output, args: ["closeRequested"] }], selectionCommitted: [{ type: i0.Output, args: ["selectionCommitted"] }], hourColumns: [{ type: i0.ViewChildren, args: ["hourColumn", { isSignal: true }] }], minuteColumns: [{ type: i0.ViewChildren, args: ["minuteColumn", { isSignal: true }] }] } });
|
|
20241
20286
|
|
|
20242
20287
|
class TimePickerModalComponent {
|
|
20243
20288
|
data = inject(MODAL_DATA);
|
|
@@ -20276,7 +20321,7 @@ class TimePickerModalComponent {
|
|
|
20276
20321
|
form.requestSubmit();
|
|
20277
20322
|
};
|
|
20278
20323
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: TimePickerModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
20279
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.24", type: TimePickerModalComponent, isStandalone: true, selector: "tedi-time-picker-modal", ngImport: i0, template: "<form class=\"tedi-time-picker-modal__form\" (submit)=\"onSubmit($event)\">\n <tedi-modal class=\"tedi-time-picker-modal\">\n <tedi-modal-header>\n <h2>{{ \"time-field.modal-title\" | tediTranslate }}</h2>\n </tedi-modal-header>\n <tedi-modal-content class=\"tedi-time-picker-modal__content\">\n <tedi-time-picker\n [value]=\"draft()\"\n [variant]=\"data.variant\"\n [timeSlots]=\"data.timeSlots\"\n [columns]=\"data.columns\"\n [showSlotIndicator]=\"data.showSlotIndicator\"\n [minuteStep]=\"data.minuteStep\"\n (valueChange)=\"draft.set($event)\"\n />\n </tedi-modal-content>\n <tedi-modal-footer>\n <button tedi-button type=\"button\" variant=\"secondary\" (click)=\"cancel()\">\n {{ \"time-field.cancel\" | tediTranslate }}\n </button>\n <button tedi-button type=\"submit\">\n {{ \"time-field.confirm\" | tediTranslate }}\n </button>\n </tedi-modal-footer>\n </tedi-modal>\n</form>\n", styles: [".tedi-time-picker-modal{--_tedi-modal-body-padding: 0}.tedi-time-picker-modal .tedi-time-picker{width:100%;--tedi-time-picker-width: 100%}.tedi-time-picker-modal__content{display:flex;justify-content:center}\n"], dependencies: [{ kind: "component", type: ButtonComponent, selector: "[tedi-button]", inputs: ["variant", "size"] }, { kind: "component", type: ModalComponent, selector: "tedi-modal", inputs: ["open", "size", "width", "position", "closeOnBackdropClick", "ariaLabel", "ariaLabelledBy"], outputs: ["openChange"] }, { kind: "component", type: ModalContentComponent, selector: "tedi-modal-content" }, { kind: "component", type: ModalFooterComponent, selector: "tedi-modal-footer" }, { kind: "component", type: ModalHeaderComponent, selector: "tedi-modal-header", inputs: ["showClose", "closeButtonSize"] }, { kind: "component", type: TimePickerComponent, selector: "tedi-time-picker", inputs: ["value", "variant", "timeSlots", "columns", "showSlotIndicator", "minuteStep", "disabled", "border", "trapFocus"], outputs: ["valueChange", "closeRequested"] }, { kind: "pipe", type: TediTranslationPipe, name: "tediTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
20324
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.24", type: TimePickerModalComponent, isStandalone: true, selector: "tedi-time-picker-modal", ngImport: i0, template: "<form class=\"tedi-time-picker-modal__form\" (submit)=\"onSubmit($event)\">\n <tedi-modal class=\"tedi-time-picker-modal\">\n <tedi-modal-header>\n <h2>{{ \"time-field.modal-title\" | tediTranslate }}</h2>\n </tedi-modal-header>\n <tedi-modal-content class=\"tedi-time-picker-modal__content\">\n <tedi-time-picker\n [value]=\"draft()\"\n [variant]=\"data.variant\"\n [timeSlots]=\"data.timeSlots\"\n [columns]=\"data.columns\"\n [showSlotIndicator]=\"data.showSlotIndicator\"\n [minuteStep]=\"data.minuteStep\"\n (valueChange)=\"draft.set($event)\"\n />\n </tedi-modal-content>\n <tedi-modal-footer>\n <button tedi-button type=\"button\" variant=\"secondary\" (click)=\"cancel()\">\n {{ \"time-field.cancel\" | tediTranslate }}\n </button>\n <button tedi-button type=\"submit\">\n {{ \"time-field.confirm\" | tediTranslate }}\n </button>\n </tedi-modal-footer>\n </tedi-modal>\n</form>\n", styles: [".tedi-time-picker-modal{--_tedi-modal-body-padding: 0}.tedi-time-picker-modal .tedi-time-picker{width:100%;--tedi-time-picker-width: 100%}.tedi-time-picker-modal__content{display:flex;justify-content:center}\n"], dependencies: [{ kind: "component", type: ButtonComponent, selector: "[tedi-button]", inputs: ["variant", "size"] }, { kind: "component", type: ModalComponent, selector: "tedi-modal", inputs: ["open", "size", "width", "position", "closeOnBackdropClick", "ariaLabel", "ariaLabelledBy"], outputs: ["openChange"] }, { kind: "component", type: ModalContentComponent, selector: "tedi-modal-content" }, { kind: "component", type: ModalFooterComponent, selector: "tedi-modal-footer" }, { kind: "component", type: ModalHeaderComponent, selector: "tedi-modal-header", inputs: ["showClose", "closeButtonSize"] }, { kind: "component", type: TimePickerComponent, selector: "tedi-time-picker", inputs: ["value", "variant", "timeSlots", "columns", "showSlotIndicator", "minuteStep", "disabled", "border", "trapFocus"], outputs: ["valueChange", "closeRequested", "selectionCommitted"] }, { kind: "pipe", type: TediTranslationPipe, name: "tediTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
20280
20325
|
}
|
|
20281
20326
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: TimePickerModalComponent, decorators: [{
|
|
20282
20327
|
type: Component,
|
|
@@ -20336,7 +20381,10 @@ class TimeFieldComponent {
|
|
|
20336
20381
|
useNativePicker = input(false, ...(ngDevMode ? [{ debugName: "useNativePicker" }] : []));
|
|
20337
20382
|
/** What opens the picker: only the icon (`button`) or also clicking the input (`input`). */
|
|
20338
20383
|
pickerTrigger = input("button", ...(ngDevMode ? [{ debugName: "pickerTrigger" }] : []));
|
|
20339
|
-
/**
|
|
20384
|
+
/**
|
|
20385
|
+
* Close the popover as soon as the user picks a value. In the `scroll` variant only a minute click or
|
|
20386
|
+
* Enter in the minute column closes it — scrolling or arrowing the wheels does not.
|
|
20387
|
+
*/
|
|
20340
20388
|
closeOnSelect = input(false, ...(ngDevMode ? [{ debugName: "closeOnSelect" }] : []));
|
|
20341
20389
|
/** Predefined `HH:mm` strings for the `slots` and `dropdown` variants. */
|
|
20342
20390
|
timeSlots = input([], ...(ngDevMode ? [{ debugName: "timeSlots" }] : []));
|
|
@@ -20614,6 +20662,8 @@ class TimeFieldComponent {
|
|
|
20614
20662
|
this.onTouched();
|
|
20615
20663
|
this.onChange(newValue);
|
|
20616
20664
|
}
|
|
20665
|
+
}
|
|
20666
|
+
onPickerSelectionCommitted() {
|
|
20617
20667
|
if (this.closeOnSelect()) {
|
|
20618
20668
|
this.closePopover();
|
|
20619
20669
|
}
|
|
@@ -20641,7 +20691,7 @@ class TimeFieldComponent {
|
|
|
20641
20691
|
provide: TEDI_FORM_FIELD_CONTROL,
|
|
20642
20692
|
useExisting: forwardRef(() => TimeFieldComponent),
|
|
20643
20693
|
},
|
|
20644
|
-
], viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["inputElement"], descendants: true, isSignal: true }, { propertyName: "fieldEl", first: true, predicate: ["fieldEl"], descendants: true, isSignal: true }, { propertyName: "popover", first: true, predicate: ["popover"], descendants: true, isSignal: true }, { propertyName: "timePicker", first: true, predicate: ["timePicker"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (usePopover()) {\n <!--\n The field wrapper is the popover anchor + trigger, so the picker matches the\n input width. Button-trigger mode disables clicks on everything but the icon\n (see SCSS); input-trigger mode opens from anywhere in the field.\n -->\n <tedi-popover\n #popover\n class=\"tedi-time-field__popover\"\n [position]=\"popoverPosition()\"\n [withArrow]=\"false\"\n [preventOverflow]=\"true\"\n >\n <div\n #fieldEl\n tedi-popover-trigger\n [interactive]=\"false\"\n class=\"tedi-time-field__field\"\n [class.tedi-time-field__field--button-trigger]=\"!inputIsTrigger()\"\n [class.tedi-field-surface]=\"paintsSurface()\"\n [class.tedi-field-surface--invalid]=\"paintsSurface() && invalid()\"\n [class.tedi-field-surface--valid]=\"paintsSurface() && valid()\"\n [class.tedi-field-surface--disabled]=\"paintsSurface() && disabled()\"\n [attr.tabindex]=\"-1\"\n (focus)=\"onFieldFocus($event)\"\n (click)=\"onFieldClick()\"\n >\n <ng-container *ngTemplateOutlet=\"timeInput\" />\n <div class=\"tedi-time-field__actions\">\n <ng-container *ngTemplateOutlet=\"clearButton\" />\n <button\n tedi-button\n type=\"button\"\n variant=\"neutral\"\n size=\"small\"\n class=\"tedi-time-field__icon\"\n [class.tedi-time-field__icon--open]=\"popoverIsOpen()\"\n [attr.aria-label]=\"'time-field.select-time' | tediTranslate\"\n [attr.aria-expanded]=\"popoverIsOpen() || null\"\n aria-haspopup=\"dialog\"\n (click)=\"onIconClick()\"\n >\n <tedi-icon name=\"schedule\" color=\"inherit\" size=\"inherit\" />\n </button>\n </div>\n </div>\n <tedi-popover-content\n class=\"tedi-time-field__popover-content\"\n maxWidth=\"none\"\n >\n <ng-container *ngTemplateOutlet=\"pickerWheel\" />\n </tedi-popover-content>\n </tedi-popover>\n} @else {\n <!-- No picker / native picker / mobile-modal / disabled: plain field, no popover. -->\n <div\n #fieldEl\n class=\"tedi-time-field__field\"\n [class.tedi-field-surface]=\"paintsSurface()\"\n [class.tedi-field-surface--invalid]=\"paintsSurface() && invalid()\"\n [class.tedi-field-surface--valid]=\"paintsSurface() && valid()\"\n [class.tedi-field-surface--disabled]=\"paintsSurface() && disabled()\"\n >\n <ng-container *ngTemplateOutlet=\"timeInput\" />\n <div class=\"tedi-time-field__actions\">\n <ng-container *ngTemplateOutlet=\"clearButton\" />\n @if (hasNativePicker()) {\n <button\n tedi-button\n type=\"button\"\n variant=\"neutral\"\n size=\"small\"\n class=\"tedi-time-field__icon\"\n [attr.aria-label]=\"'time-field.select-time' | tediTranslate\"\n [disabled]=\"isDisabled()\"\n (click)=\"openNativePicker()\"\n >\n <tedi-icon name=\"schedule\" color=\"inherit\" size=\"inherit\" />\n </button>\n } @else if (hasPicker()) {\n <button\n tedi-button\n type=\"button\"\n variant=\"neutral\"\n size=\"small\"\n class=\"tedi-time-field__icon\"\n [attr.aria-label]=\"'time-field.select-time' | tediTranslate\"\n [disabled]=\"isDisabled()\"\n (click)=\"openPicker()\"\n >\n <tedi-icon name=\"schedule\" color=\"inherit\" size=\"inherit\" />\n </button>\n } @else {\n <span\n class=\"tedi-time-field__icon tedi-time-field__icon--static\"\n aria-hidden=\"true\"\n >\n <tedi-icon name=\"schedule\" color=\"inherit\" size=\"inherit\" />\n </span>\n }\n </div>\n </div>\n}\n\n<ng-template #timeInput>\n <input\n #inputElement\n class=\"tedi-time-field__input\"\n inputmode=\"numeric\"\n [type]=\"inputType()\"\n [id]=\"inputId()\"\n [attr.placeholder]=\"placeholder()\"\n [value]=\"inputValue()\"\n [disabled]=\"isDisabled()\"\n [readOnly]=\"inputIsTrigger()\"\n [attr.aria-invalid]=\"invalid() || null\"\n (click)=\"onInputClick($event)\"\n (input)=\"handleInput($event)\"\n (blur)=\"handleBlur()\"\n />\n</ng-template>\n\n<ng-template #clearButton>\n @if (showClear()) {\n <button\n tedi-closing-button\n type=\"button\"\n size=\"small\"\n class=\"tedi-time-field__clear\"\n [iconSize]=\"18\"\n [ariaLabel]=\"'time-field.clear' | tediTranslate\"\n (click)=\"onClearClick($event)\"\n ></button>\n <tedi-separator axis=\"vertical\" size=\"1rem\" />\n }\n</ng-template>\n\n<ng-template #pickerWheel>\n <tedi-time-picker\n #timePicker\n [value]=\"value()\"\n [variant]=\"customPickerVariant()\"\n [timeSlots]=\"timeSlots()\"\n [columns]=\"columns()\"\n [showSlotIndicator]=\"showSlotIndicator()\"\n [minuteStep]=\"minuteStep()\"\n [trapFocus]=\"true\"\n [style.--tedi-time-picker-dropdown-min-width.px]=\"dropdownMinWidth()\"\n (valueChange)=\"onPickerValueChange($event)\"\n (closeRequested)=\"closePopover()\"\n />\n</ng-template>\n", styles: [".tedi-time-field{display:flex;flex:1;min-width:0}.tedi-time-field--small .tedi-time-field__field{--_field-padding-y: var(--form-field-padding-y-sm);--_field-height: var(--form-field-height-sm)}.tedi-time-field--large .tedi-time-field__field{--_field-padding-y: var(--form-field-padding-y-lg);--_field-padding-x: var(--form-field-padding-x-lg);--_field-height: var(--form-field-height-lg)}.tedi-time-field__popover{display:flex;flex:1;min-width:0}.tedi-time-field__field{--_field-padding-y: var(--form-field-padding-y-md-default);--_field-padding-x: var(--form-field-padding-x-md-default);--_field-height: var(--form-field-height);--_field-border-color: var(--form-input-border-default);--_field-background: var(--form-input-background-default);--_field-ring-color: transparent;display:flex;flex:1;gap:var(--form-field-inner-spacing);align-items:center;min-width:0}.tedi-time-field__field:focus,.tedi-time-field__field:focus-visible{outline:none}.tedi-time-field__field:where(.tedi-field-surface){background:var(--_field-background);border:var(--tedi-borders-01) solid var(--_field-border-color);border-radius:var(--form-field-radius);box-shadow:inset 0 0 0 var(--tedi-borders-01) var(--_field-ring-color);height:var(--_field-height);padding:var(--_field-padding-y) var(--_field-padding-x)}.tedi-time-field__field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled):is([aria-invalid=true],.tedi-field-surface--invalid){--_field-border-color: var(--form-general-feedback-error-border)}.tedi-time-field__field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled).tedi-field-surface--valid{--_field-border-color: var(--form-general-feedback-success-border)}.tedi-time-field__field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled):active,.tedi-time-field__field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled):has(input:active,textarea:active),.tedi-time-field__field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled):focus-within,.tedi-time-field__field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled):has(input:focus-visible,textarea:focus-visible){--_field-ring-color: var(--_field-border-color)}.tedi-time-field__field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled,[aria-invalid=true],.tedi-field-surface--invalid,.tedi-field-surface--valid):hover,.tedi-time-field__field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled,[aria-invalid=true],.tedi-field-surface--invalid,.tedi-field-surface--valid):has(input:hover,textarea:hover){--_field-border-color: var(--form-input-border-hover)}.tedi-time-field__field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled,[aria-invalid=true],.tedi-field-surface--invalid,.tedi-field-surface--valid):active,.tedi-time-field__field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled,[aria-invalid=true],.tedi-field-surface--invalid,.tedi-field-surface--valid):has(input:active,textarea:active){--_field-border-color: var(--form-input-border-active)}.tedi-time-field__field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled,[aria-invalid=true],.tedi-field-surface--invalid,.tedi-field-surface--valid):focus-within,.tedi-time-field__field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled,[aria-invalid=true],.tedi-field-surface--invalid,.tedi-field-surface--valid):has(input:focus-visible,textarea:focus-visible){--_field-border-color: var(--form-input-border-focus)}.tedi-time-field__field.tedi-field-surface:is(:disabled,.tedi-field-surface--disabled){--_field-border-color: var(--form-input-border-disabled);--_field-background: var(--form-input-background-disabled);--_field-ring-color: transparent;cursor:not-allowed}.tedi-time-field__field--button-trigger{pointer-events:none}.tedi-time-field__field--button-trigger .tedi-time-field__input,.tedi-time-field__field--button-trigger .tedi-time-field__clear,.tedi-time-field__field--button-trigger .tedi-time-field__icon{pointer-events:auto}.tedi-time-field__input{flex:1;min-width:0;padding-inline-start:1px;margin-inline-start:-1px;font-family:inherit;font-size:var(--body-regular-size);color:var(--form-input-text-filled);outline:none;background:transparent;border:0;border-radius:var(--form-field-radius)}.tedi-time-field__input::placeholder{color:var(--form-input-text-placeholder)}.tedi-time-field__input:disabled{color:var(--form-input-text-disabled);cursor:not-allowed}.tedi-time-field__input::-webkit-calendar-picker-indicator,.tedi-time-field__input::-webkit-inner-spin-button,.tedi-time-field__input::-webkit-outer-spin-button,.tedi-time-field__input::-webkit-clear-button,.tedi-time-field__input::-webkit-list-button{display:none;margin:0;appearance:none}.tedi-time-field__actions{display:flex;flex-shrink:0;gap:var(--layout-grid-gutters-04);align-items:center;align-self:center;justify-content:center}.tedi-time-field__clear{flex-shrink:0}.tedi-time-field__clear:disabled{cursor:not-allowed}.tedi-time-field__popover-content.tedi-popover-content{padding:0}.tedi-time-field .tedi-time-field__icon{flex-shrink:0;--button-sm-icon-size: var(--form-field-button-height-sm);width:var(--button-sm-icon-size);height:var(--button-sm-icon-size);font-size:1.125rem;border-radius:var(--button-radius-sm)}@media(max-width:47.98rem){.tedi-time-field .tedi-time-field__icon{--button-sm-icon-size: var(--form-field-button-height)}}.tedi-time-field .tedi-time-field__icon:disabled{cursor:not-allowed}.tedi-time-field .tedi-time-field__icon--open:not(:disabled),.tedi-time-field .tedi-time-field__icon--open:not(:disabled):hover,.tedi-time-field .tedi-time-field__icon--open:not(:disabled):active{color:var(--_btn-active-text);background:var(--_btn-active-bg);border-color:var(--_btn-active-border)}.tedi-time-field .tedi-time-field__icon--static{display:inline-flex;align-items:center;justify-content:center;color:var(--form-input-text-placeholder)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ButtonComponent, selector: "[tedi-button]", inputs: ["variant", "size"] }, { kind: "component", type: ClosingButtonComponent, selector: "button[tedi-closing-button]", inputs: ["size", "iconSize", "icon", "ariaLabel", "showTitle"] }, { kind: "component", type: SeparatorComponent, selector: "tedi-separator", inputs: ["axis", "color", "variant", "dotSize", "dotFilled", "thickness", "spacing", "size"] }, { kind: "component", type: IconComponent, selector: "tedi-icon", inputs: ["name", "size", "color", "background", "variant", "type", "label"] }, { kind: "component", type: PopoverComponent, selector: "tedi-popover", inputs: ["position", "preventOverflow", "dismissible", "hideOnScroll", "withBorder", "withArrow", "lockScroll", "timeoutDelay", "offset"] }, { kind: "component", type: PopoverContentComponent, selector: "tedi-popover-content", inputs: ["maxWidth", "title", "showClose"] }, { kind: "directive", type: PopoverTriggerDirective, selector: "[tedi-popover-trigger]", inputs: ["underline", "interactive"] }, { kind: "component", type: TimePickerComponent, selector: "tedi-time-picker", inputs: ["value", "variant", "timeSlots", "columns", "showSlotIndicator", "minuteStep", "disabled", "border", "trapFocus"], outputs: ["valueChange", "closeRequested"] }, { kind: "pipe", type: TediTranslationPipe, name: "tediTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
20694
|
+
], viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["inputElement"], descendants: true, isSignal: true }, { propertyName: "fieldEl", first: true, predicate: ["fieldEl"], descendants: true, isSignal: true }, { propertyName: "popover", first: true, predicate: ["popover"], descendants: true, isSignal: true }, { propertyName: "timePicker", first: true, predicate: ["timePicker"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (usePopover()) {\n <!--\n The field wrapper is the popover anchor + trigger, so the picker matches the\n input width. Button-trigger mode disables clicks on everything but the icon\n (see SCSS); input-trigger mode opens from anywhere in the field.\n -->\n <tedi-popover\n #popover\n class=\"tedi-time-field__popover\"\n [position]=\"popoverPosition()\"\n [withArrow]=\"false\"\n [preventOverflow]=\"true\"\n >\n <div\n #fieldEl\n tedi-popover-trigger\n [interactive]=\"false\"\n class=\"tedi-time-field__field\"\n [class.tedi-time-field__field--button-trigger]=\"!inputIsTrigger()\"\n [class.tedi-field-surface]=\"paintsSurface()\"\n [class.tedi-field-surface--invalid]=\"paintsSurface() && invalid()\"\n [class.tedi-field-surface--valid]=\"paintsSurface() && valid()\"\n [class.tedi-field-surface--disabled]=\"paintsSurface() && disabled()\"\n [attr.tabindex]=\"-1\"\n (focus)=\"onFieldFocus($event)\"\n (click)=\"onFieldClick()\"\n >\n <ng-container *ngTemplateOutlet=\"timeInput\" />\n <div class=\"tedi-time-field__actions\">\n <ng-container *ngTemplateOutlet=\"clearButton\" />\n <button\n tedi-button\n type=\"button\"\n variant=\"neutral\"\n size=\"small\"\n class=\"tedi-time-field__icon\"\n [class.tedi-time-field__icon--open]=\"popoverIsOpen()\"\n [attr.aria-label]=\"'time-field.select-time' | tediTranslate\"\n [attr.aria-expanded]=\"popoverIsOpen() || null\"\n aria-haspopup=\"dialog\"\n (click)=\"onIconClick()\"\n >\n <tedi-icon name=\"schedule\" color=\"inherit\" size=\"inherit\" />\n </button>\n </div>\n </div>\n <tedi-popover-content\n class=\"tedi-time-field__popover-content\"\n maxWidth=\"none\"\n >\n <ng-container *ngTemplateOutlet=\"pickerWheel\" />\n </tedi-popover-content>\n </tedi-popover>\n} @else {\n <!-- No picker / native picker / mobile-modal / disabled: plain field, no popover. -->\n <div\n #fieldEl\n class=\"tedi-time-field__field\"\n [class.tedi-field-surface]=\"paintsSurface()\"\n [class.tedi-field-surface--invalid]=\"paintsSurface() && invalid()\"\n [class.tedi-field-surface--valid]=\"paintsSurface() && valid()\"\n [class.tedi-field-surface--disabled]=\"paintsSurface() && disabled()\"\n >\n <ng-container *ngTemplateOutlet=\"timeInput\" />\n <div class=\"tedi-time-field__actions\">\n <ng-container *ngTemplateOutlet=\"clearButton\" />\n @if (hasNativePicker()) {\n <button\n tedi-button\n type=\"button\"\n variant=\"neutral\"\n size=\"small\"\n class=\"tedi-time-field__icon\"\n [attr.aria-label]=\"'time-field.select-time' | tediTranslate\"\n [disabled]=\"isDisabled()\"\n (click)=\"openNativePicker()\"\n >\n <tedi-icon name=\"schedule\" color=\"inherit\" size=\"inherit\" />\n </button>\n } @else if (hasPicker()) {\n <button\n tedi-button\n type=\"button\"\n variant=\"neutral\"\n size=\"small\"\n class=\"tedi-time-field__icon\"\n [attr.aria-label]=\"'time-field.select-time' | tediTranslate\"\n [disabled]=\"isDisabled()\"\n (click)=\"openPicker()\"\n >\n <tedi-icon name=\"schedule\" color=\"inherit\" size=\"inherit\" />\n </button>\n } @else {\n <span\n class=\"tedi-time-field__icon tedi-time-field__icon--static\"\n aria-hidden=\"true\"\n >\n <tedi-icon name=\"schedule\" color=\"inherit\" size=\"inherit\" />\n </span>\n }\n </div>\n </div>\n}\n\n<ng-template #timeInput>\n <input\n #inputElement\n class=\"tedi-time-field__input\"\n inputmode=\"numeric\"\n [type]=\"inputType()\"\n [id]=\"inputId()\"\n [attr.placeholder]=\"placeholder()\"\n [value]=\"inputValue()\"\n [disabled]=\"isDisabled()\"\n [readOnly]=\"inputIsTrigger()\"\n [attr.aria-invalid]=\"invalid() || null\"\n (click)=\"onInputClick($event)\"\n (input)=\"handleInput($event)\"\n (blur)=\"handleBlur()\"\n />\n</ng-template>\n\n<ng-template #clearButton>\n @if (showClear()) {\n <button\n tedi-closing-button\n type=\"button\"\n size=\"small\"\n class=\"tedi-time-field__clear\"\n [iconSize]=\"18\"\n [ariaLabel]=\"'time-field.clear' | tediTranslate\"\n (click)=\"onClearClick($event)\"\n ></button>\n <tedi-separator axis=\"vertical\" size=\"1rem\" />\n }\n</ng-template>\n\n<ng-template #pickerWheel>\n <tedi-time-picker\n #timePicker\n [value]=\"value()\"\n [variant]=\"customPickerVariant()\"\n [timeSlots]=\"timeSlots()\"\n [columns]=\"columns()\"\n [showSlotIndicator]=\"showSlotIndicator()\"\n [minuteStep]=\"minuteStep()\"\n [trapFocus]=\"true\"\n [style.--tedi-time-picker-dropdown-min-width.px]=\"dropdownMinWidth()\"\n (valueChange)=\"onPickerValueChange($event)\"\n (selectionCommitted)=\"onPickerSelectionCommitted()\"\n (closeRequested)=\"closePopover()\"\n />\n</ng-template>\n", styles: [".tedi-time-field{display:flex;flex:1;min-width:0}.tedi-time-field--small .tedi-time-field__field{--_field-padding-y: var(--form-field-padding-y-sm);--_field-height: var(--form-field-height-sm)}.tedi-time-field--large .tedi-time-field__field{--_field-padding-y: var(--form-field-padding-y-lg);--_field-padding-x: var(--form-field-padding-x-lg);--_field-height: var(--form-field-height-lg)}.tedi-time-field__popover{display:flex;flex:1;min-width:0}.tedi-time-field__field{--_field-padding-y: var(--form-field-padding-y-md-default);--_field-padding-x: var(--form-field-padding-x-md-default);--_field-height: var(--form-field-height);--_field-border-color: var(--form-input-border-default);--_field-background: var(--form-input-background-default);--_field-ring-color: transparent;display:flex;flex:1;gap:var(--form-field-inner-spacing);align-items:center;min-width:0}.tedi-time-field__field:focus,.tedi-time-field__field:focus-visible{outline:none}.tedi-time-field__field:where(.tedi-field-surface){background:var(--_field-background);border:var(--tedi-borders-01) solid var(--_field-border-color);border-radius:var(--form-field-radius);box-shadow:inset 0 0 0 var(--tedi-borders-01) var(--_field-ring-color);height:var(--_field-height);padding:var(--_field-padding-y) var(--_field-padding-x)}.tedi-time-field__field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled):is([aria-invalid=true],.tedi-field-surface--invalid){--_field-border-color: var(--form-general-feedback-error-border)}.tedi-time-field__field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled).tedi-field-surface--valid{--_field-border-color: var(--form-general-feedback-success-border)}.tedi-time-field__field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled):active,.tedi-time-field__field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled):has(input:active,textarea:active),.tedi-time-field__field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled):focus-within,.tedi-time-field__field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled):has(input:focus-visible,textarea:focus-visible){--_field-ring-color: var(--_field-border-color)}.tedi-time-field__field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled,[aria-invalid=true],.tedi-field-surface--invalid,.tedi-field-surface--valid):hover,.tedi-time-field__field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled,[aria-invalid=true],.tedi-field-surface--invalid,.tedi-field-surface--valid):has(input:hover,textarea:hover){--_field-border-color: var(--form-input-border-hover)}.tedi-time-field__field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled,[aria-invalid=true],.tedi-field-surface--invalid,.tedi-field-surface--valid):active,.tedi-time-field__field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled,[aria-invalid=true],.tedi-field-surface--invalid,.tedi-field-surface--valid):has(input:active,textarea:active){--_field-border-color: var(--form-input-border-active)}.tedi-time-field__field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled,[aria-invalid=true],.tedi-field-surface--invalid,.tedi-field-surface--valid):focus-within,.tedi-time-field__field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled,[aria-invalid=true],.tedi-field-surface--invalid,.tedi-field-surface--valid):has(input:focus-visible,textarea:focus-visible){--_field-border-color: var(--form-input-border-focus)}.tedi-time-field__field.tedi-field-surface:is(:disabled,.tedi-field-surface--disabled){--_field-border-color: var(--form-input-border-disabled);--_field-background: var(--form-input-background-disabled);--_field-ring-color: transparent;cursor:not-allowed}.tedi-time-field__field--button-trigger{pointer-events:none}.tedi-time-field__field--button-trigger .tedi-time-field__input,.tedi-time-field__field--button-trigger .tedi-time-field__clear,.tedi-time-field__field--button-trigger .tedi-time-field__icon{pointer-events:auto}.tedi-time-field__input{flex:1;min-width:0;padding-inline-start:1px;margin-inline-start:-1px;font-family:inherit;font-size:var(--body-regular-size);color:var(--form-input-text-filled);outline:none;background:transparent;border:0;border-radius:var(--form-field-radius)}.tedi-time-field__input::placeholder{color:var(--form-input-text-placeholder)}.tedi-time-field__input:disabled{color:var(--form-input-text-disabled);cursor:not-allowed}.tedi-time-field__input::-webkit-calendar-picker-indicator,.tedi-time-field__input::-webkit-inner-spin-button,.tedi-time-field__input::-webkit-outer-spin-button,.tedi-time-field__input::-webkit-clear-button,.tedi-time-field__input::-webkit-list-button{display:none;margin:0;appearance:none}.tedi-time-field__actions{display:flex;flex-shrink:0;gap:var(--layout-grid-gutters-04);align-items:center;align-self:center;justify-content:center}.tedi-time-field__clear{flex-shrink:0}.tedi-time-field__clear:disabled{cursor:not-allowed}.tedi-time-field__popover-content.tedi-popover-content{padding:0}.tedi-time-field .tedi-time-field__icon{flex-shrink:0;--button-sm-icon-size: var(--form-field-button-height-sm);width:var(--button-sm-icon-size);height:var(--button-sm-icon-size);font-size:1.125rem;border-radius:var(--button-radius-sm)}@media(max-width:47.98rem){.tedi-time-field .tedi-time-field__icon{--button-sm-icon-size: var(--form-field-button-height)}}.tedi-time-field .tedi-time-field__icon:disabled{cursor:not-allowed}.tedi-time-field .tedi-time-field__icon--open:not(:disabled),.tedi-time-field .tedi-time-field__icon--open:not(:disabled):hover,.tedi-time-field .tedi-time-field__icon--open:not(:disabled):active{color:var(--_btn-active-text);background:var(--_btn-active-bg);border-color:var(--_btn-active-border)}.tedi-time-field .tedi-time-field__icon--static{display:inline-flex;align-items:center;justify-content:center;color:var(--form-input-text-placeholder)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ButtonComponent, selector: "[tedi-button]", inputs: ["variant", "size"] }, { kind: "component", type: ClosingButtonComponent, selector: "button[tedi-closing-button]", inputs: ["size", "iconSize", "icon", "ariaLabel", "showTitle"] }, { kind: "component", type: SeparatorComponent, selector: "tedi-separator", inputs: ["axis", "color", "variant", "dotSize", "dotFilled", "thickness", "spacing", "size"] }, { kind: "component", type: IconComponent, selector: "tedi-icon", inputs: ["name", "size", "color", "background", "variant", "type", "label"] }, { kind: "component", type: PopoverComponent, selector: "tedi-popover", inputs: ["position", "preventOverflow", "dismissible", "hideOnScroll", "withBorder", "withArrow", "lockScroll", "timeoutDelay", "offset"] }, { kind: "component", type: PopoverContentComponent, selector: "tedi-popover-content", inputs: ["maxWidth", "title", "showClose"] }, { kind: "directive", type: PopoverTriggerDirective, selector: "[tedi-popover-trigger]", inputs: ["underline", "interactive"] }, { kind: "component", type: TimePickerComponent, selector: "tedi-time-picker", inputs: ["value", "variant", "timeSlots", "columns", "showSlotIndicator", "minuteStep", "disabled", "border", "trapFocus"], outputs: ["valueChange", "closeRequested", "selectionCommitted"] }, { kind: "pipe", type: TediTranslationPipe, name: "tediTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
20645
20695
|
}
|
|
20646
20696
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: TimeFieldComponent, decorators: [{
|
|
20647
20697
|
type: Component,
|
|
@@ -20670,7 +20720,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImpo
|
|
|
20670
20720
|
class: "tedi-time-field",
|
|
20671
20721
|
"[class.tedi-time-field--small]": "resolvedSize() === 'small'",
|
|
20672
20722
|
"[class.tedi-time-field--large]": "resolvedSize() === 'large'",
|
|
20673
|
-
}, template: "@if (usePopover()) {\n <!--\n The field wrapper is the popover anchor + trigger, so the picker matches the\n input width. Button-trigger mode disables clicks on everything but the icon\n (see SCSS); input-trigger mode opens from anywhere in the field.\n -->\n <tedi-popover\n #popover\n class=\"tedi-time-field__popover\"\n [position]=\"popoverPosition()\"\n [withArrow]=\"false\"\n [preventOverflow]=\"true\"\n >\n <div\n #fieldEl\n tedi-popover-trigger\n [interactive]=\"false\"\n class=\"tedi-time-field__field\"\n [class.tedi-time-field__field--button-trigger]=\"!inputIsTrigger()\"\n [class.tedi-field-surface]=\"paintsSurface()\"\n [class.tedi-field-surface--invalid]=\"paintsSurface() && invalid()\"\n [class.tedi-field-surface--valid]=\"paintsSurface() && valid()\"\n [class.tedi-field-surface--disabled]=\"paintsSurface() && disabled()\"\n [attr.tabindex]=\"-1\"\n (focus)=\"onFieldFocus($event)\"\n (click)=\"onFieldClick()\"\n >\n <ng-container *ngTemplateOutlet=\"timeInput\" />\n <div class=\"tedi-time-field__actions\">\n <ng-container *ngTemplateOutlet=\"clearButton\" />\n <button\n tedi-button\n type=\"button\"\n variant=\"neutral\"\n size=\"small\"\n class=\"tedi-time-field__icon\"\n [class.tedi-time-field__icon--open]=\"popoverIsOpen()\"\n [attr.aria-label]=\"'time-field.select-time' | tediTranslate\"\n [attr.aria-expanded]=\"popoverIsOpen() || null\"\n aria-haspopup=\"dialog\"\n (click)=\"onIconClick()\"\n >\n <tedi-icon name=\"schedule\" color=\"inherit\" size=\"inherit\" />\n </button>\n </div>\n </div>\n <tedi-popover-content\n class=\"tedi-time-field__popover-content\"\n maxWidth=\"none\"\n >\n <ng-container *ngTemplateOutlet=\"pickerWheel\" />\n </tedi-popover-content>\n </tedi-popover>\n} @else {\n <!-- No picker / native picker / mobile-modal / disabled: plain field, no popover. -->\n <div\n #fieldEl\n class=\"tedi-time-field__field\"\n [class.tedi-field-surface]=\"paintsSurface()\"\n [class.tedi-field-surface--invalid]=\"paintsSurface() && invalid()\"\n [class.tedi-field-surface--valid]=\"paintsSurface() && valid()\"\n [class.tedi-field-surface--disabled]=\"paintsSurface() && disabled()\"\n >\n <ng-container *ngTemplateOutlet=\"timeInput\" />\n <div class=\"tedi-time-field__actions\">\n <ng-container *ngTemplateOutlet=\"clearButton\" />\n @if (hasNativePicker()) {\n <button\n tedi-button\n type=\"button\"\n variant=\"neutral\"\n size=\"small\"\n class=\"tedi-time-field__icon\"\n [attr.aria-label]=\"'time-field.select-time' | tediTranslate\"\n [disabled]=\"isDisabled()\"\n (click)=\"openNativePicker()\"\n >\n <tedi-icon name=\"schedule\" color=\"inherit\" size=\"inherit\" />\n </button>\n } @else if (hasPicker()) {\n <button\n tedi-button\n type=\"button\"\n variant=\"neutral\"\n size=\"small\"\n class=\"tedi-time-field__icon\"\n [attr.aria-label]=\"'time-field.select-time' | tediTranslate\"\n [disabled]=\"isDisabled()\"\n (click)=\"openPicker()\"\n >\n <tedi-icon name=\"schedule\" color=\"inherit\" size=\"inherit\" />\n </button>\n } @else {\n <span\n class=\"tedi-time-field__icon tedi-time-field__icon--static\"\n aria-hidden=\"true\"\n >\n <tedi-icon name=\"schedule\" color=\"inherit\" size=\"inherit\" />\n </span>\n }\n </div>\n </div>\n}\n\n<ng-template #timeInput>\n <input\n #inputElement\n class=\"tedi-time-field__input\"\n inputmode=\"numeric\"\n [type]=\"inputType()\"\n [id]=\"inputId()\"\n [attr.placeholder]=\"placeholder()\"\n [value]=\"inputValue()\"\n [disabled]=\"isDisabled()\"\n [readOnly]=\"inputIsTrigger()\"\n [attr.aria-invalid]=\"invalid() || null\"\n (click)=\"onInputClick($event)\"\n (input)=\"handleInput($event)\"\n (blur)=\"handleBlur()\"\n />\n</ng-template>\n\n<ng-template #clearButton>\n @if (showClear()) {\n <button\n tedi-closing-button\n type=\"button\"\n size=\"small\"\n class=\"tedi-time-field__clear\"\n [iconSize]=\"18\"\n [ariaLabel]=\"'time-field.clear' | tediTranslate\"\n (click)=\"onClearClick($event)\"\n ></button>\n <tedi-separator axis=\"vertical\" size=\"1rem\" />\n }\n</ng-template>\n\n<ng-template #pickerWheel>\n <tedi-time-picker\n #timePicker\n [value]=\"value()\"\n [variant]=\"customPickerVariant()\"\n [timeSlots]=\"timeSlots()\"\n [columns]=\"columns()\"\n [showSlotIndicator]=\"showSlotIndicator()\"\n [minuteStep]=\"minuteStep()\"\n [trapFocus]=\"true\"\n [style.--tedi-time-picker-dropdown-min-width.px]=\"dropdownMinWidth()\"\n (valueChange)=\"onPickerValueChange($event)\"\n (closeRequested)=\"closePopover()\"\n />\n</ng-template>\n", styles: [".tedi-time-field{display:flex;flex:1;min-width:0}.tedi-time-field--small .tedi-time-field__field{--_field-padding-y: var(--form-field-padding-y-sm);--_field-height: var(--form-field-height-sm)}.tedi-time-field--large .tedi-time-field__field{--_field-padding-y: var(--form-field-padding-y-lg);--_field-padding-x: var(--form-field-padding-x-lg);--_field-height: var(--form-field-height-lg)}.tedi-time-field__popover{display:flex;flex:1;min-width:0}.tedi-time-field__field{--_field-padding-y: var(--form-field-padding-y-md-default);--_field-padding-x: var(--form-field-padding-x-md-default);--_field-height: var(--form-field-height);--_field-border-color: var(--form-input-border-default);--_field-background: var(--form-input-background-default);--_field-ring-color: transparent;display:flex;flex:1;gap:var(--form-field-inner-spacing);align-items:center;min-width:0}.tedi-time-field__field:focus,.tedi-time-field__field:focus-visible{outline:none}.tedi-time-field__field:where(.tedi-field-surface){background:var(--_field-background);border:var(--tedi-borders-01) solid var(--_field-border-color);border-radius:var(--form-field-radius);box-shadow:inset 0 0 0 var(--tedi-borders-01) var(--_field-ring-color);height:var(--_field-height);padding:var(--_field-padding-y) var(--_field-padding-x)}.tedi-time-field__field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled):is([aria-invalid=true],.tedi-field-surface--invalid){--_field-border-color: var(--form-general-feedback-error-border)}.tedi-time-field__field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled).tedi-field-surface--valid{--_field-border-color: var(--form-general-feedback-success-border)}.tedi-time-field__field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled):active,.tedi-time-field__field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled):has(input:active,textarea:active),.tedi-time-field__field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled):focus-within,.tedi-time-field__field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled):has(input:focus-visible,textarea:focus-visible){--_field-ring-color: var(--_field-border-color)}.tedi-time-field__field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled,[aria-invalid=true],.tedi-field-surface--invalid,.tedi-field-surface--valid):hover,.tedi-time-field__field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled,[aria-invalid=true],.tedi-field-surface--invalid,.tedi-field-surface--valid):has(input:hover,textarea:hover){--_field-border-color: var(--form-input-border-hover)}.tedi-time-field__field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled,[aria-invalid=true],.tedi-field-surface--invalid,.tedi-field-surface--valid):active,.tedi-time-field__field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled,[aria-invalid=true],.tedi-field-surface--invalid,.tedi-field-surface--valid):has(input:active,textarea:active){--_field-border-color: var(--form-input-border-active)}.tedi-time-field__field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled,[aria-invalid=true],.tedi-field-surface--invalid,.tedi-field-surface--valid):focus-within,.tedi-time-field__field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled,[aria-invalid=true],.tedi-field-surface--invalid,.tedi-field-surface--valid):has(input:focus-visible,textarea:focus-visible){--_field-border-color: var(--form-input-border-focus)}.tedi-time-field__field.tedi-field-surface:is(:disabled,.tedi-field-surface--disabled){--_field-border-color: var(--form-input-border-disabled);--_field-background: var(--form-input-background-disabled);--_field-ring-color: transparent;cursor:not-allowed}.tedi-time-field__field--button-trigger{pointer-events:none}.tedi-time-field__field--button-trigger .tedi-time-field__input,.tedi-time-field__field--button-trigger .tedi-time-field__clear,.tedi-time-field__field--button-trigger .tedi-time-field__icon{pointer-events:auto}.tedi-time-field__input{flex:1;min-width:0;padding-inline-start:1px;margin-inline-start:-1px;font-family:inherit;font-size:var(--body-regular-size);color:var(--form-input-text-filled);outline:none;background:transparent;border:0;border-radius:var(--form-field-radius)}.tedi-time-field__input::placeholder{color:var(--form-input-text-placeholder)}.tedi-time-field__input:disabled{color:var(--form-input-text-disabled);cursor:not-allowed}.tedi-time-field__input::-webkit-calendar-picker-indicator,.tedi-time-field__input::-webkit-inner-spin-button,.tedi-time-field__input::-webkit-outer-spin-button,.tedi-time-field__input::-webkit-clear-button,.tedi-time-field__input::-webkit-list-button{display:none;margin:0;appearance:none}.tedi-time-field__actions{display:flex;flex-shrink:0;gap:var(--layout-grid-gutters-04);align-items:center;align-self:center;justify-content:center}.tedi-time-field__clear{flex-shrink:0}.tedi-time-field__clear:disabled{cursor:not-allowed}.tedi-time-field__popover-content.tedi-popover-content{padding:0}.tedi-time-field .tedi-time-field__icon{flex-shrink:0;--button-sm-icon-size: var(--form-field-button-height-sm);width:var(--button-sm-icon-size);height:var(--button-sm-icon-size);font-size:1.125rem;border-radius:var(--button-radius-sm)}@media(max-width:47.98rem){.tedi-time-field .tedi-time-field__icon{--button-sm-icon-size: var(--form-field-button-height)}}.tedi-time-field .tedi-time-field__icon:disabled{cursor:not-allowed}.tedi-time-field .tedi-time-field__icon--open:not(:disabled),.tedi-time-field .tedi-time-field__icon--open:not(:disabled):hover,.tedi-time-field .tedi-time-field__icon--open:not(:disabled):active{color:var(--_btn-active-text);background:var(--_btn-active-bg);border-color:var(--_btn-active-border)}.tedi-time-field .tedi-time-field__icon--static{display:inline-flex;align-items:center;justify-content:center;color:var(--form-input-text-placeholder)}\n"] }]
|
|
20723
|
+
}, template: "@if (usePopover()) {\n <!--\n The field wrapper is the popover anchor + trigger, so the picker matches the\n input width. Button-trigger mode disables clicks on everything but the icon\n (see SCSS); input-trigger mode opens from anywhere in the field.\n -->\n <tedi-popover\n #popover\n class=\"tedi-time-field__popover\"\n [position]=\"popoverPosition()\"\n [withArrow]=\"false\"\n [preventOverflow]=\"true\"\n >\n <div\n #fieldEl\n tedi-popover-trigger\n [interactive]=\"false\"\n class=\"tedi-time-field__field\"\n [class.tedi-time-field__field--button-trigger]=\"!inputIsTrigger()\"\n [class.tedi-field-surface]=\"paintsSurface()\"\n [class.tedi-field-surface--invalid]=\"paintsSurface() && invalid()\"\n [class.tedi-field-surface--valid]=\"paintsSurface() && valid()\"\n [class.tedi-field-surface--disabled]=\"paintsSurface() && disabled()\"\n [attr.tabindex]=\"-1\"\n (focus)=\"onFieldFocus($event)\"\n (click)=\"onFieldClick()\"\n >\n <ng-container *ngTemplateOutlet=\"timeInput\" />\n <div class=\"tedi-time-field__actions\">\n <ng-container *ngTemplateOutlet=\"clearButton\" />\n <button\n tedi-button\n type=\"button\"\n variant=\"neutral\"\n size=\"small\"\n class=\"tedi-time-field__icon\"\n [class.tedi-time-field__icon--open]=\"popoverIsOpen()\"\n [attr.aria-label]=\"'time-field.select-time' | tediTranslate\"\n [attr.aria-expanded]=\"popoverIsOpen() || null\"\n aria-haspopup=\"dialog\"\n (click)=\"onIconClick()\"\n >\n <tedi-icon name=\"schedule\" color=\"inherit\" size=\"inherit\" />\n </button>\n </div>\n </div>\n <tedi-popover-content\n class=\"tedi-time-field__popover-content\"\n maxWidth=\"none\"\n >\n <ng-container *ngTemplateOutlet=\"pickerWheel\" />\n </tedi-popover-content>\n </tedi-popover>\n} @else {\n <!-- No picker / native picker / mobile-modal / disabled: plain field, no popover. -->\n <div\n #fieldEl\n class=\"tedi-time-field__field\"\n [class.tedi-field-surface]=\"paintsSurface()\"\n [class.tedi-field-surface--invalid]=\"paintsSurface() && invalid()\"\n [class.tedi-field-surface--valid]=\"paintsSurface() && valid()\"\n [class.tedi-field-surface--disabled]=\"paintsSurface() && disabled()\"\n >\n <ng-container *ngTemplateOutlet=\"timeInput\" />\n <div class=\"tedi-time-field__actions\">\n <ng-container *ngTemplateOutlet=\"clearButton\" />\n @if (hasNativePicker()) {\n <button\n tedi-button\n type=\"button\"\n variant=\"neutral\"\n size=\"small\"\n class=\"tedi-time-field__icon\"\n [attr.aria-label]=\"'time-field.select-time' | tediTranslate\"\n [disabled]=\"isDisabled()\"\n (click)=\"openNativePicker()\"\n >\n <tedi-icon name=\"schedule\" color=\"inherit\" size=\"inherit\" />\n </button>\n } @else if (hasPicker()) {\n <button\n tedi-button\n type=\"button\"\n variant=\"neutral\"\n size=\"small\"\n class=\"tedi-time-field__icon\"\n [attr.aria-label]=\"'time-field.select-time' | tediTranslate\"\n [disabled]=\"isDisabled()\"\n (click)=\"openPicker()\"\n >\n <tedi-icon name=\"schedule\" color=\"inherit\" size=\"inherit\" />\n </button>\n } @else {\n <span\n class=\"tedi-time-field__icon tedi-time-field__icon--static\"\n aria-hidden=\"true\"\n >\n <tedi-icon name=\"schedule\" color=\"inherit\" size=\"inherit\" />\n </span>\n }\n </div>\n </div>\n}\n\n<ng-template #timeInput>\n <input\n #inputElement\n class=\"tedi-time-field__input\"\n inputmode=\"numeric\"\n [type]=\"inputType()\"\n [id]=\"inputId()\"\n [attr.placeholder]=\"placeholder()\"\n [value]=\"inputValue()\"\n [disabled]=\"isDisabled()\"\n [readOnly]=\"inputIsTrigger()\"\n [attr.aria-invalid]=\"invalid() || null\"\n (click)=\"onInputClick($event)\"\n (input)=\"handleInput($event)\"\n (blur)=\"handleBlur()\"\n />\n</ng-template>\n\n<ng-template #clearButton>\n @if (showClear()) {\n <button\n tedi-closing-button\n type=\"button\"\n size=\"small\"\n class=\"tedi-time-field__clear\"\n [iconSize]=\"18\"\n [ariaLabel]=\"'time-field.clear' | tediTranslate\"\n (click)=\"onClearClick($event)\"\n ></button>\n <tedi-separator axis=\"vertical\" size=\"1rem\" />\n }\n</ng-template>\n\n<ng-template #pickerWheel>\n <tedi-time-picker\n #timePicker\n [value]=\"value()\"\n [variant]=\"customPickerVariant()\"\n [timeSlots]=\"timeSlots()\"\n [columns]=\"columns()\"\n [showSlotIndicator]=\"showSlotIndicator()\"\n [minuteStep]=\"minuteStep()\"\n [trapFocus]=\"true\"\n [style.--tedi-time-picker-dropdown-min-width.px]=\"dropdownMinWidth()\"\n (valueChange)=\"onPickerValueChange($event)\"\n (selectionCommitted)=\"onPickerSelectionCommitted()\"\n (closeRequested)=\"closePopover()\"\n />\n</ng-template>\n", styles: [".tedi-time-field{display:flex;flex:1;min-width:0}.tedi-time-field--small .tedi-time-field__field{--_field-padding-y: var(--form-field-padding-y-sm);--_field-height: var(--form-field-height-sm)}.tedi-time-field--large .tedi-time-field__field{--_field-padding-y: var(--form-field-padding-y-lg);--_field-padding-x: var(--form-field-padding-x-lg);--_field-height: var(--form-field-height-lg)}.tedi-time-field__popover{display:flex;flex:1;min-width:0}.tedi-time-field__field{--_field-padding-y: var(--form-field-padding-y-md-default);--_field-padding-x: var(--form-field-padding-x-md-default);--_field-height: var(--form-field-height);--_field-border-color: var(--form-input-border-default);--_field-background: var(--form-input-background-default);--_field-ring-color: transparent;display:flex;flex:1;gap:var(--form-field-inner-spacing);align-items:center;min-width:0}.tedi-time-field__field:focus,.tedi-time-field__field:focus-visible{outline:none}.tedi-time-field__field:where(.tedi-field-surface){background:var(--_field-background);border:var(--tedi-borders-01) solid var(--_field-border-color);border-radius:var(--form-field-radius);box-shadow:inset 0 0 0 var(--tedi-borders-01) var(--_field-ring-color);height:var(--_field-height);padding:var(--_field-padding-y) var(--_field-padding-x)}.tedi-time-field__field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled):is([aria-invalid=true],.tedi-field-surface--invalid){--_field-border-color: var(--form-general-feedback-error-border)}.tedi-time-field__field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled).tedi-field-surface--valid{--_field-border-color: var(--form-general-feedback-success-border)}.tedi-time-field__field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled):active,.tedi-time-field__field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled):has(input:active,textarea:active),.tedi-time-field__field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled):focus-within,.tedi-time-field__field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled):has(input:focus-visible,textarea:focus-visible){--_field-ring-color: var(--_field-border-color)}.tedi-time-field__field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled,[aria-invalid=true],.tedi-field-surface--invalid,.tedi-field-surface--valid):hover,.tedi-time-field__field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled,[aria-invalid=true],.tedi-field-surface--invalid,.tedi-field-surface--valid):has(input:hover,textarea:hover){--_field-border-color: var(--form-input-border-hover)}.tedi-time-field__field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled,[aria-invalid=true],.tedi-field-surface--invalid,.tedi-field-surface--valid):active,.tedi-time-field__field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled,[aria-invalid=true],.tedi-field-surface--invalid,.tedi-field-surface--valid):has(input:active,textarea:active){--_field-border-color: var(--form-input-border-active)}.tedi-time-field__field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled,[aria-invalid=true],.tedi-field-surface--invalid,.tedi-field-surface--valid):focus-within,.tedi-time-field__field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled,[aria-invalid=true],.tedi-field-surface--invalid,.tedi-field-surface--valid):has(input:focus-visible,textarea:focus-visible){--_field-border-color: var(--form-input-border-focus)}.tedi-time-field__field.tedi-field-surface:is(:disabled,.tedi-field-surface--disabled){--_field-border-color: var(--form-input-border-disabled);--_field-background: var(--form-input-background-disabled);--_field-ring-color: transparent;cursor:not-allowed}.tedi-time-field__field--button-trigger{pointer-events:none}.tedi-time-field__field--button-trigger .tedi-time-field__input,.tedi-time-field__field--button-trigger .tedi-time-field__clear,.tedi-time-field__field--button-trigger .tedi-time-field__icon{pointer-events:auto}.tedi-time-field__input{flex:1;min-width:0;padding-inline-start:1px;margin-inline-start:-1px;font-family:inherit;font-size:var(--body-regular-size);color:var(--form-input-text-filled);outline:none;background:transparent;border:0;border-radius:var(--form-field-radius)}.tedi-time-field__input::placeholder{color:var(--form-input-text-placeholder)}.tedi-time-field__input:disabled{color:var(--form-input-text-disabled);cursor:not-allowed}.tedi-time-field__input::-webkit-calendar-picker-indicator,.tedi-time-field__input::-webkit-inner-spin-button,.tedi-time-field__input::-webkit-outer-spin-button,.tedi-time-field__input::-webkit-clear-button,.tedi-time-field__input::-webkit-list-button{display:none;margin:0;appearance:none}.tedi-time-field__actions{display:flex;flex-shrink:0;gap:var(--layout-grid-gutters-04);align-items:center;align-self:center;justify-content:center}.tedi-time-field__clear{flex-shrink:0}.tedi-time-field__clear:disabled{cursor:not-allowed}.tedi-time-field__popover-content.tedi-popover-content{padding:0}.tedi-time-field .tedi-time-field__icon{flex-shrink:0;--button-sm-icon-size: var(--form-field-button-height-sm);width:var(--button-sm-icon-size);height:var(--button-sm-icon-size);font-size:1.125rem;border-radius:var(--button-radius-sm)}@media(max-width:47.98rem){.tedi-time-field .tedi-time-field__icon{--button-sm-icon-size: var(--form-field-button-height)}}.tedi-time-field .tedi-time-field__icon:disabled{cursor:not-allowed}.tedi-time-field .tedi-time-field__icon--open:not(:disabled),.tedi-time-field .tedi-time-field__icon--open:not(:disabled):hover,.tedi-time-field .tedi-time-field__icon--open:not(:disabled):active{color:var(--_btn-active-text);background:var(--_btn-active-bg);border-color:var(--_btn-active-border)}.tedi-time-field .tedi-time-field__icon--static{display:inline-flex;align-items:center;justify-content:center;color:var(--form-input-text-placeholder)}\n"] }]
|
|
20674
20724
|
}], ctorParameters: () => [], propDecorators: { inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], invalidInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], disabledInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], pickerVariant: [{ type: i0.Input, args: [{ isSignal: true, alias: "pickerVariant", required: false }] }], useNativePicker: [{ type: i0.Input, args: [{ isSignal: true, alias: "useNativePicker", required: false }] }], pickerTrigger: [{ type: i0.Input, args: [{ isSignal: true, alias: "pickerTrigger", required: false }] }], closeOnSelect: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnSelect", required: false }] }], timeSlots: [{ type: i0.Input, args: [{ isSignal: true, alias: "timeSlots", required: false }] }], columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }], showSlotIndicator: [{ type: i0.Input, args: [{ isSignal: true, alias: "showSlotIndicator", required: false }] }], minuteStep: [{ type: i0.Input, args: [{ isSignal: true, alias: "minuteStep", required: false }] }], modal: [{ type: i0.Input, args: [{ isSignal: true, alias: "modal", required: false }] }], fullscreen: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullscreen", required: false }] }], inputElement: [{ type: i0.ViewChild, args: ["inputElement", { isSignal: true }] }], fieldEl: [{ type: i0.ViewChild, args: ["fieldEl", { isSignal: true }] }], popover: [{ type: i0.ViewChild, args: ["popover", { isSignal: true }] }], timePicker: [{ type: i0.ViewChild, args: ["timePicker", { isSignal: true }] }] } });
|
|
20675
20725
|
|
|
20676
20726
|
class ProgressBarComponent {
|
|
@@ -21303,32 +21353,32 @@ class TimelineItemComponent {
|
|
|
21303
21353
|
return "secondary";
|
|
21304
21354
|
}, ...(ngDevMode ? [{ debugName: "color" }] : []));
|
|
21305
21355
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: TimelineItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
21306
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: TimelineItemComponent, isStandalone: true, selector: "tedi-timeline-item", inputs: { timings: { classPropertyName: "timings", publicName: "timings", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.tedi-timeline__item--has-bottom": "isMobile() && !!timingsBottom()" }, classAttribute: "tedi-timeline-item" }, queries: [{ propertyName: "timingsBottom", first: true, predicate: TimelineTimingsBottomDirective, descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"tedi-timeline__timings\">\n @for (timing of timings(); track timing; let index = $index) {\n <div tedi-text color=\"tertiary\" class=\"tedi-timeline__time\">\n {{ timing }}\n </div>\n }\n @if (!isMobile() && timingsBottom()) {\n <div class=\"tedi-timeline__timings-bottom\">\n <ng-container *ngTemplateOutlet=\"timingsBottom()!.templateRef\" />\n </div>\n }\n</div>\n<div\n class=\"tedi-timeline__marker\"\n [ngClass]=\"{ 'tedi-timeline__marker--large': state() === 'current' }\"\n>\n <tedi-separator\n [color]=\"color()\"\n variant=\"dot-only\"\n [dotSize]=\"state() === 'current' ? 'large' : 'medium'\"\n [dotFilled]=\"state() !== 'future'\"\n />\n @if (!isLast()) {\n <tedi-separator\n axis=\"vertical\"\n [color]=\"state() === 'past' ? 'accent' : 'secondary'\"\n />\n }\n</div>\n<div class=\"tedi-timeline__info\">\n <div>\n <ng-content select=\"tedi-timeline-title\" />\n <ng-content select=\"tedi-timeline-description\" />\n </div>\n <div class=\"tedi-timeline__content\">\n <ng-content />\n </div>\n</div>\n@if (isMobile() && timingsBottom()) {\n <div class=\"tedi-timeline__timings-bottom\">\n <ng-container *ngTemplateOutlet=\"timingsBottom()!.templateRef\" />\n </div>\n}\n", styles: [":root{--timeline-padding-y: 8px;--timeline-text-min-height: 24px;--timeline-dot-offset-md: calc( (var(--timeline-text-min-height) - var(--separator-dot-size-md)) / 2 );--timeline-dot-offset-lg: calc( (var(--timeline-text-min-height) - var(--separator-dot-size-lg)) / 2 )}tedi-timeline-item{display:contents}tedi-timeline-item .tedi-timeline__timings{display:flex;grid-row:auto;grid-column:2;gap:var(--layout-grid-gutters-04);align-items:center}@media(min-width:62rem){tedi-timeline-item .tedi-timeline__timings{flex-direction:column;grid-column:1;gap:0;align-items:end;padding-bottom:var(--timeline-padding-y)}}@media(min-width:62rem){tedi-timeline-item .tedi-timeline__timings>.tedi-timeline__timings-bottom{margin-top:auto;text-align:right}}tedi-timeline-item .tedi-timeline__timings .tedi-timeline__time{position:relative;display:flex;align-items:center;font-size:var(--body-small-regular-size)}@media(min-width:62rem){tedi-timeline-item .tedi-timeline__timings .tedi-timeline__time{min-height:var(--timeline-text-min-height)}tedi-timeline-item .tedi-timeline__timings .tedi-timeline__time:first-child{font-size:var(--body-regular-size)}}@media(max-width:61.98rem){tedi-timeline-item .tedi-timeline__timings .tedi-timeline__time:before{display:none;width:var(--separator-dot-size-sm);height:var(--separator-dot-size-sm);margin-inline:var(--layout-grid-gutters-04);content:\"\";background-color:currentcolor;border-radius:50%}tedi-timeline-item .tedi-timeline__timings .tedi-timeline__time:not(:first-child):before{display:inline-block}}tedi-timeline-item .tedi-timeline__marker{display:flex;flex-direction:column;grid-row:span 2;grid-column:1;align-items:center;align-self:stretch;padding-top:var(--timeline-dot-offset-md)}tedi-timeline-item .tedi-timeline__marker:not(:last-child){margin-bottom:calc(-1 * var(--timeline-dot-offset-md))}@media(min-width:62rem){tedi-timeline-item .tedi-timeline__marker{grid-row:auto;grid-column:2}}tedi-timeline-item .tedi-timeline__marker--large{padding-top:var(--timeline-dot-offset-lg)}tedi-timeline-item .tedi-timeline__info{display:flex;flex-direction:column;grid-row:auto;grid-column:2;gap:var(--timeline-padding-y);padding-bottom:var(--timeline-padding-y)}@media(min-width:62rem){tedi-timeline-item .tedi-timeline__info{grid-column:3}}tedi-timeline-item .tedi-timeline__content{display:flex;flex-direction:column;gap:var(--timeline-padding-y)}tedi-timeline-item>.tedi-timeline__timings-bottom{grid-row:auto;grid-column:2;padding-bottom:var(--timeline-padding-y)}tedi-timeline-item.tedi-timeline__item--has-bottom .tedi-timeline__marker{grid-row:span 3}\n"], dependencies: [{ kind: "component", type: SeparatorComponent, selector: "tedi-separator", inputs: ["axis", "color", "variant", "dotSize", "dotFilled", "thickness", "spacing", "size"] }, { kind: "component", type: TextComponent, selector: "[tedi-text]", inputs: ["modifiers", "color"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
21356
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: TimelineItemComponent, isStandalone: true, selector: "tedi-timeline-item", inputs: { timings: { classPropertyName: "timings", publicName: "timings", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.tedi-timeline__item--has-bottom": "isMobile() && !!timingsBottom()" }, classAttribute: "tedi-timeline-item" }, queries: [{ propertyName: "timingsBottom", first: true, predicate: TimelineTimingsBottomDirective, descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"tedi-timeline__timings\">\n @for (timing of timings(); track timing; let index = $index) {\n <div tedi-text color=\"tertiary\" class=\"tedi-timeline__time\">\n {{ timing }}\n </div>\n }\n @if (!isMobile() && timingsBottom()) {\n <div class=\"tedi-timeline__timings-bottom\">\n <ng-container *ngTemplateOutlet=\"timingsBottom()!.templateRef\" />\n </div>\n }\n</div>\n<div\n class=\"tedi-timeline__marker\"\n [ngClass]=\"{ 'tedi-timeline__marker--large': state() === 'current' }\"\n>\n <tedi-separator\n [color]=\"color()\"\n variant=\"dot-only\"\n [dotSize]=\"state() === 'current' ? 'large' : 'medium'\"\n [dotFilled]=\"state() !== 'future'\"\n />\n @if (!isLast()) {\n <tedi-separator\n axis=\"vertical\"\n [color]=\"state() === 'past' ? 'accent' : 'secondary'\"\n />\n }\n</div>\n<div class=\"tedi-timeline__info\">\n <div>\n <ng-content select=\"tedi-timeline-title\" />\n <ng-content select=\"tedi-timeline-description\" />\n </div>\n <div class=\"tedi-timeline__content\">\n <ng-content />\n </div>\n</div>\n@if (isMobile() && timingsBottom()) {\n <div class=\"tedi-timeline__timings-bottom\">\n <ng-container *ngTemplateOutlet=\"timingsBottom()!.templateRef\" />\n </div>\n}\n", styles: [":root{--timeline-padding-y: 8px;--timeline-text-min-height: 24px;--timeline-dot-offset-md: calc( (var(--timeline-text-min-height) - var(--separator-dot-size-md)) / 2 );--timeline-dot-offset-lg: calc( (var(--timeline-text-min-height) - var(--separator-dot-size-lg)) / 2 )}tedi-timeline-item{display:contents}tedi-timeline-item .tedi-timeline__timings{display:flex;grid-row:auto;grid-column:2;gap:var(--layout-grid-gutters-04);align-items:center}@media(min-width:62rem){tedi-timeline-item .tedi-timeline__timings{flex-direction:column;grid-column:1;gap:0;align-items:end;padding-bottom:var(--timeline-padding-y)}}@media(min-width:62rem){tedi-timeline-item .tedi-timeline__timings>.tedi-timeline__timings-bottom{margin-top:auto;text-align:right}}tedi-timeline-item .tedi-timeline__timings .tedi-timeline__time{position:relative;display:flex;align-items:center;font-size:var(--body-small-regular-size)}@media(min-width:62rem){tedi-timeline-item .tedi-timeline__timings .tedi-timeline__time{min-height:var(--timeline-text-min-height)}tedi-timeline-item .tedi-timeline__timings .tedi-timeline__time:first-child{font-size:var(--body-regular-size)}}@media(max-width:61.98rem){tedi-timeline-item .tedi-timeline__timings .tedi-timeline__time:before{display:none;width:var(--separator-dot-size-sm);height:var(--separator-dot-size-sm);margin-inline:var(--layout-grid-gutters-04);content:\"\";background-color:currentcolor;border-radius:50%}tedi-timeline-item .tedi-timeline__timings .tedi-timeline__time:not(:first-child):before{display:inline-block}}tedi-timeline-item .tedi-timeline__marker{display:flex;flex-direction:column;grid-row:span 2;grid-column:1;align-items:center;align-self:stretch;padding-top:var(--timeline-dot-offset-md)}tedi-timeline-item .tedi-timeline__marker:not(:last-child){margin-bottom:calc(-1 * var(--timeline-dot-offset-md))}@media(min-width:62rem){tedi-timeline-item .tedi-timeline__marker{grid-row:auto;grid-column:2}}tedi-timeline-item .tedi-timeline__marker--large{padding-top:var(--timeline-dot-offset-lg)}tedi-timeline-item .tedi-timeline__info{display:flex;flex-direction:column;grid-row:auto;grid-column:2;gap:var(--timeline-padding-y);padding-bottom:var(--timeline-padding-y)}@media(min-width:62rem){tedi-timeline-item .tedi-timeline__info{grid-column:3}}tedi-timeline-item .tedi-timeline__content{display:flex;flex-direction:column;gap:var(--timeline-padding-y)}tedi-timeline-item .tedi-timeline__content:empty{display:none}tedi-timeline-item>.tedi-timeline__timings-bottom{grid-row:auto;grid-column:2;padding-bottom:var(--timeline-padding-y)}tedi-timeline-item.tedi-timeline__item--has-bottom .tedi-timeline__marker{grid-row:span 3}\n"], dependencies: [{ kind: "component", type: SeparatorComponent, selector: "tedi-separator", inputs: ["axis", "color", "variant", "dotSize", "dotFilled", "thickness", "spacing", "size"] }, { kind: "component", type: TextComponent, selector: "[tedi-text]", inputs: ["modifiers", "color"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
21307
21357
|
}
|
|
21308
21358
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: TimelineItemComponent, decorators: [{
|
|
21309
21359
|
type: Component,
|
|
21310
21360
|
args: [{ standalone: true, selector: "tedi-timeline-item", imports: [SeparatorComponent, TextComponent, NgClass, NgTemplateOutlet], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
21311
21361
|
class: "tedi-timeline-item",
|
|
21312
21362
|
"[class.tedi-timeline__item--has-bottom]": "isMobile() && !!timingsBottom()",
|
|
21313
|
-
}, template: "<div class=\"tedi-timeline__timings\">\n @for (timing of timings(); track timing; let index = $index) {\n <div tedi-text color=\"tertiary\" class=\"tedi-timeline__time\">\n {{ timing }}\n </div>\n }\n @if (!isMobile() && timingsBottom()) {\n <div class=\"tedi-timeline__timings-bottom\">\n <ng-container *ngTemplateOutlet=\"timingsBottom()!.templateRef\" />\n </div>\n }\n</div>\n<div\n class=\"tedi-timeline__marker\"\n [ngClass]=\"{ 'tedi-timeline__marker--large': state() === 'current' }\"\n>\n <tedi-separator\n [color]=\"color()\"\n variant=\"dot-only\"\n [dotSize]=\"state() === 'current' ? 'large' : 'medium'\"\n [dotFilled]=\"state() !== 'future'\"\n />\n @if (!isLast()) {\n <tedi-separator\n axis=\"vertical\"\n [color]=\"state() === 'past' ? 'accent' : 'secondary'\"\n />\n }\n</div>\n<div class=\"tedi-timeline__info\">\n <div>\n <ng-content select=\"tedi-timeline-title\" />\n <ng-content select=\"tedi-timeline-description\" />\n </div>\n <div class=\"tedi-timeline__content\">\n <ng-content />\n </div>\n</div>\n@if (isMobile() && timingsBottom()) {\n <div class=\"tedi-timeline__timings-bottom\">\n <ng-container *ngTemplateOutlet=\"timingsBottom()!.templateRef\" />\n </div>\n}\n", styles: [":root{--timeline-padding-y: 8px;--timeline-text-min-height: 24px;--timeline-dot-offset-md: calc( (var(--timeline-text-min-height) - var(--separator-dot-size-md)) / 2 );--timeline-dot-offset-lg: calc( (var(--timeline-text-min-height) - var(--separator-dot-size-lg)) / 2 )}tedi-timeline-item{display:contents}tedi-timeline-item .tedi-timeline__timings{display:flex;grid-row:auto;grid-column:2;gap:var(--layout-grid-gutters-04);align-items:center}@media(min-width:62rem){tedi-timeline-item .tedi-timeline__timings{flex-direction:column;grid-column:1;gap:0;align-items:end;padding-bottom:var(--timeline-padding-y)}}@media(min-width:62rem){tedi-timeline-item .tedi-timeline__timings>.tedi-timeline__timings-bottom{margin-top:auto;text-align:right}}tedi-timeline-item .tedi-timeline__timings .tedi-timeline__time{position:relative;display:flex;align-items:center;font-size:var(--body-small-regular-size)}@media(min-width:62rem){tedi-timeline-item .tedi-timeline__timings .tedi-timeline__time{min-height:var(--timeline-text-min-height)}tedi-timeline-item .tedi-timeline__timings .tedi-timeline__time:first-child{font-size:var(--body-regular-size)}}@media(max-width:61.98rem){tedi-timeline-item .tedi-timeline__timings .tedi-timeline__time:before{display:none;width:var(--separator-dot-size-sm);height:var(--separator-dot-size-sm);margin-inline:var(--layout-grid-gutters-04);content:\"\";background-color:currentcolor;border-radius:50%}tedi-timeline-item .tedi-timeline__timings .tedi-timeline__time:not(:first-child):before{display:inline-block}}tedi-timeline-item .tedi-timeline__marker{display:flex;flex-direction:column;grid-row:span 2;grid-column:1;align-items:center;align-self:stretch;padding-top:var(--timeline-dot-offset-md)}tedi-timeline-item .tedi-timeline__marker:not(:last-child){margin-bottom:calc(-1 * var(--timeline-dot-offset-md))}@media(min-width:62rem){tedi-timeline-item .tedi-timeline__marker{grid-row:auto;grid-column:2}}tedi-timeline-item .tedi-timeline__marker--large{padding-top:var(--timeline-dot-offset-lg)}tedi-timeline-item .tedi-timeline__info{display:flex;flex-direction:column;grid-row:auto;grid-column:2;gap:var(--timeline-padding-y);padding-bottom:var(--timeline-padding-y)}@media(min-width:62rem){tedi-timeline-item .tedi-timeline__info{grid-column:3}}tedi-timeline-item .tedi-timeline__content{display:flex;flex-direction:column;gap:var(--timeline-padding-y)}tedi-timeline-item>.tedi-timeline__timings-bottom{grid-row:auto;grid-column:2;padding-bottom:var(--timeline-padding-y)}tedi-timeline-item.tedi-timeline__item--has-bottom .tedi-timeline__marker{grid-row:span 3}\n"] }]
|
|
21363
|
+
}, template: "<div class=\"tedi-timeline__timings\">\n @for (timing of timings(); track timing; let index = $index) {\n <div tedi-text color=\"tertiary\" class=\"tedi-timeline__time\">\n {{ timing }}\n </div>\n }\n @if (!isMobile() && timingsBottom()) {\n <div class=\"tedi-timeline__timings-bottom\">\n <ng-container *ngTemplateOutlet=\"timingsBottom()!.templateRef\" />\n </div>\n }\n</div>\n<div\n class=\"tedi-timeline__marker\"\n [ngClass]=\"{ 'tedi-timeline__marker--large': state() === 'current' }\"\n>\n <tedi-separator\n [color]=\"color()\"\n variant=\"dot-only\"\n [dotSize]=\"state() === 'current' ? 'large' : 'medium'\"\n [dotFilled]=\"state() !== 'future'\"\n />\n @if (!isLast()) {\n <tedi-separator\n axis=\"vertical\"\n [color]=\"state() === 'past' ? 'accent' : 'secondary'\"\n />\n }\n</div>\n<div class=\"tedi-timeline__info\">\n <div>\n <ng-content select=\"tedi-timeline-title\" />\n <ng-content select=\"tedi-timeline-description\" />\n </div>\n <div class=\"tedi-timeline__content\">\n <ng-content />\n </div>\n</div>\n@if (isMobile() && timingsBottom()) {\n <div class=\"tedi-timeline__timings-bottom\">\n <ng-container *ngTemplateOutlet=\"timingsBottom()!.templateRef\" />\n </div>\n}\n", styles: [":root{--timeline-padding-y: 8px;--timeline-text-min-height: 24px;--timeline-dot-offset-md: calc( (var(--timeline-text-min-height) - var(--separator-dot-size-md)) / 2 );--timeline-dot-offset-lg: calc( (var(--timeline-text-min-height) - var(--separator-dot-size-lg)) / 2 )}tedi-timeline-item{display:contents}tedi-timeline-item .tedi-timeline__timings{display:flex;grid-row:auto;grid-column:2;gap:var(--layout-grid-gutters-04);align-items:center}@media(min-width:62rem){tedi-timeline-item .tedi-timeline__timings{flex-direction:column;grid-column:1;gap:0;align-items:end;padding-bottom:var(--timeline-padding-y)}}@media(min-width:62rem){tedi-timeline-item .tedi-timeline__timings>.tedi-timeline__timings-bottom{margin-top:auto;text-align:right}}tedi-timeline-item .tedi-timeline__timings .tedi-timeline__time{position:relative;display:flex;align-items:center;font-size:var(--body-small-regular-size)}@media(min-width:62rem){tedi-timeline-item .tedi-timeline__timings .tedi-timeline__time{min-height:var(--timeline-text-min-height)}tedi-timeline-item .tedi-timeline__timings .tedi-timeline__time:first-child{font-size:var(--body-regular-size)}}@media(max-width:61.98rem){tedi-timeline-item .tedi-timeline__timings .tedi-timeline__time:before{display:none;width:var(--separator-dot-size-sm);height:var(--separator-dot-size-sm);margin-inline:var(--layout-grid-gutters-04);content:\"\";background-color:currentcolor;border-radius:50%}tedi-timeline-item .tedi-timeline__timings .tedi-timeline__time:not(:first-child):before{display:inline-block}}tedi-timeline-item .tedi-timeline__marker{display:flex;flex-direction:column;grid-row:span 2;grid-column:1;align-items:center;align-self:stretch;padding-top:var(--timeline-dot-offset-md)}tedi-timeline-item .tedi-timeline__marker:not(:last-child){margin-bottom:calc(-1 * var(--timeline-dot-offset-md))}@media(min-width:62rem){tedi-timeline-item .tedi-timeline__marker{grid-row:auto;grid-column:2}}tedi-timeline-item .tedi-timeline__marker--large{padding-top:var(--timeline-dot-offset-lg)}tedi-timeline-item .tedi-timeline__info{display:flex;flex-direction:column;grid-row:auto;grid-column:2;gap:var(--timeline-padding-y);padding-bottom:var(--timeline-padding-y)}@media(min-width:62rem){tedi-timeline-item .tedi-timeline__info{grid-column:3}}tedi-timeline-item .tedi-timeline__content{display:flex;flex-direction:column;gap:var(--timeline-padding-y)}tedi-timeline-item .tedi-timeline__content:empty{display:none}tedi-timeline-item>.tedi-timeline__timings-bottom{grid-row:auto;grid-column:2;padding-bottom:var(--timeline-padding-y)}tedi-timeline-item.tedi-timeline__item--has-bottom .tedi-timeline__marker{grid-row:span 3}\n"] }]
|
|
21314
21364
|
}], propDecorators: { timings: [{ type: i0.Input, args: [{ isSignal: true, alias: "timings", required: false }] }], timingsBottom: [{ type: i0.ContentChild, args: [i0.forwardRef(() => TimelineTimingsBottomDirective), { isSignal: true }] }] } });
|
|
21315
21365
|
|
|
21316
21366
|
class TimelineDescriptionComponent {
|
|
21317
21367
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: TimelineDescriptionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
21318
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.24", type: TimelineDescriptionComponent, isStandalone: true, selector: "tedi-timeline-description", ngImport: i0, template: "<ng-content />", isInline: true, styles: ["tedi-timeline-description{display:flex;gap:var(--layout-grid-gutters-04);align-items:center;min-height:var(--timeline-text-min-height);font-size:var(--body-small-regular-size);font-weight:var(--body-small-regular-weight);line-height:var(--body-small-regular-line-height);color:var(--general-text-tertiary)}tedi-timeline-description>*{font-size:inherit;font-weight:inherit;line-height:inherit}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
21368
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.24", type: TimelineDescriptionComponent, isStandalone: true, selector: "tedi-timeline-description", ngImport: i0, template: "<ng-content />", isInline: true, styles: ["tedi-timeline-description{display:flex;gap:var(--layout-grid-gutters-04);align-items:center;min-height:var(--timeline-text-min-height);font-size:var(--body-small-regular-size);font-weight:var(--body-small-regular-weight);line-height:var(--body-small-regular-line-height);color:var(--general-text-tertiary)}tedi-timeline-description:empty{display:none}tedi-timeline-description>*{font-size:inherit;font-weight:inherit;line-height:inherit}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
21319
21369
|
}
|
|
21320
21370
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: TimelineDescriptionComponent, decorators: [{
|
|
21321
21371
|
type: Component,
|
|
21322
|
-
args: [{ standalone: true, selector: "tedi-timeline-description", template: "<ng-content />", encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, styles: ["tedi-timeline-description{display:flex;gap:var(--layout-grid-gutters-04);align-items:center;min-height:var(--timeline-text-min-height);font-size:var(--body-small-regular-size);font-weight:var(--body-small-regular-weight);line-height:var(--body-small-regular-line-height);color:var(--general-text-tertiary)}tedi-timeline-description>*{font-size:inherit;font-weight:inherit;line-height:inherit}\n"] }]
|
|
21372
|
+
args: [{ standalone: true, selector: "tedi-timeline-description", template: "<ng-content />", encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, styles: ["tedi-timeline-description{display:flex;gap:var(--layout-grid-gutters-04);align-items:center;min-height:var(--timeline-text-min-height);font-size:var(--body-small-regular-size);font-weight:var(--body-small-regular-weight);line-height:var(--body-small-regular-line-height);color:var(--general-text-tertiary)}tedi-timeline-description:empty{display:none}tedi-timeline-description>*{font-size:inherit;font-weight:inherit;line-height:inherit}\n"] }]
|
|
21323
21373
|
}] });
|
|
21324
21374
|
|
|
21325
21375
|
class TimelineTitleComponent {
|
|
21326
21376
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: TimelineTitleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
21327
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.24", type: TimelineTitleComponent, isStandalone: true, selector: "tedi-timeline-title", ngImport: i0, template: "<ng-content />", isInline: true, styles: ["tedi-timeline-title{display:flex;gap:var(--layout-grid-gutters-04);align-items:center;min-height:var(--timeline-text-min-height);font-size:var(--body-small-bold-size);font-weight:var(--body-bold-weight);line-height:var(--body-small-bold-line-height);color:var(--general-text-secondary)}tedi-timeline-title>*{font-size:inherit;font-weight:inherit;line-height:inherit}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
21377
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.24", type: TimelineTitleComponent, isStandalone: true, selector: "tedi-timeline-title", ngImport: i0, template: "<ng-content />", isInline: true, styles: ["tedi-timeline-title{display:flex;gap:var(--layout-grid-gutters-04);align-items:center;min-height:var(--timeline-text-min-height);font-size:var(--body-small-bold-size);font-weight:var(--body-bold-weight);line-height:var(--body-small-bold-line-height);color:var(--general-text-secondary)}tedi-timeline-title:empty{display:none}tedi-timeline-title>*{font-size:inherit;font-weight:inherit;line-height:inherit}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
21328
21378
|
}
|
|
21329
21379
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: TimelineTitleComponent, decorators: [{
|
|
21330
21380
|
type: Component,
|
|
21331
|
-
args: [{ standalone: true, selector: "tedi-timeline-title", template: "<ng-content />", encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, styles: ["tedi-timeline-title{display:flex;gap:var(--layout-grid-gutters-04);align-items:center;min-height:var(--timeline-text-min-height);font-size:var(--body-small-bold-size);font-weight:var(--body-bold-weight);line-height:var(--body-small-bold-line-height);color:var(--general-text-secondary)}tedi-timeline-title>*{font-size:inherit;font-weight:inherit;line-height:inherit}\n"] }]
|
|
21381
|
+
args: [{ standalone: true, selector: "tedi-timeline-title", template: "<ng-content />", encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, styles: ["tedi-timeline-title{display:flex;gap:var(--layout-grid-gutters-04);align-items:center;min-height:var(--timeline-text-min-height);font-size:var(--body-small-bold-size);font-weight:var(--body-bold-weight);line-height:var(--body-small-bold-line-height);color:var(--general-text-secondary)}tedi-timeline-title:empty{display:none}tedi-timeline-title>*{font-size:inherit;font-weight:inherit;line-height:inherit}\n"] }]
|
|
21332
21382
|
}] });
|
|
21333
21383
|
|
|
21334
21384
|
class FooterComponent {
|