@iamgld/ui 1.20.1 → 1.20.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.
package/fesm2022/iamgld-ui.mjs
CHANGED
|
@@ -1291,11 +1291,6 @@ class TableComponent {
|
|
|
1291
1291
|
tableColumnAction = output();
|
|
1292
1292
|
tableColumnsToShow = computed(() => this.tableColumns().filter((column) => !column.hide));
|
|
1293
1293
|
tableColumnActions = signal([]);
|
|
1294
|
-
constructor() {
|
|
1295
|
-
effect(() => {
|
|
1296
|
-
console.log('effect', this.loading());
|
|
1297
|
-
});
|
|
1298
|
-
}
|
|
1299
1294
|
tableActionFunction({ tableColumnActionAsEvent, tableColumns, index }) {
|
|
1300
1295
|
const tableColumnAction = tableColumnActionAsEvent;
|
|
1301
1296
|
const object = this.#buildObjectFromTableColumn({ tableColumns, index });
|
|
@@ -1413,12 +1408,12 @@ class TableComponent {
|
|
|
1413
1408
|
}, {});
|
|
1414
1409
|
}
|
|
1415
1410
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: TableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1416
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.1", type: TableComponent, isStandalone: true, selector: "gld-table", inputs: { tableColumns: { classPropertyName: "tableColumns", publicName: "tableColumns", isSignal: true, isRequired: true, transformFunction: null }, emptyMessage: { classPropertyName: "emptyMessage", publicName: "emptyMessage", isSignal: true, isRequired: false, transformFunction: null }, tableHeight: { classPropertyName: "tableHeight", publicName: "tableHeight", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, selects: { classPropertyName: "selects", publicName: "selects", isSignal: true, isRequired: false, transformFunction: null }, selectsAll: { classPropertyName: "selectsAll", publicName: "selectsAll", isSignal: true, isRequired: false, transformFunction: null }, search: { classPropertyName: "search", publicName: "search", isSignal: true, isRequired: false, transformFunction: null }, pagination: { classPropertyName: "pagination", publicName: "pagination", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { tableColumnAction: "tableColumnAction" }, ngImport: i0, template: "<!-- Search -->\n@if (search()) {\n <section class=\"table-search\">\n <ng-content select=\"gld-table-search\" />\n </section>\n}\n\n<!-- Table -->\n<article\n class=\"table\"\n [class.table--empty]=\"!tableColumnsToShow().length\"\n [style.height]=\"tableHeight()\">\n <!-- Table Content -->\n <section\n class=\"table-content\"\n [class.table-content--actions]=\"tableColumnActions().length\"\n [class.table-content--selects]=\"selects()\">\n <!-- Loading -->\n @if (loading()) {\n <gld-loader loading background minHeight=\"100px\" />\n } @else {\n <!-- Table Columns -->\n @for (tableColumn of tableColumnsToShow(); track tableColumn) {\n <section\n class=\"table-column\"\n [style.flexBasis]=\"tableColumn.width\"\n [style.flexShrink]=\"tableColumn.width === 'auto' ? '1' : '0'\"\n [style.flexGrow]=\"tableColumn.width === 'auto' ? '1' : '0'\"\n [style.minWidth]=\"tableColumn.minWidth\"\n [style.maxWidth]=\"tableColumn.maxWidth\">\n <section class=\"table-header\">\n <span class=\"table-header-ellipsis\">{{ tableColumn.label }}</span>\n </section>\n @for (value of tableColumn.values; track $index) {\n <section\n class=\"table-cell\"\n [style.justifyContent]=\"tableColumn.justify\"\n [style.textAlign]=\"tableColumn.justify\">\n @if (tableColumn.transform(value) !== undefined) {\n @switch (true) {\n @case (tableColumn.template !== undefined) {\n <ng-container\n [ngTemplateOutlet]=\"tableColumn.template\"\n [ngTemplateOutletContext]=\"{ value: tableColumn.transform(value) }\" />\n }\n @default {\n <span class=\"table-cell-ellipsis\">{{ tableColumn.transform(value) }}</span>\n }\n }\n } @else {\n <span>-</span>\n }\n </section>\n }\n </section>\n } @empty {\n <!-- Empty -->\n <section class=\"table-empty\">\n <p>{{ emptyMessage() ? emptyMessage() : 'We have not data to show yet!' }}</p>\n </section>\n }\n }\n </section>\n\n <!-- Table Actions -->\n @if ((tableColumnActions().length || selects()) && !loading() && tableColumnsToShow().length) {\n <section\n class=\"table-column\"\n [class.table-column--actions]=\"tableColumnActions().length\"\n [class.table-column--selects]=\"selects()\">\n <!-- Header -->\n <section\n class=\"table-header\"\n [class.table-header--actions]=\"tableColumnActions().length\"\n [class.table-header--selects]=\"selects()\">\n <!-- Select All Checkbox -->\n @if (selectsAll()) {\n <!-- <mat-checkbox\n color=\"primary\"\n matTooltip=\"Todo\"\n matTooltipClass=\"Tooltip\"\n class=\"Checkbox\"\n [checked]=\"\n dragAndDropColumnSelected().length === dragAndDropColumns().at(0)?.values?.length\n \"\n [indeterminate]=\"\n !!dragAndDropColumnSelected().length &&\n dragAndDropColumnSelected().length !== dragAndDropColumns().at(0)?.values?.length\n \"\n (change)=\"onSelectOrUnselectAll($event, dragAndDropColumns())\"\n /> -->\n }\n </section>\n @for (value of tableColumnsToShow().at(0)?.values; track $index; let index = $index) {\n <!-- Cell -->\n <section class=\"table-cell table-cell--actions\">\n <!-- Select Checkbox -->\n @if (selects()) {\n <!-- <mat-checkbox\n color=\"primary\"\n class=\"Checkbox\"\n matTooltip=\"Seleccionar\"\n matTooltipClass=\"Tooltip\"\n [checked]=\"isSelected(dragAndDropColumns(), index)\"\n (change)=\"onSelect($event, dragAndDropColumns(), index)\" /> -->\n }\n @if (tableColumnActions()) {\n <!-- Dropdown Menu -->\n <gld-dropdown-menu\n background\n name=\"more button of table cell\"\n type=\"iconButton\"\n iconSize=\"small\"\n direction=\"left\"\n [icon]=\"Icons.more2Fill\"\n (changeValue)=\"\n tableActionFunction({\n tableColumnActionAsEvent: $event,\n tableColumns: tableColumns(),\n index,\n })\n \">\n @for (tableColumnAction of tableColumnActions(); track tableColumnAction.type) {\n <gld-dropdown-button\n [value]=\"tableColumnAction\"\n [icon]=\"tableColumnAction.icon\"\n iconSize=\"tiny\">\n {{ tableColumnAction.label }}\n </gld-dropdown-button>\n }\n </gld-dropdown-menu>\n <!-- <gld-icon-button\n background\n name=\"more button of table cell\"\n iconSize=\"small\"\n [icon]=\"Icons.more2Fill\"> -->\n <!-- <gld-tile color=\"blue-to-green\" class=\"Menu\">\n <section class=\"Menu-content\">\n @for (tableColumnAction of tableColumnActions(); track tableColumnAction.type) {\n <button\n class=\"Menu-button {{ tableColumnAction?.classToHover ?? '' }}\"\n [class.Menu-button--hidden]=\"\n !tableColumnAction.showWhen(buildDataStructure({ index }))\n \"\n (click)=\"\n tableActionFunction({\n tableColumnAction,\n tableColumns: tableColumns(),\n index,\n })\n \">\n <gld-icon size=\"tiny\" [icon]=\"tableColumnAction.icon\" />\n <span class=\"Menu-button-ellipsis\">{{ tableColumnAction.label }}</span>\n </button>\n }\n </section>\n </gld-tile> -->\n <!-- </gld-icon-button> -->\n }\n </section>\n }\n </section>\n }\n</article>\n\n<!-- Pagination -->\n@if (pagination()) {\n <section class=\"table-pagination\">\n <ng-content select=\"gld-table-pagination\" />\n </section>\n}\n", styles: ["@charset \"UTF-8\";:root{--gld-break-point--zero: 0;--gld-break-point--mobile: 320px;--gld-break-point--landscape: 576px;--gld-break-point--tablet: 768px;--gld-break-point--desktop: 1080px;--gld-break-point--extra-desktop: 1280px;--gld-font-size--heading-one: 36px;--gld-font-size--heading-two: 26px;--gld-font-size--heading-three: 20px;--gld-font-size--normal: 16px;--gld-font-size--small: 12px;--gld-font-size--tiny: 8px;--gld-font--poppins: \"Poppins\", sans-serif;--gld-radius--z: 0;--gld-radius--xxxs: 4px;--gld-radius--xxs: 6px;--gld-radius--xs: 8px;--gld-radius--s: 12px;--gld-radius--m: 16px;--gld-radius--l: 24px;--gld-radius--xl: 32px;--gld-radius--xxl: 40px;--gld-spacing--z: 0;--gld-spacing--xxxs: 4px;--gld-spacing--xxs: 8px;--gld-spacing--xs: 12px;--gld-spacing--s: 16px;--gld-spacing--m: 24px;--gld-spacing--l: 32px;--gld-spacing--xl: 48px;--gld-spacing--xxl: 70px;--gld-zindex--one: 1000;--gld-zindex--two: 2000;--gld-zindex--three: 3000;--gld-zindex--four: 4000;--gld-zindex--five: 5000;--gld-icon-size--large: 48px;--gld-icon-size--medium: 40px;--gld-icon-size--normal: 32px;--gld-icon-size--small: 24px;--gld-icon-size--tiny: 16px;--gld-red: #ef4444;--gld-red-transparent--005: rgba(239, 68, 68, .05);--gld-red-transparent--010: rgba(239, 68, 68, .1);--gld-red-transparent--020: rgba(239, 68, 68, .2);--gld-blue: #3c82f6;--gld-blue-transparent--005: rgba(60, 130, 246, .05);--gld-blue-transparent--010: rgba(60, 130, 246, .1);--gld-blue-transparent--020: rgba(60, 130, 246, .2);--gld-green: #12b981;--gld-green-transparent--005: rgba(18, 185, 129, .05);--gld-green-transparent--010: rgba(18, 185, 129, .1);--gld-green-transparent--020: rgba(18, 185, 129, .2);--gld-purple: #a855f7;--gld-purple-transparent--005: rgba(168, 85, 247, .05);--gld-purple-transparent--010: rgba(168, 85, 247, .1);--gld-purple-transparent--020: rgba(168, 85, 247, .2);--gld-purple-transparent--080: rgba(168, 85, 247, .8);--gld-mustard: #ebb305;--gld-mustard-transparent--005: rgba(235, 179, 5, .05);--gld-mustard-transparent--010: rgba(235, 179, 5, .1);--gld-mustard-transparent--020: rgba(235, 179, 5, .2);--gld-orange: #f97315;--gld-orange-transparent--005: rgba(249, 115, 21, .05);--gld-orange-transparent--010: rgba(249, 115, 21, .1);--gld-orange-transparent--020: rgba(249, 115, 21, .2);--gld-pink: #ec4899;--gld-pink-transparent--005: rgba(236, 72, 153, .05);--gld-pink-transparent--010: rgba(236, 72, 153, .1);--gld-pink-transparent--020: rgba(236, 72, 153, .2);--gld-gray: #c1c7e1;--gld-gray-transparent--010: rgba(193, 199, 225, .1);--gld-gray-transparent--020: rgba(193, 199, 225, .2);--gld-gray-transparent--030: rgba(193, 199, 225, .3);--gld-gray-transparent--040: rgba(193, 199, 225, .4);--gld-gray-transparent--050: rgba(193, 199, 225, .5);--gld-gray-transparent--060: rgba(193, 199, 225, .6);--gld-gray-transparent--070: rgba(193, 199, 225, .7);--gld-gray-transparent--080: rgba(193, 199, 225, .8);--gld-gray-transparent--090: rgba(193, 199, 225, .9);--gld-white: #fff;--gld-whitelight: #f9fafb;--gld-whitelight-transparent--090: rgba(249, 250, 251, .9);--gld-whitelight-transparent--080: rgba(249, 250, 251, .8);--gld-whitelight-transparent--070: rgba(249, 250, 251, .7);--gld-whitelight-transparent--060: rgba(249, 250, 251, .6);--gld-whitelight-transparent--030: rgba(249, 250, 251, .3);--gld-darkblue: #101827;--gld-darkblue-transparent--090: rgba(16, 24, 39, .9);--gld-darkblue-transparent--080: rgba(16, 24, 39, .8);--gld-darkblue-transparent--070: rgba(16, 24, 39, .7);--gld-darkblue-transparent--060: rgba(16, 24, 39, .6);--gld-darkblue-transparent--030: rgba(16, 24, 39, .3);--gld-darkblue-transparent--010: rgba(16, 24, 39, .1);--gld-border-size: 2px;--gld-animation-time--150: .15s;--gld-animation-time--250: .25s;--gld-animation-time--10s: 10s;--gld-line-height: 1.2;--gld-max-width: 1280px;--gld-navbar-height: 50px;--gld-sidebar-width: 250px}*,*:before,*:after{box-sizing:border-box;min-width:0}html,body{font-family:var(--font--poppins)}body{margin:0}h1,h2,h3,h4,h5,h6{text-wrap:balance;margin:0}p{text-wrap:pretty;margin:0}:host{width:100%}.table{--gld-color: light-dark(var(--darkblue), var(--whitelight));--gld-border-color: light-dark(var(--gray-transparent--040), var(--gray-transparent--020));--gld-border-radius: var(--radius--xxs);--gld-background: light-dark(var(--whitelight), var(--darkblue));--gld-background--with-transparent: light-dark( var(--gray-transparent--020), var(--gray-transparent--010) );--gld-column-actions-or-selects-width: 40px;--gld-column-actions-and-selects-width: 80px;--gld-header-height: 40px;--gld-cell-height: 40px;--gld-min-height: 100px;min-height:var(--gld-min-height);display:grid;grid-template-columns:1fr;position:relative;border:var(--gld-border-size) solid var(--gld-border-color);border-radius:var(--gld-border-radius);background:var(--background);overflow:hidden;overflow:auto;scrollbar-width:thin;scrollbar-color:light-dark(var(--gray-transparent--040),var(--gray-transparent--020)) transparent;scroll-behavior:smooth}.table::-webkit-scrollbar{width:var(--gld-spacing--xxs);height:var(--gld-spacing--xxs)}.table::-webkit-scrollbar-track{background:transparent}.table::-webkit-scrollbar-thumb{background:light-dark(var(--gray-transparent--040),var(--gray-transparent--020));will-change:background;transition:background var(--gld-animation-time--150) ease;border-radius:var(--gld-radius--s)}.table::-webkit-scrollbar-thumb:hover{background:light-dark(var(--gray-transparent--060),var(--gray-transparent--040))}.table-content{display:flex;flex-wrap:nowrap;overflow:auto;scrollbar-width:thin;scrollbar-color:light-dark(var(--gray-transparent--040),var(--gray-transparent--020)) transparent;scroll-behavior:smooth}.table-content::-webkit-scrollbar{width:var(--gld-spacing--xxs);height:var(--gld-spacing--xxs)}.table-content::-webkit-scrollbar-track{background:transparent}.table-content::-webkit-scrollbar-thumb{background:light-dark(var(--gray-transparent--040),var(--gray-transparent--020));will-change:background;transition:background var(--gld-animation-time--150) ease;border-radius:var(--gld-radius--s)}.table-content::-webkit-scrollbar-thumb:hover{background:light-dark(var(--gray-transparent--060),var(--gray-transparent--040))}.table-header,.table-cell{color:var(--color);font-family:var(--gld-font--poppins);padding:var(--gld-spacing--xxs) var(--gld-spacing--s);border-bottom:var(--gld-border-size) solid var(--gld-border-color)}.table-header-ellipsis,.table-cell-ellipsis{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.table-header-ellipsis--hover,.table-cell-ellipsis--hover{cursor:pointer}.table-header{display:flex;align-items:center;font:600 var(--gld-font-size--small)/var(--gld-line-height) var(--gld-font--poppins);height:var(--gld-header-height);background:var(--gld-background--with-transparent)}.table-header.table-header--actions,.table-header.table-header--selects{justify-content:center}.table-header.table-header--actions.table-header--selects{justify-content:flex-start}.table-header--actions{background:var(--gld-background);border-left:var(--gld-border-size) solid var(--gld-border-color)}.table-header--actions:before{content:\"\";position:absolute;inset:0;background:var(--gld-background--with-transparent)}.table-cell{display:flex;align-items:center;height:var(--gld-cell-height);font:400 var(--gld-font-size--small)/var(--gld-line-height) var(--gld-font--poppins)}.table-cell:last-of-type{margin-bottom:0;border-bottom:none}.table-cell.table-cell--actions,.table-cell.table-cell--selects{justify-content:center;padding:0}.table-cell--actions{position:relative;display:flex;justify-content:center;align-items:center;gap:var(--gld-spacing--xxxs);background:var(--gld-background);border-left:var(--gld-border-size) solid var(--gld-border-color)}.table-column{flex:1 1 auto}.table-column--actions,.table-column--selects,.table-column--actions.table-column--selects{position:absolute;top:0;right:0}.table-column--actions.table-column--selects{width:var(--gld-column-actions-and-selects-width)}.table-column--actions,.table-column--selects{width:var(--gld-column-actions-or-selects-width)}.table-empty{width:100%;display:flex;color:var(--gld-color);background:var(--gld-background--with-transparent);padding:var(--gld-spacing--xs)}.table-empty p{font:400 var(--gld-font-size--normal)/var(--gld-line-height) var(--gld-font--poppins);text-transform:lowercase;margin:auto}.table-empty p:first-letter{text-transform:uppercase}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: DropdownButtonComponent, selector: "gld-dropdown-button", inputs: ["value", "icon", "iconSize", "iconSpace", "moveTopToBottom", "moveLeftToRight", "direction"], outputs: ["changeValue"] }, { kind: "component", type: DropdownMenuComponent, selector: "gld-dropdown-menu", inputs: ["name", "type", "color", "size", "icon", "iconSize", "moveTopToBottom", "moveLeftToRight", "disabled", "full", "direction", "background", "selected", "initialValue"], outputs: ["changeValue", "changeFocus"] }, { kind: "component", type: LoaderComponent, selector: "gld-loader", inputs: ["loading", "background", "radius", "minHeight"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1411
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.1", type: TableComponent, isStandalone: true, selector: "gld-table", inputs: { tableColumns: { classPropertyName: "tableColumns", publicName: "tableColumns", isSignal: true, isRequired: true, transformFunction: null }, emptyMessage: { classPropertyName: "emptyMessage", publicName: "emptyMessage", isSignal: true, isRequired: false, transformFunction: null }, tableHeight: { classPropertyName: "tableHeight", publicName: "tableHeight", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, selects: { classPropertyName: "selects", publicName: "selects", isSignal: true, isRequired: false, transformFunction: null }, selectsAll: { classPropertyName: "selectsAll", publicName: "selectsAll", isSignal: true, isRequired: false, transformFunction: null }, search: { classPropertyName: "search", publicName: "search", isSignal: true, isRequired: false, transformFunction: null }, pagination: { classPropertyName: "pagination", publicName: "pagination", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { tableColumnAction: "tableColumnAction" }, ngImport: i0, template: "<!-- Search -->\n@if (search()) {\n <section class=\"table-search\">\n <ng-content select=\"gld-table-search\" />\n </section>\n}\n\n<!-- Table -->\n<article\n class=\"table\"\n [class.table--empty]=\"!tableColumnsToShow().length\"\n [style.height]=\"tableHeight()\">\n <!-- Table Content -->\n <section\n class=\"table-content\"\n [class.table-content--actions]=\"tableColumnActions().length\"\n [class.table-content--selects]=\"selects()\">\n <!-- Loading -->\n @if (loading()) {\n <gld-loader loading background minHeight=\"100px\" />\n } @else {\n <!-- Table Columns -->\n @for (tableColumn of tableColumnsToShow(); track tableColumn) {\n <section\n class=\"table-column\"\n [style.flexBasis]=\"tableColumn.width\"\n [style.flexShrink]=\"tableColumn.width === 'auto' ? '1' : '0'\"\n [style.flexGrow]=\"tableColumn.width === 'auto' ? '1' : '0'\"\n [style.minWidth]=\"tableColumn.minWidth\"\n [style.maxWidth]=\"tableColumn.maxWidth\">\n <section class=\"table-header\">\n <span class=\"table-header-ellipsis\">{{ tableColumn.label }}</span>\n </section>\n @for (value of tableColumn.values; track $index) {\n <section\n class=\"table-cell\"\n [style.justifyContent]=\"tableColumn.justify\"\n [style.textAlign]=\"tableColumn.justify\">\n @if (tableColumn.transform(value) !== undefined) {\n @switch (true) {\n @case (tableColumn.template !== undefined) {\n <ng-container\n [ngTemplateOutlet]=\"tableColumn.template\"\n [ngTemplateOutletContext]=\"{ value: tableColumn.transform(value) }\" />\n }\n @default {\n <span class=\"table-cell-ellipsis\">{{ tableColumn.transform(value) }}</span>\n }\n }\n } @else {\n <span>-</span>\n }\n </section>\n }\n </section>\n } @empty {\n <!-- Empty -->\n <section class=\"table-empty\">\n <p>{{ emptyMessage() ? emptyMessage() : 'We have not data to show yet!' }}</p>\n </section>\n }\n }\n </section>\n\n <!-- Table Actions -->\n @if ((tableColumnActions().length || selects()) && !loading() && tableColumnsToShow().length) {\n <section\n class=\"table-column\"\n [class.table-column--actions]=\"tableColumnActions().length\"\n [class.table-column--selects]=\"selects()\">\n <!-- Header -->\n <section\n class=\"table-header\"\n [class.table-header--actions]=\"tableColumnActions().length\"\n [class.table-header--selects]=\"selects()\">\n <!-- Select All Checkbox -->\n @if (selectsAll()) {\n <!-- <mat-checkbox\n color=\"primary\"\n matTooltip=\"Todo\"\n matTooltipClass=\"Tooltip\"\n class=\"Checkbox\"\n [checked]=\"\n dragAndDropColumnSelected().length === dragAndDropColumns().at(0)?.values?.length\n \"\n [indeterminate]=\"\n !!dragAndDropColumnSelected().length &&\n dragAndDropColumnSelected().length !== dragAndDropColumns().at(0)?.values?.length\n \"\n (change)=\"onSelectOrUnselectAll($event, dragAndDropColumns())\"\n /> -->\n }\n </section>\n @for (value of tableColumnsToShow().at(0)?.values; track $index; let index = $index) {\n <!-- Cell -->\n <section class=\"table-cell table-cell--actions\">\n <!-- Select Checkbox -->\n @if (selects()) {\n <!-- <mat-checkbox\n color=\"primary\"\n class=\"Checkbox\"\n matTooltip=\"Seleccionar\"\n matTooltipClass=\"Tooltip\"\n [checked]=\"isSelected(dragAndDropColumns(), index)\"\n (change)=\"onSelect($event, dragAndDropColumns(), index)\" /> -->\n }\n @if (tableColumnActions()) {\n <!-- Dropdown Menu -->\n <gld-dropdown-menu\n background\n name=\"more button of table cell\"\n type=\"iconButton\"\n color=\"blue\"\n iconSize=\"small\"\n direction=\"left\"\n [icon]=\"Icons.more2Fill\"\n (changeValue)=\"\n tableActionFunction({\n tableColumnActionAsEvent: $event,\n tableColumns: tableColumns(),\n index,\n })\n \">\n @for (tableColumnAction of tableColumnActions(); track tableColumnAction.type) {\n <gld-dropdown-button\n [value]=\"tableColumnAction\"\n [icon]=\"tableColumnAction.icon\"\n iconSize=\"tiny\">\n {{ tableColumnAction.label }}\n </gld-dropdown-button>\n }\n </gld-dropdown-menu>\n <!-- <gld-icon-button\n background\n name=\"more button of table cell\"\n iconSize=\"small\"\n [icon]=\"Icons.more2Fill\"> -->\n <!-- <gld-tile color=\"blue-to-green\" class=\"Menu\">\n <section class=\"Menu-content\">\n @for (tableColumnAction of tableColumnActions(); track tableColumnAction.type) {\n <button\n class=\"Menu-button {{ tableColumnAction?.classToHover ?? '' }}\"\n [class.Menu-button--hidden]=\"\n !tableColumnAction.showWhen(buildDataStructure({ index }))\n \"\n (click)=\"\n tableActionFunction({\n tableColumnAction,\n tableColumns: tableColumns(),\n index,\n })\n \">\n <gld-icon size=\"tiny\" [icon]=\"tableColumnAction.icon\" />\n <span class=\"Menu-button-ellipsis\">{{ tableColumnAction.label }}</span>\n </button>\n }\n </section>\n </gld-tile> -->\n <!-- </gld-icon-button> -->\n }\n </section>\n }\n </section>\n }\n</article>\n\n<!-- Pagination -->\n@if (pagination()) {\n <section class=\"table-pagination\">\n <ng-content select=\"gld-table-pagination\" />\n </section>\n}\n\n", styles: ["@charset \"UTF-8\";:root{--gld-break-point--zero: 0;--gld-break-point--mobile: 320px;--gld-break-point--landscape: 576px;--gld-break-point--tablet: 768px;--gld-break-point--desktop: 1080px;--gld-break-point--extra-desktop: 1280px;--gld-font-size--heading-one: 36px;--gld-font-size--heading-two: 26px;--gld-font-size--heading-three: 20px;--gld-font-size--normal: 16px;--gld-font-size--small: 12px;--gld-font-size--tiny: 8px;--gld-font--poppins: \"Poppins\", sans-serif;--gld-radius--z: 0;--gld-radius--xxxs: 4px;--gld-radius--xxs: 6px;--gld-radius--xs: 8px;--gld-radius--s: 12px;--gld-radius--m: 16px;--gld-radius--l: 24px;--gld-radius--xl: 32px;--gld-radius--xxl: 40px;--gld-spacing--z: 0;--gld-spacing--xxxs: 4px;--gld-spacing--xxs: 8px;--gld-spacing--xs: 12px;--gld-spacing--s: 16px;--gld-spacing--m: 24px;--gld-spacing--l: 32px;--gld-spacing--xl: 48px;--gld-spacing--xxl: 70px;--gld-zindex--one: 1000;--gld-zindex--two: 2000;--gld-zindex--three: 3000;--gld-zindex--four: 4000;--gld-zindex--five: 5000;--gld-icon-size--large: 48px;--gld-icon-size--medium: 40px;--gld-icon-size--normal: 32px;--gld-icon-size--small: 24px;--gld-icon-size--tiny: 16px;--gld-red: #ef4444;--gld-red-transparent--005: rgba(239, 68, 68, .05);--gld-red-transparent--010: rgba(239, 68, 68, .1);--gld-red-transparent--020: rgba(239, 68, 68, .2);--gld-blue: #3c82f6;--gld-blue-transparent--005: rgba(60, 130, 246, .05);--gld-blue-transparent--010: rgba(60, 130, 246, .1);--gld-blue-transparent--020: rgba(60, 130, 246, .2);--gld-green: #12b981;--gld-green-transparent--005: rgba(18, 185, 129, .05);--gld-green-transparent--010: rgba(18, 185, 129, .1);--gld-green-transparent--020: rgba(18, 185, 129, .2);--gld-purple: #a855f7;--gld-purple-transparent--005: rgba(168, 85, 247, .05);--gld-purple-transparent--010: rgba(168, 85, 247, .1);--gld-purple-transparent--020: rgba(168, 85, 247, .2);--gld-purple-transparent--080: rgba(168, 85, 247, .8);--gld-mustard: #ebb305;--gld-mustard-transparent--005: rgba(235, 179, 5, .05);--gld-mustard-transparent--010: rgba(235, 179, 5, .1);--gld-mustard-transparent--020: rgba(235, 179, 5, .2);--gld-orange: #f97315;--gld-orange-transparent--005: rgba(249, 115, 21, .05);--gld-orange-transparent--010: rgba(249, 115, 21, .1);--gld-orange-transparent--020: rgba(249, 115, 21, .2);--gld-pink: #ec4899;--gld-pink-transparent--005: rgba(236, 72, 153, .05);--gld-pink-transparent--010: rgba(236, 72, 153, .1);--gld-pink-transparent--020: rgba(236, 72, 153, .2);--gld-gray: #c1c7e1;--gld-gray-transparent--010: rgba(193, 199, 225, .1);--gld-gray-transparent--020: rgba(193, 199, 225, .2);--gld-gray-transparent--030: rgba(193, 199, 225, .3);--gld-gray-transparent--040: rgba(193, 199, 225, .4);--gld-gray-transparent--050: rgba(193, 199, 225, .5);--gld-gray-transparent--060: rgba(193, 199, 225, .6);--gld-gray-transparent--070: rgba(193, 199, 225, .7);--gld-gray-transparent--080: rgba(193, 199, 225, .8);--gld-gray-transparent--090: rgba(193, 199, 225, .9);--gld-white: #fff;--gld-whitelight: #f9fafb;--gld-whitelight-transparent--010: rgba(249, 250, 251, .1);--gld-whitelight-transparent--020: rgba(249, 250, 251, .2);--gld-whitelight-transparent--030: rgba(249, 250, 251, .3);--gld-whitelight-transparent--040: rgba(249, 250, 251, .4);--gld-whitelight-transparent--050: rgba(249, 250, 251, .5);--gld-whitelight-transparent--060: rgba(249, 250, 251, .6);--gld-whitelight-transparent--070: rgba(249, 250, 251, .7);--gld-whitelight-transparent--080: rgba(249, 250, 251, .8);--gld-whitelight-transparent--090: rgba(249, 250, 251, .9);--gld-darkblue: #101827;--gld-darkblue-transparent--010: rgba(16, 24, 39, .1);--gld-darkblue-transparent--020: rgba(16, 24, 39, .2);--gld-darkblue-transparent--030: rgba(16, 24, 39, .3);--gld-darkblue-transparent--040: rgba(16, 24, 39, .4);--gld-darkblue-transparent--050: rgba(16, 24, 39, .5);--gld-darkblue-transparent--060: rgba(16, 24, 39, .6);--gld-darkblue-transparent--070: rgba(16, 24, 39, .7);--gld-darkblue-transparent--080: rgba(16, 24, 39, .8);--gld-darkblue-transparent--090: rgba(16, 24, 39, .9);--gld-border-size: 2px;--gld-animation-time--150: .15s;--gld-animation-time--250: .25s;--gld-animation-time--10s: 10s;--gld-line-height: 1.2;--gld-max-width: 1280px;--gld-navbar-height: 50px;--gld-sidebar-width: 250px}*,*:before,*:after{box-sizing:border-box;min-width:0}html,body{font-family:var(--font--poppins)}body{margin:0}h1,h2,h3,h4,h5,h6{text-wrap:balance;margin:0}p{text-wrap:pretty;margin:0}:host{width:100%}.table{--gld-color: light-dark(var(--gld-darkblue), var(--gld-whitelight));--gld-border-color: light-dark( var(--gld-gray-transparent--040), var(--gld-gray-transparent--020) );--gld-border-radius: var(--gld-radius--xxs);--gld-background: light-dark(var(--gld-whitelight), var(--gld-darkblue));--gld-background--with-transparent: light-dark( var(--gld-gray-transparent--020), var(--gld-gray-transparent--010) );--gld-column-actions-or-selects-width: 40px;--gld-column-actions-and-selects-width: 80px;--gld-header-height: 40px;--gld-cell-height: 40px;--gld-min-height: 100px;min-height:var(--gld-min-height);display:grid;grid-template-columns:1fr;position:relative;border:var(--gld-border-size) solid var(--gld-border-color);border-radius:var(--gld-border-radius);background:var(--background);overflow:hidden;overflow:auto;scrollbar-width:thin;scrollbar-color:light-dark(var(--gray-transparent--040),var(--gray-transparent--020)) transparent;scroll-behavior:smooth}.table::-webkit-scrollbar{width:var(--gld-spacing--xxs);height:var(--gld-spacing--xxs)}.table::-webkit-scrollbar-track{background:transparent}.table::-webkit-scrollbar-thumb{background:light-dark(var(--gray-transparent--040),var(--gray-transparent--020));will-change:background;transition:background var(--gld-animation-time--150) ease;border-radius:var(--gld-radius--s)}.table::-webkit-scrollbar-thumb:hover{background:light-dark(var(--gray-transparent--060),var(--gray-transparent--040))}.table-content{display:flex;flex-wrap:nowrap;overflow:auto;scrollbar-width:thin;scrollbar-color:light-dark(var(--gray-transparent--040),var(--gray-transparent--020)) transparent;scroll-behavior:smooth}.table-content::-webkit-scrollbar{width:var(--gld-spacing--xxs);height:var(--gld-spacing--xxs)}.table-content::-webkit-scrollbar-track{background:transparent}.table-content::-webkit-scrollbar-thumb{background:light-dark(var(--gray-transparent--040),var(--gray-transparent--020));will-change:background;transition:background var(--gld-animation-time--150) ease;border-radius:var(--gld-radius--s)}.table-content::-webkit-scrollbar-thumb:hover{background:light-dark(var(--gray-transparent--060),var(--gray-transparent--040))}.table-header,.table-cell{color:var(--color);font-family:var(--gld-font--poppins);padding:var(--gld-spacing--xxs) var(--gld-spacing--s);border-bottom:var(--gld-border-size) solid var(--gld-border-color)}.table-header-ellipsis,.table-cell-ellipsis{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.table-header-ellipsis--hover,.table-cell-ellipsis--hover{cursor:pointer}.table-header{display:flex;align-items:center;font:600 var(--gld-font-size--small)/var(--gld-line-height) var(--gld-font--poppins);height:var(--gld-header-height);background:var(--gld-background--with-transparent)}.table-header.table-header--actions,.table-header.table-header--selects{justify-content:center}.table-header.table-header--actions.table-header--selects{justify-content:flex-start}.table-header--actions{background:var(--gld-background);border-left:var(--gld-border-size) solid var(--gld-border-color)}.table-header--actions:before{content:\"\";position:absolute;inset:0;background:var(--gld-background--with-transparent)}.table-cell{display:flex;align-items:center;height:var(--gld-cell-height);font:400 var(--gld-font-size--small)/var(--gld-line-height) var(--gld-font--poppins)}.table-cell:last-of-type{margin-bottom:0;border-bottom:none}.table-cell.table-cell--actions,.table-cell.table-cell--selects{justify-content:center;padding:0}.table-cell--actions{position:relative;display:flex;justify-content:center;align-items:center;gap:var(--gld-spacing--xxxs);background:var(--gld-background);border-left:var(--gld-border-size) solid var(--gld-border-color)}.table-column{flex:1 1 auto}.table-column--actions,.table-column--selects,.table-column--actions.table-column--selects{position:absolute;top:0;right:0}.table-column--actions.table-column--selects{width:var(--gld-column-actions-and-selects-width)}.table-column--actions,.table-column--selects{width:var(--gld-column-actions-or-selects-width)}.table-empty{width:100%;display:flex;color:var(--gld-color);background:var(--gld-background--with-transparent);padding:var(--gld-spacing--xs)}.table-empty p{font:400 var(--gld-font-size--normal)/var(--gld-line-height) var(--gld-font--poppins);text-transform:lowercase;margin:auto}.table-empty p:first-letter{text-transform:uppercase}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: DropdownButtonComponent, selector: "gld-dropdown-button", inputs: ["value", "icon", "iconSize", "iconSpace", "moveTopToBottom", "moveLeftToRight", "direction"], outputs: ["changeValue"] }, { kind: "component", type: DropdownMenuComponent, selector: "gld-dropdown-menu", inputs: ["name", "type", "color", "size", "icon", "iconSize", "moveTopToBottom", "moveLeftToRight", "disabled", "full", "direction", "background", "selected", "initialValue"], outputs: ["changeValue", "changeFocus"] }, { kind: "component", type: LoaderComponent, selector: "gld-loader", inputs: ["loading", "background", "radius", "minHeight"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1417
1412
|
}
|
|
1418
1413
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: TableComponent, decorators: [{
|
|
1419
1414
|
type: Component,
|
|
1420
|
-
args: [{ selector: 'gld-table', standalone: true, imports: [NgTemplateOutlet, ...components], changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- Search -->\n@if (search()) {\n <section class=\"table-search\">\n <ng-content select=\"gld-table-search\" />\n </section>\n}\n\n<!-- Table -->\n<article\n class=\"table\"\n [class.table--empty]=\"!tableColumnsToShow().length\"\n [style.height]=\"tableHeight()\">\n <!-- Table Content -->\n <section\n class=\"table-content\"\n [class.table-content--actions]=\"tableColumnActions().length\"\n [class.table-content--selects]=\"selects()\">\n <!-- Loading -->\n @if (loading()) {\n <gld-loader loading background minHeight=\"100px\" />\n } @else {\n <!-- Table Columns -->\n @for (tableColumn of tableColumnsToShow(); track tableColumn) {\n <section\n class=\"table-column\"\n [style.flexBasis]=\"tableColumn.width\"\n [style.flexShrink]=\"tableColumn.width === 'auto' ? '1' : '0'\"\n [style.flexGrow]=\"tableColumn.width === 'auto' ? '1' : '0'\"\n [style.minWidth]=\"tableColumn.minWidth\"\n [style.maxWidth]=\"tableColumn.maxWidth\">\n <section class=\"table-header\">\n <span class=\"table-header-ellipsis\">{{ tableColumn.label }}</span>\n </section>\n @for (value of tableColumn.values; track $index) {\n <section\n class=\"table-cell\"\n [style.justifyContent]=\"tableColumn.justify\"\n [style.textAlign]=\"tableColumn.justify\">\n @if (tableColumn.transform(value) !== undefined) {\n @switch (true) {\n @case (tableColumn.template !== undefined) {\n <ng-container\n [ngTemplateOutlet]=\"tableColumn.template\"\n [ngTemplateOutletContext]=\"{ value: tableColumn.transform(value) }\" />\n }\n @default {\n <span class=\"table-cell-ellipsis\">{{ tableColumn.transform(value) }}</span>\n }\n }\n } @else {\n <span>-</span>\n }\n </section>\n }\n </section>\n } @empty {\n <!-- Empty -->\n <section class=\"table-empty\">\n <p>{{ emptyMessage() ? emptyMessage() : 'We have not data to show yet!' }}</p>\n </section>\n }\n }\n </section>\n\n <!-- Table Actions -->\n @if ((tableColumnActions().length || selects()) && !loading() && tableColumnsToShow().length) {\n <section\n class=\"table-column\"\n [class.table-column--actions]=\"tableColumnActions().length\"\n [class.table-column--selects]=\"selects()\">\n <!-- Header -->\n <section\n class=\"table-header\"\n [class.table-header--actions]=\"tableColumnActions().length\"\n [class.table-header--selects]=\"selects()\">\n <!-- Select All Checkbox -->\n @if (selectsAll()) {\n <!-- <mat-checkbox\n color=\"primary\"\n matTooltip=\"Todo\"\n matTooltipClass=\"Tooltip\"\n class=\"Checkbox\"\n [checked]=\"\n dragAndDropColumnSelected().length === dragAndDropColumns().at(0)?.values?.length\n \"\n [indeterminate]=\"\n !!dragAndDropColumnSelected().length &&\n dragAndDropColumnSelected().length !== dragAndDropColumns().at(0)?.values?.length\n \"\n (change)=\"onSelectOrUnselectAll($event, dragAndDropColumns())\"\n /> -->\n }\n </section>\n @for (value of tableColumnsToShow().at(0)?.values; track $index; let index = $index) {\n <!-- Cell -->\n <section class=\"table-cell table-cell--actions\">\n <!-- Select Checkbox -->\n @if (selects()) {\n <!-- <mat-checkbox\n color=\"primary\"\n class=\"Checkbox\"\n matTooltip=\"Seleccionar\"\n matTooltipClass=\"Tooltip\"\n [checked]=\"isSelected(dragAndDropColumns(), index)\"\n (change)=\"onSelect($event, dragAndDropColumns(), index)\" /> -->\n }\n @if (tableColumnActions()) {\n <!-- Dropdown Menu -->\n <gld-dropdown-menu\n background\n name=\"more button of table cell\"\n type=\"iconButton\"\n iconSize=\"small\"\n direction=\"left\"\n [icon]=\"Icons.more2Fill\"\n (changeValue)=\"\n tableActionFunction({\n tableColumnActionAsEvent: $event,\n tableColumns: tableColumns(),\n index,\n })\n \">\n @for (tableColumnAction of tableColumnActions(); track tableColumnAction.type) {\n <gld-dropdown-button\n [value]=\"tableColumnAction\"\n [icon]=\"tableColumnAction.icon\"\n iconSize=\"tiny\">\n {{ tableColumnAction.label }}\n </gld-dropdown-button>\n }\n </gld-dropdown-menu>\n <!-- <gld-icon-button\n background\n name=\"more button of table cell\"\n iconSize=\"small\"\n [icon]=\"Icons.more2Fill\"> -->\n <!-- <gld-tile color=\"blue-to-green\" class=\"Menu\">\n <section class=\"Menu-content\">\n @for (tableColumnAction of tableColumnActions(); track tableColumnAction.type) {\n <button\n class=\"Menu-button {{ tableColumnAction?.classToHover ?? '' }}\"\n [class.Menu-button--hidden]=\"\n !tableColumnAction.showWhen(buildDataStructure({ index }))\n \"\n (click)=\"\n tableActionFunction({\n tableColumnAction,\n tableColumns: tableColumns(),\n index,\n })\n \">\n <gld-icon size=\"tiny\" [icon]=\"tableColumnAction.icon\" />\n <span class=\"Menu-button-ellipsis\">{{ tableColumnAction.label }}</span>\n </button>\n }\n </section>\n </gld-tile> -->\n <!-- </gld-icon-button> -->\n }\n </section>\n }\n </section>\n }\n</article>\n\n<!-- Pagination -->\n@if (pagination()) {\n <section class=\"table-pagination\">\n <ng-content select=\"gld-table-pagination\" />\n </section>\n}\n", styles: ["@charset \"UTF-8\";:root{--gld-break-point--zero: 0;--gld-break-point--mobile: 320px;--gld-break-point--landscape: 576px;--gld-break-point--tablet: 768px;--gld-break-point--desktop: 1080px;--gld-break-point--extra-desktop: 1280px;--gld-font-size--heading-one: 36px;--gld-font-size--heading-two: 26px;--gld-font-size--heading-three: 20px;--gld-font-size--normal: 16px;--gld-font-size--small: 12px;--gld-font-size--tiny: 8px;--gld-font--poppins: \"Poppins\", sans-serif;--gld-radius--z: 0;--gld-radius--xxxs: 4px;--gld-radius--xxs: 6px;--gld-radius--xs: 8px;--gld-radius--s: 12px;--gld-radius--m: 16px;--gld-radius--l: 24px;--gld-radius--xl: 32px;--gld-radius--xxl: 40px;--gld-spacing--z: 0;--gld-spacing--xxxs: 4px;--gld-spacing--xxs: 8px;--gld-spacing--xs: 12px;--gld-spacing--s: 16px;--gld-spacing--m: 24px;--gld-spacing--l: 32px;--gld-spacing--xl: 48px;--gld-spacing--xxl: 70px;--gld-zindex--one: 1000;--gld-zindex--two: 2000;--gld-zindex--three: 3000;--gld-zindex--four: 4000;--gld-zindex--five: 5000;--gld-icon-size--large: 48px;--gld-icon-size--medium: 40px;--gld-icon-size--normal: 32px;--gld-icon-size--small: 24px;--gld-icon-size--tiny: 16px;--gld-red: #ef4444;--gld-red-transparent--005: rgba(239, 68, 68, .05);--gld-red-transparent--010: rgba(239, 68, 68, .1);--gld-red-transparent--020: rgba(239, 68, 68, .2);--gld-blue: #3c82f6;--gld-blue-transparent--005: rgba(60, 130, 246, .05);--gld-blue-transparent--010: rgba(60, 130, 246, .1);--gld-blue-transparent--020: rgba(60, 130, 246, .2);--gld-green: #12b981;--gld-green-transparent--005: rgba(18, 185, 129, .05);--gld-green-transparent--010: rgba(18, 185, 129, .1);--gld-green-transparent--020: rgba(18, 185, 129, .2);--gld-purple: #a855f7;--gld-purple-transparent--005: rgba(168, 85, 247, .05);--gld-purple-transparent--010: rgba(168, 85, 247, .1);--gld-purple-transparent--020: rgba(168, 85, 247, .2);--gld-purple-transparent--080: rgba(168, 85, 247, .8);--gld-mustard: #ebb305;--gld-mustard-transparent--005: rgba(235, 179, 5, .05);--gld-mustard-transparent--010: rgba(235, 179, 5, .1);--gld-mustard-transparent--020: rgba(235, 179, 5, .2);--gld-orange: #f97315;--gld-orange-transparent--005: rgba(249, 115, 21, .05);--gld-orange-transparent--010: rgba(249, 115, 21, .1);--gld-orange-transparent--020: rgba(249, 115, 21, .2);--gld-pink: #ec4899;--gld-pink-transparent--005: rgba(236, 72, 153, .05);--gld-pink-transparent--010: rgba(236, 72, 153, .1);--gld-pink-transparent--020: rgba(236, 72, 153, .2);--gld-gray: #c1c7e1;--gld-gray-transparent--010: rgba(193, 199, 225, .1);--gld-gray-transparent--020: rgba(193, 199, 225, .2);--gld-gray-transparent--030: rgba(193, 199, 225, .3);--gld-gray-transparent--040: rgba(193, 199, 225, .4);--gld-gray-transparent--050: rgba(193, 199, 225, .5);--gld-gray-transparent--060: rgba(193, 199, 225, .6);--gld-gray-transparent--070: rgba(193, 199, 225, .7);--gld-gray-transparent--080: rgba(193, 199, 225, .8);--gld-gray-transparent--090: rgba(193, 199, 225, .9);--gld-white: #fff;--gld-whitelight: #f9fafb;--gld-whitelight-transparent--090: rgba(249, 250, 251, .9);--gld-whitelight-transparent--080: rgba(249, 250, 251, .8);--gld-whitelight-transparent--070: rgba(249, 250, 251, .7);--gld-whitelight-transparent--060: rgba(249, 250, 251, .6);--gld-whitelight-transparent--030: rgba(249, 250, 251, .3);--gld-darkblue: #101827;--gld-darkblue-transparent--090: rgba(16, 24, 39, .9);--gld-darkblue-transparent--080: rgba(16, 24, 39, .8);--gld-darkblue-transparent--070: rgba(16, 24, 39, .7);--gld-darkblue-transparent--060: rgba(16, 24, 39, .6);--gld-darkblue-transparent--030: rgba(16, 24, 39, .3);--gld-darkblue-transparent--010: rgba(16, 24, 39, .1);--gld-border-size: 2px;--gld-animation-time--150: .15s;--gld-animation-time--250: .25s;--gld-animation-time--10s: 10s;--gld-line-height: 1.2;--gld-max-width: 1280px;--gld-navbar-height: 50px;--gld-sidebar-width: 250px}*,*:before,*:after{box-sizing:border-box;min-width:0}html,body{font-family:var(--font--poppins)}body{margin:0}h1,h2,h3,h4,h5,h6{text-wrap:balance;margin:0}p{text-wrap:pretty;margin:0}:host{width:100%}.table{--gld-color: light-dark(var(--darkblue), var(--whitelight));--gld-border-color: light-dark(var(--gray-transparent--040), var(--gray-transparent--020));--gld-border-radius: var(--radius--xxs);--gld-background: light-dark(var(--whitelight), var(--darkblue));--gld-background--with-transparent: light-dark( var(--gray-transparent--020), var(--gray-transparent--010) );--gld-column-actions-or-selects-width: 40px;--gld-column-actions-and-selects-width: 80px;--gld-header-height: 40px;--gld-cell-height: 40px;--gld-min-height: 100px;min-height:var(--gld-min-height);display:grid;grid-template-columns:1fr;position:relative;border:var(--gld-border-size) solid var(--gld-border-color);border-radius:var(--gld-border-radius);background:var(--background);overflow:hidden;overflow:auto;scrollbar-width:thin;scrollbar-color:light-dark(var(--gray-transparent--040),var(--gray-transparent--020)) transparent;scroll-behavior:smooth}.table::-webkit-scrollbar{width:var(--gld-spacing--xxs);height:var(--gld-spacing--xxs)}.table::-webkit-scrollbar-track{background:transparent}.table::-webkit-scrollbar-thumb{background:light-dark(var(--gray-transparent--040),var(--gray-transparent--020));will-change:background;transition:background var(--gld-animation-time--150) ease;border-radius:var(--gld-radius--s)}.table::-webkit-scrollbar-thumb:hover{background:light-dark(var(--gray-transparent--060),var(--gray-transparent--040))}.table-content{display:flex;flex-wrap:nowrap;overflow:auto;scrollbar-width:thin;scrollbar-color:light-dark(var(--gray-transparent--040),var(--gray-transparent--020)) transparent;scroll-behavior:smooth}.table-content::-webkit-scrollbar{width:var(--gld-spacing--xxs);height:var(--gld-spacing--xxs)}.table-content::-webkit-scrollbar-track{background:transparent}.table-content::-webkit-scrollbar-thumb{background:light-dark(var(--gray-transparent--040),var(--gray-transparent--020));will-change:background;transition:background var(--gld-animation-time--150) ease;border-radius:var(--gld-radius--s)}.table-content::-webkit-scrollbar-thumb:hover{background:light-dark(var(--gray-transparent--060),var(--gray-transparent--040))}.table-header,.table-cell{color:var(--color);font-family:var(--gld-font--poppins);padding:var(--gld-spacing--xxs) var(--gld-spacing--s);border-bottom:var(--gld-border-size) solid var(--gld-border-color)}.table-header-ellipsis,.table-cell-ellipsis{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.table-header-ellipsis--hover,.table-cell-ellipsis--hover{cursor:pointer}.table-header{display:flex;align-items:center;font:600 var(--gld-font-size--small)/var(--gld-line-height) var(--gld-font--poppins);height:var(--gld-header-height);background:var(--gld-background--with-transparent)}.table-header.table-header--actions,.table-header.table-header--selects{justify-content:center}.table-header.table-header--actions.table-header--selects{justify-content:flex-start}.table-header--actions{background:var(--gld-background);border-left:var(--gld-border-size) solid var(--gld-border-color)}.table-header--actions:before{content:\"\";position:absolute;inset:0;background:var(--gld-background--with-transparent)}.table-cell{display:flex;align-items:center;height:var(--gld-cell-height);font:400 var(--gld-font-size--small)/var(--gld-line-height) var(--gld-font--poppins)}.table-cell:last-of-type{margin-bottom:0;border-bottom:none}.table-cell.table-cell--actions,.table-cell.table-cell--selects{justify-content:center;padding:0}.table-cell--actions{position:relative;display:flex;justify-content:center;align-items:center;gap:var(--gld-spacing--xxxs);background:var(--gld-background);border-left:var(--gld-border-size) solid var(--gld-border-color)}.table-column{flex:1 1 auto}.table-column--actions,.table-column--selects,.table-column--actions.table-column--selects{position:absolute;top:0;right:0}.table-column--actions.table-column--selects{width:var(--gld-column-actions-and-selects-width)}.table-column--actions,.table-column--selects{width:var(--gld-column-actions-or-selects-width)}.table-empty{width:100%;display:flex;color:var(--gld-color);background:var(--gld-background--with-transparent);padding:var(--gld-spacing--xs)}.table-empty p{font:400 var(--gld-font-size--normal)/var(--gld-line-height) var(--gld-font--poppins);text-transform:lowercase;margin:auto}.table-empty p:first-letter{text-transform:uppercase}\n"] }]
|
|
1421
|
-
}]
|
|
1415
|
+
args: [{ selector: 'gld-table', standalone: true, imports: [NgTemplateOutlet, ...components], changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- Search -->\n@if (search()) {\n <section class=\"table-search\">\n <ng-content select=\"gld-table-search\" />\n </section>\n}\n\n<!-- Table -->\n<article\n class=\"table\"\n [class.table--empty]=\"!tableColumnsToShow().length\"\n [style.height]=\"tableHeight()\">\n <!-- Table Content -->\n <section\n class=\"table-content\"\n [class.table-content--actions]=\"tableColumnActions().length\"\n [class.table-content--selects]=\"selects()\">\n <!-- Loading -->\n @if (loading()) {\n <gld-loader loading background minHeight=\"100px\" />\n } @else {\n <!-- Table Columns -->\n @for (tableColumn of tableColumnsToShow(); track tableColumn) {\n <section\n class=\"table-column\"\n [style.flexBasis]=\"tableColumn.width\"\n [style.flexShrink]=\"tableColumn.width === 'auto' ? '1' : '0'\"\n [style.flexGrow]=\"tableColumn.width === 'auto' ? '1' : '0'\"\n [style.minWidth]=\"tableColumn.minWidth\"\n [style.maxWidth]=\"tableColumn.maxWidth\">\n <section class=\"table-header\">\n <span class=\"table-header-ellipsis\">{{ tableColumn.label }}</span>\n </section>\n @for (value of tableColumn.values; track $index) {\n <section\n class=\"table-cell\"\n [style.justifyContent]=\"tableColumn.justify\"\n [style.textAlign]=\"tableColumn.justify\">\n @if (tableColumn.transform(value) !== undefined) {\n @switch (true) {\n @case (tableColumn.template !== undefined) {\n <ng-container\n [ngTemplateOutlet]=\"tableColumn.template\"\n [ngTemplateOutletContext]=\"{ value: tableColumn.transform(value) }\" />\n }\n @default {\n <span class=\"table-cell-ellipsis\">{{ tableColumn.transform(value) }}</span>\n }\n }\n } @else {\n <span>-</span>\n }\n </section>\n }\n </section>\n } @empty {\n <!-- Empty -->\n <section class=\"table-empty\">\n <p>{{ emptyMessage() ? emptyMessage() : 'We have not data to show yet!' }}</p>\n </section>\n }\n }\n </section>\n\n <!-- Table Actions -->\n @if ((tableColumnActions().length || selects()) && !loading() && tableColumnsToShow().length) {\n <section\n class=\"table-column\"\n [class.table-column--actions]=\"tableColumnActions().length\"\n [class.table-column--selects]=\"selects()\">\n <!-- Header -->\n <section\n class=\"table-header\"\n [class.table-header--actions]=\"tableColumnActions().length\"\n [class.table-header--selects]=\"selects()\">\n <!-- Select All Checkbox -->\n @if (selectsAll()) {\n <!-- <mat-checkbox\n color=\"primary\"\n matTooltip=\"Todo\"\n matTooltipClass=\"Tooltip\"\n class=\"Checkbox\"\n [checked]=\"\n dragAndDropColumnSelected().length === dragAndDropColumns().at(0)?.values?.length\n \"\n [indeterminate]=\"\n !!dragAndDropColumnSelected().length &&\n dragAndDropColumnSelected().length !== dragAndDropColumns().at(0)?.values?.length\n \"\n (change)=\"onSelectOrUnselectAll($event, dragAndDropColumns())\"\n /> -->\n }\n </section>\n @for (value of tableColumnsToShow().at(0)?.values; track $index; let index = $index) {\n <!-- Cell -->\n <section class=\"table-cell table-cell--actions\">\n <!-- Select Checkbox -->\n @if (selects()) {\n <!-- <mat-checkbox\n color=\"primary\"\n class=\"Checkbox\"\n matTooltip=\"Seleccionar\"\n matTooltipClass=\"Tooltip\"\n [checked]=\"isSelected(dragAndDropColumns(), index)\"\n (change)=\"onSelect($event, dragAndDropColumns(), index)\" /> -->\n }\n @if (tableColumnActions()) {\n <!-- Dropdown Menu -->\n <gld-dropdown-menu\n background\n name=\"more button of table cell\"\n type=\"iconButton\"\n color=\"blue\"\n iconSize=\"small\"\n direction=\"left\"\n [icon]=\"Icons.more2Fill\"\n (changeValue)=\"\n tableActionFunction({\n tableColumnActionAsEvent: $event,\n tableColumns: tableColumns(),\n index,\n })\n \">\n @for (tableColumnAction of tableColumnActions(); track tableColumnAction.type) {\n <gld-dropdown-button\n [value]=\"tableColumnAction\"\n [icon]=\"tableColumnAction.icon\"\n iconSize=\"tiny\">\n {{ tableColumnAction.label }}\n </gld-dropdown-button>\n }\n </gld-dropdown-menu>\n <!-- <gld-icon-button\n background\n name=\"more button of table cell\"\n iconSize=\"small\"\n [icon]=\"Icons.more2Fill\"> -->\n <!-- <gld-tile color=\"blue-to-green\" class=\"Menu\">\n <section class=\"Menu-content\">\n @for (tableColumnAction of tableColumnActions(); track tableColumnAction.type) {\n <button\n class=\"Menu-button {{ tableColumnAction?.classToHover ?? '' }}\"\n [class.Menu-button--hidden]=\"\n !tableColumnAction.showWhen(buildDataStructure({ index }))\n \"\n (click)=\"\n tableActionFunction({\n tableColumnAction,\n tableColumns: tableColumns(),\n index,\n })\n \">\n <gld-icon size=\"tiny\" [icon]=\"tableColumnAction.icon\" />\n <span class=\"Menu-button-ellipsis\">{{ tableColumnAction.label }}</span>\n </button>\n }\n </section>\n </gld-tile> -->\n <!-- </gld-icon-button> -->\n }\n </section>\n }\n </section>\n }\n</article>\n\n<!-- Pagination -->\n@if (pagination()) {\n <section class=\"table-pagination\">\n <ng-content select=\"gld-table-pagination\" />\n </section>\n}\n\n", styles: ["@charset \"UTF-8\";:root{--gld-break-point--zero: 0;--gld-break-point--mobile: 320px;--gld-break-point--landscape: 576px;--gld-break-point--tablet: 768px;--gld-break-point--desktop: 1080px;--gld-break-point--extra-desktop: 1280px;--gld-font-size--heading-one: 36px;--gld-font-size--heading-two: 26px;--gld-font-size--heading-three: 20px;--gld-font-size--normal: 16px;--gld-font-size--small: 12px;--gld-font-size--tiny: 8px;--gld-font--poppins: \"Poppins\", sans-serif;--gld-radius--z: 0;--gld-radius--xxxs: 4px;--gld-radius--xxs: 6px;--gld-radius--xs: 8px;--gld-radius--s: 12px;--gld-radius--m: 16px;--gld-radius--l: 24px;--gld-radius--xl: 32px;--gld-radius--xxl: 40px;--gld-spacing--z: 0;--gld-spacing--xxxs: 4px;--gld-spacing--xxs: 8px;--gld-spacing--xs: 12px;--gld-spacing--s: 16px;--gld-spacing--m: 24px;--gld-spacing--l: 32px;--gld-spacing--xl: 48px;--gld-spacing--xxl: 70px;--gld-zindex--one: 1000;--gld-zindex--two: 2000;--gld-zindex--three: 3000;--gld-zindex--four: 4000;--gld-zindex--five: 5000;--gld-icon-size--large: 48px;--gld-icon-size--medium: 40px;--gld-icon-size--normal: 32px;--gld-icon-size--small: 24px;--gld-icon-size--tiny: 16px;--gld-red: #ef4444;--gld-red-transparent--005: rgba(239, 68, 68, .05);--gld-red-transparent--010: rgba(239, 68, 68, .1);--gld-red-transparent--020: rgba(239, 68, 68, .2);--gld-blue: #3c82f6;--gld-blue-transparent--005: rgba(60, 130, 246, .05);--gld-blue-transparent--010: rgba(60, 130, 246, .1);--gld-blue-transparent--020: rgba(60, 130, 246, .2);--gld-green: #12b981;--gld-green-transparent--005: rgba(18, 185, 129, .05);--gld-green-transparent--010: rgba(18, 185, 129, .1);--gld-green-transparent--020: rgba(18, 185, 129, .2);--gld-purple: #a855f7;--gld-purple-transparent--005: rgba(168, 85, 247, .05);--gld-purple-transparent--010: rgba(168, 85, 247, .1);--gld-purple-transparent--020: rgba(168, 85, 247, .2);--gld-purple-transparent--080: rgba(168, 85, 247, .8);--gld-mustard: #ebb305;--gld-mustard-transparent--005: rgba(235, 179, 5, .05);--gld-mustard-transparent--010: rgba(235, 179, 5, .1);--gld-mustard-transparent--020: rgba(235, 179, 5, .2);--gld-orange: #f97315;--gld-orange-transparent--005: rgba(249, 115, 21, .05);--gld-orange-transparent--010: rgba(249, 115, 21, .1);--gld-orange-transparent--020: rgba(249, 115, 21, .2);--gld-pink: #ec4899;--gld-pink-transparent--005: rgba(236, 72, 153, .05);--gld-pink-transparent--010: rgba(236, 72, 153, .1);--gld-pink-transparent--020: rgba(236, 72, 153, .2);--gld-gray: #c1c7e1;--gld-gray-transparent--010: rgba(193, 199, 225, .1);--gld-gray-transparent--020: rgba(193, 199, 225, .2);--gld-gray-transparent--030: rgba(193, 199, 225, .3);--gld-gray-transparent--040: rgba(193, 199, 225, .4);--gld-gray-transparent--050: rgba(193, 199, 225, .5);--gld-gray-transparent--060: rgba(193, 199, 225, .6);--gld-gray-transparent--070: rgba(193, 199, 225, .7);--gld-gray-transparent--080: rgba(193, 199, 225, .8);--gld-gray-transparent--090: rgba(193, 199, 225, .9);--gld-white: #fff;--gld-whitelight: #f9fafb;--gld-whitelight-transparent--010: rgba(249, 250, 251, .1);--gld-whitelight-transparent--020: rgba(249, 250, 251, .2);--gld-whitelight-transparent--030: rgba(249, 250, 251, .3);--gld-whitelight-transparent--040: rgba(249, 250, 251, .4);--gld-whitelight-transparent--050: rgba(249, 250, 251, .5);--gld-whitelight-transparent--060: rgba(249, 250, 251, .6);--gld-whitelight-transparent--070: rgba(249, 250, 251, .7);--gld-whitelight-transparent--080: rgba(249, 250, 251, .8);--gld-whitelight-transparent--090: rgba(249, 250, 251, .9);--gld-darkblue: #101827;--gld-darkblue-transparent--010: rgba(16, 24, 39, .1);--gld-darkblue-transparent--020: rgba(16, 24, 39, .2);--gld-darkblue-transparent--030: rgba(16, 24, 39, .3);--gld-darkblue-transparent--040: rgba(16, 24, 39, .4);--gld-darkblue-transparent--050: rgba(16, 24, 39, .5);--gld-darkblue-transparent--060: rgba(16, 24, 39, .6);--gld-darkblue-transparent--070: rgba(16, 24, 39, .7);--gld-darkblue-transparent--080: rgba(16, 24, 39, .8);--gld-darkblue-transparent--090: rgba(16, 24, 39, .9);--gld-border-size: 2px;--gld-animation-time--150: .15s;--gld-animation-time--250: .25s;--gld-animation-time--10s: 10s;--gld-line-height: 1.2;--gld-max-width: 1280px;--gld-navbar-height: 50px;--gld-sidebar-width: 250px}*,*:before,*:after{box-sizing:border-box;min-width:0}html,body{font-family:var(--font--poppins)}body{margin:0}h1,h2,h3,h4,h5,h6{text-wrap:balance;margin:0}p{text-wrap:pretty;margin:0}:host{width:100%}.table{--gld-color: light-dark(var(--gld-darkblue), var(--gld-whitelight));--gld-border-color: light-dark( var(--gld-gray-transparent--040), var(--gld-gray-transparent--020) );--gld-border-radius: var(--gld-radius--xxs);--gld-background: light-dark(var(--gld-whitelight), var(--gld-darkblue));--gld-background--with-transparent: light-dark( var(--gld-gray-transparent--020), var(--gld-gray-transparent--010) );--gld-column-actions-or-selects-width: 40px;--gld-column-actions-and-selects-width: 80px;--gld-header-height: 40px;--gld-cell-height: 40px;--gld-min-height: 100px;min-height:var(--gld-min-height);display:grid;grid-template-columns:1fr;position:relative;border:var(--gld-border-size) solid var(--gld-border-color);border-radius:var(--gld-border-radius);background:var(--background);overflow:hidden;overflow:auto;scrollbar-width:thin;scrollbar-color:light-dark(var(--gray-transparent--040),var(--gray-transparent--020)) transparent;scroll-behavior:smooth}.table::-webkit-scrollbar{width:var(--gld-spacing--xxs);height:var(--gld-spacing--xxs)}.table::-webkit-scrollbar-track{background:transparent}.table::-webkit-scrollbar-thumb{background:light-dark(var(--gray-transparent--040),var(--gray-transparent--020));will-change:background;transition:background var(--gld-animation-time--150) ease;border-radius:var(--gld-radius--s)}.table::-webkit-scrollbar-thumb:hover{background:light-dark(var(--gray-transparent--060),var(--gray-transparent--040))}.table-content{display:flex;flex-wrap:nowrap;overflow:auto;scrollbar-width:thin;scrollbar-color:light-dark(var(--gray-transparent--040),var(--gray-transparent--020)) transparent;scroll-behavior:smooth}.table-content::-webkit-scrollbar{width:var(--gld-spacing--xxs);height:var(--gld-spacing--xxs)}.table-content::-webkit-scrollbar-track{background:transparent}.table-content::-webkit-scrollbar-thumb{background:light-dark(var(--gray-transparent--040),var(--gray-transparent--020));will-change:background;transition:background var(--gld-animation-time--150) ease;border-radius:var(--gld-radius--s)}.table-content::-webkit-scrollbar-thumb:hover{background:light-dark(var(--gray-transparent--060),var(--gray-transparent--040))}.table-header,.table-cell{color:var(--color);font-family:var(--gld-font--poppins);padding:var(--gld-spacing--xxs) var(--gld-spacing--s);border-bottom:var(--gld-border-size) solid var(--gld-border-color)}.table-header-ellipsis,.table-cell-ellipsis{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.table-header-ellipsis--hover,.table-cell-ellipsis--hover{cursor:pointer}.table-header{display:flex;align-items:center;font:600 var(--gld-font-size--small)/var(--gld-line-height) var(--gld-font--poppins);height:var(--gld-header-height);background:var(--gld-background--with-transparent)}.table-header.table-header--actions,.table-header.table-header--selects{justify-content:center}.table-header.table-header--actions.table-header--selects{justify-content:flex-start}.table-header--actions{background:var(--gld-background);border-left:var(--gld-border-size) solid var(--gld-border-color)}.table-header--actions:before{content:\"\";position:absolute;inset:0;background:var(--gld-background--with-transparent)}.table-cell{display:flex;align-items:center;height:var(--gld-cell-height);font:400 var(--gld-font-size--small)/var(--gld-line-height) var(--gld-font--poppins)}.table-cell:last-of-type{margin-bottom:0;border-bottom:none}.table-cell.table-cell--actions,.table-cell.table-cell--selects{justify-content:center;padding:0}.table-cell--actions{position:relative;display:flex;justify-content:center;align-items:center;gap:var(--gld-spacing--xxxs);background:var(--gld-background);border-left:var(--gld-border-size) solid var(--gld-border-color)}.table-column{flex:1 1 auto}.table-column--actions,.table-column--selects,.table-column--actions.table-column--selects{position:absolute;top:0;right:0}.table-column--actions.table-column--selects{width:var(--gld-column-actions-and-selects-width)}.table-column--actions,.table-column--selects{width:var(--gld-column-actions-or-selects-width)}.table-empty{width:100%;display:flex;color:var(--gld-color);background:var(--gld-background--with-transparent);padding:var(--gld-spacing--xs)}.table-empty p{font:400 var(--gld-font-size--normal)/var(--gld-line-height) var(--gld-font--poppins);text-transform:lowercase;margin:auto}.table-empty p:first-letter{text-transform:uppercase}\n"] }]
|
|
1416
|
+
}] });
|
|
1422
1417
|
|
|
1423
1418
|
// Angular Imports
|
|
1424
1419
|
class TileComponent {
|