ngx-tethys 20.0.2 → 20.0.3

package/fesm2022/ngx-tethys-native-table.mjs

@@ -0,0 +1,1119 @@
+import * as i0 from '@angular/core';
+import { signal, Injectable, input, ChangeDetectionStrategy, Component, inject, ElementRef, ChangeDetectorRef, DestroyRef, output, computed, effect, Renderer2, Directive, ContentChildren, ViewChild, booleanAttribute, NgZone, ViewContainerRef, Input, NgModule } from '@angular/core';
+import { NgTemplateOutlet, CommonModule } from '@angular/common';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { BehaviorSubject, Subject, ReplaySubject, merge, EMPTY, fromEvent } from 'rxjs';
+import { UpdateHostClassService } from 'ngx-tethys/core';
+import { ThyPagination } from 'ngx-tethys/pagination';
+import { ThyEmpty } from 'ngx-tethys/empty';
+import { switchMap, mergeMap, startWith, map, distinctUntilChanged, shareReplay, filter } from 'rxjs/operators';
+import * as i1 from '@angular/forms';
+import { FormsModule } from '@angular/forms';
+import { ThyCheckbox } from 'ngx-tethys/checkbox';
+import { ThyIcon } from 'ngx-tethys/icon';
+import { ThyPopover } from 'ngx-tethys/popover';
+
+class ThyNativeTableStyleService {
+    constructor() {
+        this.theadTemplate = signal(null, ...(ngDevMode ? [{ debugName: "theadTemplate" }] : []));
+        this.columnCount = signal(0, ...(ngDevMode ? [{ debugName: "columnCount" }] : []));
+        this.tableSize = signal('default', ...(ngDevMode ? [{ debugName: "tableSize" }] : []));
+        this.tableTheme = signal('default', ...(ngDevMode ? [{ debugName: "tableTheme" }] : []));
+        this.showEmpty = signal(false, ...(ngDevMode ? [{ debugName: "showEmpty" }] : []));
+        this.emptyOptions = signal(null, ...(ngDevMode ? [{ debugName: "emptyOptions" }] : []));
+        this.listOfThWidthConfigPx$ = new BehaviorSubject([]);
+    }
+    setTheadTemplate(template) {
+        this.theadTemplate.set(template);
+    }
+    setTableSize(size) {
+        this.tableSize.set(size);
+    }
+    setTableTheme(theme) {
+        this.tableTheme.set(theme);
+    }
+    setShowEmpty(showEmpty) {
+        this.showEmpty.set(showEmpty);
+    }
+    setEmptyOptions(emptyOptions) {
+        this.emptyOptions.set(emptyOptions);
+    }
+    setListOfTh(listOfTh) {
+        const listOfThPx = listOfTh.map(item => {
+            const width = item.thyWidth();
+            if (width === null || width === undefined) {
+                return null;
+            }
+            if (typeof width === 'number') {
+                return `${width}px`;
+            }
+            return width.toString();
+        });
+        this.listOfThWidthConfigPx$.next(listOfThPx);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ThyNativeTableStyleService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ThyNativeTableStyleService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ThyNativeTableStyleService, decorators: [{
+            type: Injectable
+        }] });
+
+class ThyNativeTableContentComponent {
+    constructor() {
+        this.tableLayout = input('auto', ...(ngDevMode ? [{ debugName: "tableLayout" }] : []));
+        this.theadTemplate = input(null, ...(ngDevMode ? [{ debugName: "theadTemplate" }] : []));
+        this.contentTemplate = input(null, ...(ngDevMode ? [{ debugName: "contentTemplate" }] : []));
+        this.tfootTemplate = input(null, ...(ngDevMode ? [{ debugName: "tfootTemplate" }] : []));
+        this.listOfColWidth = input([], ...(ngDevMode ? [{ debugName: "listOfColWidth" }] : []));
+        this.scrollX = input(null, ...(ngDevMode ? [{ debugName: "scrollX" }] : []));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ThyNativeTableContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: ThyNativeTableContentComponent, isStandalone: true, selector: "table[thy-native-table-content]", inputs: { tableLayout: { classPropertyName: "tableLayout", publicName: "tableLayout", isSignal: true, isRequired: false, transformFunction: null }, theadTemplate: { classPropertyName: "theadTemplate", publicName: "theadTemplate", isSignal: true, isRequired: false, transformFunction: null }, contentTemplate: { classPropertyName: "contentTemplate", publicName: "contentTemplate", isSignal: true, isRequired: false, transformFunction: null }, tfootTemplate: { classPropertyName: "tfootTemplate", publicName: "tfootTemplate", isSignal: true, isRequired: false, transformFunction: null }, listOfColWidth: { classPropertyName: "listOfColWidth", publicName: "listOfColWidth", isSignal: true, isRequired: false, transformFunction: null }, scrollX: { classPropertyName: "scrollX", publicName: "scrollX", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.table-layout": "tableLayout()", "style.width": "scrollX()" }, classAttribute: "thy-native-table-content" }, ngImport: i0, template: `
+        @if (listOfColWidth().length > 0) {
+            <colgroup>
+                @for (width of listOfColWidth(); track $index) {
+                    <col [style.width]="width" [style.minWidth]="width" />
+                }
+            </colgroup>
+        }
+        @if (theadTemplate()) {
+            <thead class="thy-native-table-thead">
+                <ng-template [ngTemplateOutlet]="theadTemplate()!"></ng-template>
+            </thead>
+        }
+        @if (contentTemplate()) {
+            <ng-template [ngTemplateOutlet]="contentTemplate()!"></ng-template>
+        }
+        <ng-content></ng-content>
+        @if (tfootTemplate()) {
+            <tfoot class="thy-native-table-summary">
+                <ng-template [ngTemplateOutlet]="tfootTemplate()!"></ng-template>
+            </tfoot>
+        }
+    `, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ThyNativeTableContentComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'table[thy-native-table-content]',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    template: `
+        @if (listOfColWidth().length > 0) {
+            <colgroup>
+                @for (width of listOfColWidth(); track $index) {
+                    <col [style.width]="width" [style.minWidth]="width" />
+                }
+            </colgroup>
+        }
+        @if (theadTemplate()) {
+            <thead class="thy-native-table-thead">
+                <ng-template [ngTemplateOutlet]="theadTemplate()!"></ng-template>
+            </thead>
+        }
+        @if (contentTemplate()) {
+            <ng-template [ngTemplateOutlet]="contentTemplate()!"></ng-template>
+        }
+        <ng-content></ng-content>
+        @if (tfootTemplate()) {
+            <tfoot class="thy-native-table-summary">
+                <ng-template [ngTemplateOutlet]="tfootTemplate()!"></ng-template>
+            </tfoot>
+        }
+    `,
+                    host: {
+                        '[style.table-layout]': 'tableLayout()',
+                        '[style.width]': 'scrollX()',
+                        class: 'thy-native-table-content'
+                    },
+                    imports: [NgTemplateOutlet]
+                }]
+        }], propDecorators: { tableLayout: [{ type: i0.Input, args: [{ isSignal: true, alias: "tableLayout", required: false }] }], theadTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "theadTemplate", required: false }] }], contentTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "contentTemplate", required: false }] }], tfootTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "tfootTemplate", required: false }] }], listOfColWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "listOfColWidth", required: false }] }], scrollX: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollX", required: false }] }] } });
+
+class ThyNativeTableInnerDefaultComponent {
+    constructor() {
+        this.tableLayout = input('auto', ...(ngDevMode ? [{ debugName: "tableLayout" }] : []));
+        this.listOfColWidth = input([], ...(ngDevMode ? [{ debugName: "listOfColWidth" }] : []));
+        this.theadTemplate = input(null, ...(ngDevMode ? [{ debugName: "theadTemplate" }] : []));
+        this.contentTemplate = input(null, ...(ngDevMode ? [{ debugName: "contentTemplate" }] : []));
+        this.tfootTemplate = input(null, ...(ngDevMode ? [{ debugName: "tfootTemplate" }] : []));
+    }
+    ngOnInit() { }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ThyNativeTableInnerDefaultComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.15", type: ThyNativeTableInnerDefaultComponent, isStandalone: true, selector: "thy-native-table-inner-default", inputs: { tableLayout: { classPropertyName: "tableLayout", publicName: "tableLayout", isSignal: true, isRequired: false, transformFunction: null }, listOfColWidth: { classPropertyName: "listOfColWidth", publicName: "listOfColWidth", isSignal: true, isRequired: false, transformFunction: null }, theadTemplate: { classPropertyName: "theadTemplate", publicName: "theadTemplate", isSignal: true, isRequired: false, transformFunction: null }, contentTemplate: { classPropertyName: "contentTemplate", publicName: "contentTemplate", isSignal: true, isRequired: false, transformFunction: null }, tfootTemplate: { classPropertyName: "tfootTemplate", publicName: "tfootTemplate", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "thy-native-table-container" }, ngImport: i0, template: `
+        <div class="thy-native-table-content">
+            <table
+                thy-native-table-content
+                [tableLayout]="tableLayout()"
+                [listOfColWidth]="listOfColWidth()"
+                [theadTemplate]="theadTemplate()"
+                [contentTemplate]="contentTemplate()"
+                [tfootTemplate]="tfootTemplate()"></table>
+        </div>
+    `, isInline: true, dependencies: [{ kind: "component", type: ThyNativeTableContentComponent, selector: "table[thy-native-table-content]", inputs: ["tableLayout", "theadTemplate", "contentTemplate", "tfootTemplate", "listOfColWidth", "scrollX"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ThyNativeTableInnerDefaultComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'thy-native-table-inner-default',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    template: `
+        <div class="thy-native-table-content">
+            <table
+                thy-native-table-content
+                [tableLayout]="tableLayout()"
+                [listOfColWidth]="listOfColWidth()"
+                [theadTemplate]="theadTemplate()"
+                [contentTemplate]="contentTemplate()"
+                [tfootTemplate]="tfootTemplate()"></table>
+        </div>
+    `,
+                    host: { class: 'thy-native-table-container' },
+                    imports: [ThyNativeTableContentComponent]
+                }]
+        }], propDecorators: { tableLayout: [{ type: i0.Input, args: [{ isSignal: true, alias: "tableLayout", required: false }] }], listOfColWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "listOfColWidth", required: false }] }], theadTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "theadTemplate", required: false }] }], contentTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "contentTemplate", required: false }] }], tfootTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "tfootTemplate", required: false }] }] } });
+
+class ThyNativeTableInnerScrollComponent {
+    constructor() {
+        this.data = input([], ...(ngDevMode ? [{ debugName: "data" }] : []));
+        this.scrollX = input(null, ...(ngDevMode ? [{ debugName: "scrollX" }] : []));
+        this.scrollY = input(null, ...(ngDevMode ? [{ debugName: "scrollY" }] : []));
+        this.contentTemplate = input(null, ...(ngDevMode ? [{ debugName: "contentTemplate" }] : []));
+        this.widthConfig = input([], ...(ngDevMode ? [{ debugName: "widthConfig" }] : []));
+        this.listOfColWidth = input([], ...(ngDevMode ? [{ debugName: "listOfColWidth" }] : []));
+        this.theadTemplate = input(null, ...(ngDevMode ? [{ debugName: "theadTemplate" }] : []));
+        this.tfootTemplate = input(null, ...(ngDevMode ? [{ debugName: "tfootTemplate" }] : []));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ThyNativeTableInnerScrollComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: ThyNativeTableInnerScrollComponent, isStandalone: true, selector: "thy-native-table-inner-scroll", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, scrollX: { classPropertyName: "scrollX", publicName: "scrollX", isSignal: true, isRequired: false, transformFunction: null }, scrollY: { classPropertyName: "scrollY", publicName: "scrollY", isSignal: true, isRequired: false, transformFunction: null }, contentTemplate: { classPropertyName: "contentTemplate", publicName: "contentTemplate", isSignal: true, isRequired: false, transformFunction: null }, widthConfig: { classPropertyName: "widthConfig", publicName: "widthConfig", isSignal: true, isRequired: false, transformFunction: null }, listOfColWidth: { classPropertyName: "listOfColWidth", publicName: "listOfColWidth", isSignal: true, isRequired: false, transformFunction: null }, theadTemplate: { classPropertyName: "theadTemplate", publicName: "theadTemplate", isSignal: true, isRequired: false, transformFunction: null }, tfootTemplate: { classPropertyName: "tfootTemplate", publicName: "tfootTemplate", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "thy-native-table-container" }, ngImport: i0, template: `
+        @if (scrollY()) {
+            <div #tableHeaderElement class="thy-native-table-header">
+                <table
+                    thy-native-table-content
+                    [tableLayout]="'fixed'"
+                    [scrollX]="scrollX()"
+                    [listOfColWidth]="listOfColWidth()"
+                    [theadTemplate]="theadTemplate()"></table>
+            </div>
+            <div #tableBodyElement class="thy-native-table-body" [style.max-height]="scrollY()">
+                <table
+                    thy-native-table-content
+                    [tableLayout]="'fixed'"
+                    [scrollX]="scrollX()"
+                    [listOfColWidth]="listOfColWidth()"
+                    [contentTemplate]="contentTemplate()"></table>
+            </div>
+            <div #tableFootElement class="thy-native-table-summary">
+                <table
+                    thy-native-table-content
+                    [tableLayout]="'fixed'"
+                    [scrollX]="scrollX()"
+                    [listOfColWidth]="listOfColWidth()"
+                    [tfootTemplate]="tfootTemplate()"></table>
+            </div>
+        } @else {
+            <div class="thy-native-table-content" [style.overflow-x]="scrollX() ? 'auto' : null">
+                <table
+                    thy-native-table-content
+                    [tableLayout]="'fixed'"
+                    [scrollX]="scrollX()"
+                    [listOfColWidth]="listOfColWidth()"
+                    [theadTemplate]="theadTemplate()"
+                    [contentTemplate]="contentTemplate()"
+                    [tfootTemplate]="tfootTemplate()"></table>
+            </div>
+        }
+    `, isInline: true, dependencies: [{ kind: "component", type: ThyNativeTableContentComponent, selector: "table[thy-native-table-content]", inputs: ["tableLayout", "theadTemplate", "contentTemplate", "tfootTemplate", "listOfColWidth", "scrollX"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ThyNativeTableInnerScrollComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'thy-native-table-inner-scroll',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    template: `
+        @if (scrollY()) {
+            <div #tableHeaderElement class="thy-native-table-header">
+                <table
+                    thy-native-table-content
+                    [tableLayout]="'fixed'"
+                    [scrollX]="scrollX()"
+                    [listOfColWidth]="listOfColWidth()"
+                    [theadTemplate]="theadTemplate()"></table>
+            </div>
+            <div #tableBodyElement class="thy-native-table-body" [style.max-height]="scrollY()">
+                <table
+                    thy-native-table-content
+                    [tableLayout]="'fixed'"
+                    [scrollX]="scrollX()"
+                    [listOfColWidth]="listOfColWidth()"
+                    [contentTemplate]="contentTemplate()"></table>
+            </div>
+            <div #tableFootElement class="thy-native-table-summary">
+                <table
+                    thy-native-table-content
+                    [tableLayout]="'fixed'"
+                    [scrollX]="scrollX()"
+                    [listOfColWidth]="listOfColWidth()"
+                    [tfootTemplate]="tfootTemplate()"></table>
+            </div>
+        } @else {
+            <div class="thy-native-table-content" [style.overflow-x]="scrollX() ? 'auto' : null">
+                <table
+                    thy-native-table-content
+                    [tableLayout]="'fixed'"
+                    [scrollX]="scrollX()"
+                    [listOfColWidth]="listOfColWidth()"
+                    [theadTemplate]="theadTemplate()"
+                    [contentTemplate]="contentTemplate()"
+                    [tfootTemplate]="tfootTemplate()"></table>
+            </div>
+        }
+    `,
+                    host: { class: 'thy-native-table-container' },
+                    imports: [ThyNativeTableContentComponent]
+                }]
+        }], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], scrollX: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollX", required: false }] }], scrollY: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollY", required: false }] }], contentTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "contentTemplate", required: false }] }], widthConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "widthConfig", required: false }] }], listOfColWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "listOfColWidth", required: false }] }], theadTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "theadTemplate", required: false }] }], tfootTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "tfootTemplate", required: false }] }] } });
+
+class ThyNativeTableComponent {
+    constructor(tableElementRef) {
+        this.tableElementRef = tableElementRef;
+        this.elementRef = inject(ElementRef);
+        this.cdr = inject(ChangeDetectorRef);
+        this.styleService = inject(ThyNativeTableStyleService);
+        this.destroyRef = inject(DestroyRef);
+        this.updateHostClassService = inject(UpdateHostClassService);
+        this.thyTableLayout = input('auto', ...(ngDevMode ? [{ debugName: "thyTableLayout" }] : []));
+        this.thySize = input('md', ...(ngDevMode ? [{ debugName: "thySize" }] : []));
+        this.thyTheme = input('default', ...(ngDevMode ? [{ debugName: "thyTheme" }] : []));
+        this.thyData = input([], ...(ngDevMode ? [{ debugName: "thyData" }] : []));
+        this.thyShowPagination = input(false, ...(ngDevMode ? [{ debugName: "thyShowPagination" }] : []));
+        this.thyPageIndex = input(1, ...(ngDevMode ? [{ debugName: "thyPageIndex" }] : []));
+        this.thyPageSize = input(20, ...(ngDevMode ? [{ debugName: "thyPageSize" }] : []));
+        this.thyPageTotal = input(0, ...(ngDevMode ? [{ debugName: "thyPageTotal" }] : []));
+        this.thyShowSizeChanger = input(false, ...(ngDevMode ? [{ debugName: "thyShowSizeChanger" }] : []));
+        this.thyPageSizeOptions = input([20, 50, 100], ...(ngDevMode ? [{ debugName: "thyPageSizeOptions" }] : []));
+        this.thyPageIndexChange = output();
+        this.thyPageSizeChange = output();
+        this.thyScroll = input({ x: null, y: null }, ...(ngDevMode ? [{ debugName: "thyScroll" }] : []));
+        this.thyEmptyOptions = input({}, ...(ngDevMode ? [{ debugName: "thyEmptyOptions" }] : []));
+        /** data for ngFor tr */
+        this.data = computed(() => this.thyData(), ...(ngDevMode ? [{ debugName: "data" }] : []));
+        this.theadTemplate = signal(null, ...(ngDevMode ? [{ debugName: "theadTemplate" }] : []));
+        this.listOfManualColWidth = signal([], ...(ngDevMode ? [{ debugName: "listOfManualColWidth" }] : []));
+        this.pagination = computed(() => {
+            if (!this.thyShowPagination()) {
+                return null;
+            }
+            return {
+                index: this.thyPageIndex() || this.defaultPagination.index,
+                size: this.thyPageSize() || this.defaultPagination.size,
+                sizeOptions: this.thyPageSizeOptions() || this.defaultPagination.sizeOptions
+            };
+        }, ...(ngDevMode ? [{ debugName: "pagination" }] : []));
+        this.defaultPagination = { index: 1, size: 20, sizeOptions: [20, 50, 100] };
+        this.scrollX = computed(() => this.thyScroll().x || null, ...(ngDevMode ? [{ debugName: "scrollX" }] : []));
+        this.scrollY = computed(() => this.thyScroll().y || null, ...(ngDevMode ? [{ debugName: "scrollY" }] : []));
+        effect(() => {
+            this.updateTableClass();
+            this.styleService.setEmptyOptions(this.thyEmptyOptions());
+        });
+        effect(() => {
+            const showEmpty = this.thyData()?.length === 0;
+            this.styleService.setShowEmpty(showEmpty);
+        });
+        effect(() => {
+            this.theadTemplate.set(this.styleService.theadTemplate());
+        });
+    }
+    ngOnInit() {
+        this.updateHostClassService.initializeElement(this.tableElementRef.nativeElement);
+        const { listOfThWidthConfigPx$ } = this.styleService;
+        listOfThWidthConfigPx$.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(listOfWidth => {
+            this.listOfManualColWidth.set(listOfWidth);
+            this.cdr.markForCheck();
+        });
+    }
+    setNativeTableClass() {
+        const classNames = [];
+        if (this.thySize()) {
+            classNames.push(`native-table-${this.thySize()}`);
+        }
+        if (this.thyTheme()) {
+            classNames.push(`native-table-${this.thyTheme()}`);
+        }
+        if (this.elementRef.nativeElement) {
+            this.updateHostClassService.updateClass(classNames);
+        }
+    }
+    onPageIndexChange(event) {
+        this.thyPageIndexChange.emit(event);
+    }
+    onPageSizeChange(event) {
+        this.thyPageSizeChange.emit(event);
+    }
+    updateTableClass() {
+        const size = this.thySize();
+        const theme = this.thyTheme();
+        if (size || theme) {
+            this.styleService.setTableSize(size);
+            this.styleService.setTableTheme(theme);
+            this.setNativeTableClass();
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ThyNativeTableComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: ThyNativeTableComponent, isStandalone: true, selector: "thy-native-table", inputs: { thyTableLayout: { classPropertyName: "thyTableLayout", publicName: "thyTableLayout", isSignal: true, isRequired: false, transformFunction: null }, thySize: { classPropertyName: "thySize", publicName: "thySize", isSignal: true, isRequired: false, transformFunction: null }, thyTheme: { classPropertyName: "thyTheme", publicName: "thyTheme", isSignal: true, isRequired: false, transformFunction: null }, thyData: { classPropertyName: "thyData", publicName: "thyData", isSignal: true, isRequired: false, transformFunction: null }, thyShowPagination: { classPropertyName: "thyShowPagination", publicName: "thyShowPagination", isSignal: true, isRequired: false, transformFunction: null }, thyPageIndex: { classPropertyName: "thyPageIndex", publicName: "thyPageIndex", isSignal: true, isRequired: false, transformFunction: null }, thyPageSize: { classPropertyName: "thyPageSize", publicName: "thyPageSize", isSignal: true, isRequired: false, transformFunction: null }, thyPageTotal: { classPropertyName: "thyPageTotal", publicName: "thyPageTotal", isSignal: true, isRequired: false, transformFunction: null }, thyShowSizeChanger: { classPropertyName: "thyShowSizeChanger", publicName: "thyShowSizeChanger", isSignal: true, isRequired: false, transformFunction: null }, thyPageSizeOptions: { classPropertyName: "thyPageSizeOptions", publicName: "thyPageSizeOptions", isSignal: true, isRequired: false, transformFunction: null }, thyScroll: { classPropertyName: "thyScroll", publicName: "thyScroll", isSignal: true, isRequired: false, transformFunction: null }, thyEmptyOptions: { classPropertyName: "thyEmptyOptions", publicName: "thyEmptyOptions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { thyPageIndexChange: "thyPageIndexChange", thyPageSizeChange: "thyPageSizeChange" }, host: { classAttribute: "thy-native-table" }, providers: [ThyNativeTableStyleService, UpdateHostClassService], exportAs: ["thyNativeTable"], ngImport: i0, template: "<div #tableMainElement class=\"thy-native-table-wrapper\">\n  <ng-template #contentTemplate>\n    <ng-content></ng-content>\n  </ng-template>\n  @if (scrollY() || scrollX()) {\n    <thy-native-table-inner-scroll\n      [scrollX]=\"scrollX()\"\n      [scrollY]=\"scrollY()\"\n      [contentTemplate]=\"contentTemplate\"\n      [listOfColWidth]=\"listOfManualColWidth()\"\n      [theadTemplate]=\"theadTemplate()\"></thy-native-table-inner-scroll>\n  } @else {\n    <thy-native-table-inner-default\n      [tableLayout]=\"thyTableLayout()\"\n      [listOfColWidth]=\"listOfManualColWidth()\"\n      [theadTemplate]=\"theadTemplate()\"\n      [contentTemplate]=\"contentTemplate\"></thy-native-table-inner-default>\n  }\n  @if (thyShowPagination()) {\n    <div class=\"thy-table-pagination\">\n      <thy-pagination\n        [thyPageIndex]=\"pagination().index\"\n        [thyTotal]=\"pagination().total\"\n        [thyPageSize]=\"pagination().size\"\n        [thyPageSizeOptions]=\"pagination().sizeOptions\"\n        [thyShowSizeChanger]=\"thyShowSizeChanger()\"\n        (thyPageIndexChange)=\"onPageIndexChange($event)\"\n        (thyPageSizeChanged)=\"onPageSizeChange($event)\"></thy-pagination>\n    </div>\n  }\n</div>\n", dependencies: [{ kind: "component", type: ThyNativeTableInnerDefaultComponent, selector: "thy-native-table-inner-default", inputs: ["tableLayout", "listOfColWidth", "theadTemplate", "contentTemplate", "tfootTemplate"] }, { kind: "component", type: ThyNativeTableInnerScrollComponent, selector: "thy-native-table-inner-scroll", inputs: ["data", "scrollX", "scrollY", "contentTemplate", "widthConfig", "listOfColWidth", "theadTemplate", "tfootTemplate"] }, { kind: "component", type: ThyPagination, selector: "thy-pagination", inputs: ["thyPageIndex", "thyPageSize", "thyTotal", "thyCustomPages", "thyDisabled", "thyShowQuickJumper", "thyShowTotalPageCount", "thySize", "thyMaxCount", "thyMarginalCount", "thyRangeCount", "thyShowSizeChanger", "thyPageSizeOptions", "thyHideOnSinglePage", "thyUnit", "thyShowTotal", "selectedPageSize"], outputs: ["thyPageIndexChange", "thyPageChanged", "thyPageSizeChanged", "selectedPageSizeChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ThyNativeTableComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'thy-native-table', exportAs: 'thyNativeTable', providers: [ThyNativeTableStyleService, UpdateHostClassService], changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        class: 'thy-native-table'
+                    }, imports: [ThyNativeTableInnerDefaultComponent, ThyNativeTableInnerScrollComponent, ThyPagination], template: "<div #tableMainElement class=\"thy-native-table-wrapper\">\n  <ng-template #contentTemplate>\n    <ng-content></ng-content>\n  </ng-template>\n  @if (scrollY() || scrollX()) {\n    <thy-native-table-inner-scroll\n      [scrollX]=\"scrollX()\"\n      [scrollY]=\"scrollY()\"\n      [contentTemplate]=\"contentTemplate\"\n      [listOfColWidth]=\"listOfManualColWidth()\"\n      [theadTemplate]=\"theadTemplate()\"></thy-native-table-inner-scroll>\n  } @else {\n    <thy-native-table-inner-default\n      [tableLayout]=\"thyTableLayout()\"\n      [listOfColWidth]=\"listOfManualColWidth()\"\n      [theadTemplate]=\"theadTemplate()\"\n      [contentTemplate]=\"contentTemplate\"></thy-native-table-inner-default>\n  }\n  @if (thyShowPagination()) {\n    <div class=\"thy-table-pagination\">\n      <thy-pagination\n        [thyPageIndex]=\"pagination().index\"\n        [thyTotal]=\"pagination().total\"\n        [thyPageSize]=\"pagination().size\"\n        [thyPageSizeOptions]=\"pagination().sizeOptions\"\n        [thyShowSizeChanger]=\"thyShowSizeChanger()\"\n        (thyPageIndexChange)=\"onPageIndexChange($event)\"\n        (thyPageSizeChanged)=\"onPageSizeChange($event)\"></thy-pagination>\n    </div>\n  }\n</div>\n" }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { thyTableLayout: [{ type: i0.Input, args: [{ isSignal: true, alias: "thyTableLayout", required: false }] }], thySize: [{ type: i0.Input, args: [{ isSignal: true, alias: "thySize", required: false }] }], thyTheme: [{ type: i0.Input, args: [{ isSignal: true, alias: "thyTheme", required: false }] }], thyData: [{ type: i0.Input, args: [{ isSignal: true, alias: "thyData", required: false }] }], thyShowPagination: [{ type: i0.Input, args: [{ isSignal: true, alias: "thyShowPagination", required: false }] }], thyPageIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "thyPageIndex", required: false }] }], thyPageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "thyPageSize", required: false }] }], thyPageTotal: [{ type: i0.Input, args: [{ isSignal: true, alias: "thyPageTotal", required: false }] }], thyShowSizeChanger: [{ type: i0.Input, args: [{ isSignal: true, alias: "thyShowSizeChanger", required: false }] }], thyPageSizeOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "thyPageSizeOptions", required: false }] }], thyPageIndexChange: [{ type: i0.Output, args: ["thyPageIndexChange"] }], thyPageSizeChange: [{ type: i0.Output, args: ["thyPageSizeChange"] }], thyScroll: [{ type: i0.Input, args: [{ isSignal: true, alias: "thyScroll", required: false }] }], thyEmptyOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "thyEmptyOptions", required: false }] }] } });
+
+/* eslint-disable @angular-eslint/component-selector */
+class ThyNativeTableBodyComponent {
+    constructor() {
+        this.styleService = inject(ThyNativeTableStyleService, { optional: true });
+        this.isInsideNativeTable = !!this.styleService;
+        this.showEmpty = computed(() => this.styleService?.showEmpty() ?? false, ...(ngDevMode ? [{ debugName: "showEmpty" }] : []));
+        this.emptyOptions = computed(() => this.styleService?.emptyOptions() ?? null, ...(ngDevMode ? [{ debugName: "emptyOptions" }] : []));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ThyNativeTableBodyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: ThyNativeTableBodyComponent, isStandalone: true, selector: "tbody", host: { properties: { "class.thy-native-table-tbody": "isInsideNativeTable" } }, ngImport: i0, template: `
+        <ng-content></ng-content>
+        @if (showEmpty()) {
+            <tr class="thy-table-empty">
+                <td colspan="100%">
+                    <thy-empty
+                        [thyMessage]="emptyOptions()?.message"
+                        [thyIconName]="emptyOptions()?.iconName"
+                        [thySize]="emptyOptions()?.size"
+                        [thyMarginTop]="emptyOptions()?.marginTop"
+                        [thyTopAuto]="emptyOptions()?.topAuto"></thy-empty>
+                </td>
+            </tr>
+        }
+    `, isInline: true, dependencies: [{ kind: "component", type: ThyEmpty, selector: "thy-empty", inputs: ["thyMessage", "thyTranslationKey", "thyTranslationValues", "thyEntityName", "thyEntityNameTranslateKey", "thyIconName", "thySize", "thyMarginTop", "thyTopAuto", "thyContainer", "thyImageUrl", "thyImageLoading", "thyImageFetchPriority", "thyDescription"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ThyNativeTableBodyComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'tbody',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    template: `
+        <ng-content></ng-content>
+        @if (showEmpty()) {
+            <tr class="thy-table-empty">
+                <td colspan="100%">
+                    <thy-empty
+                        [thyMessage]="emptyOptions()?.message"
+                        [thyIconName]="emptyOptions()?.iconName"
+                        [thySize]="emptyOptions()?.size"
+                        [thyMarginTop]="emptyOptions()?.marginTop"
+                        [thyTopAuto]="emptyOptions()?.topAuto"></thy-empty>
+                </td>
+            </tr>
+        }
+    `,
+                    host: {
+                        '[class.thy-native-table-tbody]': 'isInsideNativeTable'
+                    },
+                    imports: [ThyEmpty]
+                }]
+        }], ctorParameters: () => [] });
+
+/* eslint-disable @angular-eslint/directive-selector */
+class ThyNativeTableThDirective {
+    get colspan() {
+        return this.thyColspan() || this.thyColSpan() || null;
+    }
+    get colSpan() {
+        return this.thyColspan() || this.thyColSpan() || null;
+    }
+    constructor() {
+        this.renderer = inject(Renderer2);
+        this.el = inject((ElementRef)).nativeElement;
+        this.changes$ = new Subject();
+        this.thyWidth = input(null, ...(ngDevMode ? [{ debugName: "thyWidth" }] : []));
+        this.thyColspan = input(null, ...(ngDevMode ? [{ debugName: "thyColspan" }] : []));
+        this.thyColSpan = input(null, ...(ngDevMode ? [{ debugName: "thyColSpan" }] : []));
+        this.thyRowspan = input(null, ...(ngDevMode ? [{ debugName: "thyRowspan" }] : []));
+        this.thyRowSpan = input(null, ...(ngDevMode ? [{ debugName: "thyRowSpan" }] : []));
+        effect(() => {
+            if (this.thyColspan() || this.thyColSpan()) {
+                const col = this.colspan;
+                if (col !== null && col !== undefined) {
+                    this.renderer.setAttribute(this.el, 'colspan', `${col}`);
+                }
+                else {
+                    this.renderer.removeAttribute(this.el, 'colspan');
+                }
+            }
+            if (this.thyRowspan() || this.thyRowSpan()) {
+                const row = this.thyRowspan() || this.thyRowSpan() || null;
+                if (row !== null && row !== undefined) {
+                    this.renderer.setAttribute(this.el, 'rowspan', `${row}`);
+                }
+                else {
+                    this.renderer.removeAttribute(this.el, 'rowspan');
+                }
+            }
+            if (this.thyWidth() || this.thyColspan() || this.thyColSpan()) {
+                this.changes$.next();
+            }
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ThyNativeTableThDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.15", type: ThyNativeTableThDirective, isStandalone: true, selector: "th", inputs: { thyWidth: { classPropertyName: "thyWidth", publicName: "thyWidth", isSignal: true, isRequired: false, transformFunction: null }, thyColspan: { classPropertyName: "thyColspan", publicName: "thyColspan", isSignal: true, isRequired: false, transformFunction: null }, thyColSpan: { classPropertyName: "thyColSpan", publicName: "thyColSpan", isSignal: true, isRequired: false, transformFunction: null }, thyRowspan: { classPropertyName: "thyRowspan", publicName: "thyRowspan", isSignal: true, isRequired: false, transformFunction: null }, thyRowSpan: { classPropertyName: "thyRowSpan", publicName: "thyRowSpan", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ThyNativeTableThDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'th'
+                }]
+        }], ctorParameters: () => [], propDecorators: { thyWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "thyWidth", required: false }] }], thyColspan: [{ type: i0.Input, args: [{ isSignal: true, alias: "thyColspan", required: false }] }], thyColSpan: [{ type: i0.Input, args: [{ isSignal: true, alias: "thyColSpan", required: false }] }], thyRowspan: [{ type: i0.Input, args: [{ isSignal: true, alias: "thyRowspan", required: false }] }], thyRowSpan: [{ type: i0.Input, args: [{ isSignal: true, alias: "thyRowSpan", required: false }] }] } });
+
+/* eslint-disable @angular-eslint/directive-selector */
+class ThyNativeTableTrDirective {
+    constructor() {
+        this.destroyRef = inject(DestroyRef);
+        this.styleService = inject(ThyNativeTableStyleService, { optional: true });
+        this.listOfColumns$ = new ReplaySubject(1);
+        this.listOfColumnsChanges$ = this.listOfColumns$.pipe(switchMap(list => merge(this.listOfColumns$, ...list.map(c => c.changes$)).pipe(mergeMap(() => this.listOfColumns$))), takeUntilDestroyed(this.destroyRef));
+        this.isInsideNativeTable = !!this.styleService;
+    }
+    ngAfterContentInit() {
+        if (this.styleService) {
+            this.listOfThDirective.changes
+                .pipe(startWith(this.listOfThDirective), takeUntilDestroyed(this.destroyRef))
+                .subscribe(thDirectives => {
+                const thList = thDirectives.toArray();
+                this.listOfColumns$.next(thList);
+            });
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ThyNativeTableTrDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.15", type: ThyNativeTableTrDirective, isStandalone: true, selector: "tr:not([thyNativeTableMeasureRow]):not([thyNativeTableFixedRow])", host: { properties: { "class.thy-native-table-row": "isInsideNativeTable" } }, queries: [{ propertyName: "listOfThDirective", predicate: ThyNativeTableThDirective }], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ThyNativeTableTrDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'tr:not([thyNativeTableMeasureRow]):not([thyNativeTableFixedRow])',
+                    host: {
+                        '[class.thy-native-table-row]': 'isInsideNativeTable'
+                    }
+                }]
+        }], propDecorators: { listOfThDirective: [{
+                type: ContentChildren,
+                args: [ThyNativeTableThDirective]
+            }] } });
+
+/* eslint-disable @angular-eslint/component-selector */
+class ThyNativeTableHeaderComponent {
+    constructor() {
+        this.styleService = inject(ThyNativeTableStyleService, { optional: true });
+        this.destroyRef = inject(DestroyRef);
+        this.el = inject((ElementRef)).nativeElement;
+        this.renderer = inject(Renderer2);
+        this.isInsideNativeTable = !!this.styleService;
+    }
+    ngOnInit() {
+        if (this.styleService) {
+            this.styleService.setTheadTemplate(this.templateRef);
+        }
+    }
+    ngAfterContentInit() {
+        if (this.styleService) {
+            const firstTableRow$ = this.listOfTrDirective.changes.pipe(startWith(this.listOfTrDirective), map(item => item && item.first), takeUntilDestroyed(this.destroyRef));
+            const listOfColumnsChanges$ = firstTableRow$.pipe(switchMap(firstTableRow => {
+                if (firstTableRow) {
+                    return firstTableRow.listOfColumnsChanges$;
+                }
+                return EMPTY;
+            }));
+            listOfColumnsChanges$.subscribe(data => {
+                this.styleService.setListOfTh(data);
+            });
+        }
+    }
+    ngAfterViewInit() {
+        if (this.styleService) {
+            this.renderer.removeChild(this.renderer.parentNode(this.el), this.el);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ThyNativeTableHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: ThyNativeTableHeaderComponent, isStandalone: true, selector: "thead:not(.thy-native-table-thead)", queries: [{ propertyName: "listOfTrDirective", predicate: ThyNativeTableTrDirective, descendants: true }], viewQueries: [{ propertyName: "templateRef", first: true, predicate: ["contentTemplate"], descendants: true, static: true }], ngImport: i0, template: `
+        <ng-template #contentTemplate>
+            <ng-content></ng-content>
+        </ng-template>
+        @if (!isInsideNativeTable) {
+            <ng-template [ngTemplateOutlet]="contentTemplate"></ng-template>
+        }
+    `, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ThyNativeTableHeaderComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'thead:not(.thy-native-table-thead)',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    template: `
+        <ng-template #contentTemplate>
+            <ng-content></ng-content>
+        </ng-template>
+        @if (!isInsideNativeTable) {
+            <ng-template [ngTemplateOutlet]="contentTemplate"></ng-template>
+        }
+    `,
+                    imports: [NgTemplateOutlet]
+                }]
+        }], propDecorators: { templateRef: [{
+                type: ViewChild,
+                args: ['contentTemplate', { static: true }]
+            }], listOfTrDirective: [{
+                type: ContentChildren,
+                args: [ThyNativeTableTrDirective, { descendants: true }]
+            }] } });
+
+/* eslint-disable @angular-eslint/directive-selector */
+class ThyNativeTableCellDirective {
+    constructor() {
+        this.isInsideTable = !!inject(ThyNativeTableStyleService, { optional: true });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ThyNativeTableCellDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.15", type: ThyNativeTableCellDirective, isStandalone: true, selector: "th, td", host: { properties: { "class.thy-native-table-cell": "isInsideTable" } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ThyNativeTableCellDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'th, td',
+                    host: {
+                        '[class.thy-native-table-cell]': 'isInsideTable'
+                    }
+                }]
+        }] });
+
+/* eslint-disable @angular-eslint/component-selector */
+class ThyNativeTableTdSelectionComponent {
+    constructor() {
+        this.thyDisabled = input(false, ...(ngDevMode ? [{ debugName: "thyDisabled", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+        this.thyCellCheckbox = input(false, ...(ngDevMode ? [{ debugName: "thyCellCheckbox", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+        this.thyCellChecked = input(false, ...(ngDevMode ? [{ debugName: "thyCellChecked", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+        this.thyIndeterminate = input(false, ...(ngDevMode ? [{ debugName: "thyIndeterminate", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+        this.thyCheckedChange = output();
+    }
+    ngOnInit() { }
+    onCheckedChange(checked) {
+        this.thyCheckedChange.emit(checked);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ThyNativeTableTdSelectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.15", type: ThyNativeTableTdSelectionComponent, isStandalone: true, selector: "td[thyCellChecked],td[thyCellCheckbox]", inputs: { thyDisabled: { classPropertyName: "thyDisabled", publicName: "thyDisabled", isSignal: true, isRequired: false, transformFunction: null }, thyCellCheckbox: { classPropertyName: "thyCellCheckbox", publicName: "thyCellCheckbox", isSignal: true, isRequired: false, transformFunction: null }, thyCellChecked: { classPropertyName: "thyCellChecked", publicName: "thyCellChecked", isSignal: true, isRequired: false, transformFunction: null }, thyIndeterminate: { classPropertyName: "thyIndeterminate", publicName: "thyIndeterminate", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { thyCheckedChange: "thyCheckedChange" }, host: { properties: { "class.thy-native-table-selection-column": "thyCellCheckbox()" } }, ngImport: i0, template: `
+        <label
+            thyCheckbox
+            [ngModel]="thyCellChecked()"
+            [disabled]="thyDisabled()"
+            [thyIndeterminate]="thyIndeterminate()"
+            (ngModelChange)="onCheckedChange($event)"></label>
+        <ng-content></ng-content>
+    `, isInline: true, dependencies: [{ 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: "component", type: ThyCheckbox, selector: "thy-checkbox,[thy-checkbox],[thyCheckbox]", inputs: ["thyIndeterminate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ThyNativeTableTdSelectionComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'td[thyCellChecked],td[thyCellCheckbox]',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    template: `
+        <label
+            thyCheckbox
+            [ngModel]="thyCellChecked()"
+            [disabled]="thyDisabled()"
+            [thyIndeterminate]="thyIndeterminate()"
+            (ngModelChange)="onCheckedChange($event)"></label>
+        <ng-content></ng-content>
+    `,
+                    host: {
+                        '[class.thy-native-table-selection-column]': 'thyCellCheckbox()'
+                    },
+                    imports: [FormsModule, ThyCheckbox]
+                }]
+        }], propDecorators: { thyDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "thyDisabled", required: false }] }], thyCellCheckbox: [{ type: i0.Input, args: [{ isSignal: true, alias: "thyCellCheckbox", required: false }] }], thyCellChecked: [{ type: i0.Input, args: [{ isSignal: true, alias: "thyCellChecked", required: false }] }], thyIndeterminate: [{ type: i0.Input, args: [{ isSignal: true, alias: "thyIndeterminate", required: false }] }], thyCheckedChange: [{ type: i0.Output, args: ["thyCheckedChange"] }] } });
+
+/* eslint-disable @angular-eslint/component-selector */
+class ThyNativeTableThSelectionComponent {
+    constructor() {
+        this.thyHeaderCellCheckbox = input(true, ...(ngDevMode ? [{ debugName: "thyHeaderCellCheckbox", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+        this.thyDisabled = input(false, ...(ngDevMode ? [{ debugName: "thyDisabled", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+        this.thyHeaderCellChecked = input(false, ...(ngDevMode ? [{ debugName: "thyHeaderCellChecked", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+        this.thyIndeterminate = input(false, ...(ngDevMode ? [{ debugName: "thyIndeterminate", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+        this.thyCheckedChange = output();
+    }
+    ngOnInit() { }
+    onCheckedChange(checked) {
+        this.thyCheckedChange.emit(checked);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ThyNativeTableThSelectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.15", type: ThyNativeTableThSelectionComponent, isStandalone: true, selector: "th[thyHeaderCellChecked],th[thyHeaderCellCheckbox]", inputs: { thyHeaderCellCheckbox: { classPropertyName: "thyHeaderCellCheckbox", publicName: "thyHeaderCellCheckbox", isSignal: true, isRequired: false, transformFunction: null }, thyDisabled: { classPropertyName: "thyDisabled", publicName: "thyDisabled", isSignal: true, isRequired: false, transformFunction: null }, thyHeaderCellChecked: { classPropertyName: "thyHeaderCellChecked", publicName: "thyHeaderCellChecked", isSignal: true, isRequired: false, transformFunction: null }, thyIndeterminate: { classPropertyName: "thyIndeterminate", publicName: "thyIndeterminate", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { thyCheckedChange: "thyCheckedChange" }, host: { properties: { "class.thy-native-table-selection-column": "thyHeaderCellCheckbox()" } }, ngImport: i0, template: `
+        <label
+            thyCheckbox
+            [ngModel]="thyHeaderCellChecked()"
+            [thyDisabled]="thyDisabled()"
+            [thyIndeterminate]="thyIndeterminate()"
+            (ngModelChange)="onCheckedChange($event)"></label>
+    `, isInline: true, dependencies: [{ 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: "component", type: ThyCheckbox, selector: "thy-checkbox,[thy-checkbox],[thyCheckbox]", inputs: ["thyIndeterminate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ThyNativeTableThSelectionComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'th[thyHeaderCellChecked],th[thyHeaderCellCheckbox]',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    template: `
+        <label
+            thyCheckbox
+            [ngModel]="thyHeaderCellChecked()"
+            [thyDisabled]="thyDisabled()"
+            [thyIndeterminate]="thyIndeterminate()"
+            (ngModelChange)="onCheckedChange($event)"></label>
+    `,
+                    host: {
+                        '[class.thy-native-table-selection-column]': 'thyHeaderCellCheckbox()'
+                    },
+                    imports: [FormsModule, ThyCheckbox]
+                }]
+        }], ctorParameters: () => [], propDecorators: { thyHeaderCellCheckbox: [{ type: i0.Input, args: [{ isSignal: true, alias: "thyHeaderCellCheckbox", required: false }] }], thyDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "thyDisabled", required: false }] }], thyHeaderCellChecked: [{ type: i0.Input, args: [{ isSignal: true, alias: "thyHeaderCellChecked", required: false }] }], thyIndeterminate: [{ type: i0.Input, args: [{ isSignal: true, alias: "thyIndeterminate", required: false }] }], thyCheckedChange: [{ type: i0.Output, args: ["thyCheckedChange"] }] } });
+
+/* eslint-disable @angular-eslint/component-selector */
+class ThyNativeTableThSortComponent {
+    constructor() {
+        this.thyHeaderCellSortable = input(false, ...(ngDevMode ? [{ debugName: "thyHeaderCellSortable", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+        this.thySortOrder = input(null, ...(ngDevMode ? [{ debugName: "thySortOrder" }] : []));
+        this.thySortDirections = input(['asc', 'desc'], ...(ngDevMode ? [{ debugName: "thySortDirections" }] : []));
+        this.sortTriggerTemplate = input(null, ...(ngDevMode ? [{ debugName: "sortTriggerTemplate" }] : []));
+        this.thySortOrderChange = output();
+        this.currentSortOrder = signal(null, ...(ngDevMode ? [{ debugName: "currentSortOrder" }] : []));
+        this.isUp = computed(() => {
+            const directions = this.thySortDirections();
+            return directions.indexOf('asc') !== -1;
+        }, ...(ngDevMode ? [{ debugName: "isUp" }] : []));
+        this.isDown = computed(() => {
+            const directions = this.thySortDirections();
+            return directions.indexOf('desc') !== -1;
+        }, ...(ngDevMode ? [{ debugName: "isDown" }] : []));
+    }
+    setSortOrder(order) {
+        this.currentSortOrder.set(order);
+    }
+    ngOnInit() {
+        if (this.thySortOrder() !== null) {
+            this.currentSortOrder.set(this.thySortOrder());
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ThyNativeTableThSortComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: ThyNativeTableThSortComponent, isStandalone: true, selector: "th[thyHeaderCellSortable]", inputs: { thyHeaderCellSortable: { classPropertyName: "thyHeaderCellSortable", publicName: "thyHeaderCellSortable", isSignal: true, isRequired: false, transformFunction: null }, thySortOrder: { classPropertyName: "thySortOrder", publicName: "thySortOrder", isSignal: true, isRequired: false, transformFunction: null }, thySortDirections: { classPropertyName: "thySortDirections", publicName: "thySortDirections", isSignal: true, isRequired: false, transformFunction: null }, sortTriggerTemplate: { classPropertyName: "sortTriggerTemplate", publicName: "sortTriggerTemplate", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { thySortOrderChange: "thySortOrderChange" }, host: { properties: { "class.thy-native-table-column-has-sorters": "thyHeaderCellSortable()", "class.thy-native-table-column-sort": "currentSortOrder() === \"desc\" || currentSortOrder() === \"asc\"" } }, ngImport: i0, template: `
+        <ng-content></ng-content>
+        <span class="thy-native-table-column-sorter" [class.thy-native-table-column-sorter-full]="isDown() && isUp()">
+            <span class="thy-native-table-column-sorter-inner">
+                @if (sortTriggerTemplate()) {
+                    <ng-template [ngTemplateOutlet]="sortTriggerTemplate()!"></ng-template>
+                } @else {
+                    @if (isUp()) {
+                        <thy-icon
+                            thyIconName="angle-up"
+                            class="thy-native-table-column-sorter-up"
+                            [class.active]="currentSortOrder() === 'asc'" />
+                    }
+                    @if (isDown()) {
+                        <thy-icon
+                            thyIconName="angle-down"
+                            class="thy-native-table-column-sorter-down"
+                            [class.active]="currentSortOrder() === 'desc'" />
+                    }
+                }
+            </span>
+        </span>
+    `, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ThyIcon, selector: "thy-icon, [thy-icon]", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ThyNativeTableThSortComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'th[thyHeaderCellSortable]',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    template: `
+        <ng-content></ng-content>
+        <span class="thy-native-table-column-sorter" [class.thy-native-table-column-sorter-full]="isDown() && isUp()">
+            <span class="thy-native-table-column-sorter-inner">
+                @if (sortTriggerTemplate()) {
+                    <ng-template [ngTemplateOutlet]="sortTriggerTemplate()!"></ng-template>
+                } @else {
+                    @if (isUp()) {
+                        <thy-icon
+                            thyIconName="angle-up"
+                            class="thy-native-table-column-sorter-up"
+                            [class.active]="currentSortOrder() === 'asc'" />
+                    }
+                    @if (isDown()) {
+                        <thy-icon
+                            thyIconName="angle-down"
+                            class="thy-native-table-column-sorter-down"
+                            [class.active]="currentSortOrder() === 'desc'" />
+                    }
+                }
+            </span>
+        </span>
+    `,
+                    host: {
+                        '[class.thy-native-table-column-has-sorters]': 'thyHeaderCellSortable()',
+                        '[class.thy-native-table-column-sort]': 'currentSortOrder() === "desc" || currentSortOrder() === "asc"'
+                    },
+                    imports: [NgTemplateOutlet, ThyIcon]
+                }]
+        }], propDecorators: { thyHeaderCellSortable: [{ type: i0.Input, args: [{ isSignal: true, alias: "thyHeaderCellSortable", required: false }] }], thySortOrder: [{ type: i0.Input, args: [{ isSignal: true, alias: "thySortOrder", required: false }] }], thySortDirections: [{ type: i0.Input, args: [{ isSignal: true, alias: "thySortDirections", required: false }] }], sortTriggerTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortTriggerTemplate", required: false }] }], thySortOrderChange: [{ type: i0.Output, args: ["thySortOrderChange"] }] } });
+
+class ThyNativeTableEditEventDispatcher {
+    constructor() {
+        this.editing = new Subject();
+        this.currentEditingCell = null;
+        this.editing$ = this.editing.asObservable().pipe(distinctUntilChanged(), shareReplay(1));
+    }
+    editingCell(element) {
+        return this.editing$.pipe(map(cell => cell === element), distinctUntilChanged());
+    }
+    startEditing(cell) {
+        this.currentEditingCell = cell;
+        this.editing.next(cell);
+    }
+    stopEditing() {
+        this.currentEditingCell = null;
+        this.editing.next(null);
+    }
+    getCurrentEditingCell() {
+        return this.currentEditingCell;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ThyNativeTableEditEventDispatcher, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ThyNativeTableEditEventDispatcher }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ThyNativeTableEditEventDispatcher, decorators: [{
+            type: Injectable
+        }] });
+
+class ThyNativeTableEditRef {
+    constructor() {
+        this.dispatcher = inject(ThyNativeTableEditEventDispatcher);
+        this.afterClosedSubject = new Subject();
+        this.afterClosed = this.afterClosedSubject.asObservable();
+    }
+    close() {
+        this.dispatcher.stopEditing();
+        this.afterClosedSubject.next();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ThyNativeTableEditRef, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ThyNativeTableEditRef }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ThyNativeTableEditRef, decorators: [{
+            type: Injectable
+        }] });
+
+const THY_NATIVE_TABLE_CELL_SELECTOR = '.thy-native-table-cell-edit';
+const THY_NATIVE_TABLE_EDIT_PANE_SELECTOR = '.thy-native-table-popover-edit';
+const THY_NATIVE_TABLE_EDIT_OPEN_SELECTOR = '[thyEditOpen]';
+var ThyNativeTableEditTrigger;
+(function (ThyNativeTableEditTrigger) {
+    ThyNativeTableEditTrigger["CLICK"] = "click";
+    ThyNativeTableEditTrigger["DBLCLICK"] = "dblclick";
+})(ThyNativeTableEditTrigger || (ThyNativeTableEditTrigger = {}));
+
+class ThyNativeTableEditableDirective {
+    constructor() {
+        this.elementRef = inject((ElementRef));
+        this.ngZone = inject(NgZone);
+        this.destroyRef = inject(DestroyRef);
+        this.dispatcher = inject(ThyNativeTableEditEventDispatcher);
+        this.thyEditTrigger = input(ThyNativeTableEditTrigger.CLICK, ...(ngDevMode ? [{ debugName: "thyEditTrigger" }] : []));
+    }
+    ngAfterViewInit() {
+        this.listenForEditEvents();
+    }
+    listenForEditEvents() {
+        const element = this.elementRef.nativeElement;
+        this.ngZone.runOutsideAngular(() => {
+            const trigger = this.thyEditTrigger();
+            if (trigger === 'click') {
+                fromEvent(element, 'click')
+                    .pipe(takeUntilDestroyed(this.destroyRef))
+                    .subscribe(event => this.handleClickEdit(event));
+            }
+            else if (trigger === 'dblclick') {
+                fromEvent(element, 'dblclick')
+                    .pipe(takeUntilDestroyed(this.destroyRef))
+                    .subscribe(event => this.handleClickEdit(event));
+            }
+            fromEvent(document, 'keydown')
+                .pipe(filter(event => event.key === 'Enter'), takeUntilDestroyed(this.destroyRef))
+                .subscribe(event => this.handelEnterEvent(event));
+            fromEvent(element, 'keydown')
+                .pipe(filter(event => event.key === 'Escape'), takeUntilDestroyed(this.destroyRef))
+                .subscribe(() => {
+                this.ngZone.run(() => this.dispatcher.stopEditing());
+            });
+            fromEvent(document, 'click')
+                .pipe(takeUntilDestroyed(this.destroyRef))
+                .subscribe(event => this.handleClickOutside(event));
+        });
+    }
+    handleClickEdit(event) {
+        const target = event.target;
+        if (target.closest(THY_NATIVE_TABLE_EDIT_OPEN_SELECTOR)) {
+            return;
+        }
+        const cell = target.closest(THY_NATIVE_TABLE_CELL_SELECTOR);
+        if (cell) {
+            this.ngZone.run(() => this.dispatcher.startEditing(cell));
+        }
+    }
+    handelEnterEvent(event) {
+        const target = event.target;
+        if (target.closest(THY_NATIVE_TABLE_EDIT_PANE_SELECTOR)) {
+            if (this.dispatcher.getCurrentEditingCell()) {
+                event.preventDefault();
+                this.ngZone.run(() => this.dispatcher.stopEditing());
+            }
+        }
+    }
+    handleClickOutside(event) {
+        const target = event.target;
+        const element = this.elementRef.nativeElement;
+        if (!element.contains(target) && !target.closest(THY_NATIVE_TABLE_EDIT_PANE_SELECTOR)) {
+            this.ngZone.run(() => this.dispatcher.stopEditing());
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ThyNativeTableEditableDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.15", type: ThyNativeTableEditableDirective, isStandalone: true, selector: "thy-native-table[thyEditable]", inputs: { thyEditTrigger: { classPropertyName: "thyEditTrigger", publicName: "thyEditTrigger", isSignal: true, isRequired: false, transformFunction: null } }, providers: [ThyNativeTableEditEventDispatcher], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ThyNativeTableEditableDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'thy-native-table[thyEditable]',
+                    providers: [ThyNativeTableEditEventDispatcher]
+                }]
+        }], propDecorators: { thyEditTrigger: [{ type: i0.Input, args: [{ isSignal: true, alias: "thyEditTrigger", required: false }] }] } });
+
+class ThyNativeTableTdPopoverEditDirective {
+    constructor() {
+        this.elementRef = inject((ElementRef));
+        this.viewContainerRef = inject(ViewContainerRef);
+        this.popover = inject(ThyPopover);
+        this.dispatcher = inject(ThyNativeTableEditEventDispatcher);
+        this.destroyRef = inject(DestroyRef);
+    }
+    ngAfterViewInit() {
+        this.dispatcher
+            .editingCell(this.elementRef.nativeElement)
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe(isEditing => {
+            if (isEditing) {
+                this.openPopover();
+            }
+            else {
+                this.closePopover();
+            }
+        });
+    }
+    openPopover() {
+        if (this.popoverRef) {
+            return;
+        }
+        if (!this.editTemplate) {
+            return;
+        }
+        const tdElement = this.elementRef.nativeElement;
+        const rect = tdElement.getBoundingClientRect();
+        this.popoverRef = this.popover.open(this.editTemplate, {
+            origin: tdElement,
+            viewContainerRef: this.viewContainerRef,
+            placement: 'bottom',
+            offset: -rect.height,
+            hasBackdrop: false,
+            panelClass: 'thy-native-table-popover-edit',
+            originActiveClass: 'thy-native-table-cell-editing',
+            animationDisabled: true
+        });
+        this.popoverRef?.afterOpened().subscribe(() => {
+            const popoverElement = document.querySelector('.thy-native-table-popover-edit');
+            if (popoverElement) {
+                popoverElement.style.width = `${rect.width}px`;
+                popoverElement.style.minWidth = `${rect.width}px`;
+                popoverElement.style.height = `${rect.height}px`;
+                popoverElement.style.minHeight = `${rect.height}px`;
+                this.listenFocusout(popoverElement);
+            }
+        });
+        this.popoverRef?.afterClosed().subscribe(() => {
+            this.popoverRef = undefined;
+            this.focusoutUnsubscribe?.();
+        });
+    }
+    listenFocusout(popoverElement) {
+        const handler = () => {
+            // 延迟 100ms 检查焦点是否还在 popover 内
+            // 避免在 popover 内部元素之间切换焦点时误关闭
+            setTimeout(() => {
+                if (document.activeElement && !popoverElement.contains(document.activeElement)) {
+                    this.dispatcher.stopEditing();
+                }
+            }, 100);
+        };
+        popoverElement.addEventListener('focusout', handler);
+        this.focusoutUnsubscribe = () => {
+            popoverElement.removeEventListener('focusout', handler);
+        };
+    }
+    closePopover() {
+        this.popoverRef?.close();
+    }
+    ngOnDestroy() {
+        this.closePopover();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ThyNativeTableTdPopoverEditDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.15", type: ThyNativeTableTdPopoverEditDirective, isStandalone: true, selector: "td[thyCellPopoverEdit]", inputs: { editTemplate: ["thyCellPopoverEdit", "editTemplate"] }, host: { classAttribute: "thy-native-table-cell-edit" }, providers: [ThyNativeTableEditRef], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ThyNativeTableTdPopoverEditDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'td[thyCellPopoverEdit]',
+                    providers: [ThyNativeTableEditRef],
+                    host: {
+                        class: 'thy-native-table-cell-edit'
+                    }
+                }]
+        }], propDecorators: { editTemplate: [{
+                type: Input,
+                args: ['thyCellPopoverEdit']
+            }] } });
+
+class ThyNativeTableTdEditOpenDirective {
+    constructor() {
+        this.elementRef = inject((ElementRef));
+        this.dispatcher = inject(ThyNativeTableEditEventDispatcher);
+        this.destroyRef = inject(DestroyRef);
+        fromEvent(this.elementRef.nativeElement, 'click')
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe((event) => {
+            event.stopPropagation();
+            const cell = this.elementRef.nativeElement.closest(THY_NATIVE_TABLE_CELL_SELECTOR);
+            if (cell) {
+                this.dispatcher.startEditing(cell);
+            }
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ThyNativeTableTdEditOpenDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.15", type: ThyNativeTableTdEditOpenDirective, isStandalone: true, selector: "[thyEditOpen]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ThyNativeTableTdEditOpenDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[thyEditOpen]'
+                }]
+        }], ctorParameters: () => [] });
+
+class ThyNativeTableTdEditCloseDirective {
+    constructor() {
+        this.editRef = inject(ThyNativeTableEditRef);
+        this.elementRef = inject((ElementRef));
+        this.destroyRef = inject(DestroyRef);
+        fromEvent(this.elementRef.nativeElement, 'click')
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe(() => {
+            this.editRef.close();
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ThyNativeTableTdEditCloseDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.15", type: ThyNativeTableTdEditCloseDirective, isStandalone: true, selector: "[thyEditClose]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ThyNativeTableTdEditCloseDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[thyEditClose]'
+                }]
+        }], ctorParameters: () => [] });
+
+const EDIT_COMPONENTS = [
+    ThyNativeTableEditableDirective,
+    ThyNativeTableTdEditCloseDirective,
+    ThyNativeTableTdEditOpenDirective,
+    ThyNativeTableTdPopoverEditDirective
+];
+class ThyNativeTableModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ThyNativeTableModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.15", ngImport: i0, type: ThyNativeTableModule, imports: [CommonModule,
+            ThyNativeTableComponent,
+            ThyNativeTableInnerScrollComponent,
+            ThyNativeTableInnerDefaultComponent,
+            ThyNativeTableBodyComponent,
+            ThyNativeTableHeaderComponent,
+            ThyNativeTableTrDirective,
+            ThyNativeTableCellDirective,
+            ThyNativeTableThDirective,
+            ThyNativeTableTdSelectionComponent,
+            ThyNativeTableThSelectionComponent,
+            ThyNativeTableThSortComponent, ThyNativeTableEditableDirective,
+            ThyNativeTableTdEditCloseDirective,
+            ThyNativeTableTdEditOpenDirective,
+            ThyNativeTableTdPopoverEditDirective], exports: [ThyNativeTableComponent,
+            ThyNativeTableInnerScrollComponent,
+            ThyNativeTableInnerDefaultComponent,
+            ThyNativeTableBodyComponent,
+            ThyNativeTableHeaderComponent,
+            ThyNativeTableTrDirective,
+            ThyNativeTableCellDirective,
+            ThyNativeTableThDirective,
+            ThyNativeTableTdSelectionComponent,
+            ThyNativeTableThSelectionComponent,
+            ThyNativeTableThSortComponent, ThyNativeTableEditableDirective,
+            ThyNativeTableTdEditCloseDirective,
+            ThyNativeTableTdEditOpenDirective,
+            ThyNativeTableTdPopoverEditDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ThyNativeTableModule, imports: [CommonModule,
+            ThyNativeTableComponent,
+            ThyNativeTableBodyComponent,
+            ThyNativeTableTdSelectionComponent,
+            ThyNativeTableThSelectionComponent,
+            ThyNativeTableThSortComponent] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ThyNativeTableModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        CommonModule,
+                        ThyNativeTableComponent,
+                        ThyNativeTableInnerScrollComponent,
+                        ThyNativeTableInnerDefaultComponent,
+                        ThyNativeTableBodyComponent,
+                        ThyNativeTableHeaderComponent,
+                        ThyNativeTableTrDirective,
+                        ThyNativeTableCellDirective,
+                        ThyNativeTableThDirective,
+                        ThyNativeTableTdSelectionComponent,
+                        ThyNativeTableThSelectionComponent,
+                        ThyNativeTableThSortComponent,
+                        ...EDIT_COMPONENTS
+                    ],
+                    exports: [
+                        ThyNativeTableComponent,
+                        ThyNativeTableInnerScrollComponent,
+                        ThyNativeTableInnerDefaultComponent,
+                        ThyNativeTableBodyComponent,
+                        ThyNativeTableHeaderComponent,
+                        ThyNativeTableTrDirective,
+                        ThyNativeTableCellDirective,
+                        ThyNativeTableThDirective,
+                        ThyNativeTableTdSelectionComponent,
+                        ThyNativeTableThSelectionComponent,
+                        ThyNativeTableThSortComponent,
+                        ...EDIT_COMPONENTS
+                    ]
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { THY_NATIVE_TABLE_CELL_SELECTOR, THY_NATIVE_TABLE_EDIT_OPEN_SELECTOR, THY_NATIVE_TABLE_EDIT_PANE_SELECTOR, ThyNativeTableBodyComponent, ThyNativeTableCellDirective, ThyNativeTableComponent, ThyNativeTableContentComponent, ThyNativeTableEditEventDispatcher, ThyNativeTableEditRef, ThyNativeTableEditTrigger, ThyNativeTableEditableDirective, ThyNativeTableHeaderComponent, ThyNativeTableInnerDefaultComponent, ThyNativeTableInnerScrollComponent, ThyNativeTableModule, ThyNativeTableStyleService, ThyNativeTableTdEditCloseDirective, ThyNativeTableTdEditOpenDirective, ThyNativeTableTdPopoverEditDirective, ThyNativeTableTdSelectionComponent, ThyNativeTableThDirective, ThyNativeTableThSelectionComponent, ThyNativeTableThSortComponent, ThyNativeTableTrDirective };
+//# sourceMappingURL=ngx-tethys-native-table.mjs.map