npm - @taiga-ui/addon-table - Versions diffs - 4.8.1 → 4.10.0 - Mend

@taiga-ui/addon-table 4.8.1 → 4.10.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (16) hide show

package/fesm2022/taiga-ui-addon-table-components-reorder.mjs CHANGED Viewed

@@ -91,7 +91,7 @@ class TuiReorder {
         this.enabledChange.emit(enabled);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiReorder, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TuiReorder, isStandalone: true, selector: "tui-reorder", inputs: { enabled: "enabled", items: "items", content: "content" }, outputs: { itemsChange: "itemsChange", enabledChange: "enabledChange" }, host: { listeners: { "focusout.stop": "(0)", "pointerdown.silent": "onDrag()", "document:pointerup.silent": "onDrop()" } }, ngImport: i0, template: "<tui-tiles\n    class=\"t-wrapper\"\n    [(order)]=\"order\"\n>\n    <tui-tile\n        *ngFor=\"let item of unsortedItems; let index = index\"\n        [style.order]=\"order.get(index)\"\n    >\n        <div\n            class=\"t-item\"\n            [class.t-item_disabled]=\"!isEnabled(item)\"\n        >\n            <div\n                tuiTileHandle\n                class=\"t-draggable\"\n            >\n                <tui-icon\n                    class=\"t-icon\"\n                    [icon]=\"options.icons.drag\"\n                />\n                <ng-container *polymorpheusOutlet=\"content as template; context: {$implicit: item, index: index}\">\n                    {{ template }}\n                </ng-container>\n            </div>\n            <button\n                appearance=\"icon\"\n                size=\"xs\"\n                tuiIconButton\n                type=\"button\"\n                class=\"t-button\"\n                [iconStart]=\"getIcon(item)\"\n                (click)=\"toggle(item)\"\n                (keydown.arrowDown.prevent)=\"move(index, 1)\"\n                (keydown.arrowUp.prevent)=\"move(index, -1)\"\n            >\n                {{ showHideText$ | async }}\n            </button>\n        </div>\n    </tui-tile>\n</tui-tiles>\n", styles: [":host{display:block;font:var(--tui-font-text-s);padding:.5rem 0;-webkit-user-select:none;user-select:none}.t-wrapper{grid-auto-rows:2rem}.t-draggable{cursor:ns-resize;flex:1 1 auto}.t-item{transition-property:background;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;display:flex;block-size:2rem;align-items:center;padding:0 .75rem;background:var(--tui-background-base)}.t-item_disabled{opacity:var(--tui-disabled-opacity)}.t-item_disabled .t-button{color:var(--tui-text-primary);opacity:1}.t-item:hover{background:var(--tui-background-base-alt)}.t-item:hover .t-button{opacity:1}.t-icon{margin-right:.5rem;color:var(--tui-text-tertiary);border:.25rem solid transparent}.t-button{transition-property:opacity;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;margin-left:auto;opacity:0}.t-button:focus{opacity:1}\n"], dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: PolymorpheusOutlet, selector: "[polymorpheusOutlet]", inputs: ["polymorpheusOutlet", "polymorpheusOutletContext"] }, { kind: "directive", type: TuiButton, selector: "a[tuiButton],button[tuiButton],a[tuiIconButton],button[tuiIconButton]", inputs: ["size"] }, { kind: "component", type: TuiIcon, selector: "tui-icon", inputs: ["icon", "background"] }, { kind: "component", type: i1.TuiTilesComponent, selector: "tui-tiles", inputs: ["debounce", "order"], outputs: ["orderChange"] }, { kind: "component", type: i1.TuiTile, selector: "tui-tile", inputs: ["width", "height"] }, { kind: "directive", type: i1.TuiTileHandle, selector: "[tuiTileHandle]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TuiReorder, isStandalone: true, selector: "tui-reorder", inputs: { enabled: "enabled", items: "items", content: "content" }, outputs: { itemsChange: "itemsChange", enabledChange: "enabledChange" }, host: { listeners: { "focusout.stop": "(0)", "pointerdown.silent": "onDrag()", "document:pointerup.silent": "onDrop()" } }, ngImport: i0, template: "<tui-tiles\n    class=\"t-wrapper\"\n    [(order)]=\"order\"\n>\n    <tui-tile\n        *ngFor=\"let item of unsortedItems; let index = index\"\n        [style.order]=\"order.get(index)\"\n    >\n        <div\n            class=\"t-item\"\n            [class.t-item_disabled]=\"!isEnabled(item)\"\n        >\n            <div\n                tuiTileHandle\n                class=\"t-draggable\"\n            >\n                <tui-icon\n                    class=\"t-icon\"\n                    [icon]=\"options.icons.drag\"\n                />\n                <ng-container *polymorpheusOutlet=\"content as template; context: {$implicit: item, index: index}\">\n                    {{ template }}\n                </ng-container>\n            </div>\n            <button\n                appearance=\"icon\"\n                size=\"xs\"\n                tuiIconButton\n                type=\"button\"\n                class=\"t-button\"\n                [iconStart]=\"getIcon(item)\"\n                (click)=\"toggle(item)\"\n                (keydown.arrowDown.prevent)=\"move(index, 1)\"\n                (keydown.arrowUp.prevent)=\"move(index, -1)\"\n            >\n                {{ showHideText$ | async }}\n            </button>\n        </div>\n    </tui-tile>\n</tui-tiles>\n", styles: [":host{display:block;font:var(--tui-font-text-s);padding:.5rem 0;-webkit-user-select:none;user-select:none}.t-wrapper{grid-auto-rows:2rem}.t-draggable{cursor:ns-resize;flex:1 1 auto}.t-item{transition-property:background;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;display:flex;block-size:2rem;align-items:center;padding:0 .75rem;background:var(--tui-background-base)}.t-item_disabled{opacity:var(--tui-disabled-opacity)}.t-item_disabled .t-button{color:var(--tui-text-primary);opacity:1}.t-item:hover{background:var(--tui-background-base-alt)}.t-item:hover .t-button{opacity:1}.t-icon{margin-right:.5rem;color:var(--tui-text-tertiary);border-width:.25rem}.t-button{transition-property:opacity;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;margin-left:auto;opacity:0}.t-button:focus{opacity:1}\n"], dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: PolymorpheusOutlet, selector: "[polymorpheusOutlet]", inputs: ["polymorpheusOutlet", "polymorpheusOutletContext"] }, { kind: "directive", type: TuiButton, selector: "a[tuiButton],button[tuiButton],a[tuiIconButton],button[tuiIconButton]", inputs: ["size"] }, { kind: "component", type: TuiIcon, selector: "tui-icon", inputs: ["icon", "background"] }, { kind: "component", type: i1.TuiTilesComponent, selector: "tui-tiles", inputs: ["debounce", "order"], outputs: ["orderChange"] }, { kind: "component", type: i1.TuiTile, selector: "tui-tile", inputs: ["width", "height"] }, { kind: "directive", type: i1.TuiTileHandle, selector: "[tuiTileHandle]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiReorder, decorators: [{
             type: Component,
@@ -107,7 +107,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                         '(focusout.stop)': '(0)',
                         '(pointerdown.silent)': 'onDrag()',
                         '(document:pointerup.silent)': 'onDrop()',
-                    }, template: "<tui-tiles\n    class=\"t-wrapper\"\n    [(order)]=\"order\"\n>\n    <tui-tile\n        *ngFor=\"let item of unsortedItems; let index = index\"\n        [style.order]=\"order.get(index)\"\n    >\n        <div\n            class=\"t-item\"\n            [class.t-item_disabled]=\"!isEnabled(item)\"\n        >\n            <div\n                tuiTileHandle\n                class=\"t-draggable\"\n            >\n                <tui-icon\n                    class=\"t-icon\"\n                    [icon]=\"options.icons.drag\"\n                />\n                <ng-container *polymorpheusOutlet=\"content as template; context: {$implicit: item, index: index}\">\n                    {{ template }}\n                </ng-container>\n            </div>\n            <button\n                appearance=\"icon\"\n                size=\"xs\"\n                tuiIconButton\n                type=\"button\"\n                class=\"t-button\"\n                [iconStart]=\"getIcon(item)\"\n                (click)=\"toggle(item)\"\n                (keydown.arrowDown.prevent)=\"move(index, 1)\"\n                (keydown.arrowUp.prevent)=\"move(index, -1)\"\n            >\n                {{ showHideText$ | async }}\n            </button>\n        </div>\n    </tui-tile>\n</tui-tiles>\n", styles: [":host{display:block;font:var(--tui-font-text-s);padding:.5rem 0;-webkit-user-select:none;user-select:none}.t-wrapper{grid-auto-rows:2rem}.t-draggable{cursor:ns-resize;flex:1 1 auto}.t-item{transition-property:background;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;display:flex;block-size:2rem;align-items:center;padding:0 .75rem;background:var(--tui-background-base)}.t-item_disabled{opacity:var(--tui-disabled-opacity)}.t-item_disabled .t-button{color:var(--tui-text-primary);opacity:1}.t-item:hover{background:var(--tui-background-base-alt)}.t-item:hover .t-button{opacity:1}.t-icon{margin-right:.5rem;color:var(--tui-text-tertiary);border:.25rem solid transparent}.t-button{transition-property:opacity;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;margin-left:auto;opacity:0}.t-button:focus{opacity:1}\n"] }]
+                    }, template: "<tui-tiles\n    class=\"t-wrapper\"\n    [(order)]=\"order\"\n>\n    <tui-tile\n        *ngFor=\"let item of unsortedItems; let index = index\"\n        [style.order]=\"order.get(index)\"\n    >\n        <div\n            class=\"t-item\"\n            [class.t-item_disabled]=\"!isEnabled(item)\"\n        >\n            <div\n                tuiTileHandle\n                class=\"t-draggable\"\n            >\n                <tui-icon\n                    class=\"t-icon\"\n                    [icon]=\"options.icons.drag\"\n                />\n                <ng-container *polymorpheusOutlet=\"content as template; context: {$implicit: item, index: index}\">\n                    {{ template }}\n                </ng-container>\n            </div>\n            <button\n                appearance=\"icon\"\n                size=\"xs\"\n                tuiIconButton\n                type=\"button\"\n                class=\"t-button\"\n                [iconStart]=\"getIcon(item)\"\n                (click)=\"toggle(item)\"\n                (keydown.arrowDown.prevent)=\"move(index, 1)\"\n                (keydown.arrowUp.prevent)=\"move(index, -1)\"\n            >\n                {{ showHideText$ | async }}\n            </button>\n        </div>\n    </tui-tile>\n</tui-tiles>\n", styles: [":host{display:block;font:var(--tui-font-text-s);padding:.5rem 0;-webkit-user-select:none;user-select:none}.t-wrapper{grid-auto-rows:2rem}.t-draggable{cursor:ns-resize;flex:1 1 auto}.t-item{transition-property:background;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;display:flex;block-size:2rem;align-items:center;padding:0 .75rem;background:var(--tui-background-base)}.t-item_disabled{opacity:var(--tui-disabled-opacity)}.t-item_disabled .t-button{color:var(--tui-text-primary);opacity:1}.t-item:hover{background:var(--tui-background-base-alt)}.t-item:hover .t-button{opacity:1}.t-icon{margin-right:.5rem;color:var(--tui-text-tertiary);border-width:.25rem}.t-button{transition-property:opacity;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;margin-left:auto;opacity:0}.t-button:focus{opacity:1}\n"] }]
         }], propDecorators: { enabled: [{
                 type: Input
             }], itemsChange: [{

package/fesm2022/taiga-ui-addon-table-components-reorder.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"taiga-ui-addon-table-components-reorder.mjs","sources":["../../../projects/addon-table/components/reorder/reorder.options.ts","../../../projects/addon-table/components/reorder/reorder.component.ts","../../../projects/addon-table/components/reorder/reorder.template.html","../../../projects/addon-table/components/reorder/taiga-ui-addon-table-components-reorder.ts"],"sourcesContent":["import type {Provider} from '@angular/core';\nimport {tuiCreateToken, tuiProvideOptions} from '@taiga-ui/cdk/utils/miscellaneous';\n\nexport interface TuiReorderOptions {\n readonly icons: {\n readonly drag: string;\n readonly hide: string;\n readonly show: string;\n };\n}\n\nexport const TUI_REORDER_DEFAULT_OPTIONS: TuiReorderOptions = {\n icons: {\n hide: '@tui.eye-off',\n show: '@tui.eye',\n drag: '@tui.grip-vertical',\n },\n};\n\nexport const TUI_REORDER_OPTIONS = tuiCreateToken(TUI_REORDER_DEFAULT_OPTIONS);\n\nexport function tuiReorderOptionsProvider(options: Partial<TuiReorderOptions>): Provider {\n return tuiProvideOptions(TUI_REORDER_OPTIONS, options, TUI_REORDER_DEFAULT_OPTIONS);\n}\n","import {AsyncPipe, NgForOf} from '@angular/common';\nimport {\n ChangeDetectionStrategy,\n Component,\n EventEmitter,\n inject,\n Input,\n Output,\n} from '@angular/core';\nimport {TUI_TABLE_SHOW_HIDE_MESSAGE} from '@taiga-ui/addon-table/tokens';\nimport type {TuiContext} from '@taiga-ui/cdk/types';\nimport {TuiButton} from '@taiga-ui/core/components/button';\nimport {TuiIcon} from '@taiga-ui/core/components/icon';\nimport {TuiTiles} from '@taiga-ui/kit/components/tiles';\nimport type {PolymorpheusContent} from '@taiga-ui/polymorpheus';\nimport {PolymorpheusOutlet, PolymorpheusTemplate} from '@taiga-ui/polymorpheus';\n\nimport {TUI_REORDER_OPTIONS} from './reorder.options';\n\n@Component({\n standalone: true,\n selector: 'tui-reorder',\n imports: [\n AsyncPipe,\n NgForOf,\n PolymorpheusOutlet,\n PolymorpheusTemplate,\n TuiButton,\n TuiIcon,\n TuiTiles,\n ],\n templateUrl: './reorder.template.html',\n styleUrls: ['./reorder.style.less'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n host: {\n '(focusout.stop)': '(0)',\n '(pointerdown.silent)': 'onDrag()',\n '(document:pointerup.silent)': 'onDrop()',\n },\n})\nexport class TuiReorder<T> {\n private dragging = false;\n\n protected order = new Map<number, number>();\n protected unsortedItems: readonly T[] = [];\n protected readonly options = inject(TUI_REORDER_OPTIONS);\n protected readonly showHideText$ = inject(TUI_TABLE_SHOW_HIDE_MESSAGE);\n\n @Input()\n public enabled: readonly T[] = [];\n\n @Output()\n public readonly itemsChange = new EventEmitter<T[]>();\n\n @Output()\n public readonly enabledChange = new EventEmitter<T[]>();\n\n @Input()\n public set items(items: readonly T[]) {\n if (\n items.length !== this.unsortedItems.length \|\|\n !items.every((item) => this.unsortedItems.includes(item))\n ) {\n this.unsortedItems = items;\n }\n }\n\n @Input()\n public content: PolymorpheusContent<TuiContext<T> & {index: number}> = ({\n $implicit,\n }) => String($implicit);\n\n protected onDrag(): void {\n this.dragging = true;\n }\n\n protected onDrop(): void {\n if (!this.dragging) {\n return;\n }\n\n this.dragging = false;\n this.updateItems();\n }\n\n protected isEnabled(item: T): boolean {\n return this.enabled.includes(item);\n }\n\n protected getIcon(item: T): string {\n return this.isEnabled(item) ? this.options.icons.hide : this.options.icons.show;\n }\n\n protected toggle(toggled: T): void {\n this.enabled = this.isEnabled(toggled)\n ? this.enabled.filter((item) => item !== toggled)\n : this.enabled.concat(toggled);\n\n this.updateEnabled();\n }\n\n protected move(index: number, direction: number): void {\n const oldIndex = this.order.get(index) ?? index;\n\n if (\n (!oldIndex && direction < 0) \|\|\n (oldIndex === this.unsortedItems.length - 1 && direction > 0)\n ) {\n return;\n }\n\n const newIndex = oldIndex + direction;\n const oldItem = Array.from(this.order.values()).findIndex(\n (item) => item === newIndex,\n );\n\n this.order.set(index, newIndex);\n this.order.set(oldItem, oldIndex);\n this.order = new Map(this.order);\n\n this.updateItems();\n }\n\n private getSortedItems(): T[] {\n const items = new Array(this.unsortedItems.length);\n\n this.unsortedItems.forEach((item, index) => {\n items[this.order.get(index) ?? index] = item;\n });\n\n return items;\n }\n\n private updateItems(): void {\n this.itemsChange.emit(this.getSortedItems());\n this.updateEnabled();\n }\n\n private updateEnabled(): void {\n const enabled = this.getSortedItems().filter((item) => this.isEnabled(item));\n\n this.enabled = enabled;\n this.enabledChange.emit(enabled);\n }\n}\n","<tui-tiles\n class=\"t-wrapper\"\n [(order)]=\"order\"\n>\n <tui-tile\n ngFor=\"let item of unsortedItems; let index = index\"\n [style.order]=\"order.get(index)\"\n >\n <div\n class=\"t-item\"\n [class.t-item_disabled]=\"!isEnabled(item)\"\n >\n <div\n tuiTileHandle\n class=\"t-draggable\"\n >\n <tui-icon\n class=\"t-icon\"\n [icon]=\"options.icons.drag\"\n />\n <ng-container polymorpheusOutlet=\"content as template; context: {$implicit: item, index: index}\">\n {{ template }}\n </ng-container>\n </div>\n <button\n appearance=\"icon\"\n size=\"xs\"\n tuiIconButton\n type=\"button\"\n class=\"t-button\"\n [iconStart]=\"getIcon(item)\"\n (click)=\"toggle(item)\"\n (keydown.arrowDown.prevent)=\"move(index, 1)\"\n (keydown.arrowUp.prevent)=\"move(index, -1)\"\n >\n {{ showHideText$ \| async }}\n </button>\n </div>\n </tui-tile>\n</tui-tiles>\n","/*\n Generated bundle index. Do not edit.\n /\n\nexport from './index';\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"taiga-ui-addon-table-components-reorder.mjs","sources":["../../../projects/addon-table/components/reorder/reorder.options.ts","../../../projects/addon-table/components/reorder/reorder.component.ts","../../../projects/addon-table/components/reorder/reorder.template.html","../../../projects/addon-table/components/reorder/taiga-ui-addon-table-components-reorder.ts"],"sourcesContent":["import type {Provider} from '@angular/core';\nimport {tuiCreateToken, tuiProvideOptions} from '@taiga-ui/cdk/utils/miscellaneous';\n\nexport interface TuiReorderOptions {\n readonly icons: {\n readonly drag: string;\n readonly hide: string;\n readonly show: string;\n };\n}\n\nexport const TUI_REORDER_DEFAULT_OPTIONS: TuiReorderOptions = {\n icons: {\n hide: '@tui.eye-off',\n show: '@tui.eye',\n drag: '@tui.grip-vertical',\n },\n};\n\nexport const TUI_REORDER_OPTIONS = tuiCreateToken(TUI_REORDER_DEFAULT_OPTIONS);\n\nexport function tuiReorderOptionsProvider(options: Partial<TuiReorderOptions>): Provider {\n return tuiProvideOptions(TUI_REORDER_OPTIONS, options, TUI_REORDER_DEFAULT_OPTIONS);\n}\n","import {AsyncPipe, NgForOf} from '@angular/common';\nimport {\n ChangeDetectionStrategy,\n Component,\n EventEmitter,\n inject,\n Input,\n Output,\n} from '@angular/core';\nimport {TUI_TABLE_SHOW_HIDE_MESSAGE} from '@taiga-ui/addon-table/tokens';\nimport type {TuiContext} from '@taiga-ui/cdk/types';\nimport {TuiButton} from '@taiga-ui/core/components/button';\nimport {TuiIcon} from '@taiga-ui/core/components/icon';\nimport {TuiTiles} from '@taiga-ui/kit/components/tiles';\nimport type {PolymorpheusContent} from '@taiga-ui/polymorpheus';\nimport {PolymorpheusOutlet, PolymorpheusTemplate} from '@taiga-ui/polymorpheus';\n\nimport {TUI_REORDER_OPTIONS} from './reorder.options';\n\n@Component({\n standalone: true,\n selector: 'tui-reorder',\n imports: [\n AsyncPipe,\n NgForOf,\n PolymorpheusOutlet,\n PolymorpheusTemplate,\n TuiButton,\n TuiIcon,\n TuiTiles,\n ],\n templateUrl: './reorder.template.html',\n styleUrls: ['./reorder.style.less'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n host: {\n '(focusout.stop)': '(0)',\n '(pointerdown.silent)': 'onDrag()',\n '(document:pointerup.silent)': 'onDrop()',\n },\n})\nexport class TuiReorder<T> {\n private dragging = false;\n\n protected order = new Map<number, number>();\n protected unsortedItems: readonly T[] = [];\n protected readonly options = inject(TUI_REORDER_OPTIONS);\n protected readonly showHideText$ = inject(TUI_TABLE_SHOW_HIDE_MESSAGE);\n\n @Input()\n public enabled: readonly T[] = [];\n\n @Output()\n public readonly itemsChange = new EventEmitter<T[]>();\n\n @Output()\n public readonly enabledChange = new EventEmitter<T[]>();\n\n @Input()\n public set items(items: readonly T[]) {\n if (\n items.length !== this.unsortedItems.length \|\|\n !items.every((item) => this.unsortedItems.includes(item))\n ) {\n this.unsortedItems = items;\n }\n }\n\n @Input()\n public content: PolymorpheusContent<TuiContext<T> & {index: number}> = ({\n $implicit,\n }) => String($implicit);\n\n protected onDrag(): void {\n this.dragging = true;\n }\n\n protected onDrop(): void {\n if (!this.dragging) {\n return;\n }\n\n this.dragging = false;\n this.updateItems();\n }\n\n protected isEnabled(item: T): boolean {\n return this.enabled.includes(item);\n }\n\n protected getIcon(item: T): string {\n return this.isEnabled(item) ? this.options.icons.hide : this.options.icons.show;\n }\n\n protected toggle(toggled: T): void {\n this.enabled = this.isEnabled(toggled)\n ? this.enabled.filter((item) => item !== toggled)\n : this.enabled.concat(toggled);\n\n this.updateEnabled();\n }\n\n protected move(index: number, direction: number): void {\n const oldIndex = this.order.get(index) ?? index;\n\n if (\n (!oldIndex && direction < 0) \|\|\n (oldIndex === this.unsortedItems.length - 1 && direction > 0)\n ) {\n return;\n }\n\n const newIndex = oldIndex + direction;\n const oldItem = Array.from(this.order.values()).findIndex(\n (item) => item === newIndex,\n );\n\n this.order.set(index, newIndex);\n this.order.set(oldItem, oldIndex);\n this.order = new Map(this.order);\n\n this.updateItems();\n }\n\n private getSortedItems(): T[] {\n const items = new Array(this.unsortedItems.length);\n\n this.unsortedItems.forEach((item, index) => {\n items[this.order.get(index) ?? index] = item;\n });\n\n return items;\n }\n\n private updateItems(): void {\n this.itemsChange.emit(this.getSortedItems());\n this.updateEnabled();\n }\n\n private updateEnabled(): void {\n const enabled = this.getSortedItems().filter((item) => this.isEnabled(item));\n\n this.enabled = enabled;\n this.enabledChange.emit(enabled);\n }\n}\n","<tui-tiles\n class=\"t-wrapper\"\n [(order)]=\"order\"\n>\n <tui-tile\n ngFor=\"let item of unsortedItems; let index = index\"\n [style.order]=\"order.get(index)\"\n >\n <div\n class=\"t-item\"\n [class.t-item_disabled]=\"!isEnabled(item)\"\n >\n <div\n tuiTileHandle\n class=\"t-draggable\"\n >\n <tui-icon\n class=\"t-icon\"\n [icon]=\"options.icons.drag\"\n />\n <ng-container polymorpheusOutlet=\"content as template; context: {$implicit: item, index: index}\">\n {{ template }}\n </ng-container>\n </div>\n <button\n appearance=\"icon\"\n size=\"xs\"\n tuiIconButton\n type=\"button\"\n class=\"t-button\"\n [iconStart]=\"getIcon(item)\"\n (click)=\"toggle(item)\"\n (keydown.arrowDown.prevent)=\"move(index, 1)\"\n (keydown.arrowUp.prevent)=\"move(index, -1)\"\n >\n {{ showHideText$ \| async }}\n </button>\n </div>\n </tui-tile>\n</tui-tiles>\n","/*\n Generated bundle index. Do not edit.\n /\n\nexport from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/taiga-ui-addon-table-components-table.mjs CHANGED Viewed

@@ -13,13 +13,13 @@ import { tuiWatch, tuiTypedFromEvent, tuiPreventDefault, tuiQueryListChanges } f
 import { DOCUMENT, AsyncPipe, NgIf, NgTemplateOutlet, NgForOf } from '@angular/common';
 import { EMPTY_CLIENT_RECT, EMPTY_QUERY } from '@taiga-ui/cdk/constants';
 import { tuiInjectElement } from '@taiga-ui/cdk/utils/dom';
+import { coerceBooleanProperty } from '@angular/cdk/coercion';
 import { TuiIcon } from '@taiga-ui/core/components/icon';
 import { __decorate } from 'tslib';
 import { TuiMapperPipe } from '@taiga-ui/cdk/pipes/mapper';
 import { TuiChevron } from '@taiga-ui/kit/directives/chevron';
 import { PolymorpheusOutlet } from '@taiga-ui/polymorpheus';
 import { TuiControl } from '@taiga-ui/cdk/classes';
-import { AbstractTuiControl } from '@taiga-ui/legacy/classes';
 class TuiTableCaption {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiTableCaption, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
@@ -54,6 +54,7 @@ const TUI_TABLE_DEFAULT_OPTIONS = {
     open: true,
     size: 'm',
     direction: 1,
+    requiredSort: false,
     sortIcons: {
         asc: '@tui.chevron-up',
         desc: '@tui.chevron-down',
@@ -277,6 +278,7 @@ class TuiTableTh {
             : null;
         this.resizable = this.options.resizable;
         this.sticky = this.options.sticky;
+        this.requiredSort = this.options.requiredSort;
     }
     get key() {
         if (!this.head) {
@@ -296,7 +298,8 @@ class TuiTableTh {
         return this.options.sortIcons.off;
     }
     updateSorterAndDirection() {
-        this.table?.updateSorterAndDirection(this.isCurrentAndAscDirection ? null : this.sorter);
+        const sorter = this.requiredSort ? this.sorter : null;
+        this.table?.updateSorterAndDirection(this.isCurrentAndAscDirection ? sorter : this.sorter);
     }
     onResized(width) {
         this.width = width;
@@ -305,20 +308,23 @@ class TuiTableTh {
         return this.sorter === this.table?.sorter && this.table?.direction === -1;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiTableTh, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TuiTableTh, isStandalone: true, selector: "th[tuiTh]", inputs: { sorter: "sorter", resizable: "resizable", sticky: "sticky" }, host: { properties: { "style.width.px": "width", "class._sticky": "sticky" } }, ngImport: i0, template: "<button\n    *ngIf=\"sorter && table; else content\"\n    type=\"button\"\n    class=\"t-sort\"\n    [class.t-sort_sorted]=\"isCurrent\"\n    (click)=\"updateSorterAndDirection()\"\n>\n    <ng-container [ngTemplateOutlet]=\"content\" />\n    {{ table && table.change$ | async }}\n    <tui-icon\n        class=\"t-icon\"\n        [icon]=\"icon\"\n    />\n</button>\n<ng-template #content>\n    <ng-content />\n</ng-template>\n<div\n    *ngIf=\"resizable\"\n    class=\"t-bar\"\n    (tuiResized)=\"onResized($event)\"\n></div>\n", styles: [":host{transition-property:box-shadow;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;position:relative;top:0;block-size:var(--tui-height-m);font:var(--tui-font-text-s);text-align:start;font-weight:700;color:var(--tui-text-secondary);background:var(--tui-background-base);cursor:default;padding:0 .75rem;box-sizing:border-box;box-shadow:0 .3125rem #ededed00;border:1px solid var(--tui-border-normal);filter:opacity(1)}@supports (-webkit-hyphens: none){:host{transform:translateZ(0)}}:host:not(:first-child){border-inline-start:none}:host._sticky,:host-context(._stuck) :host._sticky{position:sticky;z-index:30}:host._sticky:first-child,:host-context(._stuck) :host._sticky:first-child{left:0}:host._sticky:after,:host-context(._stuck) :host._sticky:after{transition-property:opacity;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;content:\"\";position:absolute;top:0;left:100%;bottom:0;inline-size:.3125rem;pointer-events:none;background:#edededb3;opacity:0}:host-context(._stuck) :host{z-index:20}:host-context(tr:not(:first-child)){border-block-start:none}:host-context(table[data-size=\"l\"]){block-size:var(--tui-height-l);font:var(--tui-font-text-m);font-weight:700;padding:0 1rem}:host-context(table[data-size=\"s\"]){block-size:var(--tui-height-s);font:var(--tui-font-text-s);font-weight:700;padding:0 .5rem}:host-context(thead[tuiThead]){position:sticky}:host-context(table._stuck)._sticky:after{opacity:1}:host-context(thead[tuiThead]._stuck){box-shadow:0 .3125rem #edededb3}:host-context([tuiTheme=\"dark\"])._sticky:after{background:#3c3c3ce6}:host-context([tuiTheme=\"dark\"] thead[tuiThead]._stuck){box-shadow:0 .3125rem #3c3c3ce6}:host-context([tuiTheme=\"dark\"] thead[tuiThead]._stuck):first-child{box-shadow:.0625rem .3125rem #3c3c3ce6}:host-context(table[data-size=\"l\"] thead[tuiThead] tr:nth-child(2)){top:var(--tui-height-l)}:host-context(table[data-size=\"m\"] thead[tuiThead] tr:nth-child(2)){top:var(--tui-height-m)}:host-context(table[data-size=\"s\"] thead[tuiThead] tr:nth-child(2)){top:var(--tui-height-s)}.t-sort{transition-property:color;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;-webkit-appearance:none;appearance:none;padding:0;border:0;background:none;font-size:inherit;line-height:inherit;text-decoration:none;display:inline-flex;flex-direction:inherit;align-items:center;outline:none;font-weight:700;cursor:pointer}.t-sort_sorted{color:var(--tui-text-primary)}.t-sort:focus-visible{background:var(--tui-service-selection-background)}.t-sort:hover{color:var(--tui-text-primary)}.t-bar{transition-property:opacity;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;position:absolute;top:0;bottom:0;right:-1px;inline-size:3px;justify-self:flex-end;border-inline-start:2px solid transparent;background:var(--tui-status-warning);background-clip:content-box;cursor:ew-resize;opacity:0}.t-bar:hover,.t-bar:active{opacity:1}.t-icon{border:.25rem solid transparent}\n"], dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: TuiIcon, selector: "tui-icon", inputs: ["icon", "background"] }, { kind: "directive", type: TuiTableResized, selector: "[tuiResized]", outputs: ["tuiResized"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TuiTableTh, isStandalone: true, selector: "th[tuiTh]", inputs: { sorter: "sorter", resizable: "resizable", sticky: "sticky", requiredSort: "requiredSort" }, host: { properties: { "style.width.px": "width", "class._sticky": "sticky", "attr.requiredSort": "requiredSort" } }, ngImport: i0, template: "<button\n    *ngIf=\"sorter && table; else content\"\n    type=\"button\"\n    class=\"t-sort\"\n    [class.t-sort_sorted]=\"isCurrent\"\n    (click)=\"updateSorterAndDirection()\"\n>\n    <ng-container [ngTemplateOutlet]=\"content\" />\n    {{ table && table.change$ | async }}\n    <tui-icon\n        class=\"t-icon\"\n        [icon]=\"icon\"\n    />\n</button>\n<ng-template #content>\n    <ng-content />\n</ng-template>\n<div\n    *ngIf=\"resizable\"\n    class=\"t-bar\"\n    (tuiResized)=\"onResized($event)\"\n></div>\n", styles: [":host{transition-property:box-shadow;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;position:relative;top:0;block-size:var(--tui-height-m);font:var(--tui-font-text-s);text-align:start;font-weight:700;color:var(--tui-text-secondary);background:var(--tui-background-base);cursor:default;padding:0 .75rem;box-sizing:border-box;box-shadow:0 .3125rem #ededed00;border:1px solid var(--tui-border-normal);filter:opacity(1)}@supports (-webkit-hyphens: none){:host{transform:translateZ(0)}}:host:not(:first-child){border-inline-start:none}:host._sticky,:host-context(._stuck) :host._sticky{position:sticky;z-index:30}:host._sticky:first-child,:host-context(._stuck) :host._sticky:first-child{left:0}:host._sticky:after,:host-context(._stuck) :host._sticky:after{transition-property:opacity;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;content:\"\";position:absolute;top:0;left:100%;bottom:0;inline-size:.3125rem;pointer-events:none;background:#edededb3;opacity:0}:host-context(._stuck) :host{z-index:20}:host-context(tr:not(:first-child)){border-block-start:none}:host-context(table[data-size=\"l\"]){block-size:var(--tui-height-l);font:var(--tui-font-text-m);font-weight:700;padding:0 1rem}:host-context(table[data-size=\"s\"]){block-size:var(--tui-height-s);font:var(--tui-font-text-s);font-weight:700;padding:0 .5rem}:host-context(thead[tuiThead]){position:sticky}:host-context(table._stuck)._sticky:after{opacity:1}:host-context(thead[tuiThead]._stuck){box-shadow:0 .3125rem #edededb3}:host-context([tuiTheme=\"dark\"])._sticky:after{background:#3c3c3ce6}:host-context([tuiTheme=\"dark\"] thead[tuiThead]._stuck){box-shadow:0 .3125rem #3c3c3ce6}:host-context([tuiTheme=\"dark\"] thead[tuiThead]._stuck):first-child{box-shadow:.0625rem .3125rem #3c3c3ce6}:host-context(table[data-size=\"l\"] thead[tuiThead] tr:nth-child(2)){top:var(--tui-height-l)}:host-context(table[data-size=\"m\"] thead[tuiThead] tr:nth-child(2)){top:var(--tui-height-m)}:host-context(table[data-size=\"s\"] thead[tuiThead] tr:nth-child(2)){top:var(--tui-height-s)}.t-sort{transition-property:color;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;-webkit-appearance:none;appearance:none;padding:0;border:0;background:none;font-size:inherit;line-height:inherit;text-decoration:none;display:inline-flex;flex-direction:inherit;align-items:center;outline:none;font-weight:700;cursor:pointer}.t-sort_sorted{color:var(--tui-text-primary)}.t-sort:focus-visible{background:var(--tui-service-selection-background)}.t-sort:hover{color:var(--tui-text-primary)}.t-bar{transition-property:opacity;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;position:absolute;top:0;bottom:0;right:-1px;inline-size:3px;justify-self:flex-end;border-inline-start:2px solid transparent;background:var(--tui-status-warning);background-clip:content-box;cursor:ew-resize;opacity:0}.t-bar:hover,.t-bar:active{opacity:1}.t-icon{border-width:.25rem}\n"], dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: TuiIcon, selector: "tui-icon", inputs: ["icon", "background"] }, { kind: "directive", type: TuiTableResized, selector: "[tuiResized]", outputs: ["tuiResized"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiTableTh, decorators: [{
             type: Component,
             args: [{ standalone: true, selector: 'th[tuiTh]', imports: [AsyncPipe, NgIf, NgTemplateOutlet, TuiIcon, TuiTableResized], changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         '[style.width.px]': 'width',
                         '[class._sticky]': 'sticky',
-                    }, template: "<button\n    *ngIf=\"sorter && table; else content\"\n    type=\"button\"\n    class=\"t-sort\"\n    [class.t-sort_sorted]=\"isCurrent\"\n    (click)=\"updateSorterAndDirection()\"\n>\n    <ng-container [ngTemplateOutlet]=\"content\" />\n    {{ table && table.change$ | async }}\n    <tui-icon\n        class=\"t-icon\"\n        [icon]=\"icon\"\n    />\n</button>\n<ng-template #content>\n    <ng-content />\n</ng-template>\n<div\n    *ngIf=\"resizable\"\n    class=\"t-bar\"\n    (tuiResized)=\"onResized($event)\"\n></div>\n", styles: [":host{transition-property:box-shadow;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;position:relative;top:0;block-size:var(--tui-height-m);font:var(--tui-font-text-s);text-align:start;font-weight:700;color:var(--tui-text-secondary);background:var(--tui-background-base);cursor:default;padding:0 .75rem;box-sizing:border-box;box-shadow:0 .3125rem #ededed00;border:1px solid var(--tui-border-normal);filter:opacity(1)}@supports (-webkit-hyphens: none){:host{transform:translateZ(0)}}:host:not(:first-child){border-inline-start:none}:host._sticky,:host-context(._stuck) :host._sticky{position:sticky;z-index:30}:host._sticky:first-child,:host-context(._stuck) :host._sticky:first-child{left:0}:host._sticky:after,:host-context(._stuck) :host._sticky:after{transition-property:opacity;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;content:\"\";position:absolute;top:0;left:100%;bottom:0;inline-size:.3125rem;pointer-events:none;background:#edededb3;opacity:0}:host-context(._stuck) :host{z-index:20}:host-context(tr:not(:first-child)){border-block-start:none}:host-context(table[data-size=\"l\"]){block-size:var(--tui-height-l);font:var(--tui-font-text-m);font-weight:700;padding:0 1rem}:host-context(table[data-size=\"s\"]){block-size:var(--tui-height-s);font:var(--tui-font-text-s);font-weight:700;padding:0 .5rem}:host-context(thead[tuiThead]){position:sticky}:host-context(table._stuck)._sticky:after{opacity:1}:host-context(thead[tuiThead]._stuck){box-shadow:0 .3125rem #edededb3}:host-context([tuiTheme=\"dark\"])._sticky:after{background:#3c3c3ce6}:host-context([tuiTheme=\"dark\"] thead[tuiThead]._stuck){box-shadow:0 .3125rem #3c3c3ce6}:host-context([tuiTheme=\"dark\"] thead[tuiThead]._stuck):first-child{box-shadow:.0625rem .3125rem #3c3c3ce6}:host-context(table[data-size=\"l\"] thead[tuiThead] tr:nth-child(2)){top:var(--tui-height-l)}:host-context(table[data-size=\"m\"] thead[tuiThead] tr:nth-child(2)){top:var(--tui-height-m)}:host-context(table[data-size=\"s\"] thead[tuiThead] tr:nth-child(2)){top:var(--tui-height-s)}.t-sort{transition-property:color;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;-webkit-appearance:none;appearance:none;padding:0;border:0;background:none;font-size:inherit;line-height:inherit;text-decoration:none;display:inline-flex;flex-direction:inherit;align-items:center;outline:none;font-weight:700;cursor:pointer}.t-sort_sorted{color:var(--tui-text-primary)}.t-sort:focus-visible{background:var(--tui-service-selection-background)}.t-sort:hover{color:var(--tui-text-primary)}.t-bar{transition-property:opacity;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;position:absolute;top:0;bottom:0;right:-1px;inline-size:3px;justify-self:flex-end;border-inline-start:2px solid transparent;background:var(--tui-status-warning);background-clip:content-box;cursor:ew-resize;opacity:0}.t-bar:hover,.t-bar:active{opacity:1}.t-icon{border:.25rem solid transparent}\n"] }]
+                        '[attr.requiredSort]': 'requiredSort',
+                    }, template: "<button\n    *ngIf=\"sorter && table; else content\"\n    type=\"button\"\n    class=\"t-sort\"\n    [class.t-sort_sorted]=\"isCurrent\"\n    (click)=\"updateSorterAndDirection()\"\n>\n    <ng-container [ngTemplateOutlet]=\"content\" />\n    {{ table && table.change$ | async }}\n    <tui-icon\n        class=\"t-icon\"\n        [icon]=\"icon\"\n    />\n</button>\n<ng-template #content>\n    <ng-content />\n</ng-template>\n<div\n    *ngIf=\"resizable\"\n    class=\"t-bar\"\n    (tuiResized)=\"onResized($event)\"\n></div>\n", styles: [":host{transition-property:box-shadow;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;position:relative;top:0;block-size:var(--tui-height-m);font:var(--tui-font-text-s);text-align:start;font-weight:700;color:var(--tui-text-secondary);background:var(--tui-background-base);cursor:default;padding:0 .75rem;box-sizing:border-box;box-shadow:0 .3125rem #ededed00;border:1px solid var(--tui-border-normal);filter:opacity(1)}@supports (-webkit-hyphens: none){:host{transform:translateZ(0)}}:host:not(:first-child){border-inline-start:none}:host._sticky,:host-context(._stuck) :host._sticky{position:sticky;z-index:30}:host._sticky:first-child,:host-context(._stuck) :host._sticky:first-child{left:0}:host._sticky:after,:host-context(._stuck) :host._sticky:after{transition-property:opacity;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;content:\"\";position:absolute;top:0;left:100%;bottom:0;inline-size:.3125rem;pointer-events:none;background:#edededb3;opacity:0}:host-context(._stuck) :host{z-index:20}:host-context(tr:not(:first-child)){border-block-start:none}:host-context(table[data-size=\"l\"]){block-size:var(--tui-height-l);font:var(--tui-font-text-m);font-weight:700;padding:0 1rem}:host-context(table[data-size=\"s\"]){block-size:var(--tui-height-s);font:var(--tui-font-text-s);font-weight:700;padding:0 .5rem}:host-context(thead[tuiThead]){position:sticky}:host-context(table._stuck)._sticky:after{opacity:1}:host-context(thead[tuiThead]._stuck){box-shadow:0 .3125rem #edededb3}:host-context([tuiTheme=\"dark\"])._sticky:after{background:#3c3c3ce6}:host-context([tuiTheme=\"dark\"] thead[tuiThead]._stuck){box-shadow:0 .3125rem #3c3c3ce6}:host-context([tuiTheme=\"dark\"] thead[tuiThead]._stuck):first-child{box-shadow:.0625rem .3125rem #3c3c3ce6}:host-context(table[data-size=\"l\"] thead[tuiThead] tr:nth-child(2)){top:var(--tui-height-l)}:host-context(table[data-size=\"m\"] thead[tuiThead] tr:nth-child(2)){top:var(--tui-height-m)}:host-context(table[data-size=\"s\"] thead[tuiThead] tr:nth-child(2)){top:var(--tui-height-s)}.t-sort{transition-property:color;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;-webkit-appearance:none;appearance:none;padding:0;border:0;background:none;font-size:inherit;line-height:inherit;text-decoration:none;display:inline-flex;flex-direction:inherit;align-items:center;outline:none;font-weight:700;cursor:pointer}.t-sort_sorted{color:var(--tui-text-primary)}.t-sort:focus-visible{background:var(--tui-service-selection-background)}.t-sort:hover{color:var(--tui-text-primary)}.t-bar{transition-property:opacity;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;position:absolute;top:0;bottom:0;right:-1px;inline-size:3px;justify-self:flex-end;border-inline-start:2px solid transparent;background:var(--tui-status-warning);background-clip:content-box;cursor:ew-resize;opacity:0}.t-bar:hover,.t-bar:active{opacity:1}.t-icon{border-width:.25rem}\n"] }]
         }], propDecorators: { sorter: [{
                 type: Input
             }], resizable: [{
                 type: Input
             }], sticky: [{
                 type: Input
+            }], requiredSort: [{
+                type: Input
             }] } });
 class TuiTableSortKeyException extends Error {
     constructor() {
@@ -336,9 +342,14 @@ class TuiTableSortable {
     get key() {
         return this.th.key;
     }
-    ngOnInit() {
-        this.sorter = this.match ? this.table.sorter : this.sorter;
-        this.th.sorter = this.sorter;
+    ngOnChanges() {
+        if (this.sortable) {
+            this.sorter = this.match ? this.table.sorter : this.sorter;
+            this.th.sorter = this.sorter;
+        }
+        else {
+            this.th.sorter = null;
+        }
     }
     check() {
         if (this.match && this.table.sorter !== this.sorter) {
@@ -349,7 +360,7 @@ class TuiTableSortable {
         return this.sortBy.tuiSortBy === this.key;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiTableSortable, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: TuiTableSortable, isStandalone: true, selector: "th[tuiTh][tuiSortable]", ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "16.2.12", type: TuiTableSortable, isStandalone: true, selector: "th[tuiTh][tuiSortable]", inputs: { sortable: ["tuiSortable", "sortable", coerceBooleanProperty] }, usesOnChanges: true, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiTableSortable, decorators: [{
             type: Directive,
@@ -357,7 +368,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                     standalone: true,
                     selector: 'th[tuiTh][tuiSortable]',
                 }]
-        }] });
+        }], propDecorators: { sortable: [{
+                type: Input,
+                args: [{
+                        alias: 'tuiSortable',
+                        transform: coerceBooleanProperty,
+                    }]
+            }] } });
 class TuiTableSortBy {
     constructor() {
@@ -462,19 +479,16 @@ const TUI_TABLE_PROVIDER = [
 class TuiTableTd {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiTableTd, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TuiTableTd, isStandalone: true, selector: "th[tuiTd], td[tuiTd]", host: { properties: { "class._editable": "current || legacy" } }, queries: [{ propertyName: "current", first: true, predicate: TuiControl, descendants: true }, { propertyName: "legacy", first: true, predicate: AbstractTuiControl, descendants: true }], ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: [":host{position:relative;text-align:start;background:var(--tui-background-base);border:1px solid var(--tui-border-normal);border-block-start:none;box-sizing:border-box;filter:opacity(1)}@supports (-webkit-hyphens: none){:host{transform:translateZ(0)}}:host:first-child{left:0}:host:not(:first-child){border-inline-start:none}:host._editable:focus-within{z-index:1}:host._editable{padding:0!important;vertical-align:top}:host(th){position:sticky;z-index:1}:host(th):after{transition-property:opacity;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;content:\"\";position:absolute;top:0;bottom:0;left:100%;inline-size:.3125rem;pointer-events:none;background:#edededb3;opacity:0}:host(th):focus-within:not(:disabled){z-index:11}:host-context([tuiTheme=\"dark\"]):after{background:#3c3c3ce6}:host-context(table._stuck){z-index:10}:host-context(table._stuck):last-of-type:after{opacity:1}:host-context(table[data-size=\"l\"]){block-size:var(--tui-height-l);font:var(--tui-font-text-m);padding:1rem}:host-context(table[data-size=\"m\"]){block-size:var(--tui-height-m);font:var(--tui-font-text-s);padding:.75rem}:host-context(table[data-size=\"s\"]){block-size:var(--tui-height-s);font:var(--tui-font-text-s);padding:.25rem .5rem}:host(td):focus-within{z-index:1}:host(td):not(:focus-within){z-index:0}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TuiTableTd, isStandalone: true, selector: "th[tuiTd], td[tuiTd]", host: { properties: { "class._editable": "control" } }, queries: [{ propertyName: "control", first: true, predicate: TuiControl, descendants: true }], ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: [":host{position:relative;text-align:start;background:var(--tui-background-base);border:1px solid var(--tui-border-normal);border-block-start:none;box-sizing:border-box;filter:opacity(1)}@supports (-webkit-hyphens: none){:host{transform:translateZ(0)}}:host:first-child{left:0}:host:not(:first-child){border-inline-start:none}:host._editable:focus-within{z-index:1}:host._editable{padding:0!important;vertical-align:top}:host(th){position:sticky;z-index:1}:host(th):after{transition-property:opacity;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;content:\"\";position:absolute;top:0;bottom:0;left:100%;inline-size:.3125rem;pointer-events:none;background:#edededb3;opacity:0}:host(th):focus-within:not(:disabled){z-index:11}:host-context([tuiTheme=\"dark\"]):after{background:#3c3c3ce6}:host-context(table._stuck){z-index:10}:host-context(table._stuck):last-of-type:after{opacity:1}:host-context(table[data-size=\"l\"]){block-size:var(--tui-height-l);font:var(--tui-font-text-m);padding:1rem}:host-context(table[data-size=\"m\"]){block-size:var(--tui-height-m);font:var(--tui-font-text-s);padding:.75rem}:host-context(table[data-size=\"s\"]){block-size:var(--tui-height-s);font:var(--tui-font-text-s);padding:.25rem .5rem}:host(td):focus-within{z-index:1}:host(td):not(:focus-within){z-index:0}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiTableTd, decorators: [{
             type: Component,
             args: [{ standalone: true, selector: 'th[tuiTd], td[tuiTd]', template: '<ng-content></ng-content>', changeDetection: ChangeDetectionStrategy.OnPush, host: {
-                        '[class._editable]': 'current || legacy',
+                        '[class._editable]': 'control',
                     }, styles: [":host{position:relative;text-align:start;background:var(--tui-background-base);border:1px solid var(--tui-border-normal);border-block-start:none;box-sizing:border-box;filter:opacity(1)}@supports (-webkit-hyphens: none){:host{transform:translateZ(0)}}:host:first-child{left:0}:host:not(:first-child){border-inline-start:none}:host._editable:focus-within{z-index:1}:host._editable{padding:0!important;vertical-align:top}:host(th){position:sticky;z-index:1}:host(th):after{transition-property:opacity;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;content:\"\";position:absolute;top:0;bottom:0;left:100%;inline-size:.3125rem;pointer-events:none;background:#edededb3;opacity:0}:host(th):focus-within:not(:disabled){z-index:11}:host-context([tuiTheme=\"dark\"]):after{background:#3c3c3ce6}:host-context(table._stuck){z-index:10}:host-context(table._stuck):last-of-type:after{opacity:1}:host-context(table[data-size=\"l\"]){block-size:var(--tui-height-l);font:var(--tui-font-text-m);padding:1rem}:host-context(table[data-size=\"m\"]){block-size:var(--tui-height-m);font:var(--tui-font-text-s);padding:.75rem}:host-context(table[data-size=\"s\"]){block-size:var(--tui-height-s);font:var(--tui-font-text-s);padding:.25rem .5rem}:host(td):focus-within{z-index:1}:host(td):not(:focus-within){z-index:0}\n"] }]
-        }], propDecorators: { current: [{
+        }], propDecorators: { control: [{
                 type: ContentChild,
                 args: [TuiControl]
-            }], legacy: [{
-                type: ContentChild,
-                args: [AbstractTuiControl]
             }] } });
 class TuiTableTr {
@@ -491,11 +505,20 @@ class TuiTableTr {
         this.contentReady$.next(true);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiTableTr, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TuiTableTr, isStandalone: true, selector: "tr[tuiTr]", providers: [TUI_TABLE_PROVIDER], queries: [{ propertyName: "cells", predicate: i0.forwardRef(function () { return TuiTableCell; }) }], ngImport: i0, template: "<ng-container *ngIf=\"cells$ | async as items\">\n    <ng-container\n        *ngFor=\"let key of table.columns\"\n        [ngTemplateOutlet]=\"(items[key] && items[key].template) || plain\"\n    >\n        <ng-template #plain>\n            <td\n                *ngIf=\"item$ | async as item\"\n                tuiTd\n            >\n                {{ item[key] }}\n            </td>\n        </ng-template>\n    </ng-container>\n</ng-container>\n", dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: TuiTableTd, selector: "th[tuiTd], td[tuiTd]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TuiTableTr, isStandalone: true, selector: "tr[tuiTr]", host: { attributes: { "ngSkipHydration": "true" } }, providers: [TUI_TABLE_PROVIDER], queries: [{ propertyName: "cells", predicate: i0.forwardRef(function () { return TuiTableCell; }) }], ngImport: i0, template: "<ng-container *ngIf=\"cells$ | async as items\">\n    <ng-container\n        *ngFor=\"let key of table.columns\"\n        [ngTemplateOutlet]=\"(items[key] && items[key].template) || plain\"\n    >\n        <ng-template #plain>\n            <td\n                *ngIf=\"item$ | async as item\"\n                tuiTd\n            >\n                {{ item[key] }}\n            </td>\n        </ng-template>\n    </ng-container>\n</ng-container>\n", dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: TuiTableTd, selector: "th[tuiTd], td[tuiTd]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiTableTr, decorators: [{
             type: Component,
-            args: [{ standalone: true, selector: 'tr[tuiTr]', imports: [AsyncPipe, NgForOf, NgIf, NgTemplateOutlet, TuiTableTd], changeDetection: ChangeDetectionStrategy.OnPush, providers: [TUI_TABLE_PROVIDER], template: "<ng-container *ngIf=\"cells$ | async as items\">\n    <ng-container\n        *ngFor=\"let key of table.columns\"\n        [ngTemplateOutlet]=\"(items[key] && items[key].template) || plain\"\n    >\n        <ng-template #plain>\n            <td\n                *ngIf=\"item$ | async as item\"\n                tuiTd\n            >\n                {{ item[key] }}\n            </td>\n        </ng-template>\n    </ng-container>\n</ng-container>\n" }]
+            args: [{ standalone: true, selector: 'tr[tuiTr]', imports: [AsyncPipe, NgForOf, NgIf, NgTemplateOutlet, TuiTableTd], changeDetection: ChangeDetectionStrategy.OnPush, providers: [TUI_TABLE_PROVIDER], host: {
+                        /**
+                         * TODO: fix later
+                         * Be careful and thoughtful about using this attribute.
+                         * It is intended as a last resort workaround.
+                         * Components that break hydration should be
+                         * considered bugs that need to be fixed.
+                         */
+                        ngSkipHydration: 'true',
+                    }, template: "<ng-container *ngIf=\"cells$ | async as items\">\n    <ng-container\n        *ngFor=\"let key of table.columns\"\n        [ngTemplateOutlet]=\"(items[key] && items[key].template) || plain\"\n    >\n        <ng-template #plain>\n            <td\n                *ngIf=\"item$ | async as item\"\n                tuiTd\n            >\n                {{ item[key] }}\n            </td>\n        </ng-template>\n    </ng-container>\n</ng-container>\n" }]
         }], propDecorators: { cells: [{
                 type: ContentChildren,
                 args: [forwardRef(() => TuiTableCell)]
@@ -543,11 +566,20 @@ class TuiTableThGroup {
         this.heads$ = this.heads.changes.pipe(startWith(null), map(() => this.heads.reduce((record, item) => ({ ...record, [item.tuiHead]: item }), {})));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiTableThGroup, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TuiTableThGroup, isStandalone: true, selector: "tr[tuiThGroup]", providers: [TUI_TABLE_PROVIDER], queries: [{ propertyName: "th", first: true, predicate: i0.forwardRef(function () { return TuiTableTh; }), descendants: true }, { propertyName: "heads", predicate: i0.forwardRef(function () { return TuiTableHead; }) }], ngImport: i0, template: "<ng-content />\n<ng-container *ngIf=\"heads$ | async as headings\">\n    <ng-container\n        *ngFor=\"let key of table.columns\"\n        [ngTemplateOutlet]=\"(headings[key] && headings[key].template) || plain\"\n    >\n        <ng-template #plain>\n            <th\n                *ngIf=\"!th && !heads.length\"\n                tuiTh\n            >\n                {{ key.toString() }}\n            </th>\n        </ng-template>\n    </ng-container>\n</ng-container>\n", dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: TuiTableTh, selector: "th[tuiTh]", inputs: ["sorter", "resizable", "sticky"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TuiTableThGroup, isStandalone: true, selector: "tr[tuiThGroup]", host: { attributes: { "ngSkipHydration": "true" } }, providers: [TUI_TABLE_PROVIDER], queries: [{ propertyName: "th", first: true, predicate: i0.forwardRef(function () { return TuiTableTh; }), descendants: true }, { propertyName: "heads", predicate: i0.forwardRef(function () { return TuiTableHead; }) }], ngImport: i0, template: "<ng-content />\n<ng-container *ngIf=\"heads$ | async as headings\">\n    <ng-container\n        *ngFor=\"let key of table.columns\"\n        [ngTemplateOutlet]=\"(headings[key] && headings[key].template) || plain\"\n    >\n        <ng-template #plain>\n            <th\n                *ngIf=\"!th && !heads.length\"\n                tuiTh\n            >\n                {{ key.toString() }}\n            </th>\n        </ng-template>\n    </ng-container>\n</ng-container>\n", dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: TuiTableTh, selector: "th[tuiTh]", inputs: ["sorter", "resizable", "sticky", "requiredSort"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiTableThGroup, decorators: [{
             type: Component,
-            args: [{ standalone: true, selector: 'tr[tuiThGroup]', imports: [AsyncPipe, NgForOf, NgIf, NgTemplateOutlet, TuiTableTh], changeDetection: ChangeDetectionStrategy.OnPush, providers: [TUI_TABLE_PROVIDER], template: "<ng-content />\n<ng-container *ngIf=\"heads$ | async as headings\">\n    <ng-container\n        *ngFor=\"let key of table.columns\"\n        [ngTemplateOutlet]=\"(headings[key] && headings[key].template) || plain\"\n    >\n        <ng-template #plain>\n            <th\n                *ngIf=\"!th && !heads.length\"\n                tuiTh\n            >\n                {{ key.toString() }}\n            </th>\n        </ng-template>\n    </ng-container>\n</ng-container>\n" }]
+            args: [{ standalone: true, selector: 'tr[tuiThGroup]', imports: [AsyncPipe, NgForOf, NgIf, NgTemplateOutlet, TuiTableTh], changeDetection: ChangeDetectionStrategy.OnPush, providers: [TUI_TABLE_PROVIDER], host: {
+                        /**
+                         * TODO: fix later
+                         * Be careful and thoughtful about using this attribute.
+                         * It is intended as a last resort workaround.
+                         * Components that break hydration should be
+                         * considered bugs that need to be fixed.
+                         */
+                        ngSkipHydration: 'true',
+                    }, template: "<ng-content />\n<ng-container *ngIf=\"heads$ | async as headings\">\n    <ng-container\n        *ngFor=\"let key of table.columns\"\n        [ngTemplateOutlet]=\"(headings[key] && headings[key].template) || plain\"\n    >\n        <ng-template #plain>\n            <th\n                *ngIf=\"!th && !heads.length\"\n                tuiTh\n            >\n                {{ key.toString() }}\n            </th>\n        </ng-template>\n    </ng-container>\n</ng-container>\n" }]
         }], propDecorators: { th: [{
                 type: ContentChild,
                 args: [forwardRef(() => TuiTableTh)]