osl-base-extended 3.0.4 → 3.1.0
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.
|
@@ -5,7 +5,7 @@ import { MAT_DIALOG_DATA, MatDialogModule, MatDialog } from '@angular/material/d
|
|
|
5
5
|
import { MatSnackBar } from '@angular/material/snack-bar';
|
|
6
6
|
import { Router, ActivatedRoute } from '@angular/router';
|
|
7
7
|
import * as i1$2 from '@angular/common';
|
|
8
|
-
import { NgTemplateOutlet, NgComponentOutlet, isPlatformBrowser, DatePipe, DecimalPipe, NgStyle, NgClass, UpperCasePipe } from '@angular/common';
|
|
8
|
+
import { NgTemplateOutlet, NgComponentOutlet, isPlatformBrowser, DOCUMENT, DatePipe, DecimalPipe, NgStyle, NgClass, UpperCasePipe } from '@angular/common';
|
|
9
9
|
import * as i3 from '@angular/material/button';
|
|
10
10
|
import { MatIconButton, MatButtonModule } from '@angular/material/button';
|
|
11
11
|
import * as i2 from '@angular/material/icon';
|
|
@@ -3077,11 +3077,11 @@ class OslGrid {
|
|
|
3077
3077
|
return raw !== null && raw !== undefined && raw !== '' ? raw : '--';
|
|
3078
3078
|
}
|
|
3079
3079
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: OslGrid, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3080
|
-
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", canEdit: "canEdit", canDelete: "canDelete", highlightedRow: "highlightedRow", primaryKey: "primaryKey" }, outputs: { datasourceChange: "datasourceChange", pageChange: "pageChange", pageSizeChange: "pageSizeChange", sortChange: "sortChange", editClick: "editClick", deleteClick: "deleteClick", onRowClick: "onRowClick" }, host: { listeners: { "document:click": "onDocumentClick()" } }, viewQueries: [{ propertyName: "_tableContainerRef", first: true, predicate: ["tableContainer"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"osl-grid-wrapper\">\r\n\r\n <div #tableContainer 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\"\r\n [class.pointer]=\"isSelectable\"\r\n [class.osl-grid-row--highlighted]=\"isHighlightedRow(row)\"\r\n (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 @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 @if(canEdit){\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 }\r\n @if(canDelete){\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 }\r\n </td>\r\n } @else {\r\n <td class=\"osl-grid-td\" [class.osl-grid-td--last]=\"last\" >\r\n <span [class.link]=\"col.displayType == 'link'\" (click)=\"col.click ? col.click(row,col):null\">\r\n @switch (col.displayType) {\r\n @case ('date') { {{ row[col.key] | date }} }\r\n @case ('datetime') { {{ row[col.key] | date:'medium' }} }\r\n @case ('time') { {{ row[col.key] | date:'shortTime' }} }\r\n @case ('customDateFormat') { {{ row[col.key] | date:col.customDateFormat }} }\r\n @default { {{ getCellValue(row, col) }} }\r\n }\r\n </span>\r\n </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}@keyframes osl-row-highlight-fade{0%,60%{background:#6366f112}to{background:transparent}}.osl-grid-row--highlighted{box-shadow:inset 4px 0 0 var(--osl-primary);animation:osl-row-highlight-fade 3s ease-out forwards}.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}.link{text-decoration:underline;color:#00f;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: "pipe", type: i1$2.DatePipe, name: "date" }] });
|
|
3080
|
+
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", canEdit: "canEdit", canDelete: "canDelete", highlightedRow: "highlightedRow", primaryKey: "primaryKey" }, outputs: { datasourceChange: "datasourceChange", pageChange: "pageChange", pageSizeChange: "pageSizeChange", sortChange: "sortChange", editClick: "editClick", deleteClick: "deleteClick", onRowClick: "onRowClick" }, host: { listeners: { "document:click": "onDocumentClick()" } }, viewQueries: [{ propertyName: "_tableContainerRef", first: true, predicate: ["tableContainer"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"osl-grid-wrapper\">\r\n\r\n <div #tableContainer 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\"\r\n [class.pointer]=\"isSelectable\"\r\n [class.osl-grid-row--highlighted]=\"isHighlightedRow(row)\"\r\n (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 @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 @if(canEdit){\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 }\r\n @if(canDelete){\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 }\r\n </td>\r\n } @else {\r\n <td class=\"osl-grid-td\" [class.osl-grid-td--last]=\"last\" >\r\n <span [class.link]=\"col.displayType == 'link'\" (click)=\"col.click ? col.click(row,col):null\">\r\n @switch (col.displayType) {\r\n @case ('date') { {{ row[col.key] | date }} }\r\n @case ('datetime') { {{ row[col.key] | date:'medium' }} }\r\n @case ('time') { {{ row[col.key] | date:'shortTime' }} }\r\n @case ('customDateFormat') { {{ row[col.key] | date:col.customDateFormat }} }\r\n @default { {{ getCellValue(row, col) }} }\r\n }\r\n </span>\r\n </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}@keyframes osl-row-highlight-fade{0%,60%{background:#6366f112}to{background:transparent}}.osl-grid-row--highlighted{box-shadow:inset 4px 0 0 var(--osl-primary);animation:osl-row-highlight-fade 3s ease-out forwards}.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;position:sticky;left:0;z-index:3}.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;position:sticky;left:0;z-index:1;background:#fff}.osl-grid-row:hover .osl-grid-td--actions{background:#f9fafb}.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}.link{text-decoration:underline;color:#00f;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: "pipe", type: i1$2.DatePipe, name: "date" }] });
|
|
3081
3081
|
}
|
|
3082
3082
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: OslGrid, decorators: [{
|
|
3083
3083
|
type: Component,
|
|
3084
|
-
args: [{ selector: 'osl-grid', standalone: false, template: "<div class=\"osl-grid-wrapper\">\r\n\r\n <div #tableContainer 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\"\r\n [class.pointer]=\"isSelectable\"\r\n [class.osl-grid-row--highlighted]=\"isHighlightedRow(row)\"\r\n (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 @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 @if(canEdit){\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 }\r\n @if(canDelete){\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 }\r\n </td>\r\n } @else {\r\n <td class=\"osl-grid-td\" [class.osl-grid-td--last]=\"last\" >\r\n <span [class.link]=\"col.displayType == 'link'\" (click)=\"col.click ? col.click(row,col):null\">\r\n @switch (col.displayType) {\r\n @case ('date') { {{ row[col.key] | date }} }\r\n @case ('datetime') { {{ row[col.key] | date:'medium' }} }\r\n @case ('time') { {{ row[col.key] | date:'shortTime' }} }\r\n @case ('customDateFormat') { {{ row[col.key] | date:col.customDateFormat }} }\r\n @default { {{ getCellValue(row, col) }} }\r\n }\r\n </span>\r\n </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}@keyframes osl-row-highlight-fade{0%,60%{background:#6366f112}to{background:transparent}}.osl-grid-row--highlighted{box-shadow:inset 4px 0 0 var(--osl-primary);animation:osl-row-highlight-fade 3s ease-out forwards}.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}.link{text-decoration:underline;color:#00f;cursor:pointer}\n"] }]
|
|
3084
|
+
args: [{ selector: 'osl-grid', standalone: false, template: "<div class=\"osl-grid-wrapper\">\r\n\r\n <div #tableContainer 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\"\r\n [class.pointer]=\"isSelectable\"\r\n [class.osl-grid-row--highlighted]=\"isHighlightedRow(row)\"\r\n (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 @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 @if(canEdit){\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 }\r\n @if(canDelete){\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 }\r\n </td>\r\n } @else {\r\n <td class=\"osl-grid-td\" [class.osl-grid-td--last]=\"last\" >\r\n <span [class.link]=\"col.displayType == 'link'\" (click)=\"col.click ? col.click(row,col):null\">\r\n @switch (col.displayType) {\r\n @case ('date') { {{ row[col.key] | date }} }\r\n @case ('datetime') { {{ row[col.key] | date:'medium' }} }\r\n @case ('time') { {{ row[col.key] | date:'shortTime' }} }\r\n @case ('customDateFormat') { {{ row[col.key] | date:col.customDateFormat }} }\r\n @default { {{ getCellValue(row, col) }} }\r\n }\r\n </span>\r\n </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}@keyframes osl-row-highlight-fade{0%,60%{background:#6366f112}to{background:transparent}}.osl-grid-row--highlighted{box-shadow:inset 4px 0 0 var(--osl-primary);animation:osl-row-highlight-fade 3s ease-out forwards}.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;position:sticky;left:0;z-index:3}.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;position:sticky;left:0;z-index:1;background:#fff}.osl-grid-row:hover .osl-grid-td--actions{background:#f9fafb}.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}.link{text-decoration:underline;color:#00f;cursor:pointer}\n"] }]
|
|
3085
3085
|
}], propDecorators: { columns: [{
|
|
3086
3086
|
type: Input,
|
|
3087
3087
|
args: ['columns']
|
|
@@ -4040,6 +4040,201 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
|
|
|
4040
4040
|
}]
|
|
4041
4041
|
}] });
|
|
4042
4042
|
|
|
4043
|
+
const TOOLTIP_CSS = `
|
|
4044
|
+
.osl-tooltip {
|
|
4045
|
+
position: fixed;
|
|
4046
|
+
top: -9999px;
|
|
4047
|
+
left: -9999px;
|
|
4048
|
+
z-index: 10000;
|
|
4049
|
+
background: #111827;
|
|
4050
|
+
color: #ffffff;
|
|
4051
|
+
font-size: 12px;
|
|
4052
|
+
line-height: 1.55;
|
|
4053
|
+
font-family: inherit;
|
|
4054
|
+
padding: 6px 12px;
|
|
4055
|
+
border-radius: 8px;
|
|
4056
|
+
word-break: break-word;
|
|
4057
|
+
white-space: pre-wrap;
|
|
4058
|
+
box-shadow: 0 8px 24px rgba(0,0,0,0.22), 0 2px 6px rgba(0,0,0,0.14);
|
|
4059
|
+
pointer-events: none;
|
|
4060
|
+
}
|
|
4061
|
+
.osl-tooltip::after {
|
|
4062
|
+
content: '';
|
|
4063
|
+
position: absolute;
|
|
4064
|
+
border: 5px solid transparent;
|
|
4065
|
+
}
|
|
4066
|
+
.osl-tooltip--top::after {
|
|
4067
|
+
top: 100%;
|
|
4068
|
+
left: 50%;
|
|
4069
|
+
transform: translateX(-50%);
|
|
4070
|
+
border-top-color: #111827;
|
|
4071
|
+
}
|
|
4072
|
+
.osl-tooltip--bottom::after {
|
|
4073
|
+
bottom: 100%;
|
|
4074
|
+
left: 50%;
|
|
4075
|
+
transform: translateX(-50%);
|
|
4076
|
+
border-bottom-color: #111827;
|
|
4077
|
+
}
|
|
4078
|
+
.osl-tooltip--left::after {
|
|
4079
|
+
top: 50%;
|
|
4080
|
+
left: 100%;
|
|
4081
|
+
transform: translateY(-50%);
|
|
4082
|
+
border-left-color: #111827;
|
|
4083
|
+
}
|
|
4084
|
+
.osl-tooltip--right::after {
|
|
4085
|
+
top: 50%;
|
|
4086
|
+
right: 100%;
|
|
4087
|
+
transform: translateY(-50%);
|
|
4088
|
+
border-right-color: #111827;
|
|
4089
|
+
}
|
|
4090
|
+
|
|
4091
|
+
/* Default: position-aware slide animations */
|
|
4092
|
+
.osl-tooltip--top { animation: _osl_tip_up 0.18s cubic-bezier(0.16,1,0.3,1) forwards; }
|
|
4093
|
+
.osl-tooltip--bottom { animation: _osl_tip_down 0.18s cubic-bezier(0.16,1,0.3,1) forwards; }
|
|
4094
|
+
.osl-tooltip--left { animation: _osl_tip_left 0.18s cubic-bezier(0.16,1,0.3,1) forwards; }
|
|
4095
|
+
.osl-tooltip--right { animation: _osl_tip_right 0.18s cubic-bezier(0.16,1,0.3,1) forwards; }
|
|
4096
|
+
|
|
4097
|
+
/* Animation override variants */
|
|
4098
|
+
.osl-tooltip--anim-scale { animation: _osl_tip_scale 0.20s cubic-bezier(0.34,1.56,0.64,1) forwards !important; }
|
|
4099
|
+
.osl-tooltip--anim-bounce { animation: _osl_tip_bounce 0.40s cubic-bezier(0.34,1.56,0.64,1) forwards !important; }
|
|
4100
|
+
.osl-tooltip--anim-fade { animation: _osl_tip_fade 0.22s ease-out forwards !important; }
|
|
4101
|
+
|
|
4102
|
+
@keyframes _osl_tip_up { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }
|
|
4103
|
+
@keyframes _osl_tip_down { from { opacity:0; transform:translateY(-8px); } to { opacity:1; transform:translateY(0); } }
|
|
4104
|
+
@keyframes _osl_tip_left { from { opacity:0; transform:translateX(8px); } to { opacity:1; transform:translateX(0); } }
|
|
4105
|
+
@keyframes _osl_tip_right { from { opacity:0; transform:translateX(-8px); } to { opacity:1; transform:translateX(0); } }
|
|
4106
|
+
@keyframes _osl_tip_scale {
|
|
4107
|
+
from { opacity:0; transform:scale(0.72); }
|
|
4108
|
+
to { opacity:1; transform:scale(1); }
|
|
4109
|
+
}
|
|
4110
|
+
@keyframes _osl_tip_bounce {
|
|
4111
|
+
0% { opacity:0; transform:scale(0.55); }
|
|
4112
|
+
55% { opacity:1; transform:scale(1.12); }
|
|
4113
|
+
75% { transform:scale(0.95); }
|
|
4114
|
+
90% { transform:scale(1.03); }
|
|
4115
|
+
100% { transform:scale(1); }
|
|
4116
|
+
}
|
|
4117
|
+
@keyframes _osl_tip_fade { from { opacity:0; } to { opacity:1; } }
|
|
4118
|
+
`;
|
|
4119
|
+
class OslTooltipDirective {
|
|
4120
|
+
el;
|
|
4121
|
+
renderer;
|
|
4122
|
+
document;
|
|
4123
|
+
text = '';
|
|
4124
|
+
oslTooltipPosition = 'top';
|
|
4125
|
+
oslTooltipAnimation = 'slide';
|
|
4126
|
+
oslTooltipDisabled = false;
|
|
4127
|
+
oslTooltipMaxWidth = '280px';
|
|
4128
|
+
tooltipEl = null;
|
|
4129
|
+
static cssInjected = false;
|
|
4130
|
+
constructor(el, renderer, document) {
|
|
4131
|
+
this.el = el;
|
|
4132
|
+
this.renderer = renderer;
|
|
4133
|
+
this.document = document;
|
|
4134
|
+
this.injectCss();
|
|
4135
|
+
}
|
|
4136
|
+
show() {
|
|
4137
|
+
if (this.oslTooltipDisabled || !this.text?.trim())
|
|
4138
|
+
return;
|
|
4139
|
+
this.create();
|
|
4140
|
+
this.position();
|
|
4141
|
+
}
|
|
4142
|
+
hide() {
|
|
4143
|
+
this.destroy();
|
|
4144
|
+
}
|
|
4145
|
+
create() {
|
|
4146
|
+
this.destroy();
|
|
4147
|
+
const tip = this.renderer.createElement('div');
|
|
4148
|
+
this.renderer.addClass(tip, 'osl-tooltip');
|
|
4149
|
+
this.renderer.addClass(tip, `osl-tooltip--${this.oslTooltipPosition}`);
|
|
4150
|
+
if (this.oslTooltipAnimation !== 'slide') {
|
|
4151
|
+
this.renderer.addClass(tip, `osl-tooltip--anim-${this.oslTooltipAnimation}`);
|
|
4152
|
+
}
|
|
4153
|
+
this.renderer.setStyle(tip, 'max-width', this.oslTooltipMaxWidth);
|
|
4154
|
+
this.renderer.appendChild(tip, this.renderer.createText(this.text));
|
|
4155
|
+
this.renderer.appendChild(this.document.body, tip);
|
|
4156
|
+
this.tooltipEl = tip;
|
|
4157
|
+
}
|
|
4158
|
+
position() {
|
|
4159
|
+
if (!this.tooltipEl)
|
|
4160
|
+
return;
|
|
4161
|
+
const host = this.el.nativeElement.getBoundingClientRect();
|
|
4162
|
+
const tip = this.tooltipEl.getBoundingClientRect();
|
|
4163
|
+
const gap = 8;
|
|
4164
|
+
let top;
|
|
4165
|
+
let left;
|
|
4166
|
+
switch (this.oslTooltipPosition) {
|
|
4167
|
+
case 'bottom':
|
|
4168
|
+
top = host.bottom + gap;
|
|
4169
|
+
left = host.left + host.width / 2 - tip.width / 2;
|
|
4170
|
+
break;
|
|
4171
|
+
case 'left':
|
|
4172
|
+
top = host.top + host.height / 2 - tip.height / 2;
|
|
4173
|
+
left = host.left - tip.width - gap;
|
|
4174
|
+
break;
|
|
4175
|
+
case 'right':
|
|
4176
|
+
top = host.top + host.height / 2 - tip.height / 2;
|
|
4177
|
+
left = host.right + gap;
|
|
4178
|
+
break;
|
|
4179
|
+
default: // top
|
|
4180
|
+
top = host.top - tip.height - gap;
|
|
4181
|
+
left = host.left + host.width / 2 - tip.width / 2;
|
|
4182
|
+
}
|
|
4183
|
+
left = Math.max(8, Math.min(left, this.document.defaultView.innerWidth - tip.width - 8));
|
|
4184
|
+
top = Math.max(8, top);
|
|
4185
|
+
this.renderer.setStyle(this.tooltipEl, 'top', `${top}px`);
|
|
4186
|
+
this.renderer.setStyle(this.tooltipEl, 'left', `${left}px`);
|
|
4187
|
+
}
|
|
4188
|
+
destroy() {
|
|
4189
|
+
if (this.tooltipEl) {
|
|
4190
|
+
if (this.document.body.contains(this.tooltipEl)) {
|
|
4191
|
+
this.renderer.removeChild(this.document.body, this.tooltipEl);
|
|
4192
|
+
}
|
|
4193
|
+
this.tooltipEl = null;
|
|
4194
|
+
}
|
|
4195
|
+
}
|
|
4196
|
+
injectCss() {
|
|
4197
|
+
if (OslTooltipDirective.cssInjected || this.document.getElementById('_osl_tooltip_css')) {
|
|
4198
|
+
OslTooltipDirective.cssInjected = true;
|
|
4199
|
+
return;
|
|
4200
|
+
}
|
|
4201
|
+
const style = this.document.createElement('style');
|
|
4202
|
+
style.id = '_osl_tooltip_css';
|
|
4203
|
+
style.textContent = TOOLTIP_CSS;
|
|
4204
|
+
this.document.head.appendChild(style);
|
|
4205
|
+
OslTooltipDirective.cssInjected = true;
|
|
4206
|
+
}
|
|
4207
|
+
ngOnDestroy() {
|
|
4208
|
+
this.destroy();
|
|
4209
|
+
}
|
|
4210
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: OslTooltipDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Directive });
|
|
4211
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: OslTooltipDirective, isStandalone: true, selector: "[oslTooltip]", inputs: { text: ["oslTooltip", "text"], oslTooltipPosition: "oslTooltipPosition", oslTooltipAnimation: "oslTooltipAnimation", oslTooltipDisabled: "oslTooltipDisabled", oslTooltipMaxWidth: "oslTooltipMaxWidth" }, host: { listeners: { "mouseenter": "show()", "mouseleave": "hide()" } }, ngImport: i0 });
|
|
4212
|
+
}
|
|
4213
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: OslTooltipDirective, decorators: [{
|
|
4214
|
+
type: Directive,
|
|
4215
|
+
args: [{ selector: '[oslTooltip]', standalone: true }]
|
|
4216
|
+
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: Document, decorators: [{
|
|
4217
|
+
type: Inject,
|
|
4218
|
+
args: [DOCUMENT]
|
|
4219
|
+
}] }], propDecorators: { text: [{
|
|
4220
|
+
type: Input,
|
|
4221
|
+
args: ['oslTooltip']
|
|
4222
|
+
}], oslTooltipPosition: [{
|
|
4223
|
+
type: Input
|
|
4224
|
+
}], oslTooltipAnimation: [{
|
|
4225
|
+
type: Input
|
|
4226
|
+
}], oslTooltipDisabled: [{
|
|
4227
|
+
type: Input
|
|
4228
|
+
}], oslTooltipMaxWidth: [{
|
|
4229
|
+
type: Input
|
|
4230
|
+
}], show: [{
|
|
4231
|
+
type: HostListener,
|
|
4232
|
+
args: ['mouseenter']
|
|
4233
|
+
}], hide: [{
|
|
4234
|
+
type: HostListener,
|
|
4235
|
+
args: ['mouseleave']
|
|
4236
|
+
}] } });
|
|
4237
|
+
|
|
4043
4238
|
// ─── Component ────────────────────────────────────────────────────────────────
|
|
4044
4239
|
class OslReportGrid {
|
|
4045
4240
|
// Inputs
|
|
@@ -5649,6 +5844,7 @@ class FormStructureModule {
|
|
|
5649
5844
|
MatDialogModule,
|
|
5650
5845
|
MatButtonModule,
|
|
5651
5846
|
OslSkeletonModule,
|
|
5847
|
+
OslTooltipDirective,
|
|
5652
5848
|
MatDatepickerModule,
|
|
5653
5849
|
MatMenuModule,
|
|
5654
5850
|
ScrollingModule,
|
|
@@ -5670,7 +5866,7 @@ class FormStructureModule {
|
|
|
5670
5866
|
OslButton,
|
|
5671
5867
|
OslSetup,
|
|
5672
5868
|
OslSearchbar, OslAutocompleteLister, OslReportGrid, OslReportForm,
|
|
5673
|
-
OslMenu, OslMenuTriggerFor, OslDocumentUploader] });
|
|
5869
|
+
OslMenu, OslMenuTriggerFor, OslDocumentUploader, OslTooltipDirective] });
|
|
5674
5870
|
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: FormStructureModule, providers: [
|
|
5675
5871
|
{ provide: AUTOCOMPLETE_LISTER_COMPONENT, useValue: OslAutocompleteLister },
|
|
5676
5872
|
], imports: [FormsModule,
|
|
@@ -5734,6 +5930,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
|
|
|
5734
5930
|
MatDialogModule,
|
|
5735
5931
|
MatButtonModule,
|
|
5736
5932
|
OslSkeletonModule,
|
|
5933
|
+
OslTooltipDirective,
|
|
5737
5934
|
MatDatepickerModule,
|
|
5738
5935
|
MatMenuModule,
|
|
5739
5936
|
ScrollingModule,
|
|
@@ -5757,7 +5954,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
|
|
|
5757
5954
|
OslButton,
|
|
5758
5955
|
OslSetup,
|
|
5759
5956
|
OslSearchbar, OslAutocompleteLister, OslReportGrid, OslReportForm,
|
|
5760
|
-
OslMenu, OslMenuTriggerFor, OslDocumentUploader],
|
|
5957
|
+
OslMenu, OslMenuTriggerFor, OslDocumentUploader, OslTooltipDirective],
|
|
5761
5958
|
providers: [
|
|
5762
5959
|
{ provide: AUTOCOMPLETE_LISTER_COMPONENT, useValue: OslAutocompleteLister },
|
|
5763
5960
|
],
|
|
@@ -7022,5 +7219,5 @@ var validation_util = /*#__PURE__*/Object.freeze({
|
|
|
7022
7219
|
* Generated bundle index. Do not edit.
|
|
7023
7220
|
*/
|
|
7024
7221
|
|
|
7025
|
-
export { array_util as ArrayUtil, date_util as DateUtil, DeleteConfirmation, DeleteConfirmationData, Dialog, DialogWrapper, DynamicForm, FormStructureModule, Httpbase, number_util as NumberUtil, object_util as ObjectUtil, OslAutocomplete, OslAutocompleteLister, OslBaseExtended, OslButton, OslCheckbox, OslDatepicker, OslDatetimepicker, OslDocumentUploader, OslFileUpload, OslFormGrid, OslGrid, OslMenu, OslMenuTriggerFor, OslRadio, OslReportForm, OslReportGrid, OslSearchbar, OslSelect, OslSetup, OslSkeletonDirective, OslSkeletonModule, OslSkeletonThemeService, OslSlideToggle, OslUserLog, Oslinput, Osltextarea, storage_util as StorageUtil, string_util as StringUtil, validation_util as ValidationUtil, baseComponent };
|
|
7222
|
+
export { array_util as ArrayUtil, date_util as DateUtil, DeleteConfirmation, DeleteConfirmationData, Dialog, DialogWrapper, DynamicForm, FormStructureModule, Httpbase, number_util as NumberUtil, object_util as ObjectUtil, OslAutocomplete, OslAutocompleteLister, OslBaseExtended, OslButton, OslCheckbox, OslDatepicker, OslDatetimepicker, OslDocumentUploader, OslFileUpload, OslFormGrid, OslGrid, OslMenu, OslMenuTriggerFor, OslRadio, OslReportForm, OslReportGrid, OslSearchbar, OslSelect, OslSetup, OslSkeletonDirective, OslSkeletonModule, OslSkeletonThemeService, OslSlideToggle, OslTooltipDirective, OslUserLog, Oslinput, Osltextarea, storage_util as StorageUtil, string_util as StringUtil, validation_util as ValidationUtil, baseComponent };
|
|
7026
7223
|
//# sourceMappingURL=osl-base-extended.mjs.map
|