quang 19.2.1 → 19.2.3

package/components/select/index.d.ts

@@ -18,7 +18,9 @@ declare class QuangSelectComponent extends QuangBaseComponent<string | number |
     _selectedItems: _angular_core.Signal<SelectOption[] | null>;
     translateValue: _angular_core.InputSignal<boolean>;
     nullOption: _angular_core.InputSignal<boolean>;
+    autoSelectSingleOption: _angular_core.InputSignal<boolean>;
     readonly ParentType = OptionListParentType.SELECT;
+    constructor();
     changeOptionsVisibility(skipTimeout?: boolean): void;
     showOptionVisibility(): void;
     hideOptionVisibility(skipTimeout?: boolean): void;
@@ -26,7 +28,7 @@ declare class QuangSelectComponent extends QuangBaseComponent<string | number |
     onChangedHandler(value: string | number | string[] | number[] | null): void;
     onMouseLeaveCallback(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<QuangSelectComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<QuangSelectComponent, "quang-select", never, { "selectionMode": { "alias": "selectionMode"; "required": false; "isSignal": true; }; "optionListMaxHeight": { "alias": "optionListMaxHeight"; "required": false; "isSignal": true; }; "selectOptions": { "alias": "selectOptions"; "required": true; "isSignal": true; }; "scrollBehaviorOnOpen": { "alias": "scrollBehaviorOnOpen"; "required": false; "isSignal": true; }; "translateValue": { "alias": "translateValue"; "required": false; "isSignal": true; }; "nullOption": { "alias": "nullOption"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<QuangSelectComponent, "quang-select", never, { "selectionMode": { "alias": "selectionMode"; "required": false; "isSignal": true; }; "optionListMaxHeight": { "alias": "optionListMaxHeight"; "required": false; "isSignal": true; }; "selectOptions": { "alias": "selectOptions"; "required": true; "isSignal": true; }; "scrollBehaviorOnOpen": { "alias": "scrollBehaviorOnOpen"; "required": false; "isSignal": true; }; "translateValue": { "alias": "translateValue"; "required": false; "isSignal": true; }; "nullOption": { "alias": "nullOption"; "required": false; "isSignal": true; }; "autoSelectSingleOption": { "alias": "autoSelectSingleOption"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
 export { QuangSelectComponent };

package/fesm2022/quang-components-select.mjs

@@ -1,8 +1,10 @@
 import { NgIf, NgFor, NgClass } from '@angular/common';
 import * as i0 from '@angular/core';
 import { input, viewChild, signal, computed, forwardRef, ChangeDetectionStrategy, Component } from '@angular/core';
+import { toObservable, takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
 import { TranslocoPipe } from '@jsverse/transloco';
+import { combineLatest, filter } from 'rxjs';
 import { QuangBaseComponent, OptionListParentType, QuangOptionListComponent } from 'quang/components/shared';
 
 /**
@@ -14,7 +16,7 @@ import { QuangBaseComponent, OptionListParentType, QuangOptionListComponent } fr
  */
 class QuangSelectComponent extends QuangBaseComponent {
     constructor() {
-        super(...arguments);
+        super();
         this.selectionMode = input('single');
         /**
          * Set the max height of the selection list before scrolling.
@@ -41,7 +43,17 @@ class QuangSelectComponent extends QuangBaseComponent {
         });
         this.translateValue = input(true);
         this.nullOption = input(true);
+        this.autoSelectSingleOption = input(false);
         this.ParentType = OptionListParentType.SELECT;
+        combineLatest([toObservable(this.autoSelectSingleOption), toObservable(this.selectOptions)])
+            .pipe(takeUntilDestroyed(this.destroyRef), filter(([autoselect, options]) => autoselect === true && options.length === 1))
+            .subscribe(([_, options]) => {
+            console.log('ciaooooo ->', this._value());
+            if (this._value() === null || this._value() === undefined || this._value() === '') {
+                console.log('options[0].value', options[0].value);
+                this.onChangedHandler(options[0].value);
+            }
+        });
     }
     changeOptionsVisibility(skipTimeout = false) {
         if (this.isReadonly())
@@ -87,8 +99,8 @@ class QuangSelectComponent extends QuangBaseComponent {
             this.hideOptionVisibility();
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: QuangSelectComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.0", type: QuangSelectComponent, isStandalone: true, selector: "quang-select", 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: true, transformFunction: null }, scrollBehaviorOnOpen: { classPropertyName: "scrollBehaviorOnOpen", publicName: "scrollBehaviorOnOpen", 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 } }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: QuangSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.0", type: QuangSelectComponent, isStandalone: true, selector: "quang-select", 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: true, transformFunction: null }, scrollBehaviorOnOpen: { classPropertyName: "scrollBehaviorOnOpen", publicName: "scrollBehaviorOnOpen", 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 }, autoSelectSingleOption: { classPropertyName: "autoSelectSingleOption", publicName: "autoSelectSingleOption", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => QuangSelectComponent),
@@ -113,7 +125,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImpor
                             multi: false,
                         },
                     ], imports: [TranslocoPipe, NgIf, NgFor, NgClass, QuangOptionListComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  (mouseleave)=\"onMouseLeaveCallback()\"\n  class=\"mb-3\"\n>\n  <label\n    [htmlFor]=\"componentId()\"\n    *ngIf=\"componentLabel()\"\n    class=\"form-label w-100\"\n  >\n    {{ componentLabel() | transloco }}\n    <span [hidden]=\"!_isRequired()\">*</span>\n  </label>\n  <div\n    [class.is-invalid]=\"_ngControl()?.invalid && (_ngControl()?.dirty || _ngControl()?.touched) && errorMap().length\"\n    [class.is-valid]=\"_ngControl()?.valid && (_ngControl()?.dirty || _ngControl()?.touched) && successMessage()\"\n    class=\"option-list-container\"\n  >\n    <button\n      [attr.required]=\"getIsRequiredControl()\"\n      [class.is-invalid]=\"_ngControl()?.invalid && (_ngControl()?.dirty || _ngControl()?.touched) && errorMap().length\"\n      [class.is-valid]=\"_ngControl()?.valid && (_ngControl()?.dirty || _ngControl()?.touched) && successMessage()\"\n      [disabled]=\"_isDisabled()\"\n      [id]=\"componentId()\"\n      [ngClass]=\"componentClass()\"\n      [tabIndex]=\"componentTabIndex()\"\n      (click)=\"changeOptionsVisibility()\"\n      #selectButton\n      class=\"form-select\"\n      type=\"button\"\n    >\n      <div class=\"content\">\n        @if (_selectedItems()?.length) {\n          <ng-container *ngFor=\"let val of _selectedItems(); let last = last\">\n            {{ translateValue() ? (val.label | transloco) : val.label }}{{ !last ? ', ' : '' }}\n          </ng-container>\n        } @else {\n          <ng-container>{{ componentPlaceholder() | transloco }}</ng-container>\n        }\n      </div>\n    </button>\n\n    <quang-option-list\n      [_isDisabled]=\"_isDisabled()\"\n      [_value]=\"_value()\"\n      [componentClass]=\"componentClass()\"\n      [componentLabel]=\"componentLabel()\"\n      [componentTabIndex]=\"componentTabIndex()\"\n      [nullOption]=\"nullOption()\"\n      [optionListMaxHeight]=\"optionListMaxHeight()\"\n      [parentType]=\"ParentType\"\n      [scrollBehaviorOnOpen]=\"scrollBehaviorOnOpen()\"\n      [selectButtonRef]=\"selectButton\"\n      [selectionMode]=\"selectionMode()\"\n      [selectOptions]=\"selectOptions()\"\n      [translateValue]=\"translateValue()\"\n      (blurHandler)=\"onBlurHandler()\"\n      (changedHandler)=\"onChangedHandler($event)\"\n      *ngIf=\"_showOptions()\"\n      #optionList\n    ></quang-option-list>\n  </div>\n  <div class=\"valid-feedback\">\n    {{ successMessage() | transloco }}\n  </div>\n  <div class=\"invalid-feedback\">\n    {{ _currentErrorMessage() | transloco: _currentErrorMessageExtraData() }}\n  </div>\n  <small\n    [hidden]=\"_showSuccess() || _showErrors()\"\n    *ngIf=\"helpMessage()\"\n    aria-live=\"assertive\"\n    class=\"form-text text-muted\"\n  >\n    {{ helpMessage() | transloco }}\n  </small>\n</div>\n", styles: [":host{display:block}:host .option-list-container{position:relative}.form-select{height:2.375rem}.form-select:disabled{background-image:unset}.content{text-align:left;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}\n"] }]
-        }] });
+        }], ctorParameters: () => [] });
 
 /**
  * Generated bundle index. Do not edit.

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

@@ -1 +1 @@
-{"version":3,"file":"quang-components-select.mjs","sources":["../../../projects/quang/components/select/select.component.ts","../../../projects/quang/components/select/select.component.html","../../../projects/quang/components/select/quang-components-select.ts"],"sourcesContent":["import { NgClass, NgFor, NgIf } from '@angular/common'\nimport {\n  AfterViewInit,\n  ChangeDetectionStrategy,\n  Component,\n  ElementRef,\n  computed,\n  forwardRef,\n  input,\n  signal,\n  viewChild,\n} from '@angular/core'\nimport { NG_VALUE_ACCESSOR } from '@angular/forms'\n\nimport { TranslocoPipe } from '@jsverse/transloco'\n\nimport {\n  OptionListParentType,\n  QuangBaseComponent,\n  QuangOptionListComponent,\n  SelectOption,\n} from 'quang/components/shared'\n\n@Component({\n  selector: 'quang-select',\n  templateUrl: './select.component.html',\n  styleUrl: './select.component.scss',\n  providers: [\n    {\n      provide: NG_VALUE_ACCESSOR,\n      useExisting: forwardRef(() => QuangSelectComponent),\n      multi: true,\n    },\n    {\n      provide: QuangOptionListComponent,\n      multi: false,\n    },\n  ],\n  imports: [TranslocoPipe, NgIf, NgFor, NgClass, QuangOptionListComponent],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\n/**\n * Select component for choosing one or multiple options from a dropdown.\n *\n * @usageNotes\n * This component supports both single and multiple selection modes. It can be configured\n * to display a list of options and allows users to select one or more of them by setting the `selectionMode` property to either `single` or `multiple`.\n */\nexport class QuangSelectComponent\n  extends QuangBaseComponent<string | number | string[] | number[] | null>\n  implements AfterViewInit\n{\n  selectionMode = input<'single' | 'multiple'>('single')\n\n  /**\n   * Set the max height of the selection list before scrolling.\n   * Default: 18rem\n   * @default 18rem\n   */\n  optionListMaxHeight = input<string>('18rem')\n\n  selectOptions = input.required<SelectOption[]>()\n\n  scrollBehaviorOnOpen = input<ScrollBehavior>('smooth')\n\n  selectButton = viewChild<ElementRef<HTMLButtonElement>>('selectButton')\n\n  _showOptions = signal<boolean>(false)\n\n  _optionHideTimeout = signal<any | undefined>(undefined)\n\n  _selectedItems = computed(() => {\n    if (this._value() !== null) {\n      const targetValue = this._value()\n      return this.selectOptions().filter((x) => {\n        if (Array.isArray(targetValue)) {\n          return targetValue.some((k) => k === x.value)\n        }\n        return targetValue === x.value\n      })\n    }\n    return null\n  })\n\n  translateValue = input<boolean>(true)\n\n  nullOption = input<boolean>(true)\n\n  readonly ParentType = OptionListParentType.SELECT\n\n  changeOptionsVisibility(skipTimeout = false): void {\n    if (this.isReadonly()) return\n    if (this._showOptions()) {\n      this._showOptions.set(skipTimeout)\n    } else {\n      this.showOptionVisibility()\n    }\n  }\n\n  showOptionVisibility(): void {\n    if (this._optionHideTimeout()) {\n      clearTimeout(this._optionHideTimeout())\n      this._optionHideTimeout.set(null)\n    }\n    this._showOptions.set(true)\n  }\n\n  hideOptionVisibility(skipTimeout = false): void {\n    if (this._optionHideTimeout()) {\n      clearTimeout(this._optionHideTimeout())\n    }\n    this._optionHideTimeout.set(\n      setTimeout(\n        () => {\n          this._showOptions.set(false)\n        },\n        skipTimeout ? 0 : 50\n      )\n    )\n  }\n\n  override onBlurHandler() {\n    if (this.selectionMode() === 'single') {\n      setTimeout(() => {\n        this.hideOptionVisibility()\n        super.onBlurHandler()\n      }, 100)\n    }\n  }\n\n  override onChangedHandler(value: string | number | string[] | number[] | null): void {\n    super.onChangedHandler(value)\n    if (this.selectionMode() === 'single') {\n      this.hideOptionVisibility()\n    }\n  }\n\n  onMouseLeaveCallback() {\n    if (this.selectionMode() === 'multiple') {\n      this.hideOptionVisibility()\n    }\n  }\n}\n","<div\n  (mouseleave)=\"onMouseLeaveCallback()\"\n  class=\"mb-3\"\n>\n  <label\n    [htmlFor]=\"componentId()\"\n    *ngIf=\"componentLabel()\"\n    class=\"form-label w-100\"\n  >\n    {{ componentLabel() | transloco }}\n    <span [hidden]=\"!_isRequired()\">*</span>\n  </label>\n  <div\n    [class.is-invalid]=\"_ngControl()?.invalid && (_ngControl()?.dirty || _ngControl()?.touched) && errorMap().length\"\n    [class.is-valid]=\"_ngControl()?.valid && (_ngControl()?.dirty || _ngControl()?.touched) && successMessage()\"\n    class=\"option-list-container\"\n  >\n    <button\n      [attr.required]=\"getIsRequiredControl()\"\n      [class.is-invalid]=\"_ngControl()?.invalid && (_ngControl()?.dirty || _ngControl()?.touched) && errorMap().length\"\n      [class.is-valid]=\"_ngControl()?.valid && (_ngControl()?.dirty || _ngControl()?.touched) && successMessage()\"\n      [disabled]=\"_isDisabled()\"\n      [id]=\"componentId()\"\n      [ngClass]=\"componentClass()\"\n      [tabIndex]=\"componentTabIndex()\"\n      (click)=\"changeOptionsVisibility()\"\n      #selectButton\n      class=\"form-select\"\n      type=\"button\"\n    >\n      <div class=\"content\">\n        @if (_selectedItems()?.length) {\n          <ng-container *ngFor=\"let val of _selectedItems(); let last = last\">\n            {{ translateValue() ? (val.label | transloco) : val.label }}{{ !last ? ', ' : '' }}\n          </ng-container>\n        } @else {\n          <ng-container>{{ componentPlaceholder() | transloco }}</ng-container>\n        }\n      </div>\n    </button>\n\n    <quang-option-list\n      [_isDisabled]=\"_isDisabled()\"\n      [_value]=\"_value()\"\n      [componentClass]=\"componentClass()\"\n      [componentLabel]=\"componentLabel()\"\n      [componentTabIndex]=\"componentTabIndex()\"\n      [nullOption]=\"nullOption()\"\n      [optionListMaxHeight]=\"optionListMaxHeight()\"\n      [parentType]=\"ParentType\"\n      [scrollBehaviorOnOpen]=\"scrollBehaviorOnOpen()\"\n      [selectButtonRef]=\"selectButton\"\n      [selectionMode]=\"selectionMode()\"\n      [selectOptions]=\"selectOptions()\"\n      [translateValue]=\"translateValue()\"\n      (blurHandler)=\"onBlurHandler()\"\n      (changedHandler)=\"onChangedHandler($event)\"\n      *ngIf=\"_showOptions()\"\n      #optionList\n    ></quang-option-list>\n  </div>\n  <div class=\"valid-feedback\">\n    {{ successMessage() | transloco }}\n  </div>\n  <div class=\"invalid-feedback\">\n    {{ _currentErrorMessage() | transloco: _currentErrorMessageExtraData() }}\n  </div>\n  <small\n    [hidden]=\"_showSuccess() || _showErrors()\"\n    *ngIf=\"helpMessage()\"\n    aria-live=\"assertive\"\n    class=\"form-text text-muted\"\n  >\n    {{ helpMessage() | transloco }}\n  </small>\n</div>\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-select.mjs","sources":["../../../projects/quang/components/select/select.component.ts","../../../projects/quang/components/select/select.component.html","../../../projects/quang/components/select/quang-components-select.ts"],"sourcesContent":["import { NgClass, NgFor, NgIf } from '@angular/common'\nimport {\n  AfterViewInit,\n  ChangeDetectionStrategy,\n  Component,\n  ElementRef,\n  computed,\n  forwardRef,\n  input,\n  signal,\n  viewChild,\n} from '@angular/core'\nimport { takeUntilDestroyed, toObservable } from '@angular/core/rxjs-interop'\nimport { NG_VALUE_ACCESSOR } from '@angular/forms'\n\nimport { TranslocoPipe } from '@jsverse/transloco'\nimport { combineLatest, filter } from 'rxjs'\n\nimport {\n  OptionListParentType,\n  QuangBaseComponent,\n  QuangOptionListComponent,\n  SelectOption,\n} from 'quang/components/shared'\n\n@Component({\n  selector: 'quang-select',\n  templateUrl: './select.component.html',\n  styleUrl: './select.component.scss',\n  providers: [\n    {\n      provide: NG_VALUE_ACCESSOR,\n      useExisting: forwardRef(() => QuangSelectComponent),\n      multi: true,\n    },\n    {\n      provide: QuangOptionListComponent,\n      multi: false,\n    },\n  ],\n  imports: [TranslocoPipe, NgIf, NgFor, NgClass, QuangOptionListComponent],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\n/**\n * Select component for choosing one or multiple options from a dropdown.\n *\n * @usageNotes\n * This component supports both single and multiple selection modes. It can be configured\n * to display a list of options and allows users to select one or more of them by setting the `selectionMode` property to either `single` or `multiple`.\n */\nexport class QuangSelectComponent\n  extends QuangBaseComponent<string | number | string[] | number[] | null>\n  implements AfterViewInit\n{\n  selectionMode = input<'single' | 'multiple'>('single')\n\n  /**\n   * Set the max height of the selection list before scrolling.\n   * Default: 18rem\n   * @default 18rem\n   */\n  optionListMaxHeight = input<string>('18rem')\n\n  selectOptions = input.required<SelectOption[]>()\n\n  scrollBehaviorOnOpen = input<ScrollBehavior>('smooth')\n\n  selectButton = viewChild<ElementRef<HTMLButtonElement>>('selectButton')\n\n  _showOptions = signal<boolean>(false)\n\n  _optionHideTimeout = signal<any | undefined>(undefined)\n\n  _selectedItems = computed(() => {\n    if (this._value() !== null) {\n      const targetValue = this._value()\n      return this.selectOptions().filter((x) => {\n        if (Array.isArray(targetValue)) {\n          return targetValue.some((k) => k === x.value)\n        }\n        return targetValue === x.value\n      })\n    }\n    return null\n  })\n\n  translateValue = input<boolean>(true)\n\n  nullOption = input<boolean>(true)\n\n  autoSelectSingleOption = input<boolean>(false)\n\n  readonly ParentType = OptionListParentType.SELECT\n\n  constructor() {\n    super()\n    combineLatest([toObservable(this.autoSelectSingleOption), toObservable(this.selectOptions)])\n      .pipe(\n        takeUntilDestroyed(this.destroyRef),\n        filter(([autoselect, options]) => autoselect === true && options.length === 1)\n      )\n      .subscribe(([_, options]) => {\n        console.log('ciaooooo ->', this._value())\n        if (this._value() === null || this._value() === undefined || this._value() === '') {\n          console.log('options[0].value', options[0].value)\n          this.onChangedHandler(options[0].value)\n        }\n      })\n  }\n\n  changeOptionsVisibility(skipTimeout = false): void {\n    if (this.isReadonly()) return\n    if (this._showOptions()) {\n      this._showOptions.set(skipTimeout)\n    } else {\n      this.showOptionVisibility()\n    }\n  }\n\n  showOptionVisibility(): void {\n    if (this._optionHideTimeout()) {\n      clearTimeout(this._optionHideTimeout())\n      this._optionHideTimeout.set(null)\n    }\n    this._showOptions.set(true)\n  }\n\n  hideOptionVisibility(skipTimeout = false): void {\n    if (this._optionHideTimeout()) {\n      clearTimeout(this._optionHideTimeout())\n    }\n    this._optionHideTimeout.set(\n      setTimeout(\n        () => {\n          this._showOptions.set(false)\n        },\n        skipTimeout ? 0 : 50\n      )\n    )\n  }\n\n  override onBlurHandler() {\n    if (this.selectionMode() === 'single') {\n      setTimeout(() => {\n        this.hideOptionVisibility()\n        super.onBlurHandler()\n      }, 100)\n    }\n  }\n\n  override onChangedHandler(value: string | number | string[] | number[] | null): void {\n    super.onChangedHandler(value)\n    if (this.selectionMode() === 'single') {\n      this.hideOptionVisibility()\n    }\n  }\n\n  onMouseLeaveCallback() {\n    if (this.selectionMode() === 'multiple') {\n      this.hideOptionVisibility()\n    }\n  }\n}\n","<div\n  (mouseleave)=\"onMouseLeaveCallback()\"\n  class=\"mb-3\"\n>\n  <label\n    [htmlFor]=\"componentId()\"\n    *ngIf=\"componentLabel()\"\n    class=\"form-label w-100\"\n  >\n    {{ componentLabel() | transloco }}\n    <span [hidden]=\"!_isRequired()\">*</span>\n  </label>\n  <div\n    [class.is-invalid]=\"_ngControl()?.invalid && (_ngControl()?.dirty || _ngControl()?.touched) && errorMap().length\"\n    [class.is-valid]=\"_ngControl()?.valid && (_ngControl()?.dirty || _ngControl()?.touched) && successMessage()\"\n    class=\"option-list-container\"\n  >\n    <button\n      [attr.required]=\"getIsRequiredControl()\"\n      [class.is-invalid]=\"_ngControl()?.invalid && (_ngControl()?.dirty || _ngControl()?.touched) && errorMap().length\"\n      [class.is-valid]=\"_ngControl()?.valid && (_ngControl()?.dirty || _ngControl()?.touched) && successMessage()\"\n      [disabled]=\"_isDisabled()\"\n      [id]=\"componentId()\"\n      [ngClass]=\"componentClass()\"\n      [tabIndex]=\"componentTabIndex()\"\n      (click)=\"changeOptionsVisibility()\"\n      #selectButton\n      class=\"form-select\"\n      type=\"button\"\n    >\n      <div class=\"content\">\n        @if (_selectedItems()?.length) {\n          <ng-container *ngFor=\"let val of _selectedItems(); let last = last\">\n            {{ translateValue() ? (val.label | transloco) : val.label }}{{ !last ? ', ' : '' }}\n          </ng-container>\n        } @else {\n          <ng-container>{{ componentPlaceholder() | transloco }}</ng-container>\n        }\n      </div>\n    </button>\n\n    <quang-option-list\n      [_isDisabled]=\"_isDisabled()\"\n      [_value]=\"_value()\"\n      [componentClass]=\"componentClass()\"\n      [componentLabel]=\"componentLabel()\"\n      [componentTabIndex]=\"componentTabIndex()\"\n      [nullOption]=\"nullOption()\"\n      [optionListMaxHeight]=\"optionListMaxHeight()\"\n      [parentType]=\"ParentType\"\n      [scrollBehaviorOnOpen]=\"scrollBehaviorOnOpen()\"\n      [selectButtonRef]=\"selectButton\"\n      [selectionMode]=\"selectionMode()\"\n      [selectOptions]=\"selectOptions()\"\n      [translateValue]=\"translateValue()\"\n      (blurHandler)=\"onBlurHandler()\"\n      (changedHandler)=\"onChangedHandler($event)\"\n      *ngIf=\"_showOptions()\"\n      #optionList\n    ></quang-option-list>\n  </div>\n  <div class=\"valid-feedback\">\n    {{ successMessage() | transloco }}\n  </div>\n  <div class=\"invalid-feedback\">\n    {{ _currentErrorMessage() | transloco: _currentErrorMessageExtraData() }}\n  </div>\n  <small\n    [hidden]=\"_showSuccess() || _showErrors()\"\n    *ngIf=\"helpMessage()\"\n    aria-live=\"assertive\"\n    class=\"form-text text-muted\"\n  >\n    {{ helpMessage() | transloco }}\n  </small>\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/quang-components-table.mjs

@@ -147,11 +147,11 @@ class QuangTableComponent {
         this.sortChanged.emit([sort]); // it's an array to handle multisort in the future
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: QuangTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.0", 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: "_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                  [ngClass]=\"cell.css!\"\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;overflow:hidden;line-height:0;visibility:collapse}.table-responsive .fake-table-header th{padding-top:0!important;padding-bottom:0!important;margin-top:0!important;margin-bottom:0!important;background-color:var(--table-header-bg);border:unset}.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: "pipe", type: TranslocoPipe, name: "transloco" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.0", 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: "_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                  [ngClass]=\"cell.css!\"\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: "pipe", type: TranslocoPipe, name: "transloco" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: QuangTableComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'quang-table', imports: [TranslocoPipe, NgClass, NgTemplateOutlet], 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                  [ngClass]=\"cell.css!\"\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;overflow:hidden;line-height:0;visibility:collapse}.table-responsive .fake-table-header th{padding-top:0!important;padding-bottom:0!important;margin-top:0!important;margin-bottom:0!important;background-color:var(--table-header-bg);border:unset}.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], 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                  [ngClass]=\"cell.css!\"\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"] }]
         }] });
 
 /**

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, 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} 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}\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],\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  _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","<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                  [ngClass]=\"cell.css!\"\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, 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} 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}\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],\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  _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","<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                  [ngClass]=\"cell.css!\"\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/package.json

@@ -1,7 +1,7 @@
 {
   "name": "quang",
   "sideEffects": false,
-  "version": "19.2.1",
+  "version": "19.2.3",
   "dependencies": {
     "tslib": "^2.3.0"
   },
@@ -67,26 +67,26 @@
       "types": "./auth/index.d.ts",
       "default": "./fesm2022/quang-auth.mjs"
     },
-    "./device": {
-      "types": "./device/index.d.ts",
-      "default": "./fesm2022/quang-device.mjs"
-    },
     "./data-handling": {
       "types": "./data-handling/index.d.ts",
       "default": "./fesm2022/quang-data-handling.mjs"
     },
+    "./device": {
+      "types": "./device/index.d.ts",
+      "default": "./fesm2022/quang-device.mjs"
+    },
     "./forms": {
       "types": "./forms/index.d.ts",
       "default": "./fesm2022/quang-forms.mjs"
     },
-    "./shared": {
-      "types": "./shared/index.d.ts",
-      "default": "./fesm2022/quang-shared.mjs"
-    },
     "./loader": {
       "types": "./loader/index.d.ts",
       "default": "./fesm2022/quang-loader.mjs"
     },
+    "./shared": {
+      "types": "./shared/index.d.ts",
+      "default": "./fesm2022/quang-shared.mjs"
+    },
     "./translation": {
       "types": "./translation/index.d.ts",
       "default": "./fesm2022/quang-translation.mjs"
@@ -95,46 +95,46 @@
       "types": "./auth/mobile/index.d.ts",
       "default": "./fesm2022/quang-auth-mobile.mjs"
     },
-    "./components/checkbox": {
-      "types": "./components/checkbox/index.d.ts",
-      "default": "./fesm2022/quang-components-checkbox.mjs"
-    },
     "./components/autocomplete": {
       "types": "./components/autocomplete/index.d.ts",
       "default": "./fesm2022/quang-components-autocomplete.mjs"
     },
+    "./components/checkbox": {
+      "types": "./components/checkbox/index.d.ts",
+      "default": "./fesm2022/quang-components-checkbox.mjs"
+    },
     "./components/date": {
       "types": "./components/date/index.d.ts",
       "default": "./fesm2022/quang-components-date.mjs"
     },
-    "./components/input": {
-      "types": "./components/input/index.d.ts",
-      "default": "./fesm2022/quang-components-input.mjs"
-    },
-    "./components/shared": {
-      "types": "./components/shared/index.d.ts",
-      "default": "./fesm2022/quang-components-shared.mjs"
-    },
     "./components/paginator": {
       "types": "./components/paginator/index.d.ts",
       "default": "./fesm2022/quang-components-paginator.mjs"
     },
+    "./components/input": {
+      "types": "./components/input/index.d.ts",
+      "default": "./fesm2022/quang-components-input.mjs"
+    },
     "./components/select": {
       "types": "./components/select/index.d.ts",
       "default": "./fesm2022/quang-components-select.mjs"
     },
+    "./components/shared": {
+      "types": "./components/shared/index.d.ts",
+      "default": "./fesm2022/quang-components-shared.mjs"
+    },
     "./components/table": {
       "types": "./components/table/index.d.ts",
       "default": "./fesm2022/quang-components-table.mjs"
     },
-    "./overlay/modal": {
-      "types": "./overlay/modal/index.d.ts",
-      "default": "./fesm2022/quang-overlay-modal.mjs"
-    },
     "./components/wysiwyg": {
       "types": "./components/wysiwyg/index.d.ts",
       "default": "./fesm2022/quang-components-wysiwyg.mjs"
     },
+    "./overlay/modal": {
+      "types": "./overlay/modal/index.d.ts",
+      "default": "./fesm2022/quang-overlay-modal.mjs"
+    },
     "./overlay/popover": {
       "types": "./overlay/popover/index.d.ts",
       "default": "./fesm2022/quang-overlay-popover.mjs"