@litigiovirtual/ius-design-components 1.0.242 → 1.0.243
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/avatar-v2/avatar-v2.component.mjs +2 -2
- package/esm2022/lib/dropdown-user-menu/dropdown-user-menu.component.mjs +5 -5
- package/fesm2022/litigiovirtual-ius-design-components.mjs +154 -154
- package/fesm2022/litigiovirtual-ius-design-components.mjs.map +1 -1
- package/package.json +1 -1
|
@@ -41,7 +41,7 @@ export class AvatarV2Component {
|
|
|
41
41
|
return (parts[0].charAt(0) + parts[parts.length - 1].charAt(0)).toUpperCase();
|
|
42
42
|
}
|
|
43
43
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: AvatarV2Component, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
44
|
-
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\r\n class=\"avatar\"\r\n [ngClass]=\"[size, shape]\"\r\n [ngStyle]=\"containerStyle\"\r\n>\r\n @if (imageUrl) {\r\n <img [src]=\"imageUrl\" [alt]=\"name || 'avatar'\" class=\"avatar__image\" />\r\n } @else if (initials) {\r\n <span class=\"body-large\" style=\"color: var(--ColorText-colorTextPrimary, #333);\">{{ initials }}</span>\r\n } @else {\r\n @switch (size) {\r\n @case ('xs') {\r\n <ius-icon-xs [iconName]=\"fallbackIconName\"></ius-icon-xs>\r\n }\r\n @case ('sm') {\r\n <ius-icon-sm [iconName]=\"fallbackIconName\"></ius-icon-sm>\r\n }\r\n @case ('md') {\r\n <ius-icon-md [iconName]=\"fallbackIconName\"></ius-icon-md>\r\n }\r\n @case ('lg') {\r\n <ius-icon-lg [iconName]=\"fallbackIconName\"></ius-icon-lg>\r\n }\r\n @case ('xl') {\r\n <ius-icon-xl [iconName]=\"fallbackIconName\"></ius-icon-xl>\r\n }\r\n @case ('xxl') {\r\n <ius-icon-xxl [iconName]=\"fallbackIconName\"></ius-icon-xxl>\r\n }\r\n }\r\n }\r\n\r\n @if (showEditButton) {\r\n <div class=\"avatar__edit-overlay\" (click)=\"onEditClick($event)\">\r\n <div class=\"avatar__edit-btn\">\r\n <ius-icon-sm iconName=\"icon-edit\"></ius-icon-sm>\r\n </div>\r\n </div>\r\n }\r\n</div>\r\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:#
|
|
44
|
+
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\r\n class=\"avatar\"\r\n [ngClass]=\"[size, shape]\"\r\n [ngStyle]=\"containerStyle\"\r\n>\r\n @if (imageUrl) {\r\n <img [src]=\"imageUrl\" [alt]=\"name || 'avatar'\" class=\"avatar__image\" />\r\n } @else if (initials) {\r\n <span class=\"body-large\" style=\"color: var(--ColorText-colorTextPrimary, #333);\">{{ initials }}</span>\r\n } @else {\r\n @switch (size) {\r\n @case ('xs') {\r\n <ius-icon-xs [iconName]=\"fallbackIconName\"></ius-icon-xs>\r\n }\r\n @case ('sm') {\r\n <ius-icon-sm [iconName]=\"fallbackIconName\"></ius-icon-sm>\r\n }\r\n @case ('md') {\r\n <ius-icon-md [iconName]=\"fallbackIconName\"></ius-icon-md>\r\n }\r\n @case ('lg') {\r\n <ius-icon-lg [iconName]=\"fallbackIconName\"></ius-icon-lg>\r\n }\r\n @case ('xl') {\r\n <ius-icon-xl [iconName]=\"fallbackIconName\"></ius-icon-xl>\r\n }\r\n @case ('xxl') {\r\n <ius-icon-xxl [iconName]=\"fallbackIconName\"></ius-icon-xxl>\r\n }\r\n }\r\n }\r\n\r\n @if (showEditButton) {\r\n <div class=\"avatar__edit-overlay\" (click)=\"onEditClick($event)\">\r\n <div class=\"avatar__edit-btn\">\r\n <ius-icon-sm iconName=\"icon-edit\"></ius-icon-sm>\r\n </div>\r\n </div>\r\n }\r\n</div>\r\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.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.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"] }] }); }
|
|
45
45
|
}
|
|
46
46
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: AvatarV2Component, decorators: [{
|
|
47
47
|
type: Component,
|
|
@@ -53,7 +53,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
53
53
|
IconXlComponent,
|
|
54
54
|
IconXxlComponent,
|
|
55
55
|
IconLgComponent
|
|
56
|
-
], template: "<div\r\n class=\"avatar\"\r\n [ngClass]=\"[size, shape]\"\r\n [ngStyle]=\"containerStyle\"\r\n>\r\n @if (imageUrl) {\r\n <img [src]=\"imageUrl\" [alt]=\"name || 'avatar'\" class=\"avatar__image\" />\r\n } @else if (initials) {\r\n <span class=\"body-large\" style=\"color: var(--ColorText-colorTextPrimary, #333);\">{{ initials }}</span>\r\n } @else {\r\n @switch (size) {\r\n @case ('xs') {\r\n <ius-icon-xs [iconName]=\"fallbackIconName\"></ius-icon-xs>\r\n }\r\n @case ('sm') {\r\n <ius-icon-sm [iconName]=\"fallbackIconName\"></ius-icon-sm>\r\n }\r\n @case ('md') {\r\n <ius-icon-md [iconName]=\"fallbackIconName\"></ius-icon-md>\r\n }\r\n @case ('lg') {\r\n <ius-icon-lg [iconName]=\"fallbackIconName\"></ius-icon-lg>\r\n }\r\n @case ('xl') {\r\n <ius-icon-xl [iconName]=\"fallbackIconName\"></ius-icon-xl>\r\n }\r\n @case ('xxl') {\r\n <ius-icon-xxl [iconName]=\"fallbackIconName\"></ius-icon-xxl>\r\n }\r\n }\r\n }\r\n\r\n @if (showEditButton) {\r\n <div class=\"avatar__edit-overlay\" (click)=\"onEditClick($event)\">\r\n <div class=\"avatar__edit-btn\">\r\n <ius-icon-sm iconName=\"icon-edit\"></ius-icon-sm>\r\n </div>\r\n </div>\r\n }\r\n</div>\r\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:#
|
|
56
|
+
], template: "<div\r\n class=\"avatar\"\r\n [ngClass]=\"[size, shape]\"\r\n [ngStyle]=\"containerStyle\"\r\n>\r\n @if (imageUrl) {\r\n <img [src]=\"imageUrl\" [alt]=\"name || 'avatar'\" class=\"avatar__image\" />\r\n } @else if (initials) {\r\n <span class=\"body-large\" style=\"color: var(--ColorText-colorTextPrimary, #333);\">{{ initials }}</span>\r\n } @else {\r\n @switch (size) {\r\n @case ('xs') {\r\n <ius-icon-xs [iconName]=\"fallbackIconName\"></ius-icon-xs>\r\n }\r\n @case ('sm') {\r\n <ius-icon-sm [iconName]=\"fallbackIconName\"></ius-icon-sm>\r\n }\r\n @case ('md') {\r\n <ius-icon-md [iconName]=\"fallbackIconName\"></ius-icon-md>\r\n }\r\n @case ('lg') {\r\n <ius-icon-lg [iconName]=\"fallbackIconName\"></ius-icon-lg>\r\n }\r\n @case ('xl') {\r\n <ius-icon-xl [iconName]=\"fallbackIconName\"></ius-icon-xl>\r\n }\r\n @case ('xxl') {\r\n <ius-icon-xxl [iconName]=\"fallbackIconName\"></ius-icon-xxl>\r\n }\r\n }\r\n }\r\n\r\n @if (showEditButton) {\r\n <div class=\"avatar__edit-overlay\" (click)=\"onEditClick($event)\">\r\n <div class=\"avatar__edit-btn\">\r\n <ius-icon-sm iconName=\"icon-edit\"></ius-icon-sm>\r\n </div>\r\n </div>\r\n }\r\n</div>\r\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"] }]
|
|
57
57
|
}], propDecorators: { imageUrl: [{
|
|
58
58
|
type: Input
|
|
59
59
|
}], name: [{
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { CommonModule } from '@angular/common';
|
|
2
2
|
import { Component, EventEmitter, HostListener, Input, Output, } from '@angular/core';
|
|
3
|
-
import {
|
|
4
|
-
import {
|
|
3
|
+
import { AvatarV2Component } from '../avatar-v2/avatar-v2.component';
|
|
4
|
+
import { AvatarBusinessComponent } from '../avatar-business/avatar-business.component';
|
|
5
5
|
import * as i0 from "@angular/core";
|
|
6
6
|
import * as i1 from "@angular/common";
|
|
7
7
|
export class DropdownUserMenuComponent {
|
|
@@ -30,11 +30,11 @@ export class DropdownUserMenuComponent {
|
|
|
30
30
|
}
|
|
31
31
|
}
|
|
32
32
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DropdownUserMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
33
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
33
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: DropdownUserMenuComponent, isStandalone: true, selector: "ius-dropdown-user-menu", inputs: { isActive: "isActive", nameUser: "nameUser", logo: "logo", avatar: "avatar", disabled: "disabled", iconColor: "iconColor" }, outputs: { buttonClicked: "buttonClicked" }, host: { listeners: { "document:click": "onClickOutside($event)" } }, ngImport: i0, template: "<div class=\"dropdown-container\" id=\"userMenu\">\r\n <button [disabled]=\"disabled\" (click)=\"onClick()\" class=\"ius-btn\" [ngClass]=\"{ isOpen: isOpen }\">\r\n <ius-avatar-business [imageUrl]=\"logo\" size=\"md\" shape=\"circle\"></ius-avatar-business>\r\n <span class=\"name\">{{nameUser}}</span>\r\n <ius-avatar-v2 [imageUrl]=\"avatar\" [name]=\"nameUser\" size=\"md\" shape=\"circle\"></ius-avatar-v2>\r\n </button>\r\n\r\n <div class=\"dropdown-menu\" [class.is-open]=\"isOpen\">\r\n <ng-content></ng-content>\r\n </div>\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}.ius-btn{display:inline-flex;padding:8px 12px;align-items:center;gap:8px;border-radius:8px;background-color:#fff;color:#333;border:1px solid #eaeaea;cursor:pointer;font-family:Rubik,sans-serif;font-size:.875rem;font-weight:500;font-style:normal;line-height:20px;letter-spacing:.28px}.ius-btn:hover:not(:disabled){border:1px solid #5892FF;box-shadow:0 1px 3px #0000001f,0 1px 2px #00000014}.ius-btn:active:not(:disabled){border:1px solid #5892FF;background-color:#edf6ff}.ius-btn.isOpen{border:1px solid #eaeaea;box-shadow:0 1px 3px #0000001f,0 1px 2px #00000014;background-color:#fff}.logo{display:flex;width:32px;height:32px;border-radius:100px;justify-content:center;align-items:center;aspect-ratio:1/1;border:.5px solid #f5f5f5;object-fit:cover}.avatar{display:flex;width:32px;height:32px;border-radius:100px;justify-content:center;align-items:center;aspect-ratio:1/1;border:.5px solid #f5f5f5;background:#fff3;object-fit:cover}.icon-placeholder{color:#8c8c8c}.ctn-icon-1{display:flex;width:26px;height:26px;border-radius:100px;justify-content:center;align-items:center;aspect-ratio:1/1;border:3.8px solid #8c8c8c}.dropdown-container{position:relative;display:inline-block}.dropdown-menu{position:absolute;top:100%;right:0;z-index:10;margin-top:4px;display:inline-flex;padding:4px;flex-direction:column;justify-content:center;align-items:flex-start;gap:4px;border-radius:8px;background-color:#fff;box-shadow:0 2px 6px #00000024,0 1px 10px #0000001a;opacity:0;transform:translateY(-10px);pointer-events:none;transition:opacity .25s ease,transform .25s ease}.dropdown-menu.is-open{opacity:1;transform:translateY(0);pointer-events:auto}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: AvatarV2Component, selector: "ius-avatar-v2", inputs: ["imageUrl", "name", "size", "shape", "showEditButton", "backgroundColor", "fallbackIconName"], outputs: ["editClicked"] }, { kind: "component", type: AvatarBusinessComponent, selector: "ius-avatar-business", inputs: ["imageUrl", "label", "size", "shape", "showEditButton", "fallbackIconName"], outputs: ["editClicked"] }] }); }
|
|
34
34
|
}
|
|
35
35
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DropdownUserMenuComponent, decorators: [{
|
|
36
36
|
type: Component,
|
|
37
|
-
args: [{ selector: 'ius-dropdown-user-menu', standalone: true, imports: [CommonModule,
|
|
37
|
+
args: [{ selector: 'ius-dropdown-user-menu', standalone: true, imports: [CommonModule, AvatarV2Component, AvatarBusinessComponent], template: "<div class=\"dropdown-container\" id=\"userMenu\">\r\n <button [disabled]=\"disabled\" (click)=\"onClick()\" class=\"ius-btn\" [ngClass]=\"{ isOpen: isOpen }\">\r\n <ius-avatar-business [imageUrl]=\"logo\" size=\"md\" shape=\"circle\"></ius-avatar-business>\r\n <span class=\"name\">{{nameUser}}</span>\r\n <ius-avatar-v2 [imageUrl]=\"avatar\" [name]=\"nameUser\" size=\"md\" shape=\"circle\"></ius-avatar-v2>\r\n </button>\r\n\r\n <div class=\"dropdown-menu\" [class.is-open]=\"isOpen\">\r\n <ng-content></ng-content>\r\n </div>\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}.ius-btn{display:inline-flex;padding:8px 12px;align-items:center;gap:8px;border-radius:8px;background-color:#fff;color:#333;border:1px solid #eaeaea;cursor:pointer;font-family:Rubik,sans-serif;font-size:.875rem;font-weight:500;font-style:normal;line-height:20px;letter-spacing:.28px}.ius-btn:hover:not(:disabled){border:1px solid #5892FF;box-shadow:0 1px 3px #0000001f,0 1px 2px #00000014}.ius-btn:active:not(:disabled){border:1px solid #5892FF;background-color:#edf6ff}.ius-btn.isOpen{border:1px solid #eaeaea;box-shadow:0 1px 3px #0000001f,0 1px 2px #00000014;background-color:#fff}.logo{display:flex;width:32px;height:32px;border-radius:100px;justify-content:center;align-items:center;aspect-ratio:1/1;border:.5px solid #f5f5f5;object-fit:cover}.avatar{display:flex;width:32px;height:32px;border-radius:100px;justify-content:center;align-items:center;aspect-ratio:1/1;border:.5px solid #f5f5f5;background:#fff3;object-fit:cover}.icon-placeholder{color:#8c8c8c}.ctn-icon-1{display:flex;width:26px;height:26px;border-radius:100px;justify-content:center;align-items:center;aspect-ratio:1/1;border:3.8px solid #8c8c8c}.dropdown-container{position:relative;display:inline-block}.dropdown-menu{position:absolute;top:100%;right:0;z-index:10;margin-top:4px;display:inline-flex;padding:4px;flex-direction:column;justify-content:center;align-items:flex-start;gap:4px;border-radius:8px;background-color:#fff;box-shadow:0 2px 6px #00000024,0 1px 10px #0000001a;opacity:0;transform:translateY(-10px);pointer-events:none;transition:opacity .25s ease,transform .25s ease}.dropdown-menu.is-open{opacity:1;transform:translateY(0);pointer-events:auto}\n"] }]
|
|
38
38
|
}], propDecorators: { isActive: [{
|
|
39
39
|
type: Input
|
|
40
40
|
}], nameUser: [{
|
|
@@ -53,4 +53,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
53
53
|
type: HostListener,
|
|
54
54
|
args: ['document:click', ['$event']]
|
|
55
55
|
}] } });
|
|
56
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
56
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZHJvcGRvd24tdXNlci1tZW51LmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2l1cy1kZXNpZ24tY29tcG9uZW50cy9zcmMvbGliL2Ryb3Bkb3duLXVzZXItbWVudS9kcm9wZG93bi11c2VyLW1lbnUuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvaXVzLWRlc2lnbi1jb21wb25lbnRzL3NyYy9saWIvZHJvcGRvd24tdXNlci1tZW51L2Ryb3Bkb3duLXVzZXItbWVudS5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsWUFBWSxFQUFFLE1BQU0saUJBQWlCLENBQUM7QUFDL0MsT0FBTyxFQUNMLFNBQVMsRUFDVCxZQUFZLEVBQ1osWUFBWSxFQUNaLEtBQUssRUFDTCxNQUFNLEdBQ1AsTUFBTSxlQUFlLENBQUM7QUFDdkIsT0FBTyxFQUFFLGlCQUFpQixFQUFFLE1BQU0sa0NBQWtDLENBQUM7QUFDckUsT0FBTyxFQUFFLHVCQUF1QixFQUFFLE1BQU0sOENBQThDLENBQUM7OztBQVV2RixNQUFNLE9BQU8seUJBQXlCO0lBUHRDO1FBUVcsYUFBUSxHQUFHLEtBQUssQ0FBQztRQUNqQixhQUFRLEdBQUcsRUFBRSxDQUFDO1FBQ2QsU0FBSSxHQUFHLEVBQUUsQ0FBQztRQUNWLFdBQU0sR0FBRyxFQUFFLENBQUM7UUFDWixhQUFRLEdBQUcsS0FBSyxDQUFDO1FBQ2pCLGNBQVMsR0FBRyxTQUFTLENBQUM7UUFDckIsa0JBQWEsR0FBdUIsSUFBSSxZQUFZLEVBQUUsQ0FBQztRQUVqRSxXQUFNLEdBQUcsS0FBSyxDQUFDO0tBbUJoQjtJQWpCQyxPQUFPO1FBQ0wsSUFBSSxDQUFDLE1BQU0sR0FBRyxDQUFDLElBQUksQ0FBQyxNQUFNLENBQUM7UUFDM0IsSUFBSSxDQUFDLGFBQWEsQ0FBQyxJQUFJLEVBQUUsQ0FBQztJQUM1QixDQUFDO0lBRUQsS0FBSztRQUNILElBQUksQ0FBQyxNQUFNLEdBQUcsS0FBSyxDQUFDO0lBQ3RCLENBQUM7SUFHRCxjQUFjLENBQUMsS0FBWTtRQUN6QixNQUFNLE1BQU0sR0FBRyxLQUFLLENBQUMsTUFBcUIsQ0FBQztRQUMzQyxNQUFNLFNBQVMsR0FBRyxRQUFRLENBQUMsY0FBYyxDQUFDLFVBQVUsQ0FBQyxDQUFDO1FBQ3RELElBQUksU0FBUyxJQUFJLENBQUMsU0FBUyxDQUFDLFFBQVEsQ0FBQyxNQUFNLENBQUMsRUFBRSxDQUFDO1lBQzdDLElBQUksQ0FBQyxNQUFNLEdBQUcsS0FBSyxDQUFDO1FBQ3RCLENBQUM7SUFDSCxDQUFDOytHQTNCVSx5QkFBeUI7bUdBQXpCLHlCQUF5QiwwVUNuQnRDLHFrQkFVTSxtbkdES00sWUFBWSw2SEFBRSxpQkFBaUIsNExBQUUsdUJBQXVCOzs0RkFJdkQseUJBQXlCO2tCQVByQyxTQUFTOytCQUNFLHdCQUF3QixjQUN0QixJQUFJLFdBQ1AsQ0FBQyxZQUFZLEVBQUUsaUJBQWlCLEVBQUUsdUJBQXVCLENBQUM7OEJBSzFELFFBQVE7c0JBQWhCLEtBQUs7Z0JBQ0csUUFBUTtzQkFBaEIsS0FBSztnQkFDRyxJQUFJO3NCQUFaLEtBQUs7Z0JBQ0csTUFBTTtzQkFBZCxLQUFLO2dCQUNHLFFBQVE7c0JBQWhCLEtBQUs7Z0JBQ0csU0FBUztzQkFBakIsS0FBSztnQkFDSSxhQUFhO3NCQUF0QixNQUFNO2dCQWNQLGNBQWM7c0JBRGIsWUFBWTt1QkFBQyxnQkFBZ0IsRUFBRSxDQUFDLFFBQVEsQ0FBQyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbW1vbk1vZHVsZSB9IGZyb20gJ0Bhbmd1bGFyL2NvbW1vbic7XHJcbmltcG9ydCB7XHJcbiAgQ29tcG9uZW50LFxyXG4gIEV2ZW50RW1pdHRlcixcclxuICBIb3N0TGlzdGVuZXIsXHJcbiAgSW5wdXQsXHJcbiAgT3V0cHV0LFxyXG59IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xyXG5pbXBvcnQgeyBBdmF0YXJWMkNvbXBvbmVudCB9IGZyb20gJy4uL2F2YXRhci12Mi9hdmF0YXItdjIuY29tcG9uZW50JztcclxuaW1wb3J0IHsgQXZhdGFyQnVzaW5lc3NDb21wb25lbnQgfSBmcm9tICcuLi9hdmF0YXItYnVzaW5lc3MvYXZhdGFyLWJ1c2luZXNzLmNvbXBvbmVudCc7XHJcblxyXG5cclxuQENvbXBvbmVudCh7XHJcbiAgc2VsZWN0b3I6ICdpdXMtZHJvcGRvd24tdXNlci1tZW51JyxcclxuICBzdGFuZGFsb25lOiB0cnVlLFxyXG4gIGltcG9ydHM6IFtDb21tb25Nb2R1bGUsIEF2YXRhclYyQ29tcG9uZW50LCBBdmF0YXJCdXNpbmVzc0NvbXBvbmVudF0sXHJcbiAgdGVtcGxhdGVVcmw6ICcuL2Ryb3Bkb3duLXVzZXItbWVudS5jb21wb25lbnQuaHRtbCcsXHJcbiAgc3R5bGVVcmw6ICcuL2Ryb3Bkb3duLXVzZXItbWVudS5jb21wb25lbnQuc2NzcydcclxufSlcclxuZXhwb3J0IGNsYXNzIERyb3Bkb3duVXNlck1lbnVDb21wb25lbnQge1xyXG4gIEBJbnB1dCgpIGlzQWN0aXZlID0gZmFsc2U7XHJcbiAgQElucHV0KCkgbmFtZVVzZXIgPSAnJztcclxuICBASW5wdXQoKSBsb2dvID0gJyc7XHJcbiAgQElucHV0KCkgYXZhdGFyID0gJyc7XHJcbiAgQElucHV0KCkgZGlzYWJsZWQgPSBmYWxzZTtcclxuICBASW5wdXQoKSBpY29uQ29sb3IgPSAnIzRBOTBEOSc7XHJcbiAgQE91dHB1dCgpIGJ1dHRvbkNsaWNrZWQ6IEV2ZW50RW1pdHRlcjx2b2lkPiA9IG5ldyBFdmVudEVtaXR0ZXIoKTtcclxuXHJcbiAgaXNPcGVuID0gZmFsc2U7XHJcblxyXG4gIG9uQ2xpY2soKSB7XHJcbiAgICB0aGlzLmlzT3BlbiA9ICF0aGlzLmlzT3BlbjtcclxuICAgIHRoaXMuYnV0dG9uQ2xpY2tlZC5lbWl0KCk7XHJcbiAgfVxyXG5cclxuICBjbG9zZSgpIHtcclxuICAgIHRoaXMuaXNPcGVuID0gZmFsc2U7XHJcbiAgfVxyXG5cclxuICBASG9zdExpc3RlbmVyKCdkb2N1bWVudDpjbGljaycsIFsnJGV2ZW50J10pXHJcbiAgb25DbGlja091dHNpZGUoZXZlbnQ6IEV2ZW50KSB7XHJcbiAgICBjb25zdCB0YXJnZXQgPSBldmVudC50YXJnZXQgYXMgSFRNTEVsZW1lbnQ7XHJcbiAgICBjb25zdCBjb250YWluZXIgPSBkb2N1bWVudC5nZXRFbGVtZW50QnlJZCgndXNlck1lbnUnKTtcclxuICAgIGlmIChjb250YWluZXIgJiYgIWNvbnRhaW5lci5jb250YWlucyh0YXJnZXQpKSB7XHJcbiAgICAgIHRoaXMuaXNPcGVuID0gZmFsc2U7XHJcbiAgICB9XHJcbiAgfVxyXG59XHJcbiIsIjxkaXYgY2xhc3M9XCJkcm9wZG93bi1jb250YWluZXJcIiBpZD1cInVzZXJNZW51XCI+XHJcbiAgICA8YnV0dG9uIFtkaXNhYmxlZF09XCJkaXNhYmxlZFwiIChjbGljayk9XCJvbkNsaWNrKClcIiBjbGFzcz1cIml1cy1idG5cIiBbbmdDbGFzc109XCJ7IGlzT3BlbjogaXNPcGVuIH1cIj5cclxuICAgICAgICA8aXVzLWF2YXRhci1idXNpbmVzcyBbaW1hZ2VVcmxdPVwibG9nb1wiIHNpemU9XCJtZFwiIHNoYXBlPVwiY2lyY2xlXCI+PC9pdXMtYXZhdGFyLWJ1c2luZXNzPlxyXG4gICAgICAgIDxzcGFuIGNsYXNzPVwibmFtZVwiPnt7bmFtZVVzZXJ9fTwvc3Bhbj5cclxuICAgICAgICA8aXVzLWF2YXRhci12MiBbaW1hZ2VVcmxdPVwiYXZhdGFyXCIgW25hbWVdPVwibmFtZVVzZXJcIiBzaXplPVwibWRcIiBzaGFwZT1cImNpcmNsZVwiPjwvaXVzLWF2YXRhci12Mj5cclxuICAgIDwvYnV0dG9uPlxyXG5cclxuICAgIDxkaXYgY2xhc3M9XCJkcm9wZG93bi1tZW51XCIgW2NsYXNzLmlzLW9wZW5dPVwiaXNPcGVuXCI+XHJcbiAgICAgICAgPG5nLWNvbnRlbnQ+PC9uZy1jb250ZW50PlxyXG4gICAgPC9kaXY+XHJcbjwvZGl2PiJdfQ==
|