quang 20.3.3 → 20.3.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -20,6 +20,8 @@ interface TableCell {
|
|
|
20
20
|
text?: string;
|
|
21
21
|
css?: string[];
|
|
22
22
|
fullWidth?: boolean;
|
|
23
|
+
style?: Record<string, string>;
|
|
24
|
+
properties?: Record<string, any>;
|
|
23
25
|
}
|
|
24
26
|
interface TableRow<T> {
|
|
25
27
|
payload?: T;
|
|
@@ -48,6 +50,8 @@ declare class QuangTableComponent<T> {
|
|
|
48
50
|
_tableHeader: _angular_core.Signal<ElementRef<any> | undefined>;
|
|
49
51
|
_tableHeaderElement: _angular_core.Signal<Element | undefined>;
|
|
50
52
|
noResultsText: _angular_core.InputSignal<string>;
|
|
53
|
+
tdWithProperties: _angular_core.Signal<readonly ElementRef<any>[]>;
|
|
54
|
+
_tdWithPropertiesEffect: _angular_core.EffectRef;
|
|
51
55
|
_tableHeaderEffect: _angular_core.EffectRef;
|
|
52
56
|
_tableHeaderElementEffect: _angular_core.EffectRef;
|
|
53
57
|
_fakeTableHeader: _angular_core.Signal<ElementRef<any> | undefined>;
|
|
@@ -62,6 +66,7 @@ declare class QuangTableComponent<T> {
|
|
|
62
66
|
lastWidth: number;
|
|
63
67
|
fixTableHeaderWidth(): void;
|
|
64
68
|
onSortColumn(sort: SortCol): void;
|
|
69
|
+
convertToString(value?: any): string | undefined;
|
|
65
70
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<QuangTableComponent<any>, never>;
|
|
66
71
|
static ɵcmp: _angular_core.ɵɵComponentDeclaration<QuangTableComponent<any>, "quang-table", never, { "clickableRow": { "alias": "clickableRow"; "required": false; "isSignal": true; }; "selectedRows": { "alias": "selectedRows"; "required": false; "isSignal": true; }; "stickyTable": { "alias": "stickyTable"; "required": false; "isSignal": true; }; "noResultsText": { "alias": "noResultsText"; "required": false; "isSignal": true; }; "tableConfigurations": { "alias": "tableConfigurations"; "required": true; "isSignal": true; }; }, { "selectedRow": "selectedRow"; "sortChanged": "sortChanged"; }, never, never, true, never>;
|
|
67
72
|
}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import { NgClass, NgTemplateOutlet } from '@angular/common';
|
|
1
|
+
import { NgClass, NgTemplateOutlet, NgStyle } from '@angular/common';
|
|
2
2
|
import * as i0 from '@angular/core';
|
|
3
|
-
import { input, output, inject, DestroyRef, viewChild, effect, signal, ChangeDetectionStrategy, Component } from '@angular/core';
|
|
3
|
+
import { input, output, inject, DestroyRef, viewChild, viewChildren, ElementRef, effect, signal, ChangeDetectionStrategy, Component } from '@angular/core';
|
|
4
4
|
import { toObservable, takeUntilDestroyed } from '@angular/core/rxjs-interop';
|
|
5
5
|
import { TranslocoPipe } from '@jsverse/transloco';
|
|
6
6
|
import { ResizeObservableService } from 'quang/device';
|
|
@@ -32,6 +32,19 @@ class QuangTableComponent {
|
|
|
32
32
|
this._tableHeader = viewChild('tableHeader', ...(ngDevMode ? [{ debugName: "_tableHeader" }] : []));
|
|
33
33
|
this._tableHeaderElement = viewChild('tableHeader', ...(ngDevMode ? [{ debugName: "_tableHeaderElement" }] : []));
|
|
34
34
|
this.noResultsText = input('quangTable.noResults', ...(ngDevMode ? [{ debugName: "noResultsText" }] : []));
|
|
35
|
+
this.tdWithProperties = viewChildren('tdCell', ...(ngDevMode ? [{ debugName: "tdWithProperties", read: ElementRef }] : [{ read: ElementRef }]));
|
|
36
|
+
this._tdWithPropertiesEffect = effect(() => {
|
|
37
|
+
for (const tdWithProperty of this.tdWithProperties()) {
|
|
38
|
+
const properties = tdWithProperty.nativeElement.getAttribute('data-properties');
|
|
39
|
+
if (properties) {
|
|
40
|
+
const propertiesObj = JSON.parse(properties);
|
|
41
|
+
for (const key of Object.keys(propertiesObj)) {
|
|
42
|
+
console.log('key', key, propertiesObj[key]);
|
|
43
|
+
tdWithProperty.nativeElement[key] = propertiesObj[key];
|
|
44
|
+
}
|
|
45
|
+
}
|
|
46
|
+
}
|
|
47
|
+
}, ...(ngDevMode ? [{ debugName: "_tdWithPropertiesEffect" }] : []));
|
|
35
48
|
this._tableHeaderEffect = effect(() => {
|
|
36
49
|
if (this._tableHeader()) {
|
|
37
50
|
this.fixTableHeaderWidth();
|
|
@@ -146,12 +159,17 @@ class QuangTableComponent {
|
|
|
146
159
|
this._tableConfigurations.set({ ...this._tableConfigurations(), headers: tableHeaders });
|
|
147
160
|
this.sortChanged.emit([sort]); // it's an array to handle multisort in the future
|
|
148
161
|
}
|
|
162
|
+
convertToString(value) {
|
|
163
|
+
if (value === null)
|
|
164
|
+
return undefined;
|
|
165
|
+
return JSON.stringify(value);
|
|
166
|
+
}
|
|
149
167
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: QuangTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
150
|
-
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: "_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
|
|
168
|
+
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 }); }
|
|
151
169
|
}
|
|
152
170
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: QuangTableComponent, decorators: [{
|
|
153
171
|
type: Component,
|
|
154
|
-
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
|
|
172
|
+
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"] }]
|
|
155
173
|
}] });
|
|
156
174
|
|
|
157
175
|
/**
|
|
@@ -1 +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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"}
|
|
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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"}
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "quang",
|
|
3
3
|
"sideEffects": false,
|
|
4
|
-
"version": "20.3.
|
|
4
|
+
"version": "20.3.4",
|
|
5
5
|
"dependencies": {
|
|
6
6
|
"tslib": "^2.3.0"
|
|
7
7
|
},
|
|
@@ -71,22 +71,18 @@
|
|
|
71
71
|
"types": "./data-handling/index.d.ts",
|
|
72
72
|
"default": "./fesm2022/quang-data-handling.mjs"
|
|
73
73
|
},
|
|
74
|
-
"./device": {
|
|
75
|
-
"types": "./device/index.d.ts",
|
|
76
|
-
"default": "./fesm2022/quang-device.mjs"
|
|
77
|
-
},
|
|
78
74
|
"./forms": {
|
|
79
75
|
"types": "./forms/index.d.ts",
|
|
80
76
|
"default": "./fesm2022/quang-forms.mjs"
|
|
81
77
|
},
|
|
78
|
+
"./device": {
|
|
79
|
+
"types": "./device/index.d.ts",
|
|
80
|
+
"default": "./fesm2022/quang-device.mjs"
|
|
81
|
+
},
|
|
82
82
|
"./loader": {
|
|
83
83
|
"types": "./loader/index.d.ts",
|
|
84
84
|
"default": "./fesm2022/quang-loader.mjs"
|
|
85
85
|
},
|
|
86
|
-
"./shared": {
|
|
87
|
-
"types": "./shared/index.d.ts",
|
|
88
|
-
"default": "./fesm2022/quang-shared.mjs"
|
|
89
|
-
},
|
|
90
86
|
"./translation": {
|
|
91
87
|
"types": "./translation/index.d.ts",
|
|
92
88
|
"default": "./fesm2022/quang-translation.mjs"
|
|
@@ -95,46 +91,50 @@
|
|
|
95
91
|
"types": "./auth/mobile/index.d.ts",
|
|
96
92
|
"default": "./fesm2022/quang-auth-mobile.mjs"
|
|
97
93
|
},
|
|
98
|
-
"./
|
|
99
|
-
"types": "./
|
|
100
|
-
"default": "./fesm2022/quang-
|
|
94
|
+
"./shared": {
|
|
95
|
+
"types": "./shared/index.d.ts",
|
|
96
|
+
"default": "./fesm2022/quang-shared.mjs"
|
|
101
97
|
},
|
|
102
98
|
"./components/checkbox": {
|
|
103
99
|
"types": "./components/checkbox/index.d.ts",
|
|
104
100
|
"default": "./fesm2022/quang-components-checkbox.mjs"
|
|
105
101
|
},
|
|
106
|
-
"./components/input": {
|
|
107
|
-
"types": "./components/input/index.d.ts",
|
|
108
|
-
"default": "./fesm2022/quang-components-input.mjs"
|
|
109
|
-
},
|
|
110
102
|
"./components/date": {
|
|
111
103
|
"types": "./components/date/index.d.ts",
|
|
112
104
|
"default": "./fesm2022/quang-components-date.mjs"
|
|
113
105
|
},
|
|
114
|
-
"./components/
|
|
115
|
-
"types": "./components/
|
|
116
|
-
"default": "./fesm2022/quang-components-
|
|
106
|
+
"./components/input": {
|
|
107
|
+
"types": "./components/input/index.d.ts",
|
|
108
|
+
"default": "./fesm2022/quang-components-input.mjs"
|
|
117
109
|
},
|
|
118
110
|
"./components/paginator": {
|
|
119
111
|
"types": "./components/paginator/index.d.ts",
|
|
120
112
|
"default": "./fesm2022/quang-components-paginator.mjs"
|
|
121
113
|
},
|
|
122
|
-
"./components/
|
|
123
|
-
"types": "./components/
|
|
124
|
-
"default": "./fesm2022/quang-components-
|
|
114
|
+
"./components/autocomplete": {
|
|
115
|
+
"types": "./components/autocomplete/index.d.ts",
|
|
116
|
+
"default": "./fesm2022/quang-components-autocomplete.mjs"
|
|
117
|
+
},
|
|
118
|
+
"./components/select": {
|
|
119
|
+
"types": "./components/select/index.d.ts",
|
|
120
|
+
"default": "./fesm2022/quang-components-select.mjs"
|
|
125
121
|
},
|
|
126
122
|
"./components/table": {
|
|
127
123
|
"types": "./components/table/index.d.ts",
|
|
128
124
|
"default": "./fesm2022/quang-components-table.mjs"
|
|
129
125
|
},
|
|
130
|
-
"./components/wysiwyg": {
|
|
131
|
-
"types": "./components/wysiwyg/index.d.ts",
|
|
132
|
-
"default": "./fesm2022/quang-components-wysiwyg.mjs"
|
|
133
|
-
},
|
|
134
126
|
"./overlay/modal": {
|
|
135
127
|
"types": "./overlay/modal/index.d.ts",
|
|
136
128
|
"default": "./fesm2022/quang-overlay-modal.mjs"
|
|
137
129
|
},
|
|
130
|
+
"./components/shared": {
|
|
131
|
+
"types": "./components/shared/index.d.ts",
|
|
132
|
+
"default": "./fesm2022/quang-components-shared.mjs"
|
|
133
|
+
},
|
|
134
|
+
"./components/wysiwyg": {
|
|
135
|
+
"types": "./components/wysiwyg/index.d.ts",
|
|
136
|
+
"default": "./fesm2022/quang-components-wysiwyg.mjs"
|
|
137
|
+
},
|
|
138
138
|
"./overlay/popover": {
|
|
139
139
|
"types": "./overlay/popover/index.d.ts",
|
|
140
140
|
"default": "./fesm2022/quang-overlay-popover.mjs"
|
|
@@ -143,13 +143,13 @@
|
|
|
143
143
|
"types": "./overlay/toast/index.d.ts",
|
|
144
144
|
"default": "./fesm2022/quang-overlay-toast.mjs"
|
|
145
145
|
},
|
|
146
|
-
"./overlay/shared": {
|
|
147
|
-
"types": "./overlay/shared/index.d.ts",
|
|
148
|
-
"default": "./fesm2022/quang-overlay-shared.mjs"
|
|
149
|
-
},
|
|
150
146
|
"./overlay/tooltip": {
|
|
151
147
|
"types": "./overlay/tooltip/index.d.ts",
|
|
152
148
|
"default": "./fesm2022/quang-overlay-tooltip.mjs"
|
|
149
|
+
},
|
|
150
|
+
"./overlay/shared": {
|
|
151
|
+
"types": "./overlay/shared/index.d.ts",
|
|
152
|
+
"default": "./fesm2022/quang-overlay-shared.mjs"
|
|
153
153
|
}
|
|
154
154
|
}
|
|
155
155
|
}
|