@sarasanalytics-com/design-system 0.0.114 → 0.0.115
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/lib/chips/chips.component.mjs +1 -1
- package/esm2022/lib/icon/icon.component.mjs +1 -1
- package/esm2022/lib/left-nav/left-nav.component.mjs +38 -7
- package/esm2022/lib/menu/menu-list/menu-item.component.mjs +18 -0
- package/esm2022/lib/menu/menu.component.mjs +100 -0
- package/esm2022/lib/menu/menu.directive.mjs +116 -0
- package/fesm2022/sarasanalytics-com-design-system.mjs +258 -13
- package/fesm2022/sarasanalytics-com-design-system.mjs.map +1 -1
- package/lib/chips/chips.component.d.ts +8 -0
- package/lib/icon/icon.component.d.ts +8 -0
- package/lib/left-nav/left-nav.component.d.ts +9 -1
- package/lib/menu/menu-list/menu-item.component.d.ts +7 -0
- package/lib/menu/menu.component.d.ts +22 -0
- package/lib/menu/menu.directive.d.ts +50 -0
- package/package.json +2 -2
- package/styles/styles.css +0 -428
|
@@ -0,0 +1,116 @@
|
|
|
1
|
+
import { Directive, EventEmitter, HostListener, Input, Output } from '@angular/core';
|
|
2
|
+
import { SAMenuComponent } from './menu.component';
|
|
3
|
+
import { ComponentPortal } from '@angular/cdk/portal';
|
|
4
|
+
import * as i0 from "@angular/core";
|
|
5
|
+
import * as i1 from "@angular/cdk/overlay";
|
|
6
|
+
export class MenuDirective {
|
|
7
|
+
get saMenu() {
|
|
8
|
+
return this._saMenu;
|
|
9
|
+
}
|
|
10
|
+
set saMenu(value) {
|
|
11
|
+
this._saMenu = value;
|
|
12
|
+
}
|
|
13
|
+
get position() {
|
|
14
|
+
return this._position;
|
|
15
|
+
}
|
|
16
|
+
set position(value) {
|
|
17
|
+
this._position = value;
|
|
18
|
+
}
|
|
19
|
+
constructor(overlay, elRef) {
|
|
20
|
+
this.overlay = overlay;
|
|
21
|
+
this.elRef = elRef;
|
|
22
|
+
// @Input('saMenuObj') saMenuObj = {};
|
|
23
|
+
this.saMenuRef = null;
|
|
24
|
+
this.onMenuEvent = new EventEmitter();
|
|
25
|
+
this.onEvent = new EventEmitter();
|
|
26
|
+
this._position = 'right';
|
|
27
|
+
}
|
|
28
|
+
onClick(e) {
|
|
29
|
+
if (!!this._saMenu?.items?.length || !!this._saMenu?.itemGroups?.length)
|
|
30
|
+
this.attachMenu();
|
|
31
|
+
}
|
|
32
|
+
ngAfterViewInit() {
|
|
33
|
+
}
|
|
34
|
+
attachMenu() {
|
|
35
|
+
const hostElement = this.elRef.nativeElement;
|
|
36
|
+
const menuPortal = new ComponentPortal(SAMenuComponent);
|
|
37
|
+
const positionStrategy = this.overlay.position()
|
|
38
|
+
.flexibleConnectedTo(hostElement) // Position relative to the target element (the button)
|
|
39
|
+
.withPositions([{ ...MENU_POSITIONS[this._position], ...(this._saMenu.overlayConfig || {}) }]);
|
|
40
|
+
const overlayRef = this.overlay.create({ positionStrategy, scrollStrategy: this.overlay.scrollStrategies.reposition() });
|
|
41
|
+
const compRef = overlayRef.attach(menuPortal);
|
|
42
|
+
compRef.instance.menu = this.saMenu;
|
|
43
|
+
compRef.instance.hostEl = hostElement;
|
|
44
|
+
// Subscribe to menu component events and emit them
|
|
45
|
+
compRef.instance.onEvent.subscribe((res) => {
|
|
46
|
+
this.onEvent.emit(res);
|
|
47
|
+
});
|
|
48
|
+
compRef.instance.closeEvent.subscribe((res) => {
|
|
49
|
+
overlayRef.dispose();
|
|
50
|
+
});
|
|
51
|
+
overlayRef.outsidePointerEvents().subscribe(() => {
|
|
52
|
+
overlayRef.dispose();
|
|
53
|
+
});
|
|
54
|
+
}
|
|
55
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: MenuDirective, deps: [{ token: i1.Overlay }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
56
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.2.4", type: MenuDirective, isStandalone: true, selector: "[saMenu]", inputs: { saMenuRef: "saMenuRef", saMenu: "saMenu", position: ["saManuPosition", "position"] }, outputs: { onMenuEvent: "onMenuEvent", onEvent: "onEvent" }, host: { listeners: { "click": "onClick($event)" } }, ngImport: i0 }); }
|
|
57
|
+
}
|
|
58
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: MenuDirective, decorators: [{
|
|
59
|
+
type: Directive,
|
|
60
|
+
args: [{
|
|
61
|
+
selector: '[saMenu]',
|
|
62
|
+
standalone: true
|
|
63
|
+
}]
|
|
64
|
+
}], ctorParameters: () => [{ type: i1.Overlay }, { type: i0.ElementRef }], propDecorators: { saMenuRef: [{
|
|
65
|
+
type: Input,
|
|
66
|
+
args: ['saMenuRef']
|
|
67
|
+
}], onMenuEvent: [{
|
|
68
|
+
type: Output,
|
|
69
|
+
args: ['onMenuEvent']
|
|
70
|
+
}], onEvent: [{
|
|
71
|
+
type: Output
|
|
72
|
+
}], saMenu: [{
|
|
73
|
+
type: Input,
|
|
74
|
+
args: ['saMenu']
|
|
75
|
+
}], position: [{
|
|
76
|
+
type: Input,
|
|
77
|
+
args: ['saManuPosition']
|
|
78
|
+
}], onClick: [{
|
|
79
|
+
type: HostListener,
|
|
80
|
+
args: ['click', ['$event']]
|
|
81
|
+
}] } });
|
|
82
|
+
const MENU_POSITIONS = {
|
|
83
|
+
'right': {
|
|
84
|
+
originX: 'end',
|
|
85
|
+
originY: 'center',
|
|
86
|
+
overlayX: 'start',
|
|
87
|
+
overlayY: 'center',
|
|
88
|
+
offsetX: 20,
|
|
89
|
+
offsetY: 0
|
|
90
|
+
},
|
|
91
|
+
'left': {
|
|
92
|
+
originX: 'start',
|
|
93
|
+
originY: 'center',
|
|
94
|
+
overlayX: 'end',
|
|
95
|
+
overlayY: 'center',
|
|
96
|
+
offsetX: 20,
|
|
97
|
+
offsetY: 0
|
|
98
|
+
},
|
|
99
|
+
'top': {
|
|
100
|
+
originX: 'center',
|
|
101
|
+
originY: 'top',
|
|
102
|
+
overlayX: 'center',
|
|
103
|
+
overlayY: 'bottom',
|
|
104
|
+
offsetX: 0,
|
|
105
|
+
offsetY: 20
|
|
106
|
+
},
|
|
107
|
+
'bottom': {
|
|
108
|
+
originX: 'center',
|
|
109
|
+
originY: 'bottom',
|
|
110
|
+
overlayX: 'center',
|
|
111
|
+
overlayY: 'top',
|
|
112
|
+
offsetX: 0,
|
|
113
|
+
offsetY: 20
|
|
114
|
+
}
|
|
115
|
+
};
|
|
116
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibWVudS5kaXJlY3RpdmUuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9jb21wb25lbnQtbGlicmFyeS9zcmMvbGliL21lbnUvbWVudS5kaXJlY3RpdmUudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQ0EsT0FBTyxFQUFFLFNBQVMsRUFBYyxZQUFZLEVBQUUsWUFBWSxFQUFFLEtBQUssRUFBRSxNQUFNLEVBQWlDLE1BQU0sZUFBZSxDQUFDO0FBQ2hJLE9BQU8sRUFBRSxlQUFlLEVBQUUsTUFBTSxrQkFBa0IsQ0FBQztBQUNuRCxPQUFPLEVBQUUsZUFBZSxFQUFFLE1BQU0scUJBQXFCLENBQUM7OztBQVF0RCxNQUFNLE9BQU8sYUFBYTtJQVN4QixJQUNJLE1BQU07UUFDUixPQUFPLElBQUksQ0FBQyxPQUFPLENBQUM7SUFDdEIsQ0FBQztJQUVELElBQUksTUFBTSxDQUFDLEtBQVk7UUFDckIsSUFBSSxDQUFDLE9BQU8sR0FBRyxLQUFLLENBQUM7SUFDdkIsQ0FBQztJQUVELElBQ0ksUUFBUTtRQUNWLE9BQU8sSUFBSSxDQUFDLFNBQVMsQ0FBQztJQUN4QixDQUFDO0lBQ0QsSUFBSSxRQUFRLENBQUMsS0FBMEM7UUFDckQsSUFBSSxDQUFDLFNBQVMsR0FBRyxLQUFLLENBQUM7SUFDekIsQ0FBQztJQUVELFlBQ1UsT0FBZ0IsRUFDaEIsS0FBZ0I7UUFEaEIsWUFBTyxHQUFQLE9BQU8sQ0FBUztRQUNoQixVQUFLLEdBQUwsS0FBSyxDQUFXO1FBMUIxQixzQ0FBc0M7UUFDbEIsY0FBUyxHQUFzRCxJQUFJLENBQUM7UUFDakUsZ0JBQVcsR0FBc0IsSUFBSSxZQUFZLEVBQUUsQ0FBQztRQUNqRSxZQUFPLEdBQXNCLElBQUksWUFBWSxFQUFFLENBQUM7UUFHMUQsY0FBUyxHQUF3QyxPQUFPLENBQUM7SUFxQnRELENBQUM7SUFHSixPQUFPLENBQUMsQ0FBQztRQUNQLElBQUcsQ0FBQyxDQUFDLElBQUksQ0FBQyxPQUFPLEVBQUUsS0FBSyxFQUFFLE1BQU0sSUFBSSxDQUFDLENBQUMsSUFBSSxDQUFDLE9BQU8sRUFBRSxVQUFVLEVBQUUsTUFBTTtZQUNwRSxJQUFJLENBQUMsVUFBVSxFQUFFLENBQUM7SUFDdEIsQ0FBQztJQUVELGVBQWU7SUFDZixDQUFDO0lBRUQsVUFBVTtRQUNSLE1BQU0sV0FBVyxHQUFHLElBQUksQ0FBQyxLQUFLLENBQUMsYUFBYSxDQUFDO1FBQzdDLE1BQU0sVUFBVSxHQUFHLElBQUksZUFBZSxDQUFDLGVBQWUsQ0FBQyxDQUFDO1FBQ3hELE1BQU0sZ0JBQWdCLEdBQXFCLElBQUksQ0FBQyxPQUFPLENBQUMsUUFBUSxFQUFFO2FBQy9ELG1CQUFtQixDQUFDLFdBQVcsQ0FBQyxDQUFFLHVEQUF1RDthQUN6RixhQUFhLENBQUMsQ0FBQyxFQUFDLEdBQUcsY0FBYyxDQUFDLElBQUksQ0FBQyxTQUFTLENBQUMsRUFBRSxHQUFHLENBQUMsSUFBSSxDQUFDLE9BQU8sQ0FBQyxhQUFhLElBQUksRUFBRSxDQUFDLEVBQUMsQ0FBQyxDQUFDLENBQUM7UUFFL0YsTUFBTSxVQUFVLEdBQUcsSUFBSSxDQUFDLE9BQU8sQ0FBQyxNQUFNLENBQUMsRUFBQyxnQkFBZ0IsRUFBRSxjQUFjLEVBQUUsSUFBSSxDQUFDLE9BQU8sQ0FBQyxnQkFBZ0IsQ0FBQyxVQUFVLEVBQUUsRUFBQyxDQUFDLENBQUM7UUFDdkgsTUFBTSxPQUFPLEdBQUcsVUFBVSxDQUFDLE1BQU0sQ0FBQyxVQUFVLENBQUMsQ0FBQztRQUM5QyxPQUFPLENBQUMsUUFBUSxDQUFDLElBQUksR0FBRyxJQUFJLENBQUMsTUFBTSxDQUFDO1FBQ3BDLE9BQU8sQ0FBQyxRQUFRLENBQUMsTUFBTSxHQUFHLFdBQVcsQ0FBQztRQUV0QyxtREFBbUQ7UUFDbkQsT0FBTyxDQUFDLFFBQVEsQ0FBQyxPQUFPLENBQUMsU0FBUyxDQUFDLENBQUMsR0FBRyxFQUFFLEVBQUU7WUFDekMsSUFBSSxDQUFDLE9BQU8sQ0FBQyxJQUFJLENBQUMsR0FBRyxDQUFDLENBQUM7UUFDekIsQ0FBQyxDQUFDLENBQUM7UUFFSCxPQUFPLENBQUMsUUFBUSxDQUFDLFVBQVUsQ0FBQyxTQUFTLENBQUMsQ0FBQyxHQUFHLEVBQUMsRUFBRTtZQUMzQyxVQUFVLENBQUMsT0FBTyxFQUFFLENBQUM7UUFDdkIsQ0FBQyxDQUFDLENBQUE7UUFFRixVQUFVLENBQUMsb0JBQW9CLEVBQUUsQ0FBQyxTQUFTLENBQUMsR0FBRSxFQUFFO1lBQzlDLFVBQVUsQ0FBQyxPQUFPLEVBQUUsQ0FBQztRQUN2QixDQUFDLENBQUMsQ0FBQTtJQUNKLENBQUM7OEdBaEVVLGFBQWE7a0dBQWIsYUFBYTs7MkZBQWIsYUFBYTtrQkFKekIsU0FBUzttQkFBQztvQkFDVCxRQUFRLEVBQUUsVUFBVTtvQkFDcEIsVUFBVSxFQUFFLElBQUk7aUJBQ2pCO3FHQUlxQixTQUFTO3NCQUE1QixLQUFLO3VCQUFDLFdBQVc7Z0JBQ0ssV0FBVztzQkFBakMsTUFBTTt1QkFBQyxhQUFhO2dCQUNYLE9BQU87c0JBQWhCLE1BQU07Z0JBS0gsTUFBTTtzQkFEVCxLQUFLO3VCQUFDLFFBQVE7Z0JBVVgsUUFBUTtzQkFEWCxLQUFLO3VCQUFDLGdCQUFnQjtnQkFjdkIsT0FBTztzQkFETixZQUFZO3VCQUFDLE9BQU8sRUFBRSxDQUFDLFFBQVEsQ0FBQzs7QUFtRW5DLE1BQU0sY0FBYyxHQUFzQjtJQUN4QyxPQUFPLEVBQUU7UUFDUCxPQUFPLEVBQUUsS0FBSztRQUNkLE9BQU8sRUFBRSxRQUFRO1FBQ2pCLFFBQVEsRUFBRSxPQUFPO1FBQ2pCLFFBQVEsRUFBRSxRQUFRO1FBQ2xCLE9BQU8sRUFBRSxFQUFFO1FBQ1gsT0FBTyxFQUFFLENBQUM7S0FDWDtJQUNELE1BQU0sRUFBRTtRQUNOLE9BQU8sRUFBRSxPQUFPO1FBQ2hCLE9BQU8sRUFBRSxRQUFRO1FBQ2pCLFFBQVEsRUFBRSxLQUFLO1FBQ2YsUUFBUSxFQUFFLFFBQVE7UUFDbEIsT0FBTyxFQUFFLEVBQUU7UUFDWCxPQUFPLEVBQUUsQ0FBQztLQUNYO0lBQ0QsS0FBSyxFQUFFO1FBQ0wsT0FBTyxFQUFFLFFBQVE7UUFDakIsT0FBTyxFQUFFLEtBQUs7UUFDZCxRQUFRLEVBQUUsUUFBUTtRQUNsQixRQUFRLEVBQUUsUUFBUTtRQUNsQixPQUFPLEVBQUUsQ0FBQztRQUNWLE9BQU8sRUFBRSxFQUFFO0tBQ1o7SUFDRCxRQUFRLEVBQUU7UUFDUixPQUFPLEVBQUUsUUFBUTtRQUNqQixPQUFPLEVBQUUsUUFBUTtRQUNqQixRQUFRLEVBQUUsUUFBUTtRQUNsQixRQUFRLEVBQUUsS0FBSztRQUNmLE9BQU8sRUFBRSxDQUFDO1FBQ1YsT0FBTyxFQUFFLEVBQUU7S0FDWjtDQUNGLENBQUEiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb25uZWN0ZWRQb3NpdGlvbiwgQ29ubmVjdGlvblBvc2l0aW9uUGFpciwgRmxleGlibGVDb25uZWN0ZWRQb3NpdGlvblN0cmF0ZWd5T3JpZ2luLCBPdmVybGF5LCBQb3NpdGlvblN0cmF0ZWd5IH0gZnJvbSAnQGFuZ3VsYXIvY2RrL292ZXJsYXknO1xuaW1wb3J0IHsgRGlyZWN0aXZlLCBFbGVtZW50UmVmLCBFdmVudEVtaXR0ZXIsIEhvc3RMaXN0ZW5lciwgSW5wdXQsIE91dHB1dCwgVGVtcGxhdGVSZWYsIFZpZXdDb250YWluZXJSZWYgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IFNBTWVudUNvbXBvbmVudCB9IGZyb20gJy4vbWVudS5jb21wb25lbnQnO1xuaW1wb3J0IHsgQ29tcG9uZW50UG9ydGFsIH0gZnJvbSAnQGFuZ3VsYXIvY2RrL3BvcnRhbCc7XG5pbXBvcnQgeyBJQ2hpcCB9IGZyb20gJy4uL2NoaXBzL2NoaXBzLmNvbXBvbmVudCc7XG5pbXBvcnQgeyBzYUljb24gfSBmcm9tICcuLi9pY29uL2ljb24uY29tcG9uZW50JztcblxuQERpcmVjdGl2ZSh7XG4gIHNlbGVjdG9yOiAnW3NhTWVudV0nLFxuICBzdGFuZGFsb25lOiB0cnVlXG59KVxuZXhwb3J0IGNsYXNzIE1lbnVEaXJlY3RpdmUge1xuXG4gIC8vIEBJbnB1dCgnc2FNZW51T2JqJykgc2FNZW51T2JqID0ge307XG4gIEBJbnB1dCgnc2FNZW51UmVmJykgc2FNZW51UmVmOiBWaWV3Q29udGFpbmVyUmVmIHwgVGVtcGxhdGVSZWY8RWxlbWVudFJlZj4gfCBudWxsID0gbnVsbDtcbiAgQE91dHB1dCgnb25NZW51RXZlbnQnKSBvbk1lbnVFdmVudDogRXZlbnRFbWl0dGVyPGFueT4gPSBuZXcgRXZlbnRFbWl0dGVyKCk7XG4gIEBPdXRwdXQoKSBvbkV2ZW50OiBFdmVudEVtaXR0ZXI8YW55PiA9IG5ldyBFdmVudEVtaXR0ZXIoKTtcblxuICBfc2FNZW51OiBJTWVudTtcbiAgX3Bvc2l0aW9uOiAnbGVmdCcgfCAncmlnaHQnIHwgJ3RvcCcgfCAnYm90dG9tJyA9ICdyaWdodCc7XG4gIEBJbnB1dCgnc2FNZW51JylcbiAgZ2V0IHNhTWVudSgpOiBJTWVudSB7XG4gICAgcmV0dXJuIHRoaXMuX3NhTWVudTtcbiAgfVxuXG4gIHNldCBzYU1lbnUodmFsdWU6IElNZW51KSB7XG4gICAgdGhpcy5fc2FNZW51ID0gdmFsdWU7XG4gIH1cblxuICBASW5wdXQoJ3NhTWFudVBvc2l0aW9uJylcbiAgZ2V0IHBvc2l0aW9uKCl7XG4gICAgcmV0dXJuIHRoaXMuX3Bvc2l0aW9uO1xuICB9XG4gIHNldCBwb3NpdGlvbih2YWx1ZTogJ2xlZnQnIHwgJ3JpZ2h0JyB8ICd0b3AnIHwgJ2JvdHRvbScpe1xuICAgIHRoaXMuX3Bvc2l0aW9uID0gdmFsdWU7XG4gIH1cblxuICBjb25zdHJ1Y3RvcihcbiAgICBwcml2YXRlIG92ZXJsYXk6IE92ZXJsYXksXG4gICAgcHJpdmF0ZSBlbFJlZjpFbGVtZW50UmVmXG4gICkge31cblxuICBASG9zdExpc3RlbmVyKCdjbGljaycsIFsnJGV2ZW50J10pXG4gIG9uQ2xpY2soZSkge1xuICAgIGlmKCEhdGhpcy5fc2FNZW51Py5pdGVtcz8ubGVuZ3RoIHx8ICEhdGhpcy5fc2FNZW51Py5pdGVtR3JvdXBzPy5sZW5ndGgpXG4gICAgICB0aGlzLmF0dGFjaE1lbnUoKTtcbiAgfVxuXG4gIG5nQWZ0ZXJWaWV3SW5pdCgpe1xuICB9XG5cbiAgYXR0YWNoTWVudSgpe1xuICAgIGNvbnN0IGhvc3RFbGVtZW50ID0gdGhpcy5lbFJlZi5uYXRpdmVFbGVtZW50O1xuICAgIGNvbnN0IG1lbnVQb3J0YWwgPSBuZXcgQ29tcG9uZW50UG9ydGFsKFNBTWVudUNvbXBvbmVudCk7XG4gICAgY29uc3QgcG9zaXRpb25TdHJhdGVneTogUG9zaXRpb25TdHJhdGVneSA9IHRoaXMub3ZlcmxheS5wb3NpdGlvbigpXG4gICAgICAuZmxleGlibGVDb25uZWN0ZWRUbyhob3N0RWxlbWVudCkgIC8vIFBvc2l0aW9uIHJlbGF0aXZlIHRvIHRoZSB0YXJnZXQgZWxlbWVudCAodGhlIGJ1dHRvbilcbiAgICAgIC53aXRoUG9zaXRpb25zKFt7Li4uTUVOVV9QT1NJVElPTlNbdGhpcy5fcG9zaXRpb25dLCAuLi4odGhpcy5fc2FNZW51Lm92ZXJsYXlDb25maWcgfHwge30pfV0pO1xuXG4gICAgY29uc3Qgb3ZlcmxheVJlZiA9IHRoaXMub3ZlcmxheS5jcmVhdGUoe3Bvc2l0aW9uU3RyYXRlZ3ksIHNjcm9sbFN0cmF0ZWd5OiB0aGlzLm92ZXJsYXkuc2Nyb2xsU3RyYXRlZ2llcy5yZXBvc2l0aW9uKCl9KTtcbiAgICBjb25zdCBjb21wUmVmID0gb3ZlcmxheVJlZi5hdHRhY2gobWVudVBvcnRhbCk7XG4gICAgY29tcFJlZi5pbnN0YW5jZS5tZW51ID0gdGhpcy5zYU1lbnU7XG4gICAgY29tcFJlZi5pbnN0YW5jZS5ob3N0RWwgPSBob3N0RWxlbWVudDtcblxuICAgIC8vIFN1YnNjcmliZSB0byBtZW51IGNvbXBvbmVudCBldmVudHMgYW5kIGVtaXQgdGhlbVxuICAgIGNvbXBSZWYuaW5zdGFuY2Uub25FdmVudC5zdWJzY3JpYmUoKHJlcykgPT4ge1xuICAgICAgdGhpcy5vbkV2ZW50LmVtaXQocmVzKTtcbiAgICB9KTtcblxuICAgIGNvbXBSZWYuaW5zdGFuY2UuY2xvc2VFdmVudC5zdWJzY3JpYmUoKHJlcyk9PntcbiAgICAgIG92ZXJsYXlSZWYuZGlzcG9zZSgpO1xuICAgIH0pXG5cbiAgICBvdmVybGF5UmVmLm91dHNpZGVQb2ludGVyRXZlbnRzKCkuc3Vic2NyaWJlKCgpPT57XG4gICAgICBvdmVybGF5UmVmLmRpc3Bvc2UoKTtcbiAgICB9KVxuICB9XG59XG5cbmV4cG9ydCBpbnRlcmZhY2UgSU1lbnV7XG4gIHdpZHRoPzogc3RyaW5nO1xuICB0aXRsZT86IHN0cmluZztcbiAgc2hvd1RyYXk/OiBib29sZWFuO1xuICBpdGVtcz86IElNZW51SXRlbVtdO1xuICBzaG93U2VhcmNoPzogYm9vbGVhbjtcbiAgc2hvd0FkZEljb24/OiBib29sZWFuO1xuICBzZWFyY2hQbGFjZWhvbGRlcj86IHN0cmluZztcbiAgaXRlbUdyb3Vwcz86IElNZW51R3JvdXBbXTtcbiAgb3ZlcmxheUNvbmZpZz86IHtcbiAgICBvZmZzZXRYPzogbnVtYmVyLFxuICAgIG9mZnNldFk/OiBudW1iZXJcbiAgfVxufVxuZXhwb3J0IGludGVyZmFjZSBJTWVudUl0ZW17XG4gIGxhYmVsPzogc3RyaW5nO1xuICBpc1NlbGVjdGVkPzogYm9vbGVhbjtcbiAgaWQ/OiBzdHJpbmcgfCBudW1iZXI7XG4gIHN0YXR1cz86ICdhY3RpdmUnIHwgJ2luYWN0aXZlJyB8ICdkaXNhYmxlZCc7XG4gIGNoaXBzPzpBcnJheTxJQ2hpcD47IFxuICBpY29uPzogc2FJY29uO1xufVxuXG5leHBvcnQgaW50ZXJmYWNlIElNZW51R3JvdXB7XG4gIGdyb3VwVGl0bGU/OiBzdHJpbmc7XG4gIGl0ZW1zPzogSU1lbnVJdGVtW107XG59XG5cbnR5cGUgTXlPdmVybGF5UG9zaXRpb25zID0ge1xuICBba2V5OiBzdHJpbmddOiBDb25uZWN0ZWRQb3NpdGlvbjsgIC8vIEtleXMgY2FuIGJlIGFueSBzdHJpbmcsIHZhbHVlcyBtdXN0IGJlIENvbm5lY3RlZFBvc2l0aW9uXG59O1xuY29uc3QgTUVOVV9QT1NJVElPTlM6IE15T3ZlcmxheVBvc2l0aW9ucz0ge1xuICAncmlnaHQnOiB7XG4gICAgb3JpZ2luWDogJ2VuZCcsXG4gICAgb3JpZ2luWTogJ2NlbnRlcicsXG4gICAgb3ZlcmxheVg6ICdzdGFydCcsXG4gICAgb3ZlcmxheVk6ICdjZW50ZXInLFxuICAgIG9mZnNldFg6IDIwLFxuICAgIG9mZnNldFk6IDBcbiAgfSxcbiAgJ2xlZnQnOiB7XG4gICAgb3JpZ2luWDogJ3N0YXJ0JyxcbiAgICBvcmlnaW5ZOiAnY2VudGVyJyxcbiAgICBvdmVybGF5WDogJ2VuZCcsXG4gICAgb3ZlcmxheVk6ICdjZW50ZXInLFxuICAgIG9mZnNldFg6IDIwLFxuICAgIG9mZnNldFk6IDBcbiAgfSxcbiAgJ3RvcCc6IHtcbiAgICBvcmlnaW5YOiAnY2VudGVyJyxcbiAgICBvcmlnaW5ZOiAndG9wJyxcbiAgICBvdmVybGF5WDogJ2NlbnRlcicsXG4gICAgb3ZlcmxheVk6ICdib3R0b20nLFxuICAgIG9mZnNldFg6IDAsXG4gICAgb2Zmc2V0WTogMjBcbiAgfSxcbiAgJ2JvdHRvbSc6IHtcbiAgICBvcmlnaW5YOiAnY2VudGVyJyxcbiAgICBvcmlnaW5ZOiAnYm90dG9tJyxcbiAgICBvdmVybGF5WDogJ2NlbnRlcicsXG4gICAgb3ZlcmxheVk6ICd0b3AnLFxuICAgIG9mZnNldFg6IDAsXG4gICAgb2Zmc2V0WTogMjBcbiAgfVxufSJdfQ==
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { Component, ViewEncapsulation, EventEmitter, Input, Output, inject, Injectable, Inject, ChangeDetectionStrategy, signal, computed, Optional, ViewChild, HostBinding } from '@angular/core';
|
|
2
|
+
import { Component, ViewEncapsulation, EventEmitter, Input, Output, inject, Injectable, Inject, ChangeDetectionStrategy, signal, computed, Optional, ViewChild, Directive, HostListener, HostBinding } from '@angular/core';
|
|
3
3
|
import * as i1 from '@angular/common';
|
|
4
4
|
import { CommonModule, NgIf, NgStyle, NgFor } from '@angular/common';
|
|
5
5
|
import * as i3 from '@angular/material/tooltip';
|
|
@@ -33,12 +33,15 @@ import * as i1$3 from '@angular/material/dialog';
|
|
|
33
33
|
import { MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
|
|
34
34
|
import * as i3$3 from '@ng-select/ng-select';
|
|
35
35
|
import { NgSelectModule } from '@ng-select/ng-select';
|
|
36
|
-
import
|
|
37
|
-
import
|
|
36
|
+
import { MatMenu, MatMenuItem } from '@angular/material/menu';
|
|
37
|
+
import { trigger, state, style, transition, animate } from '@angular/animations';
|
|
38
|
+
import * as i1$4 from '@angular/cdk/overlay';
|
|
39
|
+
import { ComponentPortal } from '@angular/cdk/portal';
|
|
40
|
+
import * as i1$5 from '@angular/router';
|
|
41
|
+
import * as i1$6 from '@angular/material/progress-bar';
|
|
38
42
|
import { MatProgressBarModule } from '@angular/material/progress-bar';
|
|
39
|
-
import * as i1$
|
|
43
|
+
import * as i1$7 from '@angular/material/radio';
|
|
40
44
|
import { MatRadioButton, MatRadioModule } from '@angular/material/radio';
|
|
41
|
-
import { trigger, state, style, transition, animate } from '@angular/animations';
|
|
42
45
|
|
|
43
46
|
class CardCustomHeaderComponent {
|
|
44
47
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: CardCustomHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
@@ -2091,10 +2094,224 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImpor
|
|
|
2091
2094
|
type: Output
|
|
2092
2095
|
}] } });
|
|
2093
2096
|
|
|
2097
|
+
class SAMenuItemComponent {
|
|
2098
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: SAMenuItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2099
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.4", type: SAMenuItemComponent, isStandalone: true, selector: "sa-menu-item", inputs: { item: "item" }, ngImport: i0, template: "<!-- <div mat-menu-item class=\"sa-menu-item\">\n <span>{{item.label}}</span>\n</div> -->\n\n<div class=\"section-item\" [ngClass]=\"item.isSelected ? 'selected' : ''\">\n <div class=\"status\">\n <span *ngIf=\"item.status\" [ngClass]=\"item.status == 'active' ? 'status-active' : 'status-inactive'\"\n class=\"status-dot\"></span>\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:10px;border-radius:5px}.section-item:hover{background-color:var(--primary-500)}.section-item:hover span{font-weight:500}.selected{background-color:var(--primary-500)}.section-item span{font-size:.875rem;font-weight:300}.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}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ChipsComponent, selector: "sa-chip", inputs: ["id", "iconPath", "text", "type", "state", "filling", "iconPosition", "largeStateIcon", "largeStateText", "tooltip"], outputs: ["onClickEvent"] }, { kind: "component", type: IconComponent, selector: "sa-icon", inputs: ["img", "icon", "size", "color", "iconPath", "iconUrl", "customClass", "href", "hrefTarget"], outputs: ["onClickEvent"] }] }); }
|
|
2100
|
+
}
|
|
2101
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: SAMenuItemComponent, decorators: [{
|
|
2102
|
+
type: Component,
|
|
2103
|
+
args: [{ selector: 'sa-menu-item', standalone: true, imports: [CommonModule, ChipsComponent, IconComponent], template: "<!-- <div mat-menu-item class=\"sa-menu-item\">\n <span>{{item.label}}</span>\n</div> -->\n\n<div class=\"section-item\" [ngClass]=\"item.isSelected ? 'selected' : ''\">\n <div class=\"status\">\n <span *ngIf=\"item.status\" [ngClass]=\"item.status == 'active' ? 'status-active' : 'status-inactive'\"\n class=\"status-dot\"></span>\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:10px;border-radius:5px}.section-item:hover{background-color:var(--primary-500)}.section-item:hover span{font-weight:500}.selected{background-color:var(--primary-500)}.section-item span{font-size:.875rem;font-weight:300}.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}\n"] }]
|
|
2104
|
+
}], propDecorators: { item: [{
|
|
2105
|
+
type: Input,
|
|
2106
|
+
args: ['item']
|
|
2107
|
+
}] } });
|
|
2108
|
+
|
|
2109
|
+
class SAMenuComponent {
|
|
2110
|
+
constructor(overlay) {
|
|
2111
|
+
this.overlay = overlay;
|
|
2112
|
+
this.position = 'bottom'; // Default position
|
|
2113
|
+
this.onEvent = new EventEmitter();
|
|
2114
|
+
this.onKeyUpEvent = new EventEmitter();
|
|
2115
|
+
this.closeEvent = new EventEmitter();
|
|
2116
|
+
// @ViewChild('menu', {static: true}) menu;
|
|
2117
|
+
this.isExpanded = false;
|
|
2118
|
+
}
|
|
2119
|
+
ngOnChanges(changes) {
|
|
2120
|
+
console.log('ngOnChanges menu ->', this.menu);
|
|
2121
|
+
if (changes['menu'].currentValue) {
|
|
2122
|
+
}
|
|
2123
|
+
}
|
|
2124
|
+
ngAfterViewInit() {
|
|
2125
|
+
this.isExpanded = true;
|
|
2126
|
+
}
|
|
2127
|
+
setPosition() {
|
|
2128
|
+
// const positions: { [key: string]: ConnectedPosition } = {
|
|
2129
|
+
// left: { originX: 'start', originY: 'top', overlayX: 'start', overlayY: 'top' },
|
|
2130
|
+
// right: { originX: 'end', originY: 'top', overlayX: 'end', overlayY: 'top' },
|
|
2131
|
+
// top: { originX: 'center', originY: 'bottom', overlayX: 'center', overlayY: 'top' },
|
|
2132
|
+
// bottom: { originX: 'center', originY: 'top', overlayX: 'center', overlayY: 'bottom' }
|
|
2133
|
+
// };
|
|
2134
|
+
// const overlayRef = this.overlay.create();
|
|
2135
|
+
// const userProfilePortal = new ComponentPortal(CardComponent);
|
|
2136
|
+
// const compRef = overlayRef.attach(userProfilePortal);
|
|
2137
|
+
// compRef.instance.title = 'need nduk ra bhai'
|
|
2138
|
+
// compRef.instance.body = 'sometime little bit this sometimes little bit that. Comming not comming'
|
|
2139
|
+
// compRef.instance.avatar = '../assets/avatar.svg'
|
|
2140
|
+
}
|
|
2141
|
+
onMenuItemClick(event, item) {
|
|
2142
|
+
// item.isSelected = !item.isSelected;
|
|
2143
|
+
this.onEvent.emit({ type: 'CLICK', item, menu: this.menu });
|
|
2144
|
+
}
|
|
2145
|
+
onSearch(event) {
|
|
2146
|
+
this.onEvent.emit({ type: 'SEARCH', value: event.target.value });
|
|
2147
|
+
}
|
|
2148
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: SAMenuComponent, deps: [{ token: i1$4.Overlay }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2149
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.4", type: SAMenuComponent, isStandalone: true, selector: "sa-menu", inputs: { position: "position", menu: "menu", hostEl: "hostEl" }, outputs: { onEvent: "onEvent", onKeyUpEvent: "onKeyUpEvent", closeEvent: "closeEvent" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"sa-menu\" [ngClass]=\"menu.showTray ? 'sa-menu-tray' : ''\" [ngStyle]=\"{width: menu.width || 'max-content'}\">\n\n @if(menu?.title){\n <div class=\"sa-menu-title\">\n <h1>{{menu?.title}}</h1>\n <sa-icon [icon]=\"'closeOutlined'\" class=\"sa-menu-close-icon\" (click)=\"closeEvent.emit($event)\"></sa-icon>\n </div>\n }\n\n @if(menu?.showSearch){\n <div class=\"search-container\">\n <sa-icon icon=\"search\"></sa-icon>\n <input class=\"search-input\" (keyup)=\"onSearch($event)\" type=\"text\" [placeholder]=\"menu.searchPlaceholder\" />\n <button *ngIf=\"menu?.showAddIcon\"><i class=\"fas fa-plus\"></i></button>\n </div>\n }\n\n @if(menu?.itemGroups && menu.itemGroups.length){\n @for (groupItem of menu.itemGroups; track groupItem) {\n <div class=\"sa-menu-group\">\n <h2>{{groupItem.groupTitle}}</h2>\n \n @for (item of groupItem.items; track $index) {\n <sa-menu-item [item]=\"item\" (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\n</div>", styles: [".sa-menu{background-color:var(--primary-900);border-radius:8px;box-shadow:3px 4px 16px 4px #00000014;width:max-content;color:#fff;overflow-y:scroll}.sa-menu-tray{height:calc(100vh - 16px);margin-top:8px;border-top-left-radius:0;border-bottom-left-radius:0;background-color:#2d3748;padding:1rem;overflow-y:scroll}sa-menu-item{cursor:pointer;display:block}.sa-menu-title{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem}.sa-menu-title h1{color:var(--grey-100, #EAECF0);font-family:var(--font-family, Roboto);font-size:14px;font-style:normal;font-weight:500;line-height:20px;letter-spacing:.1px}.sa-menu-close-icon{cursor:pointer}.search-container{position:relative;display:flex;align-items:center;margin-bottom:1rem}.search-container input{flex:1;padding:.5rem .5rem .5rem 2rem;background-color:#4a5568;border-radius:.25rem;font-size:.875rem;border:none;outline:none;color:#fff;box-sizing:border-box}.search-container .search-icon{position:absolute;left:.5rem;font-size:1rem;color:#888;pointer-events:none}.search-container button{margin-left:.5rem;background-color:#6b46c1;padding:.5rem;border-radius:.25rem;border:none;cursor:pointer}.sa-menu-group{margin-bottom:1rem;padding-bottom:.8rem;border-bottom:1px solid #ccc}.sa-menu-group:last-child{border-bottom:none}.sa-menu-group h2{color:var(--Grey-200, #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}.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}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: SAMenuItemComponent, selector: "sa-menu-item", inputs: ["item"] }, { kind: "component", type: IconComponent, selector: "sa-icon", inputs: ["img", "icon", "size", "color", "iconPath", "iconUrl", "customClass", "href", "hrefTarget"], outputs: ["onClickEvent"] }], animations: [
|
|
2150
|
+
trigger('slideInOut', [
|
|
2151
|
+
state('in', style({
|
|
2152
|
+
width: '', // When expanded (fully shown)
|
|
2153
|
+
})),
|
|
2154
|
+
state('out', style({
|
|
2155
|
+
width: '0', // When collapsed (hidden)
|
|
2156
|
+
})),
|
|
2157
|
+
transition('in <=> out', [
|
|
2158
|
+
animate('0.2s ease-in-out'), // Animation speed and easing
|
|
2159
|
+
])
|
|
2160
|
+
])
|
|
2161
|
+
] }); }
|
|
2162
|
+
}
|
|
2163
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: SAMenuComponent, decorators: [{
|
|
2164
|
+
type: Component,
|
|
2165
|
+
args: [{ selector: 'sa-menu', standalone: true, imports: [
|
|
2166
|
+
CommonModule,
|
|
2167
|
+
SAMenuItemComponent,
|
|
2168
|
+
MatMenu,
|
|
2169
|
+
MatMenuItem,
|
|
2170
|
+
ChipsComponent,
|
|
2171
|
+
IconComponent
|
|
2172
|
+
], animations: [
|
|
2173
|
+
trigger('slideInOut', [
|
|
2174
|
+
state('in', style({
|
|
2175
|
+
width: '', // When expanded (fully shown)
|
|
2176
|
+
})),
|
|
2177
|
+
state('out', style({
|
|
2178
|
+
width: '0', // When collapsed (hidden)
|
|
2179
|
+
})),
|
|
2180
|
+
transition('in <=> out', [
|
|
2181
|
+
animate('0.2s ease-in-out'), // Animation speed and easing
|
|
2182
|
+
])
|
|
2183
|
+
])
|
|
2184
|
+
], template: "<div class=\"sa-menu\" [ngClass]=\"menu.showTray ? 'sa-menu-tray' : ''\" [ngStyle]=\"{width: menu.width || 'max-content'}\">\n\n @if(menu?.title){\n <div class=\"sa-menu-title\">\n <h1>{{menu?.title}}</h1>\n <sa-icon [icon]=\"'closeOutlined'\" class=\"sa-menu-close-icon\" (click)=\"closeEvent.emit($event)\"></sa-icon>\n </div>\n }\n\n @if(menu?.showSearch){\n <div class=\"search-container\">\n <sa-icon icon=\"search\"></sa-icon>\n <input class=\"search-input\" (keyup)=\"onSearch($event)\" type=\"text\" [placeholder]=\"menu.searchPlaceholder\" />\n <button *ngIf=\"menu?.showAddIcon\"><i class=\"fas fa-plus\"></i></button>\n </div>\n }\n\n @if(menu?.itemGroups && menu.itemGroups.length){\n @for (groupItem of menu.itemGroups; track groupItem) {\n <div class=\"sa-menu-group\">\n <h2>{{groupItem.groupTitle}}</h2>\n \n @for (item of groupItem.items; track $index) {\n <sa-menu-item [item]=\"item\" (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\n</div>", styles: [".sa-menu{background-color:var(--primary-900);border-radius:8px;box-shadow:3px 4px 16px 4px #00000014;width:max-content;color:#fff;overflow-y:scroll}.sa-menu-tray{height:calc(100vh - 16px);margin-top:8px;border-top-left-radius:0;border-bottom-left-radius:0;background-color:#2d3748;padding:1rem;overflow-y:scroll}sa-menu-item{cursor:pointer;display:block}.sa-menu-title{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem}.sa-menu-title h1{color:var(--grey-100, #EAECF0);font-family:var(--font-family, Roboto);font-size:14px;font-style:normal;font-weight:500;line-height:20px;letter-spacing:.1px}.sa-menu-close-icon{cursor:pointer}.search-container{position:relative;display:flex;align-items:center;margin-bottom:1rem}.search-container input{flex:1;padding:.5rem .5rem .5rem 2rem;background-color:#4a5568;border-radius:.25rem;font-size:.875rem;border:none;outline:none;color:#fff;box-sizing:border-box}.search-container .search-icon{position:absolute;left:.5rem;font-size:1rem;color:#888;pointer-events:none}.search-container button{margin-left:.5rem;background-color:#6b46c1;padding:.5rem;border-radius:.25rem;border:none;cursor:pointer}.sa-menu-group{margin-bottom:1rem;padding-bottom:.8rem;border-bottom:1px solid #ccc}.sa-menu-group:last-child{border-bottom:none}.sa-menu-group h2{color:var(--Grey-200, #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}.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}\n"] }]
|
|
2185
|
+
}], ctorParameters: () => [{ type: i1$4.Overlay }], propDecorators: { position: [{
|
|
2186
|
+
type: Input
|
|
2187
|
+
}], menu: [{
|
|
2188
|
+
type: Input
|
|
2189
|
+
}], hostEl: [{
|
|
2190
|
+
type: Input
|
|
2191
|
+
}], onEvent: [{
|
|
2192
|
+
type: Output
|
|
2193
|
+
}], onKeyUpEvent: [{
|
|
2194
|
+
type: Output
|
|
2195
|
+
}], closeEvent: [{
|
|
2196
|
+
type: Output
|
|
2197
|
+
}] } });
|
|
2198
|
+
|
|
2199
|
+
class MenuDirective {
|
|
2200
|
+
get saMenu() {
|
|
2201
|
+
return this._saMenu;
|
|
2202
|
+
}
|
|
2203
|
+
set saMenu(value) {
|
|
2204
|
+
this._saMenu = value;
|
|
2205
|
+
}
|
|
2206
|
+
get position() {
|
|
2207
|
+
return this._position;
|
|
2208
|
+
}
|
|
2209
|
+
set position(value) {
|
|
2210
|
+
this._position = value;
|
|
2211
|
+
}
|
|
2212
|
+
constructor(overlay, elRef) {
|
|
2213
|
+
this.overlay = overlay;
|
|
2214
|
+
this.elRef = elRef;
|
|
2215
|
+
// @Input('saMenuObj') saMenuObj = {};
|
|
2216
|
+
this.saMenuRef = null;
|
|
2217
|
+
this.onMenuEvent = new EventEmitter();
|
|
2218
|
+
this.onEvent = new EventEmitter();
|
|
2219
|
+
this._position = 'right';
|
|
2220
|
+
}
|
|
2221
|
+
onClick(e) {
|
|
2222
|
+
if (!!this._saMenu?.items?.length || !!this._saMenu?.itemGroups?.length)
|
|
2223
|
+
this.attachMenu();
|
|
2224
|
+
}
|
|
2225
|
+
ngAfterViewInit() {
|
|
2226
|
+
}
|
|
2227
|
+
attachMenu() {
|
|
2228
|
+
const hostElement = this.elRef.nativeElement;
|
|
2229
|
+
const menuPortal = new ComponentPortal(SAMenuComponent);
|
|
2230
|
+
const positionStrategy = this.overlay.position()
|
|
2231
|
+
.flexibleConnectedTo(hostElement) // Position relative to the target element (the button)
|
|
2232
|
+
.withPositions([{ ...MENU_POSITIONS[this._position], ...(this._saMenu.overlayConfig || {}) }]);
|
|
2233
|
+
const overlayRef = this.overlay.create({ positionStrategy, scrollStrategy: this.overlay.scrollStrategies.reposition() });
|
|
2234
|
+
const compRef = overlayRef.attach(menuPortal);
|
|
2235
|
+
compRef.instance.menu = this.saMenu;
|
|
2236
|
+
compRef.instance.hostEl = hostElement;
|
|
2237
|
+
// Subscribe to menu component events and emit them
|
|
2238
|
+
compRef.instance.onEvent.subscribe((res) => {
|
|
2239
|
+
this.onEvent.emit(res);
|
|
2240
|
+
});
|
|
2241
|
+
compRef.instance.closeEvent.subscribe((res) => {
|
|
2242
|
+
overlayRef.dispose();
|
|
2243
|
+
});
|
|
2244
|
+
overlayRef.outsidePointerEvents().subscribe(() => {
|
|
2245
|
+
overlayRef.dispose();
|
|
2246
|
+
});
|
|
2247
|
+
}
|
|
2248
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: MenuDirective, deps: [{ token: i1$4.Overlay }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
2249
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.2.4", type: MenuDirective, isStandalone: true, selector: "[saMenu]", inputs: { saMenuRef: "saMenuRef", saMenu: "saMenu", position: ["saManuPosition", "position"] }, outputs: { onMenuEvent: "onMenuEvent", onEvent: "onEvent" }, host: { listeners: { "click": "onClick($event)" } }, ngImport: i0 }); }
|
|
2250
|
+
}
|
|
2251
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: MenuDirective, decorators: [{
|
|
2252
|
+
type: Directive,
|
|
2253
|
+
args: [{
|
|
2254
|
+
selector: '[saMenu]',
|
|
2255
|
+
standalone: true
|
|
2256
|
+
}]
|
|
2257
|
+
}], ctorParameters: () => [{ type: i1$4.Overlay }, { type: i0.ElementRef }], propDecorators: { saMenuRef: [{
|
|
2258
|
+
type: Input,
|
|
2259
|
+
args: ['saMenuRef']
|
|
2260
|
+
}], onMenuEvent: [{
|
|
2261
|
+
type: Output,
|
|
2262
|
+
args: ['onMenuEvent']
|
|
2263
|
+
}], onEvent: [{
|
|
2264
|
+
type: Output
|
|
2265
|
+
}], saMenu: [{
|
|
2266
|
+
type: Input,
|
|
2267
|
+
args: ['saMenu']
|
|
2268
|
+
}], position: [{
|
|
2269
|
+
type: Input,
|
|
2270
|
+
args: ['saManuPosition']
|
|
2271
|
+
}], onClick: [{
|
|
2272
|
+
type: HostListener,
|
|
2273
|
+
args: ['click', ['$event']]
|
|
2274
|
+
}] } });
|
|
2275
|
+
const MENU_POSITIONS = {
|
|
2276
|
+
'right': {
|
|
2277
|
+
originX: 'end',
|
|
2278
|
+
originY: 'center',
|
|
2279
|
+
overlayX: 'start',
|
|
2280
|
+
overlayY: 'center',
|
|
2281
|
+
offsetX: 20,
|
|
2282
|
+
offsetY: 0
|
|
2283
|
+
},
|
|
2284
|
+
'left': {
|
|
2285
|
+
originX: 'start',
|
|
2286
|
+
originY: 'center',
|
|
2287
|
+
overlayX: 'end',
|
|
2288
|
+
overlayY: 'center',
|
|
2289
|
+
offsetX: 20,
|
|
2290
|
+
offsetY: 0
|
|
2291
|
+
},
|
|
2292
|
+
'top': {
|
|
2293
|
+
originX: 'center',
|
|
2294
|
+
originY: 'top',
|
|
2295
|
+
overlayX: 'center',
|
|
2296
|
+
overlayY: 'bottom',
|
|
2297
|
+
offsetX: 0,
|
|
2298
|
+
offsetY: 20
|
|
2299
|
+
},
|
|
2300
|
+
'bottom': {
|
|
2301
|
+
originX: 'center',
|
|
2302
|
+
originY: 'bottom',
|
|
2303
|
+
overlayX: 'center',
|
|
2304
|
+
overlayY: 'top',
|
|
2305
|
+
offsetX: 0,
|
|
2306
|
+
offsetY: 20
|
|
2307
|
+
}
|
|
2308
|
+
};
|
|
2309
|
+
|
|
2094
2310
|
class LeftNavComponent {
|
|
2095
2311
|
constructor(route, router) {
|
|
2096
2312
|
this.route = route;
|
|
2097
2313
|
this.router = router;
|
|
2314
|
+
this.onEvent = new EventEmitter();
|
|
2098
2315
|
this.clickEvent = new EventEmitter();
|
|
2099
2316
|
this.hoverEvent = new EventEmitter();
|
|
2100
2317
|
}
|
|
@@ -2107,6 +2324,20 @@ class LeftNavComponent {
|
|
|
2107
2324
|
this.onNavItemClick(this.data.items[0], 0);
|
|
2108
2325
|
}
|
|
2109
2326
|
}
|
|
2327
|
+
ngAfterViewInit() {
|
|
2328
|
+
if (this?.data?.templateItems?.length) {
|
|
2329
|
+
console.warn('templateItems', this.data.templateItems);
|
|
2330
|
+
this.data.templateItems.forEach((item) => {
|
|
2331
|
+
if (typeof item == 'string') {
|
|
2332
|
+
console.warn(item);
|
|
2333
|
+
const template = item;
|
|
2334
|
+
const element = document.createElement('div');
|
|
2335
|
+
element.innerHTML = template;
|
|
2336
|
+
this.templateItemContainer?.nativeElement.appendChild(element);
|
|
2337
|
+
}
|
|
2338
|
+
});
|
|
2339
|
+
}
|
|
2340
|
+
}
|
|
2110
2341
|
setItemActive(index) {
|
|
2111
2342
|
try {
|
|
2112
2343
|
if (this.activeItem) {
|
|
@@ -2122,16 +2353,19 @@ class LeftNavComponent {
|
|
|
2122
2353
|
}
|
|
2123
2354
|
}
|
|
2124
2355
|
onNavItemClick(item, index, event = null) {
|
|
2125
|
-
console.log(item, index);
|
|
2356
|
+
// console.log(item, index);
|
|
2126
2357
|
this.clickEvent.emit({
|
|
2127
2358
|
event,
|
|
2128
2359
|
type: 'NAV_ITEM_CLICK',
|
|
2129
2360
|
item
|
|
2130
2361
|
});
|
|
2362
|
+
this.data.items.forEach((item) => item.active = false);
|
|
2363
|
+
this.data.items[index].active = true;
|
|
2131
2364
|
if (!item.disable && item.path) {
|
|
2132
2365
|
this.setItemActive(index);
|
|
2133
2366
|
this.router.navigate([item.path]);
|
|
2134
2367
|
}
|
|
2368
|
+
this.onEvent.emit({ item, index, event });
|
|
2135
2369
|
}
|
|
2136
2370
|
onFooterItemClick(item, index, event = null) {
|
|
2137
2371
|
this.clickEvent.emit({
|
|
@@ -2162,8 +2396,11 @@ class LeftNavComponent {
|
|
|
2162
2396
|
tooltip.show();
|
|
2163
2397
|
}
|
|
2164
2398
|
}
|
|
2165
|
-
|
|
2166
|
-
|
|
2399
|
+
onMenuEvent(event) {
|
|
2400
|
+
console.log('onMenuEvent', event);
|
|
2401
|
+
}
|
|
2402
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: LeftNavComponent, deps: [{ token: i1$5.ActivatedRoute }, { token: i1$5.Router }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2403
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.4", type: LeftNavComponent, isStandalone: true, selector: "sa-left-nav", inputs: { data: "data" }, outputs: { clickEvent: "clickEvent", hoverEvent: "hoverEvent", onEvent: "onEvent" }, viewQueries: [{ propertyName: "templateItemContainer", first: true, predicate: ["templateItemContainer"], descendants: true }], ngImport: i0, template: "<div class=\"sa-left-nav\" >\n\n <div class=\"sa-left-nav-container\">\n <div class=\"sa-left-nav-logo\">\n <!-- <span class=\"sa-logo\"></span> -->\n <sa-icon icon=\"sarasWhite\" size=\"40\"></sa-icon>\n </div>\n <div class=\"sa-left-nav-items\">\n @if(data && data.items && !!data.items.length){\n <div class=\"sa-left-nav-items-container\">\n <ng-container *ngFor=\"let item of data.items; let i = index\">\n <div class=\"sa-left-nav-item\" [ngClass]=\"item.active ? 'active' : '' \"\n [saMenu]=\"item.menu\" (onEvent)=\"onEvent.emit($event)\" (onMenuEvent)=\"onMenuEvent($event)\"\n (click)=\"onNavItemClick(item, i, $event)\" (mouseenter)=\"onNavItemBlur(item,i,$event,tooltip)\"\n #tooltip=\"matTooltip\" [matTooltip]=\"item.tooltip\" matTooltipPosition=\"right\">\n\n <sa-icon class=\"sa-left-nav-item-icon\" [icon]=\"item.icon\" size=\"24\" color=\"white\"></sa-icon>\n <!-- <span>{{item.tooltip}}</span> -->\n <!-- <span class=\"sa-left-nav-item-icon\"\n [ngStyle]=\"{ 'background-image': 'url(' + item.icon_url + ')' }\"></span> -->\n </div>\n <p class=\"sa-icon-label\">{{item.iconLabel}}</p>\n </ng-container>\n </div>\n }\n </div>\n <div #templateItemContainer class=\"sa-template-item-container\">\n\n </div>\n <div class=\"sa-left-nav-footer\">\n @if(data && data.footerItems && !!data.footerItems.length){\n <div class=\"sa-left-nav-footer-container\">\n <ng-container *ngFor=\"let item of data.footerItems; let i = index\">\n <div class=\"sa-left-nav-footer-item\" [ngClass]=\"item.active ? 'active' : '' \"\n (click)=\"onFooterItemClick(item, i, $event)\"\n [saMenu]=\"item.menu\"\n (mouseenter)=\"onFooterItemBlur(item,i,$event,tooltip)\" #tooltip=\"matTooltip\"\n [matTooltip]=\"item.tooltip\" matTooltipPosition=\"right\">\n @if(item.type === 'AVATAR'){\n <!-- <span class=\"sa-left-nav-footer-name\">ET</span> -->\n <sa-avatar [altText]=\"item.altText\" [imagePath]=\"''\" size=\"extra-small\"></sa-avatar>\n }@else{\n <sa-icon class=\"sa-left-nav-footer-icon\" [icon]=\"item.icon\" size=\"24\" color=\"white\"></sa-icon>\n <!-- <span class=\"sa-left-nav-footer-icon\"\n [ngStyle]=\"{ 'background-image': 'url(' + item.icon_url || '' + ')' }\"></span> -->\n }\n </div>\n <p class=\"sa-icon-label\">{{item.iconLabel}}</p>\n </ng-container>\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);width:calc(100vw - 16px);padding:8px;display:flex}.sa-left-nav-logo{display:block;width:40px;margin:auto;padding:20px 0;border-bottom:1px #fff solid;min-height:40px}.sa-logo{height:40px;width:20px;display:block;margin:auto;background-position:center;background:url('data:image/svg+xml,<svg viewBox=\"0 0 20 38\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M15.554 13.549c-.05 0-.101 0-.152-.003v.003s-.541-.013-2.395-.024c-3.047-.026-4.175 1.237-4.532 1.816H8.47c-.26.49-.332 1.061-.202 1.603l-.004.01c.02.13.303 1.624 2.762 1.573 1.971-.042 3.15-.165 3.626-.225a3.881 3.881 0 0 1 1.815.004c.596.145 1.152.43 1.623.831.472.402.846.91 1.093 1.484a4.156 4.156 0 0 1-.158 3.617 4.037 4.037 0 0 1-1.22 1.377 3.883 3.883 0 0 1-3.498.516c-.29-.068-.68-.169-1.207-.315-3.167-.789-4.906 4.081-4.906 4.081l-.006.005a4.069 4.069 0 0 1-1.244 1.785 3.926 3.926 0 0 1-1.968.866 3.888 3.888 0 0 1-2.12-.307c-.667-.3-1.24-.78-1.658-1.39a4.153 4.153 0 0 1-.273-4.216 4.033 4.033 0 0 1 1.463-1.6 3.904 3.904 0 0 1 2.408-.576c.44-.004 1.353 0 3.19.032 3.136.057 3.556-1.442 3.596-2.056 0-.058-.003-.116-.003-.173v-.083a2.288 2.288 0 0 0-.448-1.238 2.204 2.204 0 0 0-1.048-.768c-1.543-.684-5.413-.377-5.413-.377v-.005a3.893 3.893 0 0 1-1.805-.345 3.978 3.978 0 0 1-1.33-.985 4.093 4.093 0 0 1-.829-1.453 4.162 4.162 0 0 1 .308-3.277 4.04 4.04 0 0 1 1.084-1.264c.443-.34.95-.58 1.49-.707a3.882 3.882 0 0 1 1.643-.03c1.257.082 2.52.034 3.768-.144 2.02-.254 2.48-1.434 2.58-2.079V9.48c0-.805.233-1.592.67-2.261a3.996 3.996 0 0 1 1.782-1.5 3.886 3.886 0 0 1 2.296-.23c.77.156 1.478.544 2.034 1.113.556.57.934 1.294 1.087 2.084.154.789.075 1.607-.226 2.35a4.05 4.05 0 0 1-1.463 1.827 3.906 3.906 0 0 1-2.207.686h.003ZM4.476 9.043a3.906 3.906 0 0 1-2.207-.686A4.05 4.05 0 0 1 .806 6.531 4.161 4.161 0 0 1 .58 4.18a4.1 4.1 0 0 1 1.087-2.084A3.945 3.945 0 0 1 3.7.982a3.885 3.885 0 0 1 2.295.232c.726.308 1.347.83 1.783 1.499.437.67.67 1.456.67 2.26a4.12 4.12 0 0 1-1.164 2.878 3.926 3.926 0 0 1-2.809 1.192Z\" fill=\"%23fff\"/><path d=\"M15.531 37.095c2.194 0 3.973-1.822 3.973-4.07 0-2.246-1.779-4.068-3.973-4.068s-3.972 1.822-3.972 4.069 1.779 4.069 3.972 4.069Z\" fill=\"%23fff\"/></svg>') no-repeat}.sa-left-nav-container{height:inherit;width:64px;background-color:var(--primary-900);border-radius:8px;padding:8px;box-sizing:border-box;display:flex;flex-direction:column;justify-content:space-evenly}.sa-left-nav-items{flex:1;overflow-y:auto}.sa-left-nav-items-container{padding:30px 0;height:100%;overflow:auto;box-sizing:border-box}.sa-left-nav-item,.sa-left-nav-footer-item{height:40px;width:40px;margin:4px auto;cursor:pointer;border-radius:4px;display:flex;justify-content:center;align-items:center}.sa-icon-label{color:var(--icon-white,#fff);font-size:var(--small-10px,10px);text-align:center;margin:0}::-webkit-scrollbar{display:none}.sa-left-nav-footer-item{margin:4px auto}.sa-left-nav-item:hover,.sa-left-nav-item.active,.sa-left-nav-footer-item.active,.sa-left-nav-footer-item:hover{background-color:var(--primary-500)}.sa-left-nav-item-name,.sa-left-nav-item-icon,.sa-left-nav-footer-icon,.sa-left-nav-footer-name{height:24px;width:24px;display:block}.sa-left-nav-item-name,mn.sa-left-nav-footer-name{display:flex;justify-content:center;align-items:center}.sa-left-nav-footer{min-height:fit-content;border-top:1px solid #fff}.sa-left-nav-content{width:calc(100% - 64px)}.sa-template-item-container{margin-bottom:.8rem;display:flex;justify-content:center}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: AvatarComponent, selector: "sa-avatar", inputs: ["id", "imagePath", "altText", "size"], outputs: ["onClickEvent", "onMouseInEvent", "onMouseOutEvent"] }, { kind: "component", type: IconComponent, selector: "sa-icon", inputs: ["img", "icon", "size", "color", "iconPath", "iconUrl", "customClass", "href", "hrefTarget"], outputs: ["onClickEvent"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: MenuDirective, selector: "[saMenu]", inputs: ["saMenuRef", "saMenu", "saManuPosition"], outputs: ["onMenuEvent", "onEvent"] }] }); }
|
|
2167
2404
|
}
|
|
2168
2405
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: LeftNavComponent, decorators: [{
|
|
2169
2406
|
type: Component,
|
|
@@ -2171,9 +2408,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImpor
|
|
|
2171
2408
|
CommonModule,
|
|
2172
2409
|
AvatarComponent,
|
|
2173
2410
|
IconComponent,
|
|
2174
|
-
MatTooltipModule
|
|
2175
|
-
|
|
2176
|
-
|
|
2411
|
+
MatTooltipModule,
|
|
2412
|
+
MenuDirective,
|
|
2413
|
+
SAMenuComponent
|
|
2414
|
+
], template: "<div class=\"sa-left-nav\" >\n\n <div class=\"sa-left-nav-container\">\n <div class=\"sa-left-nav-logo\">\n <!-- <span class=\"sa-logo\"></span> -->\n <sa-icon icon=\"sarasWhite\" size=\"40\"></sa-icon>\n </div>\n <div class=\"sa-left-nav-items\">\n @if(data && data.items && !!data.items.length){\n <div class=\"sa-left-nav-items-container\">\n <ng-container *ngFor=\"let item of data.items; let i = index\">\n <div class=\"sa-left-nav-item\" [ngClass]=\"item.active ? 'active' : '' \"\n [saMenu]=\"item.menu\" (onEvent)=\"onEvent.emit($event)\" (onMenuEvent)=\"onMenuEvent($event)\"\n (click)=\"onNavItemClick(item, i, $event)\" (mouseenter)=\"onNavItemBlur(item,i,$event,tooltip)\"\n #tooltip=\"matTooltip\" [matTooltip]=\"item.tooltip\" matTooltipPosition=\"right\">\n\n <sa-icon class=\"sa-left-nav-item-icon\" [icon]=\"item.icon\" size=\"24\" color=\"white\"></sa-icon>\n <!-- <span>{{item.tooltip}}</span> -->\n <!-- <span class=\"sa-left-nav-item-icon\"\n [ngStyle]=\"{ 'background-image': 'url(' + item.icon_url + ')' }\"></span> -->\n </div>\n <p class=\"sa-icon-label\">{{item.iconLabel}}</p>\n </ng-container>\n </div>\n }\n </div>\n <div #templateItemContainer class=\"sa-template-item-container\">\n\n </div>\n <div class=\"sa-left-nav-footer\">\n @if(data && data.footerItems && !!data.footerItems.length){\n <div class=\"sa-left-nav-footer-container\">\n <ng-container *ngFor=\"let item of data.footerItems; let i = index\">\n <div class=\"sa-left-nav-footer-item\" [ngClass]=\"item.active ? 'active' : '' \"\n (click)=\"onFooterItemClick(item, i, $event)\"\n [saMenu]=\"item.menu\"\n (mouseenter)=\"onFooterItemBlur(item,i,$event,tooltip)\" #tooltip=\"matTooltip\"\n [matTooltip]=\"item.tooltip\" matTooltipPosition=\"right\">\n @if(item.type === 'AVATAR'){\n <!-- <span class=\"sa-left-nav-footer-name\">ET</span> -->\n <sa-avatar [altText]=\"item.altText\" [imagePath]=\"''\" size=\"extra-small\"></sa-avatar>\n }@else{\n <sa-icon class=\"sa-left-nav-footer-icon\" [icon]=\"item.icon\" size=\"24\" color=\"white\"></sa-icon>\n <!-- <span class=\"sa-left-nav-footer-icon\"\n [ngStyle]=\"{ 'background-image': 'url(' + item.icon_url || '' + ')' }\"></span> -->\n }\n </div>\n <p class=\"sa-icon-label\">{{item.iconLabel}}</p>\n </ng-container>\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);width:calc(100vw - 16px);padding:8px;display:flex}.sa-left-nav-logo{display:block;width:40px;margin:auto;padding:20px 0;border-bottom:1px #fff solid;min-height:40px}.sa-logo{height:40px;width:20px;display:block;margin:auto;background-position:center;background:url('data:image/svg+xml,<svg viewBox=\"0 0 20 38\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M15.554 13.549c-.05 0-.101 0-.152-.003v.003s-.541-.013-2.395-.024c-3.047-.026-4.175 1.237-4.532 1.816H8.47c-.26.49-.332 1.061-.202 1.603l-.004.01c.02.13.303 1.624 2.762 1.573 1.971-.042 3.15-.165 3.626-.225a3.881 3.881 0 0 1 1.815.004c.596.145 1.152.43 1.623.831.472.402.846.91 1.093 1.484a4.156 4.156 0 0 1-.158 3.617 4.037 4.037 0 0 1-1.22 1.377 3.883 3.883 0 0 1-3.498.516c-.29-.068-.68-.169-1.207-.315-3.167-.789-4.906 4.081-4.906 4.081l-.006.005a4.069 4.069 0 0 1-1.244 1.785 3.926 3.926 0 0 1-1.968.866 3.888 3.888 0 0 1-2.12-.307c-.667-.3-1.24-.78-1.658-1.39a4.153 4.153 0 0 1-.273-4.216 4.033 4.033 0 0 1 1.463-1.6 3.904 3.904 0 0 1 2.408-.576c.44-.004 1.353 0 3.19.032 3.136.057 3.556-1.442 3.596-2.056 0-.058-.003-.116-.003-.173v-.083a2.288 2.288 0 0 0-.448-1.238 2.204 2.204 0 0 0-1.048-.768c-1.543-.684-5.413-.377-5.413-.377v-.005a3.893 3.893 0 0 1-1.805-.345 3.978 3.978 0 0 1-1.33-.985 4.093 4.093 0 0 1-.829-1.453 4.162 4.162 0 0 1 .308-3.277 4.04 4.04 0 0 1 1.084-1.264c.443-.34.95-.58 1.49-.707a3.882 3.882 0 0 1 1.643-.03c1.257.082 2.52.034 3.768-.144 2.02-.254 2.48-1.434 2.58-2.079V9.48c0-.805.233-1.592.67-2.261a3.996 3.996 0 0 1 1.782-1.5 3.886 3.886 0 0 1 2.296-.23c.77.156 1.478.544 2.034 1.113.556.57.934 1.294 1.087 2.084.154.789.075 1.607-.226 2.35a4.05 4.05 0 0 1-1.463 1.827 3.906 3.906 0 0 1-2.207.686h.003ZM4.476 9.043a3.906 3.906 0 0 1-2.207-.686A4.05 4.05 0 0 1 .806 6.531 4.161 4.161 0 0 1 .58 4.18a4.1 4.1 0 0 1 1.087-2.084A3.945 3.945 0 0 1 3.7.982a3.885 3.885 0 0 1 2.295.232c.726.308 1.347.83 1.783 1.499.437.67.67 1.456.67 2.26a4.12 4.12 0 0 1-1.164 2.878 3.926 3.926 0 0 1-2.809 1.192Z\" fill=\"%23fff\"/><path d=\"M15.531 37.095c2.194 0 3.973-1.822 3.973-4.07 0-2.246-1.779-4.068-3.973-4.068s-3.972 1.822-3.972 4.069 1.779 4.069 3.972 4.069Z\" fill=\"%23fff\"/></svg>') no-repeat}.sa-left-nav-container{height:inherit;width:64px;background-color:var(--primary-900);border-radius:8px;padding:8px;box-sizing:border-box;display:flex;flex-direction:column;justify-content:space-evenly}.sa-left-nav-items{flex:1;overflow-y:auto}.sa-left-nav-items-container{padding:30px 0;height:100%;overflow:auto;box-sizing:border-box}.sa-left-nav-item,.sa-left-nav-footer-item{height:40px;width:40px;margin:4px auto;cursor:pointer;border-radius:4px;display:flex;justify-content:center;align-items:center}.sa-icon-label{color:var(--icon-white,#fff);font-size:var(--small-10px,10px);text-align:center;margin:0}::-webkit-scrollbar{display:none}.sa-left-nav-footer-item{margin:4px auto}.sa-left-nav-item:hover,.sa-left-nav-item.active,.sa-left-nav-footer-item.active,.sa-left-nav-footer-item:hover{background-color:var(--primary-500)}.sa-left-nav-item-name,.sa-left-nav-item-icon,.sa-left-nav-footer-icon,.sa-left-nav-footer-name{height:24px;width:24px;display:block}.sa-left-nav-item-name,mn.sa-left-nav-footer-name{display:flex;justify-content:center;align-items:center}.sa-left-nav-footer{min-height:fit-content;border-top:1px solid #fff}.sa-left-nav-content{width:calc(100% - 64px)}.sa-template-item-container{margin-bottom:.8rem;display:flex;justify-content:center}\n"] }]
|
|
2415
|
+
}], ctorParameters: () => [{ type: i1$5.ActivatedRoute }, { type: i1$5.Router }], propDecorators: { templateItemContainer: [{
|
|
2416
|
+
type: ViewChild,
|
|
2417
|
+
args: ['templateItemContainer', { static: false }]
|
|
2418
|
+
}], data: [{
|
|
2177
2419
|
type: Input,
|
|
2178
2420
|
args: ['data']
|
|
2179
2421
|
}], clickEvent: [{
|
|
@@ -2182,6 +2424,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImpor
|
|
|
2182
2424
|
}], hoverEvent: [{
|
|
2183
2425
|
type: Output,
|
|
2184
2426
|
args: ['hoverEvent']
|
|
2427
|
+
}], onEvent: [{
|
|
2428
|
+
type: Output,
|
|
2429
|
+
args: ['onEvent']
|
|
2185
2430
|
}] } });
|
|
2186
2431
|
var ILeftNavTypes;
|
|
2187
2432
|
(function (ILeftNavTypes) {
|
|
@@ -2360,7 +2605,7 @@ class ProgressBarComponent {
|
|
|
2360
2605
|
ngOnInit() {
|
|
2361
2606
|
}
|
|
2362
2607
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: ProgressBarComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2363
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: ProgressBarComponent, isStandalone: true, selector: "sa-progress-bar", inputs: { progressValue: "progressValue", borderRadius: "borderRadius", height: "height" }, ngImport: i0, template: "<mat-progress-bar mode=\"determinate\" [value]=\"progressValue\" class=\"progress-bar\" [ngStyle]=\"{\n '--dynamic-height': height ,\n '--dynamic-border-radius': borderRadius \n }\"></mat-progress-bar>", styles: [".progress-bar{height:var(--dynamic-height, 8px);border-radius:var(--dynamic-border-radius, 20px);overflow:hidden;background-color:transparent;--mdc-linear-progress-active-indicator-color: var(--primary-500, #7F56D9);--mdc-linear-progress-track-color: white}::ng-deep .progress-bar .mdc-linear-progress__primary-bar{background-color:var(--mdc-linear-progress-active-indicator-color)}::ng-deep .progress-bar .mdc-linear-progress__bar{height:var(--dynamic-height, 8px);border-radius:var(--dynamic-border-radius, 20px)}::ng-deep .progress-bar .mdc-linear-progress__bar-inner{border-top-style:none;border-radius:var(--dynamic-border-radius, 20px)}::ng-deep .progress-bar .mdc-linear-progress__secondary-bar{background-color:var(--mdc-linear-progress-track-color)}::ng-deep .progress-bar .mdc-linear-progress__buffer-bar{background-color:transparent}\n"], dependencies: [{ kind: "ngmodule", type: MatProgressBarModule }, { kind: "component", type: i1$
|
|
2608
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: ProgressBarComponent, isStandalone: true, selector: "sa-progress-bar", inputs: { progressValue: "progressValue", borderRadius: "borderRadius", height: "height" }, ngImport: i0, template: "<mat-progress-bar mode=\"determinate\" [value]=\"progressValue\" class=\"progress-bar\" [ngStyle]=\"{\n '--dynamic-height': height ,\n '--dynamic-border-radius': borderRadius \n }\"></mat-progress-bar>", styles: [".progress-bar{height:var(--dynamic-height, 8px);border-radius:var(--dynamic-border-radius, 20px);overflow:hidden;background-color:transparent;--mdc-linear-progress-active-indicator-color: var(--primary-500, #7F56D9);--mdc-linear-progress-track-color: white}::ng-deep .progress-bar .mdc-linear-progress__primary-bar{background-color:var(--mdc-linear-progress-active-indicator-color)}::ng-deep .progress-bar .mdc-linear-progress__bar{height:var(--dynamic-height, 8px);border-radius:var(--dynamic-border-radius, 20px)}::ng-deep .progress-bar .mdc-linear-progress__bar-inner{border-top-style:none;border-radius:var(--dynamic-border-radius, 20px)}::ng-deep .progress-bar .mdc-linear-progress__secondary-bar{background-color:var(--mdc-linear-progress-track-color)}::ng-deep .progress-bar .mdc-linear-progress__buffer-bar{background-color:transparent}\n"], dependencies: [{ kind: "ngmodule", type: MatProgressBarModule }, { kind: "component", type: i1$6.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] }); }
|
|
2364
2609
|
}
|
|
2365
2610
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: ProgressBarComponent, decorators: [{
|
|
2366
2611
|
type: Component,
|
|
@@ -2389,7 +2634,7 @@ class RadioButtonComponent extends FieldType {
|
|
|
2389
2634
|
radio.checked = true;
|
|
2390
2635
|
}
|
|
2391
2636
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: RadioButtonComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
2392
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.4", type: RadioButtonComponent, isStandalone: true, selector: "sa-radio-button", usesInheritance: true, ngImport: i0, template: "<div class=\"radio-group-container\" [ngClass]=\"[props['column'] ? 'column' : '']\">\n <div class=\"title-container\">\n @if(props['label']){\n <div class=\"form-field-title\">\n <span>{{ props['label'] }}</span>\n </div>\n }\n @if(props['description']){\n <div class=\"form-field-description\">\n <span>{{ props['description'] }}</span>\n </div>\n }\n </div>\n <div class=\"form-field\">\n <mat-radio-group [formControl]=\"formControl\" name=\"radioButtons\">\n <div *ngFor=\"let option of options$ | async\" class=\"radio-box\" (click)=\"selectRadio(option.value, radio)\">\n <mat-radio-button [disableRipple]=\"true\" #radio [value]=\"option.value\">\n {{ option.label }}\n </mat-radio-button>\n </div>\n </mat-radio-group>\n </div>\n @if(props['helpText']){\n <div class=\"form-field-helpText\">\n <span>{{ props['helpText'] }}</span>\n </div>\n }\n</div>", styles: [".radio-group-container{display:flex;flex-direction:column;gap:20px}.radio-group-container .mat-mdc-radio-group{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;gap:var(--small-8px, 8px)}.radio-group-container.column .mat-mdc-radio-group{flex-direction:column;align-items:flex-start}::ng-deep .radio-group-container .mdc-form-field,::ng-deep .radio-group-container .mdc-form-field.mat-internal-form-field{border-radius:var(--large-64px, 64px);border:1px solid var(--grey-100, #EAECF0);padding:0 1.75rem 0 .75rem;justify-content:center;display:flex}::ng-deep .radio-group-container .mat-mdc-radio-button .mdc-radio .mdc-radio__native-control:enabled:checked+.mdc-radio__background .mdc-radio__outer-circle,::ng-deep .radio-group-container .mat-mdc-radio-button .mdc-radio .mdc-radio__native-control:enabled+.mdc-radio__background .mdc-radio__inner-circle,::ng-deep .radio-group-container .mat-mdc-radio-button .mdc-radio:hover .mdc-radio__native-control:enabled+.mdc-radio__background .mdc-radio__inner-circle,::ng-deep .radio-group-container .mat-mdc-radio-button .mdc-radio:hover .mdc-radio__native-control:enabled:checked+.mdc-radio__background .mdc-radio__outer-circle,::ng-deep .radio-group-container .mat-mdc-radio-button .mdc-radio:not(.mdc-ripple-upgraded):focus .mdc-radio__native-control:enabled:checked+.mdc-radio__background .mdc-radio__outer-circle,::ng-deep .radio-group-container .mat-mdc-radio-button .mdc-radio:not(.mdc-ripple-upgraded):focus .mdc-radio__native-control:enabled+.mdc-radio__background .mdc-radio__inner-circle,::ng-deep .radio-group-container .mat-mdc-radio-button .mdc-radio:not(:disabled):active .mdc-radio__native-control:enabled:checked+.mdc-radio__background .mdc-radio__outer-circle,::ng-deep .radio-group-container .mat-mdc-radio-button .mdc-radio:not(:disabled):active .mdc-radio__native-control:enabled+.mdc-radio__background .mdc-radio__inner-circle,::ng-deep .radio-group-container .mat-mdc-radio-checked .mdc-form-field,::ng-deep .radio-group-container .mat-mdc-radio-checked .mdc-form-field.mat-internal-form-field{border-color:var(--primary-500)}::ng-deep .radio-group-container .mdc-radio__background{height:1rem;width:1rem;top:.125rem}::ng-deep .radio-group-container .mat-radio-outer-circle{height:.625rem;width:.625rem}::ng-deep .radio-group-container .mdc-radio__native-control:checked+.mdc-radio__background .mdc-radio__inner-circle{transform:scale(.4);top:-2px;left:-2px}::ng-deep .radio-group-container .mat-mdc-radio-button .mdc-radio .mdc-radio__background:before{background-color:#fff}::ng-deep .radio-group-container .radio-box:hover{border-radius:var(--large-64px);background:var(--structural-neutral1)}::ng-deep .radio-group-container .mdc-label{padding-left:0;cursor:pointer;color:var(--text-highemphasis, #1C1B20);font-family:var(--font);font-size:.875rem;font-style:normal;font-weight:400;line-height:1.25rem;letter-spacing:.25px}::ng-deep .radio-group-container .radio-box{cursor:pointer}::ng-deep .radio-group-container .mat-mdc-radio-button .mdc-radio:hover .mdc-radio__native-control:enabled:not(:checked)+.mdc-radio__background .mdc-radio__outer-circle{border-color:var(--icon-grey1, #757575)}::ng-deep .radio-group-container .mat-mdc-radio-button .mdc-radio{padding:var(--small-8px) var(--small-8px) var(--small-8px) var(--small-12px)}::ng-deep .radio-group-container .mat-mdc-radio-button .mdc-radio .mdc-radio__native-control:enabled:not(:checked)+.mdc-radio__background .mdc-radio__outer-circle{border-width:1.5px}::ng-deep .radio-group-container .mat-mdc-radio-checked .mdc-label{color:var(--primary-500);font-family:var(--font);font-size:.875rem;font-style:normal;font-weight:600;letter-spacing:.15px}::ng-deep .radio-group-container .mdc-label{color:var(--Text-High-Emphasis, #1C1B20);font-family:var(--font);font-weight:400;line-height:1.25rem;letter-spacing:.25px}.title-container,.radio-group-container .form-field{display:flex;flex-direction:column;gap:var(--small-8px)}\n"], dependencies: [{ kind: "component", type: MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color"], outputs: ["change"], exportAs: ["matRadioButton"] }, { kind: "ngmodule", type: MatRadioModule }, { kind: "directive", type: i1$
|
|
2637
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.4", type: RadioButtonComponent, isStandalone: true, selector: "sa-radio-button", usesInheritance: true, ngImport: i0, template: "<div class=\"radio-group-container\" [ngClass]=\"[props['column'] ? 'column' : '']\">\n <div class=\"title-container\">\n @if(props['label']){\n <div class=\"form-field-title\">\n <span>{{ props['label'] }}</span>\n </div>\n }\n @if(props['description']){\n <div class=\"form-field-description\">\n <span>{{ props['description'] }}</span>\n </div>\n }\n </div>\n <div class=\"form-field\">\n <mat-radio-group [formControl]=\"formControl\" name=\"radioButtons\">\n <div *ngFor=\"let option of options$ | async\" class=\"radio-box\" (click)=\"selectRadio(option.value, radio)\">\n <mat-radio-button [disableRipple]=\"true\" #radio [value]=\"option.value\">\n {{ option.label }}\n </mat-radio-button>\n </div>\n </mat-radio-group>\n </div>\n @if(props['helpText']){\n <div class=\"form-field-helpText\">\n <span>{{ props['helpText'] }}</span>\n </div>\n }\n</div>", styles: [".radio-group-container{display:flex;flex-direction:column;gap:20px}.radio-group-container .mat-mdc-radio-group{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;gap:var(--small-8px, 8px)}.radio-group-container.column .mat-mdc-radio-group{flex-direction:column;align-items:flex-start}::ng-deep .radio-group-container .mdc-form-field,::ng-deep .radio-group-container .mdc-form-field.mat-internal-form-field{border-radius:var(--large-64px, 64px);border:1px solid var(--grey-100, #EAECF0);padding:0 1.75rem 0 .75rem;justify-content:center;display:flex}::ng-deep .radio-group-container .mat-mdc-radio-button .mdc-radio .mdc-radio__native-control:enabled:checked+.mdc-radio__background .mdc-radio__outer-circle,::ng-deep .radio-group-container .mat-mdc-radio-button .mdc-radio .mdc-radio__native-control:enabled+.mdc-radio__background .mdc-radio__inner-circle,::ng-deep .radio-group-container .mat-mdc-radio-button .mdc-radio:hover .mdc-radio__native-control:enabled+.mdc-radio__background .mdc-radio__inner-circle,::ng-deep .radio-group-container .mat-mdc-radio-button .mdc-radio:hover .mdc-radio__native-control:enabled:checked+.mdc-radio__background .mdc-radio__outer-circle,::ng-deep .radio-group-container .mat-mdc-radio-button .mdc-radio:not(.mdc-ripple-upgraded):focus .mdc-radio__native-control:enabled:checked+.mdc-radio__background .mdc-radio__outer-circle,::ng-deep .radio-group-container .mat-mdc-radio-button .mdc-radio:not(.mdc-ripple-upgraded):focus .mdc-radio__native-control:enabled+.mdc-radio__background .mdc-radio__inner-circle,::ng-deep .radio-group-container .mat-mdc-radio-button .mdc-radio:not(:disabled):active .mdc-radio__native-control:enabled:checked+.mdc-radio__background .mdc-radio__outer-circle,::ng-deep .radio-group-container .mat-mdc-radio-button .mdc-radio:not(:disabled):active .mdc-radio__native-control:enabled+.mdc-radio__background .mdc-radio__inner-circle,::ng-deep .radio-group-container .mat-mdc-radio-checked .mdc-form-field,::ng-deep .radio-group-container .mat-mdc-radio-checked .mdc-form-field.mat-internal-form-field{border-color:var(--primary-500)}::ng-deep .radio-group-container .mdc-radio__background{height:1rem;width:1rem;top:.125rem}::ng-deep .radio-group-container .mat-radio-outer-circle{height:.625rem;width:.625rem}::ng-deep .radio-group-container .mdc-radio__native-control:checked+.mdc-radio__background .mdc-radio__inner-circle{transform:scale(.4);top:-2px;left:-2px}::ng-deep .radio-group-container .mat-mdc-radio-button .mdc-radio .mdc-radio__background:before{background-color:#fff}::ng-deep .radio-group-container .radio-box:hover{border-radius:var(--large-64px);background:var(--structural-neutral1)}::ng-deep .radio-group-container .mdc-label{padding-left:0;cursor:pointer;color:var(--text-highemphasis, #1C1B20);font-family:var(--font);font-size:.875rem;font-style:normal;font-weight:400;line-height:1.25rem;letter-spacing:.25px}::ng-deep .radio-group-container .radio-box{cursor:pointer}::ng-deep .radio-group-container .mat-mdc-radio-button .mdc-radio:hover .mdc-radio__native-control:enabled:not(:checked)+.mdc-radio__background .mdc-radio__outer-circle{border-color:var(--icon-grey1, #757575)}::ng-deep .radio-group-container .mat-mdc-radio-button .mdc-radio{padding:var(--small-8px) var(--small-8px) var(--small-8px) var(--small-12px)}::ng-deep .radio-group-container .mat-mdc-radio-button .mdc-radio .mdc-radio__native-control:enabled:not(:checked)+.mdc-radio__background .mdc-radio__outer-circle{border-width:1.5px}::ng-deep .radio-group-container .mat-mdc-radio-checked .mdc-label{color:var(--primary-500);font-family:var(--font);font-size:.875rem;font-style:normal;font-weight:600;letter-spacing:.15px}::ng-deep .radio-group-container .mdc-label{color:var(--Text-High-Emphasis, #1C1B20);font-family:var(--font);font-weight:400;line-height:1.25rem;letter-spacing:.25px}.title-container,.radio-group-container .form-field{display:flex;flex-direction:column;gap:var(--small-8px)}\n"], dependencies: [{ kind: "component", type: MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color"], outputs: ["change"], exportAs: ["matRadioButton"] }, { kind: "ngmodule", type: MatRadioModule }, { kind: "directive", type: i1$7.MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] }); }
|
|
2393
2638
|
}
|
|
2394
2639
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: RadioButtonComponent, decorators: [{
|
|
2395
2640
|
type: Component,
|