commons-shared-web-ui 0.0.36 → 0.0.38
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.
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { NgModule, Injectable, inject, Component, Input, SecurityContext, Pipe, ViewChild, EventEmitter, Output, forwardRef, HostListener, Directive, signal, computed, ChangeDetectionStrategy, InjectionToken, ChangeDetectorRef,
|
|
2
|
+
import { NgModule, Injectable, inject, Component, Input, HostBinding, SecurityContext, Pipe, ViewChild, EventEmitter, Output, forwardRef, HostListener, Directive, signal, computed, ChangeDetectionStrategy, InjectionToken, ChangeDetectorRef, LOCALE_ID, ViewChildren } from '@angular/core';
|
|
3
3
|
import * as i1 from '@angular/common';
|
|
4
4
|
import { CommonModule, formatDate } from '@angular/common';
|
|
5
5
|
import * as i1$3 from '@angular/forms';
|
|
@@ -497,6 +497,9 @@ class ButtonComponent {
|
|
|
497
497
|
variant = 'primary';
|
|
498
498
|
type = 'button';
|
|
499
499
|
disabled = false;
|
|
500
|
+
get pointerEvents() {
|
|
501
|
+
return this.disabled ? 'none' : 'auto';
|
|
502
|
+
}
|
|
500
503
|
// Customization Inputs
|
|
501
504
|
width;
|
|
502
505
|
height;
|
|
@@ -534,7 +537,7 @@ class ButtonComponent {
|
|
|
534
537
|
return typeof this.icon === 'object' ? this.icon : { type: '', value: '' };
|
|
535
538
|
}
|
|
536
539
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
537
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: ButtonComponent, isStandalone: false, selector: "lib-button", inputs: { variant: "variant", type: "type", disabled: "disabled", width: "width", height: "height", borderRadius: "borderRadius", fontSize: "fontSize", fontWeight: "fontWeight", backgroundColor: "backgroundColor", color: "color", border: "border", icon: "icon", labels: "labels" }, ngImport: i0, template: "<button [type]=\"type\" [disabled]=\"disabled\" class=\"cc-btn\" [ngClass]=\"'cc-btn-' + variant\" [style.width]=\"width\"\r\n [style.height]=\"height\" [style.border-radius]=\"borderRadius\" [style.font-size]=\"fontSize\"\r\n [style.font-weight]=\"fontWeight\" [style.background-color]=\"backgroundColor\" [style.color]=\"color\"\r\n [style.border]=\"border\">\r\n <div class=\"cc-btn-icon-wrapper\" *ngIf=\"icon\">\r\n <!-- String Icons -->\r\n <ng-container *ngIf=\"isStringIcon\">\r\n <i *ngIf=\"!isImgIcon\" [ngClass]=\"iconString\" class=\"cc-btn-icon\"></i>\r\n <img *ngIf=\"isImgIcon\" [src]=\"iconString\" [attr.alt]=\"labels?.iconAltText || 'button icon'\"\r\n class=\"cc-btn-icon cc-btn-img-icon\" />\r\n </ng-container>\r\n\r\n <!-- Object Icons -->\r\n <ng-container *ngIf=\"isObjectIcon\">\r\n <i *ngIf=\"iconObject.type === 'fontawesome'\" [ngClass]=\"iconObject.value\" class=\"cc-btn-icon\"></i>\r\n <span *ngIf=\"iconObject.type === 'material'\" class=\"material-icons cc-btn-icon\">{{ iconObject.value }}</span>\r\n <img *ngIf=\"iconObject.type === 'img'\" [src]=\"iconObject.value\" [attr.alt]=\"labels?.iconAltText || 'button icon'\"\r\n class=\"cc-btn-icon cc-btn-img-icon\" />\r\n </ng-container>\r\n </div>\r\n <ng-content></ng-content>\r\n</button>", styles: [".cc-btn{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;cursor:pointer;transition:all .2s ease-in-out;font-family:var(--cc-btn-font-family);font-weight:var(--cc-btn-font-weight);font-size:var(--cc-btn-font-size);padding:var(--cc-btn-padding)}.cc-btn:disabled{opacity:var(--cc-btn-disabled-opacity);cursor:var(--cc-btn-disabled-cursor);pointer-events:none}.cc-btn.cc-btn-primary{background-color:var(--cc-btn-primary-bg);color:var(--cc-btn-primary-color);border-radius:var(--cc-btn-primary-radius);border:var(--cc-btn-primary-border)}.cc-btn.cc-btn-warning{background-color:var(--cc-btn-warning-bg);color:var(--cc-btn-warning-color);border-radius:var(--cc-btn-warning-radius);border:var(--cc-btn-warning-border)}.cc-btn.cc-btn-outline{background-color:var(--cc-btn-outline-bg);color:var(--cc-btn-outline-color);border-radius:var(--cc-btn-outline-radius);border:var(--cc-btn-outline-border)}.cc-btn.cc-btn-secondary{background-color:var(--cc-btn-secondary-bg);color:var(--cc-btn-secondary-color);border-radius:var(--cc-btn-secondary-radius);border:var(--cc-btn-secondary-border)}.cc-btn.cc-btn-success{background-color:var(--cc-btn-success-bg);color:var(--cc-btn-success-color);border-radius:var(--cc-btn-success-radius);border:var(--cc-btn-success-border)}.cc-btn.cc-btn-danger{background-color:var(--cc-btn-danger-bg);color:var(--cc-btn-danger-color);border-radius:var(--cc-btn-danger-radius);border:var(--cc-btn-danger-border)}.cc-btn.cc-btn-danger-outline{background-color:var(--cc-btn-danger-outline-bg);color:var(--cc-btn-danger-outline-color);border-radius:var(--cc-btn-danger-outline-radius);border:var(--cc-btn-danger-outline-border)}.cc-btn .cc-btn-icon-wrapper{display:inline-flex;align-items:center;margin-right:.5rem}.cc-btn .cc-btn-icon{font-size:1.1em;line-height:1}.cc-btn .cc-btn-img-icon{width:1.25rem;height:1.25rem;object-fit:contain}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
|
|
540
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: ButtonComponent, isStandalone: false, selector: "lib-button", inputs: { variant: "variant", type: "type", disabled: "disabled", width: "width", height: "height", borderRadius: "borderRadius", fontSize: "fontSize", fontWeight: "fontWeight", backgroundColor: "backgroundColor", color: "color", border: "border", icon: "icon", labels: "labels" }, host: { properties: { "style.pointer-events": "this.pointerEvents" } }, ngImport: i0, template: "<button [type]=\"type\" [disabled]=\"disabled\" class=\"cc-btn\" [ngClass]=\"'cc-btn-' + variant\" [style.width]=\"width\"\r\n [style.height]=\"height\" [style.border-radius]=\"borderRadius\" [style.font-size]=\"fontSize\"\r\n [style.font-weight]=\"fontWeight\" [style.background-color]=\"backgroundColor\" [style.color]=\"color\"\r\n [style.border]=\"border\">\r\n <div class=\"cc-btn-icon-wrapper\" *ngIf=\"icon\">\r\n <!-- String Icons -->\r\n <ng-container *ngIf=\"isStringIcon\">\r\n <i *ngIf=\"!isImgIcon\" [ngClass]=\"iconString\" class=\"cc-btn-icon\"></i>\r\n <img *ngIf=\"isImgIcon\" [src]=\"iconString\" [attr.alt]=\"labels?.iconAltText || 'button icon'\"\r\n class=\"cc-btn-icon cc-btn-img-icon\" />\r\n </ng-container>\r\n\r\n <!-- Object Icons -->\r\n <ng-container *ngIf=\"isObjectIcon\">\r\n <i *ngIf=\"iconObject.type === 'fontawesome'\" [ngClass]=\"iconObject.value\" class=\"cc-btn-icon\"></i>\r\n <span *ngIf=\"iconObject.type === 'material'\" class=\"material-icons cc-btn-icon\">{{ iconObject.value }}</span>\r\n <img *ngIf=\"iconObject.type === 'img'\" [src]=\"iconObject.value\" [attr.alt]=\"labels?.iconAltText || 'button icon'\"\r\n class=\"cc-btn-icon cc-btn-img-icon\" />\r\n </ng-container>\r\n </div>\r\n <ng-content></ng-content>\r\n</button>", styles: [".cc-btn{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;cursor:pointer;transition:all .2s ease-in-out;font-family:var(--cc-btn-font-family);font-weight:var(--cc-btn-font-weight);font-size:var(--cc-btn-font-size);padding:var(--cc-btn-padding)}.cc-btn:disabled{opacity:var(--cc-btn-disabled-opacity);cursor:var(--cc-btn-disabled-cursor);pointer-events:none}.cc-btn.cc-btn-primary{background-color:var(--cc-btn-primary-bg);color:var(--cc-btn-primary-color);border-radius:var(--cc-btn-primary-radius);border:var(--cc-btn-primary-border)}.cc-btn.cc-btn-warning{background-color:var(--cc-btn-warning-bg);color:var(--cc-btn-warning-color);border-radius:var(--cc-btn-warning-radius);border:var(--cc-btn-warning-border)}.cc-btn.cc-btn-outline{background-color:var(--cc-btn-outline-bg);color:var(--cc-btn-outline-color);border-radius:var(--cc-btn-outline-radius);border:var(--cc-btn-outline-border)}.cc-btn.cc-btn-secondary{background-color:var(--cc-btn-secondary-bg);color:var(--cc-btn-secondary-color);border-radius:var(--cc-btn-secondary-radius);border:var(--cc-btn-secondary-border)}.cc-btn.cc-btn-success{background-color:var(--cc-btn-success-bg);color:var(--cc-btn-success-color);border-radius:var(--cc-btn-success-radius);border:var(--cc-btn-success-border)}.cc-btn.cc-btn-danger{background-color:var(--cc-btn-danger-bg);color:var(--cc-btn-danger-color);border-radius:var(--cc-btn-danger-radius);border:var(--cc-btn-danger-border)}.cc-btn.cc-btn-danger-outline{background-color:var(--cc-btn-danger-outline-bg);color:var(--cc-btn-danger-outline-color);border-radius:var(--cc-btn-danger-outline-radius);border:var(--cc-btn-danger-outline-border)}.cc-btn .cc-btn-icon-wrapper{display:inline-flex;align-items:center;margin-right:.5rem}.cc-btn .cc-btn-icon{font-size:1.1em;line-height:1}.cc-btn .cc-btn-img-icon{width:1.25rem;height:1.25rem;object-fit:contain}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
|
|
538
541
|
}
|
|
539
542
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ButtonComponent, decorators: [{
|
|
540
543
|
type: Component,
|
|
@@ -545,6 +548,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
|
|
|
545
548
|
type: Input
|
|
546
549
|
}], disabled: [{
|
|
547
550
|
type: Input
|
|
551
|
+
}], pointerEvents: [{
|
|
552
|
+
type: HostBinding,
|
|
553
|
+
args: ['style.pointer-events']
|
|
548
554
|
}], width: [{
|
|
549
555
|
type: Input
|
|
550
556
|
}], height: [{
|
|
@@ -9248,7 +9254,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
|
|
|
9248
9254
|
}] });
|
|
9249
9255
|
|
|
9250
9256
|
const DEFAULT_ITEMS_PER_PAGE = 10;
|
|
9251
|
-
const DEFAULT_PAGE_SIZE_OPTIONS = [10, 20, 50];
|
|
9257
|
+
const DEFAULT_PAGE_SIZE_OPTIONS = [5, 10, 20, 50, 100];
|
|
9252
9258
|
const PAGINATION_THEME_DEFAULT = 'theme-1';
|
|
9253
9259
|
const PAGINATION_THEME_DARK = 'theme-2';
|
|
9254
9260
|
// Nav
|
|
@@ -9273,7 +9279,7 @@ class SideNavComponent {
|
|
|
9273
9279
|
/** Whether to hide icons when the side nav is expanded */
|
|
9274
9280
|
hideIconsWhenExpanded = false;
|
|
9275
9281
|
/** Whether to show tooltips on nav items */
|
|
9276
|
-
showTooltips =
|
|
9282
|
+
showTooltips = false;
|
|
9277
9283
|
/** Position of the tooltip */
|
|
9278
9284
|
tooltipPosition = DEFAULT_SIDE_NAV_TOOLTIP_POSITION;
|
|
9279
9285
|
/** Optional dictionary for label translation */
|
|
@@ -9366,14 +9372,30 @@ class SideNavComponent {
|
|
|
9366
9372
|
styles['--cc-side-nav-active-color'] = this.styleConfig.activeColor;
|
|
9367
9373
|
if (this.styleConfig.activeHoverBg)
|
|
9368
9374
|
styles['--cc-side-nav-active-hover-bg'] = this.styleConfig.activeHoverBg;
|
|
9375
|
+
if (this.styleConfig.toggleBg)
|
|
9376
|
+
styles['--cc-side-nav-toggle-bg'] = this.styleConfig.toggleBg;
|
|
9377
|
+
if (this.styleConfig.toggleBorderColor)
|
|
9378
|
+
styles['--cc-side-nav-toggle-border-color'] = this.styleConfig.toggleBorderColor;
|
|
9379
|
+
if (this.styleConfig.tooltipBg)
|
|
9380
|
+
styles['--cc-side-nav-tooltip-bg'] = this.styleConfig.tooltipBg;
|
|
9381
|
+
if (this.styleConfig.tooltipColor)
|
|
9382
|
+
styles['--cc-side-nav-tooltip-color'] = this.styleConfig.tooltipColor;
|
|
9383
|
+
if (this.styleConfig.tooltipFontWeight)
|
|
9384
|
+
styles['--cc-side-nav-tooltip-font-weight'] = this.styleConfig.tooltipFontWeight;
|
|
9385
|
+
if (this.styleConfig.tooltipLetterSpacing)
|
|
9386
|
+
styles['--cc-side-nav-tooltip-letter-spacing'] = this.styleConfig.tooltipLetterSpacing;
|
|
9387
|
+
if (this.styleConfig.tooltipOffset)
|
|
9388
|
+
styles['--cc-side-nav-tooltip-offset'] = this.styleConfig.tooltipOffset;
|
|
9389
|
+
if (this.styleConfig.tooltipShadow)
|
|
9390
|
+
styles['--cc-side-nav-tooltip-shadow'] = this.styleConfig.tooltipShadow;
|
|
9369
9391
|
return styles;
|
|
9370
9392
|
}
|
|
9371
9393
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SideNavComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
9372
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: SideNavComponent, isStandalone: false, selector: "lib-side-nav", inputs: { sections: "sections", userRoles: "userRoles", activeId: "activeId", styleConfig: "styleConfig", collapsed: "collapsed", width: "width", collapsedWidth: "collapsedWidth", showCollapseToggle: "showCollapseToggle", hideIconsWhenExpanded: "hideIconsWhenExpanded", showTooltips: "showTooltips", tooltipPosition: "tooltipPosition", labels: "labels" }, outputs: { itemClicked: "itemClicked", collapsedChange: "collapsedChange" }, host: { properties: { "class.cc-side-nav-host-collapsed": "this.isHostCollapsed" } }, usesOnChanges: true, ngImport: i0, template: "<nav class=\"cc-side-nav\" [class.collapsed]=\"collapsed\" role=\"navigation\" [ngStyle]=\"customStyles\">\r\n\r\n <!-- Fallback standalone toggle if no sections exist -->\r\n <div class=\"cc-side-nav-toggle-wrap standalone\" *ngIf=\"filteredSections.length === 0 && showCollapseToggle\">\r\n <button class=\"cc-side-nav-toggle\" (click)=\"toggleCollapse()\" type=\"button\"\r\n [attr.aria-label]=\"collapsed ? 'Expand navigation' : 'Collapse navigation'\">\r\n <span class=\"material-icons cc-side-nav-toggle-icon\">\r\n {{ collapsed ? 'menu_open' : 'menu' }}\r\n </span>\r\n </button>\r\n </div>\r\n\r\n <div class=\"cc-side-nav-section\" *ngFor=\"let section of filteredSections; let i = index\">\r\n\r\n <div class=\"cc-side-nav-heading-row\" *ngIf=\"section.heading || (i === 0 && showCollapseToggle)\">\r\n <h3 class=\"cc-side-nav-heading\" *ngIf=\"section.heading && !collapsed\">\r\n {{ section.heading }}\r\n </h3>\r\n\r\n <div class=\"cc-side-nav-toggle-wrap\" *ngIf=\"i === 0 && showCollapseToggle\"\r\n [class.no-heading]=\"!section.heading || collapsed\">\r\n <button class=\"cc-side-nav-toggle\" (click)=\"toggleCollapse()\" type=\"button\"\r\n [attr.aria-label]=\"collapsed ? 'Expand navigation' : 'Collapse navigation'\">\r\n <span class=\"material-icons cc-side-nav-toggle-icon\">\r\n {{ collapsed ? 'menu_open' : 'menu' }}\r\n </span>\r\n </button>\r\n </div>\r\n </div>\r\n\r\n <ul class=\"cc-side-nav-list\">\r\n <li *ngFor=\"let item of section.items\" class=\"cc-side-nav-list-item\">\r\n <a (click)=\"onItemClick(item, $event)\" class=\"cc-side-nav-link\" [class.active]=\"item.id === activeId\"\r\n [class.disabled]=\"item.disabled\" [matTooltip]=\"item.tooltip || item.label\"\r\n [matTooltipDisabled]=\"!showTooltips\" [matTooltipPosition]=\"tooltipPosition\"\r\n [matTooltipClass]=\"'cc-side-nav-tooltip'\" [attr.aria-current]=\"(item.id === activeId) ? 'page' : null\"\r\n [attr.aria-disabled]=\"item.disabled ? true : null\">\r\n <span *ngIf=\"item.icon && (collapsed || !hideIconsWhenExpanded)\" class=\"cc-side-nav-icon\">\r\n\r\n <span *ngIf=\"!item.icon.includes('fa') && !item.icon.includes('bi')\" class=\"material-icons\">\r\n {{ item.icon }}\r\n </span>\r\n\r\n <i *ngIf=\"item.icon.includes('fa') || item.icon.includes('bi')\" [class]=\"item.icon\"></i>\r\n\r\n </span>\r\n <span class=\"cc-side-nav-label\" *ngIf=\"!collapsed\">{{ item.label }}</span>\r\n <span class=\"cc-side-nav-arrow material-icons\"\r\n *ngIf=\"!collapsed && (item.id === activeId) && item.showArrow !== false\">chevron_right</span>\r\n </a>\r\n </li>\r\n </ul>\r\n\r\n </div>\r\n\r\n</nav>", styles: [":host{display:block;height:100%;overflow-y:auto;overflow-x:hidden;width:var(--cc-side-nav-width, 220px);transition:width .25s ease;--cc-side-nav-bg: rgba(249, 200, 14, .0509803922);--cc-side-nav-width: 220px;--cc-side-nav-collapsed-width: 56px;--cc-side-nav-gap-sections: 24px;--cc-side-nav-padding: 16px;--cc-side-nav-font-family: Poppins, sans-serif;--cc-side-nav-heading-font-weight: 500;--cc-side-nav-heading-font-size: 16px;--cc-side-nav-heading-color: #3C4043;--cc-side-nav-item-gap: 4px;--cc-side-nav-item-padding: 12px 16px;--cc-side-nav-item-border-radius: 8px;--cc-side-nav-item-font-weight: 400;--cc-side-nav-item-font-size: 14px;--cc-side-nav-item-color: #5F6368;--cc-side-nav-item-hover-bg: rgba(230, 62, 48, .05);--cc-side-nav-item-hover-color: #3C4043;--cc-side-nav-active-bg: #E63E30;--cc-side-nav-active-color: #FFFFFF;--cc-side-nav-active-font-weight: 500;--cc-side-nav-active-hover-bg: #D4382B;--cc-side-nav-disabled-opacity: .5;--cc-side-nav-tooltip-bg: rgba(0, 0, 0, .8);--cc-side-nav-tooltip-color: #FFFFFF;--cc-side-nav-tooltip-padding: 8px 12px;--cc-side-nav-tooltip-border-radius: 6px;--cc-side-nav-tooltip-font-size: 12px}:host.cc-side-nav-host-collapsed{width:var(--cc-side-nav-collapsed-width, 56px)}:host .cc-side-nav-heading-row{display:flex;align-items:center;justify-content:space-between;min-height:28px}:host .cc-side-nav-toggle{background:transparent;border:none;cursor:pointer;padding:4px;display:flex;align-items:center;justify-content:center;color:var(--cc-side-nav-item-color, #5F6368);transition:color .2s ease,background .2s ease;border-radius:6px}:host .cc-side-nav-toggle:hover{background:#0000000d}:host .cc-side-nav-toggle .material-icons{font-size:20px}:host::-webkit-scrollbar{width:3px}:host::-webkit-scrollbar-track{background:transparent}:host::-webkit-scrollbar-thumb{background:#00000026;border-radius:2px}:host::-webkit-scrollbar-thumb:hover{background:#0000004d}.cc-side-nav{display:flex;flex-direction:column;gap:var(--cc-side-nav-gap-sections, 24px);padding:var(--cc-side-nav-padding, 16px);width:var(--cc-side-nav-width, 220px);min-width:var(--cc-side-nav-width, 220px);box-sizing:border-box;background-color:var(--cc-side-nav-bg, rgba(249, 200, 14, .0509803922));min-height:100%;transition:width .25s ease,min-width .25s ease,padding .25s ease;overflow:hidden}.cc-side-nav.collapsed{width:var(--cc-side-nav-collapsed-width, 56px);min-width:var(--cc-side-nav-collapsed-width, 56px);padding:var(--cc-side-nav-padding, 16px) 8px}.cc-side-nav.collapsed .cc-side-nav-link{justify-content:center;gap:0;padding:10px}.cc-side-nav.collapsed .cc-side-nav-icon{font-size:20px}.cc-side-nav-section{display:flex;flex-direction:column;gap:12px}.cc-side-nav-heading{margin:0;padding:0 16px;font-family:var(--cc-side-nav-font-family, \"Poppins\", sans-serif);font-weight:var(--cc-side-nav-heading-font-weight, 500);font-style:normal;font-size:var(--cc-side-nav-heading-font-size, 16px);text-transform:uppercase;color:var(--cc-side-nav-heading-color, #3C4043);flex:1}.cc-side-nav-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--cc-side-nav-item-gap, 4px)}.cc-side-nav-list-item{margin:0;padding:0}.cc-side-nav-link{display:flex;align-items:center;gap:12px;padding:var(--cc-side-nav-item-padding, 12px 16px);text-decoration:none;cursor:pointer;border-radius:var(--cc-side-nav-item-border-radius, 8px);transition:background-color .2s ease,opacity .2s ease;font-family:var(--cc-side-nav-font-family, \"Poppins\", sans-serif);font-weight:var(--cc-side-nav-item-font-weight, 400);font-style:normal;font-size:var(--cc-side-nav-item-font-size, 14px);color:var(--cc-side-nav-item-color, #5F6368)}.cc-side-nav-link:hover:not(.disabled){background-color:var(--cc-side-nav-item-hover-bg, rgba(230, 62, 48, .05));color:var(--cc-side-nav-item-hover-color, #3C4043)}.cc-side-nav-link.active{background:var(--cc-side-nav-active-bg, #E63E30);opacity:1;border-radius:var(--cc-side-nav-item-border-radius, 8px);font-weight:var(--cc-side-nav-active-font-weight, 500);color:var(--cc-side-nav-active-color, #FFFFFF)}.cc-side-nav-link.active:hover{background-color:var(--cc-side-nav-active-hover-bg, #D4382B)}.cc-side-nav-link.disabled{cursor:not-allowed;opacity:var(--cc-side-nav-disabled-opacity, .5)}.cc-side-nav-icon{display:flex;align-items:center;justify-content:center;font-size:16px}.cc-side-nav-header{display:flex;justify-content:flex-end;padding:8px 16px}.cc-side-nav-label{flex:1;white-space:nowrap;overflow:hidden}.collapsed .cc-side-nav-label{display:none}.cc-side-nav-arrow{margin-left:auto;font-size:18px;opacity:.7}.cc-side-nav-link.active .cc-side-nav-arrow{color:var(--cc-side-nav-active-color, #FFFFFF);opacity:1}::ng-deep .cc-side-nav-tooltip{background-color:var(--cc-side-nav-tooltip-bg, rgba(0, 0, 0, .8))!important;color:var(--cc-side-nav-tooltip-color, #FFFFFF)!important;font-family:var(--cc-side-nav-font-family, \"Poppins\", sans-serif)!important;font-size:var(--cc-side-nav-tooltip-font-size, 12px)!important;padding:var(--cc-side-nav-tooltip-padding, 8px 12px)!important;border-radius:var(--cc-side-nav-tooltip-border-radius, 6px)!important;box-shadow:0 4px 12px #00000026;margin-left:8px!important}.cc-side-nav-toggle-wrap{display:flex;align-items:center;justify-content:flex-end}.cc-side-nav-toggle-wrap.standalone{padding-bottom:8px}.cc-side-nav-toggle-wrap.no-heading{flex:1}.collapsed .cc-side-nav-toggle-wrap{justify-content:center;width:100%}.cc-side-nav-toggle{display:flex;align-items:center;justify-content:center;width:28px;height:28px;border:none;border-radius:50%;background-color:transparent;cursor:pointer;color:var(--cc-side-nav-item-color, #5F6368);transition:background-color .2s ease,color .2s ease}.cc-side-nav-toggle:hover{background-color:var(--cc-side-nav-item-hover-bg, rgba(0, 0, 0, .06));color:var(--cc-side-nav-heading-color, #3C4043)}.cc-side-nav-toggle-icon{font-size:18px;line-height:1;display:block;transition:transform .25s ease}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2$2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] });
|
|
9394
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: SideNavComponent, isStandalone: false, selector: "lib-side-nav", inputs: { sections: "sections", userRoles: "userRoles", activeId: "activeId", styleConfig: "styleConfig", collapsed: "collapsed", width: "width", collapsedWidth: "collapsedWidth", showCollapseToggle: "showCollapseToggle", hideIconsWhenExpanded: "hideIconsWhenExpanded", showTooltips: "showTooltips", tooltipPosition: "tooltipPosition", labels: "labels" }, outputs: { itemClicked: "itemClicked", collapsedChange: "collapsedChange" }, host: { properties: { "class.cc-side-nav-host-collapsed": "this.isHostCollapsed" } }, usesOnChanges: true, ngImport: i0, template: "<nav class=\"cc-side-nav\" [class.collapsed]=\"collapsed\" role=\"navigation\" [ngStyle]=\"customStyles\">\n\n <div class=\"cc-side-nav-section\" *ngFor=\"let section of filteredSections; let i = index\">\n\n <div class=\"cc-side-nav-heading-row\" *ngIf=\"section.heading && !collapsed\">\n <h3 class=\"cc-side-nav-heading\">{{ section.heading }}</h3>\n </div>\n\n <ul class=\"cc-side-nav-list\">\n <li *ngFor=\"let item of section.items\" class=\"cc-side-nav-list-item\">\n <a (click)=\"onItemClick(item, $event)\" class=\"cc-side-nav-link\" [class.active]=\"item.id === activeId\"\n [class.disabled]=\"item.disabled\" [matTooltip]=\"item.tooltip || item.label\"\n [matTooltipDisabled]=\"collapsed ? false : !showTooltips\" [matTooltipPosition]=\"tooltipPosition\"\n [matTooltipClass]=\"'cc-side-nav-tooltip'\" [attr.aria-current]=\"(item.id === activeId) ? 'page' : null\"\n [attr.aria-disabled]=\"item.disabled ? true : null\">\n <span *ngIf=\"item.icon && (collapsed || !hideIconsWhenExpanded)\" class=\"cc-side-nav-icon\">\n <span *ngIf=\"!item.icon.includes('fa') && !item.icon.includes('bi')\" class=\"material-icons\">\n {{ item.icon }}\n </span>\n <i *ngIf=\"item.icon.includes('fa') || item.icon.includes('bi')\" [class]=\"item.icon\"></i>\n </span>\n <!-- Label: always in DOM, CSS transitions handle fade on collapse -->\n <span class=\"cc-side-nav-label\">{{ item.label }}</span>\n <!-- Arrow: rendered for active items regardless of collapse state; CSS hides it -->\n <span class=\"cc-side-nav-arrow material-icons\"\n *ngIf=\"(item.id === activeId) && item.showArrow !== false\">chevron_right</span>\n </a>\n </li>\n </ul>\n\n </div>\n\n</nav>\n\n<!--\n Toggle pill \u2014 always straddles the right edge of :host (right: -12px).\n Hidden via opacity/scale until :host is hovered; always visible when collapsed.\n Single chevron SVG rotates 180\u00B0 via CSS \u2014 no icon swap needed.\n-->\n<button *ngIf=\"showCollapseToggle\"\n class=\"cc-sn-toggle\"\n (click)=\"toggleCollapse()\"\n type=\"button\"\n [attr.aria-label]=\"collapsed ? 'Expand navigation' : 'Collapse navigation'\">\n <svg class=\"cc-sn-chevron\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 16 16\"\n fill=\"none\"\n aria-hidden=\"true\">\n <path d=\"M10 3L5 8L10 13\"\n stroke=\"currentColor\"\n stroke-width=\"1.75\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"/>\n </svg>\n</button>\n", styles: [":host{display:block;height:100%;overflow:visible;position:relative;width:var(--cc-side-nav-width, 220px);transition:width .3s cubic-bezier(.4,0,.2,1);--cc-side-nav-bg: #ffffff;--cc-side-nav-border-color: rgba(0, 0, 0, .08);--cc-side-nav-width: 220px;--cc-side-nav-collapsed-width: 56px;--cc-side-nav-gap-sections: 24px;--cc-side-nav-padding: 16px;--cc-side-nav-font-family: Poppins, sans-serif;--cc-side-nav-heading-font-weight: 500;--cc-side-nav-heading-font-size: 16px;--cc-side-nav-heading-color: #3C4043;--cc-side-nav-item-gap: 4px;--cc-side-nav-item-padding: 12px 16px;--cc-side-nav-item-border-radius: 8px;--cc-side-nav-item-font-weight: 400;--cc-side-nav-item-font-size: 14px;--cc-side-nav-item-color: #5F6368;--cc-side-nav-item-hover-bg: rgba(30, 30, 45, .08);--cc-side-nav-item-hover-color: #1e1e2d;--cc-side-nav-active-bg: #1e1e2d;--cc-side-nav-active-color: #ffffff;--cc-side-nav-active-font-weight: 500;--cc-side-nav-active-hover-bg: #2a2a3d;--cc-side-nav-disabled-opacity: .5;--cc-side-nav-toggle-bg: #ffffff;--cc-side-nav-toggle-border-color: rgba(0, 0, 0, .1);--cc-side-nav-tooltip-bg: #1e1e2d;--cc-side-nav-tooltip-color: #FFFFFF;--cc-side-nav-tooltip-padding: 8px 14px;--cc-side-nav-tooltip-border-radius: 6px;--cc-side-nav-tooltip-font-size: 12px;--cc-side-nav-tooltip-font-weight: 500;--cc-side-nav-tooltip-letter-spacing: .2px;--cc-side-nav-tooltip-offset: 20px;--cc-side-nav-tooltip-shadow: 0 4px 12px rgba(0, 0, 0, .35)}:host.cc-side-nav-host-collapsed{width:var(--cc-side-nav-collapsed-width, 56px)}:host:after{content:\"\";position:absolute;top:10%;right:0;width:2px;height:80%;background:var(--cc-side-nav-active-bg, #1e1e2d);border-radius:2px;opacity:0;transition:opacity .25s ease;pointer-events:none;z-index:4}:host:hover:after{opacity:.18}:host.cc-side-nav-host-collapsed:after{display:none}.cc-sn-toggle{position:absolute;bottom:20px;right:-12px;width:24px;height:24px;border-radius:50%;border:1.5px solid var(--cc-side-nav-toggle-border-color, rgba(0, 0, 0, .1));background:var(--cc-side-nav-toggle-bg, #ffffff);cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:20;padding:0;color:var(--cc-side-nav-item-color, #5F6368);box-shadow:0 1px 4px #0000001a,0 0 0 1px #0000000a;opacity:0;transform:scale(.65);transition:opacity .2s ease,transform .25s cubic-bezier(.34,1.56,.64,1),background .15s ease,color .15s ease,border-color .15s ease,box-shadow .2s ease}.cc-sn-toggle:focus-visible{outline:2px solid var(--cc-side-nav-active-bg, #E63E30);outline-offset:2px}.cc-sn-toggle .cc-sn-chevron{width:12px;height:12px;flex-shrink:0;display:block;transition:transform .3s cubic-bezier(.4,0,.2,1)}:host:hover .cc-sn-toggle{opacity:1;transform:scale(1)}:host:hover .cc-sn-toggle:hover,:host.cc-side-nav-host-collapsed .cc-sn-toggle:hover{background:var(--cc-side-nav-active-bg, #E63E30);color:var(--cc-side-nav-active-color, #ffffff);border-color:transparent;box-shadow:0 4px 14px #0000001a,0 1px 4px #0000001a;transform:scale(1.12)}:host.cc-side-nav-host-collapsed .cc-sn-toggle{opacity:1;transform:scale(1);box-shadow:0 2px 8px #00000021,0 0 0 1.5px #00000014}:host.cc-side-nav-host-collapsed .cc-sn-chevron{transform:rotate(180deg)}.cc-side-nav{display:flex;flex-direction:column;gap:var(--cc-side-nav-gap-sections, 24px);padding:var(--cc-side-nav-padding, 16px);width:var(--cc-side-nav-width, 220px);min-width:var(--cc-side-nav-width, 220px);box-sizing:border-box;background-color:var(--cc-side-nav-bg, #ffffff);border-right:1px solid var(--cc-side-nav-border-color, rgba(0, 0, 0, .08));height:100%;overflow-y:auto;overflow-x:hidden;transition:width .3s cubic-bezier(.4,0,.2,1),min-width .3s cubic-bezier(.4,0,.2,1),padding .3s cubic-bezier(.4,0,.2,1)}.cc-side-nav::-webkit-scrollbar{width:3px}.cc-side-nav::-webkit-scrollbar-track{background:transparent}.cc-side-nav::-webkit-scrollbar-thumb{background:#00000026;border-radius:2px}.cc-side-nav::-webkit-scrollbar-thumb:hover{background:#0000004d}.cc-side-nav.collapsed{width:var(--cc-side-nav-collapsed-width, 56px);min-width:var(--cc-side-nav-collapsed-width, 56px);padding:var(--cc-side-nav-padding, 16px) 8px}.cc-side-nav.collapsed .cc-side-nav-link{justify-content:center;gap:0;padding:10px}.cc-side-nav.collapsed .cc-side-nav-icon{font-size:20px}.cc-side-nav-section{display:flex;flex-direction:column;gap:12px}.cc-side-nav-heading-row{display:flex;align-items:center;justify-content:space-between;min-height:28px}.cc-side-nav-heading{margin:0;padding:0 16px;font-family:var(--cc-side-nav-font-family, \"Poppins\", sans-serif);font-weight:var(--cc-side-nav-heading-font-weight, 500);font-style:normal;font-size:var(--cc-side-nav-heading-font-size, 16px);text-transform:uppercase;color:var(--cc-side-nav-heading-color, #3C4043);flex:1}.cc-side-nav-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--cc-side-nav-item-gap, 4px)}.cc-side-nav-list-item{margin:0;padding:0}.cc-side-nav-link{display:flex;align-items:center;gap:12px;padding:var(--cc-side-nav-item-padding, 12px 16px);text-decoration:none;cursor:pointer;border-radius:var(--cc-side-nav-item-border-radius, 8px);transition:background-color .2s ease,opacity .2s ease;font-family:var(--cc-side-nav-font-family, \"Poppins\", sans-serif);font-weight:var(--cc-side-nav-item-font-weight, 400);font-style:normal;font-size:var(--cc-side-nav-item-font-size, 14px);color:var(--cc-side-nav-item-color, #5F6368)}.cc-side-nav-link:hover:not(.disabled){background-color:var(--cc-side-nav-item-hover-bg, rgba(30, 30, 45, .08));color:var(--cc-side-nav-item-hover-color, #1e1e2d)}.cc-side-nav-link.active{background:var(--cc-side-nav-active-bg, #1e1e2d);opacity:1;border-radius:var(--cc-side-nav-item-border-radius, 8px);font-weight:var(--cc-side-nav-active-font-weight, 500);color:var(--cc-side-nav-active-color, #ffffff)}.cc-side-nav-link.active:hover{background-color:var(--cc-side-nav-active-hover-bg, #2a2a3d);color:var(--cc-side-nav-active-color, #ffffff)}.cc-side-nav-link.disabled{cursor:not-allowed;opacity:var(--cc-side-nav-disabled-opacity, .5)}.cc-side-nav-icon{display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0}.cc-side-nav-label{flex:1;white-space:nowrap;overflow:hidden;max-width:200px;opacity:1;transition:opacity .15s ease,max-width .3s cubic-bezier(.4,0,.2,1)}.collapsed .cc-side-nav-label{opacity:0;max-width:0}.cc-side-nav-arrow{margin-left:auto;font-size:18px;opacity:.7;overflow:hidden;max-width:30px;flex-shrink:0;white-space:nowrap;transition:opacity .15s ease,max-width .3s cubic-bezier(.4,0,.2,1)}.collapsed .cc-side-nav-arrow{opacity:0;max-width:0}.cc-side-nav-link.active .cc-side-nav-arrow{color:var(--cc-side-nav-active-color, #FFFFFF);opacity:1}::ng-deep .mat-mdc-tooltip.cc-side-nav-tooltip{margin-left:var(--cc-side-nav-tooltip-offset, 20px)!important;overflow:visible!important}::ng-deep .mat-mdc-tooltip.cc-side-nav-tooltip .mdc-tooltip__surface{background-color:var(--cc-side-nav-tooltip-bg, #1e1e2d)!important;color:var(--cc-side-nav-tooltip-color, #FFFFFF)!important;font-family:var(--cc-side-nav-font-family, \"Poppins\", sans-serif)!important;font-size:var(--cc-side-nav-tooltip-font-size, 12px)!important;font-weight:var(--cc-side-nav-tooltip-font-weight, 500)!important;padding:var(--cc-side-nav-tooltip-padding, 8px 14px)!important;border-radius:var(--cc-side-nav-tooltip-border-radius, 6px)!important;box-shadow:var(--cc-side-nav-tooltip-shadow, 0 4px 12px rgba(0, 0, 0, .35))!important;letter-spacing:var(--cc-side-nav-tooltip-letter-spacing, .2px)!important;position:relative!important;overflow:visible!important}::ng-deep .mat-mdc-tooltip.cc-side-nav-tooltip .mdc-tooltip__surface:before{content:\"\";position:absolute;left:-6px;top:50%;transform:translateY(-50%);width:0;height:0;border-top:5px solid transparent;border-bottom:5px solid transparent;border-right:6px solid var(--cc-side-nav-tooltip-bg, #1e1e2d)}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2$2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] });
|
|
9373
9395
|
}
|
|
9374
9396
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SideNavComponent, decorators: [{
|
|
9375
9397
|
type: Component,
|
|
9376
|
-
args: [{ selector: 'lib-side-nav', standalone: false, template: "<nav class=\"cc-side-nav\" [class.collapsed]=\"collapsed\" role=\"navigation\" [ngStyle]=\"customStyles\">\r\n\r\n <!-- Fallback standalone toggle if no sections exist -->\r\n <div class=\"cc-side-nav-toggle-wrap standalone\" *ngIf=\"filteredSections.length === 0 && showCollapseToggle\">\r\n <button class=\"cc-side-nav-toggle\" (click)=\"toggleCollapse()\" type=\"button\"\r\n [attr.aria-label]=\"collapsed ? 'Expand navigation' : 'Collapse navigation'\">\r\n <span class=\"material-icons cc-side-nav-toggle-icon\">\r\n {{ collapsed ? 'menu_open' : 'menu' }}\r\n </span>\r\n </button>\r\n </div>\r\n\r\n <div class=\"cc-side-nav-section\" *ngFor=\"let section of filteredSections; let i = index\">\r\n\r\n <div class=\"cc-side-nav-heading-row\" *ngIf=\"section.heading || (i === 0 && showCollapseToggle)\">\r\n <h3 class=\"cc-side-nav-heading\" *ngIf=\"section.heading && !collapsed\">\r\n {{ section.heading }}\r\n </h3>\r\n\r\n <div class=\"cc-side-nav-toggle-wrap\" *ngIf=\"i === 0 && showCollapseToggle\"\r\n [class.no-heading]=\"!section.heading || collapsed\">\r\n <button class=\"cc-side-nav-toggle\" (click)=\"toggleCollapse()\" type=\"button\"\r\n [attr.aria-label]=\"collapsed ? 'Expand navigation' : 'Collapse navigation'\">\r\n <span class=\"material-icons cc-side-nav-toggle-icon\">\r\n {{ collapsed ? 'menu_open' : 'menu' }}\r\n </span>\r\n </button>\r\n </div>\r\n </div>\r\n\r\n <ul class=\"cc-side-nav-list\">\r\n <li *ngFor=\"let item of section.items\" class=\"cc-side-nav-list-item\">\r\n <a (click)=\"onItemClick(item, $event)\" class=\"cc-side-nav-link\" [class.active]=\"item.id === activeId\"\r\n [class.disabled]=\"item.disabled\" [matTooltip]=\"item.tooltip || item.label\"\r\n [matTooltipDisabled]=\"!showTooltips\" [matTooltipPosition]=\"tooltipPosition\"\r\n [matTooltipClass]=\"'cc-side-nav-tooltip'\" [attr.aria-current]=\"(item.id === activeId) ? 'page' : null\"\r\n [attr.aria-disabled]=\"item.disabled ? true : null\">\r\n <span *ngIf=\"item.icon && (collapsed || !hideIconsWhenExpanded)\" class=\"cc-side-nav-icon\">\r\n\r\n <span *ngIf=\"!item.icon.includes('fa') && !item.icon.includes('bi')\" class=\"material-icons\">\r\n {{ item.icon }}\r\n </span>\r\n\r\n <i *ngIf=\"item.icon.includes('fa') || item.icon.includes('bi')\" [class]=\"item.icon\"></i>\r\n\r\n </span>\r\n <span class=\"cc-side-nav-label\" *ngIf=\"!collapsed\">{{ item.label }}</span>\r\n <span class=\"cc-side-nav-arrow material-icons\"\r\n *ngIf=\"!collapsed && (item.id === activeId) && item.showArrow !== false\">chevron_right</span>\r\n </a>\r\n </li>\r\n </ul>\r\n\r\n </div>\r\n\r\n</nav>", styles: [":host{display:block;height:100%;overflow-y:auto;overflow-x:hidden;width:var(--cc-side-nav-width, 220px);transition:width .25s ease;--cc-side-nav-bg: rgba(249, 200, 14, .0509803922);--cc-side-nav-width: 220px;--cc-side-nav-collapsed-width: 56px;--cc-side-nav-gap-sections: 24px;--cc-side-nav-padding: 16px;--cc-side-nav-font-family: Poppins, sans-serif;--cc-side-nav-heading-font-weight: 500;--cc-side-nav-heading-font-size: 16px;--cc-side-nav-heading-color: #3C4043;--cc-side-nav-item-gap: 4px;--cc-side-nav-item-padding: 12px 16px;--cc-side-nav-item-border-radius: 8px;--cc-side-nav-item-font-weight: 400;--cc-side-nav-item-font-size: 14px;--cc-side-nav-item-color: #5F6368;--cc-side-nav-item-hover-bg: rgba(230, 62, 48, .05);--cc-side-nav-item-hover-color: #3C4043;--cc-side-nav-active-bg: #E63E30;--cc-side-nav-active-color: #FFFFFF;--cc-side-nav-active-font-weight: 500;--cc-side-nav-active-hover-bg: #D4382B;--cc-side-nav-disabled-opacity: .5;--cc-side-nav-tooltip-bg: rgba(0, 0, 0, .8);--cc-side-nav-tooltip-color: #FFFFFF;--cc-side-nav-tooltip-padding: 8px 12px;--cc-side-nav-tooltip-border-radius: 6px;--cc-side-nav-tooltip-font-size: 12px}:host.cc-side-nav-host-collapsed{width:var(--cc-side-nav-collapsed-width, 56px)}:host .cc-side-nav-heading-row{display:flex;align-items:center;justify-content:space-between;min-height:28px}:host .cc-side-nav-toggle{background:transparent;border:none;cursor:pointer;padding:4px;display:flex;align-items:center;justify-content:center;color:var(--cc-side-nav-item-color, #5F6368);transition:color .2s ease,background .2s ease;border-radius:6px}:host .cc-side-nav-toggle:hover{background:#0000000d}:host .cc-side-nav-toggle .material-icons{font-size:20px}:host::-webkit-scrollbar{width:3px}:host::-webkit-scrollbar-track{background:transparent}:host::-webkit-scrollbar-thumb{background:#00000026;border-radius:2px}:host::-webkit-scrollbar-thumb:hover{background:#0000004d}.cc-side-nav{display:flex;flex-direction:column;gap:var(--cc-side-nav-gap-sections, 24px);padding:var(--cc-side-nav-padding, 16px);width:var(--cc-side-nav-width, 220px);min-width:var(--cc-side-nav-width, 220px);box-sizing:border-box;background-color:var(--cc-side-nav-bg, rgba(249, 200, 14, .0509803922));min-height:100%;transition:width .25s ease,min-width .25s ease,padding .25s ease;overflow:hidden}.cc-side-nav.collapsed{width:var(--cc-side-nav-collapsed-width, 56px);min-width:var(--cc-side-nav-collapsed-width, 56px);padding:var(--cc-side-nav-padding, 16px) 8px}.cc-side-nav.collapsed .cc-side-nav-link{justify-content:center;gap:0;padding:10px}.cc-side-nav.collapsed .cc-side-nav-icon{font-size:20px}.cc-side-nav-section{display:flex;flex-direction:column;gap:12px}.cc-side-nav-heading{margin:0;padding:0 16px;font-family:var(--cc-side-nav-font-family, \"Poppins\", sans-serif);font-weight:var(--cc-side-nav-heading-font-weight, 500);font-style:normal;font-size:var(--cc-side-nav-heading-font-size, 16px);text-transform:uppercase;color:var(--cc-side-nav-heading-color, #3C4043);flex:1}.cc-side-nav-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--cc-side-nav-item-gap, 4px)}.cc-side-nav-list-item{margin:0;padding:0}.cc-side-nav-link{display:flex;align-items:center;gap:12px;padding:var(--cc-side-nav-item-padding, 12px 16px);text-decoration:none;cursor:pointer;border-radius:var(--cc-side-nav-item-border-radius, 8px);transition:background-color .2s ease,opacity .2s ease;font-family:var(--cc-side-nav-font-family, \"Poppins\", sans-serif);font-weight:var(--cc-side-nav-item-font-weight, 400);font-style:normal;font-size:var(--cc-side-nav-item-font-size, 14px);color:var(--cc-side-nav-item-color, #5F6368)}.cc-side-nav-link:hover:not(.disabled){background-color:var(--cc-side-nav-item-hover-bg, rgba(230, 62, 48, .05));color:var(--cc-side-nav-item-hover-color, #3C4043)}.cc-side-nav-link.active{background:var(--cc-side-nav-active-bg, #E63E30);opacity:1;border-radius:var(--cc-side-nav-item-border-radius, 8px);font-weight:var(--cc-side-nav-active-font-weight, 500);color:var(--cc-side-nav-active-color, #FFFFFF)}.cc-side-nav-link.active:hover{background-color:var(--cc-side-nav-active-hover-bg, #D4382B)}.cc-side-nav-link.disabled{cursor:not-allowed;opacity:var(--cc-side-nav-disabled-opacity, .5)}.cc-side-nav-icon{display:flex;align-items:center;justify-content:center;font-size:16px}.cc-side-nav-header{display:flex;justify-content:flex-end;padding:8px 16px}.cc-side-nav-label{flex:1;white-space:nowrap;overflow:hidden}.collapsed .cc-side-nav-label{display:none}.cc-side-nav-arrow{margin-left:auto;font-size:18px;opacity:.7}.cc-side-nav-link.active .cc-side-nav-arrow{color:var(--cc-side-nav-active-color, #FFFFFF);opacity:1}::ng-deep .cc-side-nav-tooltip{background-color:var(--cc-side-nav-tooltip-bg, rgba(0, 0, 0, .8))!important;color:var(--cc-side-nav-tooltip-color, #FFFFFF)!important;font-family:var(--cc-side-nav-font-family, \"Poppins\", sans-serif)!important;font-size:var(--cc-side-nav-tooltip-font-size, 12px)!important;padding:var(--cc-side-nav-tooltip-padding, 8px 12px)!important;border-radius:var(--cc-side-nav-tooltip-border-radius, 6px)!important;box-shadow:0 4px 12px #00000026;margin-left:8px!important}.cc-side-nav-toggle-wrap{display:flex;align-items:center;justify-content:flex-end}.cc-side-nav-toggle-wrap.standalone{padding-bottom:8px}.cc-side-nav-toggle-wrap.no-heading{flex:1}.collapsed .cc-side-nav-toggle-wrap{justify-content:center;width:100%}.cc-side-nav-toggle{display:flex;align-items:center;justify-content:center;width:28px;height:28px;border:none;border-radius:50%;background-color:transparent;cursor:pointer;color:var(--cc-side-nav-item-color, #5F6368);transition:background-color .2s ease,color .2s ease}.cc-side-nav-toggle:hover{background-color:var(--cc-side-nav-item-hover-bg, rgba(0, 0, 0, .06));color:var(--cc-side-nav-heading-color, #3C4043)}.cc-side-nav-toggle-icon{font-size:18px;line-height:1;display:block;transition:transform .25s ease}\n"] }]
|
|
9398
|
+
args: [{ selector: 'lib-side-nav', standalone: false, template: "<nav class=\"cc-side-nav\" [class.collapsed]=\"collapsed\" role=\"navigation\" [ngStyle]=\"customStyles\">\n\n <div class=\"cc-side-nav-section\" *ngFor=\"let section of filteredSections; let i = index\">\n\n <div class=\"cc-side-nav-heading-row\" *ngIf=\"section.heading && !collapsed\">\n <h3 class=\"cc-side-nav-heading\">{{ section.heading }}</h3>\n </div>\n\n <ul class=\"cc-side-nav-list\">\n <li *ngFor=\"let item of section.items\" class=\"cc-side-nav-list-item\">\n <a (click)=\"onItemClick(item, $event)\" class=\"cc-side-nav-link\" [class.active]=\"item.id === activeId\"\n [class.disabled]=\"item.disabled\" [matTooltip]=\"item.tooltip || item.label\"\n [matTooltipDisabled]=\"collapsed ? false : !showTooltips\" [matTooltipPosition]=\"tooltipPosition\"\n [matTooltipClass]=\"'cc-side-nav-tooltip'\" [attr.aria-current]=\"(item.id === activeId) ? 'page' : null\"\n [attr.aria-disabled]=\"item.disabled ? true : null\">\n <span *ngIf=\"item.icon && (collapsed || !hideIconsWhenExpanded)\" class=\"cc-side-nav-icon\">\n <span *ngIf=\"!item.icon.includes('fa') && !item.icon.includes('bi')\" class=\"material-icons\">\n {{ item.icon }}\n </span>\n <i *ngIf=\"item.icon.includes('fa') || item.icon.includes('bi')\" [class]=\"item.icon\"></i>\n </span>\n <!-- Label: always in DOM, CSS transitions handle fade on collapse -->\n <span class=\"cc-side-nav-label\">{{ item.label }}</span>\n <!-- Arrow: rendered for active items regardless of collapse state; CSS hides it -->\n <span class=\"cc-side-nav-arrow material-icons\"\n *ngIf=\"(item.id === activeId) && item.showArrow !== false\">chevron_right</span>\n </a>\n </li>\n </ul>\n\n </div>\n\n</nav>\n\n<!--\n Toggle pill \u2014 always straddles the right edge of :host (right: -12px).\n Hidden via opacity/scale until :host is hovered; always visible when collapsed.\n Single chevron SVG rotates 180\u00B0 via CSS \u2014 no icon swap needed.\n-->\n<button *ngIf=\"showCollapseToggle\"\n class=\"cc-sn-toggle\"\n (click)=\"toggleCollapse()\"\n type=\"button\"\n [attr.aria-label]=\"collapsed ? 'Expand navigation' : 'Collapse navigation'\">\n <svg class=\"cc-sn-chevron\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 16 16\"\n fill=\"none\"\n aria-hidden=\"true\">\n <path d=\"M10 3L5 8L10 13\"\n stroke=\"currentColor\"\n stroke-width=\"1.75\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"/>\n </svg>\n</button>\n", styles: [":host{display:block;height:100%;overflow:visible;position:relative;width:var(--cc-side-nav-width, 220px);transition:width .3s cubic-bezier(.4,0,.2,1);--cc-side-nav-bg: #ffffff;--cc-side-nav-border-color: rgba(0, 0, 0, .08);--cc-side-nav-width: 220px;--cc-side-nav-collapsed-width: 56px;--cc-side-nav-gap-sections: 24px;--cc-side-nav-padding: 16px;--cc-side-nav-font-family: Poppins, sans-serif;--cc-side-nav-heading-font-weight: 500;--cc-side-nav-heading-font-size: 16px;--cc-side-nav-heading-color: #3C4043;--cc-side-nav-item-gap: 4px;--cc-side-nav-item-padding: 12px 16px;--cc-side-nav-item-border-radius: 8px;--cc-side-nav-item-font-weight: 400;--cc-side-nav-item-font-size: 14px;--cc-side-nav-item-color: #5F6368;--cc-side-nav-item-hover-bg: rgba(30, 30, 45, .08);--cc-side-nav-item-hover-color: #1e1e2d;--cc-side-nav-active-bg: #1e1e2d;--cc-side-nav-active-color: #ffffff;--cc-side-nav-active-font-weight: 500;--cc-side-nav-active-hover-bg: #2a2a3d;--cc-side-nav-disabled-opacity: .5;--cc-side-nav-toggle-bg: #ffffff;--cc-side-nav-toggle-border-color: rgba(0, 0, 0, .1);--cc-side-nav-tooltip-bg: #1e1e2d;--cc-side-nav-tooltip-color: #FFFFFF;--cc-side-nav-tooltip-padding: 8px 14px;--cc-side-nav-tooltip-border-radius: 6px;--cc-side-nav-tooltip-font-size: 12px;--cc-side-nav-tooltip-font-weight: 500;--cc-side-nav-tooltip-letter-spacing: .2px;--cc-side-nav-tooltip-offset: 20px;--cc-side-nav-tooltip-shadow: 0 4px 12px rgba(0, 0, 0, .35)}:host.cc-side-nav-host-collapsed{width:var(--cc-side-nav-collapsed-width, 56px)}:host:after{content:\"\";position:absolute;top:10%;right:0;width:2px;height:80%;background:var(--cc-side-nav-active-bg, #1e1e2d);border-radius:2px;opacity:0;transition:opacity .25s ease;pointer-events:none;z-index:4}:host:hover:after{opacity:.18}:host.cc-side-nav-host-collapsed:after{display:none}.cc-sn-toggle{position:absolute;bottom:20px;right:-12px;width:24px;height:24px;border-radius:50%;border:1.5px solid var(--cc-side-nav-toggle-border-color, rgba(0, 0, 0, .1));background:var(--cc-side-nav-toggle-bg, #ffffff);cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:20;padding:0;color:var(--cc-side-nav-item-color, #5F6368);box-shadow:0 1px 4px #0000001a,0 0 0 1px #0000000a;opacity:0;transform:scale(.65);transition:opacity .2s ease,transform .25s cubic-bezier(.34,1.56,.64,1),background .15s ease,color .15s ease,border-color .15s ease,box-shadow .2s ease}.cc-sn-toggle:focus-visible{outline:2px solid var(--cc-side-nav-active-bg, #E63E30);outline-offset:2px}.cc-sn-toggle .cc-sn-chevron{width:12px;height:12px;flex-shrink:0;display:block;transition:transform .3s cubic-bezier(.4,0,.2,1)}:host:hover .cc-sn-toggle{opacity:1;transform:scale(1)}:host:hover .cc-sn-toggle:hover,:host.cc-side-nav-host-collapsed .cc-sn-toggle:hover{background:var(--cc-side-nav-active-bg, #E63E30);color:var(--cc-side-nav-active-color, #ffffff);border-color:transparent;box-shadow:0 4px 14px #0000001a,0 1px 4px #0000001a;transform:scale(1.12)}:host.cc-side-nav-host-collapsed .cc-sn-toggle{opacity:1;transform:scale(1);box-shadow:0 2px 8px #00000021,0 0 0 1.5px #00000014}:host.cc-side-nav-host-collapsed .cc-sn-chevron{transform:rotate(180deg)}.cc-side-nav{display:flex;flex-direction:column;gap:var(--cc-side-nav-gap-sections, 24px);padding:var(--cc-side-nav-padding, 16px);width:var(--cc-side-nav-width, 220px);min-width:var(--cc-side-nav-width, 220px);box-sizing:border-box;background-color:var(--cc-side-nav-bg, #ffffff);border-right:1px solid var(--cc-side-nav-border-color, rgba(0, 0, 0, .08));height:100%;overflow-y:auto;overflow-x:hidden;transition:width .3s cubic-bezier(.4,0,.2,1),min-width .3s cubic-bezier(.4,0,.2,1),padding .3s cubic-bezier(.4,0,.2,1)}.cc-side-nav::-webkit-scrollbar{width:3px}.cc-side-nav::-webkit-scrollbar-track{background:transparent}.cc-side-nav::-webkit-scrollbar-thumb{background:#00000026;border-radius:2px}.cc-side-nav::-webkit-scrollbar-thumb:hover{background:#0000004d}.cc-side-nav.collapsed{width:var(--cc-side-nav-collapsed-width, 56px);min-width:var(--cc-side-nav-collapsed-width, 56px);padding:var(--cc-side-nav-padding, 16px) 8px}.cc-side-nav.collapsed .cc-side-nav-link{justify-content:center;gap:0;padding:10px}.cc-side-nav.collapsed .cc-side-nav-icon{font-size:20px}.cc-side-nav-section{display:flex;flex-direction:column;gap:12px}.cc-side-nav-heading-row{display:flex;align-items:center;justify-content:space-between;min-height:28px}.cc-side-nav-heading{margin:0;padding:0 16px;font-family:var(--cc-side-nav-font-family, \"Poppins\", sans-serif);font-weight:var(--cc-side-nav-heading-font-weight, 500);font-style:normal;font-size:var(--cc-side-nav-heading-font-size, 16px);text-transform:uppercase;color:var(--cc-side-nav-heading-color, #3C4043);flex:1}.cc-side-nav-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--cc-side-nav-item-gap, 4px)}.cc-side-nav-list-item{margin:0;padding:0}.cc-side-nav-link{display:flex;align-items:center;gap:12px;padding:var(--cc-side-nav-item-padding, 12px 16px);text-decoration:none;cursor:pointer;border-radius:var(--cc-side-nav-item-border-radius, 8px);transition:background-color .2s ease,opacity .2s ease;font-family:var(--cc-side-nav-font-family, \"Poppins\", sans-serif);font-weight:var(--cc-side-nav-item-font-weight, 400);font-style:normal;font-size:var(--cc-side-nav-item-font-size, 14px);color:var(--cc-side-nav-item-color, #5F6368)}.cc-side-nav-link:hover:not(.disabled){background-color:var(--cc-side-nav-item-hover-bg, rgba(30, 30, 45, .08));color:var(--cc-side-nav-item-hover-color, #1e1e2d)}.cc-side-nav-link.active{background:var(--cc-side-nav-active-bg, #1e1e2d);opacity:1;border-radius:var(--cc-side-nav-item-border-radius, 8px);font-weight:var(--cc-side-nav-active-font-weight, 500);color:var(--cc-side-nav-active-color, #ffffff)}.cc-side-nav-link.active:hover{background-color:var(--cc-side-nav-active-hover-bg, #2a2a3d);color:var(--cc-side-nav-active-color, #ffffff)}.cc-side-nav-link.disabled{cursor:not-allowed;opacity:var(--cc-side-nav-disabled-opacity, .5)}.cc-side-nav-icon{display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0}.cc-side-nav-label{flex:1;white-space:nowrap;overflow:hidden;max-width:200px;opacity:1;transition:opacity .15s ease,max-width .3s cubic-bezier(.4,0,.2,1)}.collapsed .cc-side-nav-label{opacity:0;max-width:0}.cc-side-nav-arrow{margin-left:auto;font-size:18px;opacity:.7;overflow:hidden;max-width:30px;flex-shrink:0;white-space:nowrap;transition:opacity .15s ease,max-width .3s cubic-bezier(.4,0,.2,1)}.collapsed .cc-side-nav-arrow{opacity:0;max-width:0}.cc-side-nav-link.active .cc-side-nav-arrow{color:var(--cc-side-nav-active-color, #FFFFFF);opacity:1}::ng-deep .mat-mdc-tooltip.cc-side-nav-tooltip{margin-left:var(--cc-side-nav-tooltip-offset, 20px)!important;overflow:visible!important}::ng-deep .mat-mdc-tooltip.cc-side-nav-tooltip .mdc-tooltip__surface{background-color:var(--cc-side-nav-tooltip-bg, #1e1e2d)!important;color:var(--cc-side-nav-tooltip-color, #FFFFFF)!important;font-family:var(--cc-side-nav-font-family, \"Poppins\", sans-serif)!important;font-size:var(--cc-side-nav-tooltip-font-size, 12px)!important;font-weight:var(--cc-side-nav-tooltip-font-weight, 500)!important;padding:var(--cc-side-nav-tooltip-padding, 8px 14px)!important;border-radius:var(--cc-side-nav-tooltip-border-radius, 6px)!important;box-shadow:var(--cc-side-nav-tooltip-shadow, 0 4px 12px rgba(0, 0, 0, .35))!important;letter-spacing:var(--cc-side-nav-tooltip-letter-spacing, .2px)!important;position:relative!important;overflow:visible!important}::ng-deep .mat-mdc-tooltip.cc-side-nav-tooltip .mdc-tooltip__surface:before{content:\"\";position:absolute;left:-6px;top:50%;transform:translateY(-50%);width:0;height:0;border-top:5px solid transparent;border-bottom:5px solid transparent;border-right:6px solid var(--cc-side-nav-tooltip-bg, #1e1e2d)}\n"] }]
|
|
9377
9399
|
}], propDecorators: { sections: [{
|
|
9378
9400
|
type: Input
|
|
9379
9401
|
}], userRoles: [{
|
|
@@ -9507,11 +9529,11 @@ class PaginationComponent {
|
|
|
9507
9529
|
}
|
|
9508
9530
|
}
|
|
9509
9531
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: PaginationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
9510
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: PaginationComponent, isStandalone: false, selector: "lib-pagination", inputs: { totalItems: "totalItems", itemsPerPage: "itemsPerPage", currentPage: "currentPage", pageSizeOptions: "pageSizeOptions", theme: "theme", labels: "labels" }, outputs: { pageChange: "pageChange", itemsPerPageChange: "itemsPerPageChange" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"cc-pagination\" [ngClass]=\"theme\">\r\n <!-- Left Side: Items Info & Per Page -->\r\n <div class=\"pagination-left\" *ngIf=\"pageSizeOptions.length > 1 || totalItems > 0\">\r\n <span class=\"items-info\">\r\n {{ startItem }}-{{ endItem }} {{ labels.of }} {{ totalItems }} {{ labels.items }}\r\n </span>\r\n\r\n <div class=\"per-page-selector\" *ngIf=\"pageSizeOptions.length > 1\">\r\n <div class=\"select-wrapper\">\r\n <select
|
|
9532
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: PaginationComponent, isStandalone: false, selector: "lib-pagination", inputs: { totalItems: "totalItems", itemsPerPage: "itemsPerPage", currentPage: "currentPage", pageSizeOptions: "pageSizeOptions", theme: "theme", labels: "labels" }, outputs: { pageChange: "pageChange", itemsPerPageChange: "itemsPerPageChange" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"cc-pagination\" [ngClass]=\"theme\">\r\n <!-- Left Side: Items Info & Per Page -->\r\n <div class=\"pagination-left\" *ngIf=\"pageSizeOptions.length > 1 || totalItems > 0\">\r\n <span class=\"items-info\">\r\n {{ startItem }}-{{ endItem }} {{ labels.of }} {{ totalItems }} {{ labels.items }}\r\n </span>\r\n\r\n <div class=\"per-page-selector\" *ngIf=\"pageSizeOptions.length > 1\">\r\n <div class=\"select-wrapper\">\r\n <select (change)=\"onItemsPerPageChange($event)\">\r\n <option *ngFor=\"let option of pageSizeOptions\" [value]=\"option\" [selected]=\"option === itemsPerPage\">\r\n {{ option }}\r\n </option>\r\n </select>\r\n <span class=\"select-arrow\"></span>\r\n </div>\r\n <span class=\"per-page-label\">{{ labels.perPage }}</span>\r\n </div>\r\n </div>\r\n\r\n <!-- Right Side: Page Controls -->\r\n <div class=\"pagination-right\">\r\n <button \r\n class=\"page-btn prev-btn\" \r\n [disabled]=\"currentPage === 1\" \r\n (click)=\"prevPage()\"\r\n aria-label=\"Previous Page\">\r\n <span class=\"icon\">‹</span>\r\n </button>\r\n\r\n <div class=\"page-numbers\">\r\n <ng-container *ngFor=\"let page of pages\">\r\n <button \r\n *ngIf=\"page !== '...'\"\r\n class=\"page-btn number-btn\" \r\n [class.active]=\"page === currentPage\"\r\n (click)=\"onPageChange(page)\">\r\n {{ page }}\r\n </button>\r\n <span *ngIf=\"page === '...'\" class=\"ellipsis\">...</span>\r\n </ng-container>\r\n </div>\r\n\r\n <button \r\n class=\"page-btn next-btn\" \r\n [disabled]=\"currentPage === totalPages || totalPages === 0\" \r\n (click)=\"nextPage()\"\r\n aria-label=\"Next Page\">\r\n <span class=\"icon\">›</span>\r\n </button>\r\n </div>\r\n</div>\r\n", styles: ["@charset \"UTF-8\";.cc-pagination{display:flex;justify-content:space-between;align-items:center;padding:1rem;font-family:var(--cc-pagination-font-family);color:var(--cc-pagination-text-color);font-size:var(--cc-pagination-font-size);flex-wrap:wrap;gap:1rem;width:100%;box-sizing:border-box}.cc-pagination .pagination-left{display:flex;align-items:center;gap:1.5rem;flex-wrap:wrap}.cc-pagination .pagination-left .items-info{white-space:nowrap}.cc-pagination .pagination-left .per-page-selector{display:flex;align-items:center;gap:.5rem}.cc-pagination .pagination-left .per-page-selector .select-wrapper{position:relative;display:inline-block}.cc-pagination .pagination-left .per-page-selector .select-wrapper select{appearance:none;background-color:var(--cc-pagination-select-bg);border:var(--cc-pagination-select-border);border-radius:var(--cc-pagination-select-radius);padding:var(--cc-pagination-select-padding);padding-right:2rem;color:var(--cc-pagination-select-text-color);font-family:inherit;font-size:inherit;cursor:pointer;min-width:60px}.cc-pagination .pagination-left .per-page-selector .select-wrapper select:focus{outline:none;box-shadow:0 0 0 2px #0000001a}.cc-pagination .pagination-left .per-page-selector .select-wrapper:after{content:\"\\25bc\";position:absolute;right:10px;top:50%;transform:translateY(-50%);font-size:.7em;color:var(--cc-pagination-select-arrow-color);pointer-events:none}.cc-pagination .pagination-left .per-page-selector .per-page-label{white-space:nowrap}.cc-pagination .pagination-right{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}.cc-pagination .pagination-right .page-btn{display:flex;align-items:center;justify-content:center;min-width:var(--cc-pagination-btn-size);height:var(--cc-pagination-btn-size);background-color:var(--cc-pagination-btn-bg);border:var(--cc-pagination-btn-border);border-radius:var(--cc-pagination-btn-radius);color:var(--cc-pagination-btn-text-color);font-family:inherit;cursor:pointer;transition:all .2s ease;padding:0 .5rem;-webkit-user-select:none;user-select:none}.cc-pagination .pagination-right .page-btn:hover:not(:disabled){background-color:var(--cc-pagination-btn-hover-bg)}.cc-pagination .pagination-right .page-btn:disabled{opacity:var(--cc-pagination-disabled-opacity);background-color:var(--cc-pagination-disabled-bg);cursor:not-allowed}.cc-pagination .pagination-right .page-btn.active{background-color:var(--cc-pagination-btn-active-bg);border:var(--cc-pagination-btn-active-border);color:var(--cc-pagination-btn-active-text);font-weight:700}.cc-pagination .pagination-right .page-btn .icon{font-size:1.2em;line-height:1}.cc-pagination .pagination-right .page-numbers{display:flex;gap:.5rem;flex-wrap:wrap}.cc-pagination .pagination-right .ellipsis{display:flex;align-items:center;justify-content:center;color:var(--cc-pagination-text-color);width:20px}@media(max-width:600px){.cc-pagination{flex-direction:column;align-items:center;gap:1.5rem}.cc-pagination .pagination-left{width:100%;justify-content:space-between;order:2}.cc-pagination .pagination-right{width:100%;justify-content:center;order:1}.cc-pagination .pagination-right .page-numbers{justify-content:center}}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
|
|
9511
9533
|
}
|
|
9512
9534
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: PaginationComponent, decorators: [{
|
|
9513
9535
|
type: Component,
|
|
9514
|
-
args: [{ selector: 'lib-pagination', standalone: false, template: "<div class=\"cc-pagination\" [ngClass]=\"theme\">\r\n <!-- Left Side: Items Info & Per Page -->\r\n <div class=\"pagination-left\" *ngIf=\"pageSizeOptions.length > 1 || totalItems > 0\">\r\n <span class=\"items-info\">\r\n {{ startItem }}-{{ endItem }} {{ labels.of }} {{ totalItems }} {{ labels.items }}\r\n </span>\r\n\r\n <div class=\"per-page-selector\" *ngIf=\"pageSizeOptions.length > 1\">\r\n <div class=\"select-wrapper\">\r\n <select
|
|
9536
|
+
args: [{ selector: 'lib-pagination', standalone: false, template: "<div class=\"cc-pagination\" [ngClass]=\"theme\">\r\n <!-- Left Side: Items Info & Per Page -->\r\n <div class=\"pagination-left\" *ngIf=\"pageSizeOptions.length > 1 || totalItems > 0\">\r\n <span class=\"items-info\">\r\n {{ startItem }}-{{ endItem }} {{ labels.of }} {{ totalItems }} {{ labels.items }}\r\n </span>\r\n\r\n <div class=\"per-page-selector\" *ngIf=\"pageSizeOptions.length > 1\">\r\n <div class=\"select-wrapper\">\r\n <select (change)=\"onItemsPerPageChange($event)\">\r\n <option *ngFor=\"let option of pageSizeOptions\" [value]=\"option\" [selected]=\"option === itemsPerPage\">\r\n {{ option }}\r\n </option>\r\n </select>\r\n <span class=\"select-arrow\"></span>\r\n </div>\r\n <span class=\"per-page-label\">{{ labels.perPage }}</span>\r\n </div>\r\n </div>\r\n\r\n <!-- Right Side: Page Controls -->\r\n <div class=\"pagination-right\">\r\n <button \r\n class=\"page-btn prev-btn\" \r\n [disabled]=\"currentPage === 1\" \r\n (click)=\"prevPage()\"\r\n aria-label=\"Previous Page\">\r\n <span class=\"icon\">‹</span>\r\n </button>\r\n\r\n <div class=\"page-numbers\">\r\n <ng-container *ngFor=\"let page of pages\">\r\n <button \r\n *ngIf=\"page !== '...'\"\r\n class=\"page-btn number-btn\" \r\n [class.active]=\"page === currentPage\"\r\n (click)=\"onPageChange(page)\">\r\n {{ page }}\r\n </button>\r\n <span *ngIf=\"page === '...'\" class=\"ellipsis\">...</span>\r\n </ng-container>\r\n </div>\r\n\r\n <button \r\n class=\"page-btn next-btn\" \r\n [disabled]=\"currentPage === totalPages || totalPages === 0\" \r\n (click)=\"nextPage()\"\r\n aria-label=\"Next Page\">\r\n <span class=\"icon\">›</span>\r\n </button>\r\n </div>\r\n</div>\r\n", styles: ["@charset \"UTF-8\";.cc-pagination{display:flex;justify-content:space-between;align-items:center;padding:1rem;font-family:var(--cc-pagination-font-family);color:var(--cc-pagination-text-color);font-size:var(--cc-pagination-font-size);flex-wrap:wrap;gap:1rem;width:100%;box-sizing:border-box}.cc-pagination .pagination-left{display:flex;align-items:center;gap:1.5rem;flex-wrap:wrap}.cc-pagination .pagination-left .items-info{white-space:nowrap}.cc-pagination .pagination-left .per-page-selector{display:flex;align-items:center;gap:.5rem}.cc-pagination .pagination-left .per-page-selector .select-wrapper{position:relative;display:inline-block}.cc-pagination .pagination-left .per-page-selector .select-wrapper select{appearance:none;background-color:var(--cc-pagination-select-bg);border:var(--cc-pagination-select-border);border-radius:var(--cc-pagination-select-radius);padding:var(--cc-pagination-select-padding);padding-right:2rem;color:var(--cc-pagination-select-text-color);font-family:inherit;font-size:inherit;cursor:pointer;min-width:60px}.cc-pagination .pagination-left .per-page-selector .select-wrapper select:focus{outline:none;box-shadow:0 0 0 2px #0000001a}.cc-pagination .pagination-left .per-page-selector .select-wrapper:after{content:\"\\25bc\";position:absolute;right:10px;top:50%;transform:translateY(-50%);font-size:.7em;color:var(--cc-pagination-select-arrow-color);pointer-events:none}.cc-pagination .pagination-left .per-page-selector .per-page-label{white-space:nowrap}.cc-pagination .pagination-right{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}.cc-pagination .pagination-right .page-btn{display:flex;align-items:center;justify-content:center;min-width:var(--cc-pagination-btn-size);height:var(--cc-pagination-btn-size);background-color:var(--cc-pagination-btn-bg);border:var(--cc-pagination-btn-border);border-radius:var(--cc-pagination-btn-radius);color:var(--cc-pagination-btn-text-color);font-family:inherit;cursor:pointer;transition:all .2s ease;padding:0 .5rem;-webkit-user-select:none;user-select:none}.cc-pagination .pagination-right .page-btn:hover:not(:disabled){background-color:var(--cc-pagination-btn-hover-bg)}.cc-pagination .pagination-right .page-btn:disabled{opacity:var(--cc-pagination-disabled-opacity);background-color:var(--cc-pagination-disabled-bg);cursor:not-allowed}.cc-pagination .pagination-right .page-btn.active{background-color:var(--cc-pagination-btn-active-bg);border:var(--cc-pagination-btn-active-border);color:var(--cc-pagination-btn-active-text);font-weight:700}.cc-pagination .pagination-right .page-btn .icon{font-size:1.2em;line-height:1}.cc-pagination .pagination-right .page-numbers{display:flex;gap:.5rem;flex-wrap:wrap}.cc-pagination .pagination-right .ellipsis{display:flex;align-items:center;justify-content:center;color:var(--cc-pagination-text-color);width:20px}@media(max-width:600px){.cc-pagination{flex-direction:column;align-items:center;gap:1.5rem}.cc-pagination .pagination-left{width:100%;justify-content:space-between;order:2}.cc-pagination .pagination-right{width:100%;justify-content:center;order:1}.cc-pagination .pagination-right .page-numbers{justify-content:center}}\n"] }]
|
|
9515
9537
|
}], ctorParameters: () => [], propDecorators: { totalItems: [{
|
|
9516
9538
|
type: Input
|
|
9517
9539
|
}], itemsPerPage: [{
|
|
@@ -9616,6 +9638,7 @@ class SmartTableComponent {
|
|
|
9616
9638
|
}
|
|
9617
9639
|
ngOnInit() {
|
|
9618
9640
|
if (this.config) {
|
|
9641
|
+
this.applyPaginationDefaults();
|
|
9619
9642
|
if (this.config.sortBy) {
|
|
9620
9643
|
this.activeSort.key = this.config.sortBy;
|
|
9621
9644
|
}
|
|
@@ -9647,6 +9670,7 @@ class SmartTableComponent {
|
|
|
9647
9670
|
}
|
|
9648
9671
|
// Config changed (non-first) — reload filter opts; reload data only if NOT in external mode
|
|
9649
9672
|
if (changes['config'] && !changes['config'].firstChange) {
|
|
9673
|
+
this.applyPaginationDefaults();
|
|
9650
9674
|
this.loadFilterOptions();
|
|
9651
9675
|
if (this.tableData === undefined) {
|
|
9652
9676
|
this.loadData();
|
|
@@ -10292,6 +10316,23 @@ class SmartTableComponent {
|
|
|
10292
10316
|
get columnCount() {
|
|
10293
10317
|
return this.config.columns.length;
|
|
10294
10318
|
}
|
|
10319
|
+
get showPagination() {
|
|
10320
|
+
if (!this.config?.pagination?.enabled)
|
|
10321
|
+
return false;
|
|
10322
|
+
const pageSize = this.config.pagination.pageSize;
|
|
10323
|
+
const effectiveTotal = this.totalItems > 0 ? this.totalItems : this.data.length;
|
|
10324
|
+
return effectiveTotal > 10;
|
|
10325
|
+
}
|
|
10326
|
+
applyPaginationDefaults() {
|
|
10327
|
+
if (this.config?.pagination?.enabled) {
|
|
10328
|
+
if (!this.config.pagination.pageSize) {
|
|
10329
|
+
this.config.pagination.pageSize = 10;
|
|
10330
|
+
}
|
|
10331
|
+
if (!this.config.pagination.pageSizeOptions || this.config.pagination.pageSizeOptions.length === 0) {
|
|
10332
|
+
this.config.pagination.pageSizeOptions = [5, 10, 20, 50, 100];
|
|
10333
|
+
}
|
|
10334
|
+
}
|
|
10335
|
+
}
|
|
10295
10336
|
onColumnClick(row, col) {
|
|
10296
10337
|
if (col.clickAction === 'callback') {
|
|
10297
10338
|
this.columnClick.emit({ row, column: col.key });
|
|
@@ -10335,11 +10376,11 @@ class SmartTableComponent {
|
|
|
10335
10376
|
this.activeFilterData = null;
|
|
10336
10377
|
}
|
|
10337
10378
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SmartTableComponent, deps: [{ token: i3.HttpClient }, { token: i1$4.Router }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
|
|
10338
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: SmartTableComponent, isStandalone: false, selector: "lib-smart-table", inputs: { config: "config", tableData: "tableData", totalItemsCount: "totalItemsCount", selectedRows: "selectedRows" }, outputs: { action: "action", topAction: "topAction", filterChange: "filterChange", rowSelect: "rowSelect", columnClick: "columnClick", sortChange: "sortChange", pageChange: "pageChange", searchChange: "searchChange" }, host: { listeners: { "document:click": "closeDropdown()" } }, viewQueries: [{ propertyName: "stickyHeaders", predicate: ["stickyHeader"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"smart-table-outer\">\r\n <!-- Table Card -->\r\n <div class=\"smart-table-wrapper\">\r\n <!-- Top Toolbar -->\r\n <div class=\"st-toolbar\" *ngIf=\"config.searchConfig?.enabled || (config.filters && config.filters.length > 0) || (config.topBarButtons && config.topBarButtons.length > 0)\">\r\n\r\n <!-- Search -->\r\n <div class=\"st-search\" *ngIf=\"config.searchConfig?.enabled\">\r\n <i class=\"fa fa-search\"></i>\r\n <input type=\"text\" [placeholder]=\"config.labels?.searchPlaceholder || 'Search'\" (input)=\"onSearch($event)\">\r\n </div>\r\n\r\n <!-- Filters -->\r\n <div class=\"st-filters\" *ngIf=\"config.filters\">\r\n <div class=\"st-filter-item\" *ngFor=\"let filter of config.filters\">\r\n <!-- Trigger -->\r\n <div class=\"st-filter-trigger\"\r\n [class.active]=\"openFilterKey === filter.key\"\r\n [class.has-value]=\"isFilterActive(filter)\"\r\n (click)=\"toggleFilter(filter.key, $event)\">\r\n <span class=\"st-filter-trigger-label\">{{ getFilterDisplay(filter) }}</span>\r\n <svg class=\"st-filter-chevron\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n <path d=\"M2.5 4.5L6 8L9.5 4.5\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Top Bar Buttons -->\r\n <div class=\"st-actions\" *ngIf=\"config.topBarButtons\">\r\n <lib-button *ngFor=\"let btn of config.topBarButtons\"\r\n [variant]=\"btn.btnVariant || 'primary'\"\r\n [icon]=\"btn.icon || ''\"\r\n (click)=\"onTopAction(btn)\">\r\n {{ btn.label }}\r\n </lib-button>\r\n </div>\r\n </div>\r\n\r\n <!-- Selection count strip \u2014 visible whenever selectable is enabled -->\r\n <div class=\"st-selection-strip\" *ngIf=\"config.selectable\">\r\n <span class=\"st-selection-count\">{{ selectedRows.length }} of {{ totalItems > 0 ? totalItems : data.length }} selected</span>\r\n </div>\r\n\r\n <!-- Table Container -->\r\n <div class=\"st-table-container\">\r\n <div class=\"st-check-loader\" *ngIf=\"loading\">\r\n <div class=\"spinner\"></div>\r\n </div>\r\n <table class=\"st-table\" [class.loading-data]=\"loading\" [class.is-selectable]=\"config.selectable\">\r\n <thead>\r\n <tr>\r\n <th *ngIf=\"config.selectable\" class=\"st-checkbox-col\">\r\n <input type=\"checkbox\" (change)=\"onSelectAll($event)\">\r\n </th>\r\n <th *ngFor=\"let col of config.columns; let colIndex = index\"\r\n #stickyHeader\r\n [class.sortable]=\"col.sortable\"\r\n [class.sticky-col]=\"col.sticky\"\r\n [class.first-data-col]=\"colIndex === 0\"\r\n [ngStyle]=\"stickyColumnStyles[col.key]\"\r\n (click)=\"onSort(col)\">\r\n {{ col.label }}\r\n <span *ngIf=\"col.sortable\" class=\"sort-icon-wrap\">\r\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\">\r\n <!-- Down arrow \u2014 RIGHT side, prominent when DESC -->\r\n <path d=\"M11.258 15.8153L14.5913 13.2699C14.7483 13.15 14.8364 12.9875 14.8364 12.818C14.8364 12.6486 14.7483 12.4861 14.5913 12.3662C14.4344 12.2464 14.2216 12.1791 13.9997 12.1791C13.7778 12.1791 13.5649 12.2464 13.408 12.3662L11.4997 13.8299V2.63636C11.4997 2.46758 11.4119 2.30572 11.2556 2.18638C11.0993 2.06704 10.8874 2 10.6663 2C10.4453 2 10.2334 2.06704 10.0771 2.18638C9.92081 2.30572 9.83301 2.46758 9.83301 2.63636V15.3635C9.83383 15.4891 9.88333 15.6117 9.97528 15.7159C10.0672 15.8201 10.1975 15.9012 10.3497 15.9489C10.4486 15.9845 10.557 16.002 10.6663 15.9998C10.776 16.0003 10.8847 15.9843 10.9863 15.9526C11.0878 15.9209 11.1801 15.8743 11.258 15.8153Z\"\r\n fill=\"black\" [attr.fill-opacity]=\"getDescOpacity(col.key)\"/>\r\n <!-- Up arrow \u2014 LEFT side, prominent when ASC -->\r\n <path d=\"M7.33316 16C7.11215 16 6.90019 15.933 6.74391 15.8136C6.58763 15.6942 6.49983 15.5324 6.49983 15.3636V4.16902L4.5915 5.63278C4.43458 5.75262 4.22175 5.81995 3.99983 5.81995C3.77791 5.81995 3.56508 5.75262 3.40816 5.63278C3.25124 5.51294 3.16309 5.3504 3.16309 5.18093C3.16309 5.01145 3.25124 4.84891 3.40816 4.72907L6.7415 2.18341C6.85868 2.0951 7.00749 2.03528 7.16915 2.01149C7.33081 1.98771 7.49807 2.00102 7.64983 2.04976C7.80201 2.0975 7.93228 2.17858 8.02423 2.28278C8.11617 2.38697 8.16567 2.50962 8.1665 2.63526V15.3636C8.1665 15.5324 8.0787 15.6942 7.92242 15.8136C7.76614 15.933 7.55418 16 7.33316 16Z\"\r\n fill=\"black\" [attr.fill-opacity]=\"getAscOpacity(col.key)\"/>\r\n </svg>\r\n </span>\r\n </th>\r\n <th *ngIf=\"config.actions && config.actions.length > 0\" class=\"st-actions-col\">\r\n {{ config.labels?.actionColumnHeader || 'Actions' }}\r\n </th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <tr *ngFor=\"let row of data; let rowIndex = index\">\r\n <td *ngIf=\"config.selectable\" class=\"st-checkbox-col\">\r\n <input type=\"checkbox\" [(ngModel)]=\"row.selected\" (change)=\"onRowSelect(row)\">\r\n </td>\r\n <td *ngFor=\"let col of config.columns; let colIndex = index\"\r\n [class.sticky-col]=\"col.sticky\"\r\n [class.first-data-col]=\"colIndex === 0\"\r\n [ngStyle]=\"stickyColumnStyles[col.key]\"\r\n [class.clickable-cell]=\"col.clickAction\"\r\n (click)=\"onColumnClick(row, col)\">\r\n <!-- Text/Number/Date -->\r\n <span *ngIf=\"col.type !== 'custom' && col.type !== 'html' && col.type !== 'badge'\">\r\n {{ getCellValue(row, col) }}\r\n </span>\r\n <!-- HTML -->\r\n <div *ngIf=\"col.type === 'html'\" [innerHTML]=\"getCellValue(row, col)\"></div>\r\n <!-- Badge -->\r\n <span *ngIf=\"col.type === 'badge'\" class=\"st-badge\" [ngClass]=\"getBadgeClass(row, col)\">\r\n {{ getCellValue(row, col) }}\r\n </span>\r\n </td>\r\n\r\n <!-- Row Actions -->\r\n <td *ngIf=\"config.actions && config.actions.length > 0\" class=\"st-row-actions st-actions-col\">\r\n <div class=\"action-buttons\">\r\n <ng-container *ngFor=\"let action of config.actions; let i = index\">\r\n <ng-container *ngIf=\"action.type === 'dropdown'\">\r\n <div class=\"st-dropdown-container\" (click)=\"$event.stopPropagation()\">\r\n <button class=\"st-dropdown-btn\"\r\n [class.active]=\"openDropdownId === (rowIndex + '-' + i)\"\r\n (click)=\"toggleDropdown(rowIndex + '-' + i, $event, action.items, row)\">\r\n <span class=\"action-circle\">\r\n <i class=\"fa fa-ellipsis-h\"></i>\r\n </span>\r\n </button>\r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"action.type !== 'dropdown'\">\r\n <lib-button\r\n [variant]=\"action.btnVariant || 'secondary'\"\r\n [icon]=\"action.icon || ''\"\r\n (click)=\"onAction(action, row)\">\r\n {{ action.label }}\r\n </lib-button>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n </td>\r\n </tr>\r\n <tr *ngIf=\"data.length === 0 && !loading\">\r\n <td [attr.colspan]=\"columnCount + (config.selectable ? 1 : 0) + (config.actions ? 1 : 0)\" class=\"no-data\">\r\n {{ config.labels?.noDataMessage || 'No data available' }}\r\n </td>\r\n </tr>\r\n </tbody>\r\n </table>\r\n </div>\r\n\r\n <!-- Built-in Delete Confirmation Modal -->\r\n <cc-confirmation-modal\r\n [isOpen]=\"deleteModalOpen\"\r\n [config]=\"deleteModalConfig\"\r\n (confirm)=\"onDeleteConfirm()\"\r\n (cancel)=\"onDeleteCancel()\"\r\n (close)=\"onDeleteCancel()\">\r\n <p>{{ deleteModalMessage }}</p>\r\n </cc-confirmation-modal>\r\n </div>\r\n\r\n <!-- Pagination outside the table card -->\r\n <div class=\"st-pagination\" *ngIf=\"config.pagination && config.pagination.enabled && data.length > 0\">\r\n <lib-pagination\r\n [totalItems]=\"totalItems\"\r\n [itemsPerPage]=\"config.pagination.pageSize\"\r\n [currentPage]=\"currentPage\"\r\n [pageSizeOptions]=\"config.pagination.pageSizeOptions\"\r\n (pageChange)=\"onPageChange($event)\"\r\n (itemsPerPageChange)=\"onPageSizeChange($event)\">\r\n </lib-pagination>\r\n </div>\r\n</div>\r\n\r\n<!--\r\n Filter panel portal \u2014 position:fixed keeps it above all overflow/sticky containers.\r\n-->\r\n<div class=\"st-filter-panel\"\r\n *ngIf=\"openFilterKey !== null && activeFilterData\"\r\n [ngStyle]=\"{\r\n position: 'fixed',\r\n top: filterPosition.top + 'px',\r\n left: filterPosition.left + 'px',\r\n 'z-index': '99999'\r\n }\"\r\n (click)=\"$event.stopPropagation()\">\r\n <div class=\"st-filter-option\"\r\n [class.selected]=\"!isFilterActive(activeFilterData)\"\r\n (click)=\"selectFilterOption(activeFilterData, null)\">\r\n All {{ activeFilterData.label }}\r\n </div>\r\n <div class=\"st-filter-option\"\r\n *ngFor=\"let opt of getValidFilterOptions(activeFilterData)\"\r\n [class.selected]=\"activeFilters[activeFilterData.key] === opt.value\"\r\n (click)=\"selectFilterOption(activeFilterData, opt)\">\r\n {{ opt.label }}\r\n </div>\r\n</div>\r\n\r\n<!--\r\n Dropdown portal \u2014 rendered OUTSIDE every scroll/sticky container.\r\n position:fixed + z-index:99999 here is unconditionally above all sticky table cells.\r\n-->\r\n<div class=\"st-dropdown-menu st-dropdown-portal\"\r\n *ngIf=\"openDropdownId !== null && activeDropdownItems\"\r\n [ngStyle]=\"{\r\n position: 'fixed',\r\n top: dropdownPosition.top + 'px',\r\n right: dropdownPosition.right + 'px',\r\n left: 'auto',\r\n 'z-index': '99999'\r\n }\"\r\n (click)=\"$event.stopPropagation()\">\r\n <button class=\"st-dropdown-item\"\r\n *ngFor=\"let item of activeDropdownItems\"\r\n (click)=\"onActionItemClick(item, activeDropdownRow, $event); closeDropdown()\">\r\n <i *ngIf=\"item.icon\" [class]=\"item.icon + ' st-action-icon'\"></i>\r\n <span>{{ item.label }}</span>\r\n </button>\r\n</div>\r\n", styles: ["@charset \"UTF-8\";.smart-table-outer{display:flex;flex-direction:column;gap:0}.smart-table-wrapper{font-family:var(--st-font-family, \"Roboto\", sans-serif);background:var(--st-table-bg, #fff);border-radius:var(--st-border-radius, 8px);box-shadow:var(--st-box-shadow, 0 2px 8px rgba(0, 0, 0, .08));display:flex;flex-direction:column;gap:0;padding:0;border:none}.st-toolbar{display:flex;justify-content:flex-start;align-items:center;flex-wrap:wrap;padding:var(--st-toolbar-padding, 1.2rem 0rem);background:var(--st-toolbar-bg, #fff);gap:var(--st-toolbar-gap, 1rem);border-bottom:var(--st-toolbar-border-bottom, 1px solid rgba(0, 0, 0, .08));box-shadow:#959da533 0 8px 24px}.st-toolbar .st-search{position:relative;display:flex;align-items:center;background:var(--st-search-bg, #f5f5f5);border-radius:var(--st-search-radius, 8px);padding:var(--st-search-wrapper-padding, 0 .875rem);height:var(--st-search-height, 36px);min-width:var(--st-search-min-width, 200px);width:var(--st-search-width, auto)}.st-toolbar .st-search input{padding:0 .5rem 0 1.5rem;border:none;background:transparent;font-size:var(--st-font-size, 14px);width:100%;color:var(--st-text-color, #333);outline:none;line-height:var(--st-search-height, 36px)}.st-toolbar .st-search input::placeholder{color:var(--st-search-placeholder-color, #999)}.st-toolbar .st-search i{position:absolute;left:.875rem;top:50%;transform:translateY(-50%);color:var(--st-search-icon-color, #888);font-size:13px;pointer-events:none}.st-toolbar .st-filters{display:flex;align-items:center;gap:.5rem}.st-toolbar .st-filters .st-filter-item{position:relative}.st-toolbar .st-filters .st-filter-trigger{display:flex;align-items:center;gap:6px;padding:var(--st-filter-trigger-padding, 0 .75rem);height:var(--st-filter-height, 36px);border:var(--st-filter-border, 1px solid #e0e0e0);border-radius:var(--st-filter-radius, 8px);cursor:pointer;font-size:var(--st-filter-font-size, 14px);color:var(--st-filter-color, #555);background:var(--st-filter-bg, #fff);transition:border-color .15s,background .15s;white-space:nowrap;-webkit-user-select:none;user-select:none}.st-toolbar .st-filters .st-filter-trigger:hover{border-color:var(--st-filter-hover-border-color, #bbb);background:var(--st-filter-hover-bg, #fafafa)}.st-toolbar .st-filters .st-filter-trigger.active{border-color:var(--st-filter-active-border-color, #999);background:var(--st-filter-hover-bg, #fafafa)}.st-toolbar .st-filters .st-filter-trigger.active .st-filter-chevron{transform:rotate(180deg)}.st-toolbar .st-filters .st-filter-trigger.has-value{color:var(--st-filter-selected-color, #222);font-weight:500;border-color:var(--st-filter-selected-border-color, #333)}.st-toolbar .st-filters .st-filter-trigger .st-filter-trigger-label{flex:1}.st-toolbar .st-filters .st-filter-trigger .st-filter-chevron{color:var(--st-filter-chevron-color, #999);flex-shrink:0;transition:transform .15s ease}.st-toolbar .st-actions{display:flex;gap:.5rem;margin-left:auto}.st-filter-panel{min-width:var(--st-filter-panel-min-width, 180px);background:var(--st-filter-panel-bg, #fff);border:var(--st-filter-panel-border, 1px solid #ebebeb);border-radius:var(--st-filter-panel-radius, 12px);box-shadow:var(--st-filter-panel-shadow, 0 8px 28px rgba(0, 0, 0, .12), 0 2px 8px rgba(0, 0, 0, .06));padding:var(--st-filter-panel-padding, 6px)}.st-filter-option{display:flex;align-items:center;padding:var(--st-filter-option-padding, 8px 12px);margin-bottom:.3rem;border-radius:var(--st-filter-option-radius, 7px);font-size:var(--st-filter-font-size, 14px);color:var(--st-filter-color, #333);cursor:pointer;transition:background .1s;white-space:nowrap}.st-filter-option:hover{background:var(--st-filter-option-hover-bg, #f5f5f5)}.st-filter-option.selected{background:var(--st-filter-option-selected-bg, #f0f0f0);font-weight:500;color:var(--st-filter-option-selected-color, #111)}.st-table-container{overflow-x:auto;overflow-y:visible;padding:0}.st-table-container::-webkit-scrollbar{width:var(--st-scrollbar-width, 8px);height:var(--st-scrollbar-height, 8px)}.st-table-container::-webkit-scrollbar-track{background:var(--st-scrollbar-track-bg, #f1f1f1);border-radius:var(--st-scrollbar-track-radius, 4px)}.st-table-container::-webkit-scrollbar-thumb{background:var(--st-scrollbar-thumb-bg, #c1c1c1);border-radius:var(--st-scrollbar-thumb-radius, 4px)}.st-table-container::-webkit-scrollbar-thumb:hover{background:var(--st-scrollbar-thumb-hover-bg, #a8a8a8)}.st-table-container.has-sticky-header .st-table thead th{position:sticky;top:0;z-index:10;background:var(--st-header-bg, #f5f5f5);box-shadow:0 1px 2px -1px #0000001a}.st-table-container table{width:100%;border-collapse:separate;border-spacing:0;font-size:var(--st-font-size, 14px)}.st-table-container table thead{background:var(--st-header-bg, #f5f5f5)}.st-table-container table thead th{padding:.75rem 1rem;text-align:left;color:var(--st-header-color, #333);font-weight:var(--st-header-weight, 500);font-size:var(--st-header-size, 14px);text-transform:var(--st-header-transform, none);border-top:none;border-bottom:none;white-space:nowrap}.st-table-container table thead th:first-child{border-top-left-radius:var(--st-border-radius, 8px)}.st-table-container table thead th:last-child{border-top-right-radius:var(--st-border-radius, 8px)}.st-table-container table thead th.sortable{cursor:pointer}.st-table-container table thead th.sortable:hover{opacity:.8}.st-table-container table thead th.st-checkbox-col{width:40px;background:var(--st-header-bg, #f5f5f5);position:sticky;left:0;z-index:3}.st-table-container table thead th.sticky-col{position:sticky;z-index:3;background:var(--st-header-bg, #f5f5f5)}.st-table-container table thead th.st-actions-col{width:100px;min-width:100px;max-width:100px;background:var(--st-header-bg, #f5f5f5);box-shadow:var(--st-actions-col-shadow, -4px 0 8px rgba(0, 0, 0, .06));text-align:center;position:sticky;right:0;z-index:4}.st-table-container table tbody tr{background:var(--st-row-bg, #fff)}.st-table-container table tbody tr td{padding:var(--st-cell-padding, 1rem);color:var(--st-text-color, #333);vertical-align:middle;border-bottom:var(--st-row-border, 1px solid #eee);font-weight:400}.st-table-container table tbody tr td.st-checkbox-col{position:sticky;left:0;z-index:2}.st-table-container table tbody tr td.first-data-col{color:var(--st-text-color, #333);font-weight:500}.st-table-container table tbody tr td.sticky-col{position:sticky;z-index:2;background:var(--st-row-bg, #fff)}.st-table-container table tbody tr td.sticky-col:first-child{left:0}.st-table-container table tbody tr td.st-actions-col{width:100px;min-width:100px;max-width:100px;background:var(--st-frozen-col-bg, #f9f9f9);box-shadow:var(--st-actions-col-shadow, -4px 0 8px rgba(0, 0, 0, .06));text-align:center;position:sticky;right:0;z-index:2}.st-table-container table tbody tr:last-child td{border-bottom:none}.st-table-container table tbody tr:last-child td:first-child{border-bottom-left-radius:var(--st-border-radius, 8px)}.st-table-container table tbody tr:last-child td:last-child{border-bottom-right-radius:var(--st-border-radius, 8px)}.st-table-container table tbody tr:hover td{font-weight:500;background:var(--st-row-hover-bg, #f5f5f5)}.st-table-container table tbody tr:hover td.first-data-col{color:var(--st-first-col-color, #E84646)}.st-table-container table tbody tr.selected td,.st-table-container table tbody tr.selected td.sticky-col{background:var(--st-row-selected-bg, #f3e5f5)}.st-table-container table tbody tr .clickable-cell{cursor:pointer;transition:background .2s}.st-table-container table.is-selectable tbody td.first-data-col,.st-table-container table.is-selectable tbody td.first-data-col.sticky-col{background:var(--st-row-bg, #fff)}.st-table-container table.is-selectable tbody tr:hover td.first-data-col,.st-table-container table.is-selectable tbody tr:hover td.first-data-col.sticky-col{background:var(--st-row-hover-bg, #f5f5f5)}.st-table-container table.is-selectable tbody tr.selected td.first-data-col{background:var(--st-row-selected-bg, #f3e5f5)}.sort-icon-wrap{display:inline-flex;align-items:center;vertical-align:middle;flex-shrink:0;margin-left:4px;position:relative;top:-3px}.sort-icon-wrap svg{display:block}.st-selection-strip{display:flex;align-items:center;padding:var(--st-selection-strip-padding, .45rem 1rem);background:var(--st-selection-strip-bg, #fafafa);border-bottom:var(--st-selection-strip-border, 1px solid rgba(0, 0, 0, .08))}.st-selection-strip .st-selection-count{font-size:var(--st-selection-count-font-size, 13px);color:var(--st-selection-count-color, #444);font-weight:var(--st-selection-count-font-weight, 500)}input[type=checkbox]{accent-color:var(--st-checkbox-color, #e63e30);width:var(--st-checkbox-size, 16px);height:var(--st-checkbox-size, 16px);cursor:pointer}.st-badge{display:inline-block;padding:var(--st-badge-padding, 4px 12px);border-radius:var(--st-badge-radius, 12px);font-size:var(--st-badge-font-size, 12px);font-weight:var(--st-badge-font-weight, 500);text-align:center;white-space:nowrap}.st-badge.badge-success{background:var(--st-badge-success-bg, #e8f5e9);color:var(--st-badge-success-color, #2e7d32)}.st-badge.badge-warning{background:var(--st-badge-warning-bg, #fff3e0);color:var(--st-badge-warning-color, #ef6c00)}.st-badge.badge-danger{background:var(--st-badge-danger-bg, #ffebee);color:var(--st-badge-danger-color, #c62828)}.st-badge.badge-info{background:var(--st-badge-info-bg, #e3f2fd);color:var(--st-badge-info-color, #1565c0)}.st-badge.badge-neutral{background:var(--st-badge-neutral-bg, #f5f5f5);color:var(--st-badge-neutral-color, #616161)}.st-row-actions .action-buttons{display:flex;gap:.5rem;align-items:center;justify-content:center}.st-action-icon{margin-right:var(--st-action-icon-margin, 8px)}.st-dropdown-container{position:relative;display:inline-block}.st-dropdown-btn{background:transparent;border:none;cursor:pointer;padding:0;display:flex;align-items:center;justify-content:center}.st-dropdown-btn:hover .action-circle{background:#0000000f}.action-circle{display:inline-flex;align-items:center;justify-content:center;width:var(--st-action-circle-size, 32px);height:var(--st-action-circle-size, 32px);border-radius:50%;background:var(--st-table-bg, #fff);border:none;color:var(--st-text-color, #555);font-size:1rem;transition:background .15s}.st-dropdown-menu{min-width:var(--st-dropdown-min-width, 150px);background:var(--st-dropdown-bg, #fff);border:var(--st-dropdown-border, 1px solid #e0e0e0);border-radius:var(--st-dropdown-radius, 8px);box-shadow:var(--st-dropdown-shadow, 0 8px 24px rgba(0, 0, 0, .12));z-index:9999;display:flex;flex-direction:column;padding:var(--st-dropdown-padding, 4px);margin-top:4px}.st-dropdown-item{background:transparent;border:none;padding:var(--st-dropdown-item-padding, 8px 12px);border-radius:var(--st-dropdown-item-radius, 6px);text-align:left;cursor:pointer;display:flex;align-items:center;font-size:var(--st-font-size, 14px);color:var(--st-text-color, #333);transition:background .15s}.st-dropdown-item:hover{background:var(--st-dropdown-item-hover-bg, #f5f5f5)}.st-dropdown-item .st-action-icon{margin-right:8px;width:16px;text-align:center}.no-data{padding:2rem;color:var(--st-no-data-color, #888);text-align:center}.st-pagination{padding:var(--st-pagination-padding, .75rem 0)}@media(max-width:768px){.st-toolbar{flex-direction:column;align-items:stretch}.st-toolbar .st-search,.st-toolbar .st-filters,.st-toolbar .st-actions,.st-toolbar .st-search input{width:100%}.st-table-container{font-size:13px}}.st-table-container{position:relative}.st-table-container .st-table.loading-data{opacity:.5;pointer-events:none}.st-table-container .st-check-loader{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;justify-content:center;align-items:center;z-index:10}.st-table-container .st-check-loader .spinner{width:40px;height:40px;border:4px solid var(--st-spinner-border-color, rgba(0, 0, 0, .1));border-left-color:var(--st-loader-color);border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1$3.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: PaginationComponent, selector: "lib-pagination", inputs: ["totalItems", "itemsPerPage", "currentPage", "pageSizeOptions", "theme", "labels"], outputs: ["pageChange", "itemsPerPageChange"] }, { kind: "component", type: ButtonComponent, selector: "lib-button", inputs: ["variant", "type", "disabled", "width", "height", "borderRadius", "fontSize", "fontWeight", "backgroundColor", "color", "border", "icon", "labels"] }, { kind: "component", type: ConfirmationModalComponent, selector: "cc-confirmation-modal", inputs: ["config", "isOpen", "confirmDisabled", "confirmLoading"], outputs: ["confirm", "cancel", "close", "showCodeSnippet"] }] });
|
|
10379
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: SmartTableComponent, isStandalone: false, selector: "lib-smart-table", inputs: { config: "config", tableData: "tableData", totalItemsCount: "totalItemsCount", selectedRows: "selectedRows" }, outputs: { action: "action", topAction: "topAction", filterChange: "filterChange", rowSelect: "rowSelect", columnClick: "columnClick", sortChange: "sortChange", pageChange: "pageChange", searchChange: "searchChange" }, host: { listeners: { "document:click": "closeDropdown()" } }, viewQueries: [{ propertyName: "stickyHeaders", predicate: ["stickyHeader"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"smart-table-outer\">\n <!-- Table Card -->\n <div class=\"smart-table-wrapper\">\n <!-- Top Toolbar -->\n <div class=\"st-toolbar\" *ngIf=\"config.searchConfig?.enabled || (config.filters && config.filters.length > 0) || (config.topBarButtons && config.topBarButtons.length > 0)\">\n\n <!-- Search -->\n <div class=\"st-search\" *ngIf=\"config.searchConfig?.enabled\">\n <i class=\"fa fa-search\"></i>\n <input type=\"text\" [placeholder]=\"config.labels?.searchPlaceholder || 'Search'\" (input)=\"onSearch($event)\">\n </div>\n\n <!-- Filters -->\n <div class=\"st-filters\" *ngIf=\"config.filters\">\n <div class=\"st-filter-item\" *ngFor=\"let filter of config.filters\">\n <!-- Trigger -->\n <div class=\"st-filter-trigger\"\n [class.active]=\"openFilterKey === filter.key\"\n [class.has-value]=\"isFilterActive(filter)\"\n (click)=\"toggleFilter(filter.key, $event)\">\n <span class=\"st-filter-trigger-label\">{{ getFilterDisplay(filter) }}</span>\n <svg class=\"st-filter-chevron\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\n <path d=\"M2.5 4.5L6 8L9.5 4.5\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </div>\n </div>\n </div>\n\n <!-- Top Bar Buttons -->\n <div class=\"st-actions\" *ngIf=\"config.topBarButtons\">\n <lib-button *ngFor=\"let btn of config.topBarButtons\"\n [variant]=\"btn.btnVariant || 'primary'\"\n [icon]=\"btn.icon || ''\"\n (click)=\"onTopAction(btn)\">\n {{ btn.label }}\n </lib-button>\n </div>\n </div>\n\n <!-- Selection count strip \u2014 visible whenever selectable is enabled -->\n <div class=\"st-selection-strip\" *ngIf=\"config.selectable\">\n <span class=\"st-selection-count\">{{ selectedRows.length }} of {{ totalItems > 0 ? totalItems : data.length }} selected</span>\n </div>\n\n <!-- Table Container -->\n <div class=\"st-table-container\">\n <div class=\"st-check-loader\" *ngIf=\"loading\">\n <div class=\"spinner\"></div>\n </div>\n <table class=\"st-table\" [class.loading-data]=\"loading\" [class.is-selectable]=\"config.selectable\">\n <thead>\n <tr>\n <th *ngIf=\"config.selectable\" class=\"st-checkbox-col\">\n <input type=\"checkbox\" (change)=\"onSelectAll($event)\">\n </th>\n <th *ngFor=\"let col of config.columns; let colIndex = index\"\n #stickyHeader\n [class.sortable]=\"col.sortable\"\n [class.sticky-col]=\"col.sticky\"\n [class.first-data-col]=\"colIndex === 0\"\n [ngStyle]=\"stickyColumnStyles[col.key]\"\n (click)=\"onSort(col)\">\n {{ col.label }}\n <span *ngIf=\"col.sortable\" class=\"sort-icon-wrap\">\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\">\n <!-- Down arrow \u2014 RIGHT side, prominent when DESC -->\n <path d=\"M11.258 15.8153L14.5913 13.2699C14.7483 13.15 14.8364 12.9875 14.8364 12.818C14.8364 12.6486 14.7483 12.4861 14.5913 12.3662C14.4344 12.2464 14.2216 12.1791 13.9997 12.1791C13.7778 12.1791 13.5649 12.2464 13.408 12.3662L11.4997 13.8299V2.63636C11.4997 2.46758 11.4119 2.30572 11.2556 2.18638C11.0993 2.06704 10.8874 2 10.6663 2C10.4453 2 10.2334 2.06704 10.0771 2.18638C9.92081 2.30572 9.83301 2.46758 9.83301 2.63636V15.3635C9.83383 15.4891 9.88333 15.6117 9.97528 15.7159C10.0672 15.8201 10.1975 15.9012 10.3497 15.9489C10.4486 15.9845 10.557 16.002 10.6663 15.9998C10.776 16.0003 10.8847 15.9843 10.9863 15.9526C11.0878 15.9209 11.1801 15.8743 11.258 15.8153Z\"\n fill=\"black\" [attr.fill-opacity]=\"getDescOpacity(col.key)\"/>\n <!-- Up arrow \u2014 LEFT side, prominent when ASC -->\n <path d=\"M7.33316 16C7.11215 16 6.90019 15.933 6.74391 15.8136C6.58763 15.6942 6.49983 15.5324 6.49983 15.3636V4.16902L4.5915 5.63278C4.43458 5.75262 4.22175 5.81995 3.99983 5.81995C3.77791 5.81995 3.56508 5.75262 3.40816 5.63278C3.25124 5.51294 3.16309 5.3504 3.16309 5.18093C3.16309 5.01145 3.25124 4.84891 3.40816 4.72907L6.7415 2.18341C6.85868 2.0951 7.00749 2.03528 7.16915 2.01149C7.33081 1.98771 7.49807 2.00102 7.64983 2.04976C7.80201 2.0975 7.93228 2.17858 8.02423 2.28278C8.11617 2.38697 8.16567 2.50962 8.1665 2.63526V15.3636C8.1665 15.5324 8.0787 15.6942 7.92242 15.8136C7.76614 15.933 7.55418 16 7.33316 16Z\"\n fill=\"black\" [attr.fill-opacity]=\"getAscOpacity(col.key)\"/>\n </svg>\n </span>\n </th>\n <th *ngIf=\"config.actions && config.actions.length > 0\" class=\"st-actions-col\">\n {{ config.labels?.actionColumnHeader || 'Actions' }}\n </th>\n </tr>\n </thead>\n <tbody>\n <tr *ngFor=\"let row of data; let rowIndex = index\">\n <td *ngIf=\"config.selectable\" class=\"st-checkbox-col\">\n <input type=\"checkbox\" [(ngModel)]=\"row.selected\" (change)=\"onRowSelect(row)\">\n </td>\n <td *ngFor=\"let col of config.columns; let colIndex = index\"\n [class.sticky-col]=\"col.sticky\"\n [class.first-data-col]=\"colIndex === 0\"\n [ngStyle]=\"stickyColumnStyles[col.key]\"\n [class.clickable-cell]=\"col.clickAction\"\n (click)=\"onColumnClick(row, col)\">\n <!-- Text/Number/Date -->\n <span *ngIf=\"col.type !== 'custom' && col.type !== 'html' && col.type !== 'badge'\">\n {{ getCellValue(row, col) }}\n </span>\n <!-- HTML -->\n <div *ngIf=\"col.type === 'html'\" [innerHTML]=\"getCellValue(row, col)\"></div>\n <!-- Badge -->\n <span *ngIf=\"col.type === 'badge'\" class=\"st-badge\" [ngClass]=\"getBadgeClass(row, col)\">\n {{ getCellValue(row, col) }}\n </span>\n </td>\n\n <!-- Row Actions -->\n <td *ngIf=\"config.actions && config.actions.length > 0\" class=\"st-row-actions st-actions-col\">\n <div class=\"action-buttons\">\n <ng-container *ngFor=\"let action of config.actions; let i = index\">\n <ng-container *ngIf=\"action.type === 'dropdown'\">\n <div class=\"st-dropdown-container\" (click)=\"$event.stopPropagation()\">\n <button class=\"st-dropdown-btn\"\n [class.active]=\"openDropdownId === (rowIndex + '-' + i)\"\n (click)=\"toggleDropdown(rowIndex + '-' + i, $event, action.items, row)\">\n <span class=\"action-circle\">\n <i class=\"fa fa-ellipsis-h\"></i>\n </span>\n </button>\n </div>\n </ng-container>\n <ng-container *ngIf=\"action.type !== 'dropdown'\">\n <lib-button\n [variant]=\"action.btnVariant || 'secondary'\"\n [icon]=\"action.icon || ''\"\n (click)=\"onAction(action, row)\">\n {{ action.label }}\n </lib-button>\n </ng-container>\n </ng-container>\n </div>\n </td>\n </tr>\n <tr *ngIf=\"data.length === 0 && !loading\">\n <td [attr.colspan]=\"columnCount + (config.selectable ? 1 : 0) + (config.actions ? 1 : 0)\" class=\"no-data\">\n {{ config.labels?.noDataMessage || 'No data available' }}\n </td>\n </tr>\n </tbody>\n </table>\n </div>\n\n <!-- Pagination \u2014 inside the card, sticks to the bottom -->\n <div class=\"st-pagination\" *ngIf=\"showPagination\">\n <lib-pagination\n [totalItems]=\"totalItems\"\n [itemsPerPage]=\"config.pagination!.pageSize\"\n [currentPage]=\"currentPage\"\n [pageSizeOptions]=\"config.pagination!.pageSizeOptions\"\n (pageChange)=\"onPageChange($event)\"\n (itemsPerPageChange)=\"onPageSizeChange($event)\">\n </lib-pagination>\n </div>\n\n <!-- Built-in Delete Confirmation Modal -->\n <cc-confirmation-modal\n [isOpen]=\"deleteModalOpen\"\n [config]=\"deleteModalConfig\"\n (confirm)=\"onDeleteConfirm()\"\n (cancel)=\"onDeleteCancel()\"\n (close)=\"onDeleteCancel()\">\n <p>{{ deleteModalMessage }}</p>\n </cc-confirmation-modal>\n </div>\n</div>\n\n<!--\n Filter panel portal \u2014 position:fixed keeps it above all overflow/sticky containers.\n-->\n<div class=\"st-filter-panel\"\n *ngIf=\"openFilterKey !== null && activeFilterData\"\n [ngStyle]=\"{\n position: 'fixed',\n top: filterPosition.top + 'px',\n left: filterPosition.left + 'px',\n 'z-index': '99999'\n }\"\n (click)=\"$event.stopPropagation()\">\n <div class=\"st-filter-option\"\n [class.selected]=\"!isFilterActive(activeFilterData)\"\n (click)=\"selectFilterOption(activeFilterData, null)\">\n All {{ activeFilterData.label }}\n </div>\n <div class=\"st-filter-option\"\n *ngFor=\"let opt of getValidFilterOptions(activeFilterData)\"\n [class.selected]=\"activeFilters[activeFilterData.key] === opt.value\"\n (click)=\"selectFilterOption(activeFilterData, opt)\">\n {{ opt.label }}\n </div>\n</div>\n\n<!--\n Dropdown portal \u2014 rendered OUTSIDE every scroll/sticky container.\n position:fixed + z-index:99999 here is unconditionally above all sticky table cells.\n-->\n<div class=\"st-dropdown-menu st-dropdown-portal\"\n *ngIf=\"openDropdownId !== null && activeDropdownItems\"\n [ngStyle]=\"{\n position: 'fixed',\n top: dropdownPosition.top + 'px',\n right: dropdownPosition.right + 'px',\n left: 'auto',\n 'z-index': '99999'\n }\"\n (click)=\"$event.stopPropagation()\">\n <button class=\"st-dropdown-item\"\n *ngFor=\"let item of activeDropdownItems\"\n (click)=\"onActionItemClick(item, activeDropdownRow, $event); closeDropdown()\">\n <i *ngIf=\"item.icon\" [class]=\"item.icon + ' st-action-icon'\"></i>\n <span>{{ item.label }}</span>\n </button>\n</div>\n", styles: ["@charset \"UTF-8\";.smart-table-outer{display:flex;flex-direction:column;gap:0}.smart-table-wrapper{font-family:var(--st-font-family, \"Roboto\", sans-serif);background:var(--st-table-bg, #fff);border-radius:var(--st-border-radius, 8px);box-shadow:var(--st-box-shadow, 0 2px 8px rgba(0, 0, 0, .08));display:flex;flex-direction:column;gap:0;padding:0;border:none;margin-bottom:1.5rem}.st-toolbar{display:flex;justify-content:flex-start;align-items:center;flex-wrap:wrap;padding:var(--st-toolbar-padding, 1.2rem 0rem);background:var(--st-toolbar-bg, #fff);gap:var(--st-toolbar-gap, 1rem);border-bottom:var(--st-toolbar-border-bottom, 1px solid rgba(0, 0, 0, .08));box-shadow:#959da533 0 8px 24px}.st-toolbar .st-search{position:relative;display:flex;align-items:center;background:var(--st-search-bg, #f5f5f5);border-radius:var(--st-search-radius, 8px);padding:var(--st-search-wrapper-padding, 0 .875rem);height:var(--st-search-height, 36px);min-width:var(--st-search-min-width, 200px);width:var(--st-search-width, auto)}.st-toolbar .st-search input{padding:0 .5rem 0 1.5rem;border:none;background:transparent;font-size:var(--st-font-size, 14px);width:100%;color:var(--st-text-color, #333);outline:none;line-height:var(--st-search-height, 36px)}.st-toolbar .st-search input::placeholder{color:var(--st-search-placeholder-color, #999)}.st-toolbar .st-search i{position:absolute;left:.875rem;top:50%;transform:translateY(-50%);color:var(--st-search-icon-color, #888);font-size:13px;pointer-events:none}.st-toolbar .st-filters{display:flex;align-items:center;gap:.5rem}.st-toolbar .st-filters .st-filter-item{position:relative}.st-toolbar .st-filters .st-filter-trigger{display:flex;align-items:center;gap:6px;padding:var(--st-filter-trigger-padding, 0 .75rem);height:var(--st-filter-height, 36px);border:var(--st-filter-border, 1px solid #e0e0e0);border-radius:var(--st-filter-radius, 8px);cursor:pointer;font-size:var(--st-filter-font-size, 14px);color:var(--st-filter-color, #555);background:var(--st-filter-bg, #fff);transition:border-color .15s,background .15s;white-space:nowrap;-webkit-user-select:none;user-select:none}.st-toolbar .st-filters .st-filter-trigger:hover{border-color:var(--st-filter-hover-border-color, #bbb);background:var(--st-filter-hover-bg, #fafafa)}.st-toolbar .st-filters .st-filter-trigger.active{border-color:var(--st-filter-active-border-color, #999);background:var(--st-filter-hover-bg, #fafafa)}.st-toolbar .st-filters .st-filter-trigger.active .st-filter-chevron{transform:rotate(180deg)}.st-toolbar .st-filters .st-filter-trigger.has-value{color:var(--st-filter-selected-color, #222);font-weight:500;border-color:var(--st-filter-selected-border-color, #333)}.st-toolbar .st-filters .st-filter-trigger .st-filter-trigger-label{flex:1}.st-toolbar .st-filters .st-filter-trigger .st-filter-chevron{color:var(--st-filter-chevron-color, #999);flex-shrink:0;transition:transform .15s ease}.st-toolbar .st-actions{display:flex;gap:.5rem;margin-left:auto}.st-filter-panel{min-width:var(--st-filter-panel-min-width, 180px);background:var(--st-filter-panel-bg, #fff);border:var(--st-filter-panel-border, 1px solid #ebebeb);border-radius:var(--st-filter-panel-radius, 12px);box-shadow:var(--st-filter-panel-shadow, 0 8px 28px rgba(0, 0, 0, .12), 0 2px 8px rgba(0, 0, 0, .06));padding:var(--st-filter-panel-padding, 6px)}.st-filter-option{display:flex;align-items:center;padding:var(--st-filter-option-padding, 8px 12px);margin-bottom:.3rem;border-radius:var(--st-filter-option-radius, 7px);font-size:var(--st-filter-font-size, 14px);color:var(--st-filter-color, #333);cursor:pointer;transition:background .1s;white-space:nowrap}.st-filter-option:hover{background:var(--st-filter-option-hover-bg, #f5f5f5)}.st-filter-option.selected{background:var(--st-filter-option-selected-bg, #f0f0f0);font-weight:500;color:var(--st-filter-option-selected-color, #111)}.st-table-container{overflow-x:auto;overflow-y:visible;padding:0}.st-table-container::-webkit-scrollbar{width:var(--st-scrollbar-width, 8px);height:var(--st-scrollbar-height, 8px)}.st-table-container::-webkit-scrollbar-track{background:var(--st-scrollbar-track-bg, #f1f1f1);border-radius:var(--st-scrollbar-track-radius, 4px)}.st-table-container::-webkit-scrollbar-thumb{background:var(--st-scrollbar-thumb-bg, #c1c1c1);border-radius:var(--st-scrollbar-thumb-radius, 4px)}.st-table-container::-webkit-scrollbar-thumb:hover{background:var(--st-scrollbar-thumb-hover-bg, #a8a8a8)}.st-table-container.has-sticky-header .st-table thead th{position:sticky;top:0;z-index:10;background:var(--st-header-bg, #f5f5f5);box-shadow:0 1px 2px -1px #0000001a}.st-table-container table{width:100%;border-collapse:separate;border-spacing:0;font-size:var(--st-font-size, 14px)}.st-table-container table thead{background:var(--st-header-bg, #f5f5f5)}.st-table-container table thead th{padding:.4rem 1rem;text-align:left;color:var(--st-header-color, #333);font-weight:var(--st-header-weight, 500);font-size:var(--st-header-size, 14px);text-transform:var(--st-header-transform, none);border-top:none;border-bottom:none;white-space:nowrap}.st-table-container table thead th:first-child{border-top-left-radius:var(--st-border-radius, 8px)}.st-table-container table thead th:last-child{border-top-right-radius:var(--st-border-radius, 8px)}.st-table-container table thead th.sortable{cursor:pointer}.st-table-container table thead th.sortable:hover{opacity:.8}.st-table-container table thead th.st-checkbox-col{width:40px;background:var(--st-header-bg, #f5f5f5);position:sticky;left:0;z-index:3}.st-table-container table thead th.sticky-col{position:sticky;z-index:3;background:var(--st-header-bg, #f5f5f5)}.st-table-container table thead th.st-actions-col{width:100px;min-width:100px;max-width:100px;background:var(--st-header-bg, #f5f5f5);box-shadow:var(--st-actions-col-shadow, -4px 0 8px rgba(0, 0, 0, .06));text-align:center;position:sticky;right:0;z-index:4}.st-table-container table tbody tr{background:var(--st-row-bg, #fff)}.st-table-container table tbody tr td{padding:.5rem 1rem;color:var(--st-text-color, #333);vertical-align:middle;border-bottom:var(--st-row-border, 1px solid #eee);font-weight:400}.st-table-container table tbody tr td.st-checkbox-col{position:sticky;left:0;z-index:2}.st-table-container table tbody tr td.first-data-col{color:var(--st-text-color, #333);font-weight:500}.st-table-container table tbody tr td.sticky-col{position:sticky;z-index:2;background:var(--st-row-bg, #fff)}.st-table-container table tbody tr td.sticky-col:first-child{left:0}.st-table-container table tbody tr td.st-actions-col{width:100px;min-width:100px;max-width:100px;background:var(--st-frozen-col-bg, #f9f9f9);box-shadow:var(--st-actions-col-shadow, -4px 0 8px rgba(0, 0, 0, .06));text-align:center;position:sticky;right:0;z-index:2}.st-table-container table tbody tr:last-child td{border-bottom:none}.st-table-container table tbody tr:last-child td:first-child{border-bottom-left-radius:var(--st-border-radius, 8px)}.st-table-container table tbody tr:last-child td:last-child{border-bottom-right-radius:var(--st-border-radius, 8px)}.st-table-container table tbody tr:hover td{font-weight:500;background:var(--st-row-hover-bg, #f5f5f5)}.st-table-container table tbody tr:hover td.first-data-col{color:var(--st-first-col-color, #E84646)}.st-table-container table tbody tr.selected td,.st-table-container table tbody tr.selected td.sticky-col{background:var(--st-row-selected-bg, #f3e5f5)}.st-table-container table tbody tr .clickable-cell{cursor:pointer;transition:background .2s}.st-table-container table.is-selectable tbody td.first-data-col,.st-table-container table.is-selectable tbody td.first-data-col.sticky-col{background:var(--st-row-bg, #fff)}.st-table-container table.is-selectable tbody tr:hover td.first-data-col,.st-table-container table.is-selectable tbody tr:hover td.first-data-col.sticky-col{background:var(--st-row-hover-bg, #f5f5f5)}.st-table-container table.is-selectable tbody tr.selected td.first-data-col{background:var(--st-row-selected-bg, #f3e5f5)}.sort-icon-wrap{display:inline-flex;align-items:center;vertical-align:middle;flex-shrink:0;margin-left:4px;position:relative;top:-3px}.sort-icon-wrap svg{display:block}.st-selection-strip{display:flex;align-items:center;padding:var(--st-selection-strip-padding, .45rem 1rem);background:var(--st-selection-strip-bg, #fafafa);border-bottom:var(--st-selection-strip-border, 1px solid rgba(0, 0, 0, .08))}.st-selection-strip .st-selection-count{font-size:var(--st-selection-count-font-size, 13px);color:var(--st-selection-count-color, #444);font-weight:var(--st-selection-count-font-weight, 500)}input[type=checkbox]{accent-color:var(--st-checkbox-color, #e63e30);width:var(--st-checkbox-size, 16px);height:var(--st-checkbox-size, 16px);cursor:pointer}.st-badge{display:inline-block;padding:var(--st-badge-padding, 4px 12px);border-radius:var(--st-badge-radius, 12px);font-size:var(--st-badge-font-size, 12px);font-weight:var(--st-badge-font-weight, 500);text-align:center;white-space:nowrap}.st-badge.badge-success{background:var(--st-badge-success-bg, #e8f5e9);color:var(--st-badge-success-color, #2e7d32)}.st-badge.badge-warning{background:var(--st-badge-warning-bg, #fff3e0);color:var(--st-badge-warning-color, #ef6c00)}.st-badge.badge-danger{background:var(--st-badge-danger-bg, #ffebee);color:var(--st-badge-danger-color, #c62828)}.st-badge.badge-info{background:var(--st-badge-info-bg, #e3f2fd);color:var(--st-badge-info-color, #1565c0)}.st-badge.badge-neutral{background:var(--st-badge-neutral-bg, #f5f5f5);color:var(--st-badge-neutral-color, #616161)}.st-row-actions .action-buttons{display:flex;gap:.5rem;align-items:center;justify-content:center}.st-action-icon{margin-right:var(--st-action-icon-margin, 8px)}.st-dropdown-container{position:relative;display:inline-block}.st-dropdown-btn{background:transparent;border:none;cursor:pointer;padding:0;display:flex;align-items:center;justify-content:center}.st-dropdown-btn:hover .action-circle{background:#0000000f}.action-circle{display:inline-flex;align-items:center;justify-content:center;width:var(--st-action-circle-size, 32px);height:var(--st-action-circle-size, 32px);border-radius:50%;background:var(--st-table-bg, #fff);border:none;color:var(--st-text-color, #555);font-size:1rem;transition:background .15s}.st-dropdown-menu{min-width:var(--st-dropdown-min-width, 150px);background:var(--st-dropdown-bg, #fff);border:var(--st-dropdown-border, 1px solid #e0e0e0);border-radius:var(--st-dropdown-radius, 8px);box-shadow:var(--st-dropdown-shadow, 0 8px 24px rgba(0, 0, 0, .12));z-index:9999;display:flex;flex-direction:column;padding:var(--st-dropdown-padding, 4px);margin-top:4px}.st-dropdown-item{background:transparent;border:none;padding:var(--st-dropdown-item-padding, 8px 12px);border-radius:var(--st-dropdown-item-radius, 6px);text-align:left;cursor:pointer;display:flex;align-items:center;font-size:var(--st-font-size, 14px);color:var(--st-text-color, #333);transition:background .15s}.st-dropdown-item:hover{background:var(--st-dropdown-item-hover-bg, #f5f5f5)}.st-dropdown-item .st-action-icon{margin-right:8px;width:16px;text-align:center}.no-data{padding:2rem;color:var(--st-no-data-color, #888);text-align:center}.st-pagination{padding:var(--st-pagination-padding, .6rem 1rem);border-top:1px solid rgba(0,0,0,.07);background:var(--st-table-bg, #fff);border-bottom-left-radius:var(--st-border-radius, 8px);border-bottom-right-radius:var(--st-border-radius, 8px)}@media(max-width:768px){.st-toolbar{flex-direction:column;align-items:stretch}.st-toolbar .st-search,.st-toolbar .st-filters,.st-toolbar .st-actions,.st-toolbar .st-search input{width:100%}.st-table-container{font-size:13px}}.st-table-container{position:relative}.st-table-container .st-table.loading-data{opacity:.5;pointer-events:none}.st-table-container .st-check-loader{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;justify-content:center;align-items:center;z-index:10}.st-table-container .st-check-loader .spinner{width:40px;height:40px;border:4px solid var(--st-spinner-border-color, rgba(0, 0, 0, .1));border-left-color:var(--st-loader-color);border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1$3.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: PaginationComponent, selector: "lib-pagination", inputs: ["totalItems", "itemsPerPage", "currentPage", "pageSizeOptions", "theme", "labels"], outputs: ["pageChange", "itemsPerPageChange"] }, { kind: "component", type: ButtonComponent, selector: "lib-button", inputs: ["variant", "type", "disabled", "width", "height", "borderRadius", "fontSize", "fontWeight", "backgroundColor", "color", "border", "icon", "labels"] }, { kind: "component", type: ConfirmationModalComponent, selector: "cc-confirmation-modal", inputs: ["config", "isOpen", "confirmDisabled", "confirmLoading"], outputs: ["confirm", "cancel", "close", "showCodeSnippet"] }] });
|
|
10339
10380
|
}
|
|
10340
10381
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SmartTableComponent, decorators: [{
|
|
10341
10382
|
type: Component,
|
|
10342
|
-
args: [{ selector: 'lib-smart-table', standalone: false, template: "<div class=\"smart-table-outer\">\r\n <!-- Table Card -->\r\n <div class=\"smart-table-wrapper\">\r\n <!-- Top Toolbar -->\r\n <div class=\"st-toolbar\" *ngIf=\"config.searchConfig?.enabled || (config.filters && config.filters.length > 0) || (config.topBarButtons && config.topBarButtons.length > 0)\">\r\n\r\n <!-- Search -->\r\n <div class=\"st-search\" *ngIf=\"config.searchConfig?.enabled\">\r\n <i class=\"fa fa-search\"></i>\r\n <input type=\"text\" [placeholder]=\"config.labels?.searchPlaceholder || 'Search'\" (input)=\"onSearch($event)\">\r\n </div>\r\n\r\n <!-- Filters -->\r\n <div class=\"st-filters\" *ngIf=\"config.filters\">\r\n <div class=\"st-filter-item\" *ngFor=\"let filter of config.filters\">\r\n <!-- Trigger -->\r\n <div class=\"st-filter-trigger\"\r\n [class.active]=\"openFilterKey === filter.key\"\r\n [class.has-value]=\"isFilterActive(filter)\"\r\n (click)=\"toggleFilter(filter.key, $event)\">\r\n <span class=\"st-filter-trigger-label\">{{ getFilterDisplay(filter) }}</span>\r\n <svg class=\"st-filter-chevron\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n <path d=\"M2.5 4.5L6 8L9.5 4.5\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Top Bar Buttons -->\r\n <div class=\"st-actions\" *ngIf=\"config.topBarButtons\">\r\n <lib-button *ngFor=\"let btn of config.topBarButtons\"\r\n [variant]=\"btn.btnVariant || 'primary'\"\r\n [icon]=\"btn.icon || ''\"\r\n (click)=\"onTopAction(btn)\">\r\n {{ btn.label }}\r\n </lib-button>\r\n </div>\r\n </div>\r\n\r\n <!-- Selection count strip \u2014 visible whenever selectable is enabled -->\r\n <div class=\"st-selection-strip\" *ngIf=\"config.selectable\">\r\n <span class=\"st-selection-count\">{{ selectedRows.length }} of {{ totalItems > 0 ? totalItems : data.length }} selected</span>\r\n </div>\r\n\r\n <!-- Table Container -->\r\n <div class=\"st-table-container\">\r\n <div class=\"st-check-loader\" *ngIf=\"loading\">\r\n <div class=\"spinner\"></div>\r\n </div>\r\n <table class=\"st-table\" [class.loading-data]=\"loading\" [class.is-selectable]=\"config.selectable\">\r\n <thead>\r\n <tr>\r\n <th *ngIf=\"config.selectable\" class=\"st-checkbox-col\">\r\n <input type=\"checkbox\" (change)=\"onSelectAll($event)\">\r\n </th>\r\n <th *ngFor=\"let col of config.columns; let colIndex = index\"\r\n #stickyHeader\r\n [class.sortable]=\"col.sortable\"\r\n [class.sticky-col]=\"col.sticky\"\r\n [class.first-data-col]=\"colIndex === 0\"\r\n [ngStyle]=\"stickyColumnStyles[col.key]\"\r\n (click)=\"onSort(col)\">\r\n {{ col.label }}\r\n <span *ngIf=\"col.sortable\" class=\"sort-icon-wrap\">\r\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\">\r\n <!-- Down arrow \u2014 RIGHT side, prominent when DESC -->\r\n <path d=\"M11.258 15.8153L14.5913 13.2699C14.7483 13.15 14.8364 12.9875 14.8364 12.818C14.8364 12.6486 14.7483 12.4861 14.5913 12.3662C14.4344 12.2464 14.2216 12.1791 13.9997 12.1791C13.7778 12.1791 13.5649 12.2464 13.408 12.3662L11.4997 13.8299V2.63636C11.4997 2.46758 11.4119 2.30572 11.2556 2.18638C11.0993 2.06704 10.8874 2 10.6663 2C10.4453 2 10.2334 2.06704 10.0771 2.18638C9.92081 2.30572 9.83301 2.46758 9.83301 2.63636V15.3635C9.83383 15.4891 9.88333 15.6117 9.97528 15.7159C10.0672 15.8201 10.1975 15.9012 10.3497 15.9489C10.4486 15.9845 10.557 16.002 10.6663 15.9998C10.776 16.0003 10.8847 15.9843 10.9863 15.9526C11.0878 15.9209 11.1801 15.8743 11.258 15.8153Z\"\r\n fill=\"black\" [attr.fill-opacity]=\"getDescOpacity(col.key)\"/>\r\n <!-- Up arrow \u2014 LEFT side, prominent when ASC -->\r\n <path d=\"M7.33316 16C7.11215 16 6.90019 15.933 6.74391 15.8136C6.58763 15.6942 6.49983 15.5324 6.49983 15.3636V4.16902L4.5915 5.63278C4.43458 5.75262 4.22175 5.81995 3.99983 5.81995C3.77791 5.81995 3.56508 5.75262 3.40816 5.63278C3.25124 5.51294 3.16309 5.3504 3.16309 5.18093C3.16309 5.01145 3.25124 4.84891 3.40816 4.72907L6.7415 2.18341C6.85868 2.0951 7.00749 2.03528 7.16915 2.01149C7.33081 1.98771 7.49807 2.00102 7.64983 2.04976C7.80201 2.0975 7.93228 2.17858 8.02423 2.28278C8.11617 2.38697 8.16567 2.50962 8.1665 2.63526V15.3636C8.1665 15.5324 8.0787 15.6942 7.92242 15.8136C7.76614 15.933 7.55418 16 7.33316 16Z\"\r\n fill=\"black\" [attr.fill-opacity]=\"getAscOpacity(col.key)\"/>\r\n </svg>\r\n </span>\r\n </th>\r\n <th *ngIf=\"config.actions && config.actions.length > 0\" class=\"st-actions-col\">\r\n {{ config.labels?.actionColumnHeader || 'Actions' }}\r\n </th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <tr *ngFor=\"let row of data; let rowIndex = index\">\r\n <td *ngIf=\"config.selectable\" class=\"st-checkbox-col\">\r\n <input type=\"checkbox\" [(ngModel)]=\"row.selected\" (change)=\"onRowSelect(row)\">\r\n </td>\r\n <td *ngFor=\"let col of config.columns; let colIndex = index\"\r\n [class.sticky-col]=\"col.sticky\"\r\n [class.first-data-col]=\"colIndex === 0\"\r\n [ngStyle]=\"stickyColumnStyles[col.key]\"\r\n [class.clickable-cell]=\"col.clickAction\"\r\n (click)=\"onColumnClick(row, col)\">\r\n <!-- Text/Number/Date -->\r\n <span *ngIf=\"col.type !== 'custom' && col.type !== 'html' && col.type !== 'badge'\">\r\n {{ getCellValue(row, col) }}\r\n </span>\r\n <!-- HTML -->\r\n <div *ngIf=\"col.type === 'html'\" [innerHTML]=\"getCellValue(row, col)\"></div>\r\n <!-- Badge -->\r\n <span *ngIf=\"col.type === 'badge'\" class=\"st-badge\" [ngClass]=\"getBadgeClass(row, col)\">\r\n {{ getCellValue(row, col) }}\r\n </span>\r\n </td>\r\n\r\n <!-- Row Actions -->\r\n <td *ngIf=\"config.actions && config.actions.length > 0\" class=\"st-row-actions st-actions-col\">\r\n <div class=\"action-buttons\">\r\n <ng-container *ngFor=\"let action of config.actions; let i = index\">\r\n <ng-container *ngIf=\"action.type === 'dropdown'\">\r\n <div class=\"st-dropdown-container\" (click)=\"$event.stopPropagation()\">\r\n <button class=\"st-dropdown-btn\"\r\n [class.active]=\"openDropdownId === (rowIndex + '-' + i)\"\r\n (click)=\"toggleDropdown(rowIndex + '-' + i, $event, action.items, row)\">\r\n <span class=\"action-circle\">\r\n <i class=\"fa fa-ellipsis-h\"></i>\r\n </span>\r\n </button>\r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"action.type !== 'dropdown'\">\r\n <lib-button\r\n [variant]=\"action.btnVariant || 'secondary'\"\r\n [icon]=\"action.icon || ''\"\r\n (click)=\"onAction(action, row)\">\r\n {{ action.label }}\r\n </lib-button>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n </td>\r\n </tr>\r\n <tr *ngIf=\"data.length === 0 && !loading\">\r\n <td [attr.colspan]=\"columnCount + (config.selectable ? 1 : 0) + (config.actions ? 1 : 0)\" class=\"no-data\">\r\n {{ config.labels?.noDataMessage || 'No data available' }}\r\n </td>\r\n </tr>\r\n </tbody>\r\n </table>\r\n </div>\r\n\r\n <!-- Built-in Delete Confirmation Modal -->\r\n <cc-confirmation-modal\r\n [isOpen]=\"deleteModalOpen\"\r\n [config]=\"deleteModalConfig\"\r\n (confirm)=\"onDeleteConfirm()\"\r\n (cancel)=\"onDeleteCancel()\"\r\n (close)=\"onDeleteCancel()\">\r\n <p>{{ deleteModalMessage }}</p>\r\n </cc-confirmation-modal>\r\n </div>\r\n\r\n <!-- Pagination outside the table card -->\r\n <div class=\"st-pagination\" *ngIf=\"config.pagination && config.pagination.enabled && data.length > 0\">\r\n <lib-pagination\r\n [totalItems]=\"totalItems\"\r\n [itemsPerPage]=\"config.pagination.pageSize\"\r\n [currentPage]=\"currentPage\"\r\n [pageSizeOptions]=\"config.pagination.pageSizeOptions\"\r\n (pageChange)=\"onPageChange($event)\"\r\n (itemsPerPageChange)=\"onPageSizeChange($event)\">\r\n </lib-pagination>\r\n </div>\r\n</div>\r\n\r\n<!--\r\n Filter panel portal \u2014 position:fixed keeps it above all overflow/sticky containers.\r\n-->\r\n<div class=\"st-filter-panel\"\r\n *ngIf=\"openFilterKey !== null && activeFilterData\"\r\n [ngStyle]=\"{\r\n position: 'fixed',\r\n top: filterPosition.top + 'px',\r\n left: filterPosition.left + 'px',\r\n 'z-index': '99999'\r\n }\"\r\n (click)=\"$event.stopPropagation()\">\r\n <div class=\"st-filter-option\"\r\n [class.selected]=\"!isFilterActive(activeFilterData)\"\r\n (click)=\"selectFilterOption(activeFilterData, null)\">\r\n All {{ activeFilterData.label }}\r\n </div>\r\n <div class=\"st-filter-option\"\r\n *ngFor=\"let opt of getValidFilterOptions(activeFilterData)\"\r\n [class.selected]=\"activeFilters[activeFilterData.key] === opt.value\"\r\n (click)=\"selectFilterOption(activeFilterData, opt)\">\r\n {{ opt.label }}\r\n </div>\r\n</div>\r\n\r\n<!--\r\n Dropdown portal \u2014 rendered OUTSIDE every scroll/sticky container.\r\n position:fixed + z-index:99999 here is unconditionally above all sticky table cells.\r\n-->\r\n<div class=\"st-dropdown-menu st-dropdown-portal\"\r\n *ngIf=\"openDropdownId !== null && activeDropdownItems\"\r\n [ngStyle]=\"{\r\n position: 'fixed',\r\n top: dropdownPosition.top + 'px',\r\n right: dropdownPosition.right + 'px',\r\n left: 'auto',\r\n 'z-index': '99999'\r\n }\"\r\n (click)=\"$event.stopPropagation()\">\r\n <button class=\"st-dropdown-item\"\r\n *ngFor=\"let item of activeDropdownItems\"\r\n (click)=\"onActionItemClick(item, activeDropdownRow, $event); closeDropdown()\">\r\n <i *ngIf=\"item.icon\" [class]=\"item.icon + ' st-action-icon'\"></i>\r\n <span>{{ item.label }}</span>\r\n </button>\r\n</div>\r\n", styles: ["@charset \"UTF-8\";.smart-table-outer{display:flex;flex-direction:column;gap:0}.smart-table-wrapper{font-family:var(--st-font-family, \"Roboto\", sans-serif);background:var(--st-table-bg, #fff);border-radius:var(--st-border-radius, 8px);box-shadow:var(--st-box-shadow, 0 2px 8px rgba(0, 0, 0, .08));display:flex;flex-direction:column;gap:0;padding:0;border:none}.st-toolbar{display:flex;justify-content:flex-start;align-items:center;flex-wrap:wrap;padding:var(--st-toolbar-padding, 1.2rem 0rem);background:var(--st-toolbar-bg, #fff);gap:var(--st-toolbar-gap, 1rem);border-bottom:var(--st-toolbar-border-bottom, 1px solid rgba(0, 0, 0, .08));box-shadow:#959da533 0 8px 24px}.st-toolbar .st-search{position:relative;display:flex;align-items:center;background:var(--st-search-bg, #f5f5f5);border-radius:var(--st-search-radius, 8px);padding:var(--st-search-wrapper-padding, 0 .875rem);height:var(--st-search-height, 36px);min-width:var(--st-search-min-width, 200px);width:var(--st-search-width, auto)}.st-toolbar .st-search input{padding:0 .5rem 0 1.5rem;border:none;background:transparent;font-size:var(--st-font-size, 14px);width:100%;color:var(--st-text-color, #333);outline:none;line-height:var(--st-search-height, 36px)}.st-toolbar .st-search input::placeholder{color:var(--st-search-placeholder-color, #999)}.st-toolbar .st-search i{position:absolute;left:.875rem;top:50%;transform:translateY(-50%);color:var(--st-search-icon-color, #888);font-size:13px;pointer-events:none}.st-toolbar .st-filters{display:flex;align-items:center;gap:.5rem}.st-toolbar .st-filters .st-filter-item{position:relative}.st-toolbar .st-filters .st-filter-trigger{display:flex;align-items:center;gap:6px;padding:var(--st-filter-trigger-padding, 0 .75rem);height:var(--st-filter-height, 36px);border:var(--st-filter-border, 1px solid #e0e0e0);border-radius:var(--st-filter-radius, 8px);cursor:pointer;font-size:var(--st-filter-font-size, 14px);color:var(--st-filter-color, #555);background:var(--st-filter-bg, #fff);transition:border-color .15s,background .15s;white-space:nowrap;-webkit-user-select:none;user-select:none}.st-toolbar .st-filters .st-filter-trigger:hover{border-color:var(--st-filter-hover-border-color, #bbb);background:var(--st-filter-hover-bg, #fafafa)}.st-toolbar .st-filters .st-filter-trigger.active{border-color:var(--st-filter-active-border-color, #999);background:var(--st-filter-hover-bg, #fafafa)}.st-toolbar .st-filters .st-filter-trigger.active .st-filter-chevron{transform:rotate(180deg)}.st-toolbar .st-filters .st-filter-trigger.has-value{color:var(--st-filter-selected-color, #222);font-weight:500;border-color:var(--st-filter-selected-border-color, #333)}.st-toolbar .st-filters .st-filter-trigger .st-filter-trigger-label{flex:1}.st-toolbar .st-filters .st-filter-trigger .st-filter-chevron{color:var(--st-filter-chevron-color, #999);flex-shrink:0;transition:transform .15s ease}.st-toolbar .st-actions{display:flex;gap:.5rem;margin-left:auto}.st-filter-panel{min-width:var(--st-filter-panel-min-width, 180px);background:var(--st-filter-panel-bg, #fff);border:var(--st-filter-panel-border, 1px solid #ebebeb);border-radius:var(--st-filter-panel-radius, 12px);box-shadow:var(--st-filter-panel-shadow, 0 8px 28px rgba(0, 0, 0, .12), 0 2px 8px rgba(0, 0, 0, .06));padding:var(--st-filter-panel-padding, 6px)}.st-filter-option{display:flex;align-items:center;padding:var(--st-filter-option-padding, 8px 12px);margin-bottom:.3rem;border-radius:var(--st-filter-option-radius, 7px);font-size:var(--st-filter-font-size, 14px);color:var(--st-filter-color, #333);cursor:pointer;transition:background .1s;white-space:nowrap}.st-filter-option:hover{background:var(--st-filter-option-hover-bg, #f5f5f5)}.st-filter-option.selected{background:var(--st-filter-option-selected-bg, #f0f0f0);font-weight:500;color:var(--st-filter-option-selected-color, #111)}.st-table-container{overflow-x:auto;overflow-y:visible;padding:0}.st-table-container::-webkit-scrollbar{width:var(--st-scrollbar-width, 8px);height:var(--st-scrollbar-height, 8px)}.st-table-container::-webkit-scrollbar-track{background:var(--st-scrollbar-track-bg, #f1f1f1);border-radius:var(--st-scrollbar-track-radius, 4px)}.st-table-container::-webkit-scrollbar-thumb{background:var(--st-scrollbar-thumb-bg, #c1c1c1);border-radius:var(--st-scrollbar-thumb-radius, 4px)}.st-table-container::-webkit-scrollbar-thumb:hover{background:var(--st-scrollbar-thumb-hover-bg, #a8a8a8)}.st-table-container.has-sticky-header .st-table thead th{position:sticky;top:0;z-index:10;background:var(--st-header-bg, #f5f5f5);box-shadow:0 1px 2px -1px #0000001a}.st-table-container table{width:100%;border-collapse:separate;border-spacing:0;font-size:var(--st-font-size, 14px)}.st-table-container table thead{background:var(--st-header-bg, #f5f5f5)}.st-table-container table thead th{padding:.75rem 1rem;text-align:left;color:var(--st-header-color, #333);font-weight:var(--st-header-weight, 500);font-size:var(--st-header-size, 14px);text-transform:var(--st-header-transform, none);border-top:none;border-bottom:none;white-space:nowrap}.st-table-container table thead th:first-child{border-top-left-radius:var(--st-border-radius, 8px)}.st-table-container table thead th:last-child{border-top-right-radius:var(--st-border-radius, 8px)}.st-table-container table thead th.sortable{cursor:pointer}.st-table-container table thead th.sortable:hover{opacity:.8}.st-table-container table thead th.st-checkbox-col{width:40px;background:var(--st-header-bg, #f5f5f5);position:sticky;left:0;z-index:3}.st-table-container table thead th.sticky-col{position:sticky;z-index:3;background:var(--st-header-bg, #f5f5f5)}.st-table-container table thead th.st-actions-col{width:100px;min-width:100px;max-width:100px;background:var(--st-header-bg, #f5f5f5);box-shadow:var(--st-actions-col-shadow, -4px 0 8px rgba(0, 0, 0, .06));text-align:center;position:sticky;right:0;z-index:4}.st-table-container table tbody tr{background:var(--st-row-bg, #fff)}.st-table-container table tbody tr td{padding:var(--st-cell-padding, 1rem);color:var(--st-text-color, #333);vertical-align:middle;border-bottom:var(--st-row-border, 1px solid #eee);font-weight:400}.st-table-container table tbody tr td.st-checkbox-col{position:sticky;left:0;z-index:2}.st-table-container table tbody tr td.first-data-col{color:var(--st-text-color, #333);font-weight:500}.st-table-container table tbody tr td.sticky-col{position:sticky;z-index:2;background:var(--st-row-bg, #fff)}.st-table-container table tbody tr td.sticky-col:first-child{left:0}.st-table-container table tbody tr td.st-actions-col{width:100px;min-width:100px;max-width:100px;background:var(--st-frozen-col-bg, #f9f9f9);box-shadow:var(--st-actions-col-shadow, -4px 0 8px rgba(0, 0, 0, .06));text-align:center;position:sticky;right:0;z-index:2}.st-table-container table tbody tr:last-child td{border-bottom:none}.st-table-container table tbody tr:last-child td:first-child{border-bottom-left-radius:var(--st-border-radius, 8px)}.st-table-container table tbody tr:last-child td:last-child{border-bottom-right-radius:var(--st-border-radius, 8px)}.st-table-container table tbody tr:hover td{font-weight:500;background:var(--st-row-hover-bg, #f5f5f5)}.st-table-container table tbody tr:hover td.first-data-col{color:var(--st-first-col-color, #E84646)}.st-table-container table tbody tr.selected td,.st-table-container table tbody tr.selected td.sticky-col{background:var(--st-row-selected-bg, #f3e5f5)}.st-table-container table tbody tr .clickable-cell{cursor:pointer;transition:background .2s}.st-table-container table.is-selectable tbody td.first-data-col,.st-table-container table.is-selectable tbody td.first-data-col.sticky-col{background:var(--st-row-bg, #fff)}.st-table-container table.is-selectable tbody tr:hover td.first-data-col,.st-table-container table.is-selectable tbody tr:hover td.first-data-col.sticky-col{background:var(--st-row-hover-bg, #f5f5f5)}.st-table-container table.is-selectable tbody tr.selected td.first-data-col{background:var(--st-row-selected-bg, #f3e5f5)}.sort-icon-wrap{display:inline-flex;align-items:center;vertical-align:middle;flex-shrink:0;margin-left:4px;position:relative;top:-3px}.sort-icon-wrap svg{display:block}.st-selection-strip{display:flex;align-items:center;padding:var(--st-selection-strip-padding, .45rem 1rem);background:var(--st-selection-strip-bg, #fafafa);border-bottom:var(--st-selection-strip-border, 1px solid rgba(0, 0, 0, .08))}.st-selection-strip .st-selection-count{font-size:var(--st-selection-count-font-size, 13px);color:var(--st-selection-count-color, #444);font-weight:var(--st-selection-count-font-weight, 500)}input[type=checkbox]{accent-color:var(--st-checkbox-color, #e63e30);width:var(--st-checkbox-size, 16px);height:var(--st-checkbox-size, 16px);cursor:pointer}.st-badge{display:inline-block;padding:var(--st-badge-padding, 4px 12px);border-radius:var(--st-badge-radius, 12px);font-size:var(--st-badge-font-size, 12px);font-weight:var(--st-badge-font-weight, 500);text-align:center;white-space:nowrap}.st-badge.badge-success{background:var(--st-badge-success-bg, #e8f5e9);color:var(--st-badge-success-color, #2e7d32)}.st-badge.badge-warning{background:var(--st-badge-warning-bg, #fff3e0);color:var(--st-badge-warning-color, #ef6c00)}.st-badge.badge-danger{background:var(--st-badge-danger-bg, #ffebee);color:var(--st-badge-danger-color, #c62828)}.st-badge.badge-info{background:var(--st-badge-info-bg, #e3f2fd);color:var(--st-badge-info-color, #1565c0)}.st-badge.badge-neutral{background:var(--st-badge-neutral-bg, #f5f5f5);color:var(--st-badge-neutral-color, #616161)}.st-row-actions .action-buttons{display:flex;gap:.5rem;align-items:center;justify-content:center}.st-action-icon{margin-right:var(--st-action-icon-margin, 8px)}.st-dropdown-container{position:relative;display:inline-block}.st-dropdown-btn{background:transparent;border:none;cursor:pointer;padding:0;display:flex;align-items:center;justify-content:center}.st-dropdown-btn:hover .action-circle{background:#0000000f}.action-circle{display:inline-flex;align-items:center;justify-content:center;width:var(--st-action-circle-size, 32px);height:var(--st-action-circle-size, 32px);border-radius:50%;background:var(--st-table-bg, #fff);border:none;color:var(--st-text-color, #555);font-size:1rem;transition:background .15s}.st-dropdown-menu{min-width:var(--st-dropdown-min-width, 150px);background:var(--st-dropdown-bg, #fff);border:var(--st-dropdown-border, 1px solid #e0e0e0);border-radius:var(--st-dropdown-radius, 8px);box-shadow:var(--st-dropdown-shadow, 0 8px 24px rgba(0, 0, 0, .12));z-index:9999;display:flex;flex-direction:column;padding:var(--st-dropdown-padding, 4px);margin-top:4px}.st-dropdown-item{background:transparent;border:none;padding:var(--st-dropdown-item-padding, 8px 12px);border-radius:var(--st-dropdown-item-radius, 6px);text-align:left;cursor:pointer;display:flex;align-items:center;font-size:var(--st-font-size, 14px);color:var(--st-text-color, #333);transition:background .15s}.st-dropdown-item:hover{background:var(--st-dropdown-item-hover-bg, #f5f5f5)}.st-dropdown-item .st-action-icon{margin-right:8px;width:16px;text-align:center}.no-data{padding:2rem;color:var(--st-no-data-color, #888);text-align:center}.st-pagination{padding:var(--st-pagination-padding, .75rem 0)}@media(max-width:768px){.st-toolbar{flex-direction:column;align-items:stretch}.st-toolbar .st-search,.st-toolbar .st-filters,.st-toolbar .st-actions,.st-toolbar .st-search input{width:100%}.st-table-container{font-size:13px}}.st-table-container{position:relative}.st-table-container .st-table.loading-data{opacity:.5;pointer-events:none}.st-table-container .st-check-loader{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;justify-content:center;align-items:center;z-index:10}.st-table-container .st-check-loader .spinner{width:40px;height:40px;border:4px solid var(--st-spinner-border-color, rgba(0, 0, 0, .1));border-left-color:var(--st-loader-color);border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"] }]
|
|
10383
|
+
args: [{ selector: 'lib-smart-table', standalone: false, template: "<div class=\"smart-table-outer\">\n <!-- Table Card -->\n <div class=\"smart-table-wrapper\">\n <!-- Top Toolbar -->\n <div class=\"st-toolbar\" *ngIf=\"config.searchConfig?.enabled || (config.filters && config.filters.length > 0) || (config.topBarButtons && config.topBarButtons.length > 0)\">\n\n <!-- Search -->\n <div class=\"st-search\" *ngIf=\"config.searchConfig?.enabled\">\n <i class=\"fa fa-search\"></i>\n <input type=\"text\" [placeholder]=\"config.labels?.searchPlaceholder || 'Search'\" (input)=\"onSearch($event)\">\n </div>\n\n <!-- Filters -->\n <div class=\"st-filters\" *ngIf=\"config.filters\">\n <div class=\"st-filter-item\" *ngFor=\"let filter of config.filters\">\n <!-- Trigger -->\n <div class=\"st-filter-trigger\"\n [class.active]=\"openFilterKey === filter.key\"\n [class.has-value]=\"isFilterActive(filter)\"\n (click)=\"toggleFilter(filter.key, $event)\">\n <span class=\"st-filter-trigger-label\">{{ getFilterDisplay(filter) }}</span>\n <svg class=\"st-filter-chevron\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\n <path d=\"M2.5 4.5L6 8L9.5 4.5\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </div>\n </div>\n </div>\n\n <!-- Top Bar Buttons -->\n <div class=\"st-actions\" *ngIf=\"config.topBarButtons\">\n <lib-button *ngFor=\"let btn of config.topBarButtons\"\n [variant]=\"btn.btnVariant || 'primary'\"\n [icon]=\"btn.icon || ''\"\n (click)=\"onTopAction(btn)\">\n {{ btn.label }}\n </lib-button>\n </div>\n </div>\n\n <!-- Selection count strip \u2014 visible whenever selectable is enabled -->\n <div class=\"st-selection-strip\" *ngIf=\"config.selectable\">\n <span class=\"st-selection-count\">{{ selectedRows.length }} of {{ totalItems > 0 ? totalItems : data.length }} selected</span>\n </div>\n\n <!-- Table Container -->\n <div class=\"st-table-container\">\n <div class=\"st-check-loader\" *ngIf=\"loading\">\n <div class=\"spinner\"></div>\n </div>\n <table class=\"st-table\" [class.loading-data]=\"loading\" [class.is-selectable]=\"config.selectable\">\n <thead>\n <tr>\n <th *ngIf=\"config.selectable\" class=\"st-checkbox-col\">\n <input type=\"checkbox\" (change)=\"onSelectAll($event)\">\n </th>\n <th *ngFor=\"let col of config.columns; let colIndex = index\"\n #stickyHeader\n [class.sortable]=\"col.sortable\"\n [class.sticky-col]=\"col.sticky\"\n [class.first-data-col]=\"colIndex === 0\"\n [ngStyle]=\"stickyColumnStyles[col.key]\"\n (click)=\"onSort(col)\">\n {{ col.label }}\n <span *ngIf=\"col.sortable\" class=\"sort-icon-wrap\">\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\">\n <!-- Down arrow \u2014 RIGHT side, prominent when DESC -->\n <path d=\"M11.258 15.8153L14.5913 13.2699C14.7483 13.15 14.8364 12.9875 14.8364 12.818C14.8364 12.6486 14.7483 12.4861 14.5913 12.3662C14.4344 12.2464 14.2216 12.1791 13.9997 12.1791C13.7778 12.1791 13.5649 12.2464 13.408 12.3662L11.4997 13.8299V2.63636C11.4997 2.46758 11.4119 2.30572 11.2556 2.18638C11.0993 2.06704 10.8874 2 10.6663 2C10.4453 2 10.2334 2.06704 10.0771 2.18638C9.92081 2.30572 9.83301 2.46758 9.83301 2.63636V15.3635C9.83383 15.4891 9.88333 15.6117 9.97528 15.7159C10.0672 15.8201 10.1975 15.9012 10.3497 15.9489C10.4486 15.9845 10.557 16.002 10.6663 15.9998C10.776 16.0003 10.8847 15.9843 10.9863 15.9526C11.0878 15.9209 11.1801 15.8743 11.258 15.8153Z\"\n fill=\"black\" [attr.fill-opacity]=\"getDescOpacity(col.key)\"/>\n <!-- Up arrow \u2014 LEFT side, prominent when ASC -->\n <path d=\"M7.33316 16C7.11215 16 6.90019 15.933 6.74391 15.8136C6.58763 15.6942 6.49983 15.5324 6.49983 15.3636V4.16902L4.5915 5.63278C4.43458 5.75262 4.22175 5.81995 3.99983 5.81995C3.77791 5.81995 3.56508 5.75262 3.40816 5.63278C3.25124 5.51294 3.16309 5.3504 3.16309 5.18093C3.16309 5.01145 3.25124 4.84891 3.40816 4.72907L6.7415 2.18341C6.85868 2.0951 7.00749 2.03528 7.16915 2.01149C7.33081 1.98771 7.49807 2.00102 7.64983 2.04976C7.80201 2.0975 7.93228 2.17858 8.02423 2.28278C8.11617 2.38697 8.16567 2.50962 8.1665 2.63526V15.3636C8.1665 15.5324 8.0787 15.6942 7.92242 15.8136C7.76614 15.933 7.55418 16 7.33316 16Z\"\n fill=\"black\" [attr.fill-opacity]=\"getAscOpacity(col.key)\"/>\n </svg>\n </span>\n </th>\n <th *ngIf=\"config.actions && config.actions.length > 0\" class=\"st-actions-col\">\n {{ config.labels?.actionColumnHeader || 'Actions' }}\n </th>\n </tr>\n </thead>\n <tbody>\n <tr *ngFor=\"let row of data; let rowIndex = index\">\n <td *ngIf=\"config.selectable\" class=\"st-checkbox-col\">\n <input type=\"checkbox\" [(ngModel)]=\"row.selected\" (change)=\"onRowSelect(row)\">\n </td>\n <td *ngFor=\"let col of config.columns; let colIndex = index\"\n [class.sticky-col]=\"col.sticky\"\n [class.first-data-col]=\"colIndex === 0\"\n [ngStyle]=\"stickyColumnStyles[col.key]\"\n [class.clickable-cell]=\"col.clickAction\"\n (click)=\"onColumnClick(row, col)\">\n <!-- Text/Number/Date -->\n <span *ngIf=\"col.type !== 'custom' && col.type !== 'html' && col.type !== 'badge'\">\n {{ getCellValue(row, col) }}\n </span>\n <!-- HTML -->\n <div *ngIf=\"col.type === 'html'\" [innerHTML]=\"getCellValue(row, col)\"></div>\n <!-- Badge -->\n <span *ngIf=\"col.type === 'badge'\" class=\"st-badge\" [ngClass]=\"getBadgeClass(row, col)\">\n {{ getCellValue(row, col) }}\n </span>\n </td>\n\n <!-- Row Actions -->\n <td *ngIf=\"config.actions && config.actions.length > 0\" class=\"st-row-actions st-actions-col\">\n <div class=\"action-buttons\">\n <ng-container *ngFor=\"let action of config.actions; let i = index\">\n <ng-container *ngIf=\"action.type === 'dropdown'\">\n <div class=\"st-dropdown-container\" (click)=\"$event.stopPropagation()\">\n <button class=\"st-dropdown-btn\"\n [class.active]=\"openDropdownId === (rowIndex + '-' + i)\"\n (click)=\"toggleDropdown(rowIndex + '-' + i, $event, action.items, row)\">\n <span class=\"action-circle\">\n <i class=\"fa fa-ellipsis-h\"></i>\n </span>\n </button>\n </div>\n </ng-container>\n <ng-container *ngIf=\"action.type !== 'dropdown'\">\n <lib-button\n [variant]=\"action.btnVariant || 'secondary'\"\n [icon]=\"action.icon || ''\"\n (click)=\"onAction(action, row)\">\n {{ action.label }}\n </lib-button>\n </ng-container>\n </ng-container>\n </div>\n </td>\n </tr>\n <tr *ngIf=\"data.length === 0 && !loading\">\n <td [attr.colspan]=\"columnCount + (config.selectable ? 1 : 0) + (config.actions ? 1 : 0)\" class=\"no-data\">\n {{ config.labels?.noDataMessage || 'No data available' }}\n </td>\n </tr>\n </tbody>\n </table>\n </div>\n\n <!-- Pagination \u2014 inside the card, sticks to the bottom -->\n <div class=\"st-pagination\" *ngIf=\"showPagination\">\n <lib-pagination\n [totalItems]=\"totalItems\"\n [itemsPerPage]=\"config.pagination!.pageSize\"\n [currentPage]=\"currentPage\"\n [pageSizeOptions]=\"config.pagination!.pageSizeOptions\"\n (pageChange)=\"onPageChange($event)\"\n (itemsPerPageChange)=\"onPageSizeChange($event)\">\n </lib-pagination>\n </div>\n\n <!-- Built-in Delete Confirmation Modal -->\n <cc-confirmation-modal\n [isOpen]=\"deleteModalOpen\"\n [config]=\"deleteModalConfig\"\n (confirm)=\"onDeleteConfirm()\"\n (cancel)=\"onDeleteCancel()\"\n (close)=\"onDeleteCancel()\">\n <p>{{ deleteModalMessage }}</p>\n </cc-confirmation-modal>\n </div>\n</div>\n\n<!--\n Filter panel portal \u2014 position:fixed keeps it above all overflow/sticky containers.\n-->\n<div class=\"st-filter-panel\"\n *ngIf=\"openFilterKey !== null && activeFilterData\"\n [ngStyle]=\"{\n position: 'fixed',\n top: filterPosition.top + 'px',\n left: filterPosition.left + 'px',\n 'z-index': '99999'\n }\"\n (click)=\"$event.stopPropagation()\">\n <div class=\"st-filter-option\"\n [class.selected]=\"!isFilterActive(activeFilterData)\"\n (click)=\"selectFilterOption(activeFilterData, null)\">\n All {{ activeFilterData.label }}\n </div>\n <div class=\"st-filter-option\"\n *ngFor=\"let opt of getValidFilterOptions(activeFilterData)\"\n [class.selected]=\"activeFilters[activeFilterData.key] === opt.value\"\n (click)=\"selectFilterOption(activeFilterData, opt)\">\n {{ opt.label }}\n </div>\n</div>\n\n<!--\n Dropdown portal \u2014 rendered OUTSIDE every scroll/sticky container.\n position:fixed + z-index:99999 here is unconditionally above all sticky table cells.\n-->\n<div class=\"st-dropdown-menu st-dropdown-portal\"\n *ngIf=\"openDropdownId !== null && activeDropdownItems\"\n [ngStyle]=\"{\n position: 'fixed',\n top: dropdownPosition.top + 'px',\n right: dropdownPosition.right + 'px',\n left: 'auto',\n 'z-index': '99999'\n }\"\n (click)=\"$event.stopPropagation()\">\n <button class=\"st-dropdown-item\"\n *ngFor=\"let item of activeDropdownItems\"\n (click)=\"onActionItemClick(item, activeDropdownRow, $event); closeDropdown()\">\n <i *ngIf=\"item.icon\" [class]=\"item.icon + ' st-action-icon'\"></i>\n <span>{{ item.label }}</span>\n </button>\n</div>\n", styles: ["@charset \"UTF-8\";.smart-table-outer{display:flex;flex-direction:column;gap:0}.smart-table-wrapper{font-family:var(--st-font-family, \"Roboto\", sans-serif);background:var(--st-table-bg, #fff);border-radius:var(--st-border-radius, 8px);box-shadow:var(--st-box-shadow, 0 2px 8px rgba(0, 0, 0, .08));display:flex;flex-direction:column;gap:0;padding:0;border:none;margin-bottom:1.5rem}.st-toolbar{display:flex;justify-content:flex-start;align-items:center;flex-wrap:wrap;padding:var(--st-toolbar-padding, 1.2rem 0rem);background:var(--st-toolbar-bg, #fff);gap:var(--st-toolbar-gap, 1rem);border-bottom:var(--st-toolbar-border-bottom, 1px solid rgba(0, 0, 0, .08));box-shadow:#959da533 0 8px 24px}.st-toolbar .st-search{position:relative;display:flex;align-items:center;background:var(--st-search-bg, #f5f5f5);border-radius:var(--st-search-radius, 8px);padding:var(--st-search-wrapper-padding, 0 .875rem);height:var(--st-search-height, 36px);min-width:var(--st-search-min-width, 200px);width:var(--st-search-width, auto)}.st-toolbar .st-search input{padding:0 .5rem 0 1.5rem;border:none;background:transparent;font-size:var(--st-font-size, 14px);width:100%;color:var(--st-text-color, #333);outline:none;line-height:var(--st-search-height, 36px)}.st-toolbar .st-search input::placeholder{color:var(--st-search-placeholder-color, #999)}.st-toolbar .st-search i{position:absolute;left:.875rem;top:50%;transform:translateY(-50%);color:var(--st-search-icon-color, #888);font-size:13px;pointer-events:none}.st-toolbar .st-filters{display:flex;align-items:center;gap:.5rem}.st-toolbar .st-filters .st-filter-item{position:relative}.st-toolbar .st-filters .st-filter-trigger{display:flex;align-items:center;gap:6px;padding:var(--st-filter-trigger-padding, 0 .75rem);height:var(--st-filter-height, 36px);border:var(--st-filter-border, 1px solid #e0e0e0);border-radius:var(--st-filter-radius, 8px);cursor:pointer;font-size:var(--st-filter-font-size, 14px);color:var(--st-filter-color, #555);background:var(--st-filter-bg, #fff);transition:border-color .15s,background .15s;white-space:nowrap;-webkit-user-select:none;user-select:none}.st-toolbar .st-filters .st-filter-trigger:hover{border-color:var(--st-filter-hover-border-color, #bbb);background:var(--st-filter-hover-bg, #fafafa)}.st-toolbar .st-filters .st-filter-trigger.active{border-color:var(--st-filter-active-border-color, #999);background:var(--st-filter-hover-bg, #fafafa)}.st-toolbar .st-filters .st-filter-trigger.active .st-filter-chevron{transform:rotate(180deg)}.st-toolbar .st-filters .st-filter-trigger.has-value{color:var(--st-filter-selected-color, #222);font-weight:500;border-color:var(--st-filter-selected-border-color, #333)}.st-toolbar .st-filters .st-filter-trigger .st-filter-trigger-label{flex:1}.st-toolbar .st-filters .st-filter-trigger .st-filter-chevron{color:var(--st-filter-chevron-color, #999);flex-shrink:0;transition:transform .15s ease}.st-toolbar .st-actions{display:flex;gap:.5rem;margin-left:auto}.st-filter-panel{min-width:var(--st-filter-panel-min-width, 180px);background:var(--st-filter-panel-bg, #fff);border:var(--st-filter-panel-border, 1px solid #ebebeb);border-radius:var(--st-filter-panel-radius, 12px);box-shadow:var(--st-filter-panel-shadow, 0 8px 28px rgba(0, 0, 0, .12), 0 2px 8px rgba(0, 0, 0, .06));padding:var(--st-filter-panel-padding, 6px)}.st-filter-option{display:flex;align-items:center;padding:var(--st-filter-option-padding, 8px 12px);margin-bottom:.3rem;border-radius:var(--st-filter-option-radius, 7px);font-size:var(--st-filter-font-size, 14px);color:var(--st-filter-color, #333);cursor:pointer;transition:background .1s;white-space:nowrap}.st-filter-option:hover{background:var(--st-filter-option-hover-bg, #f5f5f5)}.st-filter-option.selected{background:var(--st-filter-option-selected-bg, #f0f0f0);font-weight:500;color:var(--st-filter-option-selected-color, #111)}.st-table-container{overflow-x:auto;overflow-y:visible;padding:0}.st-table-container::-webkit-scrollbar{width:var(--st-scrollbar-width, 8px);height:var(--st-scrollbar-height, 8px)}.st-table-container::-webkit-scrollbar-track{background:var(--st-scrollbar-track-bg, #f1f1f1);border-radius:var(--st-scrollbar-track-radius, 4px)}.st-table-container::-webkit-scrollbar-thumb{background:var(--st-scrollbar-thumb-bg, #c1c1c1);border-radius:var(--st-scrollbar-thumb-radius, 4px)}.st-table-container::-webkit-scrollbar-thumb:hover{background:var(--st-scrollbar-thumb-hover-bg, #a8a8a8)}.st-table-container.has-sticky-header .st-table thead th{position:sticky;top:0;z-index:10;background:var(--st-header-bg, #f5f5f5);box-shadow:0 1px 2px -1px #0000001a}.st-table-container table{width:100%;border-collapse:separate;border-spacing:0;font-size:var(--st-font-size, 14px)}.st-table-container table thead{background:var(--st-header-bg, #f5f5f5)}.st-table-container table thead th{padding:.4rem 1rem;text-align:left;color:var(--st-header-color, #333);font-weight:var(--st-header-weight, 500);font-size:var(--st-header-size, 14px);text-transform:var(--st-header-transform, none);border-top:none;border-bottom:none;white-space:nowrap}.st-table-container table thead th:first-child{border-top-left-radius:var(--st-border-radius, 8px)}.st-table-container table thead th:last-child{border-top-right-radius:var(--st-border-radius, 8px)}.st-table-container table thead th.sortable{cursor:pointer}.st-table-container table thead th.sortable:hover{opacity:.8}.st-table-container table thead th.st-checkbox-col{width:40px;background:var(--st-header-bg, #f5f5f5);position:sticky;left:0;z-index:3}.st-table-container table thead th.sticky-col{position:sticky;z-index:3;background:var(--st-header-bg, #f5f5f5)}.st-table-container table thead th.st-actions-col{width:100px;min-width:100px;max-width:100px;background:var(--st-header-bg, #f5f5f5);box-shadow:var(--st-actions-col-shadow, -4px 0 8px rgba(0, 0, 0, .06));text-align:center;position:sticky;right:0;z-index:4}.st-table-container table tbody tr{background:var(--st-row-bg, #fff)}.st-table-container table tbody tr td{padding:.5rem 1rem;color:var(--st-text-color, #333);vertical-align:middle;border-bottom:var(--st-row-border, 1px solid #eee);font-weight:400}.st-table-container table tbody tr td.st-checkbox-col{position:sticky;left:0;z-index:2}.st-table-container table tbody tr td.first-data-col{color:var(--st-text-color, #333);font-weight:500}.st-table-container table tbody tr td.sticky-col{position:sticky;z-index:2;background:var(--st-row-bg, #fff)}.st-table-container table tbody tr td.sticky-col:first-child{left:0}.st-table-container table tbody tr td.st-actions-col{width:100px;min-width:100px;max-width:100px;background:var(--st-frozen-col-bg, #f9f9f9);box-shadow:var(--st-actions-col-shadow, -4px 0 8px rgba(0, 0, 0, .06));text-align:center;position:sticky;right:0;z-index:2}.st-table-container table tbody tr:last-child td{border-bottom:none}.st-table-container table tbody tr:last-child td:first-child{border-bottom-left-radius:var(--st-border-radius, 8px)}.st-table-container table tbody tr:last-child td:last-child{border-bottom-right-radius:var(--st-border-radius, 8px)}.st-table-container table tbody tr:hover td{font-weight:500;background:var(--st-row-hover-bg, #f5f5f5)}.st-table-container table tbody tr:hover td.first-data-col{color:var(--st-first-col-color, #E84646)}.st-table-container table tbody tr.selected td,.st-table-container table tbody tr.selected td.sticky-col{background:var(--st-row-selected-bg, #f3e5f5)}.st-table-container table tbody tr .clickable-cell{cursor:pointer;transition:background .2s}.st-table-container table.is-selectable tbody td.first-data-col,.st-table-container table.is-selectable tbody td.first-data-col.sticky-col{background:var(--st-row-bg, #fff)}.st-table-container table.is-selectable tbody tr:hover td.first-data-col,.st-table-container table.is-selectable tbody tr:hover td.first-data-col.sticky-col{background:var(--st-row-hover-bg, #f5f5f5)}.st-table-container table.is-selectable tbody tr.selected td.first-data-col{background:var(--st-row-selected-bg, #f3e5f5)}.sort-icon-wrap{display:inline-flex;align-items:center;vertical-align:middle;flex-shrink:0;margin-left:4px;position:relative;top:-3px}.sort-icon-wrap svg{display:block}.st-selection-strip{display:flex;align-items:center;padding:var(--st-selection-strip-padding, .45rem 1rem);background:var(--st-selection-strip-bg, #fafafa);border-bottom:var(--st-selection-strip-border, 1px solid rgba(0, 0, 0, .08))}.st-selection-strip .st-selection-count{font-size:var(--st-selection-count-font-size, 13px);color:var(--st-selection-count-color, #444);font-weight:var(--st-selection-count-font-weight, 500)}input[type=checkbox]{accent-color:var(--st-checkbox-color, #e63e30);width:var(--st-checkbox-size, 16px);height:var(--st-checkbox-size, 16px);cursor:pointer}.st-badge{display:inline-block;padding:var(--st-badge-padding, 4px 12px);border-radius:var(--st-badge-radius, 12px);font-size:var(--st-badge-font-size, 12px);font-weight:var(--st-badge-font-weight, 500);text-align:center;white-space:nowrap}.st-badge.badge-success{background:var(--st-badge-success-bg, #e8f5e9);color:var(--st-badge-success-color, #2e7d32)}.st-badge.badge-warning{background:var(--st-badge-warning-bg, #fff3e0);color:var(--st-badge-warning-color, #ef6c00)}.st-badge.badge-danger{background:var(--st-badge-danger-bg, #ffebee);color:var(--st-badge-danger-color, #c62828)}.st-badge.badge-info{background:var(--st-badge-info-bg, #e3f2fd);color:var(--st-badge-info-color, #1565c0)}.st-badge.badge-neutral{background:var(--st-badge-neutral-bg, #f5f5f5);color:var(--st-badge-neutral-color, #616161)}.st-row-actions .action-buttons{display:flex;gap:.5rem;align-items:center;justify-content:center}.st-action-icon{margin-right:var(--st-action-icon-margin, 8px)}.st-dropdown-container{position:relative;display:inline-block}.st-dropdown-btn{background:transparent;border:none;cursor:pointer;padding:0;display:flex;align-items:center;justify-content:center}.st-dropdown-btn:hover .action-circle{background:#0000000f}.action-circle{display:inline-flex;align-items:center;justify-content:center;width:var(--st-action-circle-size, 32px);height:var(--st-action-circle-size, 32px);border-radius:50%;background:var(--st-table-bg, #fff);border:none;color:var(--st-text-color, #555);font-size:1rem;transition:background .15s}.st-dropdown-menu{min-width:var(--st-dropdown-min-width, 150px);background:var(--st-dropdown-bg, #fff);border:var(--st-dropdown-border, 1px solid #e0e0e0);border-radius:var(--st-dropdown-radius, 8px);box-shadow:var(--st-dropdown-shadow, 0 8px 24px rgba(0, 0, 0, .12));z-index:9999;display:flex;flex-direction:column;padding:var(--st-dropdown-padding, 4px);margin-top:4px}.st-dropdown-item{background:transparent;border:none;padding:var(--st-dropdown-item-padding, 8px 12px);border-radius:var(--st-dropdown-item-radius, 6px);text-align:left;cursor:pointer;display:flex;align-items:center;font-size:var(--st-font-size, 14px);color:var(--st-text-color, #333);transition:background .15s}.st-dropdown-item:hover{background:var(--st-dropdown-item-hover-bg, #f5f5f5)}.st-dropdown-item .st-action-icon{margin-right:8px;width:16px;text-align:center}.no-data{padding:2rem;color:var(--st-no-data-color, #888);text-align:center}.st-pagination{padding:var(--st-pagination-padding, .6rem 1rem);border-top:1px solid rgba(0,0,0,.07);background:var(--st-table-bg, #fff);border-bottom-left-radius:var(--st-border-radius, 8px);border-bottom-right-radius:var(--st-border-radius, 8px)}@media(max-width:768px){.st-toolbar{flex-direction:column;align-items:stretch}.st-toolbar .st-search,.st-toolbar .st-filters,.st-toolbar .st-actions,.st-toolbar .st-search input{width:100%}.st-table-container{font-size:13px}}.st-table-container{position:relative}.st-table-container .st-table.loading-data{opacity:.5;pointer-events:none}.st-table-container .st-check-loader{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;justify-content:center;align-items:center;z-index:10}.st-table-container .st-check-loader .spinner{width:40px;height:40px;border:4px solid var(--st-spinner-border-color, rgba(0, 0, 0, .1));border-left-color:var(--st-loader-color);border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"] }]
|
|
10343
10384
|
}], ctorParameters: () => [{ type: i3.HttpClient }, { type: i1$4.Router }, { type: i0.ChangeDetectorRef }, { type: i0.NgZone }], propDecorators: { config: [{
|
|
10344
10385
|
type: Input
|
|
10345
10386
|
}], tableData: [{
|