osl-base-extended 1.0.46 → 1.0.47
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,7 +20,6 @@ import * as i5 from '@angular/material/datepicker';
|
|
|
20
20
|
import { MatDatepickerModule } from '@angular/material/datepicker';
|
|
21
21
|
import { MatInputModule } from '@angular/material/input';
|
|
22
22
|
import { debounceTime as debounceTime$1, distinctUntilChanged as distinctUntilChanged$1 } from 'rxjs/operators';
|
|
23
|
-
import * as i3$1 from '@angular/material/menu';
|
|
24
23
|
import { MatMenuModule } from '@angular/material/menu';
|
|
25
24
|
|
|
26
25
|
class OslBaseExtended {
|
|
@@ -2094,6 +2093,26 @@ class OslGrid {
|
|
|
2094
2093
|
sortKey = '';
|
|
2095
2094
|
sortAsc = true;
|
|
2096
2095
|
pageSizeOptions = [10, 25, 50, 100];
|
|
2096
|
+
openMenuIndex = null;
|
|
2097
|
+
menuPosition = { top: 0, left: 0 };
|
|
2098
|
+
onDocumentClick() {
|
|
2099
|
+
this.openMenuIndex = null;
|
|
2100
|
+
}
|
|
2101
|
+
toggleMenu(index, event) {
|
|
2102
|
+
event.stopPropagation();
|
|
2103
|
+
if (this.openMenuIndex === index) {
|
|
2104
|
+
this.openMenuIndex = null;
|
|
2105
|
+
return;
|
|
2106
|
+
}
|
|
2107
|
+
const rect = event.currentTarget.getBoundingClientRect();
|
|
2108
|
+
const menuWidth = 190;
|
|
2109
|
+
const left = Math.min(Math.max(rect.right - menuWidth, 8), window.innerWidth - menuWidth - 8);
|
|
2110
|
+
this.menuPosition = { top: rect.bottom + 6, left };
|
|
2111
|
+
this.openMenuIndex = index;
|
|
2112
|
+
}
|
|
2113
|
+
closeMenu() {
|
|
2114
|
+
this.openMenuIndex = null;
|
|
2115
|
+
}
|
|
2097
2116
|
get skeletonRows() {
|
|
2098
2117
|
return Array.from({ length: Math.min(this.pageSize, 10) });
|
|
2099
2118
|
}
|
|
@@ -2190,11 +2209,11 @@ class OslGrid {
|
|
|
2190
2209
|
return raw !== null && raw !== undefined && raw !== '' ? raw : '--';
|
|
2191
2210
|
}
|
|
2192
2211
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: OslGrid, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2193
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: OslGrid, isStandalone: false, selector: "osl-grid", inputs: { columns: "columns", datasource: "datasource", isPaginated: "isPaginated", pageSize: "pageSize", autoMode: "autoMode", totalRecords: "totalRecords", tableHeight: "tableHeight", loading: "loading", isSelectable: "isSelectable", moreMenuActions: "moreMenuActions" }, outputs: { datasourceChange: "datasourceChange", pageChange: "pageChange", pageSizeChange: "pageSizeChange", sortChange: "sortChange", editClick: "editClick", deleteClick: "deleteClick", onRowClick: "onRowClick" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"osl-grid-wrapper\">\r\n\r\n <div class=\"osl-grid-table-container\" [style.height]=\"tableHeight\">\r\n <table class=\"osl-grid-table\">\r\n <thead class=\"osl-grid-thead\">\r\n <tr>\r\n @if (loading && columns.length === 0) {\r\n @for (sk of skeletonColumns; track $index) {\r\n <th class=\"osl-grid-th osl-grid-th--skeleton\">\r\n <div class=\"osl-skeleton osl-skeleton--header\"></div>\r\n </th>\r\n }\r\n } @else {\r\n @for (col of columns; track col.key; let last = $last) {\r\n <th\r\n class=\"osl-grid-th\"\r\n [class.osl-grid-th--last]=\"last\"\r\n [class.osl-grid-th--actions]=\"col.isActions\"\r\n (click)=\"sort(col.key, col.isActions)\"\r\n >\r\n @if (!col.isActions) {\r\n <span class=\"osl-grid-th-inner\">\r\n {{ col.label }}\r\n <span class=\"osl-grid-sort-icon\" [class.osl-grid-sort-icon--active]=\"sortKey === col.key\">\r\n @if (sortKey === col.key) {\r\n {{ sortAsc ? '\u2191' : '\u2193' }}\r\n } @else {\r\n <span class=\"osl-grid-sort-icon--idle\">\u21C5</span>\r\n }\r\n </span>\r\n </span>\r\n }\r\n </th>\r\n }\r\n }\r\n </tr>\r\n </thead>\r\n <tbody>\r\n @if (loading) {\r\n @for (sk of skeletonRows; track $index) {\r\n <tr class=\"osl-grid-row osl-grid-row--skeleton\">\r\n @if (columns.length > 0) {\r\n @for (col of columns; track col.key; let last = $last) {\r\n <td class=\"osl-grid-td\" [class.osl-grid-td--last]=\"last\" [class.osl-grid-td--actions]=\"col.isActions\">\r\n @if (col.isActions) {\r\n <div class=\"osl-skeleton osl-skeleton--actions\"></div>\r\n } @else {\r\n <div class=\"osl-skeleton\"></div>\r\n }\r\n </td>\r\n }\r\n } @else {\r\n @for (sk2 of skeletonColumns; track $index; let last = $last) {\r\n <td class=\"osl-grid-td\" [class.osl-grid-td--last]=\"last\">\r\n <div class=\"osl-skeleton\"></div>\r\n </td>\r\n }\r\n }\r\n </tr>\r\n }\r\n } @else {\r\n @if (pagedData.length === 0) {\r\n <tr>\r\n <td [attr.colspan]=\"columns.length\" class=\"osl-grid-empty\">\r\n <div class=\"d-flex align-items-center justify-content-center floating-element\">\r\n <div class=\"mx-4\">\r\n <p class=\"f-s-20 f-w-600 text-start\">No Records match the <br> current filters.</p>\r\n <p class=\"text-start\">Expecting to see new Records? Try again in <br> a few seconds as the system catches up</p>\r\n </div>\r\n <i class=\"icon\"></i>\r\n\r\n </div>\r\n </td>\r\n </tr>\r\n }\r\n @for (row of pagedData; track $index) {\r\n <tr class=\"osl-grid-row\" [class.pointer]=\"isSelectable\" (click)=\"onRowClick.emit(row)\">\r\n @for (col of columns; track col.key; let last = $last) {\r\n @if (col.isActions) {\r\n <td class=\"osl-grid-td osl-grid-td--actions\" [class.osl-grid-td--last]=\"last\">\r\n <button class=\"osl-grid-icon-btn\" (click)=\"$event.stopPropagation(); editClick.emit(row)\" title=\"Edit\">\r\n <mat-icon>mode_edit_outline</mat-icon>\r\n </button>\r\n <button class=\"osl-grid-icon-btn osl-grid-icon-btn--danger\" (click)=\"$event.stopPropagation(); deleteClick.emit(row)\" title=\"Delete\">\r\n <mat-icon>delete_outline</mat-icon>\r\n </button>\r\n @if (moreMenuActions.length > 0 && hasVisibleActions(row)) {\r\n <button class=\"osl-grid-icon-btn\" [matMenuTriggerFor]=\"moreMenu\" (click)=\"$event.stopPropagation()\" title=\"More actions\">\r\n <mat-icon>more_vert</mat-icon>\r\n </button>\r\n <mat-menu #moreMenu=\"matMenu\">\r\n @for (action of moreMenuActions; track $index) {\r\n @if (!action.hideIf || !action.hideIf(row)) {\r\n <button mat-menu-item (click)=\"action.click(row)\">\r\n {{ getActionLabel(action, row) }}\r\n </button>\r\n }\r\n }\r\n </mat-menu>\r\n }\r\n </td>\r\n } @else {\r\n <td class=\"osl-grid-td\" [class.osl-grid-td--last]=\"last\">{{ getCellValue(row, col) }}</td>\r\n }\r\n }\r\n </tr>\r\n }\r\n }\r\n </tbody>\r\n </table>\r\n </div>\r\n\r\n @if (isPaginated) {\r\n <div class=\"osl-grid-pagination\">\r\n\r\n <span class=\"osl-grid-pagination__info\">\r\n @if (loading) {\r\n Loading...\r\n } @else if (_total > 0) {\r\n {{ startRecord }}\u2013{{ endRecord }} of {{ _total }} records\r\n } @else {\r\n No records\r\n }\r\n </span>\r\n\r\n <div class=\"osl-grid-pagination__controls\">\r\n <button class=\"osl-grid-page-btn osl-grid-page-btn--nav\" (click)=\"goToPage(1)\" [disabled]=\"currentPage === 1 || loading\" title=\"First page\">\r\n \u00AB\r\n </button>\r\n <button class=\"osl-grid-page-btn osl-grid-page-btn--nav\" (click)=\"goToPage(currentPage - 1)\" [disabled]=\"currentPage === 1 || loading\" title=\"Previous page\">\r\n \u2039 Prev\r\n </button>\r\n\r\n @for (page of pageNumbers; track $index) {\r\n @if (page === -1) {\r\n <span class=\"osl-grid-page-ellipsis\">\u2026</span>\r\n } @else {\r\n <button\r\n class=\"osl-grid-page-btn osl-grid-page-btn--num\"\r\n [class.osl-grid-page-btn--active]=\"page === currentPage\"\r\n [disabled]=\"loading\"\r\n (click)=\"goToPage(page)\"\r\n >\r\n {{ page }}\r\n </button>\r\n }\r\n }\r\n\r\n <button class=\"osl-grid-page-btn osl-grid-page-btn--nav\" (click)=\"goToPage(currentPage + 1)\" [disabled]=\"currentPage === totalPages || loading\" title=\"Next page\">\r\n Next \u203A\r\n </button>\r\n <button class=\"osl-grid-page-btn osl-grid-page-btn--nav\" (click)=\"goToPage(totalPages)\" [disabled]=\"currentPage === totalPages || loading\" title=\"Last page\">\r\n \u00BB\r\n </button>\r\n </div>\r\n\r\n <div class=\"osl-grid-pagination__size\">\r\n <select class=\"osl-grid-page-size\" [ngModel]=\"pageSize\" (ngModelChange)=\"onPageSizeChange($event)\" [disabled]=\"loading\">\r\n @for (opt of pageSizeOptions; track opt) {\r\n <option [value]=\"opt\">{{ opt }} per page</option>\r\n }\r\n </select>\r\n </div>\r\n\r\n </div>\r\n }\r\n\r\n</div>\r\n", styles: [".osl-grid-wrapper{display:flex;flex-direction:column;width:100%;font-size:var(--osl-text-font-size);font-family:inherit;border:1px solid var(--osl-border-color);border-radius:var(--osl-border-radius);overflow:hidden;background:#fff}.osl-grid-table-container{overflow-x:auto;overflow-y:auto;min-height:200px}.osl-grid-table{width:100%;border-collapse:collapse;table-layout:auto}.osl-grid-thead{position:sticky;top:0;z-index:2}.osl-grid-th{background:#f3f4f6;color:#4b5563;font-weight:600;font-size:12px;text-transform:uppercase;letter-spacing:.04em;padding:10px 14px;text-align:left;border-bottom:2px solid var(--osl-border-color);border-right:1px solid var(--osl-border-color);white-space:nowrap;cursor:pointer;-webkit-user-select:none;user-select:none}.osl-grid-th:hover{background:#e5e7eb}.osl-grid-th--last{border-right:none}.osl-grid-th-inner{display:inline-flex;align-items:center;gap:6px}.osl-grid-sort-icon{font-size:11px;color:#9ca3af}.osl-grid-sort-icon--active{color:var(--osl-primary)}.osl-grid-sort-icon--idle{opacity:.35}.osl-grid-row{border-bottom:1px solid #f3f4f6;transition:background .12s}.osl-grid-row:hover{background:#f9fafb}.osl-grid-row:last-child{border-bottom:none}.osl-grid-td{padding:10px 14px;color:#111827;font-size:var(--osl-text-font-size);vertical-align:middle;white-space:nowrap;border-right:1px solid #f3f4f6}.osl-grid-td--last{border-right:none}.osl-grid-empty{padding:48px 16px;text-align:center;color:#9ca3af;font-size:var(--osl-text-font-size)}.osl-grid-pagination{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 16px;border-top:1px solid var(--osl-border-color);background:#f9fafb;flex-shrink:0;flex-wrap:wrap}.osl-grid-pagination__info{font-size:12px;color:#6b7280;white-space:nowrap;min-width:120px}.osl-grid-pagination__controls{display:flex;align-items:center;gap:3px;flex-wrap:nowrap}.osl-grid-pagination__size{display:flex;align-items:center;min-width:120px;justify-content:flex-end}.osl-grid-page-btn{display:inline-flex;align-items:center;justify-content:center;height:30px;padding:0 10px;border:1px solid var(--osl-border-color);border-radius:var(--osl-border-radius);background:#fff;color:#374151;font-size:13px;font-family:inherit;cursor:pointer;transition:background .12s,border-color .12s,color .12s;white-space:nowrap}.osl-grid-page-btn:hover:not(:disabled){background:#f3f4f6;border-color:#9ca3af}.osl-grid-page-btn:disabled{opacity:.35;cursor:not-allowed}.osl-grid-page-btn--nav{font-size:12px;color:#6b7280}.osl-grid-page-btn--num{min-width:30px;padding:0;font-size:13px}.osl-grid-page-btn--active{background:var(--osl-primary);border-color:var(--osl-primary);color:#fff;font-weight:600}.osl-grid-page-btn--active:hover:not(:disabled){background:var(--osl-primary-hover);border-color:var(--osl-primary-hover)}.osl-grid-page-ellipsis{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;color:#9ca3af;font-size:13px;pointer-events:none}.osl-grid-page-size{height:30px;padding:0 8px;border:1px solid var(--osl-border-color);border-radius:var(--osl-border-radius);background:#fff;color:#374151;font-size:12px;font-family:inherit;cursor:pointer;outline:none}.osl-grid-page-size:focus{border-color:var(--osl-focus-border-color)}.osl-grid-th--actions{width:80px;min-width:80px;cursor:default;text-align:center}.osl-grid-th--actions:hover{background:#f3f4f6}.osl-grid-td--actions{width:80px;min-width:80px;text-align:center;padding:6px 8px;white-space:nowrap}.osl-grid-icon-btn{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border:1.5px solid var(--osl-border-color);border-radius:var(--osl-border-radius);background:transparent;color:#6b7280;cursor:pointer;padding:0;transition:border-color .15s,color .15s,background .15s;margin:0 2px}.osl-grid-icon-btn mat-icon{font-size:16px;width:16px;height:16px;line-height:16px}.osl-grid-icon-btn:hover{border-color:var(--osl-primary);color:var(--osl-primary);background:#6366f10f}.osl-grid-icon-btn--danger:hover{border-color:#ef4444;color:#ef4444;background:#ef44440f}@keyframes osl-skeleton-pulse{0%,to{opacity:1}50%{opacity:.4}}.osl-skeleton{height:14px;border-radius:4px;background:#e5e7eb;animation:osl-skeleton-pulse 1.4s ease-in-out infinite;width:80%}.osl-skeleton--actions{width:52px;margin:0 auto}.osl-skeleton--header{height:11px;width:65%;background:#d1d5db;border-radius:3px}.osl-grid-th--skeleton{cursor:default;pointer-events:none}.osl-grid-row--skeleton{pointer-events:none}.icon{background-repeat:no-repeat;background-position:center;display:inline-block!important;vertical-align:middle;width:18%;height:250px;background-image:url('data:image/svg+xml,<svg width=\"147\" height=\"134\" viewBox=\"0 0 147 134\" xmlns=\"http://www.w3.org/2000/svg\">%0D%0A <g fill=\"none\" fill-rule=\"evenodd\">%0D%0A <path d=\"M2.143 94.537c-2.858-1.65-2.858-4.35 0-6l66.1-38.163c2.858-1.65 7.534-1.65 10.392 0l66.101 38.163c2.858 1.65 2.858 4.35 0 6l-66.1 38.163c-2.859 1.65-7.535 1.65-10.393 0l-66.1-38.162z\" fill=\"%23EAF0F6\" fill-opacity=\".75\"/>%0D%0A <path d=\"M94.611 80.446c11.065 6.39 11.065 16.843 0 23.231-11.065 6.39-29.172 6.39-40.238 0-11.065-6.388-11.065-16.842 0-23.23 11.066-6.39 29.173-6.39 40.238 0\" fill=\"%23FFF\"/>%0D%0A <path d=\"M82.974 42.77c-5.498 1.128-11.537 1.124-17.03-.013L46.688 88.68h.007c1.089-3.023 3.637-5.9 7.679-8.233 11.065-6.39 29.172-6.39 40.237 0 2.902 1.674 5.02 3.632 6.4 5.719L82.975 42.77z\" fill=\"%23FFF\"/>%0D%0A <path d=\"M92.296 32.687c9.792-5.653 9.792-14.905 0-20.558-9.792-5.653-25.815-5.653-35.607 0-9.792 5.653-9.793 14.905 0 20.558 9.792 5.653 25.815 5.653 35.607 0z\" stroke=\"%23CBD6E5\" stroke-width=\"5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>%0D%0A <path d=\"M87.338 30.07c7.3-4.214 7.3-11.11 0-15.325s-19.244-4.215-26.544 0c-7.3 4.214-7.3 11.111 0 15.325 7.3 4.214 19.244 4.214 26.544 0z\" stroke=\"%23CBD6E5\" stroke-width=\"5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>%0D%0A <path d=\"M92.296 32.687c-9.792 5.653-25.815 5.653-35.607 0-4.896-2.827-7.344-6.553-7.344-10.28v6.703c0 3.726 2.448 7.452 7.344 10.279 9.792 5.653 25.815 5.653 35.607 0 4.896-2.827 7.344-6.553 7.344-10.28v-6.701c0 3.726-2.448 7.452-7.344 10.279z\" stroke=\"%23CBD6E5\" stroke-width=\"5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>%0D%0A <path d=\"M100.274 42.398l3.987-6.33-7.217-4.818-.011-.008-.004-.002v.001c-.481-.273-1.14-.234-1.867.185-1.46.843-2.654 2.912-2.654 4.598 0 .801.275 1.368.715 1.661l-.003.006.056.038.018.011 6.98 4.658z\" stroke=\"%23CBD6E5\" stroke-width=\"5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>%0D%0A <path d=\"M119.293 42.398l-14.095-8.168c-.745-.432-1.772-.374-2.904.28-2.259 1.303-4.107 4.505-4.107 7.113 0 1.32.475 2.241 1.235 2.664l-.002.004 14.179 8.201\" stroke=\"%23CBD6E5\" stroke-width=\"5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>%0D%0A <path d=\"M120.635 45.115c0-2.609-1.848-3.676-4.107-2.37-2.26 1.303-4.108 4.504-4.108 7.113 0 2.608 1.848 3.676 4.108 2.371 2.26-1.304 4.107-4.505 4.107-7.114zM74.333 12.076c-3.027 1.608-5.823 3.647-8.256 6.062-2.93 2.909-5.318 6.35-7.064 10.092.601.496 1.271.97 2.03 1.408 3.03 1.748 6.86 2.749 10.812 3.023 1.165-3.821 2.893-7.457 5.26-10.67 2.245-3.048 5.088-5.688 8.321-7.65-3.252-1.476-7.168-2.232-11.103-2.265z\" stroke=\"%23CBD6E5\" stroke-width=\"5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>%0D%0A <path d=\"M87.55 15.472c-3.979 1.873-7.243 5.108-9.606 8.83-1.669 2.63-2.918 5.49-3.927 8.443 1.232.002 2.462-.07 3.674-.208 1.76-3.001 3.973-6.521 5.967-8.772 1.998-2.255 4.375-4.226 7.071-5.545-.784-.996-1.852-1.922-3.179-2.748z\" stroke=\"%23CBD6E5\" stroke-width=\"5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>%0D%0A <path d=\"M92.296 32.687c9.792-5.653 9.792-14.905 0-20.558-9.792-5.653-25.815-5.653-35.607 0-9.792 5.653-9.793 14.905 0 20.558 9.792 5.653 25.815 5.653 35.607 0\" fill=\"%23FFF\"/>%0D%0A <path d=\"M92.296 32.687c9.792-5.653 9.792-14.905 0-20.558-9.792-5.653-25.815-5.653-35.607 0-9.792 5.653-9.793 14.905 0 20.558 9.792 5.653 25.815 5.653 35.607 0z\" stroke=\"%23CBD6E5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>%0D%0A <path d=\"M87.338 30.07c7.3-4.214 7.3-11.11 0-15.325s-19.244-4.215-26.544 0c-7.3 4.214-7.3 11.111 0 15.325 7.3 4.214 19.244 4.214 26.544 0\" fill=\"%23F2F5F8\"/>%0D%0A <path d=\"M87.338 30.07c7.3-4.214 7.3-11.11 0-15.325s-19.244-4.215-26.544 0c-7.3 4.214-7.3 11.111 0 15.325 7.3 4.214 19.244 4.214 26.544 0z\" stroke=\"%23CBD6E5\"/>%0D%0A <path d=\"M92.296 32.687c-9.792 5.653-25.815 5.653-35.607 0-4.896-2.827-7.344-6.553-7.344-10.28v6.703c0 3.726 2.448 7.452 7.344 10.279 9.792 5.653 25.815 5.653 35.607 0 4.896-2.827 7.344-6.553 7.344-10.28v-6.701c0 3.726-2.448 7.452-7.344 10.279\" fill=\"%23F2F5F8\"/>%0D%0A <path d=\"M92.296 32.687c-9.792 5.653-25.815 5.653-35.607 0-4.896-2.827-7.344-6.553-7.344-10.28v6.703c0 3.726 2.448 7.452 7.344 10.279 9.792 5.653 25.815 5.653 35.607 0 4.896-2.827 7.344-6.553 7.344-10.28v-6.701c0 3.726-2.448 7.452-7.344 10.279z\" stroke=\"%23CBD6E5\"/>%0D%0A <path d=\"M100.274 42.398l3.987-6.33-7.217-4.818-.011-.008-.004-.002v.001c-.481-.273-1.14-.234-1.867.185-1.46.843-2.654 2.912-2.654 4.598 0 .801.275 1.368.715 1.661l-.003.006.056.038.018.011 6.98 4.658z\" fill=\"%23FFF\"/>%0D%0A <path d=\"M100.274 42.398l3.987-6.33-7.217-4.818-.011-.008-.004-.002v.001c-.481-.273-1.14-.234-1.867.185-1.46.843-2.654 2.912-2.654 4.598 0 .801.275 1.368.715 1.661l-.003.006.056.038.018.011 6.98 4.658z\" stroke=\"%23CBD6E5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>%0D%0A <path d=\"M119.293 42.398l-14.095-8.168c-.745-.432-1.772-.374-2.904.28-2.259 1.303-4.107 4.505-4.107 7.113 0 1.32.475 2.241 1.235 2.664l-.002.004 14.179 8.201\" fill=\"%23F2F5F8\"/>%0D%0A <path d=\"M119.293 42.398l-14.095-8.168c-.745-.432-1.772-.374-2.904.28-2.259 1.303-4.107 4.505-4.107 7.113 0 1.32.475 2.241 1.235 2.664l-.002.004 14.179 8.201\" stroke=\"%23CBD6E5\"/>%0D%0A <path d=\"M120.635 45.115c0-2.609-1.848-3.676-4.107-2.37-2.26 1.303-4.108 4.504-4.108 7.113 0 2.608 1.848 3.676 4.108 2.371 2.26-1.304 4.107-4.505 4.107-7.114\" fill=\"%23F2F5F8\"/>%0D%0A <path d=\"M120.635 45.115c0-2.609-1.848-3.676-4.107-2.37-2.26 1.303-4.108 4.504-4.108 7.113 0 2.608 1.848 3.676 4.108 2.371 2.26-1.304 4.107-4.505 4.107-7.114z\" stroke=\"%23CBD6E5\"/>%0D%0A <path d=\"M74.333 12.076c-3.027 1.608-5.823 3.647-8.256 6.062-2.93 2.909-5.318 6.35-7.064 10.092.601.496 1.271.97 2.03 1.408 3.03 1.748 6.86 2.749 10.812 3.023 1.165-3.821 2.893-7.457 5.26-10.67 2.245-3.048 5.088-5.688 8.321-7.65-3.252-1.476-7.168-2.232-11.103-2.265\" fill=\"%23FFF\"/>%0D%0A <path d=\"M87.55 15.472c-3.979 1.873-7.243 5.108-9.606 8.83-1.669 2.63-2.918 5.49-3.927 8.443 1.232.002 2.462-.07 3.674-.208 1.76-3.001 3.973-6.521 5.967-8.772 1.998-2.255 4.375-4.226 7.071-5.545-.784-.996-1.852-1.922-3.179-2.748\" fill=\"%23FFF\"/>%0D%0A <path d=\"M101.012 86.166L82.974 42.77c-5.499 1.127-11.537 1.123-17.031-.014L46.687 88.679h.007\" stroke=\"%23CBD6E5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-dasharray=\"2,3,0,0\"/>%0D%0A <path d=\"M94.611 80.446c11.065 6.39 11.065 16.843 0 23.231-11.065 6.39-29.172 6.39-40.238 0-11.065-6.388-11.065-16.842 0-23.23 11.066-6.39 29.173-6.39 40.238 0z\" stroke=\"%23CBD6E5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-dasharray=\"2,3,0,0\"/>%0D%0A <path d=\"M121.68 10.236l-11.902 4.361M115.666 23.734l-5.239-2.47M119 25.306l-.753-.356M106.763 7.402l-.803 1.704M109.781 1l-1.81 3.84\" stroke=\"%23CBD6E5\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>%0D%0A </g>%0D%0A</svg>%0D%0A');background-size:100%;animation:moveUpDown 3s ease-in-out infinite}@keyframes moveUpDown{0%,to{transform:translateY(0)}50%{transform:translateY(-15px)}}.pointer{cursor:pointer}\n"], dependencies: [{ kind: "directive", type: i1$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i3$1.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i3$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i3$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }] });
|
|
2212
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: OslGrid, isStandalone: false, selector: "osl-grid", inputs: { columns: "columns", datasource: "datasource", isPaginated: "isPaginated", pageSize: "pageSize", autoMode: "autoMode", totalRecords: "totalRecords", tableHeight: "tableHeight", loading: "loading", isSelectable: "isSelectable", moreMenuActions: "moreMenuActions" }, outputs: { datasourceChange: "datasourceChange", pageChange: "pageChange", pageSizeChange: "pageSizeChange", sortChange: "sortChange", editClick: "editClick", deleteClick: "deleteClick", onRowClick: "onRowClick" }, host: { listeners: { "document:click": "onDocumentClick()" } }, usesOnChanges: true, ngImport: i0, template: "<div class=\"osl-grid-wrapper\">\r\n\r\n <div class=\"osl-grid-table-container\" [style.height]=\"tableHeight\">\r\n <table class=\"osl-grid-table\">\r\n <thead class=\"osl-grid-thead\">\r\n <tr>\r\n @if (loading && columns.length === 0) {\r\n @for (sk of skeletonColumns; track $index) {\r\n <th class=\"osl-grid-th osl-grid-th--skeleton\">\r\n <div class=\"osl-skeleton osl-skeleton--header\"></div>\r\n </th>\r\n }\r\n } @else {\r\n @for (col of columns; track col.key; let last = $last) {\r\n <th\r\n class=\"osl-grid-th\"\r\n [class.osl-grid-th--last]=\"last\"\r\n [class.osl-grid-th--actions]=\"col.isActions\"\r\n (click)=\"sort(col.key, col.isActions)\"\r\n >\r\n @if (!col.isActions) {\r\n <span class=\"osl-grid-th-inner\">\r\n {{ col.label }}\r\n <span class=\"osl-grid-sort-icon\" [class.osl-grid-sort-icon--active]=\"sortKey === col.key\">\r\n @if (sortKey === col.key) {\r\n {{ sortAsc ? '\u2191' : '\u2193' }}\r\n } @else {\r\n <span class=\"osl-grid-sort-icon--idle\">\u21C5</span>\r\n }\r\n </span>\r\n </span>\r\n }\r\n </th>\r\n }\r\n }\r\n </tr>\r\n </thead>\r\n <tbody>\r\n @if (loading) {\r\n @for (sk of skeletonRows; track $index) {\r\n <tr class=\"osl-grid-row osl-grid-row--skeleton\">\r\n @if (columns.length > 0) {\r\n @for (col of columns; track col.key; let last = $last) {\r\n <td class=\"osl-grid-td\" [class.osl-grid-td--last]=\"last\" [class.osl-grid-td--actions]=\"col.isActions\">\r\n @if (col.isActions) {\r\n <div class=\"osl-skeleton osl-skeleton--actions\"></div>\r\n } @else {\r\n <div class=\"osl-skeleton\"></div>\r\n }\r\n </td>\r\n }\r\n } @else {\r\n @for (sk2 of skeletonColumns; track $index; let last = $last) {\r\n <td class=\"osl-grid-td\" [class.osl-grid-td--last]=\"last\">\r\n <div class=\"osl-skeleton\"></div>\r\n </td>\r\n }\r\n }\r\n </tr>\r\n }\r\n } @else {\r\n @if (pagedData.length === 0) {\r\n <tr>\r\n <td [attr.colspan]=\"columns.length\" class=\"osl-grid-empty\">\r\n <div class=\"d-flex align-items-center justify-content-center floating-element\">\r\n <div class=\"mx-4\">\r\n <p class=\"f-s-20 f-w-600 text-start\">No Records match the <br> current filters.</p>\r\n <p class=\"text-start\">Expecting to see new Records? Try again in <br> a few seconds as the system catches up</p>\r\n </div>\r\n <i class=\"icon\"></i>\r\n\r\n </div>\r\n </td>\r\n </tr>\r\n }\r\n @for (row of pagedData; track $index; let rowIdx = $index) {\r\n <tr class=\"osl-grid-row\" [class.pointer]=\"isSelectable\" (click)=\"onRowClick.emit(row)\">\r\n @for (col of columns; track col.key; let last = $last) {\r\n @if (col.isActions) {\r\n <td class=\"osl-grid-td osl-grid-td--actions\" [class.osl-grid-td--last]=\"last\">\r\n <button class=\"osl-grid-icon-btn\" (click)=\"$event.stopPropagation(); editClick.emit(row)\" title=\"Edit\">\r\n <mat-icon>mode_edit_outline</mat-icon>\r\n </button>\r\n <button class=\"osl-grid-icon-btn osl-grid-icon-btn--danger\" (click)=\"$event.stopPropagation(); deleteClick.emit(row)\" title=\"Delete\">\r\n <mat-icon>delete_outline</mat-icon>\r\n </button>\r\n @if (moreMenuActions.length > 0 && hasVisibleActions(row)) {\r\n <div class=\"osl-menu-wrapper\">\r\n <button class=\"osl-grid-icon-btn\" (click)=\"toggleMenu(rowIdx, $event)\" title=\"More actions\">\r\n <mat-icon>more_vert</mat-icon>\r\n </button>\r\n @if (openMenuIndex === rowIdx) {\r\n <div class=\"osl-custom-menu\"\r\n [style.top.px]=\"menuPosition.top\"\r\n [style.left.px]=\"menuPosition.left\">\r\n <div class=\"osl-custom-menu-header\">Actions</div>\r\n @for (action of moreMenuActions; track $index) {\r\n @if (!action.hideIf || !action.hideIf(row)) {\r\n <button class=\"osl-custom-menu-item\" (click)=\"action.click(row); closeMenu(); $event.stopPropagation()\">\r\n <span class=\"osl-custom-menu-dot\"></span>\r\n {{ getActionLabel(action, row) }}\r\n </button>\r\n }\r\n }\r\n </div>\r\n }\r\n </div>\r\n }\r\n </td>\r\n } @else {\r\n <td class=\"osl-grid-td\" [class.osl-grid-td--last]=\"last\">{{ getCellValue(row, col) }}</td>\r\n }\r\n }\r\n </tr>\r\n }\r\n }\r\n </tbody>\r\n </table>\r\n </div>\r\n\r\n @if (isPaginated) {\r\n <div class=\"osl-grid-pagination\">\r\n\r\n <span class=\"osl-grid-pagination__info\">\r\n @if (loading) {\r\n Loading...\r\n } @else if (_total > 0) {\r\n {{ startRecord }}\u2013{{ endRecord }} of {{ _total }} records\r\n } @else {\r\n No records\r\n }\r\n </span>\r\n\r\n <div class=\"osl-grid-pagination__controls\">\r\n <button class=\"osl-grid-page-btn osl-grid-page-btn--nav\" (click)=\"goToPage(1)\" [disabled]=\"currentPage === 1 || loading\" title=\"First page\">\r\n \u00AB\r\n </button>\r\n <button class=\"osl-grid-page-btn osl-grid-page-btn--nav\" (click)=\"goToPage(currentPage - 1)\" [disabled]=\"currentPage === 1 || loading\" title=\"Previous page\">\r\n \u2039 Prev\r\n </button>\r\n\r\n @for (page of pageNumbers; track $index) {\r\n @if (page === -1) {\r\n <span class=\"osl-grid-page-ellipsis\">\u2026</span>\r\n } @else {\r\n <button\r\n class=\"osl-grid-page-btn osl-grid-page-btn--num\"\r\n [class.osl-grid-page-btn--active]=\"page === currentPage\"\r\n [disabled]=\"loading\"\r\n (click)=\"goToPage(page)\"\r\n >\r\n {{ page }}\r\n </button>\r\n }\r\n }\r\n\r\n <button class=\"osl-grid-page-btn osl-grid-page-btn--nav\" (click)=\"goToPage(currentPage + 1)\" [disabled]=\"currentPage === totalPages || loading\" title=\"Next page\">\r\n Next \u203A\r\n </button>\r\n <button class=\"osl-grid-page-btn osl-grid-page-btn--nav\" (click)=\"goToPage(totalPages)\" [disabled]=\"currentPage === totalPages || loading\" title=\"Last page\">\r\n \u00BB\r\n </button>\r\n </div>\r\n\r\n <div class=\"osl-grid-pagination__size\">\r\n <select class=\"osl-grid-page-size\" [ngModel]=\"pageSize\" (ngModelChange)=\"onPageSizeChange($event)\" [disabled]=\"loading\">\r\n @for (opt of pageSizeOptions; track opt) {\r\n <option [value]=\"opt\">{{ opt }} per page</option>\r\n }\r\n </select>\r\n </div>\r\n\r\n </div>\r\n }\r\n\r\n</div>\r\n", styles: [".osl-grid-wrapper{display:flex;flex-direction:column;width:100%;font-size:var(--osl-text-font-size);font-family:inherit;border:1px solid var(--osl-border-color);border-radius:var(--osl-border-radius);overflow:hidden;background:#fff}.osl-grid-table-container{overflow-x:auto;overflow-y:auto;min-height:200px}.osl-grid-table{width:100%;border-collapse:collapse;table-layout:auto}.osl-grid-thead{position:sticky;top:0;z-index:2}.osl-grid-th{background:#f3f4f6;color:#4b5563;font-weight:600;font-size:12px;text-transform:uppercase;letter-spacing:.04em;padding:10px 14px;text-align:left;border-bottom:2px solid var(--osl-border-color);border-right:1px solid var(--osl-border-color);white-space:nowrap;cursor:pointer;-webkit-user-select:none;user-select:none}.osl-grid-th:hover{background:#e5e7eb}.osl-grid-th--last{border-right:none}.osl-grid-th-inner{display:inline-flex;align-items:center;gap:6px}.osl-grid-sort-icon{font-size:11px;color:#9ca3af}.osl-grid-sort-icon--active{color:var(--osl-primary)}.osl-grid-sort-icon--idle{opacity:.35}.osl-grid-row{border-bottom:1px solid #f3f4f6;transition:background .12s}.osl-grid-row:hover{background:#f9fafb}.osl-grid-row:last-child{border-bottom:none}.osl-grid-td{padding:10px 14px;color:#111827;font-size:var(--osl-text-font-size);vertical-align:middle;white-space:nowrap;border-right:1px solid #f3f4f6}.osl-grid-td--last{border-right:none}.osl-grid-empty{padding:48px 16px;text-align:center;color:#9ca3af;font-size:var(--osl-text-font-size)}.osl-grid-pagination{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 16px;border-top:1px solid var(--osl-border-color);background:#f9fafb;flex-shrink:0;flex-wrap:wrap}.osl-grid-pagination__info{font-size:12px;color:#6b7280;white-space:nowrap;min-width:120px}.osl-grid-pagination__controls{display:flex;align-items:center;gap:3px;flex-wrap:nowrap}.osl-grid-pagination__size{display:flex;align-items:center;min-width:120px;justify-content:flex-end}.osl-grid-page-btn{display:inline-flex;align-items:center;justify-content:center;height:30px;padding:0 10px;border:1px solid var(--osl-border-color);border-radius:var(--osl-border-radius);background:#fff;color:#374151;font-size:13px;font-family:inherit;cursor:pointer;transition:background .12s,border-color .12s,color .12s;white-space:nowrap}.osl-grid-page-btn:hover:not(:disabled){background:#f3f4f6;border-color:#9ca3af}.osl-grid-page-btn:disabled{opacity:.35;cursor:not-allowed}.osl-grid-page-btn--nav{font-size:12px;color:#6b7280}.osl-grid-page-btn--num{min-width:30px;padding:0;font-size:13px}.osl-grid-page-btn--active{background:var(--osl-primary);border-color:var(--osl-primary);color:#fff;font-weight:600}.osl-grid-page-btn--active:hover:not(:disabled){background:var(--osl-primary-hover);border-color:var(--osl-primary-hover)}.osl-grid-page-ellipsis{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;color:#9ca3af;font-size:13px;pointer-events:none}.osl-grid-page-size{height:30px;padding:0 8px;border:1px solid var(--osl-border-color);border-radius:var(--osl-border-radius);background:#fff;color:#374151;font-size:12px;font-family:inherit;cursor:pointer;outline:none}.osl-grid-page-size:focus{border-color:var(--osl-focus-border-color)}.osl-grid-th--actions{width:80px;min-width:80px;cursor:default;text-align:center}.osl-grid-th--actions:hover{background:#f3f4f6}.osl-grid-td--actions{width:80px;min-width:80px;text-align:center;padding:6px 8px;white-space:nowrap}.osl-grid-icon-btn{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border:1.5px solid var(--osl-border-color);border-radius:var(--osl-border-radius);background:transparent;color:#6b7280;cursor:pointer;padding:0;transition:border-color .15s,color .15s,background .15s;margin:0 2px}.osl-grid-icon-btn mat-icon{font-size:16px;width:16px;height:16px;line-height:16px}.osl-grid-icon-btn:hover{border-color:var(--osl-primary);color:var(--osl-primary);background:#6366f10f}.osl-grid-icon-btn--danger:hover{border-color:#ef4444;color:#ef4444;background:#ef44440f}.osl-menu-wrapper{position:relative;display:inline-flex}.osl-custom-menu{position:fixed;z-index:9999;min-width:190px;background:#fff;border:1px solid #e5e7eb;border-radius:10px;box-shadow:0 8px 24px #0000001f,0 2px 8px #00000012;overflow:hidden;animation:osl-menu-appear .15s cubic-bezier(.16,1,.3,1)}@keyframes osl-menu-appear{0%{opacity:0;transform:translateY(-8px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}.osl-custom-menu-header{padding:8px 14px 6px;font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#9ca3af;border-bottom:1px solid #f3f4f6;-webkit-user-select:none;user-select:none}.osl-custom-menu-item{display:flex;align-items:center;gap:10px;width:100%;padding:10px 14px;background:transparent;border:none;border-left:3px solid transparent;border-bottom:1px solid #f9fafb;text-align:left;font-size:13px;font-weight:500;font-family:inherit;color:#374151;cursor:pointer;white-space:nowrap;transition:background .12s,color .12s,border-left-color .12s}.osl-custom-menu-item:last-child{border-bottom:none}.osl-custom-menu-item:hover{background:#f5f3ff;color:var(--osl-primary);border-left-color:var(--osl-primary)}.osl-custom-menu-item:hover .osl-custom-menu-dot{background:var(--osl-primary);box-shadow:0 0 0 3px #6366f12e}.osl-custom-menu-dot{flex-shrink:0;width:6px;height:6px;border-radius:50%;background:#d1d5db;transition:background .12s,box-shadow .12s}@keyframes osl-skeleton-pulse{0%,to{opacity:1}50%{opacity:.4}}.osl-skeleton{height:14px;border-radius:4px;background:#e5e7eb;animation:osl-skeleton-pulse 1.4s ease-in-out infinite;width:80%}.osl-skeleton--actions{width:52px;margin:0 auto}.osl-skeleton--header{height:11px;width:65%;background:#d1d5db;border-radius:3px}.osl-grid-th--skeleton{cursor:default;pointer-events:none}.osl-grid-row--skeleton{pointer-events:none}.icon{background-repeat:no-repeat;background-position:center;display:inline-block!important;vertical-align:middle;width:18%;height:250px;background-image:url('data:image/svg+xml,<svg width=\"147\" height=\"134\" viewBox=\"0 0 147 134\" xmlns=\"http://www.w3.org/2000/svg\">%0D%0A <g fill=\"none\" fill-rule=\"evenodd\">%0D%0A <path d=\"M2.143 94.537c-2.858-1.65-2.858-4.35 0-6l66.1-38.163c2.858-1.65 7.534-1.65 10.392 0l66.101 38.163c2.858 1.65 2.858 4.35 0 6l-66.1 38.163c-2.859 1.65-7.535 1.65-10.393 0l-66.1-38.162z\" fill=\"%23EAF0F6\" fill-opacity=\".75\"/>%0D%0A <path d=\"M94.611 80.446c11.065 6.39 11.065 16.843 0 23.231-11.065 6.39-29.172 6.39-40.238 0-11.065-6.388-11.065-16.842 0-23.23 11.066-6.39 29.173-6.39 40.238 0\" fill=\"%23FFF\"/>%0D%0A <path d=\"M82.974 42.77c-5.498 1.128-11.537 1.124-17.03-.013L46.688 88.68h.007c1.089-3.023 3.637-5.9 7.679-8.233 11.065-6.39 29.172-6.39 40.237 0 2.902 1.674 5.02 3.632 6.4 5.719L82.975 42.77z\" fill=\"%23FFF\"/>%0D%0A <path d=\"M92.296 32.687c9.792-5.653 9.792-14.905 0-20.558-9.792-5.653-25.815-5.653-35.607 0-9.792 5.653-9.793 14.905 0 20.558 9.792 5.653 25.815 5.653 35.607 0z\" stroke=\"%23CBD6E5\" stroke-width=\"5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>%0D%0A <path d=\"M87.338 30.07c7.3-4.214 7.3-11.11 0-15.325s-19.244-4.215-26.544 0c-7.3 4.214-7.3 11.111 0 15.325 7.3 4.214 19.244 4.214 26.544 0z\" stroke=\"%23CBD6E5\" stroke-width=\"5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>%0D%0A <path d=\"M92.296 32.687c-9.792 5.653-25.815 5.653-35.607 0-4.896-2.827-7.344-6.553-7.344-10.28v6.703c0 3.726 2.448 7.452 7.344 10.279 9.792 5.653 25.815 5.653 35.607 0 4.896-2.827 7.344-6.553 7.344-10.28v-6.701c0 3.726-2.448 7.452-7.344 10.279z\" stroke=\"%23CBD6E5\" stroke-width=\"5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>%0D%0A <path d=\"M100.274 42.398l3.987-6.33-7.217-4.818-.011-.008-.004-.002v.001c-.481-.273-1.14-.234-1.867.185-1.46.843-2.654 2.912-2.654 4.598 0 .801.275 1.368.715 1.661l-.003.006.056.038.018.011 6.98 4.658z\" stroke=\"%23CBD6E5\" stroke-width=\"5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>%0D%0A <path d=\"M119.293 42.398l-14.095-8.168c-.745-.432-1.772-.374-2.904.28-2.259 1.303-4.107 4.505-4.107 7.113 0 1.32.475 2.241 1.235 2.664l-.002.004 14.179 8.201\" stroke=\"%23CBD6E5\" stroke-width=\"5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>%0D%0A <path d=\"M120.635 45.115c0-2.609-1.848-3.676-4.107-2.37-2.26 1.303-4.108 4.504-4.108 7.113 0 2.608 1.848 3.676 4.108 2.371 2.26-1.304 4.107-4.505 4.107-7.114zM74.333 12.076c-3.027 1.608-5.823 3.647-8.256 6.062-2.93 2.909-5.318 6.35-7.064 10.092.601.496 1.271.97 2.03 1.408 3.03 1.748 6.86 2.749 10.812 3.023 1.165-3.821 2.893-7.457 5.26-10.67 2.245-3.048 5.088-5.688 8.321-7.65-3.252-1.476-7.168-2.232-11.103-2.265z\" stroke=\"%23CBD6E5\" stroke-width=\"5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>%0D%0A <path d=\"M87.55 15.472c-3.979 1.873-7.243 5.108-9.606 8.83-1.669 2.63-2.918 5.49-3.927 8.443 1.232.002 2.462-.07 3.674-.208 1.76-3.001 3.973-6.521 5.967-8.772 1.998-2.255 4.375-4.226 7.071-5.545-.784-.996-1.852-1.922-3.179-2.748z\" stroke=\"%23CBD6E5\" stroke-width=\"5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>%0D%0A <path d=\"M92.296 32.687c9.792-5.653 9.792-14.905 0-20.558-9.792-5.653-25.815-5.653-35.607 0-9.792 5.653-9.793 14.905 0 20.558 9.792 5.653 25.815 5.653 35.607 0\" fill=\"%23FFF\"/>%0D%0A <path d=\"M92.296 32.687c9.792-5.653 9.792-14.905 0-20.558-9.792-5.653-25.815-5.653-35.607 0-9.792 5.653-9.793 14.905 0 20.558 9.792 5.653 25.815 5.653 35.607 0z\" stroke=\"%23CBD6E5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>%0D%0A <path d=\"M87.338 30.07c7.3-4.214 7.3-11.11 0-15.325s-19.244-4.215-26.544 0c-7.3 4.214-7.3 11.111 0 15.325 7.3 4.214 19.244 4.214 26.544 0\" fill=\"%23F2F5F8\"/>%0D%0A <path d=\"M87.338 30.07c7.3-4.214 7.3-11.11 0-15.325s-19.244-4.215-26.544 0c-7.3 4.214-7.3 11.111 0 15.325 7.3 4.214 19.244 4.214 26.544 0z\" stroke=\"%23CBD6E5\"/>%0D%0A <path d=\"M92.296 32.687c-9.792 5.653-25.815 5.653-35.607 0-4.896-2.827-7.344-6.553-7.344-10.28v6.703c0 3.726 2.448 7.452 7.344 10.279 9.792 5.653 25.815 5.653 35.607 0 4.896-2.827 7.344-6.553 7.344-10.28v-6.701c0 3.726-2.448 7.452-7.344 10.279\" fill=\"%23F2F5F8\"/>%0D%0A <path d=\"M92.296 32.687c-9.792 5.653-25.815 5.653-35.607 0-4.896-2.827-7.344-6.553-7.344-10.28v6.703c0 3.726 2.448 7.452 7.344 10.279 9.792 5.653 25.815 5.653 35.607 0 4.896-2.827 7.344-6.553 7.344-10.28v-6.701c0 3.726-2.448 7.452-7.344 10.279z\" stroke=\"%23CBD6E5\"/>%0D%0A <path d=\"M100.274 42.398l3.987-6.33-7.217-4.818-.011-.008-.004-.002v.001c-.481-.273-1.14-.234-1.867.185-1.46.843-2.654 2.912-2.654 4.598 0 .801.275 1.368.715 1.661l-.003.006.056.038.018.011 6.98 4.658z\" fill=\"%23FFF\"/>%0D%0A <path d=\"M100.274 42.398l3.987-6.33-7.217-4.818-.011-.008-.004-.002v.001c-.481-.273-1.14-.234-1.867.185-1.46.843-2.654 2.912-2.654 4.598 0 .801.275 1.368.715 1.661l-.003.006.056.038.018.011 6.98 4.658z\" stroke=\"%23CBD6E5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>%0D%0A <path d=\"M119.293 42.398l-14.095-8.168c-.745-.432-1.772-.374-2.904.28-2.259 1.303-4.107 4.505-4.107 7.113 0 1.32.475 2.241 1.235 2.664l-.002.004 14.179 8.201\" fill=\"%23F2F5F8\"/>%0D%0A <path d=\"M119.293 42.398l-14.095-8.168c-.745-.432-1.772-.374-2.904.28-2.259 1.303-4.107 4.505-4.107 7.113 0 1.32.475 2.241 1.235 2.664l-.002.004 14.179 8.201\" stroke=\"%23CBD6E5\"/>%0D%0A <path d=\"M120.635 45.115c0-2.609-1.848-3.676-4.107-2.37-2.26 1.303-4.108 4.504-4.108 7.113 0 2.608 1.848 3.676 4.108 2.371 2.26-1.304 4.107-4.505 4.107-7.114\" fill=\"%23F2F5F8\"/>%0D%0A <path d=\"M120.635 45.115c0-2.609-1.848-3.676-4.107-2.37-2.26 1.303-4.108 4.504-4.108 7.113 0 2.608 1.848 3.676 4.108 2.371 2.26-1.304 4.107-4.505 4.107-7.114z\" stroke=\"%23CBD6E5\"/>%0D%0A <path d=\"M74.333 12.076c-3.027 1.608-5.823 3.647-8.256 6.062-2.93 2.909-5.318 6.35-7.064 10.092.601.496 1.271.97 2.03 1.408 3.03 1.748 6.86 2.749 10.812 3.023 1.165-3.821 2.893-7.457 5.26-10.67 2.245-3.048 5.088-5.688 8.321-7.65-3.252-1.476-7.168-2.232-11.103-2.265\" fill=\"%23FFF\"/>%0D%0A <path d=\"M87.55 15.472c-3.979 1.873-7.243 5.108-9.606 8.83-1.669 2.63-2.918 5.49-3.927 8.443 1.232.002 2.462-.07 3.674-.208 1.76-3.001 3.973-6.521 5.967-8.772 1.998-2.255 4.375-4.226 7.071-5.545-.784-.996-1.852-1.922-3.179-2.748\" fill=\"%23FFF\"/>%0D%0A <path d=\"M101.012 86.166L82.974 42.77c-5.499 1.127-11.537 1.123-17.031-.014L46.687 88.679h.007\" stroke=\"%23CBD6E5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-dasharray=\"2,3,0,0\"/>%0D%0A <path d=\"M94.611 80.446c11.065 6.39 11.065 16.843 0 23.231-11.065 6.39-29.172 6.39-40.238 0-11.065-6.388-11.065-16.842 0-23.23 11.066-6.39 29.173-6.39 40.238 0z\" stroke=\"%23CBD6E5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-dasharray=\"2,3,0,0\"/>%0D%0A <path d=\"M121.68 10.236l-11.902 4.361M115.666 23.734l-5.239-2.47M119 25.306l-.753-.356M106.763 7.402l-.803 1.704M109.781 1l-1.81 3.84\" stroke=\"%23CBD6E5\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>%0D%0A </g>%0D%0A</svg>%0D%0A');background-size:100%;animation:moveUpDown 3s ease-in-out infinite}@keyframes moveUpDown{0%,to{transform:translateY(0)}50%{transform:translateY(-15px)}}.pointer{cursor:pointer}\n"], dependencies: [{ kind: "directive", type: i1$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
|
|
2194
2213
|
}
|
|
2195
2214
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: OslGrid, decorators: [{
|
|
2196
2215
|
type: Component,
|
|
2197
|
-
args: [{ selector: 'osl-grid', standalone: false, template: "<div class=\"osl-grid-wrapper\">\r\n\r\n <div class=\"osl-grid-table-container\" [style.height]=\"tableHeight\">\r\n <table class=\"osl-grid-table\">\r\n <thead class=\"osl-grid-thead\">\r\n <tr>\r\n @if (loading && columns.length === 0) {\r\n @for (sk of skeletonColumns; track $index) {\r\n <th class=\"osl-grid-th osl-grid-th--skeleton\">\r\n <div class=\"osl-skeleton osl-skeleton--header\"></div>\r\n </th>\r\n }\r\n } @else {\r\n @for (col of columns; track col.key; let last = $last) {\r\n <th\r\n class=\"osl-grid-th\"\r\n [class.osl-grid-th--last]=\"last\"\r\n [class.osl-grid-th--actions]=\"col.isActions\"\r\n (click)=\"sort(col.key, col.isActions)\"\r\n >\r\n @if (!col.isActions) {\r\n <span class=\"osl-grid-th-inner\">\r\n {{ col.label }}\r\n <span class=\"osl-grid-sort-icon\" [class.osl-grid-sort-icon--active]=\"sortKey === col.key\">\r\n @if (sortKey === col.key) {\r\n {{ sortAsc ? '\u2191' : '\u2193' }}\r\n } @else {\r\n <span class=\"osl-grid-sort-icon--idle\">\u21C5</span>\r\n }\r\n </span>\r\n </span>\r\n }\r\n </th>\r\n }\r\n }\r\n </tr>\r\n </thead>\r\n <tbody>\r\n @if (loading) {\r\n @for (sk of skeletonRows; track $index) {\r\n <tr class=\"osl-grid-row osl-grid-row--skeleton\">\r\n @if (columns.length > 0) {\r\n @for (col of columns; track col.key; let last = $last) {\r\n <td class=\"osl-grid-td\" [class.osl-grid-td--last]=\"last\" [class.osl-grid-td--actions]=\"col.isActions\">\r\n @if (col.isActions) {\r\n <div class=\"osl-skeleton osl-skeleton--actions\"></div>\r\n } @else {\r\n <div class=\"osl-skeleton\"></div>\r\n }\r\n </td>\r\n }\r\n } @else {\r\n @for (sk2 of skeletonColumns; track $index; let last = $last) {\r\n <td class=\"osl-grid-td\" [class.osl-grid-td--last]=\"last\">\r\n <div class=\"osl-skeleton\"></div>\r\n </td>\r\n }\r\n }\r\n </tr>\r\n }\r\n } @else {\r\n @if (pagedData.length === 0) {\r\n <tr>\r\n <td [attr.colspan]=\"columns.length\" class=\"osl-grid-empty\">\r\n <div class=\"d-flex align-items-center justify-content-center floating-element\">\r\n <div class=\"mx-4\">\r\n <p class=\"f-s-20 f-w-600 text-start\">No Records match the <br> current filters.</p>\r\n <p class=\"text-start\">Expecting to see new Records? Try again in <br> a few seconds as the system catches up</p>\r\n </div>\r\n <i class=\"icon\"></i>\r\n\r\n </div>\r\n </td>\r\n </tr>\r\n }\r\n @for (row of pagedData; track $index) {\r\n <tr class=\"osl-grid-row\" [class.pointer]=\"isSelectable\" (click)=\"onRowClick.emit(row)\">\r\n @for (col of columns; track col.key; let last = $last) {\r\n @if (col.isActions) {\r\n <td class=\"osl-grid-td osl-grid-td--actions\" [class.osl-grid-td--last]=\"last\">\r\n <button class=\"osl-grid-icon-btn\" (click)=\"$event.stopPropagation(); editClick.emit(row)\" title=\"Edit\">\r\n <mat-icon>mode_edit_outline</mat-icon>\r\n </button>\r\n <button class=\"osl-grid-icon-btn osl-grid-icon-btn--danger\" (click)=\"$event.stopPropagation(); deleteClick.emit(row)\" title=\"Delete\">\r\n <mat-icon>delete_outline</mat-icon>\r\n </button>\r\n @if (moreMenuActions.length > 0 && hasVisibleActions(row)) {\r\n <button class=\"osl-grid-icon-btn\" [matMenuTriggerFor]=\"moreMenu\" (click)=\"$event.stopPropagation()\" title=\"More actions\">\r\n <mat-icon>more_vert</mat-icon>\r\n </button>\r\n <mat-menu #moreMenu=\"matMenu\">\r\n @for (action of moreMenuActions; track $index) {\r\n @if (!action.hideIf || !action.hideIf(row)) {\r\n <button mat-menu-item (click)=\"action.click(row)\">\r\n {{ getActionLabel(action, row) }}\r\n </button>\r\n }\r\n }\r\n </mat-menu>\r\n }\r\n </td>\r\n } @else {\r\n <td class=\"osl-grid-td\" [class.osl-grid-td--last]=\"last\">{{ getCellValue(row, col) }}</td>\r\n }\r\n }\r\n </tr>\r\n }\r\n }\r\n </tbody>\r\n </table>\r\n </div>\r\n\r\n @if (isPaginated) {\r\n <div class=\"osl-grid-pagination\">\r\n\r\n <span class=\"osl-grid-pagination__info\">\r\n @if (loading) {\r\n Loading...\r\n } @else if (_total > 0) {\r\n {{ startRecord }}\u2013{{ endRecord }} of {{ _total }} records\r\n } @else {\r\n No records\r\n }\r\n </span>\r\n\r\n <div class=\"osl-grid-pagination__controls\">\r\n <button class=\"osl-grid-page-btn osl-grid-page-btn--nav\" (click)=\"goToPage(1)\" [disabled]=\"currentPage === 1 || loading\" title=\"First page\">\r\n \u00AB\r\n </button>\r\n <button class=\"osl-grid-page-btn osl-grid-page-btn--nav\" (click)=\"goToPage(currentPage - 1)\" [disabled]=\"currentPage === 1 || loading\" title=\"Previous page\">\r\n \u2039 Prev\r\n </button>\r\n\r\n @for (page of pageNumbers; track $index) {\r\n @if (page === -1) {\r\n <span class=\"osl-grid-page-ellipsis\">\u2026</span>\r\n } @else {\r\n <button\r\n class=\"osl-grid-page-btn osl-grid-page-btn--num\"\r\n [class.osl-grid-page-btn--active]=\"page === currentPage\"\r\n [disabled]=\"loading\"\r\n (click)=\"goToPage(page)\"\r\n >\r\n {{ page }}\r\n </button>\r\n }\r\n }\r\n\r\n <button class=\"osl-grid-page-btn osl-grid-page-btn--nav\" (click)=\"goToPage(currentPage + 1)\" [disabled]=\"currentPage === totalPages || loading\" title=\"Next page\">\r\n Next \u203A\r\n </button>\r\n <button class=\"osl-grid-page-btn osl-grid-page-btn--nav\" (click)=\"goToPage(totalPages)\" [disabled]=\"currentPage === totalPages || loading\" title=\"Last page\">\r\n \u00BB\r\n </button>\r\n </div>\r\n\r\n <div class=\"osl-grid-pagination__size\">\r\n <select class=\"osl-grid-page-size\" [ngModel]=\"pageSize\" (ngModelChange)=\"onPageSizeChange($event)\" [disabled]=\"loading\">\r\n @for (opt of pageSizeOptions; track opt) {\r\n <option [value]=\"opt\">{{ opt }} per page</option>\r\n }\r\n </select>\r\n </div>\r\n\r\n </div>\r\n }\r\n\r\n</div>\r\n", styles: [".osl-grid-wrapper{display:flex;flex-direction:column;width:100%;font-size:var(--osl-text-font-size);font-family:inherit;border:1px solid var(--osl-border-color);border-radius:var(--osl-border-radius);overflow:hidden;background:#fff}.osl-grid-table-container{overflow-x:auto;overflow-y:auto;min-height:200px}.osl-grid-table{width:100%;border-collapse:collapse;table-layout:auto}.osl-grid-thead{position:sticky;top:0;z-index:2}.osl-grid-th{background:#f3f4f6;color:#4b5563;font-weight:600;font-size:12px;text-transform:uppercase;letter-spacing:.04em;padding:10px 14px;text-align:left;border-bottom:2px solid var(--osl-border-color);border-right:1px solid var(--osl-border-color);white-space:nowrap;cursor:pointer;-webkit-user-select:none;user-select:none}.osl-grid-th:hover{background:#e5e7eb}.osl-grid-th--last{border-right:none}.osl-grid-th-inner{display:inline-flex;align-items:center;gap:6px}.osl-grid-sort-icon{font-size:11px;color:#9ca3af}.osl-grid-sort-icon--active{color:var(--osl-primary)}.osl-grid-sort-icon--idle{opacity:.35}.osl-grid-row{border-bottom:1px solid #f3f4f6;transition:background .12s}.osl-grid-row:hover{background:#f9fafb}.osl-grid-row:last-child{border-bottom:none}.osl-grid-td{padding:10px 14px;color:#111827;font-size:var(--osl-text-font-size);vertical-align:middle;white-space:nowrap;border-right:1px solid #f3f4f6}.osl-grid-td--last{border-right:none}.osl-grid-empty{padding:48px 16px;text-align:center;color:#9ca3af;font-size:var(--osl-text-font-size)}.osl-grid-pagination{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 16px;border-top:1px solid var(--osl-border-color);background:#f9fafb;flex-shrink:0;flex-wrap:wrap}.osl-grid-pagination__info{font-size:12px;color:#6b7280;white-space:nowrap;min-width:120px}.osl-grid-pagination__controls{display:flex;align-items:center;gap:3px;flex-wrap:nowrap}.osl-grid-pagination__size{display:flex;align-items:center;min-width:120px;justify-content:flex-end}.osl-grid-page-btn{display:inline-flex;align-items:center;justify-content:center;height:30px;padding:0 10px;border:1px solid var(--osl-border-color);border-radius:var(--osl-border-radius);background:#fff;color:#374151;font-size:13px;font-family:inherit;cursor:pointer;transition:background .12s,border-color .12s,color .12s;white-space:nowrap}.osl-grid-page-btn:hover:not(:disabled){background:#f3f4f6;border-color:#9ca3af}.osl-grid-page-btn:disabled{opacity:.35;cursor:not-allowed}.osl-grid-page-btn--nav{font-size:12px;color:#6b7280}.osl-grid-page-btn--num{min-width:30px;padding:0;font-size:13px}.osl-grid-page-btn--active{background:var(--osl-primary);border-color:var(--osl-primary);color:#fff;font-weight:600}.osl-grid-page-btn--active:hover:not(:disabled){background:var(--osl-primary-hover);border-color:var(--osl-primary-hover)}.osl-grid-page-ellipsis{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;color:#9ca3af;font-size:13px;pointer-events:none}.osl-grid-page-size{height:30px;padding:0 8px;border:1px solid var(--osl-border-color);border-radius:var(--osl-border-radius);background:#fff;color:#374151;font-size:12px;font-family:inherit;cursor:pointer;outline:none}.osl-grid-page-size:focus{border-color:var(--osl-focus-border-color)}.osl-grid-th--actions{width:80px;min-width:80px;cursor:default;text-align:center}.osl-grid-th--actions:hover{background:#f3f4f6}.osl-grid-td--actions{width:80px;min-width:80px;text-align:center;padding:6px 8px;white-space:nowrap}.osl-grid-icon-btn{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border:1.5px solid var(--osl-border-color);border-radius:var(--osl-border-radius);background:transparent;color:#6b7280;cursor:pointer;padding:0;transition:border-color .15s,color .15s,background .15s;margin:0 2px}.osl-grid-icon-btn mat-icon{font-size:16px;width:16px;height:16px;line-height:16px}.osl-grid-icon-btn:hover{border-color:var(--osl-primary);color:var(--osl-primary);background:#6366f10f}.osl-grid-icon-btn--danger:hover{border-color:#ef4444;color:#ef4444;background:#ef44440f}@keyframes osl-skeleton-pulse{0%,to{opacity:1}50%{opacity:.4}}.osl-skeleton{height:14px;border-radius:4px;background:#e5e7eb;animation:osl-skeleton-pulse 1.4s ease-in-out infinite;width:80%}.osl-skeleton--actions{width:52px;margin:0 auto}.osl-skeleton--header{height:11px;width:65%;background:#d1d5db;border-radius:3px}.osl-grid-th--skeleton{cursor:default;pointer-events:none}.osl-grid-row--skeleton{pointer-events:none}.icon{background-repeat:no-repeat;background-position:center;display:inline-block!important;vertical-align:middle;width:18%;height:250px;background-image:url('data:image/svg+xml,<svg width=\"147\" height=\"134\" viewBox=\"0 0 147 134\" xmlns=\"http://www.w3.org/2000/svg\">%0D%0A <g fill=\"none\" fill-rule=\"evenodd\">%0D%0A <path d=\"M2.143 94.537c-2.858-1.65-2.858-4.35 0-6l66.1-38.163c2.858-1.65 7.534-1.65 10.392 0l66.101 38.163c2.858 1.65 2.858 4.35 0 6l-66.1 38.163c-2.859 1.65-7.535 1.65-10.393 0l-66.1-38.162z\" fill=\"%23EAF0F6\" fill-opacity=\".75\"/>%0D%0A <path d=\"M94.611 80.446c11.065 6.39 11.065 16.843 0 23.231-11.065 6.39-29.172 6.39-40.238 0-11.065-6.388-11.065-16.842 0-23.23 11.066-6.39 29.173-6.39 40.238 0\" fill=\"%23FFF\"/>%0D%0A <path d=\"M82.974 42.77c-5.498 1.128-11.537 1.124-17.03-.013L46.688 88.68h.007c1.089-3.023 3.637-5.9 7.679-8.233 11.065-6.39 29.172-6.39 40.237 0 2.902 1.674 5.02 3.632 6.4 5.719L82.975 42.77z\" fill=\"%23FFF\"/>%0D%0A <path d=\"M92.296 32.687c9.792-5.653 9.792-14.905 0-20.558-9.792-5.653-25.815-5.653-35.607 0-9.792 5.653-9.793 14.905 0 20.558 9.792 5.653 25.815 5.653 35.607 0z\" stroke=\"%23CBD6E5\" stroke-width=\"5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>%0D%0A <path d=\"M87.338 30.07c7.3-4.214 7.3-11.11 0-15.325s-19.244-4.215-26.544 0c-7.3 4.214-7.3 11.111 0 15.325 7.3 4.214 19.244 4.214 26.544 0z\" stroke=\"%23CBD6E5\" stroke-width=\"5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>%0D%0A <path d=\"M92.296 32.687c-9.792 5.653-25.815 5.653-35.607 0-4.896-2.827-7.344-6.553-7.344-10.28v6.703c0 3.726 2.448 7.452 7.344 10.279 9.792 5.653 25.815 5.653 35.607 0 4.896-2.827 7.344-6.553 7.344-10.28v-6.701c0 3.726-2.448 7.452-7.344 10.279z\" stroke=\"%23CBD6E5\" stroke-width=\"5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>%0D%0A <path d=\"M100.274 42.398l3.987-6.33-7.217-4.818-.011-.008-.004-.002v.001c-.481-.273-1.14-.234-1.867.185-1.46.843-2.654 2.912-2.654 4.598 0 .801.275 1.368.715 1.661l-.003.006.056.038.018.011 6.98 4.658z\" stroke=\"%23CBD6E5\" stroke-width=\"5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>%0D%0A <path d=\"M119.293 42.398l-14.095-8.168c-.745-.432-1.772-.374-2.904.28-2.259 1.303-4.107 4.505-4.107 7.113 0 1.32.475 2.241 1.235 2.664l-.002.004 14.179 8.201\" stroke=\"%23CBD6E5\" stroke-width=\"5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>%0D%0A <path d=\"M120.635 45.115c0-2.609-1.848-3.676-4.107-2.37-2.26 1.303-4.108 4.504-4.108 7.113 0 2.608 1.848 3.676 4.108 2.371 2.26-1.304 4.107-4.505 4.107-7.114zM74.333 12.076c-3.027 1.608-5.823 3.647-8.256 6.062-2.93 2.909-5.318 6.35-7.064 10.092.601.496 1.271.97 2.03 1.408 3.03 1.748 6.86 2.749 10.812 3.023 1.165-3.821 2.893-7.457 5.26-10.67 2.245-3.048 5.088-5.688 8.321-7.65-3.252-1.476-7.168-2.232-11.103-2.265z\" stroke=\"%23CBD6E5\" stroke-width=\"5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>%0D%0A <path d=\"M87.55 15.472c-3.979 1.873-7.243 5.108-9.606 8.83-1.669 2.63-2.918 5.49-3.927 8.443 1.232.002 2.462-.07 3.674-.208 1.76-3.001 3.973-6.521 5.967-8.772 1.998-2.255 4.375-4.226 7.071-5.545-.784-.996-1.852-1.922-3.179-2.748z\" stroke=\"%23CBD6E5\" stroke-width=\"5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>%0D%0A <path d=\"M92.296 32.687c9.792-5.653 9.792-14.905 0-20.558-9.792-5.653-25.815-5.653-35.607 0-9.792 5.653-9.793 14.905 0 20.558 9.792 5.653 25.815 5.653 35.607 0\" fill=\"%23FFF\"/>%0D%0A <path d=\"M92.296 32.687c9.792-5.653 9.792-14.905 0-20.558-9.792-5.653-25.815-5.653-35.607 0-9.792 5.653-9.793 14.905 0 20.558 9.792 5.653 25.815 5.653 35.607 0z\" stroke=\"%23CBD6E5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>%0D%0A <path d=\"M87.338 30.07c7.3-4.214 7.3-11.11 0-15.325s-19.244-4.215-26.544 0c-7.3 4.214-7.3 11.111 0 15.325 7.3 4.214 19.244 4.214 26.544 0\" fill=\"%23F2F5F8\"/>%0D%0A <path d=\"M87.338 30.07c7.3-4.214 7.3-11.11 0-15.325s-19.244-4.215-26.544 0c-7.3 4.214-7.3 11.111 0 15.325 7.3 4.214 19.244 4.214 26.544 0z\" stroke=\"%23CBD6E5\"/>%0D%0A <path d=\"M92.296 32.687c-9.792 5.653-25.815 5.653-35.607 0-4.896-2.827-7.344-6.553-7.344-10.28v6.703c0 3.726 2.448 7.452 7.344 10.279 9.792 5.653 25.815 5.653 35.607 0 4.896-2.827 7.344-6.553 7.344-10.28v-6.701c0 3.726-2.448 7.452-7.344 10.279\" fill=\"%23F2F5F8\"/>%0D%0A <path d=\"M92.296 32.687c-9.792 5.653-25.815 5.653-35.607 0-4.896-2.827-7.344-6.553-7.344-10.28v6.703c0 3.726 2.448 7.452 7.344 10.279 9.792 5.653 25.815 5.653 35.607 0 4.896-2.827 7.344-6.553 7.344-10.28v-6.701c0 3.726-2.448 7.452-7.344 10.279z\" stroke=\"%23CBD6E5\"/>%0D%0A <path d=\"M100.274 42.398l3.987-6.33-7.217-4.818-.011-.008-.004-.002v.001c-.481-.273-1.14-.234-1.867.185-1.46.843-2.654 2.912-2.654 4.598 0 .801.275 1.368.715 1.661l-.003.006.056.038.018.011 6.98 4.658z\" fill=\"%23FFF\"/>%0D%0A <path d=\"M100.274 42.398l3.987-6.33-7.217-4.818-.011-.008-.004-.002v.001c-.481-.273-1.14-.234-1.867.185-1.46.843-2.654 2.912-2.654 4.598 0 .801.275 1.368.715 1.661l-.003.006.056.038.018.011 6.98 4.658z\" stroke=\"%23CBD6E5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>%0D%0A <path d=\"M119.293 42.398l-14.095-8.168c-.745-.432-1.772-.374-2.904.28-2.259 1.303-4.107 4.505-4.107 7.113 0 1.32.475 2.241 1.235 2.664l-.002.004 14.179 8.201\" fill=\"%23F2F5F8\"/>%0D%0A <path d=\"M119.293 42.398l-14.095-8.168c-.745-.432-1.772-.374-2.904.28-2.259 1.303-4.107 4.505-4.107 7.113 0 1.32.475 2.241 1.235 2.664l-.002.004 14.179 8.201\" stroke=\"%23CBD6E5\"/>%0D%0A <path d=\"M120.635 45.115c0-2.609-1.848-3.676-4.107-2.37-2.26 1.303-4.108 4.504-4.108 7.113 0 2.608 1.848 3.676 4.108 2.371 2.26-1.304 4.107-4.505 4.107-7.114\" fill=\"%23F2F5F8\"/>%0D%0A <path d=\"M120.635 45.115c0-2.609-1.848-3.676-4.107-2.37-2.26 1.303-4.108 4.504-4.108 7.113 0 2.608 1.848 3.676 4.108 2.371 2.26-1.304 4.107-4.505 4.107-7.114z\" stroke=\"%23CBD6E5\"/>%0D%0A <path d=\"M74.333 12.076c-3.027 1.608-5.823 3.647-8.256 6.062-2.93 2.909-5.318 6.35-7.064 10.092.601.496 1.271.97 2.03 1.408 3.03 1.748 6.86 2.749 10.812 3.023 1.165-3.821 2.893-7.457 5.26-10.67 2.245-3.048 5.088-5.688 8.321-7.65-3.252-1.476-7.168-2.232-11.103-2.265\" fill=\"%23FFF\"/>%0D%0A <path d=\"M87.55 15.472c-3.979 1.873-7.243 5.108-9.606 8.83-1.669 2.63-2.918 5.49-3.927 8.443 1.232.002 2.462-.07 3.674-.208 1.76-3.001 3.973-6.521 5.967-8.772 1.998-2.255 4.375-4.226 7.071-5.545-.784-.996-1.852-1.922-3.179-2.748\" fill=\"%23FFF\"/>%0D%0A <path d=\"M101.012 86.166L82.974 42.77c-5.499 1.127-11.537 1.123-17.031-.014L46.687 88.679h.007\" stroke=\"%23CBD6E5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-dasharray=\"2,3,0,0\"/>%0D%0A <path d=\"M94.611 80.446c11.065 6.39 11.065 16.843 0 23.231-11.065 6.39-29.172 6.39-40.238 0-11.065-6.388-11.065-16.842 0-23.23 11.066-6.39 29.173-6.39 40.238 0z\" stroke=\"%23CBD6E5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-dasharray=\"2,3,0,0\"/>%0D%0A <path d=\"M121.68 10.236l-11.902 4.361M115.666 23.734l-5.239-2.47M119 25.306l-.753-.356M106.763 7.402l-.803 1.704M109.781 1l-1.81 3.84\" stroke=\"%23CBD6E5\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>%0D%0A </g>%0D%0A</svg>%0D%0A');background-size:100%;animation:moveUpDown 3s ease-in-out infinite}@keyframes moveUpDown{0%,to{transform:translateY(0)}50%{transform:translateY(-15px)}}.pointer{cursor:pointer}\n"] }]
|
|
2216
|
+
args: [{ selector: 'osl-grid', standalone: false, template: "<div class=\"osl-grid-wrapper\">\r\n\r\n <div class=\"osl-grid-table-container\" [style.height]=\"tableHeight\">\r\n <table class=\"osl-grid-table\">\r\n <thead class=\"osl-grid-thead\">\r\n <tr>\r\n @if (loading && columns.length === 0) {\r\n @for (sk of skeletonColumns; track $index) {\r\n <th class=\"osl-grid-th osl-grid-th--skeleton\">\r\n <div class=\"osl-skeleton osl-skeleton--header\"></div>\r\n </th>\r\n }\r\n } @else {\r\n @for (col of columns; track col.key; let last = $last) {\r\n <th\r\n class=\"osl-grid-th\"\r\n [class.osl-grid-th--last]=\"last\"\r\n [class.osl-grid-th--actions]=\"col.isActions\"\r\n (click)=\"sort(col.key, col.isActions)\"\r\n >\r\n @if (!col.isActions) {\r\n <span class=\"osl-grid-th-inner\">\r\n {{ col.label }}\r\n <span class=\"osl-grid-sort-icon\" [class.osl-grid-sort-icon--active]=\"sortKey === col.key\">\r\n @if (sortKey === col.key) {\r\n {{ sortAsc ? '\u2191' : '\u2193' }}\r\n } @else {\r\n <span class=\"osl-grid-sort-icon--idle\">\u21C5</span>\r\n }\r\n </span>\r\n </span>\r\n }\r\n </th>\r\n }\r\n }\r\n </tr>\r\n </thead>\r\n <tbody>\r\n @if (loading) {\r\n @for (sk of skeletonRows; track $index) {\r\n <tr class=\"osl-grid-row osl-grid-row--skeleton\">\r\n @if (columns.length > 0) {\r\n @for (col of columns; track col.key; let last = $last) {\r\n <td class=\"osl-grid-td\" [class.osl-grid-td--last]=\"last\" [class.osl-grid-td--actions]=\"col.isActions\">\r\n @if (col.isActions) {\r\n <div class=\"osl-skeleton osl-skeleton--actions\"></div>\r\n } @else {\r\n <div class=\"osl-skeleton\"></div>\r\n }\r\n </td>\r\n }\r\n } @else {\r\n @for (sk2 of skeletonColumns; track $index; let last = $last) {\r\n <td class=\"osl-grid-td\" [class.osl-grid-td--last]=\"last\">\r\n <div class=\"osl-skeleton\"></div>\r\n </td>\r\n }\r\n }\r\n </tr>\r\n }\r\n } @else {\r\n @if (pagedData.length === 0) {\r\n <tr>\r\n <td [attr.colspan]=\"columns.length\" class=\"osl-grid-empty\">\r\n <div class=\"d-flex align-items-center justify-content-center floating-element\">\r\n <div class=\"mx-4\">\r\n <p class=\"f-s-20 f-w-600 text-start\">No Records match the <br> current filters.</p>\r\n <p class=\"text-start\">Expecting to see new Records? Try again in <br> a few seconds as the system catches up</p>\r\n </div>\r\n <i class=\"icon\"></i>\r\n\r\n </div>\r\n </td>\r\n </tr>\r\n }\r\n @for (row of pagedData; track $index; let rowIdx = $index) {\r\n <tr class=\"osl-grid-row\" [class.pointer]=\"isSelectable\" (click)=\"onRowClick.emit(row)\">\r\n @for (col of columns; track col.key; let last = $last) {\r\n @if (col.isActions) {\r\n <td class=\"osl-grid-td osl-grid-td--actions\" [class.osl-grid-td--last]=\"last\">\r\n <button class=\"osl-grid-icon-btn\" (click)=\"$event.stopPropagation(); editClick.emit(row)\" title=\"Edit\">\r\n <mat-icon>mode_edit_outline</mat-icon>\r\n </button>\r\n <button class=\"osl-grid-icon-btn osl-grid-icon-btn--danger\" (click)=\"$event.stopPropagation(); deleteClick.emit(row)\" title=\"Delete\">\r\n <mat-icon>delete_outline</mat-icon>\r\n </button>\r\n @if (moreMenuActions.length > 0 && hasVisibleActions(row)) {\r\n <div class=\"osl-menu-wrapper\">\r\n <button class=\"osl-grid-icon-btn\" (click)=\"toggleMenu(rowIdx, $event)\" title=\"More actions\">\r\n <mat-icon>more_vert</mat-icon>\r\n </button>\r\n @if (openMenuIndex === rowIdx) {\r\n <div class=\"osl-custom-menu\"\r\n [style.top.px]=\"menuPosition.top\"\r\n [style.left.px]=\"menuPosition.left\">\r\n <div class=\"osl-custom-menu-header\">Actions</div>\r\n @for (action of moreMenuActions; track $index) {\r\n @if (!action.hideIf || !action.hideIf(row)) {\r\n <button class=\"osl-custom-menu-item\" (click)=\"action.click(row); closeMenu(); $event.stopPropagation()\">\r\n <span class=\"osl-custom-menu-dot\"></span>\r\n {{ getActionLabel(action, row) }}\r\n </button>\r\n }\r\n }\r\n </div>\r\n }\r\n </div>\r\n }\r\n </td>\r\n } @else {\r\n <td class=\"osl-grid-td\" [class.osl-grid-td--last]=\"last\">{{ getCellValue(row, col) }}</td>\r\n }\r\n }\r\n </tr>\r\n }\r\n }\r\n </tbody>\r\n </table>\r\n </div>\r\n\r\n @if (isPaginated) {\r\n <div class=\"osl-grid-pagination\">\r\n\r\n <span class=\"osl-grid-pagination__info\">\r\n @if (loading) {\r\n Loading...\r\n } @else if (_total > 0) {\r\n {{ startRecord }}\u2013{{ endRecord }} of {{ _total }} records\r\n } @else {\r\n No records\r\n }\r\n </span>\r\n\r\n <div class=\"osl-grid-pagination__controls\">\r\n <button class=\"osl-grid-page-btn osl-grid-page-btn--nav\" (click)=\"goToPage(1)\" [disabled]=\"currentPage === 1 || loading\" title=\"First page\">\r\n \u00AB\r\n </button>\r\n <button class=\"osl-grid-page-btn osl-grid-page-btn--nav\" (click)=\"goToPage(currentPage - 1)\" [disabled]=\"currentPage === 1 || loading\" title=\"Previous page\">\r\n \u2039 Prev\r\n </button>\r\n\r\n @for (page of pageNumbers; track $index) {\r\n @if (page === -1) {\r\n <span class=\"osl-grid-page-ellipsis\">\u2026</span>\r\n } @else {\r\n <button\r\n class=\"osl-grid-page-btn osl-grid-page-btn--num\"\r\n [class.osl-grid-page-btn--active]=\"page === currentPage\"\r\n [disabled]=\"loading\"\r\n (click)=\"goToPage(page)\"\r\n >\r\n {{ page }}\r\n </button>\r\n }\r\n }\r\n\r\n <button class=\"osl-grid-page-btn osl-grid-page-btn--nav\" (click)=\"goToPage(currentPage + 1)\" [disabled]=\"currentPage === totalPages || loading\" title=\"Next page\">\r\n Next \u203A\r\n </button>\r\n <button class=\"osl-grid-page-btn osl-grid-page-btn--nav\" (click)=\"goToPage(totalPages)\" [disabled]=\"currentPage === totalPages || loading\" title=\"Last page\">\r\n \u00BB\r\n </button>\r\n </div>\r\n\r\n <div class=\"osl-grid-pagination__size\">\r\n <select class=\"osl-grid-page-size\" [ngModel]=\"pageSize\" (ngModelChange)=\"onPageSizeChange($event)\" [disabled]=\"loading\">\r\n @for (opt of pageSizeOptions; track opt) {\r\n <option [value]=\"opt\">{{ opt }} per page</option>\r\n }\r\n </select>\r\n </div>\r\n\r\n </div>\r\n }\r\n\r\n</div>\r\n", styles: [".osl-grid-wrapper{display:flex;flex-direction:column;width:100%;font-size:var(--osl-text-font-size);font-family:inherit;border:1px solid var(--osl-border-color);border-radius:var(--osl-border-radius);overflow:hidden;background:#fff}.osl-grid-table-container{overflow-x:auto;overflow-y:auto;min-height:200px}.osl-grid-table{width:100%;border-collapse:collapse;table-layout:auto}.osl-grid-thead{position:sticky;top:0;z-index:2}.osl-grid-th{background:#f3f4f6;color:#4b5563;font-weight:600;font-size:12px;text-transform:uppercase;letter-spacing:.04em;padding:10px 14px;text-align:left;border-bottom:2px solid var(--osl-border-color);border-right:1px solid var(--osl-border-color);white-space:nowrap;cursor:pointer;-webkit-user-select:none;user-select:none}.osl-grid-th:hover{background:#e5e7eb}.osl-grid-th--last{border-right:none}.osl-grid-th-inner{display:inline-flex;align-items:center;gap:6px}.osl-grid-sort-icon{font-size:11px;color:#9ca3af}.osl-grid-sort-icon--active{color:var(--osl-primary)}.osl-grid-sort-icon--idle{opacity:.35}.osl-grid-row{border-bottom:1px solid #f3f4f6;transition:background .12s}.osl-grid-row:hover{background:#f9fafb}.osl-grid-row:last-child{border-bottom:none}.osl-grid-td{padding:10px 14px;color:#111827;font-size:var(--osl-text-font-size);vertical-align:middle;white-space:nowrap;border-right:1px solid #f3f4f6}.osl-grid-td--last{border-right:none}.osl-grid-empty{padding:48px 16px;text-align:center;color:#9ca3af;font-size:var(--osl-text-font-size)}.osl-grid-pagination{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 16px;border-top:1px solid var(--osl-border-color);background:#f9fafb;flex-shrink:0;flex-wrap:wrap}.osl-grid-pagination__info{font-size:12px;color:#6b7280;white-space:nowrap;min-width:120px}.osl-grid-pagination__controls{display:flex;align-items:center;gap:3px;flex-wrap:nowrap}.osl-grid-pagination__size{display:flex;align-items:center;min-width:120px;justify-content:flex-end}.osl-grid-page-btn{display:inline-flex;align-items:center;justify-content:center;height:30px;padding:0 10px;border:1px solid var(--osl-border-color);border-radius:var(--osl-border-radius);background:#fff;color:#374151;font-size:13px;font-family:inherit;cursor:pointer;transition:background .12s,border-color .12s,color .12s;white-space:nowrap}.osl-grid-page-btn:hover:not(:disabled){background:#f3f4f6;border-color:#9ca3af}.osl-grid-page-btn:disabled{opacity:.35;cursor:not-allowed}.osl-grid-page-btn--nav{font-size:12px;color:#6b7280}.osl-grid-page-btn--num{min-width:30px;padding:0;font-size:13px}.osl-grid-page-btn--active{background:var(--osl-primary);border-color:var(--osl-primary);color:#fff;font-weight:600}.osl-grid-page-btn--active:hover:not(:disabled){background:var(--osl-primary-hover);border-color:var(--osl-primary-hover)}.osl-grid-page-ellipsis{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;color:#9ca3af;font-size:13px;pointer-events:none}.osl-grid-page-size{height:30px;padding:0 8px;border:1px solid var(--osl-border-color);border-radius:var(--osl-border-radius);background:#fff;color:#374151;font-size:12px;font-family:inherit;cursor:pointer;outline:none}.osl-grid-page-size:focus{border-color:var(--osl-focus-border-color)}.osl-grid-th--actions{width:80px;min-width:80px;cursor:default;text-align:center}.osl-grid-th--actions:hover{background:#f3f4f6}.osl-grid-td--actions{width:80px;min-width:80px;text-align:center;padding:6px 8px;white-space:nowrap}.osl-grid-icon-btn{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border:1.5px solid var(--osl-border-color);border-radius:var(--osl-border-radius);background:transparent;color:#6b7280;cursor:pointer;padding:0;transition:border-color .15s,color .15s,background .15s;margin:0 2px}.osl-grid-icon-btn mat-icon{font-size:16px;width:16px;height:16px;line-height:16px}.osl-grid-icon-btn:hover{border-color:var(--osl-primary);color:var(--osl-primary);background:#6366f10f}.osl-grid-icon-btn--danger:hover{border-color:#ef4444;color:#ef4444;background:#ef44440f}.osl-menu-wrapper{position:relative;display:inline-flex}.osl-custom-menu{position:fixed;z-index:9999;min-width:190px;background:#fff;border:1px solid #e5e7eb;border-radius:10px;box-shadow:0 8px 24px #0000001f,0 2px 8px #00000012;overflow:hidden;animation:osl-menu-appear .15s cubic-bezier(.16,1,.3,1)}@keyframes osl-menu-appear{0%{opacity:0;transform:translateY(-8px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}.osl-custom-menu-header{padding:8px 14px 6px;font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#9ca3af;border-bottom:1px solid #f3f4f6;-webkit-user-select:none;user-select:none}.osl-custom-menu-item{display:flex;align-items:center;gap:10px;width:100%;padding:10px 14px;background:transparent;border:none;border-left:3px solid transparent;border-bottom:1px solid #f9fafb;text-align:left;font-size:13px;font-weight:500;font-family:inherit;color:#374151;cursor:pointer;white-space:nowrap;transition:background .12s,color .12s,border-left-color .12s}.osl-custom-menu-item:last-child{border-bottom:none}.osl-custom-menu-item:hover{background:#f5f3ff;color:var(--osl-primary);border-left-color:var(--osl-primary)}.osl-custom-menu-item:hover .osl-custom-menu-dot{background:var(--osl-primary);box-shadow:0 0 0 3px #6366f12e}.osl-custom-menu-dot{flex-shrink:0;width:6px;height:6px;border-radius:50%;background:#d1d5db;transition:background .12s,box-shadow .12s}@keyframes osl-skeleton-pulse{0%,to{opacity:1}50%{opacity:.4}}.osl-skeleton{height:14px;border-radius:4px;background:#e5e7eb;animation:osl-skeleton-pulse 1.4s ease-in-out infinite;width:80%}.osl-skeleton--actions{width:52px;margin:0 auto}.osl-skeleton--header{height:11px;width:65%;background:#d1d5db;border-radius:3px}.osl-grid-th--skeleton{cursor:default;pointer-events:none}.osl-grid-row--skeleton{pointer-events:none}.icon{background-repeat:no-repeat;background-position:center;display:inline-block!important;vertical-align:middle;width:18%;height:250px;background-image:url('data:image/svg+xml,<svg width=\"147\" height=\"134\" viewBox=\"0 0 147 134\" xmlns=\"http://www.w3.org/2000/svg\">%0D%0A <g fill=\"none\" fill-rule=\"evenodd\">%0D%0A <path d=\"M2.143 94.537c-2.858-1.65-2.858-4.35 0-6l66.1-38.163c2.858-1.65 7.534-1.65 10.392 0l66.101 38.163c2.858 1.65 2.858 4.35 0 6l-66.1 38.163c-2.859 1.65-7.535 1.65-10.393 0l-66.1-38.162z\" fill=\"%23EAF0F6\" fill-opacity=\".75\"/>%0D%0A <path d=\"M94.611 80.446c11.065 6.39 11.065 16.843 0 23.231-11.065 6.39-29.172 6.39-40.238 0-11.065-6.388-11.065-16.842 0-23.23 11.066-6.39 29.173-6.39 40.238 0\" fill=\"%23FFF\"/>%0D%0A <path d=\"M82.974 42.77c-5.498 1.128-11.537 1.124-17.03-.013L46.688 88.68h.007c1.089-3.023 3.637-5.9 7.679-8.233 11.065-6.39 29.172-6.39 40.237 0 2.902 1.674 5.02 3.632 6.4 5.719L82.975 42.77z\" fill=\"%23FFF\"/>%0D%0A <path d=\"M92.296 32.687c9.792-5.653 9.792-14.905 0-20.558-9.792-5.653-25.815-5.653-35.607 0-9.792 5.653-9.793 14.905 0 20.558 9.792 5.653 25.815 5.653 35.607 0z\" stroke=\"%23CBD6E5\" stroke-width=\"5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>%0D%0A <path d=\"M87.338 30.07c7.3-4.214 7.3-11.11 0-15.325s-19.244-4.215-26.544 0c-7.3 4.214-7.3 11.111 0 15.325 7.3 4.214 19.244 4.214 26.544 0z\" stroke=\"%23CBD6E5\" stroke-width=\"5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>%0D%0A <path d=\"M92.296 32.687c-9.792 5.653-25.815 5.653-35.607 0-4.896-2.827-7.344-6.553-7.344-10.28v6.703c0 3.726 2.448 7.452 7.344 10.279 9.792 5.653 25.815 5.653 35.607 0 4.896-2.827 7.344-6.553 7.344-10.28v-6.701c0 3.726-2.448 7.452-7.344 10.279z\" stroke=\"%23CBD6E5\" stroke-width=\"5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>%0D%0A <path d=\"M100.274 42.398l3.987-6.33-7.217-4.818-.011-.008-.004-.002v.001c-.481-.273-1.14-.234-1.867.185-1.46.843-2.654 2.912-2.654 4.598 0 .801.275 1.368.715 1.661l-.003.006.056.038.018.011 6.98 4.658z\" stroke=\"%23CBD6E5\" stroke-width=\"5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>%0D%0A <path d=\"M119.293 42.398l-14.095-8.168c-.745-.432-1.772-.374-2.904.28-2.259 1.303-4.107 4.505-4.107 7.113 0 1.32.475 2.241 1.235 2.664l-.002.004 14.179 8.201\" stroke=\"%23CBD6E5\" stroke-width=\"5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>%0D%0A <path d=\"M120.635 45.115c0-2.609-1.848-3.676-4.107-2.37-2.26 1.303-4.108 4.504-4.108 7.113 0 2.608 1.848 3.676 4.108 2.371 2.26-1.304 4.107-4.505 4.107-7.114zM74.333 12.076c-3.027 1.608-5.823 3.647-8.256 6.062-2.93 2.909-5.318 6.35-7.064 10.092.601.496 1.271.97 2.03 1.408 3.03 1.748 6.86 2.749 10.812 3.023 1.165-3.821 2.893-7.457 5.26-10.67 2.245-3.048 5.088-5.688 8.321-7.65-3.252-1.476-7.168-2.232-11.103-2.265z\" stroke=\"%23CBD6E5\" stroke-width=\"5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>%0D%0A <path d=\"M87.55 15.472c-3.979 1.873-7.243 5.108-9.606 8.83-1.669 2.63-2.918 5.49-3.927 8.443 1.232.002 2.462-.07 3.674-.208 1.76-3.001 3.973-6.521 5.967-8.772 1.998-2.255 4.375-4.226 7.071-5.545-.784-.996-1.852-1.922-3.179-2.748z\" stroke=\"%23CBD6E5\" stroke-width=\"5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>%0D%0A <path d=\"M92.296 32.687c9.792-5.653 9.792-14.905 0-20.558-9.792-5.653-25.815-5.653-35.607 0-9.792 5.653-9.793 14.905 0 20.558 9.792 5.653 25.815 5.653 35.607 0\" fill=\"%23FFF\"/>%0D%0A <path d=\"M92.296 32.687c9.792-5.653 9.792-14.905 0-20.558-9.792-5.653-25.815-5.653-35.607 0-9.792 5.653-9.793 14.905 0 20.558 9.792 5.653 25.815 5.653 35.607 0z\" stroke=\"%23CBD6E5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>%0D%0A <path d=\"M87.338 30.07c7.3-4.214 7.3-11.11 0-15.325s-19.244-4.215-26.544 0c-7.3 4.214-7.3 11.111 0 15.325 7.3 4.214 19.244 4.214 26.544 0\" fill=\"%23F2F5F8\"/>%0D%0A <path d=\"M87.338 30.07c7.3-4.214 7.3-11.11 0-15.325s-19.244-4.215-26.544 0c-7.3 4.214-7.3 11.111 0 15.325 7.3 4.214 19.244 4.214 26.544 0z\" stroke=\"%23CBD6E5\"/>%0D%0A <path d=\"M92.296 32.687c-9.792 5.653-25.815 5.653-35.607 0-4.896-2.827-7.344-6.553-7.344-10.28v6.703c0 3.726 2.448 7.452 7.344 10.279 9.792 5.653 25.815 5.653 35.607 0 4.896-2.827 7.344-6.553 7.344-10.28v-6.701c0 3.726-2.448 7.452-7.344 10.279\" fill=\"%23F2F5F8\"/>%0D%0A <path d=\"M92.296 32.687c-9.792 5.653-25.815 5.653-35.607 0-4.896-2.827-7.344-6.553-7.344-10.28v6.703c0 3.726 2.448 7.452 7.344 10.279 9.792 5.653 25.815 5.653 35.607 0 4.896-2.827 7.344-6.553 7.344-10.28v-6.701c0 3.726-2.448 7.452-7.344 10.279z\" stroke=\"%23CBD6E5\"/>%0D%0A <path d=\"M100.274 42.398l3.987-6.33-7.217-4.818-.011-.008-.004-.002v.001c-.481-.273-1.14-.234-1.867.185-1.46.843-2.654 2.912-2.654 4.598 0 .801.275 1.368.715 1.661l-.003.006.056.038.018.011 6.98 4.658z\" fill=\"%23FFF\"/>%0D%0A <path d=\"M100.274 42.398l3.987-6.33-7.217-4.818-.011-.008-.004-.002v.001c-.481-.273-1.14-.234-1.867.185-1.46.843-2.654 2.912-2.654 4.598 0 .801.275 1.368.715 1.661l-.003.006.056.038.018.011 6.98 4.658z\" stroke=\"%23CBD6E5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>%0D%0A <path d=\"M119.293 42.398l-14.095-8.168c-.745-.432-1.772-.374-2.904.28-2.259 1.303-4.107 4.505-4.107 7.113 0 1.32.475 2.241 1.235 2.664l-.002.004 14.179 8.201\" fill=\"%23F2F5F8\"/>%0D%0A <path d=\"M119.293 42.398l-14.095-8.168c-.745-.432-1.772-.374-2.904.28-2.259 1.303-4.107 4.505-4.107 7.113 0 1.32.475 2.241 1.235 2.664l-.002.004 14.179 8.201\" stroke=\"%23CBD6E5\"/>%0D%0A <path d=\"M120.635 45.115c0-2.609-1.848-3.676-4.107-2.37-2.26 1.303-4.108 4.504-4.108 7.113 0 2.608 1.848 3.676 4.108 2.371 2.26-1.304 4.107-4.505 4.107-7.114\" fill=\"%23F2F5F8\"/>%0D%0A <path d=\"M120.635 45.115c0-2.609-1.848-3.676-4.107-2.37-2.26 1.303-4.108 4.504-4.108 7.113 0 2.608 1.848 3.676 4.108 2.371 2.26-1.304 4.107-4.505 4.107-7.114z\" stroke=\"%23CBD6E5\"/>%0D%0A <path d=\"M74.333 12.076c-3.027 1.608-5.823 3.647-8.256 6.062-2.93 2.909-5.318 6.35-7.064 10.092.601.496 1.271.97 2.03 1.408 3.03 1.748 6.86 2.749 10.812 3.023 1.165-3.821 2.893-7.457 5.26-10.67 2.245-3.048 5.088-5.688 8.321-7.65-3.252-1.476-7.168-2.232-11.103-2.265\" fill=\"%23FFF\"/>%0D%0A <path d=\"M87.55 15.472c-3.979 1.873-7.243 5.108-9.606 8.83-1.669 2.63-2.918 5.49-3.927 8.443 1.232.002 2.462-.07 3.674-.208 1.76-3.001 3.973-6.521 5.967-8.772 1.998-2.255 4.375-4.226 7.071-5.545-.784-.996-1.852-1.922-3.179-2.748\" fill=\"%23FFF\"/>%0D%0A <path d=\"M101.012 86.166L82.974 42.77c-5.499 1.127-11.537 1.123-17.031-.014L46.687 88.679h.007\" stroke=\"%23CBD6E5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-dasharray=\"2,3,0,0\"/>%0D%0A <path d=\"M94.611 80.446c11.065 6.39 11.065 16.843 0 23.231-11.065 6.39-29.172 6.39-40.238 0-11.065-6.388-11.065-16.842 0-23.23 11.066-6.39 29.173-6.39 40.238 0z\" stroke=\"%23CBD6E5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-dasharray=\"2,3,0,0\"/>%0D%0A <path d=\"M121.68 10.236l-11.902 4.361M115.666 23.734l-5.239-2.47M119 25.306l-.753-.356M106.763 7.402l-.803 1.704M109.781 1l-1.81 3.84\" stroke=\"%23CBD6E5\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>%0D%0A </g>%0D%0A</svg>%0D%0A');background-size:100%;animation:moveUpDown 3s ease-in-out infinite}@keyframes moveUpDown{0%,to{transform:translateY(0)}50%{transform:translateY(-15px)}}.pointer{cursor:pointer}\n"] }]
|
|
2198
2217
|
}], propDecorators: { columns: [{
|
|
2199
2218
|
type: Input,
|
|
2200
2219
|
args: ['columns']
|
|
@@ -2239,6 +2258,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
|
|
|
2239
2258
|
type: Output
|
|
2240
2259
|
}], onRowClick: [{
|
|
2241
2260
|
type: Output
|
|
2261
|
+
}], onDocumentClick: [{
|
|
2262
|
+
type: HostListener,
|
|
2263
|
+
args: ['document:click']
|
|
2242
2264
|
}] } });
|
|
2243
2265
|
|
|
2244
2266
|
class OslSetup {
|