quang 20.3.4 → 20.4.1

package/fesm2022/quang-components-shared.mjs

@@ -137,10 +137,10 @@ class QuangBaseComponent {
     ngAfterViewInit() {
         this.setupFormControl();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: QuangBaseComponent, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.2.1", type: QuangBaseComponent, isStandalone: true, inputs: { componentId: { classPropertyName: "componentId", publicName: "componentId", isSignal: true, isRequired: false, transformFunction: null }, isReadonly: { classPropertyName: "isReadonly", publicName: "isReadonly", isSignal: true, isRequired: false, transformFunction: null }, componentTabIndex: { classPropertyName: "componentTabIndex", publicName: "componentTabIndex", isSignal: true, isRequired: false, transformFunction: null }, componentClass: { classPropertyName: "componentClass", publicName: "componentClass", isSignal: true, isRequired: false, transformFunction: null }, componentLabel: { classPropertyName: "componentLabel", publicName: "componentLabel", isSignal: true, isRequired: false, transformFunction: null }, componentPlaceholder: { classPropertyName: "componentPlaceholder", publicName: "componentPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, errorMap: { classPropertyName: "errorMap", publicName: "errorMap", isSignal: true, isRequired: false, transformFunction: null }, successMessage: { classPropertyName: "successMessage", publicName: "successMessage", isSignal: true, isRequired: false, transformFunction: null }, helpMessage: { classPropertyName: "helpMessage", publicName: "helpMessage", isSignal: true, isRequired: false, transformFunction: null }, formControl: { classPropertyName: "formControl", publicName: "formControl", isSignal: true, isRequired: false, transformFunction: null }, helpMessageTooltip: { classPropertyName: "helpMessageTooltip", publicName: "helpMessageTooltip", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { componentBlur: "componentBlur" }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: QuangBaseComponent, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.2.3", type: QuangBaseComponent, isStandalone: true, inputs: { componentId: { classPropertyName: "componentId", publicName: "componentId", isSignal: true, isRequired: false, transformFunction: null }, isReadonly: { classPropertyName: "isReadonly", publicName: "isReadonly", isSignal: true, isRequired: false, transformFunction: null }, componentTabIndex: { classPropertyName: "componentTabIndex", publicName: "componentTabIndex", isSignal: true, isRequired: false, transformFunction: null }, componentClass: { classPropertyName: "componentClass", publicName: "componentClass", isSignal: true, isRequired: false, transformFunction: null }, componentLabel: { classPropertyName: "componentLabel", publicName: "componentLabel", isSignal: true, isRequired: false, transformFunction: null }, componentPlaceholder: { classPropertyName: "componentPlaceholder", publicName: "componentPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, errorMap: { classPropertyName: "errorMap", publicName: "errorMap", isSignal: true, isRequired: false, transformFunction: null }, successMessage: { classPropertyName: "successMessage", publicName: "successMessage", isSignal: true, isRequired: false, transformFunction: null }, helpMessage: { classPropertyName: "helpMessage", publicName: "helpMessage", isSignal: true, isRequired: false, transformFunction: null }, formControl: { classPropertyName: "formControl", publicName: "formControl", isSignal: true, isRequired: false, transformFunction: null }, helpMessageTooltip: { classPropertyName: "helpMessageTooltip", publicName: "helpMessageTooltip", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { componentBlur: "componentBlur" }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: QuangBaseComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: QuangBaseComponent, decorators: [{
             type: Directive
         }], ctorParameters: () => [] });
 
@@ -414,10 +414,10 @@ class QuangOptionListComponent {
             this.getOptionListTop();
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: QuangOptionListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.1", type: QuangOptionListComponent, isStandalone: true, selector: "quang-option-list", inputs: { selectionMode: { classPropertyName: "selectionMode", publicName: "selectionMode", isSignal: true, isRequired: false, transformFunction: null }, optionListMaxHeight: { classPropertyName: "optionListMaxHeight", publicName: "optionListMaxHeight", isSignal: true, isRequired: false, transformFunction: null }, selectOptions: { classPropertyName: "selectOptions", publicName: "selectOptions", isSignal: true, isRequired: false, transformFunction: null }, selectButtonRef: { classPropertyName: "selectButtonRef", publicName: "selectButtonRef", isSignal: true, isRequired: true, transformFunction: null }, _value: { classPropertyName: "_value", publicName: "_value", isSignal: true, isRequired: false, transformFunction: null }, _isDisabled: { classPropertyName: "_isDisabled", publicName: "_isDisabled", isSignal: true, isRequired: false, transformFunction: null }, componentClass: { classPropertyName: "componentClass", publicName: "componentClass", isSignal: true, isRequired: false, transformFunction: null }, componentLabel: { classPropertyName: "componentLabel", publicName: "componentLabel", isSignal: true, isRequired: false, transformFunction: null }, componentTabIndex: { classPropertyName: "componentTabIndex", publicName: "componentTabIndex", isSignal: true, isRequired: false, transformFunction: null }, translateValue: { classPropertyName: "translateValue", publicName: "translateValue", isSignal: true, isRequired: false, transformFunction: null }, nullOption: { classPropertyName: "nullOption", publicName: "nullOption", isSignal: true, isRequired: false, transformFunction: null }, scrollBehaviorOnOpen: { classPropertyName: "scrollBehaviorOnOpen", publicName: "scrollBehaviorOnOpen", isSignal: true, isRequired: false, transformFunction: null }, parentType: { classPropertyName: "parentType", publicName: "parentType", isSignal: true, isRequired: true, transformFunction: null }, parentID: { classPropertyName: "parentID", publicName: "parentID", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { changedHandler: "changedHandler", blurHandler: "blurHandler" }, host: { listeners: { "window:scroll": "changePosition()" } }, viewQueries: [{ propertyName: "optionListContainer", first: true, predicate: ["optionListContainer"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\n  [ngStyle]=\"{\n    'max-height': optionListMaxHeight(),\n    '--option-list-width': elementWidth(),\n    '--option-list-top': elementTop(),\n    '--option-list-bottom': elementBottom(),\n  }\"\n  (blur)=\"onBlurHandler($event)\"\n  #optionListContainer\n  class=\"option-list\"\n  id=\"optionList\"\n  tabindex=\"1\"\n>\n  <ul>\n    @for (item of selectOptionsList(); track i; let i = $index; let last = $last) {\n      <li\n        [class.m-0]=\"last\"\n        [class.selected]=\"selectionMode() === 'single' ? getSelected(item) : null\"\n        [id]=\"'item-' + i\"\n        (mousedown)=\"$event.stopImmediatePropagation(); onSelectItem(item)\"\n        class=\"item\"\n      >\n        <input\n          [checked]=\"getSelected(item)\"\n          [class.d-none]=\"selectionMode() === 'single' || !item?.value\"\n          [disabled]=\"true\"\n          [id]=\"i + '-' + item.value + '-checkbox'\"\n          [name]=\"i + '-' + item.value + '-checkbox'\"\n          [ngClass]=\"componentClass()\"\n          [tabIndex]=\"componentTabIndex()\"\n          [value]=\"getSelected(item)\"\n          (blur)=\"onBlurHandler($event)\"\n          #inputCheckbox\n          class=\"form-check-input opacity-100\"\n          type=\"checkbox\"\n        />\n        <label\n          [class.ms-3]=\"selectionMode() === 'multiple' && item?.value\"\n          [for]=\"i + '-' + item.value + '-checkbox'\"\n          class=\"form-check-label checkbox-label w-100 opacity-100\"\n        >\n          {{ translateValue() ? (item.label | transloco) : item.label }}\n        </label>\n      </li>\n    }\n  </ul>\n</div>\n", styles: [":host{display:block;z-index:999}.option-list{--option-list-width: 100%;--option-list-top: 10px;--option-list-bottom: unset;border:1px solid var(--bs-border-color);border-top:0;border-radius:var(--bs-border-radius);overflow:auto;position:fixed;width:var(--option-list-width);top:var(--option-list-top);bottom:var(--option-list-bottom);z-index:999}.option-list ul{margin:0;padding:0}.option-list .selected{background-color:var(--bs-body-bg);filter:brightness(95%)}.option-list.option-list-top{border-top:1px solid var(--bs-border-color);border-bottom:0}.option-list:focus-visible{outline:none}.item{display:flex;background-color:var(--bs-body-bg);z-index:1;padding:0 .5rem;min-height:2.5rem}.item label{padding:.5rem 0}.item:hover{cursor:pointer;background-color:var(--bs-body-bg);filter:brightness(95%)}.item *:hover{cursor:pointer}.item .form-check-input{align-self:center}.item .form-check-input:focus{border-color:var(--bs-border-color);box-shadow:unset}.item .form-check-input:checked{background-color:var(--bs-primary);border-color:var(--bs-border-color)}\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: QuangOptionListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.3", type: QuangOptionListComponent, isStandalone: true, selector: "quang-option-list", inputs: { selectionMode: { classPropertyName: "selectionMode", publicName: "selectionMode", isSignal: true, isRequired: false, transformFunction: null }, optionListMaxHeight: { classPropertyName: "optionListMaxHeight", publicName: "optionListMaxHeight", isSignal: true, isRequired: false, transformFunction: null }, selectOptions: { classPropertyName: "selectOptions", publicName: "selectOptions", isSignal: true, isRequired: false, transformFunction: null }, selectButtonRef: { classPropertyName: "selectButtonRef", publicName: "selectButtonRef", isSignal: true, isRequired: true, transformFunction: null }, _value: { classPropertyName: "_value", publicName: "_value", isSignal: true, isRequired: false, transformFunction: null }, _isDisabled: { classPropertyName: "_isDisabled", publicName: "_isDisabled", isSignal: true, isRequired: false, transformFunction: null }, componentClass: { classPropertyName: "componentClass", publicName: "componentClass", isSignal: true, isRequired: false, transformFunction: null }, componentLabel: { classPropertyName: "componentLabel", publicName: "componentLabel", isSignal: true, isRequired: false, transformFunction: null }, componentTabIndex: { classPropertyName: "componentTabIndex", publicName: "componentTabIndex", isSignal: true, isRequired: false, transformFunction: null }, translateValue: { classPropertyName: "translateValue", publicName: "translateValue", isSignal: true, isRequired: false, transformFunction: null }, nullOption: { classPropertyName: "nullOption", publicName: "nullOption", isSignal: true, isRequired: false, transformFunction: null }, scrollBehaviorOnOpen: { classPropertyName: "scrollBehaviorOnOpen", publicName: "scrollBehaviorOnOpen", isSignal: true, isRequired: false, transformFunction: null }, parentType: { classPropertyName: "parentType", publicName: "parentType", isSignal: true, isRequired: true, transformFunction: null }, parentID: { classPropertyName: "parentID", publicName: "parentID", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { changedHandler: "changedHandler", blurHandler: "blurHandler" }, host: { listeners: { "window:scroll": "changePosition()" } }, viewQueries: [{ propertyName: "optionListContainer", first: true, predicate: ["optionListContainer"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\n  [ngStyle]=\"{\n    'max-height': optionListMaxHeight(),\n    '--option-list-width': elementWidth(),\n    '--option-list-top': elementTop(),\n    '--option-list-bottom': elementBottom(),\n  }\"\n  (blur)=\"onBlurHandler($event)\"\n  #optionListContainer\n  class=\"option-list\"\n  id=\"optionList\"\n  tabindex=\"1\"\n>\n  <ul>\n    @for (item of selectOptionsList(); track i; let i = $index; let last = $last) {\n      <li\n        [class.m-0]=\"last\"\n        [class.selected]=\"selectionMode() === 'single' ? getSelected(item) : null\"\n        [id]=\"'item-' + i\"\n        (mousedown)=\"$event.stopImmediatePropagation(); onSelectItem(item)\"\n        class=\"item\"\n      >\n        <input\n          [checked]=\"getSelected(item)\"\n          [class.d-none]=\"selectionMode() === 'single' || !item?.value\"\n          [disabled]=\"true\"\n          [id]=\"i + '-' + item.value + '-checkbox'\"\n          [name]=\"i + '-' + item.value + '-checkbox'\"\n          [ngClass]=\"componentClass()\"\n          [tabIndex]=\"componentTabIndex()\"\n          [value]=\"getSelected(item)\"\n          (blur)=\"onBlurHandler($event)\"\n          #inputCheckbox\n          class=\"form-check-input opacity-100\"\n          type=\"checkbox\"\n        />\n        <label\n          [class.ms-3]=\"selectionMode() === 'multiple' && item?.value\"\n          [for]=\"i + '-' + item.value + '-checkbox'\"\n          class=\"form-check-label checkbox-label w-100 opacity-100\"\n        >\n          {{ translateValue() ? (item.label | transloco) : item.label }}\n        </label>\n      </li>\n    }\n  </ul>\n</div>\n", styles: [":host{display:block;z-index:999}.option-list{--option-list-width: 100%;--option-list-top: 10px;--option-list-bottom: unset;border:1px solid var(--bs-border-color);border-top:0;border-radius:var(--bs-border-radius);overflow:auto;position:fixed;width:var(--option-list-width);top:var(--option-list-top);bottom:var(--option-list-bottom);z-index:999}.option-list ul{margin:0;padding:0}.option-list .selected{background-color:var(--bs-body-bg);filter:brightness(95%)}.option-list.option-list-top{border-top:1px solid var(--bs-border-color);border-bottom:0}.option-list:focus-visible{outline:none}.item{display:flex;background-color:var(--bs-body-bg);z-index:1;padding:0 .5rem;min-height:2.5rem}.item label{padding:.5rem 0}.item:hover{cursor:pointer;background-color:var(--bs-body-bg);filter:brightness(95%)}.item *:hover{cursor:pointer}.item .form-check-input{align-self:center}.item .form-check-input:focus{border-color:var(--bs-border-color);box-shadow:unset}.item .form-check-input:checked{background-color:var(--bs-primary);border-color:var(--bs-border-color)}\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: QuangOptionListComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: QuangOptionListComponent, decorators: [{
             type: Component,
             args: [{ selector: 'quang-option-list', imports: [NgStyle, NgClass, TranslocoPipe], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  [ngStyle]=\"{\n    'max-height': optionListMaxHeight(),\n    '--option-list-width': elementWidth(),\n    '--option-list-top': elementTop(),\n    '--option-list-bottom': elementBottom(),\n  }\"\n  (blur)=\"onBlurHandler($event)\"\n  #optionListContainer\n  class=\"option-list\"\n  id=\"optionList\"\n  tabindex=\"1\"\n>\n  <ul>\n    @for (item of selectOptionsList(); track i; let i = $index; let last = $last) {\n      <li\n        [class.m-0]=\"last\"\n        [class.selected]=\"selectionMode() === 'single' ? getSelected(item) : null\"\n        [id]=\"'item-' + i\"\n        (mousedown)=\"$event.stopImmediatePropagation(); onSelectItem(item)\"\n        class=\"item\"\n      >\n        <input\n          [checked]=\"getSelected(item)\"\n          [class.d-none]=\"selectionMode() === 'single' || !item?.value\"\n          [disabled]=\"true\"\n          [id]=\"i + '-' + item.value + '-checkbox'\"\n          [name]=\"i + '-' + item.value + '-checkbox'\"\n          [ngClass]=\"componentClass()\"\n          [tabIndex]=\"componentTabIndex()\"\n          [value]=\"getSelected(item)\"\n          (blur)=\"onBlurHandler($event)\"\n          #inputCheckbox\n          class=\"form-check-input opacity-100\"\n          type=\"checkbox\"\n        />\n        <label\n          [class.ms-3]=\"selectionMode() === 'multiple' && item?.value\"\n          [for]=\"i + '-' + item.value + '-checkbox'\"\n          class=\"form-check-label checkbox-label w-100 opacity-100\"\n        >\n          {{ translateValue() ? (item.label | transloco) : item.label }}\n        </label>\n      </li>\n    }\n  </ul>\n</div>\n", styles: [":host{display:block;z-index:999}.option-list{--option-list-width: 100%;--option-list-top: 10px;--option-list-bottom: unset;border:1px solid var(--bs-border-color);border-top:0;border-radius:var(--bs-border-radius);overflow:auto;position:fixed;width:var(--option-list-width);top:var(--option-list-top);bottom:var(--option-list-bottom);z-index:999}.option-list ul{margin:0;padding:0}.option-list .selected{background-color:var(--bs-body-bg);filter:brightness(95%)}.option-list.option-list-top{border-top:1px solid var(--bs-border-color);border-bottom:0}.option-list:focus-visible{outline:none}.item{display:flex;background-color:var(--bs-body-bg);z-index:1;padding:0 .5rem;min-height:2.5rem}.item label{padding:.5rem 0}.item:hover{cursor:pointer;background-color:var(--bs-body-bg);filter:brightness(95%)}.item *:hover{cursor:pointer}.item .form-check-input{align-self:center}.item .form-check-input:focus{border-color:var(--bs-border-color);box-shadow:unset}.item .form-check-input:checked{background-color:var(--bs-primary);border-color:var(--bs-border-color)}\n"] }]
         }], propDecorators: { changePosition: [{

package/fesm2022/quang-components-table.mjs

@@ -11,6 +11,11 @@ var SortTable;
     SortTable["ASC"] = "ASC";
     SortTable["DESC"] = "DESC";
 })(SortTable || (SortTable = {}));
+var SortType;
+(function (SortType) {
+    SortType["SINGLE"] = "SINGLE";
+    SortType["MULTIPLE"] = "MULTIPLE";
+})(SortType || (SortType = {}));
 /**
  * Table component for displaying data in a tabular format.
  *
@@ -24,6 +29,7 @@ class QuangTableComponent {
         this.clickableRow = input(false, ...(ngDevMode ? [{ debugName: "clickableRow" }] : []));
         this.selectedRows = input(...(ngDevMode ? [undefined, { debugName: "selectedRows" }] : []));
         this.stickyTable = input(true, ...(ngDevMode ? [{ debugName: "stickyTable" }] : []));
+        this.sortType = input(SortType.SINGLE, ...(ngDevMode ? [{ debugName: "sortType" }] : []));
         this.selectedRow = output();
         this.sortChanged = output();
         this.SortTable = SortTable;
@@ -89,6 +95,7 @@ class QuangTableComponent {
         }, ...(ngDevMode ? [{ debugName: "effectTableConfigurations" }] : []));
         this.hiddenColumnsObservable = undefined;
         this.lastWidth = -1;
+        this.SortType = SortType;
     }
     onClickRow(row) {
         if (this.clickableRow()) {
@@ -126,55 +133,106 @@ class QuangTableComponent {
         });
     }
     onSortColumn(sort) {
-        const tableHeaders = [];
-        for (const header of this._tableConfigurations().headers) {
-            tableHeaders.push({
-                ...header,
+        // Create a deep copy of headers to avoid direct mutation of the signal's state.
+        const tableHeaders = this._tableConfigurations().headers.map((h) => ({
+            ...h,
+            sort: h.sort ? { ...h.sort } : undefined,
+        }));
+        if (this.sortType() === SortType.SINGLE) {
+            let newSortToEmit;
+            tableHeaders.forEach((header) => {
+                if (!header.sort)
+                    return;
+                if (header.sort.key === sort.key) {
+                    switch (sort.sort) {
+                        case SortTable.ASC:
+                            header.sort.sort = SortTable.DESC;
+                            break;
+                        case SortTable.DESC:
+                            header.sort.sort = SortTable.DEFAULT;
+                            break;
+                        case SortTable.DEFAULT:
+                        default:
+                            header.sort.sort = SortTable.ASC;
+                            break;
+                    }
+                    header.sort.order = 0;
+                    if (header.sort.sort !== SortTable.DEFAULT) {
+                        newSortToEmit = header.sort;
+                    }
+                }
+                else {
+                    header.sort.sort = SortTable.DEFAULT;
+                    header.sort.order = undefined;
+                }
             });
+            this._tableConfigurations.set({ ...this._tableConfigurations(), headers: tableHeaders });
+            this.sortChanged.emit(newSortToEmit ? [newSortToEmit] : []);
         }
-        tableHeaders.forEach((header) => {
-            if (!header.sort?.key)
-                return;
-            if (header.sort?.key === sort.key) {
-                switch (sort.sort) {
+        else {
+            // 1. Find the clicked header and update its sort status
+            const targetHeader = tableHeaders.find((h) => h.sort?.key === sort.key);
+            if (targetHeader?.sort) {
+                switch (targetHeader.sort.sort) {
                     case SortTable.ASC:
-                        header.sort.sort = SortTable.DESC;
+                        targetHeader.sort.sort = SortTable.DESC;
                         break;
                     case SortTable.DESC:
-                        header.sort.sort = SortTable.DEFAULT;
+                        targetHeader.sort.sort = SortTable.DEFAULT;
                         break;
                     case SortTable.DEFAULT:
                     default:
-                        header.sort.sort = SortTable.ASC;
+                        targetHeader.sort.sort = SortTable.ASC;
                         break;
                 }
             }
-            else {
-                header.sort = {
-                    ...header.sort,
-                    sort: SortTable.DEFAULT,
-                };
+            // 2. Collect all currently active sort columns (not DEFAULT)
+            const activeSorts = tableHeaders
+                .filter((h) => h.sort && h.sort.sort !== SortTable.DEFAULT)
+                .map((h) => h.sort);
+            activeSorts.sort((a, b) => (a.order ?? 0) - (b.order ?? 0));
+            // 3. If the clicked column was already in the list, remove it to re-add it at the end.
+            // This makes the last clicked column the highest priority in the sort order.
+            const existingIndex = activeSorts.findIndex((s) => s.key === sort.key);
+            if (existingIndex > -1) {
+                activeSorts.splice(existingIndex, 1);
             }
-        });
-        this._tableConfigurations.set({ ...this._tableConfigurations(), headers: tableHeaders });
-        this.sortChanged.emit([sort]); // it's an array to handle multisort in the future
+            const clickedSortObject = targetHeader?.sort;
+            // 4. If the new state is not DEFAULT, add it to the end of the list.
+            if (clickedSortObject && clickedSortObject.sort !== SortTable.DEFAULT) {
+                activeSorts.push(clickedSortObject);
+            }
+            // 5. Re-assign the 'order' property based on the new sequence.
+            activeSorts.forEach((sort, index) => {
+                sort.order = index;
+            });
+            // 6. Clean up the 'order' for any headers that are no longer sorted.
+            const activeSortKeys = new Set(activeSorts.map((s) => s.key));
+            tableHeaders.forEach((header) => {
+                if (header.sort && !activeSortKeys.has(header.sort.key)) {
+                    header.sort.order = undefined;
+                }
+            });
+            this._tableConfigurations.set({ ...this._tableConfigurations(), headers: tableHeaders });
+            this.sortChanged.emit(activeSorts);
+        }
     }
     convertToString(value) {
         if (value === null)
             return undefined;
         return JSON.stringify(value);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: QuangTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.1", type: QuangTableComponent, isStandalone: true, selector: "quang-table", inputs: { clickableRow: { classPropertyName: "clickableRow", publicName: "clickableRow", isSignal: true, isRequired: false, transformFunction: null }, selectedRows: { classPropertyName: "selectedRows", publicName: "selectedRows", isSignal: true, isRequired: false, transformFunction: null }, stickyTable: { classPropertyName: "stickyTable", publicName: "stickyTable", isSignal: true, isRequired: false, transformFunction: null }, noResultsText: { classPropertyName: "noResultsText", publicName: "noResultsText", isSignal: true, isRequired: false, transformFunction: null }, tableConfigurations: { classPropertyName: "tableConfigurations", publicName: "tableConfigurations", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { selectedRow: "selectedRow", sortChanged: "sortChanged" }, viewQueries: [{ propertyName: "_tableHeader", first: true, predicate: ["tableHeader"], descendants: true, isSignal: true }, { propertyName: "_tableHeaderElement", first: true, predicate: ["tableHeader"], descendants: true, isSignal: true }, { propertyName: "tdWithProperties", predicate: ["tdCell"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "_fakeTableHeader", first: true, predicate: ["fakeTableHeader"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\n  [class.sticky-table]=\"stickyTable()\"\n  class=\"table-responsive\"\n>\n  @if (_tableConfigurations().rows.length) {\n    <div\n      (scroll)=\"tableContainer.scrollLeft = tableHeaderContainer.scrollLeft\"\n      #tableHeaderContainer\n      class=\"table-header-container\"\n      id=\"tableHeaderContainer\"\n    >\n      <table\n        #tableHeader\n        id=\"tableHeader\"\n      >\n        <thead>\n          <tr>\n            @for (header of _tableConfigurations().headers; track $index) {\n              <th\n                [class.sort-btn]=\"header?.sort\"\n                (click)=\"header?.sort ? onSortColumn(header.sort!) : null\"\n                class=\"align-bottom\"\n              >\n                <div\n                  [ngClass]=\"header?.css\"\n                  class=\"align-self-end d-flex gap-1\"\n                >\n                  {{ !header.renderer ? (header.text | transloco) : null }}\n                  <ng-container\n                    [ngTemplateOutlet]=\"header?.renderer ?? null\"\n                    [ngTemplateOutletContext]=\"{\n                      $implicit: header.payload,\n                    }\"\n                  ></ng-container>\n                  @if (header.sort?.key) {\n                    <div class=\"d-flex justify-content-between\">\n                      <ng-container\n                        [ngTemplateOutlet]=\"orderBtns\"\n                        [ngTemplateOutletContext]=\"{ $implicit: header.sort }\"\n                      ></ng-container>\n                    </div>\n                  }\n                </div>\n              </th>\n            }\n          </tr>\n        </thead>\n      </table>\n    </div>\n    <div\n      (scroll)=\"tableHeaderContainer.scrollLeft = tableContainer.scrollLeft\"\n      #tableContainer\n      class=\"table-container\"\n    >\n      <table\n        class=\"table\"\n        id=\"table-content\"\n      >\n        <thead\n          #fakeTableHeader\n          class=\"fake-table-header\"\n          id=\"fakeTableHeader\"\n        >\n          <tr>\n            @for (header of _tableConfigurations().headers; track $index) {\n              <th\n                [class.sort-btn]=\"header?.sort\"\n                (click)=\"header?.sort ? onSortColumn(header.sort!) : null\"\n                class=\"align-bottom\"\n              >\n                <div\n                  [ngClass]=\"header?.css\"\n                  class=\"align-self-end d-flex gap-1\"\n                >\n                  {{ !header.renderer ? (header.text | transloco) : null }}\n                  <ng-container\n                    [ngTemplateOutlet]=\"header?.renderer ?? null\"\n                    [ngTemplateOutletContext]=\"{\n                      $implicit: header.payload,\n                    }\"\n                  ></ng-container>\n                  @if (header.sort?.key) {\n                    <div class=\"d-flex justify-content-between\">\n                      <ng-container\n                        [ngTemplateOutlet]=\"orderBtns\"\n                        [ngTemplateOutletContext]=\"{ $implicit: header.sort }\"\n                      ></ng-container>\n                    </div>\n                  }\n                </div>\n              </th>\n            }\n          </tr>\n        </thead>\n        <tbody>\n          @for (row of _tableConfigurations().rows; track $index) {\n            <tr\n              [class.hover-table]=\"clickableRow()\"\n              [class.selectedRow]=\"row?.rowId ? isSelected(row.rowId!) : null\"\n              [ngClass]=\"row.css\"\n              (click)=\"clickableRow() ? onClickRow(row) : null\"\n            >\n              @for (cell of row.cellData; track $index) {\n                <td\n                  [attr.colspan]=\"cell?.fullWidth ? _tableConfigurations().headers.length : undefined\"\n                  [attr.data-properties]=\"cell.properties ? convertToString(cell.properties) : undefined\"\n                  [ngClass]=\"cell.css\"\n                  [ngStyle]=\"cell.style\"\n                  #tdCell\n                >\n                  {{ !cell.renderer ? cell.text : null }}\n                  <ng-container\n                    [ngTemplateOutlet]=\"cell?.renderer ?? null\"\n                    [ngTemplateOutletContext]=\"{\n                      $implicit: cell.payload,\n                    }\"\n                  ></ng-container>\n                </td>\n              }\n            </tr>\n          }\n        </tbody>\n      </table>\n    </div>\n  }\n  @if (!_tableConfigurations().rows.length) {\n    <h6 class=\"text-center mt-3\">\n      {{ noResultsText() | transloco }}\n    </h6>\n  }\n</div>\n\n<ng-template\n  #orderBtns\n  let-order\n>\n  <div\n    [class.sort-asc]=\"order.sort === SortTable.ASC\"\n    [class.sort-default]=\"order.sort === SortTable.DEFAULT\"\n    [class.sort-desc]=\"order.sort === SortTable.DESC\"\n    class=\"sort-arrows\"\n  >\n    <svg\n      class=\"arrow-up\"\n      fill=\"currentColor\"\n      height=\"10\"\n      stroke=\"currentColor\"\n      viewBox=\"279.5 -600.5 401 201\"\n      width=\"10\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <path\n        d=\"m280-400 200-200 200 200H280Z\"\n        fill=\"currentColor\"\n        stroke=\"currentColor\"\n      ></path>\n    </svg>\n    <svg\n      class=\"arrow-down\"\n      fill=\"currentColor\"\n      height=\"10\"\n      stroke=\"currentColor\"\n      viewBox=\"279.5 -560.5 401 201\"\n      width=\"10\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <path\n        d=\"M480-360 280-560h400L480-360Z\"\n        fill=\"currentColor\"\n        stroke=\"currentColor\"\n      ></path>\n    </svg>\n  </div>\n</ng-template>\n", styles: [":host{display:block;--table-header-container-top: 0;--table-header-bg: var(--bs-body-bg);--table-header-border-color: var(--bs-border-color);--table-header-border-width: 4px;--table-row-hover-brightness: 90%;--table-row-selected-brightness: 95%}.table-responsive{overflow:initial}.table-responsive .fake-table-header{height:0!important;overflow:hidden!important;line-height:0!important;visibility:collapse!important}.table-responsive .fake-table-header *{padding:0!important;margin:0!important;background-color:var(--table-header-bg);border:unset!important;height:0!important;overflow:hidden!important;line-height:0!important;visibility:collapse!important}.table-responsive .table-header-container{overflow-x:hidden;z-index:1}.table-responsive .table-container{overflow-x:auto}.table-responsive table{width:100%;font-size:16px;overflow-y:auto;margin-bottom:unset}.table-responsive table thead{text-transform:uppercase}.table-responsive table thead th{padding:1rem .5rem;z-index:999;background-color:var(--table-header-bg);box-shadow:inset 0 calc(var(--table-header-border-width) * -1) 0 0 var(--table-header-border-color)}.table-responsive table tbody tr:first-child td{border-top:0}.table-responsive table tbody tr.hover-table:hover{cursor:pointer;filter:brightness(var(--table-row-hover-brightness))}.table-responsive table tbody tr.selectedRow{filter:brightness(var(--table-row-selected-brightness))}.table-responsive table tbody tr td{padding:1rem .5rem;font-weight:300;vertical-align:middle}.table-responsive table tbody tr:last-child{border-bottom:transparent}.table-responsive.sticky-table{position:relative}.table-responsive.sticky-table .table-header-container{position:sticky;top:var(--table-header-container-top, 0)}.sort-arrows{display:flex;flex-direction:column;justify-content:center}.sort-default{opacity:30%}.sort-asc .arrow-up{opacity:100%}.sort-asc .arrow-down,.sort-desc .arrow-up{display:none}.sort-desc .arrow-down{opacity:100%}.sort-btn:hover{cursor:pointer}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: QuangTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.3", type: QuangTableComponent, isStandalone: true, selector: "quang-table", inputs: { clickableRow: { classPropertyName: "clickableRow", publicName: "clickableRow", isSignal: true, isRequired: false, transformFunction: null }, selectedRows: { classPropertyName: "selectedRows", publicName: "selectedRows", isSignal: true, isRequired: false, transformFunction: null }, stickyTable: { classPropertyName: "stickyTable", publicName: "stickyTable", isSignal: true, isRequired: false, transformFunction: null }, sortType: { classPropertyName: "sortType", publicName: "sortType", isSignal: true, isRequired: false, transformFunction: null }, noResultsText: { classPropertyName: "noResultsText", publicName: "noResultsText", isSignal: true, isRequired: false, transformFunction: null }, tableConfigurations: { classPropertyName: "tableConfigurations", publicName: "tableConfigurations", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { selectedRow: "selectedRow", sortChanged: "sortChanged" }, viewQueries: [{ propertyName: "_tableHeader", first: true, predicate: ["tableHeader"], descendants: true, isSignal: true }, { propertyName: "_tableHeaderElement", first: true, predicate: ["tableHeader"], descendants: true, isSignal: true }, { propertyName: "tdWithProperties", predicate: ["tdCell"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "_fakeTableHeader", first: true, predicate: ["fakeTableHeader"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\n  [class.sticky-table]=\"stickyTable()\"\n  class=\"table-responsive\"\n>\n  @if (_tableConfigurations().rows.length) {\n    <div\n      (scroll)=\"tableContainer.scrollLeft = tableHeaderContainer.scrollLeft\"\n      #tableHeaderContainer\n      class=\"table-header-container\"\n      id=\"tableHeaderContainer\"\n    >\n      <table\n        #tableHeader\n        id=\"tableHeader\"\n      >\n        <thead>\n          <tr>\n            @for (header of _tableConfigurations().headers; track $index) {\n              <th\n                [class.sort-btn]=\"header?.sort\"\n                (click)=\"header?.sort ? onSortColumn(header.sort!) : null\"\n                class=\"align-bottom\"\n              >\n                <div\n                  [ngClass]=\"header?.css\"\n                  class=\"align-self-end d-flex gap-1\"\n                >\n                  {{ !header.renderer ? (header.text | transloco) : null }}\n                  <ng-container\n                    [ngTemplateOutlet]=\"header?.renderer ?? null\"\n                    [ngTemplateOutletContext]=\"{\n                      $implicit: header.payload,\n                    }\"\n                  ></ng-container>\n                  @if (sortType() === SortType.MULTIPLE) {\n                    <div class=\"mw-1ch\">\n                      @if (header.sort && header.sort.order !== undefined) {\n                        <span>{{ header.sort.order + 1 }}</span>\n                      }\n                    </div>\n                  }\n                  @if (header.sort?.key) {\n                    <div class=\"d-flex justify-content-between\">\n                      <ng-container\n                        [ngTemplateOutlet]=\"orderBtns\"\n                        [ngTemplateOutletContext]=\"{ $implicit: header.sort }\"\n                      ></ng-container>\n                    </div>\n                  }\n                </div>\n              </th>\n            }\n          </tr>\n        </thead>\n      </table>\n    </div>\n    <div\n      (scroll)=\"tableHeaderContainer.scrollLeft = tableContainer.scrollLeft\"\n      #tableContainer\n      class=\"table-container\"\n    >\n      <table\n        class=\"table\"\n        id=\"table-content\"\n      >\n        <thead\n          #fakeTableHeader\n          class=\"fake-table-header\"\n          id=\"fakeTableHeader\"\n        >\n          <tr>\n            @for (header of _tableConfigurations().headers; track $index) {\n              <th\n                [class.sort-btn]=\"header?.sort\"\n                (click)=\"header?.sort ? onSortColumn(header.sort!) : null\"\n                class=\"align-bottom\"\n              >\n                <div\n                  [ngClass]=\"header?.css\"\n                  class=\"align-self-end d-flex gap-1\"\n                >\n                  {{ !header.renderer ? (header.text | transloco) : null }}\n                  <ng-container\n                    [ngTemplateOutlet]=\"header?.renderer ?? null\"\n                    [ngTemplateOutletContext]=\"{\n                      $implicit: header.payload,\n                    }\"\n                  ></ng-container>\n                  @if (sortType() === SortType.MULTIPLE) {\n                    <div class=\"mw-1ch\">\n                      @if (header.sort && header.sort.order !== undefined) {\n                        <span>{{ header.sort.order + 1 }}</span>\n                      }\n                    </div>\n                  }\n                  @if (header.sort?.key) {\n                    <div class=\"d-flex justify-content-between\">\n                      <ng-container\n                        [ngTemplateOutlet]=\"orderBtns\"\n                        [ngTemplateOutletContext]=\"{ $implicit: header.sort }\"\n                      ></ng-container>\n                    </div>\n                  }\n                </div>\n              </th>\n            }\n          </tr>\n        </thead>\n        <tbody>\n          @for (row of _tableConfigurations().rows; track row.rowId || $index) {\n            <tr\n              [class.hover-table]=\"clickableRow()\"\n              [class.selectedRow]=\"row.rowId ? isSelected(row.rowId) : null\"\n              [ngClass]=\"row.css\"\n              (click)=\"clickableRow() ? onClickRow(row) : null\"\n            >\n              @for (cell of row.cellData; track cell.cellId || $index) {\n                <td\n                  [attr.colspan]=\"cell?.fullWidth ? _tableConfigurations().headers.length : undefined\"\n                  [attr.data-properties]=\"cell.properties ? convertToString(cell.properties) : undefined\"\n                  [ngClass]=\"cell.css\"\n                  [ngStyle]=\"cell.style\"\n                  #tdCell\n                >\n                  {{ !cell.renderer ? cell.text : null }}\n                  <ng-container\n                    [ngTemplateOutlet]=\"cell?.renderer ?? null\"\n                    [ngTemplateOutletContext]=\"{\n                      $implicit: cell.payload,\n                    }\"\n                  ></ng-container>\n                </td>\n              }\n            </tr>\n          }\n        </tbody>\n      </table>\n    </div>\n  }\n  @if (!_tableConfigurations().rows.length) {\n    <h6 class=\"text-center mt-3\">\n      {{ noResultsText() | transloco }}\n    </h6>\n  }\n</div>\n\n<ng-template\n  #orderBtns\n  let-order\n>\n  <div\n    [class.sort-asc]=\"order.sort === SortTable.ASC\"\n    [class.sort-default]=\"order.sort === SortTable.DEFAULT\"\n    [class.sort-desc]=\"order.sort === SortTable.DESC\"\n    class=\"sort-arrows\"\n  >\n    <svg\n      class=\"arrow-up\"\n      fill=\"currentColor\"\n      height=\"10\"\n      stroke=\"currentColor\"\n      viewBox=\"279.5 -600.5 401 201\"\n      width=\"10\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <path\n        d=\"m280-400 200-200 200 200H280Z\"\n        fill=\"currentColor\"\n        stroke=\"currentColor\"\n      ></path>\n    </svg>\n    <svg\n      class=\"arrow-down\"\n      fill=\"currentColor\"\n      height=\"10\"\n      stroke=\"currentColor\"\n      viewBox=\"279.5 -560.5 401 201\"\n      width=\"10\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <path\n        d=\"M480-360 280-560h400L480-360Z\"\n        fill=\"currentColor\"\n        stroke=\"currentColor\"\n      ></path>\n    </svg>\n  </div>\n</ng-template>\n", styles: [":host{display:block;--table-header-container-top: 0;--table-header-bg: var(--bs-body-bg);--table-header-border-color: var(--bs-border-color);--table-header-border-width: 4px;--table-row-hover-brightness: 90%;--table-row-selected-brightness: 95%}.table-responsive{overflow:initial}.table-responsive .fake-table-header{height:0!important;overflow:hidden!important;line-height:0!important;visibility:collapse!important}.table-responsive .fake-table-header *{padding:0!important;margin:0!important;background-color:var(--table-header-bg);border:unset!important;height:0!important;overflow:hidden!important;line-height:0!important;visibility:collapse!important}.table-responsive .table-header-container{overflow-x:hidden;z-index:1}.table-responsive .table-container{overflow-x:auto}.table-responsive table{width:100%;font-size:16px;overflow-y:auto;margin-bottom:unset}.table-responsive table thead{text-transform:uppercase}.table-responsive table thead th{padding:1rem .5rem;z-index:999;background-color:var(--table-header-bg);box-shadow:inset 0 calc(var(--table-header-border-width) * -1) 0 0 var(--table-header-border-color)}.table-responsive table tbody tr:first-child td{border-top:0}.table-responsive table tbody tr.hover-table:hover{cursor:pointer;filter:brightness(var(--table-row-hover-brightness))}.table-responsive table tbody tr.selectedRow{filter:brightness(var(--table-row-selected-brightness))}.table-responsive table tbody tr td{padding:1rem .5rem;font-weight:300;vertical-align:middle}.table-responsive table tbody tr:last-child{border-bottom:transparent}.table-responsive.sticky-table{position:relative}.table-responsive.sticky-table .table-header-container{position:sticky;top:var(--table-header-container-top, 0)}.sort-arrows{display:flex;flex-direction:column;justify-content:center}.sort-default{opacity:30%}.sort-asc .arrow-up{opacity:100%}.sort-asc .arrow-down,.sort-desc .arrow-up{display:none}.sort-desc .arrow-down{opacity:100%}.sort-btn:hover{cursor:pointer}.mw-1ch{min-width:1ch}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: QuangTableComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: QuangTableComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'quang-table', imports: [TranslocoPipe, NgClass, NgTemplateOutlet, NgStyle], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  [class.sticky-table]=\"stickyTable()\"\n  class=\"table-responsive\"\n>\n  @if (_tableConfigurations().rows.length) {\n    <div\n      (scroll)=\"tableContainer.scrollLeft = tableHeaderContainer.scrollLeft\"\n      #tableHeaderContainer\n      class=\"table-header-container\"\n      id=\"tableHeaderContainer\"\n    >\n      <table\n        #tableHeader\n        id=\"tableHeader\"\n      >\n        <thead>\n          <tr>\n            @for (header of _tableConfigurations().headers; track $index) {\n              <th\n                [class.sort-btn]=\"header?.sort\"\n                (click)=\"header?.sort ? onSortColumn(header.sort!) : null\"\n                class=\"align-bottom\"\n              >\n                <div\n                  [ngClass]=\"header?.css\"\n                  class=\"align-self-end d-flex gap-1\"\n                >\n                  {{ !header.renderer ? (header.text | transloco) : null }}\n                  <ng-container\n                    [ngTemplateOutlet]=\"header?.renderer ?? null\"\n                    [ngTemplateOutletContext]=\"{\n                      $implicit: header.payload,\n                    }\"\n                  ></ng-container>\n                  @if (header.sort?.key) {\n                    <div class=\"d-flex justify-content-between\">\n                      <ng-container\n                        [ngTemplateOutlet]=\"orderBtns\"\n                        [ngTemplateOutletContext]=\"{ $implicit: header.sort }\"\n                      ></ng-container>\n                    </div>\n                  }\n                </div>\n              </th>\n            }\n          </tr>\n        </thead>\n      </table>\n    </div>\n    <div\n      (scroll)=\"tableHeaderContainer.scrollLeft = tableContainer.scrollLeft\"\n      #tableContainer\n      class=\"table-container\"\n    >\n      <table\n        class=\"table\"\n        id=\"table-content\"\n      >\n        <thead\n          #fakeTableHeader\n          class=\"fake-table-header\"\n          id=\"fakeTableHeader\"\n        >\n          <tr>\n            @for (header of _tableConfigurations().headers; track $index) {\n              <th\n                [class.sort-btn]=\"header?.sort\"\n                (click)=\"header?.sort ? onSortColumn(header.sort!) : null\"\n                class=\"align-bottom\"\n              >\n                <div\n                  [ngClass]=\"header?.css\"\n                  class=\"align-self-end d-flex gap-1\"\n                >\n                  {{ !header.renderer ? (header.text | transloco) : null }}\n                  <ng-container\n                    [ngTemplateOutlet]=\"header?.renderer ?? null\"\n                    [ngTemplateOutletContext]=\"{\n                      $implicit: header.payload,\n                    }\"\n                  ></ng-container>\n                  @if (header.sort?.key) {\n                    <div class=\"d-flex justify-content-between\">\n                      <ng-container\n                        [ngTemplateOutlet]=\"orderBtns\"\n                        [ngTemplateOutletContext]=\"{ $implicit: header.sort }\"\n                      ></ng-container>\n                    </div>\n                  }\n                </div>\n              </th>\n            }\n          </tr>\n        </thead>\n        <tbody>\n          @for (row of _tableConfigurations().rows; track $index) {\n            <tr\n              [class.hover-table]=\"clickableRow()\"\n              [class.selectedRow]=\"row?.rowId ? isSelected(row.rowId!) : null\"\n              [ngClass]=\"row.css\"\n              (click)=\"clickableRow() ? onClickRow(row) : null\"\n            >\n              @for (cell of row.cellData; track $index) {\n                <td\n                  [attr.colspan]=\"cell?.fullWidth ? _tableConfigurations().headers.length : undefined\"\n                  [attr.data-properties]=\"cell.properties ? convertToString(cell.properties) : undefined\"\n                  [ngClass]=\"cell.css\"\n                  [ngStyle]=\"cell.style\"\n                  #tdCell\n                >\n                  {{ !cell.renderer ? cell.text : null }}\n                  <ng-container\n                    [ngTemplateOutlet]=\"cell?.renderer ?? null\"\n                    [ngTemplateOutletContext]=\"{\n                      $implicit: cell.payload,\n                    }\"\n                  ></ng-container>\n                </td>\n              }\n            </tr>\n          }\n        </tbody>\n      </table>\n    </div>\n  }\n  @if (!_tableConfigurations().rows.length) {\n    <h6 class=\"text-center mt-3\">\n      {{ noResultsText() | transloco }}\n    </h6>\n  }\n</div>\n\n<ng-template\n  #orderBtns\n  let-order\n>\n  <div\n    [class.sort-asc]=\"order.sort === SortTable.ASC\"\n    [class.sort-default]=\"order.sort === SortTable.DEFAULT\"\n    [class.sort-desc]=\"order.sort === SortTable.DESC\"\n    class=\"sort-arrows\"\n  >\n    <svg\n      class=\"arrow-up\"\n      fill=\"currentColor\"\n      height=\"10\"\n      stroke=\"currentColor\"\n      viewBox=\"279.5 -600.5 401 201\"\n      width=\"10\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <path\n        d=\"m280-400 200-200 200 200H280Z\"\n        fill=\"currentColor\"\n        stroke=\"currentColor\"\n      ></path>\n    </svg>\n    <svg\n      class=\"arrow-down\"\n      fill=\"currentColor\"\n      height=\"10\"\n      stroke=\"currentColor\"\n      viewBox=\"279.5 -560.5 401 201\"\n      width=\"10\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <path\n        d=\"M480-360 280-560h400L480-360Z\"\n        fill=\"currentColor\"\n        stroke=\"currentColor\"\n      ></path>\n    </svg>\n  </div>\n</ng-template>\n", styles: [":host{display:block;--table-header-container-top: 0;--table-header-bg: var(--bs-body-bg);--table-header-border-color: var(--bs-border-color);--table-header-border-width: 4px;--table-row-hover-brightness: 90%;--table-row-selected-brightness: 95%}.table-responsive{overflow:initial}.table-responsive .fake-table-header{height:0!important;overflow:hidden!important;line-height:0!important;visibility:collapse!important}.table-responsive .fake-table-header *{padding:0!important;margin:0!important;background-color:var(--table-header-bg);border:unset!important;height:0!important;overflow:hidden!important;line-height:0!important;visibility:collapse!important}.table-responsive .table-header-container{overflow-x:hidden;z-index:1}.table-responsive .table-container{overflow-x:auto}.table-responsive table{width:100%;font-size:16px;overflow-y:auto;margin-bottom:unset}.table-responsive table thead{text-transform:uppercase}.table-responsive table thead th{padding:1rem .5rem;z-index:999;background-color:var(--table-header-bg);box-shadow:inset 0 calc(var(--table-header-border-width) * -1) 0 0 var(--table-header-border-color)}.table-responsive table tbody tr:first-child td{border-top:0}.table-responsive table tbody tr.hover-table:hover{cursor:pointer;filter:brightness(var(--table-row-hover-brightness))}.table-responsive table tbody tr.selectedRow{filter:brightness(var(--table-row-selected-brightness))}.table-responsive table tbody tr td{padding:1rem .5rem;font-weight:300;vertical-align:middle}.table-responsive table tbody tr:last-child{border-bottom:transparent}.table-responsive.sticky-table{position:relative}.table-responsive.sticky-table .table-header-container{position:sticky;top:var(--table-header-container-top, 0)}.sort-arrows{display:flex;flex-direction:column;justify-content:center}.sort-default{opacity:30%}.sort-asc .arrow-up{opacity:100%}.sort-asc .arrow-down,.sort-desc .arrow-up{display:none}.sort-desc .arrow-down{opacity:100%}.sort-btn:hover{cursor:pointer}\n"] }]
+            args: [{ selector: 'quang-table', imports: [TranslocoPipe, NgClass, NgTemplateOutlet, NgStyle], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  [class.sticky-table]=\"stickyTable()\"\n  class=\"table-responsive\"\n>\n  @if (_tableConfigurations().rows.length) {\n    <div\n      (scroll)=\"tableContainer.scrollLeft = tableHeaderContainer.scrollLeft\"\n      #tableHeaderContainer\n      class=\"table-header-container\"\n      id=\"tableHeaderContainer\"\n    >\n      <table\n        #tableHeader\n        id=\"tableHeader\"\n      >\n        <thead>\n          <tr>\n            @for (header of _tableConfigurations().headers; track $index) {\n              <th\n                [class.sort-btn]=\"header?.sort\"\n                (click)=\"header?.sort ? onSortColumn(header.sort!) : null\"\n                class=\"align-bottom\"\n              >\n                <div\n                  [ngClass]=\"header?.css\"\n                  class=\"align-self-end d-flex gap-1\"\n                >\n                  {{ !header.renderer ? (header.text | transloco) : null }}\n                  <ng-container\n                    [ngTemplateOutlet]=\"header?.renderer ?? null\"\n                    [ngTemplateOutletContext]=\"{\n                      $implicit: header.payload,\n                    }\"\n                  ></ng-container>\n                  @if (sortType() === SortType.MULTIPLE) {\n                    <div class=\"mw-1ch\">\n                      @if (header.sort && header.sort.order !== undefined) {\n                        <span>{{ header.sort.order + 1 }}</span>\n                      }\n                    </div>\n                  }\n                  @if (header.sort?.key) {\n                    <div class=\"d-flex justify-content-between\">\n                      <ng-container\n                        [ngTemplateOutlet]=\"orderBtns\"\n                        [ngTemplateOutletContext]=\"{ $implicit: header.sort }\"\n                      ></ng-container>\n                    </div>\n                  }\n                </div>\n              </th>\n            }\n          </tr>\n        </thead>\n      </table>\n    </div>\n    <div\n      (scroll)=\"tableHeaderContainer.scrollLeft = tableContainer.scrollLeft\"\n      #tableContainer\n      class=\"table-container\"\n    >\n      <table\n        class=\"table\"\n        id=\"table-content\"\n      >\n        <thead\n          #fakeTableHeader\n          class=\"fake-table-header\"\n          id=\"fakeTableHeader\"\n        >\n          <tr>\n            @for (header of _tableConfigurations().headers; track $index) {\n              <th\n                [class.sort-btn]=\"header?.sort\"\n                (click)=\"header?.sort ? onSortColumn(header.sort!) : null\"\n                class=\"align-bottom\"\n              >\n                <div\n                  [ngClass]=\"header?.css\"\n                  class=\"align-self-end d-flex gap-1\"\n                >\n                  {{ !header.renderer ? (header.text | transloco) : null }}\n                  <ng-container\n                    [ngTemplateOutlet]=\"header?.renderer ?? null\"\n                    [ngTemplateOutletContext]=\"{\n                      $implicit: header.payload,\n                    }\"\n                  ></ng-container>\n                  @if (sortType() === SortType.MULTIPLE) {\n                    <div class=\"mw-1ch\">\n                      @if (header.sort && header.sort.order !== undefined) {\n                        <span>{{ header.sort.order + 1 }}</span>\n                      }\n                    </div>\n                  }\n                  @if (header.sort?.key) {\n                    <div class=\"d-flex justify-content-between\">\n                      <ng-container\n                        [ngTemplateOutlet]=\"orderBtns\"\n                        [ngTemplateOutletContext]=\"{ $implicit: header.sort }\"\n                      ></ng-container>\n                    </div>\n                  }\n                </div>\n              </th>\n            }\n          </tr>\n        </thead>\n        <tbody>\n          @for (row of _tableConfigurations().rows; track row.rowId || $index) {\n            <tr\n              [class.hover-table]=\"clickableRow()\"\n              [class.selectedRow]=\"row.rowId ? isSelected(row.rowId) : null\"\n              [ngClass]=\"row.css\"\n              (click)=\"clickableRow() ? onClickRow(row) : null\"\n            >\n              @for (cell of row.cellData; track cell.cellId || $index) {\n                <td\n                  [attr.colspan]=\"cell?.fullWidth ? _tableConfigurations().headers.length : undefined\"\n                  [attr.data-properties]=\"cell.properties ? convertToString(cell.properties) : undefined\"\n                  [ngClass]=\"cell.css\"\n                  [ngStyle]=\"cell.style\"\n                  #tdCell\n                >\n                  {{ !cell.renderer ? cell.text : null }}\n                  <ng-container\n                    [ngTemplateOutlet]=\"cell?.renderer ?? null\"\n                    [ngTemplateOutletContext]=\"{\n                      $implicit: cell.payload,\n                    }\"\n                  ></ng-container>\n                </td>\n              }\n            </tr>\n          }\n        </tbody>\n      </table>\n    </div>\n  }\n  @if (!_tableConfigurations().rows.length) {\n    <h6 class=\"text-center mt-3\">\n      {{ noResultsText() | transloco }}\n    </h6>\n  }\n</div>\n\n<ng-template\n  #orderBtns\n  let-order\n>\n  <div\n    [class.sort-asc]=\"order.sort === SortTable.ASC\"\n    [class.sort-default]=\"order.sort === SortTable.DEFAULT\"\n    [class.sort-desc]=\"order.sort === SortTable.DESC\"\n    class=\"sort-arrows\"\n  >\n    <svg\n      class=\"arrow-up\"\n      fill=\"currentColor\"\n      height=\"10\"\n      stroke=\"currentColor\"\n      viewBox=\"279.5 -600.5 401 201\"\n      width=\"10\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <path\n        d=\"m280-400 200-200 200 200H280Z\"\n        fill=\"currentColor\"\n        stroke=\"currentColor\"\n      ></path>\n    </svg>\n    <svg\n      class=\"arrow-down\"\n      fill=\"currentColor\"\n      height=\"10\"\n      stroke=\"currentColor\"\n      viewBox=\"279.5 -560.5 401 201\"\n      width=\"10\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <path\n        d=\"M480-360 280-560h400L480-360Z\"\n        fill=\"currentColor\"\n        stroke=\"currentColor\"\n      ></path>\n    </svg>\n  </div>\n</ng-template>\n", styles: [":host{display:block;--table-header-container-top: 0;--table-header-bg: var(--bs-body-bg);--table-header-border-color: var(--bs-border-color);--table-header-border-width: 4px;--table-row-hover-brightness: 90%;--table-row-selected-brightness: 95%}.table-responsive{overflow:initial}.table-responsive .fake-table-header{height:0!important;overflow:hidden!important;line-height:0!important;visibility:collapse!important}.table-responsive .fake-table-header *{padding:0!important;margin:0!important;background-color:var(--table-header-bg);border:unset!important;height:0!important;overflow:hidden!important;line-height:0!important;visibility:collapse!important}.table-responsive .table-header-container{overflow-x:hidden;z-index:1}.table-responsive .table-container{overflow-x:auto}.table-responsive table{width:100%;font-size:16px;overflow-y:auto;margin-bottom:unset}.table-responsive table thead{text-transform:uppercase}.table-responsive table thead th{padding:1rem .5rem;z-index:999;background-color:var(--table-header-bg);box-shadow:inset 0 calc(var(--table-header-border-width) * -1) 0 0 var(--table-header-border-color)}.table-responsive table tbody tr:first-child td{border-top:0}.table-responsive table tbody tr.hover-table:hover{cursor:pointer;filter:brightness(var(--table-row-hover-brightness))}.table-responsive table tbody tr.selectedRow{filter:brightness(var(--table-row-selected-brightness))}.table-responsive table tbody tr td{padding:1rem .5rem;font-weight:300;vertical-align:middle}.table-responsive table tbody tr:last-child{border-bottom:transparent}.table-responsive.sticky-table{position:relative}.table-responsive.sticky-table .table-header-container{position:sticky;top:var(--table-header-container-top, 0)}.sort-arrows{display:flex;flex-direction:column;justify-content:center}.sort-default{opacity:30%}.sort-asc .arrow-up{opacity:100%}.sort-asc .arrow-down,.sort-desc .arrow-up{display:none}.sort-desc .arrow-down{opacity:100%}.sort-btn:hover{cursor:pointer}.mw-1ch{min-width:1ch}\n"] }]
         }] });
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { QuangTableComponent, SortTable };
+export { QuangTableComponent, SortTable, SortType };
 //# sourceMappingURL=quang-components-table.mjs.map

package/fesm2022/quang-components-table.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"quang-components-table.mjs","sources":["../../../projects/quang/components/table/table.component.ts","../../../projects/quang/components/table/table.component.html","../../../projects/quang/components/table/quang-components-table.ts"],"sourcesContent":["import { NgClass, NgStyle, NgTemplateOutlet } from '@angular/common'\nimport {\n  ChangeDetectionStrategy,\n  Component,\n  DestroyRef,\n  ElementRef,\n  TemplateRef,\n  effect,\n  inject,\n  input,\n  output,\n  signal,\n  viewChild,\n  viewChildren,\n} from '@angular/core'\nimport { takeUntilDestroyed, toObservable } from '@angular/core/rxjs-interop'\n\nimport { TranslocoPipe } from '@jsverse/transloco'\nimport { ResizeObservableService } from 'quang/device'\nimport { Subscription } from 'rxjs'\n\nexport interface TableHeader {\n  text?: string\n  sort?: SortCol\n  css?: string[]\n  renderer?: TemplateRef<any>\n  payload?: any\n}\n\nexport interface TableConfiguration<T> {\n  headers: TableHeader[]\n  rows: TableRow<T>[]\n}\n\nexport interface TableCell {\n  renderer?: TemplateRef<any>\n  payload?: any\n  text?: string\n  css?: string[]\n  fullWidth?: boolean\n  style?: Record<string, string>\n  properties?: Record<string, any>\n}\n\nexport interface TableRow<T> {\n  payload?: T\n  rowId?: string | number\n  css?: string[]\n  cellData: TableCell[]\n}\n\nexport enum SortTable {\n  DEFAULT = 'DEFAULT',\n  ASC = 'ASC',\n  DESC = 'DESC',\n}\n\nexport interface SortCol {\n  key: string\n  sort: SortTable\n}\n\n@Component({\n  selector: 'quang-table',\n  templateUrl: './table.component.html',\n  styleUrl: './table.component.scss',\n  imports: [TranslocoPipe, NgClass, NgTemplateOutlet, NgStyle],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\n/**\n * Table component for displaying data in a tabular format.\n *\n * It supports customizable column cells template and sorting rows by column headers.\n *\n * @usageNotes\n * The component must be configured using the {@link TableConfiguration} object\n */\nexport class QuangTableComponent<T> {\n  clickableRow = input<boolean>(false)\n\n  selectedRows = input<string[] | number[]>()\n\n  stickyTable = input<boolean>(true)\n\n  selectedRow = output<TableRow<T>>()\n\n  sortChanged = output<SortCol[]>()\n\n  public SortTable = SortTable\n\n  destroyRef = inject(DestroyRef)\n\n  _resizeObservableService = inject(ResizeObservableService)\n\n  _tableHeader = viewChild<ElementRef>('tableHeader')\n\n  _tableHeaderElement = viewChild<Element>('tableHeader')\n\n  noResultsText = input<string>('quangTable.noResults')\n\n  tdWithProperties = viewChildren('tdCell', { read: ElementRef })\n\n  _tdWithPropertiesEffect = effect(() => {\n    for (const tdWithProperty of this.tdWithProperties()) {\n      const properties = tdWithProperty.nativeElement.getAttribute('data-properties')\n      if (properties) {\n        const propertiesObj = JSON.parse(properties)\n        for (const key of Object.keys(propertiesObj)) {\n          console.log('key', key, propertiesObj[key])\n          tdWithProperty.nativeElement[key] = propertiesObj[key]\n        }\n      }\n    }\n  })\n\n  _tableHeaderEffect = effect(() => {\n    if (this._tableHeader()) {\n      this.fixTableHeaderWidth()\n    }\n  })\n\n  _tableHeaderElementEffect = effect(() => {\n    if (this._tableHeaderElement()) {\n      this.fixTableHeaderWidth()\n    }\n  })\n\n  _fakeTableHeader = viewChild<ElementRef>('fakeTableHeader')\n\n  _fakeTableHeaderEffect = effect(() => {\n    if (this._fakeTableHeader()) {\n      this.fixTableHeaderWidth()\n    }\n  })\n\n  tableConfigurations = input.required<TableConfiguration<T>>()\n\n  _tableConfigurations = signal<TableConfiguration<T>>({\n    headers: [],\n    rows: [],\n  })\n\n  tableConfigurations$ = toObservable(this.tableConfigurations)\n    .pipe(takeUntilDestroyed())\n    .subscribe((data) => {\n      const headers: TableHeader[] = []\n      const rows: TableRow<T>[] = []\n      for (const header of data.headers) {\n        headers.push({ ...header })\n      }\n      for (const row of data.rows) {\n        rows.push({ ...row })\n      }\n      this._tableConfigurations.set({\n        headers,\n        rows,\n      })\n    })\n\n  effectTableConfigurations = effect(() => {\n    if (this._tableConfigurations()) {\n      this.fixTableHeaderWidth()\n    }\n  })\n\n  hiddenColumnsObservable?: Subscription = undefined\n\n  onClickRow(row: TableRow<T>): void {\n    if (this.clickableRow()) {\n      this.selectedRow.emit(row)\n    }\n  }\n\n  isSelected(rowId: string | number): boolean {\n    return !!this.selectedRows()?.some((x) => x === rowId)\n  }\n\n  lastWidth = -1\n\n  fixTableHeaderWidth() {\n    setTimeout(() => {\n      const stickyColumns = this._tableHeader()?.nativeElement?.querySelectorAll('th')\n\n      // Copy the column widths from our hidden Primary table header to our Sticky Table header.\n      const hiddenColumns = this._fakeTableHeader()?.nativeElement?.querySelectorAll('th')\n\n      if (stickyColumns?.length > 0 && hiddenColumns?.length > 0) {\n        if (this.hiddenColumnsObservable) {\n          this.hiddenColumnsObservable.unsubscribe()\n        }\n        this.hiddenColumnsObservable = this._resizeObservableService\n          .widthResizeObservable(hiddenColumns[0])\n          .pipe(takeUntilDestroyed(this.destroyRef))\n          .subscribe((data) => {\n            if (data !== this.lastWidth) {\n              this.lastWidth = data\n              this.fixTableHeaderWidth()\n            }\n          })\n        for (let i = 0; i < hiddenColumns?.length; i++) {\n          const th = hiddenColumns[i]\n          // Since the Sticky Table header is expected to be an exact copy of the Primary Table, we know their indices will be the same.\n          stickyColumns[i].style.minWidth = `${th.offsetWidth}px`\n          stickyColumns[i].style.maxWidth = `${th.offsetWidth}px`\n        }\n      }\n    })\n  }\n\n  onSortColumn(sort: SortCol): void {\n    const tableHeaders: TableHeader[] = []\n    for (const header of this._tableConfigurations().headers) {\n      tableHeaders.push({\n        ...header,\n      })\n    }\n    tableHeaders.forEach((header) => {\n      if (!header.sort?.key) return\n\n      if (header.sort?.key === sort.key) {\n        switch (sort.sort) {\n          case SortTable.ASC:\n            header.sort.sort = SortTable.DESC\n            break\n          case SortTable.DESC:\n            header.sort.sort = SortTable.DEFAULT\n            break\n          case SortTable.DEFAULT:\n          default:\n            header.sort.sort = SortTable.ASC\n            break\n        }\n      } else {\n        header.sort = {\n          ...header.sort,\n          sort: SortTable.DEFAULT,\n        }\n      }\n    })\n    this._tableConfigurations.set({ ...this._tableConfigurations(), headers: tableHeaders })\n    this.sortChanged.emit([sort]) // it's an array to handle multisort in the future\n  }\n\n  convertToString(value?: any): string | undefined {\n    if (value === null) return undefined\n    return JSON.stringify(value)\n  }\n}\n","<div\n  [class.sticky-table]=\"stickyTable()\"\n  class=\"table-responsive\"\n>\n  @if (_tableConfigurations().rows.length) {\n    <div\n      (scroll)=\"tableContainer.scrollLeft = tableHeaderContainer.scrollLeft\"\n      #tableHeaderContainer\n      class=\"table-header-container\"\n      id=\"tableHeaderContainer\"\n    >\n      <table\n        #tableHeader\n        id=\"tableHeader\"\n      >\n        <thead>\n          <tr>\n            @for (header of _tableConfigurations().headers; track $index) {\n              <th\n                [class.sort-btn]=\"header?.sort\"\n                (click)=\"header?.sort ? onSortColumn(header.sort!) : null\"\n                class=\"align-bottom\"\n              >\n                <div\n                  [ngClass]=\"header?.css\"\n                  class=\"align-self-end d-flex gap-1\"\n                >\n                  {{ !header.renderer ? (header.text | transloco) : null }}\n                  <ng-container\n                    [ngTemplateOutlet]=\"header?.renderer ?? null\"\n                    [ngTemplateOutletContext]=\"{\n                      $implicit: header.payload,\n                    }\"\n                  ></ng-container>\n                  @if (header.sort?.key) {\n                    <div class=\"d-flex justify-content-between\">\n                      <ng-container\n                        [ngTemplateOutlet]=\"orderBtns\"\n                        [ngTemplateOutletContext]=\"{ $implicit: header.sort }\"\n                      ></ng-container>\n                    </div>\n                  }\n                </div>\n              </th>\n            }\n          </tr>\n        </thead>\n      </table>\n    </div>\n    <div\n      (scroll)=\"tableHeaderContainer.scrollLeft = tableContainer.scrollLeft\"\n      #tableContainer\n      class=\"table-container\"\n    >\n      <table\n        class=\"table\"\n        id=\"table-content\"\n      >\n        <thead\n          #fakeTableHeader\n          class=\"fake-table-header\"\n          id=\"fakeTableHeader\"\n        >\n          <tr>\n            @for (header of _tableConfigurations().headers; track $index) {\n              <th\n                [class.sort-btn]=\"header?.sort\"\n                (click)=\"header?.sort ? onSortColumn(header.sort!) : null\"\n                class=\"align-bottom\"\n              >\n                <div\n                  [ngClass]=\"header?.css\"\n                  class=\"align-self-end d-flex gap-1\"\n                >\n                  {{ !header.renderer ? (header.text | transloco) : null }}\n                  <ng-container\n                    [ngTemplateOutlet]=\"header?.renderer ?? null\"\n                    [ngTemplateOutletContext]=\"{\n                      $implicit: header.payload,\n                    }\"\n                  ></ng-container>\n                  @if (header.sort?.key) {\n                    <div class=\"d-flex justify-content-between\">\n                      <ng-container\n                        [ngTemplateOutlet]=\"orderBtns\"\n                        [ngTemplateOutletContext]=\"{ $implicit: header.sort }\"\n                      ></ng-container>\n                    </div>\n                  }\n                </div>\n              </th>\n            }\n          </tr>\n        </thead>\n        <tbody>\n          @for (row of _tableConfigurations().rows; track $index) {\n            <tr\n              [class.hover-table]=\"clickableRow()\"\n              [class.selectedRow]=\"row?.rowId ? isSelected(row.rowId!) : null\"\n              [ngClass]=\"row.css\"\n              (click)=\"clickableRow() ? onClickRow(row) : null\"\n            >\n              @for (cell of row.cellData; track $index) {\n                <td\n                  [attr.colspan]=\"cell?.fullWidth ? _tableConfigurations().headers.length : undefined\"\n                  [attr.data-properties]=\"cell.properties ? convertToString(cell.properties) : undefined\"\n                  [ngClass]=\"cell.css\"\n                  [ngStyle]=\"cell.style\"\n                  #tdCell\n                >\n                  {{ !cell.renderer ? cell.text : null }}\n                  <ng-container\n                    [ngTemplateOutlet]=\"cell?.renderer ?? null\"\n                    [ngTemplateOutletContext]=\"{\n                      $implicit: cell.payload,\n                    }\"\n                  ></ng-container>\n                </td>\n              }\n            </tr>\n          }\n        </tbody>\n      </table>\n    </div>\n  }\n  @if (!_tableConfigurations().rows.length) {\n    <h6 class=\"text-center mt-3\">\n      {{ noResultsText() | transloco }}\n    </h6>\n  }\n</div>\n\n<ng-template\n  #orderBtns\n  let-order\n>\n  <div\n    [class.sort-asc]=\"order.sort === SortTable.ASC\"\n    [class.sort-default]=\"order.sort === SortTable.DEFAULT\"\n    [class.sort-desc]=\"order.sort === SortTable.DESC\"\n    class=\"sort-arrows\"\n  >\n    <svg\n      class=\"arrow-up\"\n      fill=\"currentColor\"\n      height=\"10\"\n      stroke=\"currentColor\"\n      viewBox=\"279.5 -600.5 401 201\"\n      width=\"10\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <path\n        d=\"m280-400 200-200 200 200H280Z\"\n        fill=\"currentColor\"\n        stroke=\"currentColor\"\n      ></path>\n    </svg>\n    <svg\n      class=\"arrow-down\"\n      fill=\"currentColor\"\n      height=\"10\"\n      stroke=\"currentColor\"\n      viewBox=\"279.5 -560.5 401 201\"\n      width=\"10\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <path\n        d=\"M480-360 280-560h400L480-360Z\"\n        fill=\"currentColor\"\n        stroke=\"currentColor\"\n      ></path>\n    </svg>\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":"quang-components-table.mjs","sources":["../../../projects/quang/components/table/table.component.ts","../../../projects/quang/components/table/table.component.html","../../../projects/quang/components/table/quang-components-table.ts"],"sourcesContent":["import { NgClass, NgStyle, NgTemplateOutlet } from '@angular/common'\nimport {\n  ChangeDetectionStrategy,\n  Component,\n  DestroyRef,\n  ElementRef,\n  TemplateRef,\n  effect,\n  inject,\n  input,\n  output,\n  signal,\n  viewChild,\n  viewChildren,\n} from '@angular/core'\nimport { takeUntilDestroyed, toObservable } from '@angular/core/rxjs-interop'\n\nimport { TranslocoPipe } from '@jsverse/transloco'\nimport { ResizeObservableService } from 'quang/device'\nimport { Subscription } from 'rxjs'\n\nexport interface TableHeader {\n  text?: string\n  sort?: SortCol\n  css?: string[]\n  renderer?: TemplateRef<any>\n  payload?: any\n}\n\nexport interface TableConfiguration<T> {\n  headers: TableHeader[]\n  rows: TableRow<T>[]\n}\n\nexport interface TableCell {\n  renderer?: TemplateRef<any>\n  payload?: any\n  text?: string\n  css?: string[]\n  fullWidth?: boolean\n  style?: Record<string, string>\n  properties?: Record<string, any>\n  cellId?: string | number\n}\n\nexport interface TableRow<T> {\n  payload?: T\n  rowId?: string | number\n  css?: string[]\n  cellData: TableCell[]\n}\n\nexport enum SortTable {\n  DEFAULT = 'DEFAULT',\n  ASC = 'ASC',\n  DESC = 'DESC',\n}\n\nexport enum SortType {\n  SINGLE = 'SINGLE',\n  MULTIPLE = 'MULTIPLE',\n}\n\nexport interface SortCol {\n  key: string\n  sort: SortTable\n  order?: number\n}\n\n@Component({\n  selector: 'quang-table',\n  templateUrl: './table.component.html',\n  styleUrl: './table.component.scss',\n  imports: [TranslocoPipe, NgClass, NgTemplateOutlet, NgStyle],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\n/**\n * Table component for displaying data in a tabular format.\n *\n * It supports customizable column cells template and sorting rows by column headers.\n *\n * @usageNotes\n * The component must be configured using the {@link TableConfiguration} object\n */\nexport class QuangTableComponent<T> {\n  clickableRow = input<boolean>(false)\n\n  selectedRows = input<string[] | number[]>()\n\n  stickyTable = input<boolean>(true)\n\n  sortType = input<SortType>(SortType.SINGLE)\n\n  selectedRow = output<TableRow<T>>()\n\n  sortChanged = output<SortCol[]>()\n\n  public SortTable = SortTable\n\n  destroyRef = inject(DestroyRef)\n\n  _resizeObservableService = inject(ResizeObservableService)\n\n  _tableHeader = viewChild<ElementRef>('tableHeader')\n\n  _tableHeaderElement = viewChild<Element>('tableHeader')\n\n  noResultsText = input<string>('quangTable.noResults')\n\n  tdWithProperties = viewChildren('tdCell', { read: ElementRef })\n\n  _tdWithPropertiesEffect = effect(() => {\n    for (const tdWithProperty of this.tdWithProperties()) {\n      const properties = tdWithProperty.nativeElement.getAttribute('data-properties')\n      if (properties) {\n        const propertiesObj = JSON.parse(properties)\n        for (const key of Object.keys(propertiesObj)) {\n          console.log('key', key, propertiesObj[key])\n          tdWithProperty.nativeElement[key] = propertiesObj[key]\n        }\n      }\n    }\n  })\n\n  _tableHeaderEffect = effect(() => {\n    if (this._tableHeader()) {\n      this.fixTableHeaderWidth()\n    }\n  })\n\n  _tableHeaderElementEffect = effect(() => {\n    if (this._tableHeaderElement()) {\n      this.fixTableHeaderWidth()\n    }\n  })\n\n  _fakeTableHeader = viewChild<ElementRef>('fakeTableHeader')\n\n  _fakeTableHeaderEffect = effect(() => {\n    if (this._fakeTableHeader()) {\n      this.fixTableHeaderWidth()\n    }\n  })\n\n  tableConfigurations = input.required<TableConfiguration<T>>()\n\n  _tableConfigurations = signal<TableConfiguration<T>>({\n    headers: [],\n    rows: [],\n  })\n\n  tableConfigurations$ = toObservable(this.tableConfigurations)\n    .pipe(takeUntilDestroyed())\n    .subscribe((data) => {\n      const headers: TableHeader[] = []\n      const rows: TableRow<T>[] = []\n      for (const header of data.headers) {\n        headers.push({ ...header })\n      }\n      for (const row of data.rows) {\n        rows.push({ ...row })\n      }\n      this._tableConfigurations.set({\n        headers,\n        rows,\n      })\n    })\n\n  effectTableConfigurations = effect(() => {\n    if (this._tableConfigurations()) {\n      this.fixTableHeaderWidth()\n    }\n  })\n\n  hiddenColumnsObservable?: Subscription = undefined\n\n  onClickRow(row: TableRow<T>): void {\n    if (this.clickableRow()) {\n      this.selectedRow.emit(row)\n    }\n  }\n\n  isSelected(rowId: string | number): boolean {\n    return !!this.selectedRows()?.some((x) => x === rowId)\n  }\n\n  lastWidth = -1\n\n  fixTableHeaderWidth() {\n    setTimeout(() => {\n      const stickyColumns = this._tableHeader()?.nativeElement?.querySelectorAll('th')\n\n      // Copy the column widths from our hidden Primary table header to our Sticky Table header.\n      const hiddenColumns = this._fakeTableHeader()?.nativeElement?.querySelectorAll('th')\n\n      if (stickyColumns?.length > 0 && hiddenColumns?.length > 0) {\n        if (this.hiddenColumnsObservable) {\n          this.hiddenColumnsObservable.unsubscribe()\n        }\n        this.hiddenColumnsObservable = this._resizeObservableService\n          .widthResizeObservable(hiddenColumns[0])\n          .pipe(takeUntilDestroyed(this.destroyRef))\n          .subscribe((data) => {\n            if (data !== this.lastWidth) {\n              this.lastWidth = data\n              this.fixTableHeaderWidth()\n            }\n          })\n        for (let i = 0; i < hiddenColumns?.length; i++) {\n          const th = hiddenColumns[i]\n          // Since the Sticky Table header is expected to be an exact copy of the Primary Table, we know their indices will be the same.\n          stickyColumns[i].style.minWidth = `${th.offsetWidth}px`\n          stickyColumns[i].style.maxWidth = `${th.offsetWidth}px`\n        }\n      }\n    })\n  }\n\n  onSortColumn(sort: SortCol): void {\n    // Create a deep copy of headers to avoid direct mutation of the signal's state.\n    const tableHeaders: TableHeader[] = this._tableConfigurations().headers.map((h) => ({\n      ...h,\n      sort: h.sort ? { ...h.sort } : undefined,\n    }))\n\n    if (this.sortType() === SortType.SINGLE) {\n      let newSortToEmit: SortCol | undefined\n\n      tableHeaders.forEach((header) => {\n        if (!header.sort) return\n\n        if (header.sort.key === sort.key) {\n          switch (sort.sort) {\n            case SortTable.ASC:\n              header.sort.sort = SortTable.DESC\n              break\n            case SortTable.DESC:\n              header.sort.sort = SortTable.DEFAULT\n              break\n            case SortTable.DEFAULT:\n            default:\n              header.sort.sort = SortTable.ASC\n              break\n          }\n          header.sort.order = 0\n          if (header.sort.sort !== SortTable.DEFAULT) {\n            newSortToEmit = header.sort\n          }\n        } else {\n          header.sort.sort = SortTable.DEFAULT\n          header.sort.order = undefined\n        }\n      })\n\n      this._tableConfigurations.set({ ...this._tableConfigurations(), headers: tableHeaders })\n      this.sortChanged.emit(newSortToEmit ? [newSortToEmit] : [])\n    } else {\n      // 1. Find the clicked header and update its sort status\n      const targetHeader = tableHeaders.find((h) => h.sort?.key === sort.key)\n      if (targetHeader?.sort) {\n        switch (targetHeader.sort.sort) {\n          case SortTable.ASC:\n            targetHeader.sort.sort = SortTable.DESC\n            break\n          case SortTable.DESC:\n            targetHeader.sort.sort = SortTable.DEFAULT\n            break\n          case SortTable.DEFAULT:\n          default:\n            targetHeader.sort.sort = SortTable.ASC\n            break\n        }\n      }\n\n      // 2. Collect all currently active sort columns (not DEFAULT)\n      const activeSorts = tableHeaders\n        .filter((h) => h.sort && h.sort.sort !== SortTable.DEFAULT)\n        .map((h) => h.sort as SortCol)\n\n      activeSorts.sort((a, b) => (a.order ?? 0) - (b.order ?? 0))\n\n      // 3. If the clicked column was already in the list, remove it to re-add it at the end.\n      // This makes the last clicked column the highest priority in the sort order.\n      const existingIndex = activeSorts.findIndex((s) => s.key === sort.key)\n      if (existingIndex > -1) {\n        activeSorts.splice(existingIndex, 1)\n      }\n\n      const clickedSortObject = targetHeader?.sort\n      // 4. If the new state is not DEFAULT, add it to the end of the list.\n      if (clickedSortObject && clickedSortObject.sort !== SortTable.DEFAULT) {\n        activeSorts.push(clickedSortObject)\n      }\n\n      // 5. Re-assign the 'order' property based on the new sequence.\n      activeSorts.forEach((sort, index) => {\n        sort.order = index\n      })\n\n      // 6. Clean up the 'order' for any headers that are no longer sorted.\n      const activeSortKeys = new Set(activeSorts.map((s) => s.key))\n      tableHeaders.forEach((header) => {\n        if (header.sort && !activeSortKeys.has(header.sort.key)) {\n          header.sort.order = undefined\n        }\n      })\n\n      this._tableConfigurations.set({ ...this._tableConfigurations(), headers: tableHeaders })\n      this.sortChanged.emit(activeSorts)\n    }\n  }\n\n  convertToString(value?: any): string | undefined {\n    if (value === null) return undefined\n    return JSON.stringify(value)\n  }\n\n  protected readonly SortType = SortType\n}\n","<div\n  [class.sticky-table]=\"stickyTable()\"\n  class=\"table-responsive\"\n>\n  @if (_tableConfigurations().rows.length) {\n    <div\n      (scroll)=\"tableContainer.scrollLeft = tableHeaderContainer.scrollLeft\"\n      #tableHeaderContainer\n      class=\"table-header-container\"\n      id=\"tableHeaderContainer\"\n    >\n      <table\n        #tableHeader\n        id=\"tableHeader\"\n      >\n        <thead>\n          <tr>\n            @for (header of _tableConfigurations().headers; track $index) {\n              <th\n                [class.sort-btn]=\"header?.sort\"\n                (click)=\"header?.sort ? onSortColumn(header.sort!) : null\"\n                class=\"align-bottom\"\n              >\n                <div\n                  [ngClass]=\"header?.css\"\n                  class=\"align-self-end d-flex gap-1\"\n                >\n                  {{ !header.renderer ? (header.text | transloco) : null }}\n                  <ng-container\n                    [ngTemplateOutlet]=\"header?.renderer ?? null\"\n                    [ngTemplateOutletContext]=\"{\n                      $implicit: header.payload,\n                    }\"\n                  ></ng-container>\n                  @if (sortType() === SortType.MULTIPLE) {\n                    <div class=\"mw-1ch\">\n                      @if (header.sort && header.sort.order !== undefined) {\n                        <span>{{ header.sort.order + 1 }}</span>\n                      }\n                    </div>\n                  }\n                  @if (header.sort?.key) {\n                    <div class=\"d-flex justify-content-between\">\n                      <ng-container\n                        [ngTemplateOutlet]=\"orderBtns\"\n                        [ngTemplateOutletContext]=\"{ $implicit: header.sort }\"\n                      ></ng-container>\n                    </div>\n                  }\n                </div>\n              </th>\n            }\n          </tr>\n        </thead>\n      </table>\n    </div>\n    <div\n      (scroll)=\"tableHeaderContainer.scrollLeft = tableContainer.scrollLeft\"\n      #tableContainer\n      class=\"table-container\"\n    >\n      <table\n        class=\"table\"\n        id=\"table-content\"\n      >\n        <thead\n          #fakeTableHeader\n          class=\"fake-table-header\"\n          id=\"fakeTableHeader\"\n        >\n          <tr>\n            @for (header of _tableConfigurations().headers; track $index) {\n              <th\n                [class.sort-btn]=\"header?.sort\"\n                (click)=\"header?.sort ? onSortColumn(header.sort!) : null\"\n                class=\"align-bottom\"\n              >\n                <div\n                  [ngClass]=\"header?.css\"\n                  class=\"align-self-end d-flex gap-1\"\n                >\n                  {{ !header.renderer ? (header.text | transloco) : null }}\n                  <ng-container\n                    [ngTemplateOutlet]=\"header?.renderer ?? null\"\n                    [ngTemplateOutletContext]=\"{\n                      $implicit: header.payload,\n                    }\"\n                  ></ng-container>\n                  @if (sortType() === SortType.MULTIPLE) {\n                    <div class=\"mw-1ch\">\n                      @if (header.sort && header.sort.order !== undefined) {\n                        <span>{{ header.sort.order + 1 }}</span>\n                      }\n                    </div>\n                  }\n                  @if (header.sort?.key) {\n                    <div class=\"d-flex justify-content-between\">\n                      <ng-container\n                        [ngTemplateOutlet]=\"orderBtns\"\n                        [ngTemplateOutletContext]=\"{ $implicit: header.sort }\"\n                      ></ng-container>\n                    </div>\n                  }\n                </div>\n              </th>\n            }\n          </tr>\n        </thead>\n        <tbody>\n          @for (row of _tableConfigurations().rows; track row.rowId || $index) {\n            <tr\n              [class.hover-table]=\"clickableRow()\"\n              [class.selectedRow]=\"row.rowId ? isSelected(row.rowId) : null\"\n              [ngClass]=\"row.css\"\n              (click)=\"clickableRow() ? onClickRow(row) : null\"\n            >\n              @for (cell of row.cellData; track cell.cellId || $index) {\n                <td\n                  [attr.colspan]=\"cell?.fullWidth ? _tableConfigurations().headers.length : undefined\"\n                  [attr.data-properties]=\"cell.properties ? convertToString(cell.properties) : undefined\"\n                  [ngClass]=\"cell.css\"\n                  [ngStyle]=\"cell.style\"\n                  #tdCell\n                >\n                  {{ !cell.renderer ? cell.text : null }}\n                  <ng-container\n                    [ngTemplateOutlet]=\"cell?.renderer ?? null\"\n                    [ngTemplateOutletContext]=\"{\n                      $implicit: cell.payload,\n                    }\"\n                  ></ng-container>\n                </td>\n              }\n            </tr>\n          }\n        </tbody>\n      </table>\n    </div>\n  }\n  @if (!_tableConfigurations().rows.length) {\n    <h6 class=\"text-center mt-3\">\n      {{ noResultsText() | transloco }}\n    </h6>\n  }\n</div>\n\n<ng-template\n  #orderBtns\n  let-order\n>\n  <div\n    [class.sort-asc]=\"order.sort === SortTable.ASC\"\n    [class.sort-default]=\"order.sort === SortTable.DEFAULT\"\n    [class.sort-desc]=\"order.sort === SortTable.DESC\"\n    class=\"sort-arrows\"\n  >\n    <svg\n      class=\"arrow-up\"\n      fill=\"currentColor\"\n      height=\"10\"\n      stroke=\"currentColor\"\n      viewBox=\"279.5 -600.5 401 201\"\n      width=\"10\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <path\n        d=\"m280-400 200-200 200 200H280Z\"\n        fill=\"currentColor\"\n        stroke=\"currentColor\"\n      ></path>\n    </svg>\n    <svg\n      class=\"arrow-down\"\n      fill=\"currentColor\"\n      height=\"10\"\n      stroke=\"currentColor\"\n      viewBox=\"279.5 -560.5 401 201\"\n      width=\"10\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <path\n        d=\"M480-360 280-560h400L480-360Z\"\n        fill=\"currentColor\"\n        stroke=\"currentColor\"\n      ></path>\n    </svg>\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/quang-components-wysiwyg.mjs

@@ -202,8 +202,8 @@ class QuangWysiwygComponent extends QuangBaseComponent {
         }
         return buttonList;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: QuangWysiwygComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.1", type: QuangWysiwygComponent, isStandalone: true, selector: "quang-wysiwyg", inputs: { minHeight: { classPropertyName: "minHeight", publicName: "minHeight", isSignal: true, isRequired: false, transformFunction: null }, font: { classPropertyName: "font", publicName: "font", isSignal: true, isRequired: false, transformFunction: null }, fontSize: { classPropertyName: "fontSize", publicName: "fontSize", isSignal: true, isRequired: false, transformFunction: null }, formatBlock: { classPropertyName: "formatBlock", publicName: "formatBlock", isSignal: true, isRequired: false, transformFunction: null }, paragraphStyle: { classPropertyName: "paragraphStyle", publicName: "paragraphStyle", isSignal: true, isRequired: false, transformFunction: null }, blockquote: { classPropertyName: "blockquote", publicName: "blockquote", isSignal: true, isRequired: false, transformFunction: null }, bold: { classPropertyName: "bold", publicName: "bold", isSignal: true, isRequired: false, transformFunction: null }, underline: { classPropertyName: "underline", publicName: "underline", isSignal: true, isRequired: false, transformFunction: null }, italic: { classPropertyName: "italic", publicName: "italic", isSignal: true, isRequired: false, transformFunction: null }, strike: { classPropertyName: "strike", publicName: "strike", isSignal: true, isRequired: false, transformFunction: null }, fontColor: { classPropertyName: "fontColor", publicName: "fontColor", isSignal: true, isRequired: false, transformFunction: null }, highlightColor: { classPropertyName: "highlightColor", publicName: "highlightColor", isSignal: true, isRequired: false, transformFunction: null }, textStyle: { classPropertyName: "textStyle", publicName: "textStyle", isSignal: true, isRequired: false, transformFunction: null }, removeFormat: { classPropertyName: "removeFormat", publicName: "removeFormat", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, list: { classPropertyName: "list", publicName: "list", isSignal: true, isRequired: false, transformFunction: null }, table: { classPropertyName: "table", publicName: "table", isSignal: true, isRequired: false, transformFunction: null }, link: { classPropertyName: "link", publicName: "link", isSignal: true, isRequired: false, transformFunction: null }, image: { classPropertyName: "image", publicName: "image", isSignal: true, isRequired: false, transformFunction: null }, fullScreen: { classPropertyName: "fullScreen", publicName: "fullScreen", isSignal: true, isRequired: false, transformFunction: null }, showBlocks: { classPropertyName: "showBlocks", publicName: "showBlocks", isSignal: true, isRequired: false, transformFunction: null }, onImageUploadError: { classPropertyName: "onImageUploadError", publicName: "onImageUploadError", isSignal: true, isRequired: false, transformFunction: null }, onFileDrop: { classPropertyName: "onFileDrop", publicName: "onFileDrop", isSignal: true, isRequired: false, transformFunction: null }, wysiwygOptions: { classPropertyName: "wysiwygOptions", publicName: "wysiwygOptions", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: QuangWysiwygComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.3", type: QuangWysiwygComponent, isStandalone: true, selector: "quang-wysiwyg", inputs: { minHeight: { classPropertyName: "minHeight", publicName: "minHeight", isSignal: true, isRequired: false, transformFunction: null }, font: { classPropertyName: "font", publicName: "font", isSignal: true, isRequired: false, transformFunction: null }, fontSize: { classPropertyName: "fontSize", publicName: "fontSize", isSignal: true, isRequired: false, transformFunction: null }, formatBlock: { classPropertyName: "formatBlock", publicName: "formatBlock", isSignal: true, isRequired: false, transformFunction: null }, paragraphStyle: { classPropertyName: "paragraphStyle", publicName: "paragraphStyle", isSignal: true, isRequired: false, transformFunction: null }, blockquote: { classPropertyName: "blockquote", publicName: "blockquote", isSignal: true, isRequired: false, transformFunction: null }, bold: { classPropertyName: "bold", publicName: "bold", isSignal: true, isRequired: false, transformFunction: null }, underline: { classPropertyName: "underline", publicName: "underline", isSignal: true, isRequired: false, transformFunction: null }, italic: { classPropertyName: "italic", publicName: "italic", isSignal: true, isRequired: false, transformFunction: null }, strike: { classPropertyName: "strike", publicName: "strike", isSignal: true, isRequired: false, transformFunction: null }, fontColor: { classPropertyName: "fontColor", publicName: "fontColor", isSignal: true, isRequired: false, transformFunction: null }, highlightColor: { classPropertyName: "highlightColor", publicName: "highlightColor", isSignal: true, isRequired: false, transformFunction: null }, textStyle: { classPropertyName: "textStyle", publicName: "textStyle", isSignal: true, isRequired: false, transformFunction: null }, removeFormat: { classPropertyName: "removeFormat", publicName: "removeFormat", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, list: { classPropertyName: "list", publicName: "list", isSignal: true, isRequired: false, transformFunction: null }, table: { classPropertyName: "table", publicName: "table", isSignal: true, isRequired: false, transformFunction: null }, link: { classPropertyName: "link", publicName: "link", isSignal: true, isRequired: false, transformFunction: null }, image: { classPropertyName: "image", publicName: "image", isSignal: true, isRequired: false, transformFunction: null }, fullScreen: { classPropertyName: "fullScreen", publicName: "fullScreen", isSignal: true, isRequired: false, transformFunction: null }, showBlocks: { classPropertyName: "showBlocks", publicName: "showBlocks", isSignal: true, isRequired: false, transformFunction: null }, onImageUploadError: { classPropertyName: "onImageUploadError", publicName: "onImageUploadError", isSignal: true, isRequired: false, transformFunction: null }, onFileDrop: { classPropertyName: "onFileDrop", publicName: "onFileDrop", isSignal: true, isRequired: false, transformFunction: null }, wysiwygOptions: { classPropertyName: "wysiwygOptions", publicName: "wysiwygOptions", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => QuangWysiwygComponent),
@@ -211,7 +211,7 @@ class QuangWysiwygComponent extends QuangBaseComponent {
             },
         ], viewQueries: [{ propertyName: "_inputForWysiwyg", first: true, predicate: ["inputForWysiwyg"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"mb-3\">\n  @if (componentLabel()) {\n    <label\n      [htmlFor]=\"componentId()\"\n      class=\"form-label d-flex gap-2\"\n    >\n      <div>\n        <span>{{ componentLabel() | transloco }}</span>\n        <span [hidden]=\"!_isRequired()\">*</span>\n      </div>\n      @if (helpMessage() && helpMessageTooltip()) {\n        <div [quangTooltip]=\"helpMessage() | transloco\">\n          <ng-content select=\"[help-icon]\" />\n        </div>\n      }\n    </label>\n  }\n  <div\n    [class.is-invalid]=\"_showErrors()\"\n    [class.is-valid]=\"_showSuccess()\"\n    class=\"input-wysiwyg-container is-invalid\"\n  >\n    <textarea\n      [disabled]=\"_isDisabled()\"\n      [id]=\"componentId()\"\n      [ngClass]=\"componentClass()\"\n      [placeholder]=\"componentPlaceholder() | transloco\"\n      [readOnly]=\"isReadonly()\"\n      [tabIndex]=\"componentTabIndex()\"\n      [value]=\"_value()\"\n      #inputForWysiwyg\n      class=\"form-control\"\n    ></textarea>\n  </div>\n  <div class=\"valid-feedback\">\n    {{ successMessage() | transloco }}\n  </div>\n  <div class=\"invalid-feedback\">\n    {{ _currentErrorMessage() | transloco: _currentErrorMessageExtraData() }}\n  </div>\n  @if (helpMessage() && !helpMessageTooltip()) {\n    <small\n      [hidden]=\"_showSuccess() || _showErrors()\"\n      aria-live=\"assertive\"\n      class=\"form-text text-muted\"\n    >\n      {{ helpMessage() | transloco }}\n    </small>\n  }\n</div>\n", styles: [":host{display:block}::ng-deep .se-toolbar{color:var(--bs-body-color)!important;background-color:var(--bs-body-bg)!important;z-index:unset!important}::ng-deep .se-wrapper-inner{color:var(--bs-body-color)!important;background-color:var(--bs-body-bg)!important}::ng-deep .se-btn{color:var(--bs-body-color)!important}::ng-deep .se-btn:enabled.active{color:var(--bs-primary)!important}::ng-deep .se-btn:hover{background-color:var(--bs-secondary-bg)!important}::ng-deep .se-resizing-bar{color:var(--bs-body-color)!important;background-color:var(--bs-body-bg)!important}::ng-deep .se-navigation{color:var(--bs-body-color)!important;background-color:var(--bs-body-bg)!important}::ng-deep .sun-editor input{display:none}::ng-deep .sun-editor .se-container{border-radius:var(--bs-border-radius)}::ng-deep .se-wrapper{z-index:unset!important}::ng-deep .se-wrapper textarea:disabled+.se-wrapper-wysiwyg{background-color:var(--bs-secondary-bg)}::ng-deep .se-wrapper .se-wrapper-inner{border-top:1px solid var(--bs-border-color)}::ng-deep .is-invalid .sun-editor .se-container .se-toolbar{border-bottom:1px solid var(--bs-danger)}::ng-deep .is-invalid .sun-editor .se-container .se-wrapper .se-wrapper-inner{--bs-form-bg-icon: url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e\");border:1px solid var(--bs-danger);padding-right:3rem;background-position:right .75rem center,center right 2.25rem;background-size:1.5rem,calc(.75em + .375rem) calc(.75em + .375rem);background-image:var(--bs-form-bg-icon);background-repeat:no-repeat}::ng-deep .is-valid .sun-editor .se-container .se-toolbar{border-bottom:1px solid var(--bs-success)}::ng-deep .is-valid .sun-editor .se-container .se-wrapper .se-wrapper-inner{--bs-form-bg-icon: url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23198754' d='M2.3 6.73.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e\");border:1px solid var(--bs-success);padding-right:3rem;background-position:right .75rem center,center right 2.25rem;background-size:1.5rem,calc(.75em + .375rem) calc(.75em + .375rem);background-image:var(--bs-form-bg-icon);background-repeat:no-repeat}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: QuangTooltipDirective, selector: "[quangTooltip]", inputs: ["quangTooltip", "showMethod"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: QuangWysiwygComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: QuangWysiwygComponent, decorators: [{
             type: Component,
             args: [{ selector: 'quang-wysiwyg', providers: [
                         {

package/fesm2022/quang-device.mjs

@@ -24,10 +24,10 @@ class ResizeObservableService {
     widthResizeObservable(elem) {
         return this.resizeObservable(elem).pipe(map((entry) => entry.borderBoxSize[0].inlineSize), filter(Boolean));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: ResizeObservableService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: ResizeObservableService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: ResizeObservableService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: ResizeObservableService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: ResizeObservableService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: ResizeObservableService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',

package/fesm2022/quang-loader.mjs

@@ -17,10 +17,10 @@ class QuangLoaderService {
     hide() {
         patchState(this.loaderState, { count: this.loaderState().count - 1 });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: QuangLoaderService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: QuangLoaderService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: QuangLoaderService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: QuangLoaderService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: QuangLoaderService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: QuangLoaderService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -69,10 +69,10 @@ class QuangLoaderComponent {
         this.showLoaderBuffer$ = toObservable(this.isLoading).pipe(map((isLoading) => (isLoading ? of(isLoading) : timer(this.showAtLeastFor()).pipe(map(() => isLoading)))), switchAll());
         this.showLoader = toSignal(this.showLoaderBuffer$);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: QuangLoaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.1", type: QuangLoaderComponent, isStandalone: true, selector: "quang-loader", inputs: { showAtLeastFor: { classPropertyName: "showAtLeastFor", publicName: "showAtLeastFor", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (showLoader()) {\n  <div class=\"loader-container\">\n    @if (!ref?.children?.length) {\n      <span class=\"loader\"></span>\n    }\n    <div #ref>\n      <ng-content></ng-content>\n    </div>\n  </div>\n}\n", styles: [":host{display:block}.loader-container{position:fixed;width:100%;height:100%;display:flex;top:0;left:0;background-color:#00000080;align-items:center;justify-content:center;z-index:99999}.loader-container .loader{width:48px;height:48px;border-radius:50%;display:inline-block;position:relative;border:3px solid;border-color:rgba(255,255,255,.7607843137) rgba(255,255,255,.7607843137) rgba(255,255,255,.7607843137) transparent;box-sizing:border-box;animation:rotation 1s linear infinite}@keyframes rotation{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes rotationBack{0%{transform:rotate(0)}to{transform:rotate(-360deg)}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: QuangLoaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.3", type: QuangLoaderComponent, isStandalone: true, selector: "quang-loader", inputs: { showAtLeastFor: { classPropertyName: "showAtLeastFor", publicName: "showAtLeastFor", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (showLoader()) {\n  <div class=\"loader-container\">\n    @if (!ref?.children?.length) {\n      <span class=\"loader\"></span>\n    }\n    <div #ref>\n      <ng-content></ng-content>\n    </div>\n  </div>\n}\n", styles: [":host{display:block}.loader-container{position:fixed;width:100%;height:100%;display:flex;top:0;left:0;background-color:#00000080;align-items:center;justify-content:center;z-index:99999}.loader-container .loader{width:48px;height:48px;border-radius:50%;display:inline-block;position:relative;border:3px solid;border-color:rgba(255,255,255,.7607843137) rgba(255,255,255,.7607843137) rgba(255,255,255,.7607843137) transparent;box-sizing:border-box;animation:rotation 1s linear infinite}@keyframes rotation{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes rotationBack{0%{transform:rotate(0)}to{transform:rotate(-360deg)}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: QuangLoaderComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: QuangLoaderComponent, decorators: [{
             type: Component,
             args: [{ selector: 'quang-loader', imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (showLoader()) {\n  <div class=\"loader-container\">\n    @if (!ref?.children?.length) {\n      <span class=\"loader\"></span>\n    }\n    <div #ref>\n      <ng-content></ng-content>\n    </div>\n  </div>\n}\n", styles: [":host{display:block}.loader-container{position:fixed;width:100%;height:100%;display:flex;top:0;left:0;background-color:#00000080;align-items:center;justify-content:center;z-index:99999}.loader-container .loader{width:48px;height:48px;border-radius:50%;display:inline-block;position:relative;border:3px solid;border-color:rgba(255,255,255,.7607843137) rgba(255,255,255,.7607843137) rgba(255,255,255,.7607843137) transparent;box-sizing:border-box;animation:rotation 1s linear infinite}@keyframes rotation{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes rotationBack{0%{transform:rotate(0)}to{transform:rotate(-360deg)}}\n"] }]
         }] });

package/fesm2022/quang-overlay-modal.mjs

@@ -100,10 +100,10 @@ class QuangModalComponent {
         this.overlayRef?.detach();
         this.overlayRef?.dispose();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: QuangModalComponent, deps: [{ token: i1.Overlay }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.2.1", type: QuangModalComponent, isStandalone: true, selector: "quang-modal", inputs: { position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: true, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, padding: { classPropertyName: "padding", publicName: "padding", isSignal: true, isRequired: false, transformFunction: null }, containerClass: { classPropertyName: "containerClass", publicName: "containerClass", isSignal: true, isRequired: false, transformFunction: null }, animationMode: { classPropertyName: "animationMode", publicName: "animationMode", isSignal: true, isRequired: false, transformFunction: null }, backgroundColor: { classPropertyName: "backgroundColor", publicName: "backgroundColor", isSignal: true, isRequired: false, transformFunction: null }, showBackdrop: { classPropertyName: "showBackdrop", publicName: "showBackdrop", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { backdropClick: "backdropClick" }, viewQueries: [{ propertyName: "portal", first: true, predicate: CdkPortal, descendants: true }], ngImport: i0, template: "<ng-template cdkPortal>\n  <div\n    [ngStyle]=\"{\n      '--quang-modal-panel-width': width(),\n      '--quang-modal-panel-height': height(),\n      '--quang-modal-panel-background': backgroundColor(),\n      '--quang-modal-panel-padding': padding(),\n    }\"\n    class=\"dialog {{ containerClass() }} {{ animationClassEnter() }}\"\n  >\n    <div class=\"dialog__header\">\n      <ng-content select=\"[header]\"></ng-content>\n    </div>\n    <div class=\"dialog__body\">\n      <ng-content select=\"[body]\"></ng-content>\n    </div>\n    <div class=\"dialog__footer\">\n      <ng-content select=\"[footer]\"></ng-content>\n    </div>\n  </div>\n</ng-template>\n", styles: [".dialog{background-color:var(--quang-modal-panel-background, var(--bs-body-bg, initial));position:relative;display:flex;flex-direction:column;width:var(--quang-modal-panel-width);height:var(--quang-modal-panel-height);padding:var(--quang-modal-panel-padding)}.dialog__header{display:flex;flex-direction:column;width:100%}.dialog__body{flex:1;overflow:auto}.dialog__footer{display:flex;justify-content:flex-end}::ng-deep .cdk-global-scrollblock{overflow-y:auto}@keyframes left-to-right_enter{0%{transform:translate(-100%)}to{transform:translate(0)}}.left-to-right-enter-active{animation:left-to-right_enter .5s ease-in-out forwards}@keyframes right-to-left_enter{0%{transform:translate(100%)}to{transform:translate(0)}}.right-to-left-enter-active{animation:right-to-left_enter .5s ease-in-out forwards}@keyframes top-to-bottom_enter{0%{transform:translateY(-100%)}to{transform:translateY(0)}}.top-to-bottom-enter-active{animation:top-to-bottom_enter .5s ease-in-out forwards}@keyframes bottom-to-top_enter{0%{transform:translateY(100%)}to{transform:translateY(0)}}.top-to-bottom-enter-active{animation:bottom-to-top_enter .5s ease-in-out forwards}@keyframes fade_enter{0%{opacity:0}to{opacity:1}}.fade-enter-active{animation:fade_enter .5s ease-in-out forwards}\n"], dependencies: [{ kind: "ngmodule", type: PortalModule }, { kind: "directive", type: i2.CdkPortal, selector: "[cdkPortal]", exportAs: ["cdkPortal"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: QuangModalComponent, deps: [{ token: i1.Overlay }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.2.3", type: QuangModalComponent, isStandalone: true, selector: "quang-modal", inputs: { position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: true, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, padding: { classPropertyName: "padding", publicName: "padding", isSignal: true, isRequired: false, transformFunction: null }, containerClass: { classPropertyName: "containerClass", publicName: "containerClass", isSignal: true, isRequired: false, transformFunction: null }, animationMode: { classPropertyName: "animationMode", publicName: "animationMode", isSignal: true, isRequired: false, transformFunction: null }, backgroundColor: { classPropertyName: "backgroundColor", publicName: "backgroundColor", isSignal: true, isRequired: false, transformFunction: null }, showBackdrop: { classPropertyName: "showBackdrop", publicName: "showBackdrop", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { backdropClick: "backdropClick" }, viewQueries: [{ propertyName: "portal", first: true, predicate: CdkPortal, descendants: true }], ngImport: i0, template: "<ng-template cdkPortal>\n  <div\n    [ngStyle]=\"{\n      '--quang-modal-panel-width': width(),\n      '--quang-modal-panel-height': height(),\n      '--quang-modal-panel-background': backgroundColor(),\n      '--quang-modal-panel-padding': padding(),\n    }\"\n    class=\"dialog {{ containerClass() }} {{ animationClassEnter() }}\"\n  >\n    <div class=\"dialog__header\">\n      <ng-content select=\"[header]\"></ng-content>\n    </div>\n    <div class=\"dialog__body\">\n      <ng-content select=\"[body]\"></ng-content>\n    </div>\n    <div class=\"dialog__footer\">\n      <ng-content select=\"[footer]\"></ng-content>\n    </div>\n  </div>\n</ng-template>\n", styles: [".dialog{background-color:var(--quang-modal-panel-background, var(--bs-body-bg, initial));position:relative;display:flex;flex-direction:column;width:var(--quang-modal-panel-width);height:var(--quang-modal-panel-height);padding:var(--quang-modal-panel-padding)}.dialog__header{display:flex;flex-direction:column;width:100%}.dialog__body{flex:1;overflow:auto}.dialog__footer{display:flex;justify-content:flex-end}::ng-deep .cdk-global-scrollblock{overflow-y:auto}@keyframes left-to-right_enter{0%{transform:translate(-100%)}to{transform:translate(0)}}.left-to-right-enter-active{animation:left-to-right_enter .5s ease-in-out forwards}@keyframes right-to-left_enter{0%{transform:translate(100%)}to{transform:translate(0)}}.right-to-left-enter-active{animation:right-to-left_enter .5s ease-in-out forwards}@keyframes top-to-bottom_enter{0%{transform:translateY(-100%)}to{transform:translateY(0)}}.top-to-bottom-enter-active{animation:top-to-bottom_enter .5s ease-in-out forwards}@keyframes bottom-to-top_enter{0%{transform:translateY(100%)}to{transform:translateY(0)}}.top-to-bottom-enter-active{animation:bottom-to-top_enter .5s ease-in-out forwards}@keyframes fade_enter{0%{opacity:0}to{opacity:1}}.fade-enter-active{animation:fade_enter .5s ease-in-out forwards}\n"], dependencies: [{ kind: "ngmodule", type: PortalModule }, { kind: "directive", type: i2.CdkPortal, selector: "[cdkPortal]", exportAs: ["cdkPortal"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: QuangModalComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: QuangModalComponent, decorators: [{
             type: Component,
             args: [{ selector: 'quang-modal', imports: [PortalModule, NgStyle], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template cdkPortal>\n  <div\n    [ngStyle]=\"{\n      '--quang-modal-panel-width': width(),\n      '--quang-modal-panel-height': height(),\n      '--quang-modal-panel-background': backgroundColor(),\n      '--quang-modal-panel-padding': padding(),\n    }\"\n    class=\"dialog {{ containerClass() }} {{ animationClassEnter() }}\"\n  >\n    <div class=\"dialog__header\">\n      <ng-content select=\"[header]\"></ng-content>\n    </div>\n    <div class=\"dialog__body\">\n      <ng-content select=\"[body]\"></ng-content>\n    </div>\n    <div class=\"dialog__footer\">\n      <ng-content select=\"[footer]\"></ng-content>\n    </div>\n  </div>\n</ng-template>\n", styles: [".dialog{background-color:var(--quang-modal-panel-background, var(--bs-body-bg, initial));position:relative;display:flex;flex-direction:column;width:var(--quang-modal-panel-width);height:var(--quang-modal-panel-height);padding:var(--quang-modal-panel-padding)}.dialog__header{display:flex;flex-direction:column;width:100%}.dialog__body{flex:1;overflow:auto}.dialog__footer{display:flex;justify-content:flex-end}::ng-deep .cdk-global-scrollblock{overflow-y:auto}@keyframes left-to-right_enter{0%{transform:translate(-100%)}to{transform:translate(0)}}.left-to-right-enter-active{animation:left-to-right_enter .5s ease-in-out forwards}@keyframes right-to-left_enter{0%{transform:translate(100%)}to{transform:translate(0)}}.right-to-left-enter-active{animation:right-to-left_enter .5s ease-in-out forwards}@keyframes top-to-bottom_enter{0%{transform:translateY(-100%)}to{transform:translateY(0)}}.top-to-bottom-enter-active{animation:top-to-bottom_enter .5s ease-in-out forwards}@keyframes bottom-to-top_enter{0%{transform:translateY(100%)}to{transform:translateY(0)}}.top-to-bottom-enter-active{animation:bottom-to-top_enter .5s ease-in-out forwards}@keyframes fade_enter{0%{opacity:0}to{opacity:1}}.fade-enter-active{animation:fade_enter .5s ease-in-out forwards}\n"] }]
         }], ctorParameters: () => [{ type: i1.Overlay }], propDecorators: { portal: [{
@@ -223,10 +223,10 @@ class QuangModalService {
         this.idCounter.update((count) => count + 1);
         return `modal-${this.idCounter()}-${Date.now()}`;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: QuangModalService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: QuangModalService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: QuangModalService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: QuangModalService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: QuangModalService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: QuangModalService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',