@litigiovirtual/ius-design-components 1.0.245 → 1.0.246
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/button-accounts/button-accounts.component.mjs +13 -14
- package/fesm2022/litigiovirtual-ius-design-components.mjs +143 -143
- package/fesm2022/litigiovirtual-ius-design-components.mjs.map +1 -1
- package/lib/button-accounts/button-accounts.component.d.ts +5 -5
- package/package.json +1 -1
|
@@ -1,19 +1,11 @@
|
|
|
1
1
|
import { CommonModule } from '@angular/common';
|
|
2
2
|
import { Component, EventEmitter, HostListener, Input, Output } from '@angular/core';
|
|
3
|
-
import { IconMdComponent } from "../icon-md";
|
|
4
3
|
import { ButtonCircleTertiaryComponent } from "../button-circle-tertiary";
|
|
5
4
|
import { OptionComponent } from "../option";
|
|
6
5
|
import { SimpleDividerComponent } from "../simple-divider";
|
|
6
|
+
import { AvatarV2Component } from "../avatar-v2";
|
|
7
7
|
import * as i0 from "@angular/core";
|
|
8
|
-
import * as i1 from "@angular/common";
|
|
9
8
|
export class ButtonAccountsComponent {
|
|
10
|
-
onDocumentClick(event) {
|
|
11
|
-
const target = event.target;
|
|
12
|
-
if (!this.elementRef.nativeElement.contains(target)) {
|
|
13
|
-
this.isOpen = false;
|
|
14
|
-
this.openOptions = false;
|
|
15
|
-
}
|
|
16
|
-
}
|
|
17
9
|
constructor(elementRef) {
|
|
18
10
|
this.elementRef = elementRef;
|
|
19
11
|
this.isOpen = false;
|
|
@@ -23,6 +15,13 @@ export class ButtonAccountsComponent {
|
|
|
23
15
|
this.onPressedDesvincular = new EventEmitter();
|
|
24
16
|
this.onPressedEditar = new EventEmitter();
|
|
25
17
|
}
|
|
18
|
+
onDocumentClick(event) {
|
|
19
|
+
const target = event.target;
|
|
20
|
+
if (!this.elementRef.nativeElement.contains(target)) {
|
|
21
|
+
this.isOpen = false;
|
|
22
|
+
this.openOptions = false;
|
|
23
|
+
}
|
|
24
|
+
}
|
|
26
25
|
onClickAccount(account) {
|
|
27
26
|
this.isOpen = !this.isOpen;
|
|
28
27
|
this.accountSelected.emit(account);
|
|
@@ -33,17 +32,17 @@ export class ButtonAccountsComponent {
|
|
|
33
32
|
this.openOptions = !this.openOptions;
|
|
34
33
|
}
|
|
35
34
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ButtonAccountsComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
36
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: ButtonAccountsComponent, isStandalone: true, selector: "ius-button-accounts", inputs: { account: "account" }, outputs: { accountSelected: "accountSelected", onPressedPredeterminado: "onPressedPredeterminado", onPressedDesvincular: "onPressedDesvincular", onPressedEditar: "onPressedEditar" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, ngImport: i0, template: "<div class=\"general\">\r\n <
|
|
35
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: ButtonAccountsComponent, isStandalone: true, selector: "ius-button-accounts", inputs: { account: "account" }, outputs: { accountSelected: "accountSelected", onPressedPredeterminado: "onPressedPredeterminado", onPressedDesvincular: "onPressedDesvincular", onPressedEditar: "onPressedEditar" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, ngImport: i0, template: "<div class=\"general\">\r\n <button type=\"button\" class=\"ius-btn\" [class.isOpen]=\"isOpen\" [class.menuOpen]=\"openOptions\"\r\n [class.isPredetermined]=\"account.isPredetermined\" (click)=\"onClickAccount(account)\">\r\n\r\n <div class=\"content\">\r\n <ius-avatar-v2 [imageUrl]=\"account.logo\" [name]=\"account.name\" size=\"md\" shape=\"circle\"\r\n fallbackIconName=\"icon-account-circle\">\r\n </ius-avatar-v2>\r\n\r\n <span class=\"name body-base-1\">{{ account.name }}</span>\r\n </div>\r\n\r\n <ius-button-circle-tertiary (click)=\"showOptions($event)\" [iconName]=\"'icon-more-vert'\">\r\n </ius-button-circle-tertiary>\r\n </button>\r\n\r\n @if (openOptions) {\r\n <div class=\"more-box active\">\r\n <ius-option [checked]=\"account.isPredetermined!\" (optionClick)=\"onPressedPredeterminado.emit(account)\">\r\n <span class=\"body-large\">Marcar como predeterminada</span>\r\n </ius-option>\r\n\r\n <ius-simple-divider></ius-simple-divider>\r\n\r\n <ius-option [leadingIcon]=\"'icon-edit'\" (optionClick)=\"onPressedEditar.emit(account)\">\r\n <span class=\"body-large\">Editar</span>\r\n </ius-option>\r\n\r\n <ius-option [leadingIcon]=\"'icon-delete'\" (optionClick)=\"onPressedDesvincular.emit(account)\">\r\n <span class=\"body-large\">Desvincular</span>\r\n </ius-option>\r\n </div>\r\n }\r\n</div>", styles: [".h1{font-family:Roboto,sans-serif;font-size:2.375rem;font-weight:500;line-height:46px}.h2{font-family:Roboto,sans-serif;font-size:1.875rem;font-weight:700;line-height:38px}.h3{font-family:Roboto,sans-serif;font-size:1.5rem;font-weight:500;line-height:32px}.h4{font-family:Roboto,sans-serif;font-size:1.25rem;font-weight:700;line-height:26px}.h5{font-family:Roboto,sans-serif;font-size:1.125rem;font-weight:500;line-height:24px;letter-spacing:.18px}.label-large{font-family:Roboto,sans-serif;font-size:1rem;font-weight:500;line-height:22px}.body-large{font-family:Rubik,sans-serif;font-size:1rem;font-weight:400;line-height:22px}.label-base{font-family:Rubik,sans-serif;font-size:.875rem;font-weight:500;line-height:20px;letter-spacing:.28px}.body-base{font-family:Rubik,sans-serif;font-size:.875rem;font-weight:400;line-height:20px;font-style:italic;letter-spacing:.28px}.body-base-1,.body-base-1-1{font-family:Rubik,sans-serif;font-size:.875rem;font-weight:400;line-height:20px;letter-spacing:.28px}.body-sm{font-family:Rubik,sans-serif;font-size:.75rem;font-weight:400;line-height:16px;letter-spacing:.28px}.body-sm-italic{font-family:Rubik,sans-serif;font-size:.75rem;font-weight:400;line-height:16px;font-style:italic;letter-spacing:.28px}.caption-sm{font-family:Rubik,sans-serif;font-size:.75rem;font-weight:500;line-height:16px;letter-spacing:.28px}.caption-sm-italic{font-family:Rubik,sans-serif;font-size:.75rem;font-weight:500;line-height:16px;font-style:italic;letter-spacing:.28px}.general{position:relative;width:100%}.ius-btn{display:inline-flex;align-items:center;justify-content:space-between;gap:8px;width:100%;box-sizing:border-box;padding:8px 12px;border-radius:8px;border:1px solid #eaeaea;background-color:#fff;color:#333;font-family:Rubik,sans-serif;font-size:.875rem;font-weight:500;line-height:20px;letter-spacing:.28px;cursor:pointer;transition:background-color .15s ease,border-color .15s ease,box-shadow .15s ease}.ius-btn:hover:not(:disabled){border-color:#f0f0f0;background-color:#f5f5f5;box-shadow:0 1px 3px #0000001f,0 1px 2px #00000014}.ius-btn:active:not(:disabled){border-color:#c4dfff;background-color:#c4dfff;box-shadow:none}.ius-btn.isOpen{border-color:#c4dfff;background-color:#edf6ff}.ius-btn.menuOpen{border-color:#f0f0f0;background-color:#f5f5f5;box-shadow:0 1px 3px #0000001f,0 1px 2px #00000014}.ius-btn.isOpen.menuOpen{border-color:#c4dfff;background-color:#edf6ff;box-shadow:0 1px 3px #0000001f,0 1px 2px #00000014}.content{display:flex;align-items:center;gap:12px;min-width:0;flex:1 1 auto}.name{flex:1 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:left;color:#333}.more-box{position:absolute;top:100%;left:90%;margin-top:8px;min-width:240px;padding:8px;z-index:100;display:flex;flex-direction:column;border-radius:8px;background:#fff;box-shadow:0 2px 6px #00000024,0 1px 10px #0000001a;border:1px solid #f0f0f0;opacity:0;pointer-events:none;transform:translateY(-6px);transition:opacity .25s ease,transform .25s ease}.more-box.active{opacity:1;transform:translateY(0);pointer-events:all}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: ButtonCircleTertiaryComponent, selector: "ius-button-circle-tertiary", inputs: ["disabled", "iconName"], outputs: ["buttonClicked"] }, { kind: "component", type: OptionComponent, selector: "ius-option", inputs: ["disabled", "checked", "leadingIcon"], outputs: ["optionClick"] }, { kind: "component", type: SimpleDividerComponent, selector: "ius-simple-divider" }, { kind: "component", type: AvatarV2Component, selector: "ius-avatar-v2", inputs: ["imageUrl", "name", "size", "shape", "showEditButton", "backgroundColor", "fallbackIconName"], outputs: ["editClicked"] }] }); }
|
|
37
36
|
}
|
|
38
37
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ButtonAccountsComponent, decorators: [{
|
|
39
38
|
type: Component,
|
|
40
39
|
args: [{ selector: 'ius-button-accounts', standalone: true, imports: [
|
|
41
|
-
IconMdComponent,
|
|
42
40
|
CommonModule,
|
|
43
41
|
ButtonCircleTertiaryComponent,
|
|
44
42
|
OptionComponent,
|
|
45
|
-
SimpleDividerComponent
|
|
46
|
-
|
|
43
|
+
SimpleDividerComponent,
|
|
44
|
+
AvatarV2Component
|
|
45
|
+
], template: "<div class=\"general\">\r\n <button type=\"button\" class=\"ius-btn\" [class.isOpen]=\"isOpen\" [class.menuOpen]=\"openOptions\"\r\n [class.isPredetermined]=\"account.isPredetermined\" (click)=\"onClickAccount(account)\">\r\n\r\n <div class=\"content\">\r\n <ius-avatar-v2 [imageUrl]=\"account.logo\" [name]=\"account.name\" size=\"md\" shape=\"circle\"\r\n fallbackIconName=\"icon-account-circle\">\r\n </ius-avatar-v2>\r\n\r\n <span class=\"name body-base-1\">{{ account.name }}</span>\r\n </div>\r\n\r\n <ius-button-circle-tertiary (click)=\"showOptions($event)\" [iconName]=\"'icon-more-vert'\">\r\n </ius-button-circle-tertiary>\r\n </button>\r\n\r\n @if (openOptions) {\r\n <div class=\"more-box active\">\r\n <ius-option [checked]=\"account.isPredetermined!\" (optionClick)=\"onPressedPredeterminado.emit(account)\">\r\n <span class=\"body-large\">Marcar como predeterminada</span>\r\n </ius-option>\r\n\r\n <ius-simple-divider></ius-simple-divider>\r\n\r\n <ius-option [leadingIcon]=\"'icon-edit'\" (optionClick)=\"onPressedEditar.emit(account)\">\r\n <span class=\"body-large\">Editar</span>\r\n </ius-option>\r\n\r\n <ius-option [leadingIcon]=\"'icon-delete'\" (optionClick)=\"onPressedDesvincular.emit(account)\">\r\n <span class=\"body-large\">Desvincular</span>\r\n </ius-option>\r\n </div>\r\n }\r\n</div>", styles: [".h1{font-family:Roboto,sans-serif;font-size:2.375rem;font-weight:500;line-height:46px}.h2{font-family:Roboto,sans-serif;font-size:1.875rem;font-weight:700;line-height:38px}.h3{font-family:Roboto,sans-serif;font-size:1.5rem;font-weight:500;line-height:32px}.h4{font-family:Roboto,sans-serif;font-size:1.25rem;font-weight:700;line-height:26px}.h5{font-family:Roboto,sans-serif;font-size:1.125rem;font-weight:500;line-height:24px;letter-spacing:.18px}.label-large{font-family:Roboto,sans-serif;font-size:1rem;font-weight:500;line-height:22px}.body-large{font-family:Rubik,sans-serif;font-size:1rem;font-weight:400;line-height:22px}.label-base{font-family:Rubik,sans-serif;font-size:.875rem;font-weight:500;line-height:20px;letter-spacing:.28px}.body-base{font-family:Rubik,sans-serif;font-size:.875rem;font-weight:400;line-height:20px;font-style:italic;letter-spacing:.28px}.body-base-1,.body-base-1-1{font-family:Rubik,sans-serif;font-size:.875rem;font-weight:400;line-height:20px;letter-spacing:.28px}.body-sm{font-family:Rubik,sans-serif;font-size:.75rem;font-weight:400;line-height:16px;letter-spacing:.28px}.body-sm-italic{font-family:Rubik,sans-serif;font-size:.75rem;font-weight:400;line-height:16px;font-style:italic;letter-spacing:.28px}.caption-sm{font-family:Rubik,sans-serif;font-size:.75rem;font-weight:500;line-height:16px;letter-spacing:.28px}.caption-sm-italic{font-family:Rubik,sans-serif;font-size:.75rem;font-weight:500;line-height:16px;font-style:italic;letter-spacing:.28px}.general{position:relative;width:100%}.ius-btn{display:inline-flex;align-items:center;justify-content:space-between;gap:8px;width:100%;box-sizing:border-box;padding:8px 12px;border-radius:8px;border:1px solid #eaeaea;background-color:#fff;color:#333;font-family:Rubik,sans-serif;font-size:.875rem;font-weight:500;line-height:20px;letter-spacing:.28px;cursor:pointer;transition:background-color .15s ease,border-color .15s ease,box-shadow .15s ease}.ius-btn:hover:not(:disabled){border-color:#f0f0f0;background-color:#f5f5f5;box-shadow:0 1px 3px #0000001f,0 1px 2px #00000014}.ius-btn:active:not(:disabled){border-color:#c4dfff;background-color:#c4dfff;box-shadow:none}.ius-btn.isOpen{border-color:#c4dfff;background-color:#edf6ff}.ius-btn.menuOpen{border-color:#f0f0f0;background-color:#f5f5f5;box-shadow:0 1px 3px #0000001f,0 1px 2px #00000014}.ius-btn.isOpen.menuOpen{border-color:#c4dfff;background-color:#edf6ff;box-shadow:0 1px 3px #0000001f,0 1px 2px #00000014}.content{display:flex;align-items:center;gap:12px;min-width:0;flex:1 1 auto}.name{flex:1 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:left;color:#333}.more-box{position:absolute;top:100%;left:90%;margin-top:8px;min-width:240px;padding:8px;z-index:100;display:flex;flex-direction:column;border-radius:8px;background:#fff;box-shadow:0 2px 6px #00000024,0 1px 10px #0000001a;border:1px solid #f0f0f0;opacity:0;pointer-events:none;transform:translateY(-6px);transition:opacity .25s ease,transform .25s ease}.more-box.active{opacity:1;transform:translateY(0);pointer-events:all}\n"] }]
|
|
47
46
|
}], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { account: [{
|
|
48
47
|
type: Input
|
|
49
48
|
}], accountSelected: [{
|
|
@@ -58,4 +57,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
58
57
|
type: HostListener,
|
|
59
58
|
args: ['document:click', ['$event']]
|
|
60
59
|
}] } });
|
|
61
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
60
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYnV0dG9uLWFjY291bnRzLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2l1cy1kZXNpZ24tY29tcG9uZW50cy9zcmMvbGliL2J1dHRvbi1hY2NvdW50cy9idXR0b24tYWNjb3VudHMuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvaXVzLWRlc2lnbi1jb21wb25lbnRzL3NyYy9saWIvYnV0dG9uLWFjY291bnRzL2J1dHRvbi1hY2NvdW50cy5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsWUFBWSxFQUFFLE1BQU0saUJBQWlCLENBQUM7QUFDL0MsT0FBTyxFQUFFLFNBQVMsRUFBYyxZQUFZLEVBQUUsWUFBWSxFQUFFLEtBQUssRUFBRSxNQUFNLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFDakcsT0FBTyxFQUFFLDZCQUE2QixFQUFFLE1BQU0sMkJBQTJCLENBQUM7QUFDMUUsT0FBTyxFQUFFLGVBQWUsRUFBRSxNQUFNLFdBQVcsQ0FBQztBQUM1QyxPQUFPLEVBQUUsc0JBQXNCLEVBQUUsTUFBTSxtQkFBbUIsQ0FBQztBQUMzRCxPQUFPLEVBQUUsaUJBQWlCLEVBQUUsTUFBTSxjQUFjLENBQUM7O0FBc0JqRCxNQUFNLE9BQU8sdUJBQXVCO0lBV2xDLFlBQW9CLFVBQXNCO1FBQXRCLGVBQVUsR0FBVixVQUFVLENBQVk7UUFWMUMsV0FBTSxHQUFHLEtBQUssQ0FBQztRQUNmLGdCQUFXLEdBQUcsS0FBSyxDQUFDO1FBSVYsb0JBQWUsR0FBRyxJQUFJLFlBQVksRUFBVyxDQUFDO1FBQzlDLDRCQUF1QixHQUFHLElBQUksWUFBWSxFQUFXLENBQUM7UUFDdEQseUJBQW9CLEdBQUcsSUFBSSxZQUFZLEVBQVcsQ0FBQztRQUNuRCxvQkFBZSxHQUFHLElBQUksWUFBWSxFQUFXLENBQUM7SUFFVixDQUFDO0lBRy9DLGVBQWUsQ0FBQyxLQUFpQjtRQUMvQixNQUFNLE1BQU0sR0FBRyxLQUFLLENBQUMsTUFBcUIsQ0FBQztRQUMzQyxJQUFJLENBQUMsSUFBSSxDQUFDLFVBQVUsQ0FBQyxhQUFhLENBQUMsUUFBUSxDQUFDLE1BQU0sQ0FBQyxFQUFFLENBQUM7WUFDcEQsSUFBSSxDQUFDLE1BQU0sR0FBRyxLQUFLLENBQUM7WUFDcEIsSUFBSSxDQUFDLFdBQVcsR0FBRyxLQUFLLENBQUM7UUFDM0IsQ0FBQztJQUNILENBQUM7SUFFRCxjQUFjLENBQUMsT0FBZ0I7UUFDN0IsSUFBSSxDQUFDLE1BQU0sR0FBRyxDQUFDLElBQUksQ0FBQyxNQUFNLENBQUM7UUFDM0IsSUFBSSxDQUFDLGVBQWUsQ0FBQyxJQUFJLENBQUMsT0FBTyxDQUFDLENBQUM7SUFDckMsQ0FBQztJQUVELFdBQVcsQ0FBQyxLQUFpQjtRQUMzQixLQUFLLENBQUMsZUFBZSxFQUFFLENBQUM7UUFDeEIsS0FBSyxDQUFDLGNBQWMsRUFBRSxDQUFDO1FBQ3ZCLElBQUksQ0FBQyxXQUFXLEdBQUcsQ0FBQyxJQUFJLENBQUMsV0FBVyxDQUFDO0lBQ3ZDLENBQUM7K0dBL0JVLHVCQUF1QjttR0FBdkIsdUJBQXVCLDRXQzNCcEMsZytDQWlDTSw4akdEZkYsWUFBWSwrQkFDWiw2QkFBNkIscUlBQzdCLGVBQWUsaUlBQ2Ysc0JBQXNCLCtEQUN0QixpQkFBaUI7OzRGQUtSLHVCQUF1QjtrQkFibkMsU0FBUzsrQkFDRSxxQkFBcUIsY0FDbkIsSUFBSSxXQUNQO3dCQUNQLFlBQVk7d0JBQ1osNkJBQTZCO3dCQUM3QixlQUFlO3dCQUNmLHNCQUFzQjt3QkFDdEIsaUJBQWlCO3FCQUNsQjsrRUFRUSxPQUFPO3NCQUFmLEtBQUs7Z0JBRUksZUFBZTtzQkFBeEIsTUFBTTtnQkFDRyx1QkFBdUI7c0JBQWhDLE1BQU07Z0JBQ0csb0JBQW9CO3NCQUE3QixNQUFNO2dCQUNHLGVBQWU7c0JBQXhCLE1BQU07Z0JBS1AsZUFBZTtzQkFEZCxZQUFZO3VCQUFDLGdCQUFnQixFQUFFLENBQUMsUUFBUSxDQUFDIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tbW9uTW9kdWxlIH0gZnJvbSAnQGFuZ3VsYXIvY29tbW9uJztcclxuaW1wb3J0IHsgQ29tcG9uZW50LCBFbGVtZW50UmVmLCBFdmVudEVtaXR0ZXIsIEhvc3RMaXN0ZW5lciwgSW5wdXQsIE91dHB1dCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xyXG5pbXBvcnQgeyBCdXR0b25DaXJjbGVUZXJ0aWFyeUNvbXBvbmVudCB9IGZyb20gXCIuLi9idXR0b24tY2lyY2xlLXRlcnRpYXJ5XCI7XHJcbmltcG9ydCB7IE9wdGlvbkNvbXBvbmVudCB9IGZyb20gXCIuLi9vcHRpb25cIjtcclxuaW1wb3J0IHsgU2ltcGxlRGl2aWRlckNvbXBvbmVudCB9IGZyb20gXCIuLi9zaW1wbGUtZGl2aWRlclwiO1xyXG5pbXBvcnQgeyBBdmF0YXJWMkNvbXBvbmVudCB9IGZyb20gXCIuLi9hdmF0YXItdjJcIjtcclxuXHJcbmludGVyZmFjZSBBY2NvdW50IHtcclxuICBhY2NvdW50SUQ6IG51bWJlcjtcclxuICBuYW1lOiBzdHJpbmc7XHJcbiAgbG9nbz86IHN0cmluZztcclxuICBpc1ByZWRldGVybWluZWQ/OiBib29sZWFuO1xyXG59XHJcblxyXG5AQ29tcG9uZW50KHtcclxuICBzZWxlY3RvcjogJ2l1cy1idXR0b24tYWNjb3VudHMnLFxyXG4gIHN0YW5kYWxvbmU6IHRydWUsXHJcbiAgaW1wb3J0czogW1xyXG4gICAgQ29tbW9uTW9kdWxlLFxyXG4gICAgQnV0dG9uQ2lyY2xlVGVydGlhcnlDb21wb25lbnQsXHJcbiAgICBPcHRpb25Db21wb25lbnQsXHJcbiAgICBTaW1wbGVEaXZpZGVyQ29tcG9uZW50LFxyXG4gICAgQXZhdGFyVjJDb21wb25lbnRcclxuICBdLFxyXG4gIHRlbXBsYXRlVXJsOiAnLi9idXR0b24tYWNjb3VudHMuY29tcG9uZW50Lmh0bWwnLFxyXG4gIHN0eWxlVXJsOiAnLi9idXR0b24tYWNjb3VudHMuY29tcG9uZW50LnNjc3MnXHJcbn0pXHJcbmV4cG9ydCBjbGFzcyBCdXR0b25BY2NvdW50c0NvbXBvbmVudCB7XHJcbiAgaXNPcGVuID0gZmFsc2U7XHJcbiAgb3Blbk9wdGlvbnMgPSBmYWxzZTtcclxuXHJcbiAgQElucHV0KCkgYWNjb3VudCE6IEFjY291bnQ7XHJcblxyXG4gIEBPdXRwdXQoKSBhY2NvdW50U2VsZWN0ZWQgPSBuZXcgRXZlbnRFbWl0dGVyPEFjY291bnQ+KCk7XHJcbiAgQE91dHB1dCgpIG9uUHJlc3NlZFByZWRldGVybWluYWRvID0gbmV3IEV2ZW50RW1pdHRlcjxBY2NvdW50PigpO1xyXG4gIEBPdXRwdXQoKSBvblByZXNzZWREZXN2aW5jdWxhciA9IG5ldyBFdmVudEVtaXR0ZXI8QWNjb3VudD4oKTtcclxuICBAT3V0cHV0KCkgb25QcmVzc2VkRWRpdGFyID0gbmV3IEV2ZW50RW1pdHRlcjxBY2NvdW50PigpO1xyXG5cclxuICBjb25zdHJ1Y3Rvcihwcml2YXRlIGVsZW1lbnRSZWY6IEVsZW1lbnRSZWYpIHsgfVxyXG5cclxuICBASG9zdExpc3RlbmVyKCdkb2N1bWVudDpjbGljaycsIFsnJGV2ZW50J10pXHJcbiAgb25Eb2N1bWVudENsaWNrKGV2ZW50OiBNb3VzZUV2ZW50KTogdm9pZCB7XHJcbiAgICBjb25zdCB0YXJnZXQgPSBldmVudC50YXJnZXQgYXMgSFRNTEVsZW1lbnQ7XHJcbiAgICBpZiAoIXRoaXMuZWxlbWVudFJlZi5uYXRpdmVFbGVtZW50LmNvbnRhaW5zKHRhcmdldCkpIHtcclxuICAgICAgdGhpcy5pc09wZW4gPSBmYWxzZTtcclxuICAgICAgdGhpcy5vcGVuT3B0aW9ucyA9IGZhbHNlO1xyXG4gICAgfVxyXG4gIH1cclxuXHJcbiAgb25DbGlja0FjY291bnQoYWNjb3VudDogQWNjb3VudCk6IHZvaWQge1xyXG4gICAgdGhpcy5pc09wZW4gPSAhdGhpcy5pc09wZW47XHJcbiAgICB0aGlzLmFjY291bnRTZWxlY3RlZC5lbWl0KGFjY291bnQpO1xyXG4gIH1cclxuXHJcbiAgc2hvd09wdGlvbnMoZXZlbnQ6IE1vdXNlRXZlbnQpOiB2b2lkIHtcclxuICAgIGV2ZW50LnN0b3BQcm9wYWdhdGlvbigpO1xyXG4gICAgZXZlbnQucHJldmVudERlZmF1bHQoKTtcclxuICAgIHRoaXMub3Blbk9wdGlvbnMgPSAhdGhpcy5vcGVuT3B0aW9ucztcclxuICB9XHJcbn1cclxuIiwiPGRpdiBjbGFzcz1cImdlbmVyYWxcIj5cclxuICAgIDxidXR0b24gdHlwZT1cImJ1dHRvblwiIGNsYXNzPVwiaXVzLWJ0blwiIFtjbGFzcy5pc09wZW5dPVwiaXNPcGVuXCIgW2NsYXNzLm1lbnVPcGVuXT1cIm9wZW5PcHRpb25zXCJcclxuICAgICAgICBbY2xhc3MuaXNQcmVkZXRlcm1pbmVkXT1cImFjY291bnQuaXNQcmVkZXRlcm1pbmVkXCIgKGNsaWNrKT1cIm9uQ2xpY2tBY2NvdW50KGFjY291bnQpXCI+XHJcblxyXG4gICAgICAgIDxkaXYgY2xhc3M9XCJjb250ZW50XCI+XHJcbiAgICAgICAgICAgIDxpdXMtYXZhdGFyLXYyIFtpbWFnZVVybF09XCJhY2NvdW50LmxvZ29cIiBbbmFtZV09XCJhY2NvdW50Lm5hbWVcIiBzaXplPVwibWRcIiBzaGFwZT1cImNpcmNsZVwiXHJcbiAgICAgICAgICAgICAgICBmYWxsYmFja0ljb25OYW1lPVwiaWNvbi1hY2NvdW50LWNpcmNsZVwiPlxyXG4gICAgICAgICAgICA8L2l1cy1hdmF0YXItdjI+XHJcblxyXG4gICAgICAgICAgICA8c3BhbiBjbGFzcz1cIm5hbWUgYm9keS1iYXNlLTFcIj57eyBhY2NvdW50Lm5hbWUgfX08L3NwYW4+XHJcbiAgICAgICAgPC9kaXY+XHJcblxyXG4gICAgICAgIDxpdXMtYnV0dG9uLWNpcmNsZS10ZXJ0aWFyeSAoY2xpY2spPVwic2hvd09wdGlvbnMoJGV2ZW50KVwiIFtpY29uTmFtZV09XCInaWNvbi1tb3JlLXZlcnQnXCI+XHJcbiAgICAgICAgPC9pdXMtYnV0dG9uLWNpcmNsZS10ZXJ0aWFyeT5cclxuICAgIDwvYnV0dG9uPlxyXG5cclxuICAgIEBpZiAob3Blbk9wdGlvbnMpIHtcclxuICAgIDxkaXYgY2xhc3M9XCJtb3JlLWJveCBhY3RpdmVcIj5cclxuICAgICAgICA8aXVzLW9wdGlvbiBbY2hlY2tlZF09XCJhY2NvdW50LmlzUHJlZGV0ZXJtaW5lZCFcIiAob3B0aW9uQ2xpY2spPVwib25QcmVzc2VkUHJlZGV0ZXJtaW5hZG8uZW1pdChhY2NvdW50KVwiPlxyXG4gICAgICAgICAgICA8c3BhbiBjbGFzcz1cImJvZHktbGFyZ2VcIj5NYXJjYXIgY29tbyBwcmVkZXRlcm1pbmFkYTwvc3Bhbj5cclxuICAgICAgICA8L2l1cy1vcHRpb24+XHJcblxyXG4gICAgICAgIDxpdXMtc2ltcGxlLWRpdmlkZXI+PC9pdXMtc2ltcGxlLWRpdmlkZXI+XHJcblxyXG4gICAgICAgIDxpdXMtb3B0aW9uIFtsZWFkaW5nSWNvbl09XCInaWNvbi1lZGl0J1wiIChvcHRpb25DbGljayk9XCJvblByZXNzZWRFZGl0YXIuZW1pdChhY2NvdW50KVwiPlxyXG4gICAgICAgICAgICA8c3BhbiBjbGFzcz1cImJvZHktbGFyZ2VcIj5FZGl0YXI8L3NwYW4+XHJcbiAgICAgICAgPC9pdXMtb3B0aW9uPlxyXG5cclxuICAgICAgICA8aXVzLW9wdGlvbiBbbGVhZGluZ0ljb25dPVwiJ2ljb24tZGVsZXRlJ1wiIChvcHRpb25DbGljayk9XCJvblByZXNzZWREZXN2aW5jdWxhci5lbWl0KGFjY291bnQpXCI+XHJcbiAgICAgICAgICAgIDxzcGFuIGNsYXNzPVwiYm9keS1sYXJnZVwiPkRlc3ZpbmN1bGFyPC9zcGFuPlxyXG4gICAgICAgIDwvaXVzLW9wdGlvbj5cclxuICAgIDwvZGl2PlxyXG4gICAgfVxyXG48L2Rpdj4iXX0=
|
|
@@ -1585,14 +1585,140 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
1585
1585
|
args: [{ selector: 'ius-simple-divider', standalone: true, imports: [], template: "\r\n", styles: [":host{display:block;width:100%;height:1px;background-color:#d9d9d9;flex-shrink:0}\n"] }]
|
|
1586
1586
|
}] });
|
|
1587
1587
|
|
|
1588
|
-
class
|
|
1589
|
-
|
|
1590
|
-
|
|
1591
|
-
|
|
1592
|
-
|
|
1593
|
-
|
|
1588
|
+
class IconXsComponent {
|
|
1589
|
+
constructor(sanitizer) {
|
|
1590
|
+
this.sanitizer = sanitizer;
|
|
1591
|
+
this.iconName = 'icon-add';
|
|
1592
|
+
this.color = 'currentColor';
|
|
1593
|
+
this.svg = '';
|
|
1594
|
+
}
|
|
1595
|
+
ngOnChanges() {
|
|
1596
|
+
const rawSvg = ICONS[this.iconName];
|
|
1597
|
+
this.svg = rawSvg ? this.sanitizer.bypassSecurityTrustHtml(rawSvg) : '';
|
|
1598
|
+
}
|
|
1599
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: IconXsComponent, deps: [{ token: i1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1600
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: IconXsComponent, isStandalone: true, selector: "ius-icon-xs", inputs: { iconName: "iconName", color: "color" }, usesOnChanges: true, ngImport: i0, template: "<span [ngStyle]=\"{'color': color}\" [innerHTML]=\"svg\"></span>", styles: ["@charset \"UTF-8\";:host{display:inline-block;width:14px;height:14px;color:currentColor}span svg{width:100%;height:100%;fill:\\a0 currentColor}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] }); }
|
|
1601
|
+
}
|
|
1602
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: IconXsComponent, decorators: [{
|
|
1603
|
+
type: Component,
|
|
1604
|
+
args: [{ selector: 'ius-icon-xs', standalone: true, imports: [CommonModule], template: "<span [ngStyle]=\"{'color': color}\" [innerHTML]=\"svg\"></span>", styles: ["@charset \"UTF-8\";:host{display:inline-block;width:14px;height:14px;color:currentColor}span svg{width:100%;height:100%;fill:\\a0 currentColor}\n"] }]
|
|
1605
|
+
}], ctorParameters: () => [{ type: i1.DomSanitizer }], propDecorators: { iconName: [{
|
|
1606
|
+
type: Input
|
|
1607
|
+
}], color: [{
|
|
1608
|
+
type: Input
|
|
1609
|
+
}] } });
|
|
1610
|
+
|
|
1611
|
+
class IconXlComponent {
|
|
1612
|
+
constructor(sanitizer) {
|
|
1613
|
+
this.sanitizer = sanitizer;
|
|
1614
|
+
this.iconName = 'icon-add';
|
|
1615
|
+
this.color = 'currentColor';
|
|
1616
|
+
this.svg = '';
|
|
1617
|
+
}
|
|
1618
|
+
ngOnChanges() {
|
|
1619
|
+
const rawSvg = ICONS[this.iconName];
|
|
1620
|
+
this.svg = rawSvg ? this.sanitizer.bypassSecurityTrustHtml(rawSvg) : '';
|
|
1621
|
+
}
|
|
1622
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: IconXlComponent, deps: [{ token: i1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1623
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: IconXlComponent, isStandalone: true, selector: "ius-icon-xl", inputs: { iconName: "iconName", color: "color" }, usesOnChanges: true, ngImport: i0, template: "<span [ngStyle]=\"{'color': color}\" [innerHTML]=\"svg\"></span>", styles: ["@charset \"UTF-8\";:host{display:inline-block;width:32px;height:32px;color:currentColor}span svg{width:100%;height:100%;fill:\\a0 currentColor}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] }); }
|
|
1624
|
+
}
|
|
1625
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: IconXlComponent, decorators: [{
|
|
1626
|
+
type: Component,
|
|
1627
|
+
args: [{ selector: 'ius-icon-xl', standalone: true, imports: [CommonModule], template: "<span [ngStyle]=\"{'color': color}\" [innerHTML]=\"svg\"></span>", styles: ["@charset \"UTF-8\";:host{display:inline-block;width:32px;height:32px;color:currentColor}span svg{width:100%;height:100%;fill:\\a0 currentColor}\n"] }]
|
|
1628
|
+
}], ctorParameters: () => [{ type: i1.DomSanitizer }], propDecorators: { iconName: [{
|
|
1629
|
+
type: Input
|
|
1630
|
+
}], color: [{
|
|
1631
|
+
type: Input
|
|
1632
|
+
}] } });
|
|
1633
|
+
|
|
1634
|
+
class IconXxlComponent {
|
|
1635
|
+
constructor(sanitizer) {
|
|
1636
|
+
this.sanitizer = sanitizer;
|
|
1637
|
+
this.iconName = 'icon-add';
|
|
1638
|
+
this.color = 'currentColor';
|
|
1639
|
+
this.svg = '';
|
|
1640
|
+
}
|
|
1641
|
+
ngOnChanges() {
|
|
1642
|
+
const rawSvg = ICONS[this.iconName];
|
|
1643
|
+
this.svg = rawSvg ? this.sanitizer.bypassSecurityTrustHtml(rawSvg) : '';
|
|
1644
|
+
}
|
|
1645
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: IconXxlComponent, deps: [{ token: i1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1646
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: IconXxlComponent, isStandalone: true, selector: "ius-icon-xxl", inputs: { iconName: "iconName", color: "color" }, usesOnChanges: true, ngImport: i0, template: "<span [ngStyle]=\"{'color': color}\" [innerHTML]=\"svg\"></span>", styles: ["@charset \"UTF-8\";:host{display:inline-block;width:64px;height:64px;color:currentColor}span svg{width:100%;height:100%;fill:\\a0 currentColor}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] }); }
|
|
1647
|
+
}
|
|
1648
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: IconXxlComponent, decorators: [{
|
|
1649
|
+
type: Component,
|
|
1650
|
+
args: [{ selector: 'ius-icon-xxl', standalone: true, imports: [CommonModule], template: "<span [ngStyle]=\"{'color': color}\" [innerHTML]=\"svg\"></span>", styles: ["@charset \"UTF-8\";:host{display:inline-block;width:64px;height:64px;color:currentColor}span svg{width:100%;height:100%;fill:\\a0 currentColor}\n"] }]
|
|
1651
|
+
}], ctorParameters: () => [{ type: i1.DomSanitizer }], propDecorators: { iconName: [{
|
|
1652
|
+
type: Input
|
|
1653
|
+
}], color: [{
|
|
1654
|
+
type: Input
|
|
1655
|
+
}] } });
|
|
1656
|
+
|
|
1657
|
+
class AvatarV2Component {
|
|
1658
|
+
constructor() {
|
|
1659
|
+
this.size = 'md';
|
|
1660
|
+
this.shape = 'circle';
|
|
1661
|
+
this.showEditButton = false;
|
|
1662
|
+
this.fallbackIconName = 'icon-account-circle';
|
|
1663
|
+
this.editClicked = new EventEmitter();
|
|
1664
|
+
this.initials = '';
|
|
1665
|
+
}
|
|
1666
|
+
get containerStyle() {
|
|
1667
|
+
if (!this.imageUrl && this.backgroundColor) {
|
|
1668
|
+
return { 'background-color': this.backgroundColor };
|
|
1594
1669
|
}
|
|
1670
|
+
return {};
|
|
1671
|
+
}
|
|
1672
|
+
ngOnChanges(changes) {
|
|
1673
|
+
if (changes['name']) {
|
|
1674
|
+
this.initials = this.extractInitials(this.name);
|
|
1675
|
+
}
|
|
1676
|
+
}
|
|
1677
|
+
onEditClick(event) {
|
|
1678
|
+
event.stopPropagation();
|
|
1679
|
+
this.editClicked.emit();
|
|
1680
|
+
}
|
|
1681
|
+
extractInitials(name) {
|
|
1682
|
+
if (!name?.trim())
|
|
1683
|
+
return '';
|
|
1684
|
+
const parts = name.trim().split(/\s+/);
|
|
1685
|
+
if (parts.length === 1)
|
|
1686
|
+
return parts[0].charAt(0).toUpperCase();
|
|
1687
|
+
return (parts[0].charAt(0) + parts[parts.length - 1].charAt(0)).toUpperCase();
|
|
1595
1688
|
}
|
|
1689
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: AvatarV2Component, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1690
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: AvatarV2Component, isStandalone: true, selector: "ius-avatar-v2", inputs: { imageUrl: "imageUrl", name: "name", size: "size", shape: "shape", showEditButton: "showEditButton", backgroundColor: "backgroundColor", fallbackIconName: "fallbackIconName" }, outputs: { editClicked: "editClicked" }, usesOnChanges: true, ngImport: i0, template: "<div\n class=\"avatar\"\n [ngClass]=\"[size, shape]\"\n [ngStyle]=\"containerStyle\"\n>\n @if (imageUrl) {\n <img [src]=\"imageUrl\" [alt]=\"name || 'avatar'\" class=\"avatar__image\" />\n } @else if (initials) {\n <span class=\"body-large\" style=\"color: var(--ColorText-colorTextPrimary, #333);\">{{ initials }}</span>\n } @else {\n @switch (size) {\n @case ('xs') {\n <ius-icon-xs [iconName]=\"fallbackIconName\"></ius-icon-xs>\n }\n @case ('sm') {\n <ius-icon-sm [iconName]=\"fallbackIconName\"></ius-icon-sm>\n }\n @case ('md') {\n <ius-icon-md [iconName]=\"fallbackIconName\"></ius-icon-md>\n }\n @case ('lg') {\n <ius-icon-lg [iconName]=\"fallbackIconName\"></ius-icon-lg>\n }\n @case ('xl') {\n <ius-icon-xl [iconName]=\"fallbackIconName\"></ius-icon-xl>\n }\n @case ('xxl') {\n <ius-icon-xxl [iconName]=\"fallbackIconName\"></ius-icon-xxl>\n }\n }\n }\n\n @if (showEditButton) {\n <div class=\"avatar__edit-overlay\" (click)=\"onEditClick($event)\">\n <div class=\"avatar__edit-btn\">\n <ius-icon-sm iconName=\"icon-edit\"></ius-icon-sm>\n </div>\n </div>\n }\n</div>\n", styles: [".h1{font-family:Roboto,sans-serif;font-size:2.375rem;font-weight:500;line-height:46px}.h2{font-family:Roboto,sans-serif;font-size:1.875rem;font-weight:700;line-height:38px}.h3{font-family:Roboto,sans-serif;font-size:1.5rem;font-weight:500;line-height:32px}.h4{font-family:Roboto,sans-serif;font-size:1.25rem;font-weight:700;line-height:26px}.h5{font-family:Roboto,sans-serif;font-size:1.125rem;font-weight:500;line-height:24px;letter-spacing:.18px}.label-large{font-family:Roboto,sans-serif;font-size:1rem;font-weight:500;line-height:22px}.body-large{font-family:Rubik,sans-serif;font-size:1rem;font-weight:400;line-height:22px}.label-base{font-family:Rubik,sans-serif;font-size:.875rem;font-weight:500;line-height:20px;letter-spacing:.28px}.body-base{font-family:Rubik,sans-serif;font-size:.875rem;font-weight:400;line-height:20px;font-style:italic;letter-spacing:.28px}.body-base-1,.body-base-1-1{font-family:Rubik,sans-serif;font-size:.875rem;font-weight:400;line-height:20px;letter-spacing:.28px}.body-sm{font-family:Rubik,sans-serif;font-size:.75rem;font-weight:400;line-height:16px;letter-spacing:.28px}.body-sm-italic{font-family:Rubik,sans-serif;font-size:.75rem;font-weight:400;line-height:16px;font-style:italic;letter-spacing:.28px}.caption-sm{font-family:Rubik,sans-serif;font-size:.75rem;font-weight:500;line-height:16px;letter-spacing:.28px}.caption-sm-italic{font-family:Rubik,sans-serif;font-size:.75rem;font-weight:500;line-height:16px;font-style:italic;letter-spacing:.28px}:host{display:inline-block}.avatar{position:relative;display:flex;justify-content:center;align-items:center;background-color:#edf6ff;overflow:hidden;flex-shrink:0}.avatar.circle{border-radius:50%}.avatar.square{border-radius:8px}.avatar.xs{width:14px;height:14px}.avatar.sm{width:24px;height:24px}.avatar.md{width:32px;height:32px}.avatar.lg{width:40px;height:40px}.avatar.xl{width:64px;height:64px}.avatar.xxl{width:96px;height:96px}.avatar__image{width:100%;height:100%;object-fit:cover;display:block}.avatar__edit-overlay{position:absolute;inset:0;display:flex;justify-content:center;align-items:center;background-color:var(--Info-Color-Info-200, #C4DFFF);opacity:0;transition:opacity .2s ease;cursor:pointer}.avatar__edit-btn{display:flex;justify-content:center;align-items:center;width:28px;height:28px;border-radius:50%;background-color:#fff;color:#333;pointer-events:none}.avatar:hover .avatar__edit-overlay{opacity:1}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: IconXsComponent, selector: "ius-icon-xs", inputs: ["iconName", "color"] }, { kind: "component", type: IconSmComponent, selector: "ius-icon-sm", inputs: ["iconName", "color"] }, { kind: "component", type: IconMdComponent, selector: "ius-icon-md", inputs: ["iconName", "color"] }, { kind: "component", type: IconXlComponent, selector: "ius-icon-xl", inputs: ["iconName", "color"] }, { kind: "component", type: IconXxlComponent, selector: "ius-icon-xxl", inputs: ["iconName", "color"] }, { kind: "component", type: IconLgComponent, selector: "ius-icon-lg", inputs: ["iconName", "color"] }] }); }
|
|
1691
|
+
}
|
|
1692
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: AvatarV2Component, decorators: [{
|
|
1693
|
+
type: Component,
|
|
1694
|
+
args: [{ selector: 'ius-avatar-v2', standalone: true, imports: [
|
|
1695
|
+
CommonModule,
|
|
1696
|
+
IconXsComponent,
|
|
1697
|
+
IconSmComponent,
|
|
1698
|
+
IconMdComponent,
|
|
1699
|
+
IconXlComponent,
|
|
1700
|
+
IconXxlComponent,
|
|
1701
|
+
IconLgComponent
|
|
1702
|
+
], template: "<div\n class=\"avatar\"\n [ngClass]=\"[size, shape]\"\n [ngStyle]=\"containerStyle\"\n>\n @if (imageUrl) {\n <img [src]=\"imageUrl\" [alt]=\"name || 'avatar'\" class=\"avatar__image\" />\n } @else if (initials) {\n <span class=\"body-large\" style=\"color: var(--ColorText-colorTextPrimary, #333);\">{{ initials }}</span>\n } @else {\n @switch (size) {\n @case ('xs') {\n <ius-icon-xs [iconName]=\"fallbackIconName\"></ius-icon-xs>\n }\n @case ('sm') {\n <ius-icon-sm [iconName]=\"fallbackIconName\"></ius-icon-sm>\n }\n @case ('md') {\n <ius-icon-md [iconName]=\"fallbackIconName\"></ius-icon-md>\n }\n @case ('lg') {\n <ius-icon-lg [iconName]=\"fallbackIconName\"></ius-icon-lg>\n }\n @case ('xl') {\n <ius-icon-xl [iconName]=\"fallbackIconName\"></ius-icon-xl>\n }\n @case ('xxl') {\n <ius-icon-xxl [iconName]=\"fallbackIconName\"></ius-icon-xxl>\n }\n }\n }\n\n @if (showEditButton) {\n <div class=\"avatar__edit-overlay\" (click)=\"onEditClick($event)\">\n <div class=\"avatar__edit-btn\">\n <ius-icon-sm iconName=\"icon-edit\"></ius-icon-sm>\n </div>\n </div>\n }\n</div>\n", styles: [".h1{font-family:Roboto,sans-serif;font-size:2.375rem;font-weight:500;line-height:46px}.h2{font-family:Roboto,sans-serif;font-size:1.875rem;font-weight:700;line-height:38px}.h3{font-family:Roboto,sans-serif;font-size:1.5rem;font-weight:500;line-height:32px}.h4{font-family:Roboto,sans-serif;font-size:1.25rem;font-weight:700;line-height:26px}.h5{font-family:Roboto,sans-serif;font-size:1.125rem;font-weight:500;line-height:24px;letter-spacing:.18px}.label-large{font-family:Roboto,sans-serif;font-size:1rem;font-weight:500;line-height:22px}.body-large{font-family:Rubik,sans-serif;font-size:1rem;font-weight:400;line-height:22px}.label-base{font-family:Rubik,sans-serif;font-size:.875rem;font-weight:500;line-height:20px;letter-spacing:.28px}.body-base{font-family:Rubik,sans-serif;font-size:.875rem;font-weight:400;line-height:20px;font-style:italic;letter-spacing:.28px}.body-base-1,.body-base-1-1{font-family:Rubik,sans-serif;font-size:.875rem;font-weight:400;line-height:20px;letter-spacing:.28px}.body-sm{font-family:Rubik,sans-serif;font-size:.75rem;font-weight:400;line-height:16px;letter-spacing:.28px}.body-sm-italic{font-family:Rubik,sans-serif;font-size:.75rem;font-weight:400;line-height:16px;font-style:italic;letter-spacing:.28px}.caption-sm{font-family:Rubik,sans-serif;font-size:.75rem;font-weight:500;line-height:16px;letter-spacing:.28px}.caption-sm-italic{font-family:Rubik,sans-serif;font-size:.75rem;font-weight:500;line-height:16px;font-style:italic;letter-spacing:.28px}:host{display:inline-block}.avatar{position:relative;display:flex;justify-content:center;align-items:center;background-color:#edf6ff;overflow:hidden;flex-shrink:0}.avatar.circle{border-radius:50%}.avatar.square{border-radius:8px}.avatar.xs{width:14px;height:14px}.avatar.sm{width:24px;height:24px}.avatar.md{width:32px;height:32px}.avatar.lg{width:40px;height:40px}.avatar.xl{width:64px;height:64px}.avatar.xxl{width:96px;height:96px}.avatar__image{width:100%;height:100%;object-fit:cover;display:block}.avatar__edit-overlay{position:absolute;inset:0;display:flex;justify-content:center;align-items:center;background-color:var(--Info-Color-Info-200, #C4DFFF);opacity:0;transition:opacity .2s ease;cursor:pointer}.avatar__edit-btn{display:flex;justify-content:center;align-items:center;width:28px;height:28px;border-radius:50%;background-color:#fff;color:#333;pointer-events:none}.avatar:hover .avatar__edit-overlay{opacity:1}\n"] }]
|
|
1703
|
+
}], propDecorators: { imageUrl: [{
|
|
1704
|
+
type: Input
|
|
1705
|
+
}], name: [{
|
|
1706
|
+
type: Input
|
|
1707
|
+
}], size: [{
|
|
1708
|
+
type: Input
|
|
1709
|
+
}], shape: [{
|
|
1710
|
+
type: Input
|
|
1711
|
+
}], showEditButton: [{
|
|
1712
|
+
type: Input
|
|
1713
|
+
}], backgroundColor: [{
|
|
1714
|
+
type: Input
|
|
1715
|
+
}], fallbackIconName: [{
|
|
1716
|
+
type: Input
|
|
1717
|
+
}], editClicked: [{
|
|
1718
|
+
type: Output
|
|
1719
|
+
}] } });
|
|
1720
|
+
|
|
1721
|
+
class ButtonAccountsComponent {
|
|
1596
1722
|
constructor(elementRef) {
|
|
1597
1723
|
this.elementRef = elementRef;
|
|
1598
1724
|
this.isOpen = false;
|
|
@@ -1602,6 +1728,13 @@ class ButtonAccountsComponent {
|
|
|
1602
1728
|
this.onPressedDesvincular = new EventEmitter();
|
|
1603
1729
|
this.onPressedEditar = new EventEmitter();
|
|
1604
1730
|
}
|
|
1731
|
+
onDocumentClick(event) {
|
|
1732
|
+
const target = event.target;
|
|
1733
|
+
if (!this.elementRef.nativeElement.contains(target)) {
|
|
1734
|
+
this.isOpen = false;
|
|
1735
|
+
this.openOptions = false;
|
|
1736
|
+
}
|
|
1737
|
+
}
|
|
1605
1738
|
onClickAccount(account) {
|
|
1606
1739
|
this.isOpen = !this.isOpen;
|
|
1607
1740
|
this.accountSelected.emit(account);
|
|
@@ -1612,17 +1745,17 @@ class ButtonAccountsComponent {
|
|
|
1612
1745
|
this.openOptions = !this.openOptions;
|
|
1613
1746
|
}
|
|
1614
1747
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ButtonAccountsComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1615
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: ButtonAccountsComponent, isStandalone: true, selector: "ius-button-accounts", inputs: { account: "account" }, outputs: { accountSelected: "accountSelected", onPressedPredeterminado: "onPressedPredeterminado", onPressedDesvincular: "onPressedDesvincular", onPressedEditar: "onPressedEditar" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, ngImport: i0, template: "<div class=\"general\">\r\n <
|
|
1748
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: ButtonAccountsComponent, isStandalone: true, selector: "ius-button-accounts", inputs: { account: "account" }, outputs: { accountSelected: "accountSelected", onPressedPredeterminado: "onPressedPredeterminado", onPressedDesvincular: "onPressedDesvincular", onPressedEditar: "onPressedEditar" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, ngImport: i0, template: "<div class=\"general\">\r\n <button type=\"button\" class=\"ius-btn\" [class.isOpen]=\"isOpen\" [class.menuOpen]=\"openOptions\"\r\n [class.isPredetermined]=\"account.isPredetermined\" (click)=\"onClickAccount(account)\">\r\n\r\n <div class=\"content\">\r\n <ius-avatar-v2 [imageUrl]=\"account.logo\" [name]=\"account.name\" size=\"md\" shape=\"circle\"\r\n fallbackIconName=\"icon-account-circle\">\r\n </ius-avatar-v2>\r\n\r\n <span class=\"name body-base-1\">{{ account.name }}</span>\r\n </div>\r\n\r\n <ius-button-circle-tertiary (click)=\"showOptions($event)\" [iconName]=\"'icon-more-vert'\">\r\n </ius-button-circle-tertiary>\r\n </button>\r\n\r\n @if (openOptions) {\r\n <div class=\"more-box active\">\r\n <ius-option [checked]=\"account.isPredetermined!\" (optionClick)=\"onPressedPredeterminado.emit(account)\">\r\n <span class=\"body-large\">Marcar como predeterminada</span>\r\n </ius-option>\r\n\r\n <ius-simple-divider></ius-simple-divider>\r\n\r\n <ius-option [leadingIcon]=\"'icon-edit'\" (optionClick)=\"onPressedEditar.emit(account)\">\r\n <span class=\"body-large\">Editar</span>\r\n </ius-option>\r\n\r\n <ius-option [leadingIcon]=\"'icon-delete'\" (optionClick)=\"onPressedDesvincular.emit(account)\">\r\n <span class=\"body-large\">Desvincular</span>\r\n </ius-option>\r\n </div>\r\n }\r\n</div>", styles: [".h1{font-family:Roboto,sans-serif;font-size:2.375rem;font-weight:500;line-height:46px}.h2{font-family:Roboto,sans-serif;font-size:1.875rem;font-weight:700;line-height:38px}.h3{font-family:Roboto,sans-serif;font-size:1.5rem;font-weight:500;line-height:32px}.h4{font-family:Roboto,sans-serif;font-size:1.25rem;font-weight:700;line-height:26px}.h5{font-family:Roboto,sans-serif;font-size:1.125rem;font-weight:500;line-height:24px;letter-spacing:.18px}.label-large{font-family:Roboto,sans-serif;font-size:1rem;font-weight:500;line-height:22px}.body-large{font-family:Rubik,sans-serif;font-size:1rem;font-weight:400;line-height:22px}.label-base{font-family:Rubik,sans-serif;font-size:.875rem;font-weight:500;line-height:20px;letter-spacing:.28px}.body-base{font-family:Rubik,sans-serif;font-size:.875rem;font-weight:400;line-height:20px;font-style:italic;letter-spacing:.28px}.body-base-1,.body-base-1-1{font-family:Rubik,sans-serif;font-size:.875rem;font-weight:400;line-height:20px;letter-spacing:.28px}.body-sm{font-family:Rubik,sans-serif;font-size:.75rem;font-weight:400;line-height:16px;letter-spacing:.28px}.body-sm-italic{font-family:Rubik,sans-serif;font-size:.75rem;font-weight:400;line-height:16px;font-style:italic;letter-spacing:.28px}.caption-sm{font-family:Rubik,sans-serif;font-size:.75rem;font-weight:500;line-height:16px;letter-spacing:.28px}.caption-sm-italic{font-family:Rubik,sans-serif;font-size:.75rem;font-weight:500;line-height:16px;font-style:italic;letter-spacing:.28px}.general{position:relative;width:100%}.ius-btn{display:inline-flex;align-items:center;justify-content:space-between;gap:8px;width:100%;box-sizing:border-box;padding:8px 12px;border-radius:8px;border:1px solid #eaeaea;background-color:#fff;color:#333;font-family:Rubik,sans-serif;font-size:.875rem;font-weight:500;line-height:20px;letter-spacing:.28px;cursor:pointer;transition:background-color .15s ease,border-color .15s ease,box-shadow .15s ease}.ius-btn:hover:not(:disabled){border-color:#f0f0f0;background-color:#f5f5f5;box-shadow:0 1px 3px #0000001f,0 1px 2px #00000014}.ius-btn:active:not(:disabled){border-color:#c4dfff;background-color:#c4dfff;box-shadow:none}.ius-btn.isOpen{border-color:#c4dfff;background-color:#edf6ff}.ius-btn.menuOpen{border-color:#f0f0f0;background-color:#f5f5f5;box-shadow:0 1px 3px #0000001f,0 1px 2px #00000014}.ius-btn.isOpen.menuOpen{border-color:#c4dfff;background-color:#edf6ff;box-shadow:0 1px 3px #0000001f,0 1px 2px #00000014}.content{display:flex;align-items:center;gap:12px;min-width:0;flex:1 1 auto}.name{flex:1 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:left;color:#333}.more-box{position:absolute;top:100%;left:90%;margin-top:8px;min-width:240px;padding:8px;z-index:100;display:flex;flex-direction:column;border-radius:8px;background:#fff;box-shadow:0 2px 6px #00000024,0 1px 10px #0000001a;border:1px solid #f0f0f0;opacity:0;pointer-events:none;transform:translateY(-6px);transition:opacity .25s ease,transform .25s ease}.more-box.active{opacity:1;transform:translateY(0);pointer-events:all}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: ButtonCircleTertiaryComponent, selector: "ius-button-circle-tertiary", inputs: ["disabled", "iconName"], outputs: ["buttonClicked"] }, { kind: "component", type: OptionComponent, selector: "ius-option", inputs: ["disabled", "checked", "leadingIcon"], outputs: ["optionClick"] }, { kind: "component", type: SimpleDividerComponent, selector: "ius-simple-divider" }, { kind: "component", type: AvatarV2Component, selector: "ius-avatar-v2", inputs: ["imageUrl", "name", "size", "shape", "showEditButton", "backgroundColor", "fallbackIconName"], outputs: ["editClicked"] }] }); }
|
|
1616
1749
|
}
|
|
1617
1750
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ButtonAccountsComponent, decorators: [{
|
|
1618
1751
|
type: Component,
|
|
1619
1752
|
args: [{ selector: 'ius-button-accounts', standalone: true, imports: [
|
|
1620
|
-
IconMdComponent,
|
|
1621
1753
|
CommonModule,
|
|
1622
1754
|
ButtonCircleTertiaryComponent,
|
|
1623
1755
|
OptionComponent,
|
|
1624
|
-
SimpleDividerComponent
|
|
1625
|
-
|
|
1756
|
+
SimpleDividerComponent,
|
|
1757
|
+
AvatarV2Component
|
|
1758
|
+
], template: "<div class=\"general\">\r\n <button type=\"button\" class=\"ius-btn\" [class.isOpen]=\"isOpen\" [class.menuOpen]=\"openOptions\"\r\n [class.isPredetermined]=\"account.isPredetermined\" (click)=\"onClickAccount(account)\">\r\n\r\n <div class=\"content\">\r\n <ius-avatar-v2 [imageUrl]=\"account.logo\" [name]=\"account.name\" size=\"md\" shape=\"circle\"\r\n fallbackIconName=\"icon-account-circle\">\r\n </ius-avatar-v2>\r\n\r\n <span class=\"name body-base-1\">{{ account.name }}</span>\r\n </div>\r\n\r\n <ius-button-circle-tertiary (click)=\"showOptions($event)\" [iconName]=\"'icon-more-vert'\">\r\n </ius-button-circle-tertiary>\r\n </button>\r\n\r\n @if (openOptions) {\r\n <div class=\"more-box active\">\r\n <ius-option [checked]=\"account.isPredetermined!\" (optionClick)=\"onPressedPredeterminado.emit(account)\">\r\n <span class=\"body-large\">Marcar como predeterminada</span>\r\n </ius-option>\r\n\r\n <ius-simple-divider></ius-simple-divider>\r\n\r\n <ius-option [leadingIcon]=\"'icon-edit'\" (optionClick)=\"onPressedEditar.emit(account)\">\r\n <span class=\"body-large\">Editar</span>\r\n </ius-option>\r\n\r\n <ius-option [leadingIcon]=\"'icon-delete'\" (optionClick)=\"onPressedDesvincular.emit(account)\">\r\n <span class=\"body-large\">Desvincular</span>\r\n </ius-option>\r\n </div>\r\n }\r\n</div>", styles: [".h1{font-family:Roboto,sans-serif;font-size:2.375rem;font-weight:500;line-height:46px}.h2{font-family:Roboto,sans-serif;font-size:1.875rem;font-weight:700;line-height:38px}.h3{font-family:Roboto,sans-serif;font-size:1.5rem;font-weight:500;line-height:32px}.h4{font-family:Roboto,sans-serif;font-size:1.25rem;font-weight:700;line-height:26px}.h5{font-family:Roboto,sans-serif;font-size:1.125rem;font-weight:500;line-height:24px;letter-spacing:.18px}.label-large{font-family:Roboto,sans-serif;font-size:1rem;font-weight:500;line-height:22px}.body-large{font-family:Rubik,sans-serif;font-size:1rem;font-weight:400;line-height:22px}.label-base{font-family:Rubik,sans-serif;font-size:.875rem;font-weight:500;line-height:20px;letter-spacing:.28px}.body-base{font-family:Rubik,sans-serif;font-size:.875rem;font-weight:400;line-height:20px;font-style:italic;letter-spacing:.28px}.body-base-1,.body-base-1-1{font-family:Rubik,sans-serif;font-size:.875rem;font-weight:400;line-height:20px;letter-spacing:.28px}.body-sm{font-family:Rubik,sans-serif;font-size:.75rem;font-weight:400;line-height:16px;letter-spacing:.28px}.body-sm-italic{font-family:Rubik,sans-serif;font-size:.75rem;font-weight:400;line-height:16px;font-style:italic;letter-spacing:.28px}.caption-sm{font-family:Rubik,sans-serif;font-size:.75rem;font-weight:500;line-height:16px;letter-spacing:.28px}.caption-sm-italic{font-family:Rubik,sans-serif;font-size:.75rem;font-weight:500;line-height:16px;font-style:italic;letter-spacing:.28px}.general{position:relative;width:100%}.ius-btn{display:inline-flex;align-items:center;justify-content:space-between;gap:8px;width:100%;box-sizing:border-box;padding:8px 12px;border-radius:8px;border:1px solid #eaeaea;background-color:#fff;color:#333;font-family:Rubik,sans-serif;font-size:.875rem;font-weight:500;line-height:20px;letter-spacing:.28px;cursor:pointer;transition:background-color .15s ease,border-color .15s ease,box-shadow .15s ease}.ius-btn:hover:not(:disabled){border-color:#f0f0f0;background-color:#f5f5f5;box-shadow:0 1px 3px #0000001f,0 1px 2px #00000014}.ius-btn:active:not(:disabled){border-color:#c4dfff;background-color:#c4dfff;box-shadow:none}.ius-btn.isOpen{border-color:#c4dfff;background-color:#edf6ff}.ius-btn.menuOpen{border-color:#f0f0f0;background-color:#f5f5f5;box-shadow:0 1px 3px #0000001f,0 1px 2px #00000014}.ius-btn.isOpen.menuOpen{border-color:#c4dfff;background-color:#edf6ff;box-shadow:0 1px 3px #0000001f,0 1px 2px #00000014}.content{display:flex;align-items:center;gap:12px;min-width:0;flex:1 1 auto}.name{flex:1 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:left;color:#333}.more-box{position:absolute;top:100%;left:90%;margin-top:8px;min-width:240px;padding:8px;z-index:100;display:flex;flex-direction:column;border-radius:8px;background:#fff;box-shadow:0 2px 6px #00000024,0 1px 10px #0000001a;border:1px solid #f0f0f0;opacity:0;pointer-events:none;transform:translateY(-6px);transition:opacity .25s ease,transform .25s ease}.more-box.active{opacity:1;transform:translateY(0);pointer-events:all}\n"] }]
|
|
1626
1759
|
}], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { account: [{
|
|
1627
1760
|
type: Input
|
|
1628
1761
|
}], accountSelected: [{
|
|
@@ -3051,139 +3184,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
3051
3184
|
args: ['document:click', ['$event']]
|
|
3052
3185
|
}] } });
|
|
3053
3186
|
|
|
3054
|
-
class IconXsComponent {
|
|
3055
|
-
constructor(sanitizer) {
|
|
3056
|
-
this.sanitizer = sanitizer;
|
|
3057
|
-
this.iconName = 'icon-add';
|
|
3058
|
-
this.color = 'currentColor';
|
|
3059
|
-
this.svg = '';
|
|
3060
|
-
}
|
|
3061
|
-
ngOnChanges() {
|
|
3062
|
-
const rawSvg = ICONS[this.iconName];
|
|
3063
|
-
this.svg = rawSvg ? this.sanitizer.bypassSecurityTrustHtml(rawSvg) : '';
|
|
3064
|
-
}
|
|
3065
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: IconXsComponent, deps: [{ token: i1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3066
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: IconXsComponent, isStandalone: true, selector: "ius-icon-xs", inputs: { iconName: "iconName", color: "color" }, usesOnChanges: true, ngImport: i0, template: "<span [ngStyle]=\"{'color': color}\" [innerHTML]=\"svg\"></span>", styles: ["@charset \"UTF-8\";:host{display:inline-block;width:14px;height:14px;color:currentColor}span svg{width:100%;height:100%;fill:\\a0 currentColor}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] }); }
|
|
3067
|
-
}
|
|
3068
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: IconXsComponent, decorators: [{
|
|
3069
|
-
type: Component,
|
|
3070
|
-
args: [{ selector: 'ius-icon-xs', standalone: true, imports: [CommonModule], template: "<span [ngStyle]=\"{'color': color}\" [innerHTML]=\"svg\"></span>", styles: ["@charset \"UTF-8\";:host{display:inline-block;width:14px;height:14px;color:currentColor}span svg{width:100%;height:100%;fill:\\a0 currentColor}\n"] }]
|
|
3071
|
-
}], ctorParameters: () => [{ type: i1.DomSanitizer }], propDecorators: { iconName: [{
|
|
3072
|
-
type: Input
|
|
3073
|
-
}], color: [{
|
|
3074
|
-
type: Input
|
|
3075
|
-
}] } });
|
|
3076
|
-
|
|
3077
|
-
class IconXlComponent {
|
|
3078
|
-
constructor(sanitizer) {
|
|
3079
|
-
this.sanitizer = sanitizer;
|
|
3080
|
-
this.iconName = 'icon-add';
|
|
3081
|
-
this.color = 'currentColor';
|
|
3082
|
-
this.svg = '';
|
|
3083
|
-
}
|
|
3084
|
-
ngOnChanges() {
|
|
3085
|
-
const rawSvg = ICONS[this.iconName];
|
|
3086
|
-
this.svg = rawSvg ? this.sanitizer.bypassSecurityTrustHtml(rawSvg) : '';
|
|
3087
|
-
}
|
|
3088
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: IconXlComponent, deps: [{ token: i1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3089
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: IconXlComponent, isStandalone: true, selector: "ius-icon-xl", inputs: { iconName: "iconName", color: "color" }, usesOnChanges: true, ngImport: i0, template: "<span [ngStyle]=\"{'color': color}\" [innerHTML]=\"svg\"></span>", styles: ["@charset \"UTF-8\";:host{display:inline-block;width:32px;height:32px;color:currentColor}span svg{width:100%;height:100%;fill:\\a0 currentColor}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] }); }
|
|
3090
|
-
}
|
|
3091
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: IconXlComponent, decorators: [{
|
|
3092
|
-
type: Component,
|
|
3093
|
-
args: [{ selector: 'ius-icon-xl', standalone: true, imports: [CommonModule], template: "<span [ngStyle]=\"{'color': color}\" [innerHTML]=\"svg\"></span>", styles: ["@charset \"UTF-8\";:host{display:inline-block;width:32px;height:32px;color:currentColor}span svg{width:100%;height:100%;fill:\\a0 currentColor}\n"] }]
|
|
3094
|
-
}], ctorParameters: () => [{ type: i1.DomSanitizer }], propDecorators: { iconName: [{
|
|
3095
|
-
type: Input
|
|
3096
|
-
}], color: [{
|
|
3097
|
-
type: Input
|
|
3098
|
-
}] } });
|
|
3099
|
-
|
|
3100
|
-
class IconXxlComponent {
|
|
3101
|
-
constructor(sanitizer) {
|
|
3102
|
-
this.sanitizer = sanitizer;
|
|
3103
|
-
this.iconName = 'icon-add';
|
|
3104
|
-
this.color = 'currentColor';
|
|
3105
|
-
this.svg = '';
|
|
3106
|
-
}
|
|
3107
|
-
ngOnChanges() {
|
|
3108
|
-
const rawSvg = ICONS[this.iconName];
|
|
3109
|
-
this.svg = rawSvg ? this.sanitizer.bypassSecurityTrustHtml(rawSvg) : '';
|
|
3110
|
-
}
|
|
3111
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: IconXxlComponent, deps: [{ token: i1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3112
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: IconXxlComponent, isStandalone: true, selector: "ius-icon-xxl", inputs: { iconName: "iconName", color: "color" }, usesOnChanges: true, ngImport: i0, template: "<span [ngStyle]=\"{'color': color}\" [innerHTML]=\"svg\"></span>", styles: ["@charset \"UTF-8\";:host{display:inline-block;width:64px;height:64px;color:currentColor}span svg{width:100%;height:100%;fill:\\a0 currentColor}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] }); }
|
|
3113
|
-
}
|
|
3114
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: IconXxlComponent, decorators: [{
|
|
3115
|
-
type: Component,
|
|
3116
|
-
args: [{ selector: 'ius-icon-xxl', standalone: true, imports: [CommonModule], template: "<span [ngStyle]=\"{'color': color}\" [innerHTML]=\"svg\"></span>", styles: ["@charset \"UTF-8\";:host{display:inline-block;width:64px;height:64px;color:currentColor}span svg{width:100%;height:100%;fill:\\a0 currentColor}\n"] }]
|
|
3117
|
-
}], ctorParameters: () => [{ type: i1.DomSanitizer }], propDecorators: { iconName: [{
|
|
3118
|
-
type: Input
|
|
3119
|
-
}], color: [{
|
|
3120
|
-
type: Input
|
|
3121
|
-
}] } });
|
|
3122
|
-
|
|
3123
|
-
class AvatarV2Component {
|
|
3124
|
-
constructor() {
|
|
3125
|
-
this.size = 'md';
|
|
3126
|
-
this.shape = 'circle';
|
|
3127
|
-
this.showEditButton = false;
|
|
3128
|
-
this.fallbackIconName = 'icon-account-circle';
|
|
3129
|
-
this.editClicked = new EventEmitter();
|
|
3130
|
-
this.initials = '';
|
|
3131
|
-
}
|
|
3132
|
-
get containerStyle() {
|
|
3133
|
-
if (!this.imageUrl && this.backgroundColor) {
|
|
3134
|
-
return { 'background-color': this.backgroundColor };
|
|
3135
|
-
}
|
|
3136
|
-
return {};
|
|
3137
|
-
}
|
|
3138
|
-
ngOnChanges(changes) {
|
|
3139
|
-
if (changes['name']) {
|
|
3140
|
-
this.initials = this.extractInitials(this.name);
|
|
3141
|
-
}
|
|
3142
|
-
}
|
|
3143
|
-
onEditClick(event) {
|
|
3144
|
-
event.stopPropagation();
|
|
3145
|
-
this.editClicked.emit();
|
|
3146
|
-
}
|
|
3147
|
-
extractInitials(name) {
|
|
3148
|
-
if (!name?.trim())
|
|
3149
|
-
return '';
|
|
3150
|
-
const parts = name.trim().split(/\s+/);
|
|
3151
|
-
if (parts.length === 1)
|
|
3152
|
-
return parts[0].charAt(0).toUpperCase();
|
|
3153
|
-
return (parts[0].charAt(0) + parts[parts.length - 1].charAt(0)).toUpperCase();
|
|
3154
|
-
}
|
|
3155
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: AvatarV2Component, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3156
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: AvatarV2Component, isStandalone: true, selector: "ius-avatar-v2", inputs: { imageUrl: "imageUrl", name: "name", size: "size", shape: "shape", showEditButton: "showEditButton", backgroundColor: "backgroundColor", fallbackIconName: "fallbackIconName" }, outputs: { editClicked: "editClicked" }, usesOnChanges: true, ngImport: i0, template: "<div\n class=\"avatar\"\n [ngClass]=\"[size, shape]\"\n [ngStyle]=\"containerStyle\"\n>\n @if (imageUrl) {\n <img [src]=\"imageUrl\" [alt]=\"name || 'avatar'\" class=\"avatar__image\" />\n } @else if (initials) {\n <span class=\"body-large\" style=\"color: var(--ColorText-colorTextPrimary, #333);\">{{ initials }}</span>\n } @else {\n @switch (size) {\n @case ('xs') {\n <ius-icon-xs [iconName]=\"fallbackIconName\"></ius-icon-xs>\n }\n @case ('sm') {\n <ius-icon-sm [iconName]=\"fallbackIconName\"></ius-icon-sm>\n }\n @case ('md') {\n <ius-icon-md [iconName]=\"fallbackIconName\"></ius-icon-md>\n }\n @case ('lg') {\n <ius-icon-lg [iconName]=\"fallbackIconName\"></ius-icon-lg>\n }\n @case ('xl') {\n <ius-icon-xl [iconName]=\"fallbackIconName\"></ius-icon-xl>\n }\n @case ('xxl') {\n <ius-icon-xxl [iconName]=\"fallbackIconName\"></ius-icon-xxl>\n }\n }\n }\n\n @if (showEditButton) {\n <div class=\"avatar__edit-overlay\" (click)=\"onEditClick($event)\">\n <div class=\"avatar__edit-btn\">\n <ius-icon-sm iconName=\"icon-edit\"></ius-icon-sm>\n </div>\n </div>\n }\n</div>\n", styles: [".h1{font-family:Roboto,sans-serif;font-size:2.375rem;font-weight:500;line-height:46px}.h2{font-family:Roboto,sans-serif;font-size:1.875rem;font-weight:700;line-height:38px}.h3{font-family:Roboto,sans-serif;font-size:1.5rem;font-weight:500;line-height:32px}.h4{font-family:Roboto,sans-serif;font-size:1.25rem;font-weight:700;line-height:26px}.h5{font-family:Roboto,sans-serif;font-size:1.125rem;font-weight:500;line-height:24px;letter-spacing:.18px}.label-large{font-family:Roboto,sans-serif;font-size:1rem;font-weight:500;line-height:22px}.body-large{font-family:Rubik,sans-serif;font-size:1rem;font-weight:400;line-height:22px}.label-base{font-family:Rubik,sans-serif;font-size:.875rem;font-weight:500;line-height:20px;letter-spacing:.28px}.body-base{font-family:Rubik,sans-serif;font-size:.875rem;font-weight:400;line-height:20px;font-style:italic;letter-spacing:.28px}.body-base-1,.body-base-1-1{font-family:Rubik,sans-serif;font-size:.875rem;font-weight:400;line-height:20px;letter-spacing:.28px}.body-sm{font-family:Rubik,sans-serif;font-size:.75rem;font-weight:400;line-height:16px;letter-spacing:.28px}.body-sm-italic{font-family:Rubik,sans-serif;font-size:.75rem;font-weight:400;line-height:16px;font-style:italic;letter-spacing:.28px}.caption-sm{font-family:Rubik,sans-serif;font-size:.75rem;font-weight:500;line-height:16px;letter-spacing:.28px}.caption-sm-italic{font-family:Rubik,sans-serif;font-size:.75rem;font-weight:500;line-height:16px;font-style:italic;letter-spacing:.28px}:host{display:inline-block}.avatar{position:relative;display:flex;justify-content:center;align-items:center;background-color:#edf6ff;overflow:hidden;flex-shrink:0}.avatar.circle{border-radius:50%}.avatar.square{border-radius:8px}.avatar.xs{width:14px;height:14px}.avatar.sm{width:24px;height:24px}.avatar.md{width:32px;height:32px}.avatar.lg{width:40px;height:40px}.avatar.xl{width:64px;height:64px}.avatar.xxl{width:96px;height:96px}.avatar__image{width:100%;height:100%;object-fit:cover;display:block}.avatar__edit-overlay{position:absolute;inset:0;display:flex;justify-content:center;align-items:center;background-color:var(--Info-Color-Info-200, #C4DFFF);opacity:0;transition:opacity .2s ease;cursor:pointer}.avatar__edit-btn{display:flex;justify-content:center;align-items:center;width:28px;height:28px;border-radius:50%;background-color:#fff;color:#333;pointer-events:none}.avatar:hover .avatar__edit-overlay{opacity:1}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: IconXsComponent, selector: "ius-icon-xs", inputs: ["iconName", "color"] }, { kind: "component", type: IconSmComponent, selector: "ius-icon-sm", inputs: ["iconName", "color"] }, { kind: "component", type: IconMdComponent, selector: "ius-icon-md", inputs: ["iconName", "color"] }, { kind: "component", type: IconXlComponent, selector: "ius-icon-xl", inputs: ["iconName", "color"] }, { kind: "component", type: IconXxlComponent, selector: "ius-icon-xxl", inputs: ["iconName", "color"] }, { kind: "component", type: IconLgComponent, selector: "ius-icon-lg", inputs: ["iconName", "color"] }] }); }
|
|
3157
|
-
}
|
|
3158
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: AvatarV2Component, decorators: [{
|
|
3159
|
-
type: Component,
|
|
3160
|
-
args: [{ selector: 'ius-avatar-v2', standalone: true, imports: [
|
|
3161
|
-
CommonModule,
|
|
3162
|
-
IconXsComponent,
|
|
3163
|
-
IconSmComponent,
|
|
3164
|
-
IconMdComponent,
|
|
3165
|
-
IconXlComponent,
|
|
3166
|
-
IconXxlComponent,
|
|
3167
|
-
IconLgComponent
|
|
3168
|
-
], template: "<div\n class=\"avatar\"\n [ngClass]=\"[size, shape]\"\n [ngStyle]=\"containerStyle\"\n>\n @if (imageUrl) {\n <img [src]=\"imageUrl\" [alt]=\"name || 'avatar'\" class=\"avatar__image\" />\n } @else if (initials) {\n <span class=\"body-large\" style=\"color: var(--ColorText-colorTextPrimary, #333);\">{{ initials }}</span>\n } @else {\n @switch (size) {\n @case ('xs') {\n <ius-icon-xs [iconName]=\"fallbackIconName\"></ius-icon-xs>\n }\n @case ('sm') {\n <ius-icon-sm [iconName]=\"fallbackIconName\"></ius-icon-sm>\n }\n @case ('md') {\n <ius-icon-md [iconName]=\"fallbackIconName\"></ius-icon-md>\n }\n @case ('lg') {\n <ius-icon-lg [iconName]=\"fallbackIconName\"></ius-icon-lg>\n }\n @case ('xl') {\n <ius-icon-xl [iconName]=\"fallbackIconName\"></ius-icon-xl>\n }\n @case ('xxl') {\n <ius-icon-xxl [iconName]=\"fallbackIconName\"></ius-icon-xxl>\n }\n }\n }\n\n @if (showEditButton) {\n <div class=\"avatar__edit-overlay\" (click)=\"onEditClick($event)\">\n <div class=\"avatar__edit-btn\">\n <ius-icon-sm iconName=\"icon-edit\"></ius-icon-sm>\n </div>\n </div>\n }\n</div>\n", styles: [".h1{font-family:Roboto,sans-serif;font-size:2.375rem;font-weight:500;line-height:46px}.h2{font-family:Roboto,sans-serif;font-size:1.875rem;font-weight:700;line-height:38px}.h3{font-family:Roboto,sans-serif;font-size:1.5rem;font-weight:500;line-height:32px}.h4{font-family:Roboto,sans-serif;font-size:1.25rem;font-weight:700;line-height:26px}.h5{font-family:Roboto,sans-serif;font-size:1.125rem;font-weight:500;line-height:24px;letter-spacing:.18px}.label-large{font-family:Roboto,sans-serif;font-size:1rem;font-weight:500;line-height:22px}.body-large{font-family:Rubik,sans-serif;font-size:1rem;font-weight:400;line-height:22px}.label-base{font-family:Rubik,sans-serif;font-size:.875rem;font-weight:500;line-height:20px;letter-spacing:.28px}.body-base{font-family:Rubik,sans-serif;font-size:.875rem;font-weight:400;line-height:20px;font-style:italic;letter-spacing:.28px}.body-base-1,.body-base-1-1{font-family:Rubik,sans-serif;font-size:.875rem;font-weight:400;line-height:20px;letter-spacing:.28px}.body-sm{font-family:Rubik,sans-serif;font-size:.75rem;font-weight:400;line-height:16px;letter-spacing:.28px}.body-sm-italic{font-family:Rubik,sans-serif;font-size:.75rem;font-weight:400;line-height:16px;font-style:italic;letter-spacing:.28px}.caption-sm{font-family:Rubik,sans-serif;font-size:.75rem;font-weight:500;line-height:16px;letter-spacing:.28px}.caption-sm-italic{font-family:Rubik,sans-serif;font-size:.75rem;font-weight:500;line-height:16px;font-style:italic;letter-spacing:.28px}:host{display:inline-block}.avatar{position:relative;display:flex;justify-content:center;align-items:center;background-color:#edf6ff;overflow:hidden;flex-shrink:0}.avatar.circle{border-radius:50%}.avatar.square{border-radius:8px}.avatar.xs{width:14px;height:14px}.avatar.sm{width:24px;height:24px}.avatar.md{width:32px;height:32px}.avatar.lg{width:40px;height:40px}.avatar.xl{width:64px;height:64px}.avatar.xxl{width:96px;height:96px}.avatar__image{width:100%;height:100%;object-fit:cover;display:block}.avatar__edit-overlay{position:absolute;inset:0;display:flex;justify-content:center;align-items:center;background-color:var(--Info-Color-Info-200, #C4DFFF);opacity:0;transition:opacity .2s ease;cursor:pointer}.avatar__edit-btn{display:flex;justify-content:center;align-items:center;width:28px;height:28px;border-radius:50%;background-color:#fff;color:#333;pointer-events:none}.avatar:hover .avatar__edit-overlay{opacity:1}\n"] }]
|
|
3169
|
-
}], propDecorators: { imageUrl: [{
|
|
3170
|
-
type: Input
|
|
3171
|
-
}], name: [{
|
|
3172
|
-
type: Input
|
|
3173
|
-
}], size: [{
|
|
3174
|
-
type: Input
|
|
3175
|
-
}], shape: [{
|
|
3176
|
-
type: Input
|
|
3177
|
-
}], showEditButton: [{
|
|
3178
|
-
type: Input
|
|
3179
|
-
}], backgroundColor: [{
|
|
3180
|
-
type: Input
|
|
3181
|
-
}], fallbackIconName: [{
|
|
3182
|
-
type: Input
|
|
3183
|
-
}], editClicked: [{
|
|
3184
|
-
type: Output
|
|
3185
|
-
}] } });
|
|
3186
|
-
|
|
3187
3187
|
class AvatarBusinessComponent {
|
|
3188
3188
|
constructor() {
|
|
3189
3189
|
this.size = 'md';
|