@sarasanalytics-com/design-system 0.0.131 → 0.0.133
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/menu.interface.mjs +1 -1
- package/esm2022/lib/avatar/avatar.component.mjs +3 -3
- package/esm2022/lib/form-select/form-select.component.mjs +3 -3
- package/esm2022/lib/icon/icon.component.mjs +3 -3
- package/esm2022/lib/icon/icon.service.mjs +14 -6
- package/esm2022/lib/left-nav/left-nav.component.mjs +4 -3
- package/esm2022/lib/menu/menu-list/menu-item.component.mjs +28 -4
- package/esm2022/lib/menu/menu.component.mjs +15 -5
- package/esm2022/lib/menu/menu.directive.mjs +9 -2
- package/fesm2022/sarasanalytics-com-design-system.mjs +63 -20
- package/fesm2022/sarasanalytics-com-design-system.mjs.map +1 -1
- package/interfaces/menu.interface.d.ts +9 -0
- package/lib/icon/icon.service.d.ts +5 -3
- package/lib/menu/menu-list/menu-item.component.d.ts +8 -2
- package/lib/menu/menu.component.d.ts +1 -0
- package/package.json +1 -1
- package/styles/styles.css +1 -0
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { Component, ViewEncapsulation, EventEmitter, Input, Output,
|
|
2
|
+
import { Component, ViewEncapsulation, EventEmitter, Input, Output, Injectable, inject, Inject, ChangeDetectionStrategy, signal, computed, Optional, ViewChild, forwardRef, Directive, HostListener, HostBinding } from '@angular/core';
|
|
3
3
|
import * as i1$1 from '@angular/common';
|
|
4
4
|
import { CommonModule, NgIf, NgStyle, NgFor } from '@angular/common';
|
|
5
5
|
import * as i1 from '@angular/material/tooltip';
|
|
@@ -111,9 +111,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImpor
|
|
|
111
111
|
}] } });
|
|
112
112
|
|
|
113
113
|
class IconService {
|
|
114
|
-
constructor() {
|
|
115
|
-
this.
|
|
114
|
+
constructor(injector) {
|
|
115
|
+
this.injector = injector;
|
|
116
|
+
// http = inject(HttpClient);
|
|
116
117
|
this.path = 'assets/';
|
|
118
|
+
this.httpClient = null;
|
|
119
|
+
}
|
|
120
|
+
get http() {
|
|
121
|
+
if (!this.httpClient) {
|
|
122
|
+
this.httpClient = this.injector.get(HttpClient);
|
|
123
|
+
}
|
|
124
|
+
return this.httpClient;
|
|
117
125
|
}
|
|
118
126
|
getSvg(iconName, customPath) {
|
|
119
127
|
const isUrl = /^https?:\/\//.test(iconName);
|
|
@@ -125,7 +133,7 @@ class IconService {
|
|
|
125
133
|
if (path)
|
|
126
134
|
this.path = path;
|
|
127
135
|
}
|
|
128
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: IconService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
136
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: IconService, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
129
137
|
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: IconService, providedIn: 'root' }); }
|
|
130
138
|
}
|
|
131
139
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: IconService, decorators: [{
|
|
@@ -133,7 +141,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImpor
|
|
|
133
141
|
args: [{
|
|
134
142
|
providedIn: 'root'
|
|
135
143
|
}]
|
|
136
|
-
}], ctorParameters: () => [] });
|
|
144
|
+
}], ctorParameters: () => [{ type: i0.Injector }] });
|
|
137
145
|
|
|
138
146
|
class IconComponent {
|
|
139
147
|
constructor(cdr) {
|
|
@@ -190,11 +198,11 @@ class IconComponent {
|
|
|
190
198
|
}
|
|
191
199
|
}
|
|
192
200
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: IconComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
193
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.4", type: IconComponent, isStandalone: true, selector: "sa-icon", inputs: { img: "img", icon: "icon", size: "size", color: "color", iconPath: "iconPath", iconUrl: "iconUrl", customClass: "customClass", href: "href", hrefTarget: "hrefTarget" }, outputs: { onClickEvent: "onClickEvent" }, usesOnChanges: true, ngImport: i0, template: "@if(img){\n<img [src]=\"img\" [height]=\"size\" [width]=\"size\" (click)=\"iconClicked($event)\">\n}@else{\n<span class=\"sa-icon\" [ngClass]=\"{\n 'url-icon': iconUrl\n }\" [ngClass]=\"customClass ? [customClass] : []\" [innerHTML]=\"svgIcon\" [ngStyle]=\"iconStyles\" (click)=\"iconClicked($event)\">\n\n</span>\n}", styles: [".sa-icon{display:inline-flex;align-items:center;justify-content:center;color:inherit;font-size:inherit}.sa-icon>svg{width:1em;height:1em;vertical-align:middle}.sa-icon.auto-dimensions>svg{width:fit-content;height:fit-content}.colored-icon{color:var(--primary-500)}.disabled-icon{color:var(--icon-grey1)}.disabled-checkbox-icon{color:var(--grey-200)}.info-icon{color:var(--icon-grey1);cursor:pointer}.sa-card-checkbox-wrapper .sa-card-title-logo .sa-icon{display:flex;width:var(--medium-28px, 28px);padding:var(--small-4px, 4px);align-items:center;border-radius:var(--small-4px, 4px);background:var(--primary-50, #F4EBFF)}.sa-card-checkbox-wrapper .sa-card-title-logo.disabled-card .sa-icon{background:var(--grey-50, #F2F4F7)}.checkbox-card-action-button .sa-icon>svg{height:1.3rem;width:1.05rem}.sa-icon.info-icon>svg{width:var(--medium-20px, 20px);height:var(--medium-20px, 20px)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
201
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.4", type: IconComponent, isStandalone: true, selector: "sa-icon", inputs: { img: "img", icon: "icon", size: "size", color: "color", iconPath: "iconPath", iconUrl: "iconUrl", customClass: "customClass", href: "href", hrefTarget: "hrefTarget" }, outputs: { onClickEvent: "onClickEvent" }, providers: [IconService], usesOnChanges: true, ngImport: i0, template: "@if(img){\n<img [src]=\"img\" [height]=\"size\" [width]=\"size\" (click)=\"iconClicked($event)\">\n}@else{\n<span class=\"sa-icon\" [ngClass]=\"{\n 'url-icon': iconUrl\n }\" [ngClass]=\"customClass ? [customClass] : []\" [innerHTML]=\"svgIcon\" [ngStyle]=\"iconStyles\" (click)=\"iconClicked($event)\">\n\n</span>\n}", styles: [".sa-icon{display:inline-flex;align-items:center;justify-content:center;color:inherit;font-size:inherit}.sa-icon>svg{width:1em;height:1em;vertical-align:middle}.sa-icon.auto-dimensions>svg{width:fit-content;height:fit-content}.colored-icon{color:var(--primary-500)}.disabled-icon{color:var(--icon-grey1)}.disabled-checkbox-icon{color:var(--grey-200)}.info-icon{color:var(--icon-grey1);cursor:pointer}.sa-card-checkbox-wrapper .sa-card-title-logo .sa-icon{display:flex;width:var(--medium-28px, 28px);padding:var(--small-4px, 4px);align-items:center;border-radius:var(--small-4px, 4px);background:var(--primary-50, #F4EBFF)}.sa-card-checkbox-wrapper .sa-card-title-logo.disabled-card .sa-icon{background:var(--grey-50, #F2F4F7)}.checkbox-card-action-button .sa-icon>svg{height:1.3rem;width:1.05rem}.sa-icon.info-icon>svg{width:var(--medium-20px, 20px);height:var(--medium-20px, 20px)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
194
202
|
}
|
|
195
203
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: IconComponent, decorators: [{
|
|
196
204
|
type: Component,
|
|
197
|
-
args: [{ selector: 'sa-icon', standalone: true, imports: [CommonModule], encapsulation: ViewEncapsulation.None, template: "@if(img){\n<img [src]=\"img\" [height]=\"size\" [width]=\"size\" (click)=\"iconClicked($event)\">\n}@else{\n<span class=\"sa-icon\" [ngClass]=\"{\n 'url-icon': iconUrl\n }\" [ngClass]=\"customClass ? [customClass] : []\" [innerHTML]=\"svgIcon\" [ngStyle]=\"iconStyles\" (click)=\"iconClicked($event)\">\n\n</span>\n}", styles: [".sa-icon{display:inline-flex;align-items:center;justify-content:center;color:inherit;font-size:inherit}.sa-icon>svg{width:1em;height:1em;vertical-align:middle}.sa-icon.auto-dimensions>svg{width:fit-content;height:fit-content}.colored-icon{color:var(--primary-500)}.disabled-icon{color:var(--icon-grey1)}.disabled-checkbox-icon{color:var(--grey-200)}.info-icon{color:var(--icon-grey1);cursor:pointer}.sa-card-checkbox-wrapper .sa-card-title-logo .sa-icon{display:flex;width:var(--medium-28px, 28px);padding:var(--small-4px, 4px);align-items:center;border-radius:var(--small-4px, 4px);background:var(--primary-50, #F4EBFF)}.sa-card-checkbox-wrapper .sa-card-title-logo.disabled-card .sa-icon{background:var(--grey-50, #F2F4F7)}.checkbox-card-action-button .sa-icon>svg{height:1.3rem;width:1.05rem}.sa-icon.info-icon>svg{width:var(--medium-20px, 20px);height:var(--medium-20px, 20px)}\n"] }]
|
|
205
|
+
args: [{ selector: 'sa-icon', standalone: true, imports: [CommonModule], providers: [IconService], encapsulation: ViewEncapsulation.None, template: "@if(img){\n<img [src]=\"img\" [height]=\"size\" [width]=\"size\" (click)=\"iconClicked($event)\">\n}@else{\n<span class=\"sa-icon\" [ngClass]=\"{\n 'url-icon': iconUrl\n }\" [ngClass]=\"customClass ? [customClass] : []\" [innerHTML]=\"svgIcon\" [ngStyle]=\"iconStyles\" (click)=\"iconClicked($event)\">\n\n</span>\n}", styles: [".sa-icon{display:inline-flex;align-items:center;justify-content:center;color:inherit;font-size:inherit}.sa-icon>svg{width:1em;height:1em;vertical-align:middle}.sa-icon.auto-dimensions>svg{width:fit-content;height:fit-content}.colored-icon{color:var(--primary-500)}.disabled-icon{color:var(--icon-grey1)}.disabled-checkbox-icon{color:var(--grey-200)}.info-icon{color:var(--icon-grey1);cursor:pointer}.sa-card-checkbox-wrapper .sa-card-title-logo .sa-icon{display:flex;width:var(--medium-28px, 28px);padding:var(--small-4px, 4px);align-items:center;border-radius:var(--small-4px, 4px);background:var(--primary-50, #F4EBFF)}.sa-card-checkbox-wrapper .sa-card-title-logo.disabled-card .sa-icon{background:var(--grey-50, #F2F4F7)}.checkbox-card-action-button .sa-icon>svg{height:1.3rem;width:1.05rem}.sa-icon.info-icon>svg{width:var(--medium-20px, 20px);height:var(--medium-20px, 20px)}\n"] }]
|
|
198
206
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { img: [{
|
|
199
207
|
type: Input,
|
|
200
208
|
args: ['img']
|
|
@@ -253,11 +261,11 @@ class AvatarComponent {
|
|
|
253
261
|
});
|
|
254
262
|
}
|
|
255
263
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: AvatarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
256
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: AvatarComponent, isStandalone: true, selector: "sa-avatar", inputs: { id: "id", imagePath: "imagePath", altText: "altText", size: "size" }, outputs: { onClickEvent: "onClickEvent", onMouseInEvent: "onMouseInEvent", onMouseOutEvent: "onMouseOutEvent" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"avatar {{size}}\" (click)=\"avatarClicked($event)\" (mouseenter)=\"mouseEnter($event)\"\n (mouseleave)=\"mouseLeave($event)\">\n <img *ngIf=\"imagePath\" class=\"avatar-img\" alt=\"{{altText}}\" src=\"{{imagePath}}\">\n <
|
|
264
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: AvatarComponent, isStandalone: true, selector: "sa-avatar", inputs: { id: "id", imagePath: "imagePath", altText: "altText", size: "size" }, outputs: { onClickEvent: "onClickEvent", onMouseInEvent: "onMouseInEvent", onMouseOutEvent: "onMouseOutEvent" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"avatar {{size}}\" (click)=\"avatarClicked($event)\" (mouseenter)=\"mouseEnter($event)\"\n (mouseleave)=\"mouseLeave($event)\">\n <img *ngIf=\"imagePath\" class=\"avatar-img\" alt=\"{{altText}}\" src=\"{{imagePath}}\">\n <span *ngIf=\"!imagePath\" class=\"avatar-img\">{{altText}}</span>\n</div>\n", styles: [".extra-small{--width: var(--medium-24px);--height: var(--medium-24px)}.small{--width: 28px;--height: 28px}.medium{--width: 32px;--height: 32px}.large{--width: 36px;--height: 36px}.extra-large{--width: 52px;--height: 52px}.avatar{display:flex}.avatar-img{background-color:var(--primary-50);height:var(--height);width:var(--width);border-radius:var(--height);object-fit:cover;font-family:var(--font);font-size:11px;font-weight:500;line-height:var(--height);letter-spacing:.5px;text-align:center;overflow:none;margin-bottom:0}.avatar:hover{cursor:pointer}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
|
|
257
265
|
}
|
|
258
266
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: AvatarComponent, decorators: [{
|
|
259
267
|
type: Component,
|
|
260
|
-
args: [{ selector: 'sa-avatar', standalone: true, imports: [NgIf], template: "<div class=\"avatar {{size}}\" (click)=\"avatarClicked($event)\" (mouseenter)=\"mouseEnter($event)\"\n (mouseleave)=\"mouseLeave($event)\">\n <img *ngIf=\"imagePath\" class=\"avatar-img\" alt=\"{{altText}}\" src=\"{{imagePath}}\">\n <
|
|
268
|
+
args: [{ selector: 'sa-avatar', standalone: true, imports: [NgIf], template: "<div class=\"avatar {{size}}\" (click)=\"avatarClicked($event)\" (mouseenter)=\"mouseEnter($event)\"\n (mouseleave)=\"mouseLeave($event)\">\n <img *ngIf=\"imagePath\" class=\"avatar-img\" alt=\"{{altText}}\" src=\"{{imagePath}}\">\n <span *ngIf=\"!imagePath\" class=\"avatar-img\">{{altText}}</span>\n</div>\n", styles: [".extra-small{--width: var(--medium-24px);--height: var(--medium-24px)}.small{--width: 28px;--height: 28px}.medium{--width: 32px;--height: 32px}.large{--width: 36px;--height: 36px}.extra-large{--width: 52px;--height: 52px}.avatar{display:flex}.avatar-img{background-color:var(--primary-50);height:var(--height);width:var(--width);border-radius:var(--height);object-fit:cover;font-family:var(--font);font-size:11px;font-weight:500;line-height:var(--height);letter-spacing:.5px;text-align:center;overflow:none;margin-bottom:0}.avatar:hover{cursor:pointer}\n"] }]
|
|
261
269
|
}], propDecorators: { id: [{
|
|
262
270
|
type: Input
|
|
263
271
|
}], imagePath: [{
|
|
@@ -1952,7 +1960,7 @@ class FormSelectComponent extends FieldType {
|
|
|
1952
1960
|
}
|
|
1953
1961
|
}
|
|
1954
1962
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: FormSelectComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
1955
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.4", type: FormSelectComponent, isStandalone: true, selector: "lib-form-select", outputs: { hoverEvent: "hoverEvent" }, usesInheritance: true, ngImport: i0, template: "<div class=\"sa-select-container {{props?.['inputContainerClass']}}\">\n @if(!!props?.['label']){\n <div class=\"sa-select-label-container\">\n <div class=\"sa-select-label-tooltip-container\">\n <span class=\"sa-select-label\">\n {{props?.['label']}}\n </span>\n @if(!!props?.['tooltip']){\n <span class=\"tooltip-container\">\n <sa-icon [icon]=\"props?.['tooltipIcon'] || 'infoCircleOutlined'\" customClass=\"info-icon\"\n [matTooltip]=\"props?.['tooltip']\" matTooltipClass=\"custom-tooltip\" class=\"tooltip-icon d-flex\"\n [size]=\"props?.['tooltipIconSize'] || '20'\"></sa-icon>\n </span>\n }\n </div>\n @if(!!props?.['description']) {\n <p class=\"sa-select-description\">\n {{props?.['description']}}\n </p>\n }\n </div>\n }\n <div class=\"sa-select-field-container\">\n <div [style.visibility]=\"(props?.['showTag'] !== false && (openState || topLabel)) ? 'visible' : 'hidden'\"\n class=\"clicked-label\">{{params.label}}\n </div>\n <div\n class=\"ng-select-field {{openState ? 'activated' : 'idle'}} {{field.props.disabled ? 'disabled' : ''}} {{formControl.valid ? '' : 'invalid'}}\">\n <div role=\"button\" title=\"drop-button\" tabindex=\"0\" class=\"left-icon svg-icon\" [style]=\"svgStyle\"\n (click)=\"openClose(true)\" (blur)=\"openClose(false)\"\n *ngIf=\"(params.dropIconPosition == 'left' || params.dropIconPosition == 'both')\">\n </div>\n <ng-select (change)=\"checkForZero($event)\" (remove)=\"shiftLabel('removed')\" (clear)=\"shiftLabel('cleared')\"\n (search)=\"openClose(true)\" (focus)=\"openClose(true)\" (blur)=\" openClose(false)\" [isOpen]=\"openState\"\n [placeholder]=\"placeholderLabel\" [bindLabel]=\"props?.['bindLabel'] || 'name'\" [bindValue]=\"props?.['bindValue'] || null\" [items]=\"selectables\" [multiple]=\"params?.multiple\"\n [formControl]=\"formControl\" [style] [formlyAttributes]=\"field\" [searchable]=\"field.props['searchable']\">\n <ng-template ng-multi-label-tmp let-items=\"items\" let-clear=\"clear\">\n <div *ngFor=\"let item of (items ? items.slice(startInd,startInd+labelLimit): [])\">\n <sa-chip (onClickEvent)=\" (!field.props.disabled) ? clear(item) : null\" [id]=\"item.id\"\n [iconPath]=\"params.iconPath\" [text]=\"item.name\" [type]=\"params.type\"\n [state]=\"field.props.disabled ? 'neutral' : params.state\" [filling]=\"params.filling\"\n [iconPosition]=\"params.iconPosition\">\n </sa-chip>\n </div>\n <div (click)=\"shiftLabel('clicked')\" class=\"ng-value overflow-label\"\n *ngIf=\"items.length > (startInd+labelLimit)\">\n <sa-chip text=\"+{{items.length-(startInd+labelLimit)}}\" type=\"regular\" state=\"default\" filling=\"filled\">\n </sa-chip>\n </div>\n <div (click)=\"shiftLabel('cleared')\" *ngIf=\"startInd == items.length-labelLimit\"\n class=\"ng-value overflow-label\">\n <sa-chip text=\"...\" type=\"regular\" state=\"default\" filling=\"filled\">\n </sa-chip>\n </div>\n </ng-template>\n </ng-select>\n <div *ngIf=\"(params.dropIconPosition == 'right' || params.dropIconPosition == 'both')\" class=\"right-icon\">\n <sa-icon [icon]=\"'downChevronOutlined'\" class=\"d-flex\" [size]=\"'18'\" (click)=\"openClose(true)\"\n (blur)=\"openClose(false)\"></sa-icon>\n </div>\n <!-- <div role=\"button\" title=\"drop-button\" tabindex=\"0\" class=\"right-icon svg-icon\" [style]=\"svgStyle\"\n (click)=\"openClose(true)\" (blur)=\"openClose(false)\"\n *ngIf=\"(params.dropIconPosition == 'right' || params.dropIconPosition == 'both')\">\n </div> -->\n\n </div>\n </div>\n @if(!formControl.valid){\n <div class=\"error-message-container\">\n <span class=\"error-message\">\n <formly-validation-message [field]=\"field\"></formly-validation-message>\n </span>\n </div>\n }\n <div class=\"support-label\">{{params.supportText}}</div>\n</div>", styles: [".idle{--border: 1px solid var(--grey-50)}.activated{--border: 1px solid var(--primary-300)}.disabled{border:1px solid var(--grey-50)!important}.ng-select-field:hover{--border: 1px solid var(--primary-300);--font-color: var(--text-highemphasis)}.ng-select-field{width:100%;box-sizing:border-box;position:relative;display:inline-flex;padding:0px var(--small-12px);height:40px;justify-content:center;align-items:center;border:var(--border);border-radius:var(--small-4px);font-family:var(--font);font-size:14px;font-style:normal;font-weight:400;line-height:20px;letter-spacing:.25px;--font-color: var(--text-lowemphasis)}.invalid{border:1px solid var(--semantic-error-500, #BD271E)}.ng-select{width:inherit;display:inline-flex;justify-content:center;align-items:center;flex-shrink:0}.custom-select-container .ng-select{padding-left:1.25rem}.ng-select ::ng-deep .ng-select-container{display:inline-flex;justify-content:center;align-items:center;flex-shrink:0;font-family:var(--font);box-sizing:border-box;border:none}.ng-select ::ng-deep .ng-dropdown-panel{margin-top:2px;border:1px solid var(--grey-50);box-shadow:none!important}.ng-select ::ng-deep .ng-select-container{box-shadow:none!important;position:relative!important;z-index:1!important}.ng-select ::ng-deep .ng-value-container{padding:0!important;flex-wrap:nowrap!important;display:flex;justify-content:flex-start;gap:5px;overflow-x:hidden}.ng-select ::ng-deep .ng-value{flex:none;margin:0!important}.overflow-label{padding:0 5px;cursor:pointer}.ng-select ::ng-deep .ng-placeholder{padding:0!important;position:inherit!important;color:var(--text-lowemphasis)}.ng-select ::ng-deep .ng-input{padding:0!important;position:inherit!important}.ng-select ::ng-deep .ng-clear-wrapper{z-index:9;display:flex;margin-left:5px}.ng-select ::ng-deep .ng-arrow{border-color:none!important;border-style:none!important;border-width:0!important}.svg-icon{-webkit-mask-size:contain;mask-size:contain;width:20px;height:20px;background-color:gray}.svg-icon:hover{cursor:pointer}.ng-select ::ng-deep .ng-arrow-wrapper,::ng-deep .ng-select-filtered .ng-select-container .ng-value-container .ng-value{display:none}.support-label{font-family:var(--font);font-size:11px;font-style:normal;font-weight:400;line-height:16px;letter-spacing:.5px;color:var(--text-lowemphasis);padding:var(--small-4px) var(--small-16px) 0px var(--small-16px)}.clicked-label{position:relative;width:max-content;font-family:var(--font);font-size:11px;font-style:normal;font-weight:500;line-height:16px;letter-spacing:.5px;color:var(--text-lowemphasis);padding:0 var(--small-8px);margin-left:12px;margin-bottom:-8px;z-index:99;background-color:#fff}.ng-select ::ng-deep .ng-dropdown-panel{width:calc(100% + 24px);left:-12px;margin-top:6px}.custom-select-container .ng-select ::ng-deep .ng-dropdown-panel{left:.45rem}.d-flex{display:flex}.custom-select-container.sa-select-container{display:flex;flex-direction:column;gap:var(--small-12px, 12px)}.sa-select-label-tooltip-container{display:flex;gap:var(--small-4px);align-items:center}.sa-select-label{color:var(--text-highemphasis, #1B1D20);font-family:var(--font);font-size:var(--small-14px);font-style:normal;font-weight:500;line-height:var(--medium-20px);letter-spacing:.1px}.right-icon{padding-right:1.2rem;color:#757575}.invalid .right-icon{color:var(--semantic-error-500, #BD271E)}.error-message{color:var(--semantic-error-500, #BD271E);font-family:var(--font);font-size:11px;font-style:normal;font-weight:400;line-height:var(--small-16px);letter-spacing:.5px}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: FormlyModule }, { kind: "directive", type: i2$3.ɵFormlyAttributes, selector: "[formlyAttributes]", inputs: ["formlyAttributes", "id"] }, { kind: "component", type: i2$3.ɵFormlyValidationMessage, selector: "formly-validation-message", inputs: ["field"] }, { kind: "ngmodule", type: NgSelectModule }, { kind: "component", type: i3$2.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "directive", type: i3$2.NgMultiLabelTemplateDirective, selector: "[ng-multi-label-tmp]" }, { kind: "component", type: ChipsComponent, selector: "sa-chip", inputs: ["id", "iconPath", "text", "type", "state", "filling", "iconPosition", "largeStateIcon", "largeStateText", "tooltip"], outputs: ["onClickEvent"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: IconComponent, selector: "sa-icon", inputs: ["img", "icon", "size", "color", "iconPath", "iconUrl", "customClass", "href", "hrefTarget"], outputs: ["onClickEvent"] }, { kind: "ngmodule", type: CommonModule }] }); }
|
|
1963
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.4", type: FormSelectComponent, isStandalone: true, selector: "lib-form-select", outputs: { hoverEvent: "hoverEvent" }, usesInheritance: true, ngImport: i0, template: "<div class=\"sa-select-container {{props?.['inputContainerClass']}}\">\n @if(!!props?.['label']){\n <div class=\"sa-select-label-container\">\n <div class=\"sa-select-label-tooltip-container\">\n <span class=\"sa-select-label\">\n {{props?.['label']}}\n </span>\n @if(!!props?.['tooltip']){\n <span class=\"tooltip-container\">\n <sa-icon [icon]=\"props?.['tooltipIcon'] || 'infoCircleOutlined'\" customClass=\"info-icon\"\n [matTooltip]=\"props?.['tooltip']\" matTooltipClass=\"custom-tooltip\" class=\"tooltip-icon d-flex\"\n [size]=\"props?.['tooltipIconSize'] || '20'\"></sa-icon>\n </span>\n }\n </div>\n @if(!!props?.['description']) {\n <p class=\"sa-select-description\">\n {{props?.['description']}}\n </p>\n }\n </div>\n }\n <div class=\"sa-select-field-container\">\n <div [style.visibility]=\"(props?.['showTag'] !== false && (openState || topLabel)) ? 'visible' : 'hidden'\"\n class=\"clicked-label\">{{params.label}}\n </div>\n <div\n class=\"ng-select-field {{openState ? 'activated' : 'idle'}} {{field.props.disabled ? 'disabled' : ''}} {{formControl.valid ? '' : 'invalid'}}\">\n <div role=\"button\" title=\"drop-button\" tabindex=\"0\" class=\"left-icon svg-icon\" [style]=\"svgStyle\"\n (click)=\"openClose(true)\" (blur)=\"openClose(false)\"\n *ngIf=\"(params.dropIconPosition == 'left' || params.dropIconPosition == 'both')\">\n </div>\n <ng-select (change)=\"checkForZero($event)\" (remove)=\"shiftLabel('removed')\" (clear)=\"shiftLabel('cleared')\"\n (search)=\"openClose(true)\" (focus)=\"openClose(true)\" (blur)=\" openClose(false)\" [isOpen]=\"openState\"\n [placeholder]=\"placeholderLabel\" [bindLabel]=\"props?.['bindLabel'] || 'name'\" [bindValue]=\"props?.['bindValue'] || null\" [items]=\"selectables\" [multiple]=\"params?.multiple\"\n [formControl]=\"formControl\" [style] [formlyAttributes]=\"field\" [searchable]=\"field.props['searchable']\">\n <ng-template ng-multi-label-tmp let-items=\"items\" let-clear=\"clear\">\n <div *ngFor=\"let item of (items ? items.slice(startInd,startInd+labelLimit): [])\">\n <sa-chip (onClickEvent)=\" (!field.props.disabled) ? clear(item) : null\" [id]=\"item.id\"\n [iconPath]=\"params.iconPath\" [text]=\"item.name\" [type]=\"params.type\"\n [state]=\"field.props.disabled ? 'neutral' : params.state\" [filling]=\"params.filling\"\n [iconPosition]=\"params.iconPosition\">\n </sa-chip>\n </div>\n <div (click)=\"shiftLabel('clicked')\" class=\"ng-value overflow-label\"\n *ngIf=\"items.length > (startInd+labelLimit)\">\n <sa-chip text=\"+{{items.length-(startInd+labelLimit)}}\" type=\"regular\" state=\"default\" filling=\"filled\">\n </sa-chip>\n </div>\n <div (click)=\"shiftLabel('cleared')\" *ngIf=\"startInd == items.length-labelLimit\"\n class=\"ng-value overflow-label\">\n <sa-chip text=\"...\" type=\"regular\" state=\"default\" filling=\"filled\">\n </sa-chip>\n </div>\n </ng-template>\n </ng-select>\n <div *ngIf=\"(params.dropIconPosition == 'right' || params.dropIconPosition == 'both')\" class=\"right-icon\">\n <sa-icon [icon]=\"'downChevronOutlined'\" class=\"d-flex\" [size]=\"'18'\" (click)=\"openClose(true)\"\n (blur)=\"openClose(false)\"></sa-icon>\n </div>\n <!-- <div role=\"button\" title=\"drop-button\" tabindex=\"0\" class=\"right-icon svg-icon\" [style]=\"svgStyle\"\n (click)=\"openClose(true)\" (blur)=\"openClose(false)\"\n *ngIf=\"(params.dropIconPosition == 'right' || params.dropIconPosition == 'both')\">\n </div> -->\n\n </div>\n </div>\n @if(!formControl.valid){\n <div class=\"error-message-container\">\n <span class=\"error-message\">\n <formly-validation-message [field]=\"field\"></formly-validation-message>\n </span>\n </div>\n }\n <div class=\"support-label\">{{params.supportText}}</div>\n</div>", styles: [".idle{--border: 1px solid var(--grey-50)}.activated{--border: 1px solid var(--primary-300)}.disabled{border:1px solid var(--grey-50)!important}.ng-select-field:hover{--border: 1px solid var(--primary-300);--font-color: var(--text-highemphasis)}.ng-select-field{width:100%;box-sizing:border-box;position:relative;display:inline-flex;padding:0px var(--small-12px) 0 var(--medium-30px);height:40px;justify-content:center;align-items:center;border:var(--border);border-radius:var(--small-4px);font-family:var(--font);font-size:14px;font-style:normal;font-weight:400;line-height:20px;letter-spacing:.25px;--font-color: var(--text-lowemphasis)}.invalid{border:1px solid var(--semantic-error-500, #BD271E)}.ng-select{width:inherit;display:inline-flex;justify-content:center;align-items:center;flex-shrink:0}.custom-select-container .ng-select{padding-left:1.25rem}.ng-select ::ng-deep .ng-select-container{display:inline-flex;justify-content:center;align-items:center;flex-shrink:0;font-family:var(--font);box-sizing:border-box;border:none}.ng-select ::ng-deep .ng-dropdown-panel{margin-top:2px;border:1px solid var(--grey-50);box-shadow:none!important}.ng-select ::ng-deep .ng-select-container{box-shadow:none!important;position:relative!important;z-index:1!important}.ng-select ::ng-deep .ng-value-container{padding:0!important;flex-wrap:nowrap!important;display:flex;justify-content:flex-start;gap:5px;overflow-x:hidden}.ng-select ::ng-deep .ng-value{flex:none;margin:0!important}.overflow-label{padding:0 5px;cursor:pointer}.ng-select ::ng-deep .ng-placeholder{padding:0!important;position:inherit!important;color:var(--text-lowemphasis)}.ng-select ::ng-deep .ng-input{padding:0!important;position:inherit!important}.ng-select ::ng-deep .ng-clear-wrapper{z-index:9;display:flex;margin-left:5px}.ng-select ::ng-deep .ng-arrow{border-color:none!important;border-style:none!important;border-width:0!important}.svg-icon{-webkit-mask-size:contain;mask-size:contain;width:20px;height:20px;background-color:gray}.svg-icon:hover{cursor:pointer}.ng-select ::ng-deep .ng-arrow-wrapper,::ng-deep .ng-select-filtered .ng-select-container .ng-value-container .ng-value{display:none}.support-label{font-family:var(--font);font-size:11px;font-style:normal;font-weight:400;line-height:16px;letter-spacing:.5px;color:var(--text-lowemphasis);padding:var(--small-4px) var(--small-16px) 0px var(--small-16px)}.clicked-label{position:relative;width:max-content;font-family:var(--font);font-size:11px;font-style:normal;font-weight:500;line-height:16px;letter-spacing:.5px;color:var(--text-lowemphasis);padding:0 var(--small-8px);margin-left:12px;margin-bottom:-8px;z-index:99;background-color:#fff}.ng-select ::ng-deep .ng-dropdown-panel{width:calc(100% + 24px);left:-12px;margin-top:6px}.custom-select-container .ng-select ::ng-deep .ng-dropdown-panel{left:.45rem}.d-flex{display:flex}.custom-select-container.sa-select-container{display:flex;flex-direction:column;gap:var(--small-12px, 12px)}.sa-select-label-tooltip-container{display:flex;gap:var(--small-4px);align-items:center}.sa-select-label{color:var(--text-highemphasis, #1B1D20);font-family:var(--font);font-size:var(--small-14px);font-style:normal;font-weight:500;line-height:var(--medium-20px);letter-spacing:.1px}.right-icon{padding-right:1.2rem;color:#757575}.invalid .right-icon{color:var(--semantic-error-500, #BD271E)}.error-message{color:var(--semantic-error-500, #BD271E);font-family:var(--font);font-size:11px;font-style:normal;font-weight:400;line-height:var(--small-16px);letter-spacing:.5px}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: FormlyModule }, { kind: "directive", type: i2$3.ɵFormlyAttributes, selector: "[formlyAttributes]", inputs: ["formlyAttributes", "id"] }, { kind: "component", type: i2$3.ɵFormlyValidationMessage, selector: "formly-validation-message", inputs: ["field"] }, { kind: "ngmodule", type: NgSelectModule }, { kind: "component", type: i3$2.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "directive", type: i3$2.NgMultiLabelTemplateDirective, selector: "[ng-multi-label-tmp]" }, { kind: "component", type: ChipsComponent, selector: "sa-chip", inputs: ["id", "iconPath", "text", "type", "state", "filling", "iconPosition", "largeStateIcon", "largeStateText", "tooltip"], outputs: ["onClickEvent"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: IconComponent, selector: "sa-icon", inputs: ["img", "icon", "size", "color", "iconPath", "iconUrl", "customClass", "href", "hrefTarget"], outputs: ["onClickEvent"] }, { kind: "ngmodule", type: CommonModule }] }); }
|
|
1956
1964
|
}
|
|
1957
1965
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: FormSelectComponent, decorators: [{
|
|
1958
1966
|
type: Component,
|
|
@@ -1968,7 +1976,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImpor
|
|
|
1968
1976
|
IconComponent,
|
|
1969
1977
|
CommonModule,
|
|
1970
1978
|
MatTooltipModule
|
|
1971
|
-
], template: "<div class=\"sa-select-container {{props?.['inputContainerClass']}}\">\n @if(!!props?.['label']){\n <div class=\"sa-select-label-container\">\n <div class=\"sa-select-label-tooltip-container\">\n <span class=\"sa-select-label\">\n {{props?.['label']}}\n </span>\n @if(!!props?.['tooltip']){\n <span class=\"tooltip-container\">\n <sa-icon [icon]=\"props?.['tooltipIcon'] || 'infoCircleOutlined'\" customClass=\"info-icon\"\n [matTooltip]=\"props?.['tooltip']\" matTooltipClass=\"custom-tooltip\" class=\"tooltip-icon d-flex\"\n [size]=\"props?.['tooltipIconSize'] || '20'\"></sa-icon>\n </span>\n }\n </div>\n @if(!!props?.['description']) {\n <p class=\"sa-select-description\">\n {{props?.['description']}}\n </p>\n }\n </div>\n }\n <div class=\"sa-select-field-container\">\n <div [style.visibility]=\"(props?.['showTag'] !== false && (openState || topLabel)) ? 'visible' : 'hidden'\"\n class=\"clicked-label\">{{params.label}}\n </div>\n <div\n class=\"ng-select-field {{openState ? 'activated' : 'idle'}} {{field.props.disabled ? 'disabled' : ''}} {{formControl.valid ? '' : 'invalid'}}\">\n <div role=\"button\" title=\"drop-button\" tabindex=\"0\" class=\"left-icon svg-icon\" [style]=\"svgStyle\"\n (click)=\"openClose(true)\" (blur)=\"openClose(false)\"\n *ngIf=\"(params.dropIconPosition == 'left' || params.dropIconPosition == 'both')\">\n </div>\n <ng-select (change)=\"checkForZero($event)\" (remove)=\"shiftLabel('removed')\" (clear)=\"shiftLabel('cleared')\"\n (search)=\"openClose(true)\" (focus)=\"openClose(true)\" (blur)=\" openClose(false)\" [isOpen]=\"openState\"\n [placeholder]=\"placeholderLabel\" [bindLabel]=\"props?.['bindLabel'] || 'name'\" [bindValue]=\"props?.['bindValue'] || null\" [items]=\"selectables\" [multiple]=\"params?.multiple\"\n [formControl]=\"formControl\" [style] [formlyAttributes]=\"field\" [searchable]=\"field.props['searchable']\">\n <ng-template ng-multi-label-tmp let-items=\"items\" let-clear=\"clear\">\n <div *ngFor=\"let item of (items ? items.slice(startInd,startInd+labelLimit): [])\">\n <sa-chip (onClickEvent)=\" (!field.props.disabled) ? clear(item) : null\" [id]=\"item.id\"\n [iconPath]=\"params.iconPath\" [text]=\"item.name\" [type]=\"params.type\"\n [state]=\"field.props.disabled ? 'neutral' : params.state\" [filling]=\"params.filling\"\n [iconPosition]=\"params.iconPosition\">\n </sa-chip>\n </div>\n <div (click)=\"shiftLabel('clicked')\" class=\"ng-value overflow-label\"\n *ngIf=\"items.length > (startInd+labelLimit)\">\n <sa-chip text=\"+{{items.length-(startInd+labelLimit)}}\" type=\"regular\" state=\"default\" filling=\"filled\">\n </sa-chip>\n </div>\n <div (click)=\"shiftLabel('cleared')\" *ngIf=\"startInd == items.length-labelLimit\"\n class=\"ng-value overflow-label\">\n <sa-chip text=\"...\" type=\"regular\" state=\"default\" filling=\"filled\">\n </sa-chip>\n </div>\n </ng-template>\n </ng-select>\n <div *ngIf=\"(params.dropIconPosition == 'right' || params.dropIconPosition == 'both')\" class=\"right-icon\">\n <sa-icon [icon]=\"'downChevronOutlined'\" class=\"d-flex\" [size]=\"'18'\" (click)=\"openClose(true)\"\n (blur)=\"openClose(false)\"></sa-icon>\n </div>\n <!-- <div role=\"button\" title=\"drop-button\" tabindex=\"0\" class=\"right-icon svg-icon\" [style]=\"svgStyle\"\n (click)=\"openClose(true)\" (blur)=\"openClose(false)\"\n *ngIf=\"(params.dropIconPosition == 'right' || params.dropIconPosition == 'both')\">\n </div> -->\n\n </div>\n </div>\n @if(!formControl.valid){\n <div class=\"error-message-container\">\n <span class=\"error-message\">\n <formly-validation-message [field]=\"field\"></formly-validation-message>\n </span>\n </div>\n }\n <div class=\"support-label\">{{params.supportText}}</div>\n</div>", styles: [".idle{--border: 1px solid var(--grey-50)}.activated{--border: 1px solid var(--primary-300)}.disabled{border:1px solid var(--grey-50)!important}.ng-select-field:hover{--border: 1px solid var(--primary-300);--font-color: var(--text-highemphasis)}.ng-select-field{width:100%;box-sizing:border-box;position:relative;display:inline-flex;padding:0px var(--small-12px);height:40px;justify-content:center;align-items:center;border:var(--border);border-radius:var(--small-4px);font-family:var(--font);font-size:14px;font-style:normal;font-weight:400;line-height:20px;letter-spacing:.25px;--font-color: var(--text-lowemphasis)}.invalid{border:1px solid var(--semantic-error-500, #BD271E)}.ng-select{width:inherit;display:inline-flex;justify-content:center;align-items:center;flex-shrink:0}.custom-select-container .ng-select{padding-left:1.25rem}.ng-select ::ng-deep .ng-select-container{display:inline-flex;justify-content:center;align-items:center;flex-shrink:0;font-family:var(--font);box-sizing:border-box;border:none}.ng-select ::ng-deep .ng-dropdown-panel{margin-top:2px;border:1px solid var(--grey-50);box-shadow:none!important}.ng-select ::ng-deep .ng-select-container{box-shadow:none!important;position:relative!important;z-index:1!important}.ng-select ::ng-deep .ng-value-container{padding:0!important;flex-wrap:nowrap!important;display:flex;justify-content:flex-start;gap:5px;overflow-x:hidden}.ng-select ::ng-deep .ng-value{flex:none;margin:0!important}.overflow-label{padding:0 5px;cursor:pointer}.ng-select ::ng-deep .ng-placeholder{padding:0!important;position:inherit!important;color:var(--text-lowemphasis)}.ng-select ::ng-deep .ng-input{padding:0!important;position:inherit!important}.ng-select ::ng-deep .ng-clear-wrapper{z-index:9;display:flex;margin-left:5px}.ng-select ::ng-deep .ng-arrow{border-color:none!important;border-style:none!important;border-width:0!important}.svg-icon{-webkit-mask-size:contain;mask-size:contain;width:20px;height:20px;background-color:gray}.svg-icon:hover{cursor:pointer}.ng-select ::ng-deep .ng-arrow-wrapper,::ng-deep .ng-select-filtered .ng-select-container .ng-value-container .ng-value{display:none}.support-label{font-family:var(--font);font-size:11px;font-style:normal;font-weight:400;line-height:16px;letter-spacing:.5px;color:var(--text-lowemphasis);padding:var(--small-4px) var(--small-16px) 0px var(--small-16px)}.clicked-label{position:relative;width:max-content;font-family:var(--font);font-size:11px;font-style:normal;font-weight:500;line-height:16px;letter-spacing:.5px;color:var(--text-lowemphasis);padding:0 var(--small-8px);margin-left:12px;margin-bottom:-8px;z-index:99;background-color:#fff}.ng-select ::ng-deep .ng-dropdown-panel{width:calc(100% + 24px);left:-12px;margin-top:6px}.custom-select-container .ng-select ::ng-deep .ng-dropdown-panel{left:.45rem}.d-flex{display:flex}.custom-select-container.sa-select-container{display:flex;flex-direction:column;gap:var(--small-12px, 12px)}.sa-select-label-tooltip-container{display:flex;gap:var(--small-4px);align-items:center}.sa-select-label{color:var(--text-highemphasis, #1B1D20);font-family:var(--font);font-size:var(--small-14px);font-style:normal;font-weight:500;line-height:var(--medium-20px);letter-spacing:.1px}.right-icon{padding-right:1.2rem;color:#757575}.invalid .right-icon{color:var(--semantic-error-500, #BD271E)}.error-message{color:var(--semantic-error-500, #BD271E);font-family:var(--font);font-size:11px;font-style:normal;font-weight:400;line-height:var(--small-16px);letter-spacing:.5px}\n"] }]
|
|
1979
|
+
], template: "<div class=\"sa-select-container {{props?.['inputContainerClass']}}\">\n @if(!!props?.['label']){\n <div class=\"sa-select-label-container\">\n <div class=\"sa-select-label-tooltip-container\">\n <span class=\"sa-select-label\">\n {{props?.['label']}}\n </span>\n @if(!!props?.['tooltip']){\n <span class=\"tooltip-container\">\n <sa-icon [icon]=\"props?.['tooltipIcon'] || 'infoCircleOutlined'\" customClass=\"info-icon\"\n [matTooltip]=\"props?.['tooltip']\" matTooltipClass=\"custom-tooltip\" class=\"tooltip-icon d-flex\"\n [size]=\"props?.['tooltipIconSize'] || '20'\"></sa-icon>\n </span>\n }\n </div>\n @if(!!props?.['description']) {\n <p class=\"sa-select-description\">\n {{props?.['description']}}\n </p>\n }\n </div>\n }\n <div class=\"sa-select-field-container\">\n <div [style.visibility]=\"(props?.['showTag'] !== false && (openState || topLabel)) ? 'visible' : 'hidden'\"\n class=\"clicked-label\">{{params.label}}\n </div>\n <div\n class=\"ng-select-field {{openState ? 'activated' : 'idle'}} {{field.props.disabled ? 'disabled' : ''}} {{formControl.valid ? '' : 'invalid'}}\">\n <div role=\"button\" title=\"drop-button\" tabindex=\"0\" class=\"left-icon svg-icon\" [style]=\"svgStyle\"\n (click)=\"openClose(true)\" (blur)=\"openClose(false)\"\n *ngIf=\"(params.dropIconPosition == 'left' || params.dropIconPosition == 'both')\">\n </div>\n <ng-select (change)=\"checkForZero($event)\" (remove)=\"shiftLabel('removed')\" (clear)=\"shiftLabel('cleared')\"\n (search)=\"openClose(true)\" (focus)=\"openClose(true)\" (blur)=\" openClose(false)\" [isOpen]=\"openState\"\n [placeholder]=\"placeholderLabel\" [bindLabel]=\"props?.['bindLabel'] || 'name'\" [bindValue]=\"props?.['bindValue'] || null\" [items]=\"selectables\" [multiple]=\"params?.multiple\"\n [formControl]=\"formControl\" [style] [formlyAttributes]=\"field\" [searchable]=\"field.props['searchable']\">\n <ng-template ng-multi-label-tmp let-items=\"items\" let-clear=\"clear\">\n <div *ngFor=\"let item of (items ? items.slice(startInd,startInd+labelLimit): [])\">\n <sa-chip (onClickEvent)=\" (!field.props.disabled) ? clear(item) : null\" [id]=\"item.id\"\n [iconPath]=\"params.iconPath\" [text]=\"item.name\" [type]=\"params.type\"\n [state]=\"field.props.disabled ? 'neutral' : params.state\" [filling]=\"params.filling\"\n [iconPosition]=\"params.iconPosition\">\n </sa-chip>\n </div>\n <div (click)=\"shiftLabel('clicked')\" class=\"ng-value overflow-label\"\n *ngIf=\"items.length > (startInd+labelLimit)\">\n <sa-chip text=\"+{{items.length-(startInd+labelLimit)}}\" type=\"regular\" state=\"default\" filling=\"filled\">\n </sa-chip>\n </div>\n <div (click)=\"shiftLabel('cleared')\" *ngIf=\"startInd == items.length-labelLimit\"\n class=\"ng-value overflow-label\">\n <sa-chip text=\"...\" type=\"regular\" state=\"default\" filling=\"filled\">\n </sa-chip>\n </div>\n </ng-template>\n </ng-select>\n <div *ngIf=\"(params.dropIconPosition == 'right' || params.dropIconPosition == 'both')\" class=\"right-icon\">\n <sa-icon [icon]=\"'downChevronOutlined'\" class=\"d-flex\" [size]=\"'18'\" (click)=\"openClose(true)\"\n (blur)=\"openClose(false)\"></sa-icon>\n </div>\n <!-- <div role=\"button\" title=\"drop-button\" tabindex=\"0\" class=\"right-icon svg-icon\" [style]=\"svgStyle\"\n (click)=\"openClose(true)\" (blur)=\"openClose(false)\"\n *ngIf=\"(params.dropIconPosition == 'right' || params.dropIconPosition == 'both')\">\n </div> -->\n\n </div>\n </div>\n @if(!formControl.valid){\n <div class=\"error-message-container\">\n <span class=\"error-message\">\n <formly-validation-message [field]=\"field\"></formly-validation-message>\n </span>\n </div>\n }\n <div class=\"support-label\">{{params.supportText}}</div>\n</div>", styles: [".idle{--border: 1px solid var(--grey-50)}.activated{--border: 1px solid var(--primary-300)}.disabled{border:1px solid var(--grey-50)!important}.ng-select-field:hover{--border: 1px solid var(--primary-300);--font-color: var(--text-highemphasis)}.ng-select-field{width:100%;box-sizing:border-box;position:relative;display:inline-flex;padding:0px var(--small-12px) 0 var(--medium-30px);height:40px;justify-content:center;align-items:center;border:var(--border);border-radius:var(--small-4px);font-family:var(--font);font-size:14px;font-style:normal;font-weight:400;line-height:20px;letter-spacing:.25px;--font-color: var(--text-lowemphasis)}.invalid{border:1px solid var(--semantic-error-500, #BD271E)}.ng-select{width:inherit;display:inline-flex;justify-content:center;align-items:center;flex-shrink:0}.custom-select-container .ng-select{padding-left:1.25rem}.ng-select ::ng-deep .ng-select-container{display:inline-flex;justify-content:center;align-items:center;flex-shrink:0;font-family:var(--font);box-sizing:border-box;border:none}.ng-select ::ng-deep .ng-dropdown-panel{margin-top:2px;border:1px solid var(--grey-50);box-shadow:none!important}.ng-select ::ng-deep .ng-select-container{box-shadow:none!important;position:relative!important;z-index:1!important}.ng-select ::ng-deep .ng-value-container{padding:0!important;flex-wrap:nowrap!important;display:flex;justify-content:flex-start;gap:5px;overflow-x:hidden}.ng-select ::ng-deep .ng-value{flex:none;margin:0!important}.overflow-label{padding:0 5px;cursor:pointer}.ng-select ::ng-deep .ng-placeholder{padding:0!important;position:inherit!important;color:var(--text-lowemphasis)}.ng-select ::ng-deep .ng-input{padding:0!important;position:inherit!important}.ng-select ::ng-deep .ng-clear-wrapper{z-index:9;display:flex;margin-left:5px}.ng-select ::ng-deep .ng-arrow{border-color:none!important;border-style:none!important;border-width:0!important}.svg-icon{-webkit-mask-size:contain;mask-size:contain;width:20px;height:20px;background-color:gray}.svg-icon:hover{cursor:pointer}.ng-select ::ng-deep .ng-arrow-wrapper,::ng-deep .ng-select-filtered .ng-select-container .ng-value-container .ng-value{display:none}.support-label{font-family:var(--font);font-size:11px;font-style:normal;font-weight:400;line-height:16px;letter-spacing:.5px;color:var(--text-lowemphasis);padding:var(--small-4px) var(--small-16px) 0px var(--small-16px)}.clicked-label{position:relative;width:max-content;font-family:var(--font);font-size:11px;font-style:normal;font-weight:500;line-height:16px;letter-spacing:.5px;color:var(--text-lowemphasis);padding:0 var(--small-8px);margin-left:12px;margin-bottom:-8px;z-index:99;background-color:#fff}.ng-select ::ng-deep .ng-dropdown-panel{width:calc(100% + 24px);left:-12px;margin-top:6px}.custom-select-container .ng-select ::ng-deep .ng-dropdown-panel{left:.45rem}.d-flex{display:flex}.custom-select-container.sa-select-container{display:flex;flex-direction:column;gap:var(--small-12px, 12px)}.sa-select-label-tooltip-container{display:flex;gap:var(--small-4px);align-items:center}.sa-select-label{color:var(--text-highemphasis, #1B1D20);font-family:var(--font);font-size:var(--small-14px);font-style:normal;font-weight:500;line-height:var(--medium-20px);letter-spacing:.1px}.right-icon{padding-right:1.2rem;color:#757575}.invalid .right-icon{color:var(--semantic-error-500, #BD271E)}.error-message{color:var(--semantic-error-500, #BD271E);font-family:var(--font);font-size:11px;font-style:normal;font-weight:400;line-height:var(--small-16px);letter-spacing:.5px}\n"] }]
|
|
1972
1980
|
}], propDecorators: { hoverEvent: [{
|
|
1973
1981
|
type: Output,
|
|
1974
1982
|
args: ['hoverEvent']
|
|
@@ -2165,18 +2173,39 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImpor
|
|
|
2165
2173
|
}] } });
|
|
2166
2174
|
|
|
2167
2175
|
class SAMenuItemComponent {
|
|
2176
|
+
constructor() {
|
|
2177
|
+
this.onEvent = new EventEmitter();
|
|
2178
|
+
}
|
|
2179
|
+
// @ViewChild(MenuDirective) menuDirective?: MenuDirective;
|
|
2180
|
+
ngAfterViewInit() {
|
|
2181
|
+
if (this.menuDirective) {
|
|
2182
|
+
this.menuDirective.onEvent.subscribe((event) => {
|
|
2183
|
+
this.onEvent.emit(event); // ✅ re-emit to SAMenuComponent
|
|
2184
|
+
});
|
|
2185
|
+
}
|
|
2186
|
+
}
|
|
2187
|
+
optionClicked(item) {
|
|
2188
|
+
this.onEvent.emit({ type: 'click', item });
|
|
2189
|
+
}
|
|
2168
2190
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: SAMenuItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2169
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.4", type: SAMenuItemComponent, isStandalone: true, selector: "sa-menu-item", inputs: { item: "item", showRound: "showRound" }, ngImport: i0, template: "<!-- <div mat-menu-item class=\"sa-menu-item\">\n <span>{{item.label}}</span>\n</div> -->\n\n<div class=\"section-item\" [ngStyle]=\"{ 'border-radius': showRound ? '5px' : '0' }\" [ngClass]=\"item.isSelected ? 'selected' : ''\">\n <div class=\"status\">\n <sa-status-dot *ngIf=\"item.statusDot\" [config]=\"item?.statusDot\"></sa-status-dot>\n <sa-icon class=\"flex\" *ngIf=\"item.icon\" [icon]=\"item?.icon?.icon\" [iconPath]=\"item['icon']?.iconPath\" [iconUrl]=\"item['icon']?.iconUrl\" [size]=\"item['icon']?.size\" [customClass]=\"item['icon']?.customClass\"></sa-icon>\n <span class=\"sa-groupItem-lable\">{{item.label}}</span>\n </div>\n <!-- Section for showing chips if chips are available in object -->\n <div *ngIf=\"item.chips\" class=\"tags\">\n @for (itm of item.chips; track $index) {\n <sa-chip *ngIf=\"itm.text\" [type]=\"itm.type\" [state]=\"itm.state\" [filling]=\"itm.filling\"\n [text]=\"itm.text\"></sa-chip>\n <!-- <span [ngClass]=\"itm.status == 'active' ? 'tag-active' : 'tag-inactive'\" class=\"\">{{itm.label}}</span> -->\n }\n </div>\n</div>\n", styles: [".sa-menu-item{padding:12px}.sa-menu-item:hover{background-color:var(--primary-500)}.sa-menu-item:first-child{border-top-left-radius:8px;border-top-right-radius:8px}.sa-menu-item:last-child{border-bottom-left-radius:8px;border-bottom-right-radius:8px}.section-item{display:flex;justify-content:space-between;align-items:center;padding:
|
|
2191
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.4", type: SAMenuItemComponent, isStandalone: true, selector: "sa-menu-item", inputs: { item: "item", showRound: "showRound" }, outputs: { onEvent: "onEvent" }, providers: [IconService], viewQueries: [{ propertyName: "menuDirective", first: true, predicate: i0.forwardRef(() => MenuDirective), descendants: true }], ngImport: i0, template: "<!-- <div mat-menu-item class=\"sa-menu-item\">\n <span>{{item.label}}</span>\n</div> -->\n\n<div class=\"section-item {{item?.sepratorPosition}}\" [ngStyle]=\"{ 'border-radius': showRound ? '5px' : '0' }\" [ngClass]=\"item.isSelected ? 'selected' : ''\" (click)=\"optionClicked(item)\">\n <div class=\"status {{item['className']}}\" [saMenu]=\"item?.subMenu\">\n <sa-status-dot *ngIf=\"item.statusDot\" [config]=\"item?.statusDot\"></sa-status-dot>\n <sa-icon class=\"flex\" *ngIf=\"item.icon\" [icon]=\"item?.icon?.icon\" [iconPath]=\"item['icon']?.iconPath\" [iconUrl]=\"item['icon']?.iconUrl\" [size]=\"item['icon']?.size\" [customClass]=\"item['icon']?.customClass\"></sa-icon>\n <span class=\"sa-groupItem-lable\" >{{item.label}}</span>\n <div *ngIf=\"item?.subMenu\" class=\"flex ml-auto\">\n <sa-icon [icon]=\"'rightChevronOutlined'\" class=\"flex\" [size]=\"'20'\"></sa-icon>\n </div>\n </div>\n <!-- Section for showing chips if chips are available in object -->\n <div *ngIf=\"item.chips\" class=\"tags\">\n @for (itm of item.chips; track $index) {\n <sa-chip *ngIf=\"itm.text\" [type]=\"itm.type\" [state]=\"itm.state\" [filling]=\"itm.filling\"\n [text]=\"itm.text\"></sa-chip>\n <!-- <span [ngClass]=\"itm.status == 'active' ? 'tag-active' : 'tag-inactive'\" class=\"\">{{itm.label}}</span> -->\n }\n </div>\n</div>\n", styles: [".sa-menu-item{padding:12px}.sa-menu-item:hover{background-color:var(--primary-500)}.sa-menu-item:first-child{border-top-left-radius:8px;border-top-right-radius:8px}.sa-menu-item:last-child{border-bottom-left-radius:8px;border-bottom-right-radius:8px}.section-item{display:flex;justify-content:space-between;align-items:center;padding:12px}.section-item:hover{background-color:var(--primary-500)}.section-item:hover span{font-weight:500}.selected{background-color:var(--primary-500)}.section-item .tags{display:flex;gap:.25rem}.tag{background-color:#6b46c1;font-size:.2rem;padding:.25rem .5rem;border-radius:.25rem}.tag-active{background-color:#6b46c1!important;font-size:.2rem;padding:.25rem .5rem;border-radius:.25rem}.tag-inactive{background-color:#d27f2b!important;font-size:.2rem;padding:.25rem .5rem;border-radius:.25rem}.status{display:flex;align-items:center;gap:.6rem}.status-dot{width:.5rem;height:.5rem;border-radius:50%}.status-active{background-color:#48bb78}.status-inactive{background-color:#f19e4f}hr{border:0;border-top:1px solid #718096;margin-bottom:1rem}.sa-groupItem-lable{cursor:pointer;font-size:14px;font-weight:400}.flex{display:flex}.top{border-top:1px solid #475467}.bottom{border-bottom:1px solid #475467}.ml-auto{margin-left:auto}\n"], dependencies: [{ kind: "ngmodule", type: i0.forwardRef(() => CommonModule) }, { kind: "directive", type: i0.forwardRef(() => i1$1.NgClass), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i0.forwardRef(() => i1$1.NgIf), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i0.forwardRef(() => i1$1.NgStyle), selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i0.forwardRef(() => ChipsComponent), selector: "sa-chip", inputs: ["id", "iconPath", "text", "type", "state", "filling", "iconPosition", "largeStateIcon", "largeStateText", "tooltip"], outputs: ["onClickEvent"] }, { kind: "ngmodule", type: i0.forwardRef(() => HttpClientModule) }, { kind: "component", type: i0.forwardRef(() => IconComponent), selector: "sa-icon", inputs: ["img", "icon", "size", "color", "iconPath", "iconUrl", "customClass", "href", "hrefTarget"], outputs: ["onClickEvent"] }, { kind: "component", type: i0.forwardRef(() => StatusDotComponent), selector: "sa-status-dot", inputs: ["config"] }, { kind: "directive", type: i0.forwardRef(() => MenuDirective), selector: "[saMenu]", inputs: ["saMenuRef", "saMenu", "saManuPosition"], outputs: ["onMenuEvent", "onEvent", "onAttached", "onDetached"] }] }); }
|
|
2170
2192
|
}
|
|
2171
2193
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: SAMenuItemComponent, decorators: [{
|
|
2172
2194
|
type: Component,
|
|
2173
|
-
args: [{ selector: 'sa-menu-item', standalone: true, imports: [CommonModule, ChipsComponent, IconComponent, StatusDotComponent
|
|
2195
|
+
args: [{ selector: 'sa-menu-item', standalone: true, imports: [CommonModule, ChipsComponent, HttpClientModule, IconComponent, StatusDotComponent,
|
|
2196
|
+
forwardRef(() => MenuDirective)
|
|
2197
|
+
], providers: [IconService], template: "<!-- <div mat-menu-item class=\"sa-menu-item\">\n <span>{{item.label}}</span>\n</div> -->\n\n<div class=\"section-item {{item?.sepratorPosition}}\" [ngStyle]=\"{ 'border-radius': showRound ? '5px' : '0' }\" [ngClass]=\"item.isSelected ? 'selected' : ''\" (click)=\"optionClicked(item)\">\n <div class=\"status {{item['className']}}\" [saMenu]=\"item?.subMenu\">\n <sa-status-dot *ngIf=\"item.statusDot\" [config]=\"item?.statusDot\"></sa-status-dot>\n <sa-icon class=\"flex\" *ngIf=\"item.icon\" [icon]=\"item?.icon?.icon\" [iconPath]=\"item['icon']?.iconPath\" [iconUrl]=\"item['icon']?.iconUrl\" [size]=\"item['icon']?.size\" [customClass]=\"item['icon']?.customClass\"></sa-icon>\n <span class=\"sa-groupItem-lable\" >{{item.label}}</span>\n <div *ngIf=\"item?.subMenu\" class=\"flex ml-auto\">\n <sa-icon [icon]=\"'rightChevronOutlined'\" class=\"flex\" [size]=\"'20'\"></sa-icon>\n </div>\n </div>\n <!-- Section for showing chips if chips are available in object -->\n <div *ngIf=\"item.chips\" class=\"tags\">\n @for (itm of item.chips; track $index) {\n <sa-chip *ngIf=\"itm.text\" [type]=\"itm.type\" [state]=\"itm.state\" [filling]=\"itm.filling\"\n [text]=\"itm.text\"></sa-chip>\n <!-- <span [ngClass]=\"itm.status == 'active' ? 'tag-active' : 'tag-inactive'\" class=\"\">{{itm.label}}</span> -->\n }\n </div>\n</div>\n", styles: [".sa-menu-item{padding:12px}.sa-menu-item:hover{background-color:var(--primary-500)}.sa-menu-item:first-child{border-top-left-radius:8px;border-top-right-radius:8px}.sa-menu-item:last-child{border-bottom-left-radius:8px;border-bottom-right-radius:8px}.section-item{display:flex;justify-content:space-between;align-items:center;padding:12px}.section-item:hover{background-color:var(--primary-500)}.section-item:hover span{font-weight:500}.selected{background-color:var(--primary-500)}.section-item .tags{display:flex;gap:.25rem}.tag{background-color:#6b46c1;font-size:.2rem;padding:.25rem .5rem;border-radius:.25rem}.tag-active{background-color:#6b46c1!important;font-size:.2rem;padding:.25rem .5rem;border-radius:.25rem}.tag-inactive{background-color:#d27f2b!important;font-size:.2rem;padding:.25rem .5rem;border-radius:.25rem}.status{display:flex;align-items:center;gap:.6rem}.status-dot{width:.5rem;height:.5rem;border-radius:50%}.status-active{background-color:#48bb78}.status-inactive{background-color:#f19e4f}hr{border:0;border-top:1px solid #718096;margin-bottom:1rem}.sa-groupItem-lable{cursor:pointer;font-size:14px;font-weight:400}.flex{display:flex}.top{border-top:1px solid #475467}.bottom{border-bottom:1px solid #475467}.ml-auto{margin-left:auto}\n"] }]
|
|
2174
2198
|
}], propDecorators: { item: [{
|
|
2175
2199
|
type: Input,
|
|
2176
2200
|
args: ['item']
|
|
2177
2201
|
}], showRound: [{
|
|
2178
2202
|
type: Input,
|
|
2179
2203
|
args: ['showRound']
|
|
2204
|
+
}], onEvent: [{
|
|
2205
|
+
type: Output
|
|
2206
|
+
}], menuDirective: [{
|
|
2207
|
+
type: ViewChild,
|
|
2208
|
+
args: [forwardRef(() => MenuDirective)]
|
|
2180
2209
|
}] } });
|
|
2181
2210
|
|
|
2182
2211
|
class SAMenuComponent {
|
|
@@ -2222,11 +2251,16 @@ class SAMenuComponent {
|
|
|
2222
2251
|
// compRef.instance.body = 'sometime little bit this sometimes little bit that. Comming not comming'
|
|
2223
2252
|
// compRef.instance.avatar = '../assets/avatar.svg'
|
|
2224
2253
|
}
|
|
2254
|
+
itemClicked(event) {
|
|
2255
|
+
this.onMenuItemClick(null, event.item);
|
|
2256
|
+
}
|
|
2225
2257
|
onMenuItemClick(event, item) {
|
|
2226
2258
|
// item.isSelected = !item.isSelected;
|
|
2227
2259
|
this.onEvent.emit({ type: 'CLICK', item, menu: this.menu });
|
|
2228
2260
|
// Close the menu after the item is clicked, just like the close button
|
|
2229
|
-
|
|
2261
|
+
if (item.subMenu === null || item.subMenu === undefined) {
|
|
2262
|
+
this.closeEvent.emit(event);
|
|
2263
|
+
}
|
|
2230
2264
|
}
|
|
2231
2265
|
onSearch(event) {
|
|
2232
2266
|
this.onEvent.emit({ type: 'SEARCH', value: event.target.value });
|
|
@@ -2236,7 +2270,7 @@ class SAMenuComponent {
|
|
|
2236
2270
|
this.onEvent.emit({ type: 'TAB_CLICK', activeTab: tabname, menu: this.menu });
|
|
2237
2271
|
}
|
|
2238
2272
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: SAMenuComponent, deps: [{ token: i1$5.Overlay }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2239
|
-
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
|
|
2273
|
+
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" }, providers: [IconService], 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 @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?.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\">\n <div class=\"sa-menu-content-inner {{menu?.showSearch ? 'sa-menu-content-with-search' : ''}}\">\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 />\n <button *ngIf=\"menu?.showAddIcon\"><i class=\"fas fa-plus\"></i></button>\n </div>\n }\n \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 </div>\n\n @if(menu?.items && menu?.items?.length){\n <div *ngIf=\"menu?.user\" class=\"profile-badge\">\n <div class=\"avatar\">\n <sa-avatar [altText]=\"menu?.user?.altText\" [imagePath]=\"''\" [size]=\"'large'\"></sa-avatar>\n </div>\n <div class=\"profile-info\">\n <p class=\"profile-name\">{{menu?.user?.name}}</p>\n <p class=\"profile-email\">{{menu?.user?.email}}</p>\n </div>\n </div>\n <div class=\"sa-menu-items\">\n @for (item of menu.items; track item) {\n <sa-menu-item [item]=\"item\" (onEvent)=\"itemClicked($event)\"> </sa-menu-item>\n }\n </div>\n }\n\n</div>", styles: [".sa-menu{background-color:var(--primary-800);box-shadow:3px 4px 16px 4px #00000014;width:max-content;border-radius:5px;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;overflow-y:auto;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.3) transparent}.sa-menu-tray::-webkit-scrollbar{width:6px}.sa-menu-tray::-webkit-scrollbar-track{background:transparent}.sa-menu-tray::-webkit-scrollbar-thumb{background-color:#ffffff4d;border-radius:3px}sa-menu-item{cursor:pointer;display:block;color:var(--grey-100, #EAECF0)}.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);z-index:1}.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;margin-top:4.75rem}.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 var(--grey-400, #475467)}.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:0rem 0}.sa-menu-content-inner{padding-top:0}.sa-menu-content .sa-menu-content-with-search,.sa-menu-content-with-search.sa-menu-content-inner{padding:0}.features-tray-menu .sa-menu-content-inner{padding-top:5rem}.features-tray-menu .sa-menu-content-with-search.sa-menu-content-inner{padding-top:0}.sa-menu-group h2{margin-top:1rem}.sa-menu-group:first-child h2{margin-top:0}.sa-menu-group{margin-bottom:1rem}.profile-badge{display:flex;align-items:center;gap:8px;padding:12px;width:100%;border-bottom:1px solid var(--grey-400)}.avatar{display:flex;justify-content:center;align-items:center}.profile-info{display:flex;flex-direction:column;justify-content:center;font-weight:300}.profile-name{color:var(--structural-white);font-weight:500;font-size:12px;line-height:1.2;margin:0}.profile-email{color:var(--grey-200);font-size:11px;line-height:1.2;font-weight:400;margin:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: SAMenuItemComponent, selector: "sa-menu-item", inputs: ["item", "showRound"], outputs: ["onEvent"] }, { kind: "ngmodule", type: HttpClientModule }, { kind: "component", type: IconComponent, selector: "sa-icon", inputs: ["img", "icon", "size", "color", "iconPath", "iconUrl", "customClass", "href", "hrefTarget"], outputs: ["onClickEvent"] }, { kind: "component", type: AvatarComponent, selector: "sa-avatar", inputs: ["id", "imagePath", "altText", "size"], outputs: ["onClickEvent", "onMouseInEvent", "onMouseOutEvent"] }] }); }
|
|
2240
2274
|
}
|
|
2241
2275
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: SAMenuComponent, decorators: [{
|
|
2242
2276
|
type: Component,
|
|
@@ -2246,8 +2280,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImpor
|
|
|
2246
2280
|
MatMenu,
|
|
2247
2281
|
MatMenuItem,
|
|
2248
2282
|
ChipsComponent,
|
|
2249
|
-
|
|
2250
|
-
|
|
2283
|
+
HttpClientModule,
|
|
2284
|
+
IconComponent,
|
|
2285
|
+
AvatarComponent,
|
|
2286
|
+
], providers: [IconService], template: "<div class=\"sa-menu\" [ngClass]=\"menu.showTray ? 'sa-menu-tray sa-round-border' : ''\"\n [ngStyle]=\"{width: menu.width || 'max-content'}\">\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?.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\">\n <div class=\"sa-menu-content-inner {{menu?.showSearch ? 'sa-menu-content-with-search' : ''}}\">\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 />\n <button *ngIf=\"menu?.showAddIcon\"><i class=\"fas fa-plus\"></i></button>\n </div>\n }\n \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 </div>\n\n @if(menu?.items && menu?.items?.length){\n <div *ngIf=\"menu?.user\" class=\"profile-badge\">\n <div class=\"avatar\">\n <sa-avatar [altText]=\"menu?.user?.altText\" [imagePath]=\"''\" [size]=\"'large'\"></sa-avatar>\n </div>\n <div class=\"profile-info\">\n <p class=\"profile-name\">{{menu?.user?.name}}</p>\n <p class=\"profile-email\">{{menu?.user?.email}}</p>\n </div>\n </div>\n <div class=\"sa-menu-items\">\n @for (item of menu.items; track item) {\n <sa-menu-item [item]=\"item\" (onEvent)=\"itemClicked($event)\"> </sa-menu-item>\n }\n </div>\n }\n\n</div>", styles: [".sa-menu{background-color:var(--primary-800);box-shadow:3px 4px 16px 4px #00000014;width:max-content;border-radius:5px;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;overflow-y:auto;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.3) transparent}.sa-menu-tray::-webkit-scrollbar{width:6px}.sa-menu-tray::-webkit-scrollbar-track{background:transparent}.sa-menu-tray::-webkit-scrollbar-thumb{background-color:#ffffff4d;border-radius:3px}sa-menu-item{cursor:pointer;display:block;color:var(--grey-100, #EAECF0)}.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);z-index:1}.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;margin-top:4.75rem}.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 var(--grey-400, #475467)}.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:0rem 0}.sa-menu-content-inner{padding-top:0}.sa-menu-content .sa-menu-content-with-search,.sa-menu-content-with-search.sa-menu-content-inner{padding:0}.features-tray-menu .sa-menu-content-inner{padding-top:5rem}.features-tray-menu .sa-menu-content-with-search.sa-menu-content-inner{padding-top:0}.sa-menu-group h2{margin-top:1rem}.sa-menu-group:first-child h2{margin-top:0}.sa-menu-group{margin-bottom:1rem}.profile-badge{display:flex;align-items:center;gap:8px;padding:12px;width:100%;border-bottom:1px solid var(--grey-400)}.avatar{display:flex;justify-content:center;align-items:center}.profile-info{display:flex;flex-direction:column;justify-content:center;font-weight:300}.profile-name{color:var(--structural-white);font-weight:500;font-size:12px;line-height:1.2;margin:0}.profile-email{color:var(--grey-200);font-size:11px;line-height:1.2;font-weight:400;margin:0}\n"] }]
|
|
2251
2287
|
}], ctorParameters: () => [{ type: i1$5.Overlay }], propDecorators: { position: [{
|
|
2252
2288
|
type: Input
|
|
2253
2289
|
}], menu: [{
|
|
@@ -2340,9 +2376,16 @@ class MenuDirective {
|
|
|
2340
2376
|
attachMenu() {
|
|
2341
2377
|
const hostElement = this.elRef.nativeElement;
|
|
2342
2378
|
const menuPortal = new ComponentPortal(SAMenuComponent);
|
|
2379
|
+
// Get the base position from MENU_POSITIONS
|
|
2380
|
+
const basePosition = MENU_POSITIONS[this._position];
|
|
2381
|
+
// Create the position strategy with fallback to MENU_POSITIONS if overlayConfig is not provided
|
|
2343
2382
|
const positionStrategy = this.overlay.position()
|
|
2344
2383
|
.flexibleConnectedTo(hostElement) // Position relative to the target element (the button)
|
|
2345
|
-
.withPositions([{
|
|
2384
|
+
.withPositions([{
|
|
2385
|
+
...basePosition,
|
|
2386
|
+
offsetX: this._saMenu.overlayConfig?.offsetX !== undefined ? this._saMenu.overlayConfig.offsetX : basePosition.offsetX,
|
|
2387
|
+
offsetY: this._saMenu.overlayConfig?.offsetY !== undefined ? this._saMenu.overlayConfig.offsetY : basePosition.offsetY
|
|
2388
|
+
}]);
|
|
2346
2389
|
// Add custom class to the overlay container
|
|
2347
2390
|
this.overlayContainer.getContainerElement().classList.add('sa-menu-overlay-container');
|
|
2348
2391
|
this.overlayRef = this.overlay.create({
|
|
@@ -2615,7 +2658,7 @@ class LeftNavComponent {
|
|
|
2615
2658
|
});
|
|
2616
2659
|
}
|
|
2617
2660
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: LeftNavComponent, deps: [{ token: i1$6.ActivatedRoute }, { token: i1$6.Router }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2618
|
-
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" }, usesOnChanges: true, 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'\" matTooltipClass=\"sa-left-nav-tooltip\" [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)\"\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\" matTooltipClass=\"sa-left-nav-tooltip\">\n\n <sa-icon class=\"sa-left-nav-item-icon\" [icon]=\"item.icon\" [size]=\"item.iconSize || '24'\" [color]=\"item.active ? item.color : 'var(--grey-200)'\"></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\" [ngClass]=\"item.active ? 'active' : '' \">{{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\" matTooltipClass=\"sa-left-nav-tooltip sa-left-nav-template-tooltip\" [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)\" (onEvent)=\"onEvent.emit($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\" matTooltipClass=\"sa-left-nav-tooltip\">\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 clasi ss=\"sa-left-nav-footer-icon\"\n [ngStyle]=\"{ 'background-image': 'url(' + item.icon_url || '' + ')' }\"></span> -->\n }\n </div>\n <p class=\"sa-icon-label\" [ngClass]=\"item.active ? 'active' : '' \">{{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 width=\"20\" height=\"38\" 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:0;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;transition:all .3s ease}.sa-icon-label{color:var(--grey-200);font-size:var(--small-10px,10px);text-align:center;margin:0}.sa-icon-label.active{color:var(--structural-white, #FFF);font-weight:500}::-webkit-scrollbar{display:none}.sa-left-nav-footer-item{margin:0 auto;gap:0;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)}::ng-deep .sa-left-nav-item.active .sa-left-nav-item-icon .sa-icon{color:var(--structural-white, #FFF)}.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)}::ng-deep .mat-mdc-tooltip-panel-right .sa-left-nav-tooltip{margin-left:8px!important}::ng-deep .sa-left-nav-template-tooltip.mat-mdc-tooltip{margin-left:16px!important}::ng-deep .sa-left-nav-tooltip.mat-mdc-tooltip{position:relative}::ng-deep .mat-mdc-tooltip-panel-right .sa-left-nav-tooltip.mat-mdc-tooltip:before{content:\"\";position:absolute;left:-6px;top:50%;transform:translateY(-50%);border-top:6px solid transparent;border-bottom:6px solid transparent;border-right:6px solid var(--mdc-plain-tooltip-container-color, rgba(97, 97, 97, .9))}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.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: i1.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"] }] }); }
|
|
2661
|
+
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" }, providers: [IconService], usesOnChanges: true, 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'\" matTooltipClass=\"sa-left-nav-tooltip\" [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)\"\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\" matTooltipClass=\"sa-left-nav-tooltip\">\n\n <sa-icon class=\"sa-left-nav-item-icon\" [icon]=\"item.icon\" [size]=\"item.iconSize || '24'\" [color]=\"item.active ? item.color : 'var(--grey-200)'\"></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\" [ngClass]=\"item.active ? 'active' : '' \">{{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\" matTooltipClass=\"sa-left-nav-tooltip sa-left-nav-template-tooltip\" [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)\" (onEvent)=\"onEvent.emit($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\" matTooltipClass=\"sa-left-nav-tooltip\">\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 clasi ss=\"sa-left-nav-footer-icon\"\n [ngStyle]=\"{ 'background-image': 'url(' + item.icon_url || '' + ')' }\"></span> -->\n }\n </div>\n <p class=\"sa-icon-label\" [ngClass]=\"item.active ? 'active' : '' \">{{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 width=\"20\" height=\"38\" 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:0;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;transition:all .3s ease}.sa-icon-label{color:var(--grey-200, #D0D5DD);font-size:var(--small-10px, 10px);text-align:center;margin:0;width:62px;line-height:12px;word-break:break-word;overflow-wrap:break-word;-webkit-hyphens:auto;hyphens:auto;display:block;max-height:24px}.sa-icon-label.active{color:var(--structural-white, #FFF);font-weight:500}::-webkit-scrollbar{display:none}.sa-left-nav-footer-item{gap:0;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)}::ng-deep .sa-left-nav-item.active .sa-left-nav-item-icon .sa-icon{color:var(--structural-white, #FFF)}.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% - 74px)}.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)}::ng-deep .mat-mdc-tooltip-panel-right .sa-left-nav-tooltip{margin-left:8px!important}::ng-deep .sa-left-nav-template-tooltip.mat-mdc-tooltip{margin-left:16px!important}::ng-deep .sa-left-nav-tooltip.mat-mdc-tooltip{position:relative}::ng-deep .mat-mdc-tooltip-panel-right .sa-left-nav-tooltip.mat-mdc-tooltip:before{content:\"\";position:absolute;left:-6px;top:50%;transform:translateY(-50%);border-top:6px solid transparent;border-bottom:6px solid transparent;border-right:6px solid var(--mdc-plain-tooltip-container-color, rgba(97, 97, 97, .9))}::ng-deep .sa-left-nav-footer-item .avatar .avatar-img{border:2px solid var(--primary-500);display:flex;align-items:center;justify-content:center}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.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: i1.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"] }] }); }
|
|
2619
2662
|
}
|
|
2620
2663
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: LeftNavComponent, decorators: [{
|
|
2621
2664
|
type: Component,
|
|
@@ -2627,7 +2670,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImpor
|
|
|
2627
2670
|
MenuDirective,
|
|
2628
2671
|
SAMenuComponent,
|
|
2629
2672
|
IconComponent
|
|
2630
|
-
], 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'\" matTooltipClass=\"sa-left-nav-tooltip\" [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)\"\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\" matTooltipClass=\"sa-left-nav-tooltip\">\n\n <sa-icon class=\"sa-left-nav-item-icon\" [icon]=\"item.icon\" [size]=\"item.iconSize || '24'\" [color]=\"item.active ? item.color : 'var(--grey-200)'\"></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\" [ngClass]=\"item.active ? 'active' : '' \">{{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\" matTooltipClass=\"sa-left-nav-tooltip sa-left-nav-template-tooltip\" [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)\" (onEvent)=\"onEvent.emit($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\" matTooltipClass=\"sa-left-nav-tooltip\">\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 clasi ss=\"sa-left-nav-footer-icon\"\n [ngStyle]=\"{ 'background-image': 'url(' + item.icon_url || '' + ')' }\"></span> -->\n }\n </div>\n <p class=\"sa-icon-label\" [ngClass]=\"item.active ? 'active' : '' \">{{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 width=\"20\" height=\"38\" 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:0;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;transition:all .3s ease}.sa-icon-label{color:var(--grey-200);font-size:var(--small-10px,10px);text-align:center;margin:0}.sa-icon-label.active{color:var(--structural-white, #FFF);font-weight:500}::-webkit-scrollbar{display:none}.sa-left-nav-footer-item{margin:0 auto;gap:0;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)}::ng-deep .sa-left-nav-item.active .sa-left-nav-item-icon .sa-icon{color:var(--structural-white, #FFF)}.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)}::ng-deep .mat-mdc-tooltip-panel-right .sa-left-nav-tooltip{margin-left:8px!important}::ng-deep .sa-left-nav-template-tooltip.mat-mdc-tooltip{margin-left:16px!important}::ng-deep .sa-left-nav-tooltip.mat-mdc-tooltip{position:relative}::ng-deep .mat-mdc-tooltip-panel-right .sa-left-nav-tooltip.mat-mdc-tooltip:before{content:\"\";position:absolute;left:-6px;top:50%;transform:translateY(-50%);border-top:6px solid transparent;border-bottom:6px solid transparent;border-right:6px solid var(--mdc-plain-tooltip-container-color, rgba(97, 97, 97, .9))}\n"] }]
|
|
2673
|
+
], providers: [IconService], 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'\" matTooltipClass=\"sa-left-nav-tooltip\" [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)\"\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\" matTooltipClass=\"sa-left-nav-tooltip\">\n\n <sa-icon class=\"sa-left-nav-item-icon\" [icon]=\"item.icon\" [size]=\"item.iconSize || '24'\" [color]=\"item.active ? item.color : 'var(--grey-200)'\"></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\" [ngClass]=\"item.active ? 'active' : '' \">{{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\" matTooltipClass=\"sa-left-nav-tooltip sa-left-nav-template-tooltip\" [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)\" (onEvent)=\"onEvent.emit($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\" matTooltipClass=\"sa-left-nav-tooltip\">\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 clasi ss=\"sa-left-nav-footer-icon\"\n [ngStyle]=\"{ 'background-image': 'url(' + item.icon_url || '' + ')' }\"></span> -->\n }\n </div>\n <p class=\"sa-icon-label\" [ngClass]=\"item.active ? 'active' : '' \">{{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 width=\"20\" height=\"38\" 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:0;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;transition:all .3s ease}.sa-icon-label{color:var(--grey-200, #D0D5DD);font-size:var(--small-10px, 10px);text-align:center;margin:0;width:62px;line-height:12px;word-break:break-word;overflow-wrap:break-word;-webkit-hyphens:auto;hyphens:auto;display:block;max-height:24px}.sa-icon-label.active{color:var(--structural-white, #FFF);font-weight:500}::-webkit-scrollbar{display:none}.sa-left-nav-footer-item{gap:0;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)}::ng-deep .sa-left-nav-item.active .sa-left-nav-item-icon .sa-icon{color:var(--structural-white, #FFF)}.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% - 74px)}.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)}::ng-deep .mat-mdc-tooltip-panel-right .sa-left-nav-tooltip{margin-left:8px!important}::ng-deep .sa-left-nav-template-tooltip.mat-mdc-tooltip{margin-left:16px!important}::ng-deep .sa-left-nav-tooltip.mat-mdc-tooltip{position:relative}::ng-deep .mat-mdc-tooltip-panel-right .sa-left-nav-tooltip.mat-mdc-tooltip:before{content:\"\";position:absolute;left:-6px;top:50%;transform:translateY(-50%);border-top:6px solid transparent;border-bottom:6px solid transparent;border-right:6px solid var(--mdc-plain-tooltip-container-color, rgba(97, 97, 97, .9))}::ng-deep .sa-left-nav-footer-item .avatar .avatar-img{border:2px solid var(--primary-500);display:flex;align-items:center;justify-content:center}\n"] }]
|
|
2631
2674
|
}], ctorParameters: () => [{ type: i1$6.ActivatedRoute }, { type: i1$6.Router }], propDecorators: { config: [{
|
|
2632
2675
|
type: Input,
|
|
2633
2676
|
args: ['config']
|