@sd-angular/core 19.0.48 → 19.0.50

package/fesm2022/sd-angular-core-components-modal.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"sd-angular-core-components-modal.mjs","sources":["../../../projects/sd-angular/components/modal/src/modal.component.ts","../../../projects/sd-angular/components/modal/src/modal.component.html","../../../projects/sd-angular/components/modal/sd-angular-core-components-modal.ts"],"sourcesContent":["import { CommonModule } from '@angular/common';\nimport {\n  ChangeDetectionStrategy,\n  Component,\n  DestroyRef,\n  ElementRef,\n  TemplateRef,\n  booleanAttribute,\n  computed,\n  inject,\n  input,\n  output,\n  signal,\n  viewChild\n} from '@angular/core';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\nimport { MatBottomSheet, MatBottomSheetModule, MatBottomSheetRef } from '@angular/material/bottom-sheet';\nimport { MatButtonModule } from '@angular/material/button';\nimport { MatDialog, MatDialogModule, MatDialogRef } from '@angular/material/dialog';\nimport { MatDividerModule } from '@angular/material/divider';\nimport { MatIconModule } from '@angular/material/icon';\nimport { BrowserUtilities } from '@sdcorejs/utils/fns';\nimport { Color, Size } from '@sdcorejs/utils/models';\n\n@Component({\n  selector: 'sd-modal',\n  templateUrl: './modal.component.html',\n  styleUrl: './modal.component.scss',\n  // encapsulation: ViewEncapsulation.None,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  standalone: true,\n  imports: [CommonModule, MatIconModule, MatBottomSheetModule, MatDialogModule, MatDividerModule, MatButtonModule],\n})\nexport class SdModal {\n  static index = signal(0);\n\n  templateRef = viewChild.required<TemplateRef<any>>('templateRef');\n  modal = viewChild<ElementRef>('modal');\n\n  // autoId prefix `modal-`. Lưu ý: footer/body buttons render qua <ng-content> nên consumer phải\n  // tự đặt [attr.data-autoId] cho các nút đó. Component chỉ tự bind autoId cho NÚT ĐÓNG (X icon).\n  readonly autoIdInput = input<string | undefined | null>(undefined, { alias: 'autoId' });\n  readonly autoId = computed(() => (this.autoIdInput() ? `components-modal-${this.autoIdInput()}` : undefined));\n  readonly closeButtonAutoId = computed(() => (this.autoId() ? `${this.autoId()}-close` : undefined));\n  readonly dataOpened = computed(() => (this.isOpened() ? 'true' : 'false'));\n\n  title = input<string, string | null | undefined>('', { transform: (v) => v ?? '' });\n  color = input<Color, Color | null | undefined>('primary', { transform: (v) => v ?? 'primary' });\n  width = input<Size | string, Size | string | null | undefined>('md', { transform: (v) => v ?? 'md' });\n  height = input<string, string | null | undefined>('auto', { transform: (v) => v ?? 'auto' });\n  view = input<'dialog' | 'bottom-sheet' | undefined, 'dialog' | 'bottom-sheet' | null | undefined>(undefined, { transform: (v) => v ?? undefined });\n  modalClass = input<string | string[] | Record<string, boolean>, string | string[] | Record<string, boolean> | null | undefined>('', { transform: (v) => v ?? '' });\n  lazyLoadContent = input(true, { transform: booleanAttribute });\n  hideClose = input<boolean, boolean | ''>(false, { transform: booleanAttribute });\n  disableBackdropClose = input<boolean, boolean | ''>(true, { transform: booleanAttribute }); // default to true to keep backward compatibility\n\n  sdClosed = output<void>();\n\n  isOpened = signal(false);\n  alreadyOpened = signal(false);\n\n  #isMobile = false;\n  #resolvedWidth = 'md';\n  #bottomSheetRef!: MatBottomSheetRef<any>;\n  #dialogRef!: MatDialogRef<any>;\n\n  #dialog = inject(MatDialog);\n  #bottomSheet = inject(MatBottomSheet);\n  #destroyRef = inject(DestroyRef);\n\n  constructor() {\n    this.#isMobile = BrowserUtilities.isMobile();\n  }\n\n  #resolveWidth(): string {\n    const w = this.width() || '80vw';\n    if (this.#isMobile) return w;\n    switch (w) {\n      case 'lg': return '80vw';\n      case 'md': return '60vw';\n      case 'sm': return '40vw';\n      case 'sx': return '20vw';\n      default: return w;\n    }\n  }\n\n  open = (): void => {\n    if (this.isOpened()) {\n      return;\n    }\n    this.alreadyOpened.set(true);\n    this.isOpened.set(true);\n    this.#resolvedWidth = this.#resolveWidth();\n\n    if ((!this.view() && this.#isMobile) || this.view() === 'bottom-sheet') {\n      this.#bottomSheetRef = this.#bottomSheet.open(this.templateRef(), {\n        panelClass: this.modalClass() as string | string[],\n        disableClose: this.disableBackdropClose()\n      });\n      this.#bottomSheetRef.afterDismissed()\n        .pipe(takeUntilDestroyed(this.#destroyRef))\n        .subscribe(() => {\n          this.isOpened.set(false);\n          this.sdClosed.emit();\n        });\n    } else {\n      this.#dialogRef = this.#dialog.open(this.templateRef(), {\n        width: this.#resolvedWidth,\n        maxWidth: this.#resolvedWidth,\n        panelClass: this.modalClass() as string | string[],\n        disableClose: this.disableBackdropClose(),\n      });\n      this.#dialogRef.afterClosed()\n        .pipe(takeUntilDestroyed(this.#destroyRef))\n        .subscribe(() => {\n          this.isOpened.set(false);\n          this.sdClosed.emit();\n        });\n    }\n  };\n\n  close = (): void => {\n    this.#bottomSheetRef?.dismiss();\n    this.#dialogRef?.close();\n  };\n}\n","<ng-template #templateRef>\n  <div class=\"sd-modal-root\"\n       [attr.data-autoId]=\"autoId()\"\n       [attr.data-opened]=\"dataOpened()\">\n    @if (!lazyLoadContent() || alreadyOpened()) {\n      <!-- Header -->\n      <!-- Dùng scss thuần -->\n      @if (title()) {\n        <div class=\"d-flex align-items-center p-16\">\n          <ng-content select=\"[sdHeaderLeft]\">\n            <div class=\"T18M\">{{ title() }}</div>\n          </ng-content>\n          <div class=\"d-flex align-items-center ml-auto\">\n            <ng-content select=\"[sdHeaderRight]\"></ng-content>\n            <ng-content select=\"[sdHeader]\"></ng-content>\n            @if (!hideClose()) {\n              <button\n                type=\"button\"\n                class=\"sd-modal-close-btn\"\n                aria-label=\"Close\"\n                (click)=\"close()\"\n                [attr.data-autoId]=\"closeButtonAutoId()\">\n                <mat-icon>close</mat-icon>\n              </button>\n            }\n          </div>\n        </div>\n      }\n      <!-- <mat-divider></mat-divider> -->\n      <!-- Body -->\n      <div class=\"overflow-auto w-full px-16\" style=\"max-height: 80vh\">\n        <ng-content></ng-content>\n      </div>\n      <!-- Footer -->\n      <!-- <mat-divider></mat-divider> -->\n      <div class=\"d-flex align-items-center p-8\" #footer>\n        <ng-content select=\"[sdFooterLeft]\"></ng-content>\n        <div class=\"ml-auto\">\n          <ng-content select=\"[sdFooterRight]\"></ng-content>\n          <ng-content select=\"[sdFooter]\"></ng-content>\n        </div>\n      </div>\n    }\n  </div>\n</ng-template>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"sd-angular-core-components-modal.mjs","sources":["../../../projects/sd-angular/components/modal/src/modal.component.ts","../../../projects/sd-angular/components/modal/src/modal.component.html","../../../projects/sd-angular/components/modal/sd-angular-core-components-modal.ts"],"sourcesContent":["import { CommonModule } from '@angular/common';\nimport {\n  ChangeDetectionStrategy,\n  Component,\n  DestroyRef,\n  ElementRef,\n  TemplateRef,\n  booleanAttribute,\n  computed,\n  inject,\n  input,\n  output,\n  signal,\n  viewChild\n} from '@angular/core';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\nimport { MatBottomSheet, MatBottomSheetModule, MatBottomSheetRef } from '@angular/material/bottom-sheet';\nimport { MatButtonModule } from '@angular/material/button';\nimport { MatDialog, MatDialogModule, MatDialogRef } from '@angular/material/dialog';\nimport { MatDividerModule } from '@angular/material/divider';\nimport { MatIconModule } from '@angular/material/icon';\nimport { BrowserUtilities } from '@sdcorejs/utils/fns';\nimport { Color, Size } from '@sdcorejs/utils/models';\n\n@Component({\n  selector: 'sd-modal',\n  templateUrl: './modal.component.html',\n  styleUrl: './modal.component.scss',\n  // encapsulation: ViewEncapsulation.None,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  standalone: true,\n  imports: [CommonModule, MatIconModule, MatBottomSheetModule, MatDialogModule, MatDividerModule, MatButtonModule],\n})\nexport class SdModal {\n  static index = signal(0);\n\n  templateRef = viewChild.required<TemplateRef<any>>('templateRef');\n  modal = viewChild<ElementRef>('modal');\n\n  // autoId prefix `modal-`. Lưu ý: footer/body buttons render qua <ng-content> nên consumer phải\n  // tự đặt [attr.data-autoId] cho các nút đó. Component chỉ tự bind autoId cho NÚT ĐÓNG (X icon).\n  readonly autoIdInput = input<string | undefined | null>(undefined, { alias: 'autoId' });\n  readonly autoId = computed(() => (this.autoIdInput() ? `components-modal-${this.autoIdInput()}` : undefined));\n  readonly closeButtonAutoId = computed(() => (this.autoId() ? `${this.autoId()}-close` : undefined));\n  readonly dataOpened = computed(() => (this.isOpened() ? 'true' : 'false'));\n\n  title = input<string, string | null | undefined>('', { transform: (v) => v ?? '' });\n  color = input<Color, Color | null | undefined>('primary', { transform: (v) => v ?? 'primary' });\n  width = input<Size | string, Size | string | null | undefined>('md', { transform: (v) => v ?? 'md' });\n  height = input<string, string | null | undefined>('auto', { transform: (v) => v ?? 'auto' });\n  view = input<'dialog' | 'bottom-sheet' | undefined, 'dialog' | 'bottom-sheet' | null | undefined>(undefined, { transform: (v) => v ?? undefined });\n  modalClass = input<string | string[] | Record<string, boolean>, string | string[] | Record<string, boolean> | null | undefined>('', { transform: (v) => v ?? '' });\n  lazyLoadContent = input(true, { transform: booleanAttribute });\n  hideClose = input<boolean, boolean | ''>(false, { transform: booleanAttribute });\n  /**\n   * Cho phép đóng bằng cách bấm nền hoặc phím Esc. Không truyền (`undefined`/`null`) thì hành vi theo\n   * `disableBackdropClose`. Khi được truyền, cờ này quyết định. Attribute không giá trị = `true`.\n   */\n  enableBackdropClose = input<boolean | undefined, boolean | '' | null | undefined>(undefined, {\n    // why: phải giữ được trạng thái \"không truyền\" nên không dùng booleanAttribute trực tiếp (nó ép undefined thành false).\n    transform: v => (v === undefined || v === null ? undefined : booleanAttribute(v)),\n  });\n  /**\n   * Chặn đóng bằng nền và phím Esc. Mặc định `true` để giữ tương thích.\n   * @deprecated Dùng `enableBackdropClose` (nghĩa ngược lại). Cờ này chỉ có hiệu lực khi không truyền `enableBackdropClose`.\n   */\n  disableBackdropClose = input<boolean, boolean | ''>(true, { transform: booleanAttribute }); // default to true to keep backward compatibility\n\n  sdClosed = output<void>();\n\n  isOpened = signal(false);\n  alreadyOpened = signal(false);\n\n  #isMobile = false;\n  #resolvedWidth = 'md';\n  #bottomSheetRef!: MatBottomSheetRef<any>;\n  #dialogRef!: MatDialogRef<any>;\n\n  #dialog = inject(MatDialog);\n  #bottomSheet = inject(MatBottomSheet);\n  #destroyRef = inject(DestroyRef);\n\n  constructor() {\n    this.#isMobile = BrowserUtilities.isMobile();\n  }\n\n  // why: cùng công thức với SdConfirmService — có truyền enableBackdropClose thì theo nó, không thì theo cờ cũ.\n  #resolveDisableClose(): boolean {\n    const enable = this.enableBackdropClose();\n    return enable === undefined ? this.disableBackdropClose() : !enable;\n  }\n\n  #resolveWidth(): string {\n    const w = this.width() || '80vw';\n    if (this.#isMobile) return w;\n    switch (w) {\n      case 'lg': return '80vw';\n      case 'md': return '60vw';\n      case 'sm': return '40vw';\n      case 'sx': return '20vw';\n      default: return w;\n    }\n  }\n\n  open = (): void => {\n    if (this.isOpened()) {\n      return;\n    }\n    this.alreadyOpened.set(true);\n    this.isOpened.set(true);\n    this.#resolvedWidth = this.#resolveWidth();\n\n    if ((!this.view() && this.#isMobile) || this.view() === 'bottom-sheet') {\n      this.#bottomSheetRef = this.#bottomSheet.open(this.templateRef(), {\n        panelClass: this.modalClass() as string | string[],\n        disableClose: this.#resolveDisableClose(),\n      });\n      this.#bottomSheetRef.afterDismissed()\n        .pipe(takeUntilDestroyed(this.#destroyRef))\n        .subscribe(() => {\n          this.isOpened.set(false);\n          this.sdClosed.emit();\n        });\n    } else {\n      this.#dialogRef = this.#dialog.open(this.templateRef(), {\n        width: this.#resolvedWidth,\n        maxWidth: this.#resolvedWidth,\n        panelClass: this.modalClass() as string | string[],\n        disableClose: this.#resolveDisableClose(),\n      });\n      this.#dialogRef.afterClosed()\n        .pipe(takeUntilDestroyed(this.#destroyRef))\n        .subscribe(() => {\n          this.isOpened.set(false);\n          this.sdClosed.emit();\n        });\n    }\n  };\n\n  close = (): void => {\n    this.#bottomSheetRef?.dismiss();\n    this.#dialogRef?.close();\n  };\n}\n","<ng-template #templateRef>\n  <div class=\"sd-modal-root\"\n       [attr.data-autoId]=\"autoId()\"\n       [attr.data-opened]=\"dataOpened()\">\n    @if (!lazyLoadContent() || alreadyOpened()) {\n      <!-- Header -->\n      <!-- Dùng scss thuần -->\n      @if (title()) {\n        <div class=\"d-flex align-items-center p-16\">\n          <ng-content select=\"[sdHeaderLeft]\">\n            <div class=\"T18M\">{{ title() }}</div>\n          </ng-content>\n          <div class=\"d-flex align-items-center ml-auto\">\n            <ng-content select=\"[sdHeaderRight]\"></ng-content>\n            <ng-content select=\"[sdHeader]\"></ng-content>\n            @if (!hideClose()) {\n              <button\n                type=\"button\"\n                class=\"sd-modal-close-btn\"\n                aria-label=\"Close\"\n                (click)=\"close()\"\n                [attr.data-autoId]=\"closeButtonAutoId()\">\n                <mat-icon>close</mat-icon>\n              </button>\n            }\n          </div>\n        </div>\n      }\n      <!-- <mat-divider></mat-divider> -->\n      <!-- Body -->\n      <div class=\"overflow-auto w-full px-16\" style=\"max-height: 80vh\">\n        <ng-content></ng-content>\n      </div>\n      <!-- Footer -->\n      <!-- <mat-divider></mat-divider> -->\n      <div class=\"d-flex align-items-center p-8\" #footer>\n        <ng-content select=\"[sdFooterLeft]\"></ng-content>\n        <div class=\"ml-auto\">\n          <ng-content select=\"[sdFooterRight]\"></ng-content>\n          <ng-content select=\"[sdFooter]\"></ng-content>\n        </div>\n      </div>\n    }\n  </div>\n</ng-template>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/sd-angular-core-components-table.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { input, inject, TemplateRef, Directive, booleanAttribute, computed, ChangeDetectionStrategy, Component, model, output, isSignal, effect, Pipe, ChangeDetectorRef, signal, untracked, viewChild, InjectionToken, Injectable, EventEmitter, Input, Output, ViewChild, ElementRef, DestroyRef, afterNextRender, Renderer2, NgZone, contentChild, contentChildren } from '@angular/core';
+import { input, inject, TemplateRef, Directive, booleanAttribute, computed, ChangeDetectionStrategy, Component, model, output, isSignal, effect, Pipe, ChangeDetectorRef, signal, untracked, viewChild, InjectionToken, Injectable, DestroyRef, EventEmitter, Input, Output, ViewChild, ElementRef, NgZone, afterNextRender, Renderer2, contentChild, contentChildren } from '@angular/core';
 import { trigger, state, style, transition, animate } from '@angular/animations';
 import * as i4 from '@angular/material/paginator';
 import { MatPaginatorIntl, MatPaginator, MatPaginatorModule } from '@angular/material/paginator';
@@ -9,7 +9,7 @@ import * as i6 from '@angular/material/table';
 import { MatTable, MatTableModule } from '@angular/material/table';
 import { ɵSD_LOCAL_DATE_TIME as _SD_LOCAL_DATE_TIME, SdDateTimeService } from '@sd-angular/core/services/date-time';
 import { SdNotifyService } from '@sd-angular/core/services/notify';
-import { Subject, fromEvent, Subscription, isObservable, firstValueFrom } from 'rxjs';
+import { Subject, merge, fromEvent, take, Subscription, isObservable, firstValueFrom } from 'rxjs';
 import { debounceTime, startWith, map, switchMap, filter } from 'rxjs/operators';
 import { DateUtilities, StringUtilities } from '@sd-angular/core/utilities';
 import { CdkTableModule, CdkColumnDef } from '@angular/cdk/table';
@@ -1442,15 +1442,12 @@ class ConfigComponent {
     // dragDisabled không nên là signal (mutated trong drag handlers, không trigger render).
     dragDisabled = true;
     #setting;
+    #dragRelease;
     // ==========================================
-    // 5. WINDOW MOUSEUP — tự destroy qua takeUntilDestroyed (thay @HostListener)
+    // 5. Dọn listener của phiên kéo hiện tại
     // ==========================================
     constructor() {
-        fromEvent(window, 'mouseup')
-            .pipe(takeUntilDestroyed())
-            .subscribe(() => {
-            this.dragDisabled = true;
-        });
+        inject(DestroyRef).onDestroy(() => this.#dragRelease?.unsubscribe());
     }
     // ==========================================
     // 6. PUBLIC API
@@ -1464,19 +1461,20 @@ class ConfigComponent {
         this.modal()?.open();
     };
     close = () => {
+        this.handleMouseUp();
         this.modal()?.close();
     };
     onSave = () => {
         const cfg = this.configuration();
         if (cfg)
             this.#setting?.set(cfg);
-        this.modal()?.close();
+        this.close();
         this.#ref.detectChanges();
     };
     onReset = async () => {
         this.#confirmService.confirm(this.#i18n.t('core.component.table.config.confirm-reset')).then(() => {
             this.#setting?.remove();
-            this.modal()?.close();
+            this.close();
             this.#ref.detectChanges();
         });
     };
@@ -1489,12 +1487,20 @@ class ConfigComponent {
     }
     handleMouseDown() {
         this.dragDisabled = false;
+        if (this.#dragRelease && !this.#dragRelease.closed)
+            return;
+        // why: chỉ cần bắt thả chuột ngoài handle trong lúc kéo; modal đóng không giữ listener toàn cục.
+        this.#dragRelease = merge(fromEvent(window, 'mouseup'), fromEvent(window, 'blur'))
+            .pipe(take(1))
+            .subscribe(() => this.handleMouseUp());
     }
     handleMouseUp() {
         this.dragDisabled = true;
+        this.#dragRelease?.unsubscribe();
+        this.#dragRelease = undefined;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: ConfigComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: ConfigComponent, isStandalone: true, selector: "config", inputs: { autoIdInput: { classPropertyName: "autoIdInput", publicName: "autoId", isSignal: true, isRequired: false, transformFunction: null }, tableOption: { classPropertyName: "tableOption", publicName: "tableOption", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { changes: "changes" }, providers: [ConfigService], viewQueries: [{ propertyName: "modal", first: true, predicate: SdModal, descendants: true, isSignal: true }, { propertyName: "table", first: true, predicate: MatTable, descendants: true, isSignal: true }], ngImport: i0, template: "@let _configuration = configuration();\n@let _autoId = autoId();\n\n<sd-modal width=\"sm\" [title]=\"'core.component.table.setup' | translate\" #modal>\n  @if (_configuration) {\n    <div class=\"c-container\">\n      <div class=\"c-table\" style=\"max-height: 70vh\">\n        <table\n          mat-table\n          [dataSource]=\"_configuration.columns!\"\n          cdkDropList\n          [cdkDropListData]=\"_configuration.columns\"\n          (cdkDropListDropped)=\"dropTable($event)\">\n          <ng-container matColumnDef=\"invisible\">\n            <th mat-header-cell class=\"c-th text-center px-4\" *matHeaderCellDef style=\"width: 96px\">\n              {{ 'core.component.form-builder.display' | translate }}\n            </th>\n            <td class=\"text-center px-4\" mat-cell *matCellDef=\"let item\">\n              <div class=\"d-flex\" style=\"gap: 8px\">\n                <div class=\"c-handle\" (mousedown)=\"handleMouseDown()\" (mouseup)=\"handleMouseUp()\">\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 0 24 24\" width=\"24px\" fill=\"#5f6368\">\n                    <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n                    <path\n                      d=\"M11 18c0 1.1-.9 2-2 2s-2-.9-2-2 .9-2 2-2 2 .9 2 2zm-2-8c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0-6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm6 4c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z\" />\n                  </svg>\n                </div>\n                <sd-switch [model]=\"!item.invisible\" (modelChange)=\"item.invisible = !item.invisible\" />\n              </div>\n            </td>\n          </ng-container>\n          <ng-container matColumnDef=\"title\">\n            <th mat-header-cell class=\"c-th px-4\" *matHeaderCellDef>\n              {{ 'core.component.table.column-header' | translate }}\n            </th>\n            <td class=\"px-4\" mat-cell *matCellDef=\"let item\">\n              <sd-input [clearable]=\"true\" class=\"py-4\" size=\"sm\" [placeholder]=\"item?.origin?.title\" [(model)]=\"item.title\" hideInlineError></sd-input>\n            </td>\n          </ng-container>\n          <ng-container matColumnDef=\"width\">\n            <th mat-header-cell class=\"c-th px-4\" *matHeaderCellDef style=\"width: 80px\">\n              {{ 'core.component.table.width' | translate }}\n            </th>\n            <td class=\"px-4\" mat-cell *matCellDef=\"let item\">\n              <sd-input class=\"py-4\" size=\"sm\" [placeholder]=\"item?.origin?.width\" [(model)]=\"item.width\" hideInlineError></sd-input>\n            </td>\n          </ng-container>\n          <ng-container matColumnDef=\"fixed\">\n            <th mat-header-cell class=\"c-th text-center px-4\" *matHeaderCellDef style=\"width: 80px\">\n              {{ 'core.component.table.fixed' | translate }}\n            </th>\n            <td class=\"text-center px-4\" mat-cell *matCellDef=\"let item\">\n              <sd-switch [(model)]=\"item.fixed\" />\n            </td>\n          </ng-container>\n\n          <ng-container matColumnDef=\"truncate\">\n            <th mat-header-cell class=\"c-th text-center px-4\" *matHeaderCellDef style=\"width: 100px\">\n              {{ 'core.component.table.char-limit' | translate }}\n            </th>\n            <td class=\"text-center px-4\" mat-cell *matCellDef=\"let item\">\n              <sd-switch [(model)]=\"item.truncate\" />\n            </td>\n          </ng-container>\n\n          <tr mat-header-row *matHeaderRowDef=\"['invisible', 'title', 'width', 'fixed', 'truncate']; sticky: true\"></tr>\n          <tr\n            mat-row\n            *matRowDef=\"let row; columns: ['invisible', 'title', 'width', 'fixed', 'truncate']\"\n            cdkDrag\n            [cdkDragData]=\"row\"\n            cdkDragLockAxis=\"y\"\n            [cdkDragDisabled]=\"dragDisabled\">\n          </tr>\n        </table>\n      </div>\n    </div>\n  }\n  <ng-container sdFooter>\n    <sd-button [autoId]=\"_autoId ? _autoId + '-config-skip' : null\" class=\"mr-8\" (click)=\"close()\" [title]=\"'core.component.table.skip' | translate\" color=\"secondary\"> </sd-button>\n    <sd-button [autoId]=\"_autoId ? _autoId + '-config-reset' : null\" class=\"mr-8\" (click)=\"onReset()\" [title]=\"'core.component.form-builder.default' | translate\" color=\"primary\"> </sd-button>\n    <sd-button [autoId]=\"_autoId ? _autoId + '-config-apply' : null\" (click)=\"onSave()\" [title]=\"'core.component.table.apply' | translate\" type=\"fill\" color=\"primary\"> </sd-button>\n  </ng-container>\n</sd-modal>\n", styles: [".c-table{position:relative;overflow:auto}.c-table table{width:100%}.c-table .c-th{font-weight:500;font-size:14px;line-height:20px;color:#000}.c-container{position:relative;min-height:200px}.c-handle{color:#ccc;cursor:move}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: MatTableModule }, { kind: "component", type: i6.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i6.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i6.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i6.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i6.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i6.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i6.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i6.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i6.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i6.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "ngmodule", type: MatSlideToggleModule }, { kind: "ngmodule", type: CdkTableModule }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i11.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i11.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "component", type: SdButton, selector: "sd-button", inputs: ["autoId", "type", "color", "size", "fontSet", "title", "width", "tooltip", "prefixIcon", "suffixIcon", "disabled", "loading", "block", "htmlType"], outputs: ["click"] }, { kind: "component", type: SdInput, selector: "sd-input", inputs: ["autoId", "name", "appearance", "floatLabel", "size", "form", "label", "helperText", "placeholder", "type", "hideInlineError", "blurOnEnter", "clearable", "required", "readonly", "disabled", "viewed", "minlength", "maxlength", "pattern", "patternErrorMessage", "validator", "inlineError", "hyperlink", "model"], outputs: ["modelChange", "sdChange", "sdFocus", "sdBlur", "keyupEnter", "cleared", "sdFocusForceBlur"] }, { kind: "component", type: SdModal, selector: "sd-modal", inputs: ["autoId", "title", "color", "width", "height", "view", "modalClass", "lazyLoadContent", "hideClose", "disableBackdropClose"], outputs: ["sdClosed"] }, { kind: "component", type: SdSwitch, selector: "sd-switch", inputs: ["autoId", "name", "form", "label", "color", "disabled", "viewed", "hideInlineError", "required", "model"], outputs: ["modelChange", "sdChange"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: ConfigComponent, isStandalone: true, selector: "config", inputs: { autoIdInput: { classPropertyName: "autoIdInput", publicName: "autoId", isSignal: true, isRequired: false, transformFunction: null }, tableOption: { classPropertyName: "tableOption", publicName: "tableOption", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { changes: "changes" }, providers: [ConfigService], viewQueries: [{ propertyName: "modal", first: true, predicate: SdModal, descendants: true, isSignal: true }, { propertyName: "table", first: true, predicate: MatTable, descendants: true, isSignal: true }], ngImport: i0, template: "@let _configuration = configuration();\n@let _autoId = autoId();\n\n<sd-modal width=\"sm\" [title]=\"'core.component.table.setup' | translate\" (sdClosed)=\"handleMouseUp()\" #modal>\n  @if (_configuration) {\n    <div class=\"c-container\">\n      <div class=\"c-table\" style=\"max-height: 70vh\">\n        <table\n          mat-table\n          [dataSource]=\"_configuration.columns!\"\n          cdkDropList\n          [cdkDropListData]=\"_configuration.columns\"\n          (cdkDropListDropped)=\"dropTable($event)\">\n          <ng-container matColumnDef=\"invisible\">\n            <th mat-header-cell class=\"c-th text-center px-4\" *matHeaderCellDef style=\"width: 96px\">\n              {{ 'core.component.form-builder.display' | translate }}\n            </th>\n            <td class=\"text-center px-4\" mat-cell *matCellDef=\"let item\">\n              <div class=\"d-flex\" style=\"gap: 8px\">\n                <div class=\"c-handle\" (mousedown)=\"handleMouseDown()\" (mouseup)=\"handleMouseUp()\">\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 0 24 24\" width=\"24px\" fill=\"#5f6368\">\n                    <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n                    <path\n                      d=\"M11 18c0 1.1-.9 2-2 2s-2-.9-2-2 .9-2 2-2 2 .9 2 2zm-2-8c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0-6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm6 4c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z\" />\n                  </svg>\n                </div>\n                <sd-switch [model]=\"!item.invisible\" (modelChange)=\"item.invisible = !item.invisible\" />\n              </div>\n            </td>\n          </ng-container>\n          <ng-container matColumnDef=\"title\">\n            <th mat-header-cell class=\"c-th px-4\" *matHeaderCellDef>\n              {{ 'core.component.table.column-header' | translate }}\n            </th>\n            <td class=\"px-4\" mat-cell *matCellDef=\"let item\">\n              <sd-input [clearable]=\"true\" class=\"py-4\" size=\"sm\" [placeholder]=\"item?.origin?.title\" [(model)]=\"item.title\" hideInlineError></sd-input>\n            </td>\n          </ng-container>\n          <ng-container matColumnDef=\"width\">\n            <th mat-header-cell class=\"c-th px-4\" *matHeaderCellDef style=\"width: 80px\">\n              {{ 'core.component.table.width' | translate }}\n            </th>\n            <td class=\"px-4\" mat-cell *matCellDef=\"let item\">\n              <sd-input class=\"py-4\" size=\"sm\" [placeholder]=\"item?.origin?.width\" [(model)]=\"item.width\" hideInlineError></sd-input>\n            </td>\n          </ng-container>\n          <ng-container matColumnDef=\"fixed\">\n            <th mat-header-cell class=\"c-th text-center px-4\" *matHeaderCellDef style=\"width: 80px\">\n              {{ 'core.component.table.fixed' | translate }}\n            </th>\n            <td class=\"text-center px-4\" mat-cell *matCellDef=\"let item\">\n              <sd-switch [(model)]=\"item.fixed\" />\n            </td>\n          </ng-container>\n\n          <ng-container matColumnDef=\"truncate\">\n            <th mat-header-cell class=\"c-th text-center px-4\" *matHeaderCellDef style=\"width: 100px\">\n              {{ 'core.component.table.char-limit' | translate }}\n            </th>\n            <td class=\"text-center px-4\" mat-cell *matCellDef=\"let item\">\n              <sd-switch [(model)]=\"item.truncate\" />\n            </td>\n          </ng-container>\n\n          <tr mat-header-row *matHeaderRowDef=\"['invisible', 'title', 'width', 'fixed', 'truncate']; sticky: true\"></tr>\n          <tr\n            mat-row\n            *matRowDef=\"let row; columns: ['invisible', 'title', 'width', 'fixed', 'truncate']\"\n            cdkDrag\n            [cdkDragData]=\"row\"\n            cdkDragLockAxis=\"y\"\n            [cdkDragDisabled]=\"dragDisabled\">\n          </tr>\n        </table>\n      </div>\n    </div>\n  }\n  <ng-container sdFooter>\n    <sd-button [autoId]=\"_autoId ? _autoId + '-config-skip' : null\" class=\"mr-8\" (click)=\"close()\" [title]=\"'core.component.table.skip' | translate\" color=\"secondary\"> </sd-button>\n    <sd-button [autoId]=\"_autoId ? _autoId + '-config-reset' : null\" class=\"mr-8\" (click)=\"onReset()\" [title]=\"'core.component.form-builder.default' | translate\" color=\"primary\"> </sd-button>\n    <sd-button [autoId]=\"_autoId ? _autoId + '-config-apply' : null\" (click)=\"onSave()\" [title]=\"'core.component.table.apply' | translate\" type=\"fill\" color=\"primary\"> </sd-button>\n  </ng-container>\n</sd-modal>\n", styles: [".c-table{position:relative;overflow:auto}.c-table table{width:100%}.c-table .c-th{font-weight:500;font-size:14px;line-height:20px;color:#000}.c-container{position:relative;min-height:200px}.c-handle{color:#ccc;cursor:move}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: MatTableModule }, { kind: "component", type: i6.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i6.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i6.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i6.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i6.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i6.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i6.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i6.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i6.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i6.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "ngmodule", type: MatSlideToggleModule }, { kind: "ngmodule", type: CdkTableModule }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i11.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i11.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "component", type: SdButton, selector: "sd-button", inputs: ["autoId", "type", "color", "size", "fontSet", "title", "width", "tooltip", "prefixIcon", "suffixIcon", "disabled", "loading", "block", "htmlType"], outputs: ["click"] }, { kind: "component", type: SdInput, selector: "sd-input", inputs: ["autoId", "name", "appearance", "floatLabel", "size", "form", "label", "helperText", "placeholder", "type", "hideInlineError", "blurOnEnter", "clearable", "required", "readonly", "disabled", "viewed", "minlength", "maxlength", "pattern", "patternErrorMessage", "validator", "inlineError", "hyperlink", "model"], outputs: ["modelChange", "sdChange", "sdFocus", "sdBlur", "keyupEnter", "cleared", "sdFocusForceBlur"] }, { kind: "component", type: SdModal, selector: "sd-modal", inputs: ["autoId", "title", "color", "width", "height", "view", "modalClass", "lazyLoadContent", "hideClose", "enableBackdropClose", "disableBackdropClose"], outputs: ["sdClosed"] }, { kind: "component", type: SdSwitch, selector: "sd-switch", inputs: ["autoId", "name", "form", "label", "color", "disabled", "viewed", "hideInlineError", "required", "model"], outputs: ["modelChange", "sdChange"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: ConfigComponent, decorators: [{
             type: Component,
@@ -1510,7 +1516,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
                         SdModal,
                         SdSwitch,
                         TranslatePipe,
-                    ], providers: [ConfigService], template: "@let _configuration = configuration();\n@let _autoId = autoId();\n\n<sd-modal width=\"sm\" [title]=\"'core.component.table.setup' | translate\" #modal>\n  @if (_configuration) {\n    <div class=\"c-container\">\n      <div class=\"c-table\" style=\"max-height: 70vh\">\n        <table\n          mat-table\n          [dataSource]=\"_configuration.columns!\"\n          cdkDropList\n          [cdkDropListData]=\"_configuration.columns\"\n          (cdkDropListDropped)=\"dropTable($event)\">\n          <ng-container matColumnDef=\"invisible\">\n            <th mat-header-cell class=\"c-th text-center px-4\" *matHeaderCellDef style=\"width: 96px\">\n              {{ 'core.component.form-builder.display' | translate }}\n            </th>\n            <td class=\"text-center px-4\" mat-cell *matCellDef=\"let item\">\n              <div class=\"d-flex\" style=\"gap: 8px\">\n                <div class=\"c-handle\" (mousedown)=\"handleMouseDown()\" (mouseup)=\"handleMouseUp()\">\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 0 24 24\" width=\"24px\" fill=\"#5f6368\">\n                    <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n                    <path\n                      d=\"M11 18c0 1.1-.9 2-2 2s-2-.9-2-2 .9-2 2-2 2 .9 2 2zm-2-8c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0-6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm6 4c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z\" />\n                  </svg>\n                </div>\n                <sd-switch [model]=\"!item.invisible\" (modelChange)=\"item.invisible = !item.invisible\" />\n              </div>\n            </td>\n          </ng-container>\n          <ng-container matColumnDef=\"title\">\n            <th mat-header-cell class=\"c-th px-4\" *matHeaderCellDef>\n              {{ 'core.component.table.column-header' | translate }}\n            </th>\n            <td class=\"px-4\" mat-cell *matCellDef=\"let item\">\n              <sd-input [clearable]=\"true\" class=\"py-4\" size=\"sm\" [placeholder]=\"item?.origin?.title\" [(model)]=\"item.title\" hideInlineError></sd-input>\n            </td>\n          </ng-container>\n          <ng-container matColumnDef=\"width\">\n            <th mat-header-cell class=\"c-th px-4\" *matHeaderCellDef style=\"width: 80px\">\n              {{ 'core.component.table.width' | translate }}\n            </th>\n            <td class=\"px-4\" mat-cell *matCellDef=\"let item\">\n              <sd-input class=\"py-4\" size=\"sm\" [placeholder]=\"item?.origin?.width\" [(model)]=\"item.width\" hideInlineError></sd-input>\n            </td>\n          </ng-container>\n          <ng-container matColumnDef=\"fixed\">\n            <th mat-header-cell class=\"c-th text-center px-4\" *matHeaderCellDef style=\"width: 80px\">\n              {{ 'core.component.table.fixed' | translate }}\n            </th>\n            <td class=\"text-center px-4\" mat-cell *matCellDef=\"let item\">\n              <sd-switch [(model)]=\"item.fixed\" />\n            </td>\n          </ng-container>\n\n          <ng-container matColumnDef=\"truncate\">\n            <th mat-header-cell class=\"c-th text-center px-4\" *matHeaderCellDef style=\"width: 100px\">\n              {{ 'core.component.table.char-limit' | translate }}\n            </th>\n            <td class=\"text-center px-4\" mat-cell *matCellDef=\"let item\">\n              <sd-switch [(model)]=\"item.truncate\" />\n            </td>\n          </ng-container>\n\n          <tr mat-header-row *matHeaderRowDef=\"['invisible', 'title', 'width', 'fixed', 'truncate']; sticky: true\"></tr>\n          <tr\n            mat-row\n            *matRowDef=\"let row; columns: ['invisible', 'title', 'width', 'fixed', 'truncate']\"\n            cdkDrag\n            [cdkDragData]=\"row\"\n            cdkDragLockAxis=\"y\"\n            [cdkDragDisabled]=\"dragDisabled\">\n          </tr>\n        </table>\n      </div>\n    </div>\n  }\n  <ng-container sdFooter>\n    <sd-button [autoId]=\"_autoId ? _autoId + '-config-skip' : null\" class=\"mr-8\" (click)=\"close()\" [title]=\"'core.component.table.skip' | translate\" color=\"secondary\"> </sd-button>\n    <sd-button [autoId]=\"_autoId ? _autoId + '-config-reset' : null\" class=\"mr-8\" (click)=\"onReset()\" [title]=\"'core.component.form-builder.default' | translate\" color=\"primary\"> </sd-button>\n    <sd-button [autoId]=\"_autoId ? _autoId + '-config-apply' : null\" (click)=\"onSave()\" [title]=\"'core.component.table.apply' | translate\" type=\"fill\" color=\"primary\"> </sd-button>\n  </ng-container>\n</sd-modal>\n", styles: [".c-table{position:relative;overflow:auto}.c-table table{width:100%}.c-table .c-th{font-weight:500;font-size:14px;line-height:20px;color:#000}.c-container{position:relative;min-height:200px}.c-handle{color:#ccc;cursor:move}\n"] }]
+                    ], providers: [ConfigService], template: "@let _configuration = configuration();\n@let _autoId = autoId();\n\n<sd-modal width=\"sm\" [title]=\"'core.component.table.setup' | translate\" (sdClosed)=\"handleMouseUp()\" #modal>\n  @if (_configuration) {\n    <div class=\"c-container\">\n      <div class=\"c-table\" style=\"max-height: 70vh\">\n        <table\n          mat-table\n          [dataSource]=\"_configuration.columns!\"\n          cdkDropList\n          [cdkDropListData]=\"_configuration.columns\"\n          (cdkDropListDropped)=\"dropTable($event)\">\n          <ng-container matColumnDef=\"invisible\">\n            <th mat-header-cell class=\"c-th text-center px-4\" *matHeaderCellDef style=\"width: 96px\">\n              {{ 'core.component.form-builder.display' | translate }}\n            </th>\n            <td class=\"text-center px-4\" mat-cell *matCellDef=\"let item\">\n              <div class=\"d-flex\" style=\"gap: 8px\">\n                <div class=\"c-handle\" (mousedown)=\"handleMouseDown()\" (mouseup)=\"handleMouseUp()\">\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 0 24 24\" width=\"24px\" fill=\"#5f6368\">\n                    <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n                    <path\n                      d=\"M11 18c0 1.1-.9 2-2 2s-2-.9-2-2 .9-2 2-2 2 .9 2 2zm-2-8c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0-6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm6 4c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z\" />\n                  </svg>\n                </div>\n                <sd-switch [model]=\"!item.invisible\" (modelChange)=\"item.invisible = !item.invisible\" />\n              </div>\n            </td>\n          </ng-container>\n          <ng-container matColumnDef=\"title\">\n            <th mat-header-cell class=\"c-th px-4\" *matHeaderCellDef>\n              {{ 'core.component.table.column-header' | translate }}\n            </th>\n            <td class=\"px-4\" mat-cell *matCellDef=\"let item\">\n              <sd-input [clearable]=\"true\" class=\"py-4\" size=\"sm\" [placeholder]=\"item?.origin?.title\" [(model)]=\"item.title\" hideInlineError></sd-input>\n            </td>\n          </ng-container>\n          <ng-container matColumnDef=\"width\">\n            <th mat-header-cell class=\"c-th px-4\" *matHeaderCellDef style=\"width: 80px\">\n              {{ 'core.component.table.width' | translate }}\n            </th>\n            <td class=\"px-4\" mat-cell *matCellDef=\"let item\">\n              <sd-input class=\"py-4\" size=\"sm\" [placeholder]=\"item?.origin?.width\" [(model)]=\"item.width\" hideInlineError></sd-input>\n            </td>\n          </ng-container>\n          <ng-container matColumnDef=\"fixed\">\n            <th mat-header-cell class=\"c-th text-center px-4\" *matHeaderCellDef style=\"width: 80px\">\n              {{ 'core.component.table.fixed' | translate }}\n            </th>\n            <td class=\"text-center px-4\" mat-cell *matCellDef=\"let item\">\n              <sd-switch [(model)]=\"item.fixed\" />\n            </td>\n          </ng-container>\n\n          <ng-container matColumnDef=\"truncate\">\n            <th mat-header-cell class=\"c-th text-center px-4\" *matHeaderCellDef style=\"width: 100px\">\n              {{ 'core.component.table.char-limit' | translate }}\n            </th>\n            <td class=\"text-center px-4\" mat-cell *matCellDef=\"let item\">\n              <sd-switch [(model)]=\"item.truncate\" />\n            </td>\n          </ng-container>\n\n          <tr mat-header-row *matHeaderRowDef=\"['invisible', 'title', 'width', 'fixed', 'truncate']; sticky: true\"></tr>\n          <tr\n            mat-row\n            *matRowDef=\"let row; columns: ['invisible', 'title', 'width', 'fixed', 'truncate']\"\n            cdkDrag\n            [cdkDragData]=\"row\"\n            cdkDragLockAxis=\"y\"\n            [cdkDragDisabled]=\"dragDisabled\">\n          </tr>\n        </table>\n      </div>\n    </div>\n  }\n  <ng-container sdFooter>\n    <sd-button [autoId]=\"_autoId ? _autoId + '-config-skip' : null\" class=\"mr-8\" (click)=\"close()\" [title]=\"'core.component.table.skip' | translate\" color=\"secondary\"> </sd-button>\n    <sd-button [autoId]=\"_autoId ? _autoId + '-config-reset' : null\" class=\"mr-8\" (click)=\"onReset()\" [title]=\"'core.component.form-builder.default' | translate\" color=\"primary\"> </sd-button>\n    <sd-button [autoId]=\"_autoId ? _autoId + '-config-apply' : null\" (click)=\"onSave()\" [title]=\"'core.component.table.apply' | translate\" type=\"fill\" color=\"primary\"> </sd-button>\n  </ng-container>\n</sd-modal>\n", styles: [".c-table{position:relative;overflow:auto}.c-table table{width:100%}.c-table .c-th{font-weight:500;font-size:14px;line-height:20px;color:#000}.c-container{position:relative;min-height:200px}.c-handle{color:#ccc;cursor:move}\n"] }]
         }], ctorParameters: () => [] });
 
 /** Segments that must never be traversed, matching the `@sdcorejs/utils` 1.2 safe-key rule. */
@@ -2157,7 +2163,7 @@ class SdPopupExport {
         return '';
     };
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SdPopupExport, deps: [{ token: i0.ChangeDetectorRef }, { token: i1$1.SdLoadingService }, { token: i1$1.SdExcelService }, { token: i1$1.SdNotifyService }, { token: i1$1.SdConfirmService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.21", type: SdPopupExport, isStandalone: true, selector: "sd-popup-export", inputs: { _tableOption: ["tableOption", "_tableOption"], configuration: "configuration" }, outputs: { export: "export" }, viewQueries: [{ propertyName: "modal", first: true, predicate: ["modal"], descendants: true }, { propertyName: "listGroups", first: true, predicate: ["listGroups"], descendants: true }], ngImport: i0, template: "<sd-modal width=\"907px\" [title]=\"'Exported template'\" #modal>\n  <div class=\"row\">\n    <div *ngIf=\"!files?.length\" class=\"col-12\">\n      <div class=\"c-empty\">\n        <img class=\"sd-image-data-empty\" alt=\"empty-image\" />\n        <div class=\"T14R\">{{ 'There are no exported templates' }}</div>\n      </div>\n    </div>\n    <ng-container *ngIf=\"files?.length\">\n      <div class=\"col-12\">\n        <div class=\"c-table\" style=\"max-height: 50vh\">\n          <table mat-table [dataSource]=\"files\">\n            <ng-container matColumnDef=\"stt\">\n              <th mat-header-cell class=\"c-th text-center px-5\" *matHeaderCellDef style=\"width: 50px\">#</th>\n              <td class=\"text-center px-5\" mat-cell *matCellDef=\"let item; let idx = index\">\n                {{ idx + 1 }}\n              </td>\n            </ng-container>\n            <ng-container matColumnDef=\"fileName\">\n              <th mat-header-cell class=\"c-th px-5\" *matHeaderCellDef>\n                {{ 'File name' }}\n              </th>\n              <td class=\"px-5\" mat-cell *matCellDef=\"let item\">\n                {{ item.fileName }}\n              </td>\n            </ng-container>\n            <ng-container matColumnDef=\"action\">\n              <th mat-header-cell class=\"c-th px-5\" *matHeaderCellDef style=\"width: 80px\"></th>\n              <td class=\"px-5\" mat-cell *matCellDef=\"let item\">\n                <div class=\"d-flex\">\n                  <button mat-icon-button aria-label=\"delete\" (click)=\"removeFile(item)\">\n                    <mat-icon>delete</mat-icon>\n                  </button>\n                  <button mat-icon-button aria-label=\"download\" (click)=\"onExport(item)\">\n                    <mat-icon>download</mat-icon>\n                  </button>\n                </div>\n              </td>\n            </ng-container>\n            <tr mat-header-row *matHeaderRowDef=\"['stt', 'fileName', 'action']; sticky: true\"></tr>\n            <tr mat-row *matRowDef=\"let row; columns: ['stt', 'fileName', 'action']\"></tr>\n          </table>\n        </div>\n      </div>\n      <div *ngIf=\"files.length < 5\" class=\"col-12 mt-10\">\n        <sd-button class=\"mr-4\" [title]=\"'New template'\" (click)=\"enableCreating = true\" color=\"info\" [disabled]=\"enableCreating\">\n        </sd-button>\n        <sd-button *ngIf=\"exportOption?.enableUpload\" [title]=\"'Upload template'\" (click)=\"uploadTemplate()\" type=\"outline\">\n        </sd-button>\n      </div>\n    </ng-container>\n    <ng-container *ngIf=\"enableCreating || !files?.length\">\n      <div class=\"col-12 mt-20\">\n        <div class=\"T14R\">{{ 'Select columns for creating template' }}:</div>\n      </div>\n      <div class=\"col-12\">\n        <mat-chip-listbox selectable=\"true\" multiple=\"true\">\n          <ng-container *ngFor=\"let column of columns\">\n            <mat-chip-option [selected]=\"selected[column.field]\" (click)=\"selected[column.field] = !selected[column.field]\">\n              {{ column.title }}\n            </mat-chip-option>\n          </ng-container>\n        </mat-chip-listbox>\n      </div>\n      <div class=\"col-12 row\">\n        <div class=\"col-10\">\n          <sd-input [clearable]=\"true\" [form]=\"form\" [label]=\"'Template name'\" [(model)]=\"templateName\" [validator]=\"templateNameValidator\"></sd-input>\n        </div>\n        <div class=\"col-2 mt-8\">\n          <sd-button width=\"100%\" [title]=\"'Save'\" color=\"info\" (click)=\"createTemplate()\"> </sd-button>\n        </div>\n      </div>\n    </ng-container>\n  </div>\n</sd-modal>\n", styles: [".c-radio-group{display:flex;flex-direction:column;margin:15px 0}.c-radio-button{margin:5px}.c-empty{display:flex;flex-direction:column;justify-content:center;align-items:center;position:static;height:116px;background:#f6f6f6;border-radius:4px}.c-table{position:relative;overflow:auto}.c-table table{width:100%}.c-table .c-th{font-weight:500;font-size:14px;line-height:20px;color:#000}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatTableModule }, { kind: "component", type: i6.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i6.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i6.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i6.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i6.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i6.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i6.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i6.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i6.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i6.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatChipsModule }, { kind: "component", type: i5$1.MatChipListbox, selector: "mat-chip-listbox", inputs: ["multiple", "aria-orientation", "selectable", "compareWith", "required", "hideSingleSelectionIndicator", "value"], outputs: ["change"] }, { kind: "component", type: i5$1.MatChipOption, selector: "mat-basic-chip-option, [mat-basic-chip-option], mat-chip-option, [mat-chip-option]", inputs: ["selectable", "selected"], outputs: ["selectionChange"] }, { kind: "component", type: SdButton, selector: "sd-button", inputs: ["autoId", "type", "color", "size", "fontSet", "title", "width", "tooltip", "prefixIcon", "suffixIcon", "disabled", "loading", "block", "htmlType"], outputs: ["click"] }, { kind: "component", type: SdInput, selector: "sd-input", inputs: ["autoId", "name", "appearance", "floatLabel", "size", "form", "label", "helperText", "placeholder", "type", "hideInlineError", "blurOnEnter", "clearable", "required", "readonly", "disabled", "viewed", "minlength", "maxlength", "pattern", "patternErrorMessage", "validator", "inlineError", "hyperlink", "model"], outputs: ["modelChange", "sdChange", "sdFocus", "sdBlur", "keyupEnter", "cleared", "sdFocusForceBlur"] }, { kind: "component", type: SdModal, selector: "sd-modal", inputs: ["autoId", "title", "color", "width", "height", "view", "modalClass", "lazyLoadContent", "hideClose", "disableBackdropClose"], outputs: ["sdClosed"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.21", type: SdPopupExport, isStandalone: true, selector: "sd-popup-export", inputs: { _tableOption: ["tableOption", "_tableOption"], configuration: "configuration" }, outputs: { export: "export" }, viewQueries: [{ propertyName: "modal", first: true, predicate: ["modal"], descendants: true }, { propertyName: "listGroups", first: true, predicate: ["listGroups"], descendants: true }], ngImport: i0, template: "<sd-modal width=\"907px\" [title]=\"'Exported template'\" #modal>\n  <div class=\"row\">\n    <div *ngIf=\"!files?.length\" class=\"col-12\">\n      <div class=\"c-empty\">\n        <img class=\"sd-image-data-empty\" alt=\"empty-image\" />\n        <div class=\"T14R\">{{ 'There are no exported templates' }}</div>\n      </div>\n    </div>\n    <ng-container *ngIf=\"files?.length\">\n      <div class=\"col-12\">\n        <div class=\"c-table\" style=\"max-height: 50vh\">\n          <table mat-table [dataSource]=\"files\">\n            <ng-container matColumnDef=\"stt\">\n              <th mat-header-cell class=\"c-th text-center px-5\" *matHeaderCellDef style=\"width: 50px\">#</th>\n              <td class=\"text-center px-5\" mat-cell *matCellDef=\"let item; let idx = index\">\n                {{ idx + 1 }}\n              </td>\n            </ng-container>\n            <ng-container matColumnDef=\"fileName\">\n              <th mat-header-cell class=\"c-th px-5\" *matHeaderCellDef>\n                {{ 'File name' }}\n              </th>\n              <td class=\"px-5\" mat-cell *matCellDef=\"let item\">\n                {{ item.fileName }}\n              </td>\n            </ng-container>\n            <ng-container matColumnDef=\"action\">\n              <th mat-header-cell class=\"c-th px-5\" *matHeaderCellDef style=\"width: 80px\"></th>\n              <td class=\"px-5\" mat-cell *matCellDef=\"let item\">\n                <div class=\"d-flex\">\n                  <button mat-icon-button aria-label=\"delete\" (click)=\"removeFile(item)\">\n                    <mat-icon>delete</mat-icon>\n                  </button>\n                  <button mat-icon-button aria-label=\"download\" (click)=\"onExport(item)\">\n                    <mat-icon>download</mat-icon>\n                  </button>\n                </div>\n              </td>\n            </ng-container>\n            <tr mat-header-row *matHeaderRowDef=\"['stt', 'fileName', 'action']; sticky: true\"></tr>\n            <tr mat-row *matRowDef=\"let row; columns: ['stt', 'fileName', 'action']\"></tr>\n          </table>\n        </div>\n      </div>\n      <div *ngIf=\"files.length < 5\" class=\"col-12 mt-10\">\n        <sd-button class=\"mr-4\" [title]=\"'New template'\" (click)=\"enableCreating = true\" color=\"info\" [disabled]=\"enableCreating\">\n        </sd-button>\n        <sd-button *ngIf=\"exportOption?.enableUpload\" [title]=\"'Upload template'\" (click)=\"uploadTemplate()\" type=\"outline\">\n        </sd-button>\n      </div>\n    </ng-container>\n    <ng-container *ngIf=\"enableCreating || !files?.length\">\n      <div class=\"col-12 mt-20\">\n        <div class=\"T14R\">{{ 'Select columns for creating template' }}:</div>\n      </div>\n      <div class=\"col-12\">\n        <mat-chip-listbox selectable=\"true\" multiple=\"true\">\n          <ng-container *ngFor=\"let column of columns\">\n            <mat-chip-option [selected]=\"selected[column.field]\" (click)=\"selected[column.field] = !selected[column.field]\">\n              {{ column.title }}\n            </mat-chip-option>\n          </ng-container>\n        </mat-chip-listbox>\n      </div>\n      <div class=\"col-12 row\">\n        <div class=\"col-10\">\n          <sd-input [clearable]=\"true\" [form]=\"form\" [label]=\"'Template name'\" [(model)]=\"templateName\" [validator]=\"templateNameValidator\"></sd-input>\n        </div>\n        <div class=\"col-2 mt-8\">\n          <sd-button width=\"100%\" [title]=\"'Save'\" color=\"info\" (click)=\"createTemplate()\"> </sd-button>\n        </div>\n      </div>\n    </ng-container>\n  </div>\n</sd-modal>\n", styles: [".c-radio-group{display:flex;flex-direction:column;margin:15px 0}.c-radio-button{margin:5px}.c-empty{display:flex;flex-direction:column;justify-content:center;align-items:center;position:static;height:116px;background:#f6f6f6;border-radius:4px}.c-table{position:relative;overflow:auto}.c-table table{width:100%}.c-table .c-th{font-weight:500;font-size:14px;line-height:20px;color:#000}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatTableModule }, { kind: "component", type: i6.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i6.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i6.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i6.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i6.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i6.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i6.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i6.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i6.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i6.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatChipsModule }, { kind: "component", type: i5$1.MatChipListbox, selector: "mat-chip-listbox", inputs: ["multiple", "aria-orientation", "selectable", "compareWith", "required", "hideSingleSelectionIndicator", "value"], outputs: ["change"] }, { kind: "component", type: i5$1.MatChipOption, selector: "mat-basic-chip-option, [mat-basic-chip-option], mat-chip-option, [mat-chip-option]", inputs: ["selectable", "selected"], outputs: ["selectionChange"] }, { kind: "component", type: SdButton, selector: "sd-button", inputs: ["autoId", "type", "color", "size", "fontSet", "title", "width", "tooltip", "prefixIcon", "suffixIcon", "disabled", "loading", "block", "htmlType"], outputs: ["click"] }, { kind: "component", type: SdInput, selector: "sd-input", inputs: ["autoId", "name", "appearance", "floatLabel", "size", "form", "label", "helperText", "placeholder", "type", "hideInlineError", "blurOnEnter", "clearable", "required", "readonly", "disabled", "viewed", "minlength", "maxlength", "pattern", "patternErrorMessage", "validator", "inlineError", "hyperlink", "model"], outputs: ["modelChange", "sdChange", "sdFocus", "sdBlur", "keyupEnter", "cleared", "sdFocusForceBlur"] }, { kind: "component", type: SdModal, selector: "sd-modal", inputs: ["autoId", "title", "color", "width", "height", "view", "modalClass", "lazyLoadContent", "hideClose", "enableBackdropClose", "disableBackdropClose"], outputs: ["sdClosed"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SdPopupExport, decorators: [{
             type: Component,
@@ -2207,25 +2213,29 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
 class StickyShadowDirective {
     #el = inject((ElementRef));
     #destroyRef = inject(DestroyRef);
+    #zone = inject(NgZone);
     constructor() {
-        afterNextRender(() => {
+        afterNextRender(() => this.#zone.runOutsideAngular(() => {
             const container = this.#el.nativeElement;
             // Dùng MutationObserver để detect khi CDK render rows mới vào table
             // (data load async, phân trang, ...) — lúc này td mới có đủ sticky classes
-            const mutationObserver = new MutationObserver(() => {
-                this.#updateShadow(container);
-            });
+            // why: gộp mutation và scroll vào cùng một lượt quét, không kích hoạt change detection của bảng.
+            const mutations = new Subject();
+            const mutationObserver = new MutationObserver(() => mutations.next());
             mutationObserver.observe(container, {
                 childList: true, // Theo dõi thêm/bớt các node con
                 subtree: true, // Bao gồm tất cả các cấp con cháu
             });
             // Cập nhật shadow mỗi khi user scroll ngang
-            fromEvent(container, 'scroll')
+            merge(mutations, fromEvent(container, 'scroll'))
                 .pipe(debounceTime(10), takeUntilDestroyed(this.#destroyRef))
                 .subscribe(() => this.#updateShadow(container));
             // Disconnect MutationObserver khi directive bị destroy
-            this.#destroyRef.onDestroy(() => mutationObserver.disconnect());
-        });
+            this.#destroyRef.onDestroy(() => {
+                mutationObserver.disconnect();
+                mutations.complete();
+            });
+        }));
     }
     /**
      * Toggle class shadow lên tất cả th và td của một cột.