@indigina/ui-kit 1.1.108 → 1.1.109
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.
|
@@ -3,12 +3,12 @@ import { Component, ChangeDetectionStrategy, Input, EventEmitter, ViewEncapsulat
|
|
|
3
3
|
import * as i1 from '@progress/kendo-angular-buttons';
|
|
4
4
|
import { ButtonModule, ButtonGroupModule } from '@progress/kendo-angular-buttons';
|
|
5
5
|
import * as i1$1 from '@angular/common';
|
|
6
|
-
import { CommonModule, NgClass, DOCUMENT, DatePipe } from '@angular/common';
|
|
6
|
+
import { CommonModule, NgClass, DOCUMENT, NgTemplateOutlet, DatePipe } from '@angular/common';
|
|
7
7
|
import * as i1$2 from '@progress/kendo-angular-label';
|
|
8
8
|
import { LabelModule } from '@progress/kendo-angular-label';
|
|
9
9
|
import { TooltipDirective, TooltipSettings } from '@progress/kendo-angular-tooltip';
|
|
10
10
|
import * as i1$a from '@progress/kendo-angular-popup';
|
|
11
|
-
import { PopupService
|
|
11
|
+
import { PopupService } from '@progress/kendo-angular-popup';
|
|
12
12
|
import * as i1$5 from '@angular/forms';
|
|
13
13
|
import { NG_VALUE_ACCESSOR, ReactiveFormsModule, FormsModule, UntypedFormControl, Validators } from '@angular/forms';
|
|
14
14
|
import * as i1$3 from '@progress/kendo-angular-inputs';
|
|
@@ -23,7 +23,7 @@ import * as i1$6 from 'ngx-toastr';
|
|
|
23
23
|
import { ToastrModule, TOAST_CONFIG, DefaultGlobalConfig } from 'ngx-toastr';
|
|
24
24
|
import * as i1$7 from '@angular/router';
|
|
25
25
|
import { RouterModule, NavigationEnd, RouterLink } from '@angular/router';
|
|
26
|
-
import { BehaviorSubject, filter } from 'rxjs';
|
|
26
|
+
import { BehaviorSubject, filter, Subject, takeUntil } from 'rxjs';
|
|
27
27
|
import { v4 } from 'uuid';
|
|
28
28
|
import * as i1$8 from '@progress/kendo-angular-dialog';
|
|
29
29
|
import { DialogModule, WindowModule } from '@progress/kendo-angular-dialog';
|
|
@@ -32,7 +32,7 @@ import { IndicatorsModule } from '@progress/kendo-angular-indicators';
|
|
|
32
32
|
import * as i2$1 from '@progress/kendo-angular-upload';
|
|
33
33
|
import { UploadModule } from '@progress/kendo-angular-upload';
|
|
34
34
|
import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
|
|
35
|
-
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
|
|
35
|
+
import { takeUntilDestroyed, outputToObservable } from '@angular/core/rxjs-interop';
|
|
36
36
|
import initials from 'initials';
|
|
37
37
|
import * as i2$2 from '@progress/kendo-angular-layout';
|
|
38
38
|
import { LayoutModule, TileLayoutModule } from '@progress/kendo-angular-layout';
|
|
@@ -4435,100 +4435,101 @@ var KitPopupPositionMode;
|
|
|
4435
4435
|
KitPopupPositionMode["FIXED"] = "fixed";
|
|
4436
4436
|
})(KitPopupPositionMode || (KitPopupPositionMode = {}));
|
|
4437
4437
|
|
|
4438
|
+
const defaultPositionMode = KitPopupPositionMode.ABSOLUTE;
|
|
4438
4439
|
class KitPopupComponent {
|
|
4439
|
-
|
|
4440
|
-
this.
|
|
4441
|
-
|
|
4442
|
-
|
|
4443
|
-
|
|
4444
|
-
|
|
4445
|
-
|
|
4446
|
-
|
|
4447
|
-
|
|
4448
|
-
|
|
4449
|
-
|
|
4450
|
-
|
|
4451
|
-
|
|
4452
|
-
this.
|
|
4453
|
-
|
|
4454
|
-
|
|
4455
|
-
|
|
4456
|
-
this.
|
|
4457
|
-
this.
|
|
4458
|
-
this.
|
|
4459
|
-
this.
|
|
4460
|
-
this.
|
|
4461
|
-
this.
|
|
4462
|
-
this.
|
|
4463
|
-
this.apply = new EventEmitter();
|
|
4464
|
-
this.visible = signal(false);
|
|
4465
|
-
this.anchorAlign = {
|
|
4466
|
-
horizontal: this.anchorHorizontalAlign,
|
|
4467
|
-
vertical: KitPopupAlignVertical.BOTTOM,
|
|
4468
|
-
};
|
|
4469
|
-
this.popupAlign = {
|
|
4470
|
-
horizontal: this.popupHorizontalAlign,
|
|
4471
|
-
vertical: KitPopupAlignVertical.TOP,
|
|
4472
|
-
};
|
|
4440
|
+
get popupHTMLElement() {
|
|
4441
|
+
return this.popupRef?.popupElement || null;
|
|
4442
|
+
}
|
|
4443
|
+
get isPopupOpen() {
|
|
4444
|
+
return !!this.popupRef;
|
|
4445
|
+
}
|
|
4446
|
+
get anchorElement() {
|
|
4447
|
+
return this.anchor() instanceof ElementRef && this.anchor().nativeElement || this.anchor();
|
|
4448
|
+
}
|
|
4449
|
+
constructor(popupService) {
|
|
4450
|
+
this.popupService = popupService;
|
|
4451
|
+
this.anchor = input.required();
|
|
4452
|
+
this.content = input.required();
|
|
4453
|
+
this.closeOnOutsideClick = input(true);
|
|
4454
|
+
this.showFooter = input(false);
|
|
4455
|
+
this.cancelButtonLabel = input('');
|
|
4456
|
+
this.applyButtonLabel = input('');
|
|
4457
|
+
this.isApplyButtonDisabled = input(false);
|
|
4458
|
+
this.positionMode = input(defaultPositionMode);
|
|
4459
|
+
this.popupClass = input('');
|
|
4460
|
+
this.onCancel = output();
|
|
4461
|
+
this.onApply = output();
|
|
4462
|
+
this.onOpen = output();
|
|
4463
|
+
this.onClose = output();
|
|
4473
4464
|
this.kitButtonKind = KitButtonKind;
|
|
4474
4465
|
this.kitButtonType = KitButtonType;
|
|
4466
|
+
this.popupRef = null;
|
|
4467
|
+
this.destroy$ = new Subject();
|
|
4475
4468
|
}
|
|
4476
4469
|
documentClick(event) {
|
|
4477
|
-
if (!this.closeOnOutsideClick) {
|
|
4470
|
+
if (!this.closeOnOutsideClick() || !this.popupRef) {
|
|
4478
4471
|
return;
|
|
4479
4472
|
}
|
|
4480
|
-
if (!this.
|
|
4481
|
-
this.
|
|
4473
|
+
if (!this.popupRef?.popupElement.contains(event.target) && !this.anchorElement?.contains(event.target)) {
|
|
4474
|
+
this.close();
|
|
4482
4475
|
}
|
|
4483
4476
|
}
|
|
4484
4477
|
ngOnInit() {
|
|
4485
|
-
this.
|
|
4486
|
-
|
|
4478
|
+
outputToObservable(this.onOpen).pipe(takeUntil(this.destroy$))
|
|
4479
|
+
.subscribe(() => {
|
|
4480
|
+
if (this.popupClass()) {
|
|
4481
|
+
const kendoPopup = this.popupRef?.popupElement;
|
|
4482
|
+
kendoPopup?.classList.add(this.popupClass());
|
|
4483
|
+
}
|
|
4484
|
+
});
|
|
4487
4485
|
}
|
|
4488
|
-
|
|
4489
|
-
|
|
4486
|
+
ngOnDestroy() {
|
|
4487
|
+
this.popupRef = null;
|
|
4488
|
+
this.destroy$.next();
|
|
4489
|
+
this.destroy$.complete();
|
|
4490
4490
|
}
|
|
4491
|
-
toggle() {
|
|
4492
|
-
if (
|
|
4493
|
-
this.
|
|
4491
|
+
toggle(options) {
|
|
4492
|
+
if (this.popupRef) {
|
|
4493
|
+
this.close();
|
|
4494
|
+
}
|
|
4495
|
+
else {
|
|
4496
|
+
this.popupRef = this.popupService.open({
|
|
4497
|
+
...options,
|
|
4498
|
+
anchor: this.anchor(),
|
|
4499
|
+
content: this.popupTemplate,
|
|
4500
|
+
positionMode: this.positionMode(),
|
|
4501
|
+
});
|
|
4502
|
+
this.onOpen.emit();
|
|
4503
|
+
}
|
|
4504
|
+
}
|
|
4505
|
+
close() {
|
|
4506
|
+
if (!this.popupRef) {
|
|
4494
4507
|
return;
|
|
4495
4508
|
}
|
|
4496
|
-
this.
|
|
4509
|
+
this.popupRef.close();
|
|
4510
|
+
this.popupRef = null;
|
|
4511
|
+
this.onClose.emit();
|
|
4497
4512
|
}
|
|
4498
|
-
|
|
4499
|
-
this.
|
|
4513
|
+
cancel() {
|
|
4514
|
+
this.onCancel.emit();
|
|
4515
|
+
this.close();
|
|
4500
4516
|
}
|
|
4501
|
-
|
|
4502
|
-
|
|
4517
|
+
apply() {
|
|
4518
|
+
this.onApply.emit();
|
|
4519
|
+
this.close();
|
|
4520
|
+
}
|
|
4521
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: KitPopupComponent, deps: [{ token: i1$a.PopupService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4522
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.4", type: KitPopupComponent, isStandalone: true, selector: "kit-popup", inputs: { anchor: { classPropertyName: "anchor", publicName: "anchor", isSignal: true, isRequired: true, transformFunction: null }, content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: true, transformFunction: null }, closeOnOutsideClick: { classPropertyName: "closeOnOutsideClick", publicName: "closeOnOutsideClick", isSignal: true, isRequired: false, transformFunction: null }, showFooter: { classPropertyName: "showFooter", publicName: "showFooter", isSignal: true, isRequired: false, transformFunction: null }, cancelButtonLabel: { classPropertyName: "cancelButtonLabel", publicName: "cancelButtonLabel", isSignal: true, isRequired: false, transformFunction: null }, applyButtonLabel: { classPropertyName: "applyButtonLabel", publicName: "applyButtonLabel", isSignal: true, isRequired: false, transformFunction: null }, isApplyButtonDisabled: { classPropertyName: "isApplyButtonDisabled", publicName: "isApplyButtonDisabled", isSignal: true, isRequired: false, transformFunction: null }, positionMode: { classPropertyName: "positionMode", publicName: "positionMode", isSignal: true, isRequired: false, transformFunction: null }, popupClass: { classPropertyName: "popupClass", publicName: "popupClass", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onCancel: "onCancel", onApply: "onApply", onOpen: "onOpen", onClose: "onClose" }, host: { listeners: { "document:click": "documentClick($event)" } }, viewQueries: [{ propertyName: "popupTemplate", first: true, predicate: ["popupTemplate"], descendants: true }], ngImport: i0, template: "<ng-template #popupTemplate>\n <ng-container *ngTemplateOutlet=\"content()\"></ng-container>\n @if (showFooter()) {\n <div class=\"footer\">\n <kit-button [label]=\"cancelButtonLabel()\"\n [kind]=\"kitButtonKind.MEDIUM\"\n [type]=\"kitButtonType.GHOST\"\n (clicked)=\"cancel()\"\n ></kit-button>\n <kit-button [label]=\"applyButtonLabel()\"\n [kind]=\"kitButtonKind.MEDIUM\"\n [disabled]=\"isApplyButtonDisabled()\"\n (clicked)=\"apply()\"\n ></kit-button>\n </div>\n }\n</ng-template>\n", styles: ["::ng-deep .k-popup{box-sizing:border-box;padding:24px;margin-top:10px;color:var(--ui-kit-color-black);border:none;border-radius:8px;background:var(--ui-kit-color-white);box-shadow:0 10px 15px #0000001a,0 4px 6px #0000000d}::ng-deep .k-popup .footer{display:flex;align-items:center;justify-content:space-between;padding-top:15px;margin-top:10px;border-top:1px solid var(--ui-kit-color-grey-6)}\n"], dependencies: [{ kind: "ngmodule", type: KitButtonModule }, { kind: "component", type: KitButtonComponent, selector: "kit-button", inputs: ["disabled", "label", "type", "icon", "iconType", "kind", "iconPosition", "buttonClass", "active"], outputs: ["clicked"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
4503
4523
|
}
|
|
4504
4524
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: KitPopupComponent, decorators: [{
|
|
4505
4525
|
type: Component,
|
|
4506
|
-
args: [{ selector: 'kit-popup', imports: [
|
|
4507
|
-
PopupModule,
|
|
4526
|
+
args: [{ selector: 'kit-popup', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
|
|
4508
4527
|
KitButtonModule,
|
|
4509
|
-
|
|
4510
|
-
|
|
4511
|
-
|
|
4512
|
-
|
|
4513
|
-
|
|
4514
|
-
}], anchorHorizontalAlign: [{
|
|
4515
|
-
type: Input
|
|
4516
|
-
}], popupHorizontalAlign: [{
|
|
4517
|
-
type: Input
|
|
4518
|
-
}], showFooter: [{
|
|
4519
|
-
type: Input
|
|
4520
|
-
}], cancelButtonLabel: [{
|
|
4521
|
-
type: Input
|
|
4522
|
-
}], applyButtonLabel: [{
|
|
4523
|
-
type: Input
|
|
4524
|
-
}], isApplyButtonDisabled: [{
|
|
4525
|
-
type: Input
|
|
4526
|
-
}], positionMode: [{
|
|
4527
|
-
type: Input
|
|
4528
|
-
}], cancel: [{
|
|
4529
|
-
type: Output
|
|
4530
|
-
}], apply: [{
|
|
4531
|
-
type: Output
|
|
4528
|
+
NgTemplateOutlet,
|
|
4529
|
+
], template: "<ng-template #popupTemplate>\n <ng-container *ngTemplateOutlet=\"content()\"></ng-container>\n @if (showFooter()) {\n <div class=\"footer\">\n <kit-button [label]=\"cancelButtonLabel()\"\n [kind]=\"kitButtonKind.MEDIUM\"\n [type]=\"kitButtonType.GHOST\"\n (clicked)=\"cancel()\"\n ></kit-button>\n <kit-button [label]=\"applyButtonLabel()\"\n [kind]=\"kitButtonKind.MEDIUM\"\n [disabled]=\"isApplyButtonDisabled()\"\n (clicked)=\"apply()\"\n ></kit-button>\n </div>\n }\n</ng-template>\n", styles: ["::ng-deep .k-popup{box-sizing:border-box;padding:24px;margin-top:10px;color:var(--ui-kit-color-black);border:none;border-radius:8px;background:var(--ui-kit-color-white);box-shadow:0 10px 15px #0000001a,0 4px 6px #0000000d}::ng-deep .k-popup .footer{display:flex;align-items:center;justify-content:space-between;padding-top:15px;margin-top:10px;border-top:1px solid var(--ui-kit-color-grey-6)}\n"] }]
|
|
4530
|
+
}], ctorParameters: () => [{ type: i1$a.PopupService }], propDecorators: { popupTemplate: [{
|
|
4531
|
+
type: ViewChild,
|
|
4532
|
+
args: ['popupTemplate']
|
|
4532
4533
|
}], documentClick: [{
|
|
4533
4534
|
type: HostListener,
|
|
4534
4535
|
args: ['document:click', ['$event']]
|
|
@@ -4684,10 +4685,22 @@ class KitProfileMenuComponent {
|
|
|
4684
4685
|
}
|
|
4685
4686
|
onClick(item) {
|
|
4686
4687
|
item?.action && item.action();
|
|
4687
|
-
this.
|
|
4688
|
+
this.popup.close();
|
|
4689
|
+
}
|
|
4690
|
+
toggle() {
|
|
4691
|
+
this.popup.toggle({
|
|
4692
|
+
anchorAlign: {
|
|
4693
|
+
horizontal: KitPopupAlignHorizontal.RIGHT,
|
|
4694
|
+
vertical: KitPopupAlignVertical.BOTTOM,
|
|
4695
|
+
},
|
|
4696
|
+
popupAlign: {
|
|
4697
|
+
horizontal: KitPopupAlignHorizontal.RIGHT,
|
|
4698
|
+
vertical: KitPopupAlignVertical.TOP,
|
|
4699
|
+
},
|
|
4700
|
+
});
|
|
4688
4701
|
}
|
|
4689
4702
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: KitProfileMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4690
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.4", type: KitProfileMenuComponent, isStandalone: true, selector: "kit-profile-menu", inputs: { menuItems: "menuItems", userName: "userName", companyName: "companyName", avatarImageSrc: "avatarImageSrc" }, viewQueries: [{ propertyName: "
|
|
4703
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.4", type: KitProfileMenuComponent, isStandalone: true, selector: "kit-profile-menu", inputs: { menuItems: "menuItems", userName: "userName", companyName: "companyName", avatarImageSrc: "avatarImageSrc" }, viewQueries: [{ propertyName: "popup", first: true, predicate: ["popup"], descendants: true }], ngImport: i0, template: "<div class=\"profile-menu\">\n <button #menuButton\n class=\"menu-button\"\n [class.active]=\"popup.isPopupOpen\"\n (click)=\"toggle()\">\n <kit-avatar [size]=\"KitAvatarSize.LARGE\"\n [name]=\"userName\"\n [imageSrc]=\"avatarImageSrc\"\n ></kit-avatar>\n <kit-svg-icon class=\"menu-button-icon\"\n [icon]=\"KitSvgIcon.CARET_DOWN\"\n ></kit-svg-icon>\n </button>\n\n <kit-popup #popup\n popupClass=\"menu-popup\"\n [anchor]=\"menuButton\"\n [content]=\"content\">\n </kit-popup>\n</div>\n\n<ng-template #content>\n <div class=\"popup-content\">\n <div class=\"popup-header\">\n <kit-avatar class=\"popup-header-avatar\"\n [name]=\"userName\"\n [size]=\"KitAvatarSize.LARGE\"\n [imageSrc]=\"avatarImageSrc\"\n ></kit-avatar>\n <div class=\"popup-header-details\">\n @if (userName) {\n <div class=\"popup-header-name\">{{ userName }}</div>\n }\n @if (companyName) {\n <div class=\"popup-header-company\">{{ companyName }}</div>\n }\n </div>\n </div>\n <div class=\"popup-menu\">\n @for (item of menuItems; track item) {\n <a class=\"menu-item\"\n [ngClass]=\"item.cssClass\"\n [routerLink]=\"item.link\"\n (click)=\"onClick(item)\">\n @if (item.icon) {\n <kit-svg-icon class=\"menu-item-icon\"\n [icon]=\"item.icon\"\n [ngClass]=\"item?.iconType ?? KitSvgIconType.FILL\"\n ></kit-svg-icon>\n }\n <span class=\"menu-item-text\">{{ item.title }}</span>\n </a>\n }\n </div>\n </div>\n</ng-template>\n", styles: [".profile-menu .menu-button{display:flex;align-items:center;gap:14px;padding:0;border:none;background:none;cursor:pointer}.profile-menu .menu-button-icon{display:block;width:20px;height:20px}.profile-menu .menu-button ::ng-deep .kit-badge-content{top:4px;right:5px;border-color:var(--color-white)}.profile-menu .menu-button.active .menu-button-icon{transform:rotate(180deg)}::ng-deep .menu-popup .popup-content{display:flex;flex-direction:column;gap:4px;padding:8px 4px;width:280px}::ng-deep .menu-popup .popup-header{display:flex;align-items:center;gap:14px;padding:6px 12px}::ng-deep .menu-popup .popup-header-details{min-width:0;font-size:14px}::ng-deep .menu-popup .popup-header-name{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}::ng-deep .menu-popup .popup-menu{display:flex;flex-direction:column;gap:4px}::ng-deep .menu-popup .menu-item{display:flex;align-items:center;gap:8px;padding:6px 12px;color:var(--ui-kit-color-grey-10);border-radius:4px;text-decoration:none;cursor:pointer}::ng-deep .menu-popup .menu-item:hover{color:var(--ui-kit-color-main);background:var(--ui-kit-color-grey-13)}::ng-deep .menu-popup .menu-item-icon{display:block;width:18px;height:18px}::ng-deep .menu-popup .menu-item-icon.stroke{fill:none;stroke:var(--ui-kit-color-main)}::ng-deep .menu-popup .menu-item-icon.fill{stroke:none;fill:var(--ui-kit-color-main)}::ng-deep .menu-popup .menu-item-text{font-size:14px;font-weight:400}::ng-deep .menu-popup .k-popup{padding:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: KitAvatarModule }, { kind: "component", type: KitAvatarComponent, selector: "kit-avatar", inputs: ["name", "imageSrc", "size"] }, { kind: "component", type: KitPopupComponent, selector: "kit-popup", inputs: ["anchor", "content", "closeOnOutsideClick", "showFooter", "cancelButtonLabel", "applyButtonLabel", "isApplyButtonDisabled", "positionMode", "popupClass"], outputs: ["onCancel", "onApply", "onOpen", "onClose"] }, { kind: "ngmodule", type: KitSvgIconModule }, { kind: "component", type: KitSvgIconComponent, selector: "kit-svg-icon", inputs: ["icon", "iconClass"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
4691
4704
|
}
|
|
4692
4705
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: KitProfileMenuComponent, decorators: [{
|
|
4693
4706
|
type: Component,
|
|
@@ -4697,7 +4710,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImpor
|
|
|
4697
4710
|
KitPopupComponent,
|
|
4698
4711
|
KitSvgIconModule,
|
|
4699
4712
|
RouterLink,
|
|
4700
|
-
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"profile-menu\">\n <button #menuButton\n class=\"menu-button\"\n [class.active]=\"
|
|
4713
|
+
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"profile-menu\">\n <button #menuButton\n class=\"menu-button\"\n [class.active]=\"popup.isPopupOpen\"\n (click)=\"toggle()\">\n <kit-avatar [size]=\"KitAvatarSize.LARGE\"\n [name]=\"userName\"\n [imageSrc]=\"avatarImageSrc\"\n ></kit-avatar>\n <kit-svg-icon class=\"menu-button-icon\"\n [icon]=\"KitSvgIcon.CARET_DOWN\"\n ></kit-svg-icon>\n </button>\n\n <kit-popup #popup\n popupClass=\"menu-popup\"\n [anchor]=\"menuButton\"\n [content]=\"content\">\n </kit-popup>\n</div>\n\n<ng-template #content>\n <div class=\"popup-content\">\n <div class=\"popup-header\">\n <kit-avatar class=\"popup-header-avatar\"\n [name]=\"userName\"\n [size]=\"KitAvatarSize.LARGE\"\n [imageSrc]=\"avatarImageSrc\"\n ></kit-avatar>\n <div class=\"popup-header-details\">\n @if (userName) {\n <div class=\"popup-header-name\">{{ userName }}</div>\n }\n @if (companyName) {\n <div class=\"popup-header-company\">{{ companyName }}</div>\n }\n </div>\n </div>\n <div class=\"popup-menu\">\n @for (item of menuItems; track item) {\n <a class=\"menu-item\"\n [ngClass]=\"item.cssClass\"\n [routerLink]=\"item.link\"\n (click)=\"onClick(item)\">\n @if (item.icon) {\n <kit-svg-icon class=\"menu-item-icon\"\n [icon]=\"item.icon\"\n [ngClass]=\"item?.iconType ?? KitSvgIconType.FILL\"\n ></kit-svg-icon>\n }\n <span class=\"menu-item-text\">{{ item.title }}</span>\n </a>\n }\n </div>\n </div>\n</ng-template>\n", styles: [".profile-menu .menu-button{display:flex;align-items:center;gap:14px;padding:0;border:none;background:none;cursor:pointer}.profile-menu .menu-button-icon{display:block;width:20px;height:20px}.profile-menu .menu-button ::ng-deep .kit-badge-content{top:4px;right:5px;border-color:var(--color-white)}.profile-menu .menu-button.active .menu-button-icon{transform:rotate(180deg)}::ng-deep .menu-popup .popup-content{display:flex;flex-direction:column;gap:4px;padding:8px 4px;width:280px}::ng-deep .menu-popup .popup-header{display:flex;align-items:center;gap:14px;padding:6px 12px}::ng-deep .menu-popup .popup-header-details{min-width:0;font-size:14px}::ng-deep .menu-popup .popup-header-name{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}::ng-deep .menu-popup .popup-menu{display:flex;flex-direction:column;gap:4px}::ng-deep .menu-popup .menu-item{display:flex;align-items:center;gap:8px;padding:6px 12px;color:var(--ui-kit-color-grey-10);border-radius:4px;text-decoration:none;cursor:pointer}::ng-deep .menu-popup .menu-item:hover{color:var(--ui-kit-color-main);background:var(--ui-kit-color-grey-13)}::ng-deep .menu-popup .menu-item-icon{display:block;width:18px;height:18px}::ng-deep .menu-popup .menu-item-icon.stroke{fill:none;stroke:var(--ui-kit-color-main)}::ng-deep .menu-popup .menu-item-icon.fill{stroke:none;fill:var(--ui-kit-color-main)}::ng-deep .menu-popup .menu-item-text{font-size:14px;font-weight:400}::ng-deep .menu-popup .k-popup{padding:0}\n"] }]
|
|
4701
4714
|
}], propDecorators: { menuItems: [{
|
|
4702
4715
|
type: Input
|
|
4703
4716
|
}], userName: [{
|
|
@@ -4706,9 +4719,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImpor
|
|
|
4706
4719
|
type: Input
|
|
4707
4720
|
}], avatarImageSrc: [{
|
|
4708
4721
|
type: Input
|
|
4709
|
-
}],
|
|
4722
|
+
}], popup: [{
|
|
4710
4723
|
type: ViewChild,
|
|
4711
|
-
args: ['
|
|
4724
|
+
args: ['popup']
|
|
4712
4725
|
}] } });
|
|
4713
4726
|
|
|
4714
4727
|
class KitTabComponent {
|