@rt-tools/ui-kit-v2 0.20.0 → 0.22.0

package/fesm2022/rt-tools-ui-kit-v2-data-table.mjs

@@ -833,7 +833,7 @@ class RtDataTableFilterCellComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtDataTableFilterCellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: RtDataTableFilterCellComponent, isStandalone: true, selector: "rt-data-table-filter-cell", inputs: { appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, filterProperty: { classPropertyName: "filterProperty", publicName: "filterProperty", isSignal: true, isRequired: true, transformFunction: null }, filterType: { classPropertyName: "filterType", publicName: "filterType", isSignal: true, isRequired: true, transformFunction: null }, filterModel: { classPropertyName: "filterModel", publicName: "filterModel", isSignal: true, isRequired: false, transformFunction: null }, defaultFilterOperator: { classPropertyName: "defaultFilterOperator", publicName: "defaultFilterOperator", isSignal: true, isRequired: false, transformFunction: null }, filterOperators: { classPropertyName: "filterOperators", publicName: "filterOperators", isSignal: true, isRequired: false, transformFunction: null }, filterSelectOptions: { classPropertyName: "filterSelectOptions", publicName: "filterSelectOptions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { filterChange: "filterChange" }, host: { classAttribute: "rt-data-table-filter-cell" }, ngImport: i0, template: "<ng-container rtBlock=\"rt-data-table-filter-cell\">\n    @if (filterOperators().length) {\n        <rt-menu qa-dataid=\"data-table-filter-operator\" align=\"start\" [icon]=\"operatorIcon()\" [ariaLabel]=\"operatorLabel()\">\n            @for (item of operatorItems(); track item.operator) {\n                <rt-menu-item\n                    qa-dataid=\"data-table-filter-operator-item\"\n                    [icon]=\"item.icon\"\n                    [label]=\"item.label\"\n                    (selected)=\"onOperatorChange(item.operator)\" />\n            }\n        </rt-menu>\n    }\n\n    @switch (filterType()) {\n        @case (filterTypes.TEXT) {\n            <rt-input\n                rtElem=\"field\"\n                qa-dataid=\"data-table-filter-input\"\n                size=\"sm\"\n                [appearance]=\"appearance()\"\n                [placeholder]=\"valuePlaceholder()\"\n                [ngModel]=\"currentFilter().value\"\n                [ngModelOptions]=\"{ standalone: true }\"\n                (ngModelChange)=\"onDraft($event)\"\n                (keydown.enter)=\"onCommit()\"\n                (focusout)=\"onCommit()\" />\n        }\n        @case (filterTypes.NUMBER) {\n            <rt-input-number\n                rtElem=\"field\"\n                qa-dataid=\"data-table-filter-number\"\n                size=\"sm\"\n                [appearance]=\"appearance()\"\n                [placeholder]=\"valuePlaceholder()\"\n                [ngModel]=\"number()\"\n                [ngModelOptions]=\"{ standalone: true }\"\n                (ngModelChange)=\"onNumberDraft($event)\"\n                (keydown.enter)=\"onCommit()\"\n                (focusout)=\"onCommit()\" />\n        }\n        @case (filterTypes.DATE) {\n            <rt-icon-button\n                qa-dataid=\"data-table-filter-clear\"\n                icon=\"close\"\n                [ariaLabel]=\"clearLabel()\"\n                [tooltip]=\"clearLabel()\"\n                [disabled]=\"!hasValue()\"\n                (clicked)=\"onClear()\" />\n\n            <rt-date-picker\n                rtElem=\"field\"\n                qa-dataid=\"data-table-filter-date\"\n                size=\"sm\"\n                [appearance]=\"appearance()\"\n                [clearable]=\"false\"\n                [ngModel]=\"day()\"\n                [ngModelOptions]=\"{ standalone: true }\"\n                (ngModelChange)=\"onDayChange($event)\" />\n        }\n        @case (filterTypes.SELECT) {\n            <rt-icon-button\n                qa-dataid=\"data-table-filter-clear\"\n                icon=\"close\"\n                [ariaLabel]=\"clearLabel()\"\n                [tooltip]=\"clearLabel()\"\n                [disabled]=\"!hasValue()\"\n                (clicked)=\"onClear()\" />\n\n            <rt-select\n                rtElem=\"field\"\n                qa-dataid=\"data-table-filter-select\"\n                size=\"sm\"\n                [appearance]=\"appearance()\"\n                [clearable]=\"false\"\n                [options]=\"selectOptions()\"\n                [placeholder]=\"selectPlaceholder()\"\n                [ngModel]=\"currentFilter().value || null\"\n                [ngModelOptions]=\"{ standalone: true }\"\n                (selectionChange)=\"onValueChange($event)\" />\n        }\n    }\n</ng-container>\n", styles: ["@charset \"UTF-8\";@layer rt-kit.components{.rt-data-table-filter-cell{display:flex;width:100%;align-items:center;justify-content:flex-start;gap:var(--rt-space-sm)}.rt-data-table-filter-cell__field{--rt-input-height-sm: var(--rt-list-search-height);--rt-input-font-size: var(--rt-list-search-font-size);--rt-input-color-border: var(--rt-list-search-color-border);--rt-input-color-bg: var(--rt-list-search-color-bg);--rt-input-color-text-placeholder: var(--rt-list-search-color-placeholder);--rt-input-line-height: var(--rt-list-filter-line-height);min-width:0;flex-grow:1}.rt-data-table-filter-cell .rt-data-table-filter-cell__field{width:calc(180px + 2 * var(--rt-space-4))}.rt-data-table-filter-cell rt-icon-button{--rt-icon-button-color: var(--rt-list-table-icon-color)}.rt-data-table-filter-cell .rt-icon-button{--rt-icon-button-size-step: var(--rt-list-table-button-size);--rt-icon-button-radius: var(--rt-list-table-button-radius)}.rt-data-table-filter-cell .rt-icon-button__icon{min-width:var(--rt-list-table-icon-size);min-height:var(--rt-list-table-icon-size)}}\n"], dependencies: [{ kind: "component", type: 
                 // components
-                RtDatePickerComponent, selector: "rt-date-picker", inputs: ["appearance", "type", "min", "max", "minuteStep"] }, { kind: "component", type: RtIconButtonComponent, selector: "rt-icon-button", inputs: ["icon", "glyph", "ariaLabel", "variant", "iconColor", "iconFill", "size", "iconSize", "type", "tooltip", "tabIndex", "loading", "disabled", "active", "indicator"], outputs: ["clicked"] }, { kind: "component", type: RtInputComponent, selector: "rt-input", inputs: ["appearance", "type", "placeholder", "iconLeft", "iconRight", "passwordToggle", "autocomplete"] }, { kind: "component", type: RtInputNumberComponent, selector: "rt-input-number", inputs: ["appearance", "iconLeft", "prefix", "placeholder", "min", "max", "minFractionDigits", "maxFractionDigits", "grouped"] }, { kind: "component", type: RtMenuComponent, selector: "rt-menu", inputs: ["icon", "ariaLabel", "align", "panelClass", "size", "disabled"], outputs: ["openedChange"] }, { kind: "component", type: RtMenuItemComponent, selector: "rt-menu-item", inputs: ["icon", "label", "danger", "success", "glyph", "fill", "current", "disabled", "confirmMessage", "confirmTitle", "confirmLabel", "confirmCancelLabel", "confirmTone", "link"], outputs: ["selected"] }, { kind: "component", type: RtSelectComponent, selector: "rt-select", inputs: ["appearance", "options", "placeholder", "iconLeft", "filter", "filterPlaceholder", "panelWidth", "panelMaxHeight"], outputs: ["selectionChange"] }, { kind: "directive", type: 
+                RtDatePickerComponent, selector: "rt-date-picker", inputs: ["appearance", "type", "min", "max", "minuteStep"] }, { kind: "component", type: RtIconButtonComponent, selector: "rt-icon-button", inputs: ["icon", "glyph", "ariaLabel", "variant", "iconColor", "iconFill", "size", "iconSize", "type", "tooltip", "tabIndex", "loading", "disabled", "active", "indicator"], outputs: ["clicked"] }, { kind: "component", type: RtInputComponent, selector: "rt-input", inputs: ["appearance", "type", "placeholder", "iconLeft", "iconRight", "passwordToggle", "autocomplete"] }, { kind: "component", type: RtInputNumberComponent, selector: "rt-input-number", inputs: ["appearance", "iconLeft", "prefix", "placeholder", "min", "max", "minFractionDigits", "maxFractionDigits", "grouped"] }, { kind: "component", type: RtMenuComponent, selector: "rt-menu", inputs: ["icon", "ariaLabel", "align", "panelClass", "triggerSize", "size", "disabled"], outputs: ["openedChange"] }, { kind: "component", type: RtMenuItemComponent, selector: "rt-menu-item", inputs: ["icon", "label", "danger", "success", "glyph", "fill", "current", "disabled", "confirmMessage", "confirmTitle", "confirmLabel", "confirmCancelLabel", "confirmTone", "link"], outputs: ["selected"] }, { kind: "component", type: RtSelectComponent, selector: "rt-select", inputs: ["appearance", "options", "placeholder", "iconLeft", "filter", "filterPlaceholder", "panelWidth", "panelMaxHeight"], outputs: ["selectionChange"] }, { kind: "directive", type: 
                 // directives
                 BlockDirective, selector: "[rtBlock]", inputs: ["rtMod"] }, { kind: "directive", type: ElemDirective, selector: "[rtElem]", inputs: ["rtMod"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
@@ -1079,7 +1079,7 @@ class RtDataTableComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtDataTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: RtDataTableComponent, isStandalone: true, selector: "rt-data-table", inputs: { look: { classPropertyName: "look", publicName: "look", isSignal: true, isRequired: false, transformFunction: null }, filterAppearance: { classPropertyName: "filterAppearance", publicName: "filterAppearance", isSignal: true, isRequired: false, transformFunction: null }, isTableRowsClickable: { classPropertyName: "isTableRowsClickable", publicName: "isTableRowsClickable", isSignal: true, isRequired: false, transformFunction: null }, keyExp: { classPropertyName: "keyExp", publicName: "keyExp", isSignal: true, isRequired: false, transformFunction: null }, entities: { classPropertyName: "entities", publicName: "entities", isSignal: true, isRequired: true, transformFunction: null }, currentSortModel: { classPropertyName: "currentSortModel", publicName: "currentSortModel", isSignal: true, isRequired: true, transformFunction: null }, filterModel: { classPropertyName: "filterModel", publicName: "filterModel", isSignal: true, isRequired: false, transformFunction: null }, isFiltersShown: { classPropertyName: "isFiltersShown", publicName: "isFiltersShown", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { rowClick: "rowClick", rowDoubleClick: "rowDoubleClick", sortChange: "sortChange", filterChange: "filterChange" }, host: { properties: { "class.rt-preset-material": "look() === 'material' && !presetFromHost" }, classAttribute: "rt-data-table" }, providers: [{ provide: RT_DATA_TABLE_ROW_HOST, useExisting: forwardRef(() => RtDataTableComponent) }], queries: [{ propertyName: "customCellsTpl", first: true, predicate: RtDataTableCustomCellsDirective, descendants: true, isSignal: true }, { propertyName: "rowActionsTpl", first: true, predicate: RtDataTableRowActionsDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "additionalRowActionsTpl", first: true, predicate: RtDataTableAdditionalRowActionsDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "iconTpl", first: true, predicate: RtDataTableIconDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "rowActionsRef", first: true, predicate: ["rowActions"], descendants: true, isSignal: true }, { propertyName: "headerSpacerRef", first: true, predicate: ["headerSpacer"], descendants: true, isSignal: true }, { propertyName: "rowSpacerRef", first: true, predicate: ["rowSpacer"], descendants: true, isSignal: true }], ngImport: i0, template: "<ng-container rtBlock=\"rt-data-table\">\n    <table rtElem=\"table\">\n        <thead rtElem=\"head\">\n            <tr>\n                @if (isSelectorsColumnShown()) {\n                    <th rtElem=\"cell\" [rtMod]=\"{ head: true, selectable: true }\">\n                        @if (isMultiSelect()) {\n                            <rt-checkbox\n                                qa-dataid=\"data-table-page-checkbox\"\n                                [ariaLabel]=\"selectPageLabel()\"\n                                [disabled]=\"isSelectorsColumnDisabled()\"\n                                [indeterminate]=\"isPageEntitiesIndeterminate() && !isPageEntitiesSelected()\"\n                                [ngModel]=\"isPageEntitiesSelected()\"\n                                [ngModelOptions]=\"{ standalone: true }\"\n                                (ngModelChange)=\"onTogglePageEntities($event)\" />\n                        }\n                    </th>\n                }\n\n                @for (column of visibleColumns(); track column.propName) {\n                    <th\n                        rtElem=\"cell\"\n                        qa-dataid=\"data-table-header-cell\"\n                        [attr.aria-sort]=\"ariaSorts()[column.propName]\"\n                        [rtMod]=\"{ head: true, sortable: !!column.sorting }\">\n                        <rt-data-table-header-cell\n                            [headerModel]=\"column.header\"\n                            [sortModel]=\"column.sorting\"\n                            [currentSortModel]=\"currentSortModel()\"\n                            [column]=\"column\"\n                            [iconTemplate]=\"iconTpl()?.template ?? null\"\n                            (sortChange)=\"onSortChange($event)\" />\n                    </th>\n                }\n\n                @if (hasRowActions()) {\n                    <th #headerSpacer rtElem=\"cell\" qa-dataid=\"data-table-actions-header\" [rtMod]=\"{ head: true }\">{{ actionsLabel() }}</th>\n                }\n            </tr>\n\n            @if (isFiltersShown()) {\n                <tr qa-dataid=\"data-table-filter-row\">\n                    @if (isSelectorsColumnShown()) {\n                        <th rtElem=\"cell\" [rtMod]=\"{ head: true, filterable: true, empty: true }\"></th>\n                    }\n\n                    @for (column of visibleColumns(); track column.propName) {\n                        <th rtElem=\"cell\" [rtMod]=\"{ head: true, filterable: true }\">\n                            @if (column.filterType; as filterType) {\n                                <rt-data-table-filter-cell\n                                    [filterProperty]=\"column.propName\"\n                                    [filterType]=\"filterType\"\n                                    [filterModel]=\"filterModel()\"\n                                    [defaultFilterOperator]=\"column.defaultFilterOperator\"\n                                    [filterOperators]=\"column.filterOperators\"\n                                    [filterSelectOptions]=\"column.filterSelectOptions\"\n                                    [appearance]=\"filterAppearance()\"\n                                    (filterChange)=\"onFilterChange($event)\" />\n                            }\n                        </th>\n                    }\n\n                    @if (hasRowActions()) {\n                        <th rtElem=\"cell\" [rtMod]=\"{ head: true, filterable: true }\"></th>\n                    }\n                </tr>\n            }\n        </thead>\n\n        <tbody>\n            @for (row of entities(); track row[keyExp()]; let index = $index) {\n                <tr\n                    rtElem=\"row\"\n                    qa-dataid=\"data-table-row\"\n                    [rtDataTableRowClick]=\"row\"\n                    [isTableRowClickable]=\"isTableRowsClickable()\"\n                    [rtMod]=\"{ clickable: isTableRowsClickable(), active: activeRowIndex() === index }\">\n                    @if (isSelectorsColumnShown()) {\n                        <td rtElem=\"cell\" [rtMod]=\"{ selectable: true }\" [attr.rt-data-table-stop-row-click]=\"''\">\n                            @if (isMultiSelect()) {\n                                <rt-checkbox\n                                    qa-dataid=\"data-table-row-checkbox\"\n                                    [ariaLabel]=\"selectRowLabel()\"\n                                    [disabled]=\"isSelectorsColumnDisabled()\"\n                                    [ngModel]=\"selectedEntitiesIds().includes(row[keyExp()])\"\n                                    [ngModelOptions]=\"{ standalone: true }\"\n                                    (ngModelChange)=\"onToggleEntity(row, $event)\" />\n                            } @else {\n                                <rt-radio-button\n                                    qa-dataid=\"data-table-row-radio\"\n                                    [value]=\"row[keyExp()]\"\n                                    [ariaLabel]=\"selectRowLabel()\"\n                                    [disabled]=\"isSelectorsColumnDisabled()\"\n                                    [checked]=\"selectedEntitiesIds().includes(row[keyExp()])\"\n                                    (checkedChange)=\"onToggleEntity(row, true)\" />\n                            }\n                        </td>\n                    }\n\n                    @for (column of visibleColumns(); track column.propName) {\n                        <td rtElem=\"cell\" qa-dataid=\"data-table-cell\" [rtMod]=\"{ copyable: !!column.copyable }\">\n                            @if (column.type === columnTypes.CUSTOM) {\n                                <ng-container\n                                    [ngTemplateOutlet]=\"customCellsTpl()?.getTemplateByPropName(column.propName) ?? null\"\n                                    [ngTemplateOutletContext]=\"{ $implicit: row }\" />\n                            } @else {\n                                <rt-data-table-cell [row]=\"row\" [column]=\"column\" [iconTemplate]=\"iconTpl()?.template ?? null\" />\n                            }\n                        </td>\n                    }\n\n                    @if (hasRowActions()) {\n                        <td #rowSpacer rtElem=\"cell\" [rtMod]=\"{ spacer: true }\"></td>\n\n                        <div rtBlock=\"rt-data-table-actions\" [rtMod]=\"{ hidden: activeRowIndex() !== index }\">\n                            <div #rowActions rtElem=\"container\" qa-dataid=\"data-table-actions\">\n                                @if (additionalRowActionsTpl(); as additional) {\n                                    <ng-container [ngTemplateOutlet]=\"additional\" [ngTemplateOutletContext]=\"{ $implicit: row }\" />\n                                }\n\n                                @if (rowActionsTpl(); as actions) {\n                                    <rt-menu\n                                        rtElem=\"action\"\n                                        qa-dataid=\"data-table-row-menu\"\n                                        icon=\"ellipsis-v\"\n                                        size=\"sm\"\n                                        [panelClass]=\"menuPanelClass()\"\n                                        [attr.rt-data-table-stop-row-click]=\"''\"\n                                        [ariaLabel]=\"actionsLabel()\"\n                                        (openedChange)=\"onMenuOpenedChange(index, $event)\">\n                                        <ng-container [ngTemplateOutlet]=\"actions\" [ngTemplateOutletContext]=\"{ $implicit: row }\" />\n                                    </rt-menu>\n                                }\n                            </div>\n                        </div>\n                    }\n                </tr>\n            }\n        </tbody>\n    </table>\n</ng-container>\n", styles: ["@charset \"UTF-8\";@layer rt-kit.components{.rt-data-table{--rt-data-table-row-height: var(--rt-control-height-lg);--rt-data-table-head-height: calc(var(--rt-control-height-lg) - var(--rt-space-1));--rt-data-table-border-width: var(--rt-border-width-thin);--rt-data-table-cell-padding: calc(var(--rt-space-2) + var(--rt-space-0-5));--rt-data-table-row-transition-duration: var(--rt-duration-base);--rt-data-table-padding-bottom: var(--rt-list-content-padding-bottom);--rt-data-table-head-color: var(--rt-color-text-primary);--rt-data-table-head-font-weight: var(--rt-font-weight-medium);--rt-data-table-filter-bg: color-mix(in srgb, var(--rt-color-table-head-bg), var(--rt-color-bg-surface) 50%);display:block;overflow:auto;width:100%;height:100%;box-sizing:border-box;padding-bottom:var(--rt-data-table-padding-bottom);scrollbar-color:var(--rt-data-table-scrollbar-color, transparent transparent);scrollbar-width:var(--rt-data-table-scrollbar-width, thin)}.rt-data-table::-webkit-scrollbar{width:var(--rt-data-table-scrollbar-vertical-width, var(--rt-size-3));height:var(--rt-data-table-scrollbar-horizontal-height, var(--rt-size-3))}.rt-data-table:hover,.rt-data-table:focus-within{scrollbar-color:var(--rt-data-table-scrollbar-color, var(--rt-color-border-default) transparent)}@media(hover:none){.rt-data-table{scrollbar-color:var(--rt-data-table-scrollbar-color, var(--rt-color-border-default) transparent)}}.rt-data-table__table{width:100%;border-collapse:collapse}.rt-data-table thead{position:sticky;z-index:var(--rt-z-sticky);top:0}.rt-data-table thead tr:first-child{height:var(--rt-data-table-head-height)}.rt-data-table thead tr:last-child{border-bottom:var(--rt-data-table-border-width) solid var(--rt-color-border-default)}.rt-data-table tbody{font-size:var(--rt-text-sm)}.rt-data-table__row{height:var(--rt-data-table-row-height);border-bottom:var(--rt-data-table-border-width) solid var(--rt-color-border-subtle);color:var(--rt-color-text-primary);transform:translate(0)}.rt-data-table__row:hover{border-bottom-color:var(--rt-color-state-info);transition:border-bottom-color var(--rt-data-table-row-transition-duration)}.rt-data-table__row:hover .rt-data-table-actions{visibility:visible}.rt-data-table__row--active{border-bottom-color:var(--rt-color-state-info)}.rt-data-table__row--clickable{cursor:pointer}.rt-data-table__cell{width:fit-content;height:100%;padding:var(--rt-data-table-cell-padding)}.rt-data-table__cell--head{position:relative;background-color:var(--rt-color-table-head-bg);color:var(--rt-data-table-head-color);font-size:var(--rt-text-md);font-weight:var(--rt-data-table-head-font-weight);line-height:var(--rt-leading-tight);pointer-events:none;text-align:start}.rt-data-table__cell--sortable,.rt-data-table__cell--selectable,.rt-data-table__cell--filterable{pointer-events:auto}.rt-data-table__cell--selectable>rt-checkbox,.rt-data-table__cell--selectable>rt-radio-button{display:flex}.rt-data-table__cell--filterable{padding:var(--rt-space-xs) var(--rt-space-sm);background-color:var(--rt-data-table-filter-bg)}:is(.rt-preset-material,[data-preset=material]) .rt-data-table__cell--filterable{--rt-input-radius: var(--rt-radius-sm)}.rt-data-table__cell--head:not(:last-child,.rt-data-table__cell--selectable,.rt-data-table__cell--empty):after{position:absolute;top:25%;right:0;height:50%;border-right:var(--rt-data-table-border-width) solid var(--rt-list-table-head-divider-color);content:\"\";pointer-events:none}.rt-data-table__cell--spacer{padding:0}.rt-data-table-actions{--rt-data-table-actions-bg: var(--rt-table-actions-bg, var(--rt-color-bg-surface));position:absolute;z-index:var(--rt-z-base);top:0;right:0;display:flex;width:100%;height:100%;align-items:center;justify-content:flex-end;pointer-events:none}.rt-data-table-actions__container{position:sticky;right:0;display:flex;overflow:hidden;width:fit-content;height:calc(100% - var(--rt-data-table-border-width) * 2);align-items:center;justify-content:flex-end;padding:0 var(--rt-space-xs) 0 var(--rt-space-5);background:linear-gradient(to right,transparent 0%,color-mix(in srgb,var(--rt-data-table-actions-bg) 30%,transparent) 10%,var(--rt-data-table-actions-bg) 20%,var(--rt-data-table-actions-bg) 100%);gap:var(--rt-space-xs);pointer-events:none}.rt-data-table-actions__container>*{pointer-events:auto}.rt-data-table-actions__action{position:sticky}.rt-data-table-actions rt-icon-button{--rt-icon-button-color: var(--rt-list-table-icon-color)}.rt-data-table-actions .rt-icon-button{--rt-icon-button-size-step: var(--rt-list-table-button-size);--rt-icon-button-radius: var(--rt-list-table-button-radius)}.rt-data-table-actions .rt-icon-button__icon{min-width:var(--rt-list-table-icon-size);min-height:var(--rt-list-table-icon-size)}@media(hover:hover){.rt-data-table-actions--hidden{opacity:0}.rt-data-table-actions--hidden .rt-data-table-actions__container>*{pointer-events:none}.rt-data-table__row:hover .rt-data-table-actions--hidden,.rt-data-table__row:has(:focus-visible) .rt-data-table-actions--hidden{opacity:1}.rt-data-table__row:hover .rt-data-table-actions--hidden .rt-data-table-actions__container>*,.rt-data-table__row:has(:focus-visible) .rt-data-table-actions--hidden .rt-data-table-actions__container>*{pointer-events:auto}}}\n"], dependencies: [{ kind: "component", type: 
                 // components
-                RtCheckboxComponent, selector: "rt-checkbox", inputs: ["inputId", "ariaLabel", "disabled", "indeterminate"] }, { kind: "component", type: RtDataTableCellComponent, selector: "rt-data-table-cell", inputs: ["row", "column", "iconTemplate"] }, { kind: "component", type: RtDataTableFilterCellComponent, selector: "rt-data-table-filter-cell", inputs: ["appearance", "filterProperty", "filterType", "filterModel", "defaultFilterOperator", "filterOperators", "filterSelectOptions"], outputs: ["filterChange"] }, { kind: "component", type: RtDataTableHeaderCellComponent, selector: "rt-data-table-header-cell", inputs: ["headerModel", "sortModel", "currentSortModel", "column", "iconTemplate"], outputs: ["sortChange"] }, { kind: "component", type: RtMenuComponent, selector: "rt-menu", inputs: ["icon", "ariaLabel", "align", "panelClass", "size", "disabled"], outputs: ["openedChange"] }, { kind: "component", type: RtRadioButtonComponent, selector: "rt-radio-button", inputs: ["value", "checked", "disabled", "card", "label", "description", "ariaLabel"], outputs: ["clickAction", "checkedChange"] }, { kind: "directive", type: 
+                RtCheckboxComponent, selector: "rt-checkbox", inputs: ["inputId", "ariaLabel", "disabled", "indeterminate"] }, { kind: "component", type: RtDataTableCellComponent, selector: "rt-data-table-cell", inputs: ["row", "column", "iconTemplate"] }, { kind: "component", type: RtDataTableFilterCellComponent, selector: "rt-data-table-filter-cell", inputs: ["appearance", "filterProperty", "filterType", "filterModel", "defaultFilterOperator", "filterOperators", "filterSelectOptions"], outputs: ["filterChange"] }, { kind: "component", type: RtDataTableHeaderCellComponent, selector: "rt-data-table-header-cell", inputs: ["headerModel", "sortModel", "currentSortModel", "column", "iconTemplate"], outputs: ["sortChange"] }, { kind: "component", type: RtMenuComponent, selector: "rt-menu", inputs: ["icon", "ariaLabel", "align", "panelClass", "triggerSize", "size", "disabled"], outputs: ["openedChange"] }, { kind: "component", type: RtRadioButtonComponent, selector: "rt-radio-button", inputs: ["value", "checked", "disabled", "card", "label", "description", "ariaLabel"], outputs: ["clickAction", "checkedChange"] }, { kind: "directive", type: 
                 // directives
                 BlockDirective, selector: "[rtBlock]", inputs: ["rtMod"] }, { kind: "directive", type: ElemDirective, selector: "[rtElem]", inputs: ["rtMod"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: ModDirective, selector: "[rtMod]" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: RtDataTableRowClickDirective, selector: "[rtDataTableRowClick]", inputs: ["rtDataTableRowClick", "isTableRowClickable"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }