@sarasanalytics-com/design-system 0.0.122 → 0.0.123
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/esm2022/interfaces/left-nav-interface.mjs +1 -1
- package/esm2022/lib/left-nav/left-nav.component.mjs +3 -3
- package/esm2022/lib/menu/menu.component.mjs +5 -4
- package/fesm2022/sarasanalytics-com-design-system.mjs +6 -5
- package/fesm2022/sarasanalytics-com-design-system.mjs.map +1 -1
- package/interfaces/left-nav-interface.d.ts +2 -7
- package/lib/menu/menu.component.d.ts +1 -1
- package/package.json +1 -1
|
@@ -2184,11 +2184,12 @@ class SAMenuComponent {
|
|
|
2184
2184
|
onSearch(event) {
|
|
2185
2185
|
this.onEvent.emit({ type: 'SEARCH', value: event.target.value });
|
|
2186
2186
|
}
|
|
2187
|
-
setActiveTab(index) {
|
|
2187
|
+
setActiveTab(index, tabname) {
|
|
2188
2188
|
this.activeTabIndex = index; // Update the active tab index
|
|
2189
|
+
this.onEvent.emit({ type: 'TAB_CLICK', activeTab: tabname, menu: this.menu });
|
|
2189
2190
|
}
|
|
2190
2191
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: SAMenuComponent, deps: [{ token: i1$4.Overlay }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2191
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.4", type: SAMenuComponent, isStandalone: true, selector: "sa-menu", inputs: { position: "position", menu: "menu", hostEl: "hostEl" }, outputs: { onEvent: "onEvent", onKeyUpEvent: "onKeyUpEvent", closeEvent: "closeEvent" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"sa-menu\" [ngClass]=\"menu.showTray ? 'sa-menu-tray sa-round-border' : ''\"
|
|
2192
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.4", type: SAMenuComponent, isStandalone: true, selector: "sa-menu", inputs: { position: "position", menu: "menu", hostEl: "hostEl" }, outputs: { onEvent: "onEvent", onKeyUpEvent: "onKeyUpEvent", closeEvent: "closeEvent" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"sa-menu\" [ngClass]=\"menu.showTray ? 'sa-menu-tray sa-round-border' : ''\"\n [ngStyle]=\"{width: menu.width || 'max-content'}\">\n\n @if(menu?.title){\n <div class=\"sa-menu-title\">\n <h1>{{menu?.title}}</h1>\n <sa-icon [icon]=\"'closeOutlined'\" [size]=\"'20'\" class=\"sa-menu-close-icon\"\n (click)=\"closeEvent.emit($event)\"></sa-icon>\n </div>\n }\n\n @if(menu?.showSearch){\n <div class=\"search-container\">\n <sa-icon icon=\"search\"></sa-icon>\n <input class=\"search-input\" (keyup)=\"onSearch($event)\" type=\"text\" [placeholder]=\"menu.searchPlaceholder\" />\n <button *ngIf=\"menu?.showAddIcon\"><i class=\"fas fa-plus\"></i></button>\n </div>\n }\n\n <!-- @if(menu?.itemGroups && menu.itemGroups.length){\n @for (groupItem of menu.itemGroups; track groupItem) {\n <div class=\"sa-menu-group\">\n <h2>{{groupItem.groupTitle}}</h2>\n \n @for (item of groupItem.items; track $index) {\n <sa-menu-item [item]=\"item\" [showRound]=\"menu.showTray\" (click)=\"onMenuItemClick($event, item)\"></sa-menu-item>\n }\n </div>\n }\n } @else if(menu?.items && menu.items.length){\n <div class=\"sa-menu-items\">\n @for (item of menu.items; track item) {\n <sa-menu-item [item]=\"item\" (click)=\"onMenuItemClick($event, item)\"></sa-menu-item>\n }\n </div>\n } -->\n\n\n <!-- Tab Content or Item Groups -->\n <div class=\"sa-menu-content\" *ngIf=\"menu?.itemGroups?.length || menu?.tabs?.length\">\n <!-- Tabs -->\n @if(menu?.tabs){\n <div class=\"sa-menu-tabs\">\n <button *ngFor=\"let tab of menu.tabs; let i = index\" [class.active]=\"i === activeTabIndex\"\n (click)=\"setActiveTab(i,tab.label)\">\n {{ tab.label }}\n <!-- ({{ tab.itemGroups.length }}) -->\n </button>\n </div>\n }\n <!-- Tabs End -->\n\n @if(menu?.tabs?.length){\n @if(menu.tabs[activeTabIndex]?.itemGroups?.length){\n <ng-container *ngFor=\"let groupItem of menu.tabs[activeTabIndex].itemGroups\">\n <div class=\"sa-menu-group\">\n <h2>{{groupItem.groupTitle}}</h2>\n <ng-container *ngFor=\"let item of groupItem.items\">\n <sa-menu-item [item]=\"item\" [showRound]=\"menu.showTray\"\n (click)=\"onMenuItemClick($event, item)\"></sa-menu-item>\n </ng-container>\n </div>\n </ng-container>\n }\n } @else if(menu?.itemGroups?.length){\n <ng-container *ngFor=\"let groupItem of menu.itemGroups\">\n <div class=\"sa-menu-group\">\n <h2>{{groupItem.groupTitle}}</h2>\n <ng-container *ngFor=\"let item of groupItem.items\">\n <sa-menu-item [item]=\"item\" [showRound]=\"menu.showTray\"\n (click)=\"onMenuItemClick($event, item)\"></sa-menu-item>\n </ng-container>\n </div>\n </ng-container>\n }\n </div>\n\n @if(menu?.items && menu.items.length){\n <div class=\"sa-menu-items\">\n @for (item of menu.items; track item) {\n <sa-menu-item [item]=\"item\" (click)=\"onMenuItemClick($event, item)\"></sa-menu-item>\n }\n </div>\n }\n\n</div>", styles: [".sa-menu{background-color:var(--primary-900);box-shadow:3px 4px 16px 4px #00000014;width:max-content;color:#fff;overflow-y:auto;max-height:100%}.sa-round-border{border-radius:8px}.sa-menu-tray{height:calc(100vh - 16px);margin-top:8px;border-top-left-radius:0;border-bottom-left-radius:0;background:var(--grey-700, #1D2939);padding:0 1rem 1rem}sa-menu-item{cursor:pointer;display:block}.sa-menu-title{display:flex;justify-content:space-between;align-items:center;position:fixed;padding:1rem 0 .5rem;height:64px;width:calc(100% - 2rem);border-bottom:1px solid var(--primary-50, #F4EBFF);background:var(--grey-700, #1D2939)}.sa-menu-title h1{color:var(--grey-100, #EAECF0);font-family:var(--font-family, Roboto);font-size:16px;font-style:normal;font-weight:400;line-height:24px;letter-spacing:.5px;margin-bottom:0;margin-top:0}.sa-menu-close-icon{cursor:pointer;margin-left:auto;height:20px}.search-container{position:relative;display:flex;align-items:center;margin-bottom:1rem}.search-container input{flex:1;padding:.5rem .5rem .5rem 2rem;background-color:#4a5568;border-radius:.25rem;font-size:.875rem;border:none;outline:none;color:#fff;box-sizing:border-box}.search-container .search-icon{position:absolute;left:.5rem;font-size:1rem;color:#888;pointer-events:none}.search-container button{margin-left:.5rem;background-color:#6b46c1;padding:.5rem;border-radius:.25rem;border:none;cursor:pointer}.sa-menu-group{margin-bottom:1rem;padding-bottom:.8rem;border-bottom:1px solid #ccc}.sa-menu-group:last-child{border-bottom:none}.sa-menu-group h2{color:var(--grey-300, #D0D5DD);font-family:var(--font-family, Roboto);font-size:11px;font-style:normal;font-weight:400;line-height:16px;letter-spacing:.5px;text-transform:uppercase;margin-bottom:.5rem}.MenuBar{width:max-content;margin-top:8px;background-color:var(--grey-400);border-top-left-radius:0;border-bottom-left-radius:0;background-color:#2d3748;padding:0}.sa-menu-tabs{display:flex;border-bottom:1px solid #ccc;margin-bottom:1rem}.sa-menu-tabs button{flex:1;padding:.5rem 1rem;background:none;border:none;cursor:pointer;font-size:12px;font-style:normal;font-weight:400;line-height:16px;color:#888;border-bottom:2px solid transparent;transition:all .5s ease}.sa-menu-tabs button.active{color:#f7f3f3;border-bottom:2px solid #f7f7f7;font-size:12px;font-style:normal;font-weight:600;line-height:16px;letter-spacing:.5px}.sa-menu-content{padding:5rem 0}.sa-menu-group{margin-bottom:1rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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: "component", type: SAMenuItemComponent, selector: "sa-menu-item", inputs: ["item", "showRound"] }, { kind: "component", type: IconComponent, selector: "sa-icon", inputs: ["img", "icon", "size", "color", "iconPath", "iconUrl", "customClass", "href", "hrefTarget"], outputs: ["onClickEvent"] }] }); }
|
|
2192
2193
|
}
|
|
2193
2194
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: SAMenuComponent, decorators: [{
|
|
2194
2195
|
type: Component,
|
|
@@ -2199,7 +2200,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImpor
|
|
|
2199
2200
|
MatMenuItem,
|
|
2200
2201
|
ChipsComponent,
|
|
2201
2202
|
IconComponent
|
|
2202
|
-
], template: "<div class=\"sa-menu\" [ngClass]=\"menu.showTray ? 'sa-menu-tray sa-round-border' : ''\"
|
|
2203
|
+
], template: "<div class=\"sa-menu\" [ngClass]=\"menu.showTray ? 'sa-menu-tray sa-round-border' : ''\"\n [ngStyle]=\"{width: menu.width || 'max-content'}\">\n\n @if(menu?.title){\n <div class=\"sa-menu-title\">\n <h1>{{menu?.title}}</h1>\n <sa-icon [icon]=\"'closeOutlined'\" [size]=\"'20'\" class=\"sa-menu-close-icon\"\n (click)=\"closeEvent.emit($event)\"></sa-icon>\n </div>\n }\n\n @if(menu?.showSearch){\n <div class=\"search-container\">\n <sa-icon icon=\"search\"></sa-icon>\n <input class=\"search-input\" (keyup)=\"onSearch($event)\" type=\"text\" [placeholder]=\"menu.searchPlaceholder\" />\n <button *ngIf=\"menu?.showAddIcon\"><i class=\"fas fa-plus\"></i></button>\n </div>\n }\n\n <!-- @if(menu?.itemGroups && menu.itemGroups.length){\n @for (groupItem of menu.itemGroups; track groupItem) {\n <div class=\"sa-menu-group\">\n <h2>{{groupItem.groupTitle}}</h2>\n \n @for (item of groupItem.items; track $index) {\n <sa-menu-item [item]=\"item\" [showRound]=\"menu.showTray\" (click)=\"onMenuItemClick($event, item)\"></sa-menu-item>\n }\n </div>\n }\n } @else if(menu?.items && menu.items.length){\n <div class=\"sa-menu-items\">\n @for (item of menu.items; track item) {\n <sa-menu-item [item]=\"item\" (click)=\"onMenuItemClick($event, item)\"></sa-menu-item>\n }\n </div>\n } -->\n\n\n <!-- Tab Content or Item Groups -->\n <div class=\"sa-menu-content\" *ngIf=\"menu?.itemGroups?.length || menu?.tabs?.length\">\n <!-- Tabs -->\n @if(menu?.tabs){\n <div class=\"sa-menu-tabs\">\n <button *ngFor=\"let tab of menu.tabs; let i = index\" [class.active]=\"i === activeTabIndex\"\n (click)=\"setActiveTab(i,tab.label)\">\n {{ tab.label }}\n <!-- ({{ tab.itemGroups.length }}) -->\n </button>\n </div>\n }\n <!-- Tabs End -->\n\n @if(menu?.tabs?.length){\n @if(menu.tabs[activeTabIndex]?.itemGroups?.length){\n <ng-container *ngFor=\"let groupItem of menu.tabs[activeTabIndex].itemGroups\">\n <div class=\"sa-menu-group\">\n <h2>{{groupItem.groupTitle}}</h2>\n <ng-container *ngFor=\"let item of groupItem.items\">\n <sa-menu-item [item]=\"item\" [showRound]=\"menu.showTray\"\n (click)=\"onMenuItemClick($event, item)\"></sa-menu-item>\n </ng-container>\n </div>\n </ng-container>\n }\n } @else if(menu?.itemGroups?.length){\n <ng-container *ngFor=\"let groupItem of menu.itemGroups\">\n <div class=\"sa-menu-group\">\n <h2>{{groupItem.groupTitle}}</h2>\n <ng-container *ngFor=\"let item of groupItem.items\">\n <sa-menu-item [item]=\"item\" [showRound]=\"menu.showTray\"\n (click)=\"onMenuItemClick($event, item)\"></sa-menu-item>\n </ng-container>\n </div>\n </ng-container>\n }\n </div>\n\n @if(menu?.items && menu.items.length){\n <div class=\"sa-menu-items\">\n @for (item of menu.items; track item) {\n <sa-menu-item [item]=\"item\" (click)=\"onMenuItemClick($event, item)\"></sa-menu-item>\n }\n </div>\n }\n\n</div>", styles: [".sa-menu{background-color:var(--primary-900);box-shadow:3px 4px 16px 4px #00000014;width:max-content;color:#fff;overflow-y:auto;max-height:100%}.sa-round-border{border-radius:8px}.sa-menu-tray{height:calc(100vh - 16px);margin-top:8px;border-top-left-radius:0;border-bottom-left-radius:0;background:var(--grey-700, #1D2939);padding:0 1rem 1rem}sa-menu-item{cursor:pointer;display:block}.sa-menu-title{display:flex;justify-content:space-between;align-items:center;position:fixed;padding:1rem 0 .5rem;height:64px;width:calc(100% - 2rem);border-bottom:1px solid var(--primary-50, #F4EBFF);background:var(--grey-700, #1D2939)}.sa-menu-title h1{color:var(--grey-100, #EAECF0);font-family:var(--font-family, Roboto);font-size:16px;font-style:normal;font-weight:400;line-height:24px;letter-spacing:.5px;margin-bottom:0;margin-top:0}.sa-menu-close-icon{cursor:pointer;margin-left:auto;height:20px}.search-container{position:relative;display:flex;align-items:center;margin-bottom:1rem}.search-container input{flex:1;padding:.5rem .5rem .5rem 2rem;background-color:#4a5568;border-radius:.25rem;font-size:.875rem;border:none;outline:none;color:#fff;box-sizing:border-box}.search-container .search-icon{position:absolute;left:.5rem;font-size:1rem;color:#888;pointer-events:none}.search-container button{margin-left:.5rem;background-color:#6b46c1;padding:.5rem;border-radius:.25rem;border:none;cursor:pointer}.sa-menu-group{margin-bottom:1rem;padding-bottom:.8rem;border-bottom:1px solid #ccc}.sa-menu-group:last-child{border-bottom:none}.sa-menu-group h2{color:var(--grey-300, #D0D5DD);font-family:var(--font-family, Roboto);font-size:11px;font-style:normal;font-weight:400;line-height:16px;letter-spacing:.5px;text-transform:uppercase;margin-bottom:.5rem}.MenuBar{width:max-content;margin-top:8px;background-color:var(--grey-400);border-top-left-radius:0;border-bottom-left-radius:0;background-color:#2d3748;padding:0}.sa-menu-tabs{display:flex;border-bottom:1px solid #ccc;margin-bottom:1rem}.sa-menu-tabs button{flex:1;padding:.5rem 1rem;background:none;border:none;cursor:pointer;font-size:12px;font-style:normal;font-weight:400;line-height:16px;color:#888;border-bottom:2px solid transparent;transition:all .5s ease}.sa-menu-tabs button.active{color:#f7f3f3;border-bottom:2px solid #f7f7f7;font-size:12px;font-style:normal;font-weight:600;line-height:16px;letter-spacing:.5px}.sa-menu-content{padding:5rem 0}.sa-menu-group{margin-bottom:1rem}\n"] }]
|
|
2203
2204
|
}], ctorParameters: () => [{ type: i1$4.Overlay }], propDecorators: { position: [{
|
|
2204
2205
|
type: Input
|
|
2205
2206
|
}], menu: [{
|
|
@@ -2489,7 +2490,7 @@ class LeftNavComponent {
|
|
|
2489
2490
|
});
|
|
2490
2491
|
}
|
|
2491
2492
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: LeftNavComponent, deps: [{ token: i1$5.ActivatedRoute }, { token: i1$5.Router }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2492
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.4", type: LeftNavComponent, isStandalone: true, selector: "sa-left-nav", inputs: { config: "config" }, outputs: { clickEvent: "clickEvent", hoverEvent: "hoverEvent", onEvent: "onEvent" }, ngImport: i0, template: "<div class=\"sa-left-nav\" >\n\n <div class=\"sa-left-nav-container {{isMenuAttached() ? 'menu-attached' : ''}}\">\n <div class=\"sa-left-nav-logo\">\n <sa-icon (click)=\"onLogoClick($event, config?.logo)\" [matTooltip]=\"config?.logo?.tooltip\" [matTooltipPosition]=\"'right'\" [icon]=\"config?.logo?.icon\" [size]=\"config?.logo?.size\"></sa-icon>\n </div>\n <div class=\"sa-left-nav-items-container\">\n @if(config && config?.items && !!config?.items?.length){\n <div class=\"sa-left-nav-items-group\">\n <ng-container *ngFor=\"let item of config?.items; let i = index\">\n <div class=\"sa-left-nav-items\">\n <div class=\"sa-left-nav-item\" [ngClass]=\"item.active ? 'active' : '' \"\n [saMenu]=\"item.menu\" (onEvent)=\"onEvent.emit($event)\" (onMenuEvent)=\"onMenuEvent($event)\"\n (onAttached)=\"onMenuAttached($event, 'nav', item, i)\" (onDetached)=\"onMenuDetached($event, 'nav', item, i)\"\n (click)=\"onNavItemClick(item, i, $event)\" (mouseenter)=\"onNavItemBlur(item,i,$event,tooltip)\"\n #tooltip=\"matTooltip\" [matTooltip]=\"item.tooltip\" matTooltipPosition=\"right\">\n\n <sa-icon class=\"sa-left-nav-item-icon\" [icon]=\"item.icon\" [size]=\"item.iconSize || '24'\" [color]=\"item.color || 'white'\"></sa-icon>\n <!-- <span>{{item.tooltip}}</span> -->\n <!-- <span class=\"sa-left-nav-item-icon\"\n [ngStyle]=\"{ 'background-image': 'url(' + item.icon_url + ')' }\"></span> -->\n </div>\n <p class=\"sa-icon-label\">{{item.iconLabel}}</p>\n </div>\n </ng-container>\n </div>\n }\n </div>\n <div class=\"sa-template-item-container\">\n @if(config && config.templateItems && !!config.templateItems.length){\n <div (click)=\"onTemplateItemClick($event, i, item)\" class=\"sa-template-item\" [ngClass]=\"item.className\" *ngFor=\"let item of config.templateItems; let i = index\">\n <sa-icon [matTooltip]=\"item.tooltip\" matTooltipPosition=\"right\" [icon]=\"item.icon\" [size]=\"item.iconSize || '24'\" [color]=\"item.color\"></sa-icon>\n </div>\n }\n </div>\n <div class=\"sa-left-nav-footer\">\n @if(config && config.footerItems && !!config.footerItems.length){\n <div class=\"sa-left-nav-footer-container\">\n <div class=\"sa-left-nav-footer-item\" [ngClass]=\"item.className\" *ngFor=\"let item of config.footerItems; let i = index\">\n <div class=\"footer-item-icon\" [ngClass]=\"item.active ? 'active' : '' \"\n (click)=\"onFooterItemClick(item, i, $event)\"\n [saMenu]=\"item.menu\" (onAttached)=\"onMenuAttached($event, 'footer', item, i)\" (onDetached)=\"onMenuDetached($event, 'footer', item, i)\"\n (mouseenter)=\"onFooterItemBlur(item,i,$event,tooltip)\" #tooltip=\"matTooltip\"\n [matTooltip]=\"item.tooltip\" matTooltipPosition=\"right\">\n @if(item.type === 'AVATAR'){\n <!-- <span class=\"sa-left-nav-footer-name\">ET</span> -->\n <sa-avatar [altText]=\"item.altText\" [imagePath]=\"''\" size=\"extra-small\"></sa-avatar>\n }@else{\n <sa-icon class=\"sa-left-nav-footer-icon\" [icon]=\"item.icon\" size=\"24\" color=\"white\"></sa-icon>\n <!-- <span class=\"sa-left-nav-footer-icon\"\n [ngStyle]=\"{ 'background-image': 'url(' + item.icon_url || '' + ')' }\"></span> -->\n }\n </div>\n <p class=\"sa-icon-label\">{{item.iconLabel}}</p>\n </div>\n </div>\n }\n </div>\n </div>\n\n <div class=\"sa-left-nav-content\">\n <ng-content></ng-content>\n </div>\n\n</div>", styles: [".sa-left-nav{height:calc(100vh - 16px);padding:8px;display:flex}.sa-left-nav-logo{display:flex;align-items:center;justify-content:center;width:40px;margin:auto;padding:5px 0;border-bottom:1px #fff solid;min-height:48px}.sa-logo{height:40px;width:20px;display:block;margin:auto;background-position:center;background:url('data:image/svg+xml,<svg viewBox=\"0 0 20 38\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M15.554 13.549c-.05 0-.101 0-.152-.003v.003s-.541-.013-2.395-.024c-3.047-.026-4.175 1.237-4.532 1.816H8.47c-.26.49-.332 1.061-.202 1.603l-.004.01c.02.13.303 1.624 2.762 1.573 1.971-.042 3.15-.165 3.626-.225a3.881 3.881 0 0 1 1.815.004c.596.145 1.152.43 1.623.831.472.402.846.91 1.093 1.484a4.156 4.156 0 0 1-.158 3.617 4.037 4.037 0 0 1-1.22 1.377 3.883 3.883 0 0 1-3.498.516c-.29-.068-.68-.169-1.207-.315-3.167-.789-4.906 4.081-4.906 4.081l-.006.005a4.069 4.069 0 0 1-1.244 1.785 3.926 3.926 0 0 1-1.968.866 3.888 3.888 0 0 1-2.12-.307c-.667-.3-1.24-.78-1.658-1.39a4.153 4.153 0 0 1-.273-4.216 4.033 4.033 0 0 1 1.463-1.6 3.904 3.904 0 0 1 2.408-.576c.44-.004 1.353 0 3.19.032 3.136.057 3.556-1.442 3.596-2.056 0-.058-.003-.116-.003-.173v-.083a2.288 2.288 0 0 0-.448-1.238 2.204 2.204 0 0 0-1.048-.768c-1.543-.684-5.413-.377-5.413-.377v-.005a3.893 3.893 0 0 1-1.805-.345 3.978 3.978 0 0 1-1.33-.985 4.093 4.093 0 0 1-.829-1.453 4.162 4.162 0 0 1 .308-3.277 4.04 4.04 0 0 1 1.084-1.264c.443-.34.95-.58 1.49-.707a3.882 3.882 0 0 1 1.643-.03c1.257.082 2.52.034 3.768-.144 2.02-.254 2.48-1.434 2.58-2.079V9.48c0-.805.233-1.592.67-2.261a3.996 3.996 0 0 1 1.782-1.5 3.886 3.886 0 0 1 2.296-.23c.77.156 1.478.544 2.034 1.113.556.57.934 1.294 1.087 2.084.154.789.075 1.607-.226 2.35a4.05 4.05 0 0 1-1.463 1.827 3.906 3.906 0 0 1-2.207.686h.003ZM4.476 9.043a3.906 3.906 0 0 1-2.207-.686A4.05 4.05 0 0 1 .806 6.531 4.161 4.161 0 0 1 .58 4.18a4.1 4.1 0 0 1 1.087-2.084A3.945 3.945 0 0 1 3.7.982a3.885 3.885 0 0 1 2.295.232c.726.308 1.347.83 1.783 1.499.437.67.67 1.456.67 2.26a4.12 4.12 0 0 1-1.164 2.878 3.926 3.926 0 0 1-2.809 1.192Z\" fill=\"%23fff\"/><path d=\"M15.531 37.095c2.194 0 3.973-1.822 3.973-4.07 0-2.246-1.779-4.068-3.973-4.068s-3.972 1.822-3.972 4.069 1.779 4.069 3.972 4.069Z\" fill=\"%23fff\"/></svg>') no-repeat}.sa-left-nav-container{height:inherit;width:64px;background-color:var(--primary-800, #42307D);border-radius:var(--small-8px, 8px) var(--small-8px, 8px);padding:16px 6px;box-sizing:border-box;display:flex;flex-direction:column;justify-content:space-evenly}.sa-left-nav-container.menu-attached{border-radius:var(--small-8px, 8px) 0 0 var(--small-8px, 8px)}.sa-left-nav-items{flex:1;overflow-y:auto}.sa-left-nav-items-container{padding:var(--medium-28px) 0;height:100%;overflow:auto;box-sizing:border-box}.sa-left-nav-items-group{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:var(--small-8px, 8px);align-self:stretch}.sa-left-nav-items{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:var(--small-2px, 2px);align-self:stretch}.sa-left-nav-item,.sa-left-nav-footer-item .footer-item-icon{height:40px;width:40px;margin:0 auto;cursor:pointer;border-radius:4px;display:flex;flex-direction:column;justify-content:center;align-items:center}.sa-icon-label{color:var(--icon-white,#fff);font-size:var(--small-10px,10px);text-align:center;margin:0}::-webkit-scrollbar{display:none}.sa-left-nav-footer-item{margin:0 auto;gap:var(--small-2px, 2px);display:flex;flex-direction:column;align-items:center}.sa-left-nav-item:hover,.sa-left-nav-item.active,.sa-left-nav-footer-item .footer-item-icon.active,.sa-left-nav-footer-item .footer-item-icon:hover{background-color:var(--primary-500)}.sa-left-nav-item-name,.sa-left-nav-item-icon,.sa-left-nav-footer-icon,.sa-left-nav-footer-name{height:24px;width:24px;display:block}.sa-left-nav-item-name,mn.sa-left-nav-footer-name{display:flex;justify-content:center;align-items:center}.sa-left-nav-footer{min-height:fit-content;border-top:1px solid #fff}.sa-left-nav-content{width:calc(100% - 64px)}.sa-template-item-container{margin-bottom:.8rem;display:flex;justify-content:center}.sa-left-nav-footer-container{display:flex;flex-direction:column;align-items:center;gap:var(--small-16px, 16px);align-self:stretch;margin-top:var(--small-16px, 16px)}.sa-template-item-container{display:flex;flex-direction:column;align-items:center;gap:var(--small-8px, 8px)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: AvatarComponent, selector: "sa-avatar", inputs: ["id", "imagePath", "altText", "size"], outputs: ["onClickEvent", "onMouseInEvent", "onMouseOutEvent"] }, { kind: "component", type: IconComponent, selector: "sa-icon", inputs: ["img", "icon", "size", "color", "iconPath", "iconUrl", "customClass", "href", "hrefTarget"], outputs: ["onClickEvent"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: MenuDirective, selector: "[saMenu]", inputs: ["saMenuRef", "saMenu", "saManuPosition"], outputs: ["onMenuEvent", "onEvent", "onAttached", "onDetached"] }] }); }
|
|
2493
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.4", type: LeftNavComponent, isStandalone: true, selector: "sa-left-nav", inputs: { config: "config" }, outputs: { clickEvent: "clickEvent", hoverEvent: "hoverEvent", onEvent: "onEvent" }, ngImport: i0, template: "<div class=\"sa-left-nav\" >\n\n <div class=\"sa-left-nav-container {{isMenuAttached() ? 'menu-attached' : ''}}\">\n <div class=\"sa-left-nav-logo\">\n <sa-icon (click)=\"onLogoClick($event, config?.logo)\" [matTooltip]=\"config?.logo?.tooltip\" [matTooltipPosition]=\"'right'\" [icon]=\"config?.logo?.icon\" [size]=\"config?.logo?.iconSize\"></sa-icon>\n </div>\n <div class=\"sa-left-nav-items-container\">\n @if(config && config?.items && !!config?.items?.length){\n <div class=\"sa-left-nav-items-group\">\n <ng-container *ngFor=\"let item of config?.items; let i = index\">\n <div class=\"sa-left-nav-items\">\n <div class=\"sa-left-nav-item\" [ngClass]=\"item.active ? 'active' : '' \"\n [saMenu]=\"item.menu\" (onEvent)=\"onEvent.emit($event)\" (onMenuEvent)=\"onMenuEvent($event)\"\n (onAttached)=\"onMenuAttached($event, 'nav', item, i)\" (onDetached)=\"onMenuDetached($event, 'nav', item, i)\"\n (click)=\"onNavItemClick(item, i, $event)\" (mouseenter)=\"onNavItemBlur(item,i,$event,tooltip)\"\n #tooltip=\"matTooltip\" [matTooltip]=\"item.tooltip\" matTooltipPosition=\"right\">\n\n <sa-icon class=\"sa-left-nav-item-icon\" [icon]=\"item.icon\" [size]=\"item.iconSize || '24'\" [color]=\"item.color || 'white'\"></sa-icon>\n <!-- <span>{{item.tooltip}}</span> -->\n <!-- <span class=\"sa-left-nav-item-icon\"\n [ngStyle]=\"{ 'background-image': 'url(' + item.icon_url + ')' }\"></span> -->\n </div>\n <p class=\"sa-icon-label\">{{item.iconLabel}}</p>\n </div>\n </ng-container>\n </div>\n }\n </div>\n <div class=\"sa-template-item-container\">\n @if(config && config.templateItems && !!config.templateItems.length){\n <div (click)=\"onTemplateItemClick($event, i, item)\" class=\"sa-template-item\" [ngClass]=\"item.className\" *ngFor=\"let item of config.templateItems; let i = index\">\n <sa-icon [matTooltip]=\"item.tooltip\" matTooltipPosition=\"right\" [icon]=\"item.icon\" [size]=\"item.iconSize || '24'\" [color]=\"item.color\"></sa-icon>\n </div>\n }\n </div>\n <div class=\"sa-left-nav-footer\">\n @if(config && config.footerItems && !!config.footerItems.length){\n <div class=\"sa-left-nav-footer-container\">\n <div class=\"sa-left-nav-footer-item\" [ngClass]=\"item.className\" *ngFor=\"let item of config.footerItems; let i = index\">\n <div class=\"footer-item-icon\" [ngClass]=\"item.active ? 'active' : '' \"\n (click)=\"onFooterItemClick(item, i, $event)\"\n [saMenu]=\"item.menu\" (onAttached)=\"onMenuAttached($event, 'footer', item, i)\" (onDetached)=\"onMenuDetached($event, 'footer', item, i)\"\n (mouseenter)=\"onFooterItemBlur(item,i,$event,tooltip)\" #tooltip=\"matTooltip\"\n [matTooltip]=\"item.tooltip\" matTooltipPosition=\"right\">\n @if(item.type === 'AVATAR'){\n <!-- <span class=\"sa-left-nav-footer-name\">ET</span> -->\n <sa-avatar [altText]=\"item.altText\" [imagePath]=\"''\" size=\"extra-small\"></sa-avatar>\n }@else{\n <sa-icon class=\"sa-left-nav-footer-icon\" [icon]=\"item.icon\" size=\"24\" color=\"white\"></sa-icon>\n <!-- <span class=\"sa-left-nav-footer-icon\"\n [ngStyle]=\"{ 'background-image': 'url(' + item.icon_url || '' + ')' }\"></span> -->\n }\n </div>\n <p class=\"sa-icon-label\">{{item.iconLabel}}</p>\n </div>\n </div>\n }\n </div>\n </div>\n\n <div class=\"sa-left-nav-content\">\n <ng-content></ng-content>\n </div>\n\n</div>", styles: [".sa-left-nav{height:calc(100vh - 16px);padding:8px;display:flex}.sa-left-nav-logo{display:flex;align-items:center;justify-content:center;width:40px;margin:auto;padding:5px 0;border-bottom:1px #fff solid;min-height:48px}.sa-logo{height:40px;width:20px;display:block;margin:auto;background-position:center;background:url('data:image/svg+xml,<svg viewBox=\"0 0 20 38\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M15.554 13.549c-.05 0-.101 0-.152-.003v.003s-.541-.013-2.395-.024c-3.047-.026-4.175 1.237-4.532 1.816H8.47c-.26.49-.332 1.061-.202 1.603l-.004.01c.02.13.303 1.624 2.762 1.573 1.971-.042 3.15-.165 3.626-.225a3.881 3.881 0 0 1 1.815.004c.596.145 1.152.43 1.623.831.472.402.846.91 1.093 1.484a4.156 4.156 0 0 1-.158 3.617 4.037 4.037 0 0 1-1.22 1.377 3.883 3.883 0 0 1-3.498.516c-.29-.068-.68-.169-1.207-.315-3.167-.789-4.906 4.081-4.906 4.081l-.006.005a4.069 4.069 0 0 1-1.244 1.785 3.926 3.926 0 0 1-1.968.866 3.888 3.888 0 0 1-2.12-.307c-.667-.3-1.24-.78-1.658-1.39a4.153 4.153 0 0 1-.273-4.216 4.033 4.033 0 0 1 1.463-1.6 3.904 3.904 0 0 1 2.408-.576c.44-.004 1.353 0 3.19.032 3.136.057 3.556-1.442 3.596-2.056 0-.058-.003-.116-.003-.173v-.083a2.288 2.288 0 0 0-.448-1.238 2.204 2.204 0 0 0-1.048-.768c-1.543-.684-5.413-.377-5.413-.377v-.005a3.893 3.893 0 0 1-1.805-.345 3.978 3.978 0 0 1-1.33-.985 4.093 4.093 0 0 1-.829-1.453 4.162 4.162 0 0 1 .308-3.277 4.04 4.04 0 0 1 1.084-1.264c.443-.34.95-.58 1.49-.707a3.882 3.882 0 0 1 1.643-.03c1.257.082 2.52.034 3.768-.144 2.02-.254 2.48-1.434 2.58-2.079V9.48c0-.805.233-1.592.67-2.261a3.996 3.996 0 0 1 1.782-1.5 3.886 3.886 0 0 1 2.296-.23c.77.156 1.478.544 2.034 1.113.556.57.934 1.294 1.087 2.084.154.789.075 1.607-.226 2.35a4.05 4.05 0 0 1-1.463 1.827 3.906 3.906 0 0 1-2.207.686h.003ZM4.476 9.043a3.906 3.906 0 0 1-2.207-.686A4.05 4.05 0 0 1 .806 6.531 4.161 4.161 0 0 1 .58 4.18a4.1 4.1 0 0 1 1.087-2.084A3.945 3.945 0 0 1 3.7.982a3.885 3.885 0 0 1 2.295.232c.726.308 1.347.83 1.783 1.499.437.67.67 1.456.67 2.26a4.12 4.12 0 0 1-1.164 2.878 3.926 3.926 0 0 1-2.809 1.192Z\" fill=\"%23fff\"/><path d=\"M15.531 37.095c2.194 0 3.973-1.822 3.973-4.07 0-2.246-1.779-4.068-3.973-4.068s-3.972 1.822-3.972 4.069 1.779 4.069 3.972 4.069Z\" fill=\"%23fff\"/></svg>') no-repeat}.sa-left-nav-container{height:inherit;width:64px;background-color:var(--primary-800, #42307D);border-radius:var(--small-8px, 8px) var(--small-8px, 8px);padding:16px 6px;box-sizing:border-box;display:flex;flex-direction:column;justify-content:space-evenly}.sa-left-nav-container.menu-attached{border-radius:var(--small-8px, 8px) 0 0 var(--small-8px, 8px)}.sa-left-nav-items{flex:1;overflow-y:auto}.sa-left-nav-items-container{padding:var(--medium-28px) 0;height:100%;overflow:auto;box-sizing:border-box}.sa-left-nav-items-group{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:var(--small-8px, 8px);align-self:stretch}.sa-left-nav-items{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:var(--small-2px, 2px);align-self:stretch}.sa-left-nav-item,.sa-left-nav-footer-item .footer-item-icon{height:40px;width:40px;margin:0 auto;cursor:pointer;border-radius:4px;display:flex;flex-direction:column;justify-content:center;align-items:center}.sa-icon-label{color:var(--icon-white,#fff);font-size:var(--small-10px,10px);text-align:center;margin:0}::-webkit-scrollbar{display:none}.sa-left-nav-footer-item{margin:0 auto;gap:var(--small-2px, 2px);display:flex;flex-direction:column;align-items:center}.sa-left-nav-item:hover,.sa-left-nav-item.active,.sa-left-nav-footer-item .footer-item-icon.active,.sa-left-nav-footer-item .footer-item-icon:hover{background-color:var(--primary-500)}.sa-left-nav-item-name,.sa-left-nav-item-icon,.sa-left-nav-footer-icon,.sa-left-nav-footer-name{height:24px;width:24px;display:block}.sa-left-nav-item-name,mn.sa-left-nav-footer-name{display:flex;justify-content:center;align-items:center}.sa-left-nav-footer{min-height:fit-content;border-top:1px solid #fff}.sa-left-nav-content{width:calc(100% - 64px)}.sa-template-item-container{margin-bottom:.8rem;display:flex;justify-content:center}.sa-left-nav-footer-container{display:flex;flex-direction:column;align-items:center;gap:var(--small-16px, 16px);align-self:stretch;margin-top:var(--small-16px, 16px)}.sa-template-item-container{display:flex;flex-direction:column;align-items:center;gap:var(--small-8px, 8px)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: AvatarComponent, selector: "sa-avatar", inputs: ["id", "imagePath", "altText", "size"], outputs: ["onClickEvent", "onMouseInEvent", "onMouseOutEvent"] }, { kind: "component", type: IconComponent, selector: "sa-icon", inputs: ["img", "icon", "size", "color", "iconPath", "iconUrl", "customClass", "href", "hrefTarget"], outputs: ["onClickEvent"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: MenuDirective, selector: "[saMenu]", inputs: ["saMenuRef", "saMenu", "saManuPosition"], outputs: ["onMenuEvent", "onEvent", "onAttached", "onDetached"] }] }); }
|
|
2493
2494
|
}
|
|
2494
2495
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: LeftNavComponent, decorators: [{
|
|
2495
2496
|
type: Component,
|
|
@@ -2501,7 +2502,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImpor
|
|
|
2501
2502
|
MenuDirective,
|
|
2502
2503
|
SAMenuComponent,
|
|
2503
2504
|
IconComponent
|
|
2504
|
-
], template: "<div class=\"sa-left-nav\" >\n\n <div class=\"sa-left-nav-container {{isMenuAttached() ? 'menu-attached' : ''}}\">\n <div class=\"sa-left-nav-logo\">\n <sa-icon (click)=\"onLogoClick($event, config?.logo)\" [matTooltip]=\"config?.logo?.tooltip\" [matTooltipPosition]=\"'right'\" [icon]=\"config?.logo?.icon\" [size]=\"config?.logo?.
|
|
2505
|
+
], template: "<div class=\"sa-left-nav\" >\n\n <div class=\"sa-left-nav-container {{isMenuAttached() ? 'menu-attached' : ''}}\">\n <div class=\"sa-left-nav-logo\">\n <sa-icon (click)=\"onLogoClick($event, config?.logo)\" [matTooltip]=\"config?.logo?.tooltip\" [matTooltipPosition]=\"'right'\" [icon]=\"config?.logo?.icon\" [size]=\"config?.logo?.iconSize\"></sa-icon>\n </div>\n <div class=\"sa-left-nav-items-container\">\n @if(config && config?.items && !!config?.items?.length){\n <div class=\"sa-left-nav-items-group\">\n <ng-container *ngFor=\"let item of config?.items; let i = index\">\n <div class=\"sa-left-nav-items\">\n <div class=\"sa-left-nav-item\" [ngClass]=\"item.active ? 'active' : '' \"\n [saMenu]=\"item.menu\" (onEvent)=\"onEvent.emit($event)\" (onMenuEvent)=\"onMenuEvent($event)\"\n (onAttached)=\"onMenuAttached($event, 'nav', item, i)\" (onDetached)=\"onMenuDetached($event, 'nav', item, i)\"\n (click)=\"onNavItemClick(item, i, $event)\" (mouseenter)=\"onNavItemBlur(item,i,$event,tooltip)\"\n #tooltip=\"matTooltip\" [matTooltip]=\"item.tooltip\" matTooltipPosition=\"right\">\n\n <sa-icon class=\"sa-left-nav-item-icon\" [icon]=\"item.icon\" [size]=\"item.iconSize || '24'\" [color]=\"item.color || 'white'\"></sa-icon>\n <!-- <span>{{item.tooltip}}</span> -->\n <!-- <span class=\"sa-left-nav-item-icon\"\n [ngStyle]=\"{ 'background-image': 'url(' + item.icon_url + ')' }\"></span> -->\n </div>\n <p class=\"sa-icon-label\">{{item.iconLabel}}</p>\n </div>\n </ng-container>\n </div>\n }\n </div>\n <div class=\"sa-template-item-container\">\n @if(config && config.templateItems && !!config.templateItems.length){\n <div (click)=\"onTemplateItemClick($event, i, item)\" class=\"sa-template-item\" [ngClass]=\"item.className\" *ngFor=\"let item of config.templateItems; let i = index\">\n <sa-icon [matTooltip]=\"item.tooltip\" matTooltipPosition=\"right\" [icon]=\"item.icon\" [size]=\"item.iconSize || '24'\" [color]=\"item.color\"></sa-icon>\n </div>\n }\n </div>\n <div class=\"sa-left-nav-footer\">\n @if(config && config.footerItems && !!config.footerItems.length){\n <div class=\"sa-left-nav-footer-container\">\n <div class=\"sa-left-nav-footer-item\" [ngClass]=\"item.className\" *ngFor=\"let item of config.footerItems; let i = index\">\n <div class=\"footer-item-icon\" [ngClass]=\"item.active ? 'active' : '' \"\n (click)=\"onFooterItemClick(item, i, $event)\"\n [saMenu]=\"item.menu\" (onAttached)=\"onMenuAttached($event, 'footer', item, i)\" (onDetached)=\"onMenuDetached($event, 'footer', item, i)\"\n (mouseenter)=\"onFooterItemBlur(item,i,$event,tooltip)\" #tooltip=\"matTooltip\"\n [matTooltip]=\"item.tooltip\" matTooltipPosition=\"right\">\n @if(item.type === 'AVATAR'){\n <!-- <span class=\"sa-left-nav-footer-name\">ET</span> -->\n <sa-avatar [altText]=\"item.altText\" [imagePath]=\"''\" size=\"extra-small\"></sa-avatar>\n }@else{\n <sa-icon class=\"sa-left-nav-footer-icon\" [icon]=\"item.icon\" size=\"24\" color=\"white\"></sa-icon>\n <!-- <span class=\"sa-left-nav-footer-icon\"\n [ngStyle]=\"{ 'background-image': 'url(' + item.icon_url || '' + ')' }\"></span> -->\n }\n </div>\n <p class=\"sa-icon-label\">{{item.iconLabel}}</p>\n </div>\n </div>\n }\n </div>\n </div>\n\n <div class=\"sa-left-nav-content\">\n <ng-content></ng-content>\n </div>\n\n</div>", styles: [".sa-left-nav{height:calc(100vh - 16px);padding:8px;display:flex}.sa-left-nav-logo{display:flex;align-items:center;justify-content:center;width:40px;margin:auto;padding:5px 0;border-bottom:1px #fff solid;min-height:48px}.sa-logo{height:40px;width:20px;display:block;margin:auto;background-position:center;background:url('data:image/svg+xml,<svg viewBox=\"0 0 20 38\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M15.554 13.549c-.05 0-.101 0-.152-.003v.003s-.541-.013-2.395-.024c-3.047-.026-4.175 1.237-4.532 1.816H8.47c-.26.49-.332 1.061-.202 1.603l-.004.01c.02.13.303 1.624 2.762 1.573 1.971-.042 3.15-.165 3.626-.225a3.881 3.881 0 0 1 1.815.004c.596.145 1.152.43 1.623.831.472.402.846.91 1.093 1.484a4.156 4.156 0 0 1-.158 3.617 4.037 4.037 0 0 1-1.22 1.377 3.883 3.883 0 0 1-3.498.516c-.29-.068-.68-.169-1.207-.315-3.167-.789-4.906 4.081-4.906 4.081l-.006.005a4.069 4.069 0 0 1-1.244 1.785 3.926 3.926 0 0 1-1.968.866 3.888 3.888 0 0 1-2.12-.307c-.667-.3-1.24-.78-1.658-1.39a4.153 4.153 0 0 1-.273-4.216 4.033 4.033 0 0 1 1.463-1.6 3.904 3.904 0 0 1 2.408-.576c.44-.004 1.353 0 3.19.032 3.136.057 3.556-1.442 3.596-2.056 0-.058-.003-.116-.003-.173v-.083a2.288 2.288 0 0 0-.448-1.238 2.204 2.204 0 0 0-1.048-.768c-1.543-.684-5.413-.377-5.413-.377v-.005a3.893 3.893 0 0 1-1.805-.345 3.978 3.978 0 0 1-1.33-.985 4.093 4.093 0 0 1-.829-1.453 4.162 4.162 0 0 1 .308-3.277 4.04 4.04 0 0 1 1.084-1.264c.443-.34.95-.58 1.49-.707a3.882 3.882 0 0 1 1.643-.03c1.257.082 2.52.034 3.768-.144 2.02-.254 2.48-1.434 2.58-2.079V9.48c0-.805.233-1.592.67-2.261a3.996 3.996 0 0 1 1.782-1.5 3.886 3.886 0 0 1 2.296-.23c.77.156 1.478.544 2.034 1.113.556.57.934 1.294 1.087 2.084.154.789.075 1.607-.226 2.35a4.05 4.05 0 0 1-1.463 1.827 3.906 3.906 0 0 1-2.207.686h.003ZM4.476 9.043a3.906 3.906 0 0 1-2.207-.686A4.05 4.05 0 0 1 .806 6.531 4.161 4.161 0 0 1 .58 4.18a4.1 4.1 0 0 1 1.087-2.084A3.945 3.945 0 0 1 3.7.982a3.885 3.885 0 0 1 2.295.232c.726.308 1.347.83 1.783 1.499.437.67.67 1.456.67 2.26a4.12 4.12 0 0 1-1.164 2.878 3.926 3.926 0 0 1-2.809 1.192Z\" fill=\"%23fff\"/><path d=\"M15.531 37.095c2.194 0 3.973-1.822 3.973-4.07 0-2.246-1.779-4.068-3.973-4.068s-3.972 1.822-3.972 4.069 1.779 4.069 3.972 4.069Z\" fill=\"%23fff\"/></svg>') no-repeat}.sa-left-nav-container{height:inherit;width:64px;background-color:var(--primary-800, #42307D);border-radius:var(--small-8px, 8px) var(--small-8px, 8px);padding:16px 6px;box-sizing:border-box;display:flex;flex-direction:column;justify-content:space-evenly}.sa-left-nav-container.menu-attached{border-radius:var(--small-8px, 8px) 0 0 var(--small-8px, 8px)}.sa-left-nav-items{flex:1;overflow-y:auto}.sa-left-nav-items-container{padding:var(--medium-28px) 0;height:100%;overflow:auto;box-sizing:border-box}.sa-left-nav-items-group{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:var(--small-8px, 8px);align-self:stretch}.sa-left-nav-items{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:var(--small-2px, 2px);align-self:stretch}.sa-left-nav-item,.sa-left-nav-footer-item .footer-item-icon{height:40px;width:40px;margin:0 auto;cursor:pointer;border-radius:4px;display:flex;flex-direction:column;justify-content:center;align-items:center}.sa-icon-label{color:var(--icon-white,#fff);font-size:var(--small-10px,10px);text-align:center;margin:0}::-webkit-scrollbar{display:none}.sa-left-nav-footer-item{margin:0 auto;gap:var(--small-2px, 2px);display:flex;flex-direction:column;align-items:center}.sa-left-nav-item:hover,.sa-left-nav-item.active,.sa-left-nav-footer-item .footer-item-icon.active,.sa-left-nav-footer-item .footer-item-icon:hover{background-color:var(--primary-500)}.sa-left-nav-item-name,.sa-left-nav-item-icon,.sa-left-nav-footer-icon,.sa-left-nav-footer-name{height:24px;width:24px;display:block}.sa-left-nav-item-name,mn.sa-left-nav-footer-name{display:flex;justify-content:center;align-items:center}.sa-left-nav-footer{min-height:fit-content;border-top:1px solid #fff}.sa-left-nav-content{width:calc(100% - 64px)}.sa-template-item-container{margin-bottom:.8rem;display:flex;justify-content:center}.sa-left-nav-footer-container{display:flex;flex-direction:column;align-items:center;gap:var(--small-16px, 16px);align-self:stretch;margin-top:var(--small-16px, 16px)}.sa-template-item-container{display:flex;flex-direction:column;align-items:center;gap:var(--small-8px, 8px)}\n"] }]
|
|
2505
2506
|
}], ctorParameters: () => [{ type: i1$5.ActivatedRoute }, { type: i1$5.Router }], propDecorators: { config: [{
|
|
2506
2507
|
type: Input,
|
|
2507
2508
|
args: ['config']
|