commons-shared-web-ui 0.0.12 → 0.0.13
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, Input, Component, EventEmitter, HostListener, Output, forwardRef, Directive, ViewChild, Injectable, inject, LOCALE_ID, ViewChildren } from '@angular/core';
|
|
2
|
+
import { NgModule, Input, Component, EventEmitter, HostListener, Output, forwardRef, Directive, ViewChild, Injectable, inject, HostBinding, 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 { MatCardModule } from '@angular/material/card';
|
|
@@ -26,6 +26,7 @@ import { MatProgressBarModule } from '@angular/material/progress-bar';
|
|
|
26
26
|
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
|
|
27
27
|
import * as i5 from '@angular/material/select';
|
|
28
28
|
import { MatSelectModule } from '@angular/material/select';
|
|
29
|
+
import * as i2$3 from '@angular/material/tooltip';
|
|
29
30
|
import { MatTooltipModule } from '@angular/material/tooltip';
|
|
30
31
|
import { MatSliderModule } from '@angular/material/slider';
|
|
31
32
|
import { MatListModule } from '@angular/material/list';
|
|
@@ -42,6 +43,7 @@ import { MatButtonToggleModule } from '@angular/material/button-toggle';
|
|
|
42
43
|
import * as i1$2 from '@angular/forms';
|
|
43
44
|
import { FormsModule, NG_VALUE_ACCESSOR, ReactiveFormsModule, Validators, FormControl, FormArray, FormGroup } from '@angular/forms';
|
|
44
45
|
import * as i1$1 from '@angular/router';
|
|
46
|
+
import { RouterModule } from '@angular/router';
|
|
45
47
|
import * as i2$1 from '@angular/cdk/scrolling';
|
|
46
48
|
import { CdkVirtualScrollViewport, ScrollingModule } from '@angular/cdk/scrolling';
|
|
47
49
|
import { Subject, BehaviorSubject, combineLatest, forkJoin, of } from 'rxjs';
|
|
@@ -5155,6 +5157,169 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
|
|
|
5155
5157
|
}]
|
|
5156
5158
|
}] });
|
|
5157
5159
|
|
|
5160
|
+
const DEFAULT_ITEMS_PER_PAGE = 10;
|
|
5161
|
+
const DEFAULT_PAGE_SIZE_OPTIONS = [10, 20, 50];
|
|
5162
|
+
const PAGINATION_THEME_DEFAULT = 'theme-1';
|
|
5163
|
+
const PAGINATION_THEME_DARK = 'theme-2';
|
|
5164
|
+
// Nav
|
|
5165
|
+
const NAV_VARIANT_DEFAULT = 'filled';
|
|
5166
|
+
const NAV_ORIENTATION_DEFAULT = 'horizontal';
|
|
5167
|
+
// Side Nav
|
|
5168
|
+
const DEFAULT_SIDE_NAV_TOOLTIP_POSITION = 'right';
|
|
5169
|
+
|
|
5170
|
+
class SideNavComponent {
|
|
5171
|
+
sections = [];
|
|
5172
|
+
userRoles; // If provided, filters items automatically based on roles
|
|
5173
|
+
activeId;
|
|
5174
|
+
styleConfig;
|
|
5175
|
+
/** Control whether the nav is collapsed externally (two-way bindable) */
|
|
5176
|
+
collapsed = false;
|
|
5177
|
+
/** Width of the nav when expanded. Overrides the CSS variable default. */
|
|
5178
|
+
width;
|
|
5179
|
+
/** Width of the nav when collapsed (icons only). Overrides the CSS variable default. */
|
|
5180
|
+
collapsedWidth;
|
|
5181
|
+
/** Whether to show the collapse toggle button */
|
|
5182
|
+
showCollapseToggle = true;
|
|
5183
|
+
/** Whether to hide icons when the side nav is expanded */
|
|
5184
|
+
hideIconsWhenExpanded = false;
|
|
5185
|
+
/** Whether to show tooltips on nav items */
|
|
5186
|
+
showTooltips = true;
|
|
5187
|
+
/** Position of the tooltip */
|
|
5188
|
+
tooltipPosition = DEFAULT_SIDE_NAV_TOOLTIP_POSITION;
|
|
5189
|
+
itemClicked = new EventEmitter();
|
|
5190
|
+
/** Emits whenever the collapsed state changes (supports two-way binding via [(collapsed)]) */
|
|
5191
|
+
collapsedChange = new EventEmitter();
|
|
5192
|
+
/** Applies collapsed class to :host for the width CSS transition */
|
|
5193
|
+
get isHostCollapsed() {
|
|
5194
|
+
return this.collapsed;
|
|
5195
|
+
}
|
|
5196
|
+
filteredSections = [];
|
|
5197
|
+
ngOnChanges(changes) {
|
|
5198
|
+
if (changes['sections'] || changes['userRoles']) {
|
|
5199
|
+
this.filterSections();
|
|
5200
|
+
}
|
|
5201
|
+
}
|
|
5202
|
+
filterSections() {
|
|
5203
|
+
if (!this.sections) {
|
|
5204
|
+
this.filteredSections = [];
|
|
5205
|
+
return;
|
|
5206
|
+
}
|
|
5207
|
+
if (!this.userRoles || this.userRoles.length === 0) {
|
|
5208
|
+
this.filteredSections = structuredClone(this.sections);
|
|
5209
|
+
return;
|
|
5210
|
+
}
|
|
5211
|
+
const clonedSections = structuredClone(this.sections);
|
|
5212
|
+
this.filteredSections = clonedSections.map(section => {
|
|
5213
|
+
section.items = section.items.filter(item => {
|
|
5214
|
+
if (!item.roles || item.roles.length === 0)
|
|
5215
|
+
return true;
|
|
5216
|
+
return item.roles.some(role => this.userRoles?.includes(role));
|
|
5217
|
+
});
|
|
5218
|
+
return section;
|
|
5219
|
+
}).filter(section => section.items.length > 0);
|
|
5220
|
+
}
|
|
5221
|
+
onItemClick(item, event) {
|
|
5222
|
+
if (item.disabled) {
|
|
5223
|
+
event.preventDefault();
|
|
5224
|
+
return;
|
|
5225
|
+
}
|
|
5226
|
+
this.activeId = item.id;
|
|
5227
|
+
this.itemClicked.emit(item);
|
|
5228
|
+
}
|
|
5229
|
+
toggleCollapse() {
|
|
5230
|
+
this.collapsed = !this.collapsed;
|
|
5231
|
+
this.collapsedChange.emit(this.collapsed);
|
|
5232
|
+
}
|
|
5233
|
+
get customStyles() {
|
|
5234
|
+
const styles = {};
|
|
5235
|
+
// Size overrides from direct inputs (take priority over styleConfig)
|
|
5236
|
+
if (this.width)
|
|
5237
|
+
styles['--cc-side-nav-width'] = this.width;
|
|
5238
|
+
if (this.collapsedWidth)
|
|
5239
|
+
styles['--cc-side-nav-collapsed-width'] = this.collapsedWidth;
|
|
5240
|
+
if (!this.styleConfig)
|
|
5241
|
+
return styles;
|
|
5242
|
+
if (this.styleConfig.bg)
|
|
5243
|
+
styles['--cc-side-nav-bg'] = this.styleConfig.bg;
|
|
5244
|
+
if (this.styleConfig.width)
|
|
5245
|
+
styles['--cc-side-nav-width'] = this.styleConfig.width;
|
|
5246
|
+
if (this.styleConfig.collapsedWidth)
|
|
5247
|
+
styles['--cc-side-nav-collapsed-width'] = this.styleConfig.collapsedWidth;
|
|
5248
|
+
if (this.styleConfig.fontFamily)
|
|
5249
|
+
styles['--cc-side-nav-font-family'] = this.styleConfig.fontFamily;
|
|
5250
|
+
if (this.styleConfig.headingColor)
|
|
5251
|
+
styles['--cc-side-nav-heading-color'] = this.styleConfig.headingColor;
|
|
5252
|
+
if (this.styleConfig.itemColor)
|
|
5253
|
+
styles['--cc-side-nav-item-color'] = this.styleConfig.itemColor;
|
|
5254
|
+
if (this.styleConfig.itemHoverBg)
|
|
5255
|
+
styles['--cc-side-nav-item-hover-bg'] = this.styleConfig.itemHoverBg;
|
|
5256
|
+
if (this.styleConfig.activeBg)
|
|
5257
|
+
styles['--cc-side-nav-active-bg'] = this.styleConfig.activeBg;
|
|
5258
|
+
if (this.styleConfig.activeColor)
|
|
5259
|
+
styles['--cc-side-nav-active-color'] = this.styleConfig.activeColor;
|
|
5260
|
+
if (this.styleConfig.activeHoverBg)
|
|
5261
|
+
styles['--cc-side-nav-active-hover-bg'] = this.styleConfig.activeHoverBg;
|
|
5262
|
+
return styles;
|
|
5263
|
+
}
|
|
5264
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SideNavComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
5265
|
+
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" }, 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$3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] });
|
|
5266
|
+
}
|
|
5267
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SideNavComponent, decorators: [{
|
|
5268
|
+
type: Component,
|
|
5269
|
+
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"] }]
|
|
5270
|
+
}], propDecorators: { sections: [{
|
|
5271
|
+
type: Input
|
|
5272
|
+
}], userRoles: [{
|
|
5273
|
+
type: Input
|
|
5274
|
+
}], activeId: [{
|
|
5275
|
+
type: Input
|
|
5276
|
+
}], styleConfig: [{
|
|
5277
|
+
type: Input
|
|
5278
|
+
}], collapsed: [{
|
|
5279
|
+
type: Input
|
|
5280
|
+
}], width: [{
|
|
5281
|
+
type: Input
|
|
5282
|
+
}], collapsedWidth: [{
|
|
5283
|
+
type: Input
|
|
5284
|
+
}], showCollapseToggle: [{
|
|
5285
|
+
type: Input
|
|
5286
|
+
}], hideIconsWhenExpanded: [{
|
|
5287
|
+
type: Input
|
|
5288
|
+
}], showTooltips: [{
|
|
5289
|
+
type: Input
|
|
5290
|
+
}], tooltipPosition: [{
|
|
5291
|
+
type: Input
|
|
5292
|
+
}], itemClicked: [{
|
|
5293
|
+
type: Output
|
|
5294
|
+
}], collapsedChange: [{
|
|
5295
|
+
type: Output
|
|
5296
|
+
}], isHostCollapsed: [{
|
|
5297
|
+
type: HostBinding,
|
|
5298
|
+
args: ['class.cc-side-nav-host-collapsed']
|
|
5299
|
+
}] } });
|
|
5300
|
+
|
|
5301
|
+
class SideNavModule {
|
|
5302
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SideNavModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
5303
|
+
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.15", ngImport: i0, type: SideNavModule, declarations: [SideNavComponent], imports: [CommonModule,
|
|
5304
|
+
RouterModule,
|
|
5305
|
+
MaterialModule], exports: [SideNavComponent] });
|
|
5306
|
+
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SideNavModule, imports: [CommonModule,
|
|
5307
|
+
RouterModule,
|
|
5308
|
+
MaterialModule] });
|
|
5309
|
+
}
|
|
5310
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SideNavModule, decorators: [{
|
|
5311
|
+
type: NgModule,
|
|
5312
|
+
args: [{
|
|
5313
|
+
declarations: [SideNavComponent],
|
|
5314
|
+
imports: [
|
|
5315
|
+
CommonModule,
|
|
5316
|
+
RouterModule,
|
|
5317
|
+
MaterialModule
|
|
5318
|
+
],
|
|
5319
|
+
exports: [SideNavComponent]
|
|
5320
|
+
}]
|
|
5321
|
+
}] });
|
|
5322
|
+
|
|
5158
5323
|
class SharedUiModule {
|
|
5159
5324
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SharedUiModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
5160
5325
|
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.15", ngImport: i0, type: SharedUiModule, imports: [CommonModule,
|
|
@@ -5163,24 +5328,28 @@ class SharedUiModule {
|
|
|
5163
5328
|
SummaryCardModule,
|
|
5164
5329
|
ConfigurableFormModule,
|
|
5165
5330
|
FormComponentsModule,
|
|
5166
|
-
SmartFormModule
|
|
5331
|
+
SmartFormModule,
|
|
5332
|
+
SideNavModule], exports: [MaterialModule,
|
|
5167
5333
|
AlertModule, ButtonModule, ConfirmationModalModule, FilterSidebarModule, FilterModule,
|
|
5168
5334
|
SummaryCardModule,
|
|
5169
5335
|
ConfigurableFormModule,
|
|
5170
5336
|
FormComponentsModule,
|
|
5171
|
-
SmartFormModule
|
|
5337
|
+
SmartFormModule,
|
|
5338
|
+
SideNavModule] });
|
|
5172
5339
|
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SharedUiModule, imports: [CommonModule,
|
|
5173
5340
|
MaterialModule,
|
|
5174
5341
|
AlertModule, ButtonModule, ConfirmationModalModule, FilterSidebarModule, FilterModule,
|
|
5175
5342
|
SummaryCardModule,
|
|
5176
5343
|
ConfigurableFormModule,
|
|
5177
5344
|
FormComponentsModule,
|
|
5178
|
-
SmartFormModule,
|
|
5345
|
+
SmartFormModule,
|
|
5346
|
+
SideNavModule, MaterialModule,
|
|
5179
5347
|
AlertModule, ButtonModule, ConfirmationModalModule, FilterSidebarModule, FilterModule,
|
|
5180
5348
|
SummaryCardModule,
|
|
5181
5349
|
ConfigurableFormModule,
|
|
5182
5350
|
FormComponentsModule,
|
|
5183
|
-
SmartFormModule
|
|
5351
|
+
SmartFormModule,
|
|
5352
|
+
SideNavModule] });
|
|
5184
5353
|
}
|
|
5185
5354
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SharedUiModule, decorators: [{
|
|
5186
5355
|
type: NgModule,
|
|
@@ -5193,7 +5362,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
|
|
|
5193
5362
|
SummaryCardModule,
|
|
5194
5363
|
ConfigurableFormModule,
|
|
5195
5364
|
FormComponentsModule,
|
|
5196
|
-
SmartFormModule
|
|
5365
|
+
SmartFormModule,
|
|
5366
|
+
SideNavModule
|
|
5197
5367
|
],
|
|
5198
5368
|
exports: [
|
|
5199
5369
|
MaterialModule,
|
|
@@ -5201,7 +5371,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
|
|
|
5201
5371
|
SummaryCardModule,
|
|
5202
5372
|
ConfigurableFormModule,
|
|
5203
5373
|
FormComponentsModule,
|
|
5204
|
-
SmartFormModule
|
|
5374
|
+
SmartFormModule,
|
|
5375
|
+
SideNavModule
|
|
5205
5376
|
],
|
|
5206
5377
|
}]
|
|
5207
5378
|
}] });
|
|
@@ -5394,14 +5565,6 @@ var configurableForm_examples = /*#__PURE__*/Object.freeze({
|
|
|
5394
5565
|
TARGET_GROUP_CONFIG: TARGET_GROUP_CONFIG
|
|
5395
5566
|
});
|
|
5396
5567
|
|
|
5397
|
-
const DEFAULT_ITEMS_PER_PAGE = 10;
|
|
5398
|
-
const DEFAULT_PAGE_SIZE_OPTIONS = [10, 20, 50];
|
|
5399
|
-
const PAGINATION_THEME_DEFAULT = 'theme-1';
|
|
5400
|
-
const PAGINATION_THEME_DARK = 'theme-2';
|
|
5401
|
-
// Nav
|
|
5402
|
-
const NAV_VARIANT_DEFAULT = 'filled';
|
|
5403
|
-
const NAV_ORIENTATION_DEFAULT = 'horizontal';
|
|
5404
|
-
|
|
5405
5568
|
class PaginationComponent {
|
|
5406
5569
|
totalItems = 0;
|
|
5407
5570
|
itemsPerPage = DEFAULT_ITEMS_PER_PAGE;
|
|
@@ -7877,5 +8040,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
|
|
|
7877
8040
|
* Generated bundle index. Do not edit.
|
|
7878
8041
|
*/
|
|
7879
8042
|
|
|
7880
|
-
export { AlertComponent, AlertModule, ButtonComponent, ButtonModule, CheckboxComponent, ConfigurableFormComponent, configurableForm_examples as ConfigurableFormExamples, ConfigurableFormModule, ConfirmationModalComponent, ConfirmationModalModule, DEFAULT_ITEMS_PER_PAGE, DEFAULT_PAGE_SIZE_OPTIONS, DatepickerComponent, DropdownComponent, ExpressionService, FilterComponent, FilterModule, FilterSidebarComponent, FilterSidebarModule, FormComponentsModule, InputComponent, MaterialModule, NAV_ORIENTATION_DEFAULT, NAV_VARIANT_DEFAULT, NavComponent, NavModule, PAGINATION_THEME_DARK, PAGINATION_THEME_DEFAULT, PaginationComponent, PaginationModule, RadioComponent, SearchComponent, SharedUiModule, SmartFormComponent, SmartFormController, smartForm_examples as SmartFormExamples, SmartFormModule, SmartTableComponent, SmartTableModule, SnackbarComponent, SnackbarModule, SnackbarService, StringUtils, SummaryCardComponent, SummaryCardModule, ToggleComponent, ValidationUtils, clearLocalStorage, clearSessionStorage, getLocalStorageItem, getSessionStorageItem, removeLocalStorageItem, removeSessionStorageItem, setLocalStorageItem, setSessionStorageItem, translateConfig };
|
|
8043
|
+
export { AlertComponent, AlertModule, ButtonComponent, ButtonModule, CheckboxComponent, ConfigurableFormComponent, configurableForm_examples as ConfigurableFormExamples, ConfigurableFormModule, ConfirmationModalComponent, ConfirmationModalModule, DEFAULT_ITEMS_PER_PAGE, DEFAULT_PAGE_SIZE_OPTIONS, DEFAULT_SIDE_NAV_TOOLTIP_POSITION, DatepickerComponent, DropdownComponent, ExpressionService, FilterComponent, FilterModule, FilterSidebarComponent, FilterSidebarModule, FormComponentsModule, InputComponent, MaterialModule, NAV_ORIENTATION_DEFAULT, NAV_VARIANT_DEFAULT, NavComponent, NavModule, PAGINATION_THEME_DARK, PAGINATION_THEME_DEFAULT, PaginationComponent, PaginationModule, RadioComponent, SearchComponent, SharedUiModule, SideNavComponent, SideNavModule, SmartFormComponent, SmartFormController, smartForm_examples as SmartFormExamples, SmartFormModule, SmartTableComponent, SmartTableModule, SnackbarComponent, SnackbarModule, SnackbarService, StringUtils, SummaryCardComponent, SummaryCardModule, ToggleComponent, ValidationUtils, clearLocalStorage, clearSessionStorage, getLocalStorageItem, getSessionStorageItem, removeLocalStorageItem, removeSessionStorageItem, setLocalStorageItem, setSessionStorageItem, translateConfig };
|
|
7881
8044
|
//# sourceMappingURL=commons-shared-web-ui.mjs.map
|