@litigiovirtual/ius-design-components 1.0.85 → 1.0.86
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.
|
@@ -6,6 +6,8 @@ export class UserCardComponent {
|
|
|
6
6
|
constructor() {
|
|
7
7
|
this.hover = false;
|
|
8
8
|
this.options = false;
|
|
9
|
+
this.activeText = 'Activo';
|
|
10
|
+
this.inactiveText = 'Inactivo';
|
|
9
11
|
this.onClickEdit = new EventEmitter();
|
|
10
12
|
this.onClickDelete = new EventEmitter();
|
|
11
13
|
this.onClickCard = new EventEmitter();
|
|
@@ -32,12 +34,15 @@ export class UserCardComponent {
|
|
|
32
34
|
clickShowMore() {
|
|
33
35
|
this.options = !this.options;
|
|
34
36
|
}
|
|
37
|
+
get stateLabel() {
|
|
38
|
+
return this.state ? this.activeText : this.inactiveText;
|
|
39
|
+
}
|
|
35
40
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: UserCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
36
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: UserCardComponent, isStandalone: true, selector: "ius-user-card", inputs: { image: "image", state: "state", name: "name", role: "role", label1: "label1", data1: "data1", label2: "label2", data2: "data2", userID: "userID", letterIcon: "letterIcon" }, outputs: { onClickEdit: "onClickEdit", onClickDelete: "onClickDelete", onClickCard: "onClickCard" }, ngImport: i0, template: "<div class=\"general-container\">\r\n <div
|
|
41
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: UserCardComponent, isStandalone: true, selector: "ius-user-card", inputs: { image: "image", state: "state", name: "name", role: "role", label1: "label1", data1: "data1", label2: "label2", data2: "data2", userID: "userID", letterIcon: "letterIcon", activeText: "activeText", inactiveText: "inactiveText" }, outputs: { onClickEdit: "onClickEdit", onClickDelete: "onClickDelete", onClickCard: "onClickCard" }, ngImport: i0, template: "<div class=\"general-container\">\r\n <div class=\"container-card\" (mouseenter)=\"onMouseEnter()\" (mouseleave)=\"onMouseLeave()\" (click)=\"clickCard($event)\">\r\n <div class=\"data\">\r\n <div class=\"left-data\">\r\n @if (letterIcon && !image) {\r\n <div class=\"container-icon-letra\">\r\n <span>{{ letterIcon }}</span>\r\n </div>\r\n }@else if(image && !letterIcon){\r\n <div class=\"image-container\">\r\n <img [src]=\"image\" class=\"image\" />\r\n </div>\r\n }\r\n <div class=\"data-container\">\r\n <p class=\"state\" [class.on]=\"state\" [class.off]=\"state === false\">\r\n {{ stateLabel }}\r\n </p>\r\n <p class=\"name\">{{ name }}</p>\r\n <p class=\"role\">{{ role }}</p>\r\n </div>\r\n </div>\r\n <div class=\"right-data\">\r\n <div class=\"container\">\r\n @if (label1 && data1) {\r\n <div class=\"data-container\">\r\n <p class=\"title\">{{ label1 }}</p>\r\n <p class=\"data\">{{ data1 }}</p>\r\n </div>\r\n } @if (label2 && data2) {\r\n <div class=\"data-container\">\r\n <p class=\"title\">{{ label2 }}</p>\r\n <p class=\"data\">{{ data2 }}</p>\r\n </div>\r\n }\r\n </div>\r\n @if (hover) {\r\n <div class=\"buttons\">\r\n <div>\r\n <ius-button-squared-tertiary iconName=\"icon-edit\"\r\n (buttonClicked)=\"clickEdit($event)\"></ius-button-squared-tertiary>\r\n </div>\r\n <div>\r\n <ius-button-squared-tertiary iconName=\"icon-delete\"\r\n (buttonClicked)=\"clickDelete($event)\"></ius-button-squared-tertiary>\r\n </div>\r\n <div class=\"options\">\r\n <ius-button-squared-tertiary iconName=\"icon-more-vert\"\r\n (buttonClicked)=\"clickShowMore()\"></ius-button-squared-tertiary>\r\n @if (options) {\r\n <div class=\"dropdown\">\r\n <ius-dropdown-contextual-menu>\r\n <ng-content></ng-content>\r\n </ius-dropdown-contextual-menu>\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n }\r\n <div class=\"btn\">\r\n <ius-button-squared-tertiary iconName=\"icon-keyboard-arrow-right\"\r\n (buttonClicked)=\"clickCard($event)\"></ius-button-squared-tertiary>\r\n </div>\r\n </div>\r\n </div>\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-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-container{position:relative}.container-card{display:flex;padding:16px 32px;align-items:center;align-content:center;gap:12px;flex-wrap:wrap;border-radius:8px;border:1px solid #eaeaea;background:#fff}.container-card :hover{cursor:pointer}.data{display:flex;align-items:center;gap:40px;flex:1 0 0}.left-data{display:flex;min-width:280px;align-items:center;gap:8px;flex:1 0 0}.left-data .container-icon-letra{background-color:#dfe0ff;display:flex;width:20px;height:20px;padding:10px;margin-right:10px;justify-content:center;align-items:center;border-radius:100px;font-family:Rubik,sans-serif;font-size:.75rem;font-style:normal;font-weight:400;line-height:16px;letter-spacing:.24px}.left-data .icon-letra-edit{display:none}.left-data .container-icon-letra:hover{background-color:#6670c4!important}.left-data .container-icon-letra:hover>span{display:none}.left-data .container-icon-letra:hover .icon-letra-edit{display:block}.left-data .container-icon-letra span{color:#1b2678;text-align:center;font-size:18px;font-weight:500}.left-data .image-container{display:flex;align-items:center;gap:8px}.left-data .image-container .image{display:flex;width:32px;height:32px;justify-content:center;align-items:center;aspect-ratio:1/1;border-radius:100px;border:.5px solid #f5f5f5;background:#fff3}.left-data .data-container{display:flex;flex-direction:column;align-items:flex-start;gap:0;flex:1 0 0}.left-data .data-container p{margin:0}.left-data .data-container .name{display:flex;align-items:center;gap:10px;color:#333;font-family:Rubik,sans-serif;font-size:1rem;font-style:normal;font-weight:400;line-height:22px}.left-data .data-container .state{display:flex;align-items:center;gap:10px;align-self:stretch;color:#595959;font-family:Rubik,sans-serif;font-size:.75rem;font-style:normal;font-weight:400;line-height:16px;letter-spacing:.24px}.left-data .data-container .role{display:flex;align-items:center;gap:10px;align-self:stretch;color:#8c8c8c;font-family:Rubik,sans-serif;font-size:.875rem;font-style:normal;font-weight:400;line-height:20px;letter-spacing:.28px}.right-data{display:flex;align-items:center;gap:40px}.right-data p{margin:0}.right-data .container{display:flex;min-width:280px;justify-content:center;align-items:center;align-content:center;gap:40px;flex-wrap:wrap}.right-data .container .data-container{display:flex;flex-direction:column;align-items:flex-start;gap:4px}.right-data .container .data-container .title{display:flex;align-items:center;gap:10px;color:#8c8c8c;font-family:Rubik,sans-serif;font-size:.75rem;font-style:normal;font-weight:400;line-height:16px;letter-spacing:.24px;align-self:start}.right-data .container .data-container .data{display:flex;align-items:center;gap:10px;align-self:stretch;color:#595959;font-family:Rubik,sans-serif;font-size:.875rem;font-style:normal;font-weight:400;line-height:20px;letter-spacing:.28px}.right-data .buttons{display:flex;justify-content:flex-end;align-items:center;gap:8px}.right-data .btn{display:flex;width:40px;height:40px;padding:8px;justify-content:center;align-items:center;gap:4px;aspect-ratio:1/1;border-radius:8px;background:#fff}.dropdown{position:absolute;top:calc(100% + 8px);right:0;z-index:9999;min-width:max-content;white-space:nowrap}.options{display:flex;align-items:center;position:relative}\n"], dependencies: [{ kind: "component", type: ButtonSquaredTertiaryComponent, selector: "ius-button-squared-tertiary", inputs: ["disabled", "iconName"], outputs: ["buttonClicked"] }, { kind: "component", type: DropdownContextualMenuComponent, selector: "ius-dropdown-contextual-menu" }] }); }
|
|
37
42
|
}
|
|
38
43
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: UserCardComponent, decorators: [{
|
|
39
44
|
type: Component,
|
|
40
|
-
args: [{ selector: 'ius-user-card', standalone: true, imports: [ButtonSquaredTertiaryComponent, DropdownContextualMenuComponent], template: "<div class=\"general-container\">\r\n <div
|
|
45
|
+
args: [{ selector: 'ius-user-card', standalone: true, imports: [ButtonSquaredTertiaryComponent, DropdownContextualMenuComponent], template: "<div class=\"general-container\">\r\n <div class=\"container-card\" (mouseenter)=\"onMouseEnter()\" (mouseleave)=\"onMouseLeave()\" (click)=\"clickCard($event)\">\r\n <div class=\"data\">\r\n <div class=\"left-data\">\r\n @if (letterIcon && !image) {\r\n <div class=\"container-icon-letra\">\r\n <span>{{ letterIcon }}</span>\r\n </div>\r\n }@else if(image && !letterIcon){\r\n <div class=\"image-container\">\r\n <img [src]=\"image\" class=\"image\" />\r\n </div>\r\n }\r\n <div class=\"data-container\">\r\n <p class=\"state\" [class.on]=\"state\" [class.off]=\"state === false\">\r\n {{ stateLabel }}\r\n </p>\r\n <p class=\"name\">{{ name }}</p>\r\n <p class=\"role\">{{ role }}</p>\r\n </div>\r\n </div>\r\n <div class=\"right-data\">\r\n <div class=\"container\">\r\n @if (label1 && data1) {\r\n <div class=\"data-container\">\r\n <p class=\"title\">{{ label1 }}</p>\r\n <p class=\"data\">{{ data1 }}</p>\r\n </div>\r\n } @if (label2 && data2) {\r\n <div class=\"data-container\">\r\n <p class=\"title\">{{ label2 }}</p>\r\n <p class=\"data\">{{ data2 }}</p>\r\n </div>\r\n }\r\n </div>\r\n @if (hover) {\r\n <div class=\"buttons\">\r\n <div>\r\n <ius-button-squared-tertiary iconName=\"icon-edit\"\r\n (buttonClicked)=\"clickEdit($event)\"></ius-button-squared-tertiary>\r\n </div>\r\n <div>\r\n <ius-button-squared-tertiary iconName=\"icon-delete\"\r\n (buttonClicked)=\"clickDelete($event)\"></ius-button-squared-tertiary>\r\n </div>\r\n <div class=\"options\">\r\n <ius-button-squared-tertiary iconName=\"icon-more-vert\"\r\n (buttonClicked)=\"clickShowMore()\"></ius-button-squared-tertiary>\r\n @if (options) {\r\n <div class=\"dropdown\">\r\n <ius-dropdown-contextual-menu>\r\n <ng-content></ng-content>\r\n </ius-dropdown-contextual-menu>\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n }\r\n <div class=\"btn\">\r\n <ius-button-squared-tertiary iconName=\"icon-keyboard-arrow-right\"\r\n (buttonClicked)=\"clickCard($event)\"></ius-button-squared-tertiary>\r\n </div>\r\n </div>\r\n </div>\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-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-container{position:relative}.container-card{display:flex;padding:16px 32px;align-items:center;align-content:center;gap:12px;flex-wrap:wrap;border-radius:8px;border:1px solid #eaeaea;background:#fff}.container-card :hover{cursor:pointer}.data{display:flex;align-items:center;gap:40px;flex:1 0 0}.left-data{display:flex;min-width:280px;align-items:center;gap:8px;flex:1 0 0}.left-data .container-icon-letra{background-color:#dfe0ff;display:flex;width:20px;height:20px;padding:10px;margin-right:10px;justify-content:center;align-items:center;border-radius:100px;font-family:Rubik,sans-serif;font-size:.75rem;font-style:normal;font-weight:400;line-height:16px;letter-spacing:.24px}.left-data .icon-letra-edit{display:none}.left-data .container-icon-letra:hover{background-color:#6670c4!important}.left-data .container-icon-letra:hover>span{display:none}.left-data .container-icon-letra:hover .icon-letra-edit{display:block}.left-data .container-icon-letra span{color:#1b2678;text-align:center;font-size:18px;font-weight:500}.left-data .image-container{display:flex;align-items:center;gap:8px}.left-data .image-container .image{display:flex;width:32px;height:32px;justify-content:center;align-items:center;aspect-ratio:1/1;border-radius:100px;border:.5px solid #f5f5f5;background:#fff3}.left-data .data-container{display:flex;flex-direction:column;align-items:flex-start;gap:0;flex:1 0 0}.left-data .data-container p{margin:0}.left-data .data-container .name{display:flex;align-items:center;gap:10px;color:#333;font-family:Rubik,sans-serif;font-size:1rem;font-style:normal;font-weight:400;line-height:22px}.left-data .data-container .state{display:flex;align-items:center;gap:10px;align-self:stretch;color:#595959;font-family:Rubik,sans-serif;font-size:.75rem;font-style:normal;font-weight:400;line-height:16px;letter-spacing:.24px}.left-data .data-container .role{display:flex;align-items:center;gap:10px;align-self:stretch;color:#8c8c8c;font-family:Rubik,sans-serif;font-size:.875rem;font-style:normal;font-weight:400;line-height:20px;letter-spacing:.28px}.right-data{display:flex;align-items:center;gap:40px}.right-data p{margin:0}.right-data .container{display:flex;min-width:280px;justify-content:center;align-items:center;align-content:center;gap:40px;flex-wrap:wrap}.right-data .container .data-container{display:flex;flex-direction:column;align-items:flex-start;gap:4px}.right-data .container .data-container .title{display:flex;align-items:center;gap:10px;color:#8c8c8c;font-family:Rubik,sans-serif;font-size:.75rem;font-style:normal;font-weight:400;line-height:16px;letter-spacing:.24px;align-self:start}.right-data .container .data-container .data{display:flex;align-items:center;gap:10px;align-self:stretch;color:#595959;font-family:Rubik,sans-serif;font-size:.875rem;font-style:normal;font-weight:400;line-height:20px;letter-spacing:.28px}.right-data .buttons{display:flex;justify-content:flex-end;align-items:center;gap:8px}.right-data .btn{display:flex;width:40px;height:40px;padding:8px;justify-content:center;align-items:center;gap:4px;aspect-ratio:1/1;border-radius:8px;background:#fff}.dropdown{position:absolute;top:calc(100% + 8px);right:0;z-index:9999;min-width:max-content;white-space:nowrap}.options{display:flex;align-items:center;position:relative}\n"] }]
|
|
41
46
|
}], propDecorators: { image: [{
|
|
42
47
|
type: Input
|
|
43
48
|
}], state: [{
|
|
@@ -58,6 +63,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
58
63
|
type: Input
|
|
59
64
|
}], letterIcon: [{
|
|
60
65
|
type: Input
|
|
66
|
+
}], activeText: [{
|
|
67
|
+
type: Input
|
|
68
|
+
}], inactiveText: [{
|
|
69
|
+
type: Input
|
|
61
70
|
}], onClickEdit: [{
|
|
62
71
|
type: Output
|
|
63
72
|
}], onClickDelete: [{
|
|
@@ -65,4 +74,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
65
74
|
}], onClickCard: [{
|
|
66
75
|
type: Output
|
|
67
76
|
}] } });
|
|
68
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
77
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidXNlci1jYXJkLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2l1cy1kZXNpZ24tY29tcG9uZW50cy9zcmMvbGliL3VzZXItY2FyZC91c2VyLWNhcmQuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvaXVzLWRlc2lnbi1jb21wb25lbnRzL3NyYy9saWIvdXNlci1jYXJkL3VzZXItY2FyZC5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFFLFlBQVksRUFBRSxLQUFLLEVBQUUsTUFBTSxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBQ3ZFLE9BQU8sRUFBRSwrQkFBK0IsRUFBRSxNQUFNLDZCQUE2QixDQUFDO0FBQzlFLE9BQU8sRUFBRSw4QkFBOEIsRUFBRSxNQUFNLDRCQUE0QixDQUFBOztBQVMzRSxNQUFNLE9BQU8saUJBQWlCO0lBUDlCO1FBUUUsVUFBSyxHQUFZLEtBQUssQ0FBQztRQUN2QixZQUFPLEdBQVksS0FBSyxDQUFDO1FBWWhCLGVBQVUsR0FBVyxRQUFRLENBQUM7UUFDOUIsaUJBQVksR0FBVyxVQUFVLENBQUM7UUFFakMsZ0JBQVcsR0FBRyxJQUFJLFlBQVksRUFBTyxDQUFDO1FBQ3RDLGtCQUFhLEdBQUcsSUFBSSxZQUFZLEVBQU8sQ0FBQztRQUN4QyxnQkFBVyxHQUFHLElBQUksWUFBWSxFQUFPLENBQUM7S0FpQ2pEO0lBL0JDLFlBQVk7UUFDVixJQUFJLENBQUMsS0FBSyxHQUFHLElBQUksQ0FBQztJQUNwQixDQUFDO0lBRUQsWUFBWTtRQUNWLElBQUksQ0FBQyxLQUFLLEdBQUcsS0FBSyxDQUFDO1FBQ25CLElBQUksQ0FBQyxPQUFPLEdBQUcsS0FBSyxDQUFDO0lBQ3ZCLENBQUM7SUFFRCxTQUFTLENBQUMsS0FBWTtRQUNwQixLQUFLLENBQUMsd0JBQXdCLEVBQUUsQ0FBQztRQUNqQyxJQUFJLENBQUMsV0FBVyxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsTUFBTSxDQUFDLENBQUM7SUFDckMsQ0FBQztJQUVELFdBQVcsQ0FBQyxLQUFZO1FBQ3RCLEtBQUssQ0FBQyx3QkFBd0IsRUFBRSxDQUFDO1FBQ2pDLElBQUksQ0FBQyxhQUFhLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxNQUFNLENBQUMsQ0FBQztJQUN2QyxDQUFDO0lBRUQsU0FBUyxDQUFDLEtBQVk7UUFDcEIsS0FBSyxDQUFDLHdCQUF3QixFQUFFLENBQUM7UUFDakMsSUFBSSxDQUFDLFdBQVcsQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLE1BQU0sQ0FBQyxDQUFDO0lBQ3JDLENBQUM7SUFFRCxhQUFhO1FBQ1gsSUFBSSxDQUFDLE9BQU8sR0FBRyxDQUFDLElBQUksQ0FBQyxPQUFPLENBQUM7SUFDL0IsQ0FBQztJQUVELElBQUksVUFBVTtRQUNkLE9BQU8sSUFBSSxDQUFDLEtBQUssQ0FBQyxDQUFDLENBQUMsSUFBSSxDQUFDLFVBQVUsQ0FBQyxDQUFDLENBQUMsSUFBSSxDQUFDLFlBQVksQ0FBQztJQUMxRCxDQUFDOytHQW5EWSxpQkFBaUI7bUdBQWpCLGlCQUFpQiw4WkNYOUIsNGdGQWlFTSw2bEpEMURNLDhCQUE4QixzSUFBRSwrQkFBK0I7OzRGQUk5RCxpQkFBaUI7a0JBUDdCLFNBQVM7K0JBQ0UsZUFBZSxjQUNiLElBQUksV0FDUCxDQUFDLDhCQUE4QixFQUFFLCtCQUErQixDQUFDOzhCQVFqRSxLQUFLO3NCQUFiLEtBQUs7Z0JBQ0csS0FBSztzQkFBYixLQUFLO2dCQUNHLElBQUk7c0JBQVosS0FBSztnQkFDRyxJQUFJO3NCQUFaLEtBQUs7Z0JBQ0csTUFBTTtzQkFBZCxLQUFLO2dCQUNHLEtBQUs7c0JBQWIsS0FBSztnQkFDRyxNQUFNO3NCQUFkLEtBQUs7Z0JBQ0csS0FBSztzQkFBYixLQUFLO2dCQUNHLE1BQU07c0JBQWQsS0FBSztnQkFDRyxVQUFVO3NCQUFsQixLQUFLO2dCQUNHLFVBQVU7c0JBQWxCLEtBQUs7Z0JBQ0csWUFBWTtzQkFBcEIsS0FBSztnQkFFSSxXQUFXO3NCQUFwQixNQUFNO2dCQUNHLGFBQWE7c0JBQXRCLE1BQU07Z0JBQ0csV0FBVztzQkFBcEIsTUFBTSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCwgRXZlbnRFbWl0dGVyLCBJbnB1dCwgT3V0cHV0IH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XHJcbmltcG9ydCB7IERyb3Bkb3duQ29udGV4dHVhbE1lbnVDb21wb25lbnQgfSBmcm9tIFwiLi4vZHJvcGRvd24tY29udGV4dHVhbC1tZW51XCI7XHJcbmltcG9ydCB7IEJ1dHRvblNxdWFyZWRUZXJ0aWFyeUNvbXBvbmVudCB9IGZyb20gXCIuLi9idXR0b24tc3F1YXJlZC10ZXJ0aWFyeVwiXHJcblxyXG5AQ29tcG9uZW50KHtcclxuICBzZWxlY3RvcjogJ2l1cy11c2VyLWNhcmQnLFxyXG4gIHN0YW5kYWxvbmU6IHRydWUsXHJcbiAgaW1wb3J0czogW0J1dHRvblNxdWFyZWRUZXJ0aWFyeUNvbXBvbmVudCwgRHJvcGRvd25Db250ZXh0dWFsTWVudUNvbXBvbmVudF0sXHJcbiAgdGVtcGxhdGVVcmw6ICcuL3VzZXItY2FyZC5jb21wb25lbnQuaHRtbCcsXHJcbiAgc3R5bGVVcmw6ICcuL3VzZXItY2FyZC5jb21wb25lbnQuc2NzcydcclxufSlcclxuZXhwb3J0IGNsYXNzIFVzZXJDYXJkQ29tcG9uZW50IHtcclxuICBob3ZlcjogYm9vbGVhbiA9IGZhbHNlO1xyXG4gIG9wdGlvbnM6IGJvb2xlYW4gPSBmYWxzZTtcclxuXHJcbiAgQElucHV0KCkgaW1hZ2U/OiBzdHJpbmc7XHJcbiAgQElucHV0KCkgc3RhdGU/OiBib29sZWFuO1xyXG4gIEBJbnB1dCgpIG5hbWU/OiBzdHJpbmc7XHJcbiAgQElucHV0KCkgcm9sZT86IHN0cmluZztcclxuICBASW5wdXQoKSBsYWJlbDE/OiBzdHJpbmc7XHJcbiAgQElucHV0KCkgZGF0YTE/OiBzdHJpbmc7XHJcbiAgQElucHV0KCkgbGFiZWwyPzogc3RyaW5nO1xyXG4gIEBJbnB1dCgpIGRhdGEyPzogc3RyaW5nO1xyXG4gIEBJbnB1dCgpIHVzZXJJRD86IG51bWJlcjtcclxuICBASW5wdXQoKSBsZXR0ZXJJY29uPzogc3RyaW5nO1xyXG4gIEBJbnB1dCgpIGFjdGl2ZVRleHQ6IHN0cmluZyA9ICdBY3Rpdm8nO1xyXG4gIEBJbnB1dCgpIGluYWN0aXZlVGV4dDogc3RyaW5nID0gJ0luYWN0aXZvJztcclxuXHJcbiAgQE91dHB1dCgpIG9uQ2xpY2tFZGl0ID0gbmV3IEV2ZW50RW1pdHRlcjxhbnk+KCk7XHJcbiAgQE91dHB1dCgpIG9uQ2xpY2tEZWxldGUgPSBuZXcgRXZlbnRFbWl0dGVyPGFueT4oKTtcclxuICBAT3V0cHV0KCkgb25DbGlja0NhcmQgPSBuZXcgRXZlbnRFbWl0dGVyPGFueT4oKTtcclxuXHJcbiAgb25Nb3VzZUVudGVyKCkge1xyXG4gICAgdGhpcy5ob3ZlciA9IHRydWU7XHJcbiAgfVxyXG5cclxuICBvbk1vdXNlTGVhdmUoKSB7XHJcbiAgICB0aGlzLmhvdmVyID0gZmFsc2U7XHJcbiAgICB0aGlzLm9wdGlvbnMgPSBmYWxzZTtcclxuICB9XHJcblxyXG4gIGNsaWNrRWRpdChldmVudDogRXZlbnQpOiB2b2lkIHtcclxuICAgIGV2ZW50LnN0b3BJbW1lZGlhdGVQcm9wYWdhdGlvbigpO1xyXG4gICAgdGhpcy5vbkNsaWNrRWRpdC5lbWl0KHRoaXMudXNlcklEKTtcclxuICB9XHJcblxyXG4gIGNsaWNrRGVsZXRlKGV2ZW50OiBFdmVudCk6IHZvaWQge1xyXG4gICAgZXZlbnQuc3RvcEltbWVkaWF0ZVByb3BhZ2F0aW9uKCk7XHJcbiAgICB0aGlzLm9uQ2xpY2tEZWxldGUuZW1pdCh0aGlzLnVzZXJJRCk7XHJcbiAgfVxyXG5cclxuICBjbGlja0NhcmQoZXZlbnQ6IEV2ZW50KTogdm9pZCB7XHJcbiAgICBldmVudC5zdG9wSW1tZWRpYXRlUHJvcGFnYXRpb24oKTtcclxuICAgIHRoaXMub25DbGlja0NhcmQuZW1pdCh0aGlzLnVzZXJJRCk7XHJcbiAgfVxyXG5cclxuICBjbGlja1Nob3dNb3JlKCl7XHJcbiAgICB0aGlzLm9wdGlvbnMgPSAhdGhpcy5vcHRpb25zO1xyXG4gIH1cclxuXHJcbiAgZ2V0IHN0YXRlTGFiZWwoKTogc3RyaW5nIHtcclxuICByZXR1cm4gdGhpcy5zdGF0ZSA/IHRoaXMuYWN0aXZlVGV4dCA6IHRoaXMuaW5hY3RpdmVUZXh0O1xyXG59XHJcbn1cclxuIiwiPGRpdiBjbGFzcz1cImdlbmVyYWwtY29udGFpbmVyXCI+XHJcbiAgPGRpdiBjbGFzcz1cImNvbnRhaW5lci1jYXJkXCIgKG1vdXNlZW50ZXIpPVwib25Nb3VzZUVudGVyKClcIiAobW91c2VsZWF2ZSk9XCJvbk1vdXNlTGVhdmUoKVwiIChjbGljayk9XCJjbGlja0NhcmQoJGV2ZW50KVwiPlxyXG4gICAgPGRpdiBjbGFzcz1cImRhdGFcIj5cclxuICAgICAgPGRpdiBjbGFzcz1cImxlZnQtZGF0YVwiPlxyXG4gICAgICAgIEBpZiAobGV0dGVySWNvbiAmJiAhaW1hZ2UpIHtcclxuICAgICAgICA8ZGl2IGNsYXNzPVwiY29udGFpbmVyLWljb24tbGV0cmFcIj5cclxuICAgICAgICAgIDxzcGFuPnt7IGxldHRlckljb24gfX08L3NwYW4+XHJcbiAgICAgICAgPC9kaXY+XHJcbiAgICAgICAgfUBlbHNlIGlmKGltYWdlICYmICFsZXR0ZXJJY29uKXtcclxuICAgICAgICA8ZGl2IGNsYXNzPVwiaW1hZ2UtY29udGFpbmVyXCI+XHJcbiAgICAgICAgICA8aW1nIFtzcmNdPVwiaW1hZ2VcIiBjbGFzcz1cImltYWdlXCIgLz5cclxuICAgICAgICA8L2Rpdj5cclxuICAgICAgICB9XHJcbiAgICAgICAgPGRpdiBjbGFzcz1cImRhdGEtY29udGFpbmVyXCI+XHJcbiAgICAgICAgICA8cCBjbGFzcz1cInN0YXRlXCIgW2NsYXNzLm9uXT1cInN0YXRlXCIgW2NsYXNzLm9mZl09XCJzdGF0ZSA9PT0gZmFsc2VcIj5cclxuICAgICAgICAgICAge3sgc3RhdGVMYWJlbCB9fVxyXG4gICAgICAgICAgPC9wPlxyXG4gICAgICAgICAgPHAgY2xhc3M9XCJuYW1lXCI+e3sgbmFtZSB9fTwvcD5cclxuICAgICAgICAgIDxwIGNsYXNzPVwicm9sZVwiPnt7IHJvbGUgfX08L3A+XHJcbiAgICAgICAgPC9kaXY+XHJcbiAgICAgIDwvZGl2PlxyXG4gICAgICA8ZGl2IGNsYXNzPVwicmlnaHQtZGF0YVwiPlxyXG4gICAgICAgIDxkaXYgY2xhc3M9XCJjb250YWluZXJcIj5cclxuICAgICAgICAgIEBpZiAobGFiZWwxICYmIGRhdGExKSB7XHJcbiAgICAgICAgICA8ZGl2IGNsYXNzPVwiZGF0YS1jb250YWluZXJcIj5cclxuICAgICAgICAgICAgPHAgY2xhc3M9XCJ0aXRsZVwiPnt7IGxhYmVsMSB9fTwvcD5cclxuICAgICAgICAgICAgPHAgY2xhc3M9XCJkYXRhXCI+e3sgZGF0YTEgfX08L3A+XHJcbiAgICAgICAgICA8L2Rpdj5cclxuICAgICAgICAgIH0gQGlmIChsYWJlbDIgJiYgZGF0YTIpIHtcclxuICAgICAgICAgIDxkaXYgY2xhc3M9XCJkYXRhLWNvbnRhaW5lclwiPlxyXG4gICAgICAgICAgICA8cCBjbGFzcz1cInRpdGxlXCI+e3sgbGFiZWwyIH19PC9wPlxyXG4gICAgICAgICAgICA8cCBjbGFzcz1cImRhdGFcIj57eyBkYXRhMiB9fTwvcD5cclxuICAgICAgICAgIDwvZGl2PlxyXG4gICAgICAgICAgfVxyXG4gICAgICAgIDwvZGl2PlxyXG4gICAgICAgIEBpZiAoaG92ZXIpIHtcclxuICAgICAgICA8ZGl2IGNsYXNzPVwiYnV0dG9uc1wiPlxyXG4gICAgICAgICAgPGRpdj5cclxuICAgICAgICAgICAgPGl1cy1idXR0b24tc3F1YXJlZC10ZXJ0aWFyeSBpY29uTmFtZT1cImljb24tZWRpdFwiXHJcbiAgICAgICAgICAgICAgKGJ1dHRvbkNsaWNrZWQpPVwiY2xpY2tFZGl0KCRldmVudClcIj48L2l1cy1idXR0b24tc3F1YXJlZC10ZXJ0aWFyeT5cclxuICAgICAgICAgIDwvZGl2PlxyXG4gICAgICAgICAgPGRpdj5cclxuICAgICAgICAgICAgPGl1cy1idXR0b24tc3F1YXJlZC10ZXJ0aWFyeSBpY29uTmFtZT1cImljb24tZGVsZXRlXCJcclxuICAgICAgICAgICAgICAoYnV0dG9uQ2xpY2tlZCk9XCJjbGlja0RlbGV0ZSgkZXZlbnQpXCI+PC9pdXMtYnV0dG9uLXNxdWFyZWQtdGVydGlhcnk+XHJcbiAgICAgICAgICA8L2Rpdj5cclxuICAgICAgICAgIDxkaXYgY2xhc3M9XCJvcHRpb25zXCI+XHJcbiAgICAgICAgICAgIDxpdXMtYnV0dG9uLXNxdWFyZWQtdGVydGlhcnkgaWNvbk5hbWU9XCJpY29uLW1vcmUtdmVydFwiXHJcbiAgICAgICAgICAgICAgKGJ1dHRvbkNsaWNrZWQpPVwiY2xpY2tTaG93TW9yZSgpXCI+PC9pdXMtYnV0dG9uLXNxdWFyZWQtdGVydGlhcnk+XHJcbiAgICAgICAgICAgIEBpZiAob3B0aW9ucykge1xyXG4gICAgICAgICAgICA8ZGl2IGNsYXNzPVwiZHJvcGRvd25cIj5cclxuICAgICAgICAgICAgICA8aXVzLWRyb3Bkb3duLWNvbnRleHR1YWwtbWVudT5cclxuICAgICAgICAgICAgICAgIDxuZy1jb250ZW50PjwvbmctY29udGVudD5cclxuICAgICAgICAgICAgICA8L2l1cy1kcm9wZG93bi1jb250ZXh0dWFsLW1lbnU+XHJcbiAgICAgICAgICAgIDwvZGl2PlxyXG4gICAgICAgICAgICB9XHJcbiAgICAgICAgICA8L2Rpdj5cclxuICAgICAgICA8L2Rpdj5cclxuICAgICAgICB9XHJcbiAgICAgICAgPGRpdiBjbGFzcz1cImJ0blwiPlxyXG4gICAgICAgICAgPGl1cy1idXR0b24tc3F1YXJlZC10ZXJ0aWFyeSBpY29uTmFtZT1cImljb24ta2V5Ym9hcmQtYXJyb3ctcmlnaHRcIlxyXG4gICAgICAgICAgICAoYnV0dG9uQ2xpY2tlZCk9XCJjbGlja0NhcmQoJGV2ZW50KVwiPjwvaXVzLWJ1dHRvbi1zcXVhcmVkLXRlcnRpYXJ5PlxyXG4gICAgICAgIDwvZGl2PlxyXG4gICAgICA8L2Rpdj5cclxuICAgIDwvZGl2PlxyXG4gIDwvZGl2PlxyXG48L2Rpdj4iXX0=
|
|
@@ -4401,6 +4401,8 @@ class UserCardComponent {
|
|
|
4401
4401
|
constructor() {
|
|
4402
4402
|
this.hover = false;
|
|
4403
4403
|
this.options = false;
|
|
4404
|
+
this.activeText = 'Activo';
|
|
4405
|
+
this.inactiveText = 'Inactivo';
|
|
4404
4406
|
this.onClickEdit = new EventEmitter();
|
|
4405
4407
|
this.onClickDelete = new EventEmitter();
|
|
4406
4408
|
this.onClickCard = new EventEmitter();
|
|
@@ -4427,12 +4429,15 @@ class UserCardComponent {
|
|
|
4427
4429
|
clickShowMore() {
|
|
4428
4430
|
this.options = !this.options;
|
|
4429
4431
|
}
|
|
4432
|
+
get stateLabel() {
|
|
4433
|
+
return this.state ? this.activeText : this.inactiveText;
|
|
4434
|
+
}
|
|
4430
4435
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: UserCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4431
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: UserCardComponent, isStandalone: true, selector: "ius-user-card", inputs: { image: "image", state: "state", name: "name", role: "role", label1: "label1", data1: "data1", label2: "label2", data2: "data2", userID: "userID", letterIcon: "letterIcon" }, outputs: { onClickEdit: "onClickEdit", onClickDelete: "onClickDelete", onClickCard: "onClickCard" }, ngImport: i0, template: "<div class=\"general-container\">\r\n <div
|
|
4436
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: UserCardComponent, isStandalone: true, selector: "ius-user-card", inputs: { image: "image", state: "state", name: "name", role: "role", label1: "label1", data1: "data1", label2: "label2", data2: "data2", userID: "userID", letterIcon: "letterIcon", activeText: "activeText", inactiveText: "inactiveText" }, outputs: { onClickEdit: "onClickEdit", onClickDelete: "onClickDelete", onClickCard: "onClickCard" }, ngImport: i0, template: "<div class=\"general-container\">\r\n <div class=\"container-card\" (mouseenter)=\"onMouseEnter()\" (mouseleave)=\"onMouseLeave()\" (click)=\"clickCard($event)\">\r\n <div class=\"data\">\r\n <div class=\"left-data\">\r\n @if (letterIcon && !image) {\r\n <div class=\"container-icon-letra\">\r\n <span>{{ letterIcon }}</span>\r\n </div>\r\n }@else if(image && !letterIcon){\r\n <div class=\"image-container\">\r\n <img [src]=\"image\" class=\"image\" />\r\n </div>\r\n }\r\n <div class=\"data-container\">\r\n <p class=\"state\" [class.on]=\"state\" [class.off]=\"state === false\">\r\n {{ stateLabel }}\r\n </p>\r\n <p class=\"name\">{{ name }}</p>\r\n <p class=\"role\">{{ role }}</p>\r\n </div>\r\n </div>\r\n <div class=\"right-data\">\r\n <div class=\"container\">\r\n @if (label1 && data1) {\r\n <div class=\"data-container\">\r\n <p class=\"title\">{{ label1 }}</p>\r\n <p class=\"data\">{{ data1 }}</p>\r\n </div>\r\n } @if (label2 && data2) {\r\n <div class=\"data-container\">\r\n <p class=\"title\">{{ label2 }}</p>\r\n <p class=\"data\">{{ data2 }}</p>\r\n </div>\r\n }\r\n </div>\r\n @if (hover) {\r\n <div class=\"buttons\">\r\n <div>\r\n <ius-button-squared-tertiary iconName=\"icon-edit\"\r\n (buttonClicked)=\"clickEdit($event)\"></ius-button-squared-tertiary>\r\n </div>\r\n <div>\r\n <ius-button-squared-tertiary iconName=\"icon-delete\"\r\n (buttonClicked)=\"clickDelete($event)\"></ius-button-squared-tertiary>\r\n </div>\r\n <div class=\"options\">\r\n <ius-button-squared-tertiary iconName=\"icon-more-vert\"\r\n (buttonClicked)=\"clickShowMore()\"></ius-button-squared-tertiary>\r\n @if (options) {\r\n <div class=\"dropdown\">\r\n <ius-dropdown-contextual-menu>\r\n <ng-content></ng-content>\r\n </ius-dropdown-contextual-menu>\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n }\r\n <div class=\"btn\">\r\n <ius-button-squared-tertiary iconName=\"icon-keyboard-arrow-right\"\r\n (buttonClicked)=\"clickCard($event)\"></ius-button-squared-tertiary>\r\n </div>\r\n </div>\r\n </div>\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-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-container{position:relative}.container-card{display:flex;padding:16px 32px;align-items:center;align-content:center;gap:12px;flex-wrap:wrap;border-radius:8px;border:1px solid #eaeaea;background:#fff}.container-card :hover{cursor:pointer}.data{display:flex;align-items:center;gap:40px;flex:1 0 0}.left-data{display:flex;min-width:280px;align-items:center;gap:8px;flex:1 0 0}.left-data .container-icon-letra{background-color:#dfe0ff;display:flex;width:20px;height:20px;padding:10px;margin-right:10px;justify-content:center;align-items:center;border-radius:100px;font-family:Rubik,sans-serif;font-size:.75rem;font-style:normal;font-weight:400;line-height:16px;letter-spacing:.24px}.left-data .icon-letra-edit{display:none}.left-data .container-icon-letra:hover{background-color:#6670c4!important}.left-data .container-icon-letra:hover>span{display:none}.left-data .container-icon-letra:hover .icon-letra-edit{display:block}.left-data .container-icon-letra span{color:#1b2678;text-align:center;font-size:18px;font-weight:500}.left-data .image-container{display:flex;align-items:center;gap:8px}.left-data .image-container .image{display:flex;width:32px;height:32px;justify-content:center;align-items:center;aspect-ratio:1/1;border-radius:100px;border:.5px solid #f5f5f5;background:#fff3}.left-data .data-container{display:flex;flex-direction:column;align-items:flex-start;gap:0;flex:1 0 0}.left-data .data-container p{margin:0}.left-data .data-container .name{display:flex;align-items:center;gap:10px;color:#333;font-family:Rubik,sans-serif;font-size:1rem;font-style:normal;font-weight:400;line-height:22px}.left-data .data-container .state{display:flex;align-items:center;gap:10px;align-self:stretch;color:#595959;font-family:Rubik,sans-serif;font-size:.75rem;font-style:normal;font-weight:400;line-height:16px;letter-spacing:.24px}.left-data .data-container .role{display:flex;align-items:center;gap:10px;align-self:stretch;color:#8c8c8c;font-family:Rubik,sans-serif;font-size:.875rem;font-style:normal;font-weight:400;line-height:20px;letter-spacing:.28px}.right-data{display:flex;align-items:center;gap:40px}.right-data p{margin:0}.right-data .container{display:flex;min-width:280px;justify-content:center;align-items:center;align-content:center;gap:40px;flex-wrap:wrap}.right-data .container .data-container{display:flex;flex-direction:column;align-items:flex-start;gap:4px}.right-data .container .data-container .title{display:flex;align-items:center;gap:10px;color:#8c8c8c;font-family:Rubik,sans-serif;font-size:.75rem;font-style:normal;font-weight:400;line-height:16px;letter-spacing:.24px;align-self:start}.right-data .container .data-container .data{display:flex;align-items:center;gap:10px;align-self:stretch;color:#595959;font-family:Rubik,sans-serif;font-size:.875rem;font-style:normal;font-weight:400;line-height:20px;letter-spacing:.28px}.right-data .buttons{display:flex;justify-content:flex-end;align-items:center;gap:8px}.right-data .btn{display:flex;width:40px;height:40px;padding:8px;justify-content:center;align-items:center;gap:4px;aspect-ratio:1/1;border-radius:8px;background:#fff}.dropdown{position:absolute;top:calc(100% + 8px);right:0;z-index:9999;min-width:max-content;white-space:nowrap}.options{display:flex;align-items:center;position:relative}\n"], dependencies: [{ kind: "component", type: ButtonSquaredTertiaryComponent, selector: "ius-button-squared-tertiary", inputs: ["disabled", "iconName"], outputs: ["buttonClicked"] }, { kind: "component", type: DropdownContextualMenuComponent, selector: "ius-dropdown-contextual-menu" }] }); }
|
|
4432
4437
|
}
|
|
4433
4438
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: UserCardComponent, decorators: [{
|
|
4434
4439
|
type: Component,
|
|
4435
|
-
args: [{ selector: 'ius-user-card', standalone: true, imports: [ButtonSquaredTertiaryComponent, DropdownContextualMenuComponent], template: "<div class=\"general-container\">\r\n <div
|
|
4440
|
+
args: [{ selector: 'ius-user-card', standalone: true, imports: [ButtonSquaredTertiaryComponent, DropdownContextualMenuComponent], template: "<div class=\"general-container\">\r\n <div class=\"container-card\" (mouseenter)=\"onMouseEnter()\" (mouseleave)=\"onMouseLeave()\" (click)=\"clickCard($event)\">\r\n <div class=\"data\">\r\n <div class=\"left-data\">\r\n @if (letterIcon && !image) {\r\n <div class=\"container-icon-letra\">\r\n <span>{{ letterIcon }}</span>\r\n </div>\r\n }@else if(image && !letterIcon){\r\n <div class=\"image-container\">\r\n <img [src]=\"image\" class=\"image\" />\r\n </div>\r\n }\r\n <div class=\"data-container\">\r\n <p class=\"state\" [class.on]=\"state\" [class.off]=\"state === false\">\r\n {{ stateLabel }}\r\n </p>\r\n <p class=\"name\">{{ name }}</p>\r\n <p class=\"role\">{{ role }}</p>\r\n </div>\r\n </div>\r\n <div class=\"right-data\">\r\n <div class=\"container\">\r\n @if (label1 && data1) {\r\n <div class=\"data-container\">\r\n <p class=\"title\">{{ label1 }}</p>\r\n <p class=\"data\">{{ data1 }}</p>\r\n </div>\r\n } @if (label2 && data2) {\r\n <div class=\"data-container\">\r\n <p class=\"title\">{{ label2 }}</p>\r\n <p class=\"data\">{{ data2 }}</p>\r\n </div>\r\n }\r\n </div>\r\n @if (hover) {\r\n <div class=\"buttons\">\r\n <div>\r\n <ius-button-squared-tertiary iconName=\"icon-edit\"\r\n (buttonClicked)=\"clickEdit($event)\"></ius-button-squared-tertiary>\r\n </div>\r\n <div>\r\n <ius-button-squared-tertiary iconName=\"icon-delete\"\r\n (buttonClicked)=\"clickDelete($event)\"></ius-button-squared-tertiary>\r\n </div>\r\n <div class=\"options\">\r\n <ius-button-squared-tertiary iconName=\"icon-more-vert\"\r\n (buttonClicked)=\"clickShowMore()\"></ius-button-squared-tertiary>\r\n @if (options) {\r\n <div class=\"dropdown\">\r\n <ius-dropdown-contextual-menu>\r\n <ng-content></ng-content>\r\n </ius-dropdown-contextual-menu>\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n }\r\n <div class=\"btn\">\r\n <ius-button-squared-tertiary iconName=\"icon-keyboard-arrow-right\"\r\n (buttonClicked)=\"clickCard($event)\"></ius-button-squared-tertiary>\r\n </div>\r\n </div>\r\n </div>\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-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-container{position:relative}.container-card{display:flex;padding:16px 32px;align-items:center;align-content:center;gap:12px;flex-wrap:wrap;border-radius:8px;border:1px solid #eaeaea;background:#fff}.container-card :hover{cursor:pointer}.data{display:flex;align-items:center;gap:40px;flex:1 0 0}.left-data{display:flex;min-width:280px;align-items:center;gap:8px;flex:1 0 0}.left-data .container-icon-letra{background-color:#dfe0ff;display:flex;width:20px;height:20px;padding:10px;margin-right:10px;justify-content:center;align-items:center;border-radius:100px;font-family:Rubik,sans-serif;font-size:.75rem;font-style:normal;font-weight:400;line-height:16px;letter-spacing:.24px}.left-data .icon-letra-edit{display:none}.left-data .container-icon-letra:hover{background-color:#6670c4!important}.left-data .container-icon-letra:hover>span{display:none}.left-data .container-icon-letra:hover .icon-letra-edit{display:block}.left-data .container-icon-letra span{color:#1b2678;text-align:center;font-size:18px;font-weight:500}.left-data .image-container{display:flex;align-items:center;gap:8px}.left-data .image-container .image{display:flex;width:32px;height:32px;justify-content:center;align-items:center;aspect-ratio:1/1;border-radius:100px;border:.5px solid #f5f5f5;background:#fff3}.left-data .data-container{display:flex;flex-direction:column;align-items:flex-start;gap:0;flex:1 0 0}.left-data .data-container p{margin:0}.left-data .data-container .name{display:flex;align-items:center;gap:10px;color:#333;font-family:Rubik,sans-serif;font-size:1rem;font-style:normal;font-weight:400;line-height:22px}.left-data .data-container .state{display:flex;align-items:center;gap:10px;align-self:stretch;color:#595959;font-family:Rubik,sans-serif;font-size:.75rem;font-style:normal;font-weight:400;line-height:16px;letter-spacing:.24px}.left-data .data-container .role{display:flex;align-items:center;gap:10px;align-self:stretch;color:#8c8c8c;font-family:Rubik,sans-serif;font-size:.875rem;font-style:normal;font-weight:400;line-height:20px;letter-spacing:.28px}.right-data{display:flex;align-items:center;gap:40px}.right-data p{margin:0}.right-data .container{display:flex;min-width:280px;justify-content:center;align-items:center;align-content:center;gap:40px;flex-wrap:wrap}.right-data .container .data-container{display:flex;flex-direction:column;align-items:flex-start;gap:4px}.right-data .container .data-container .title{display:flex;align-items:center;gap:10px;color:#8c8c8c;font-family:Rubik,sans-serif;font-size:.75rem;font-style:normal;font-weight:400;line-height:16px;letter-spacing:.24px;align-self:start}.right-data .container .data-container .data{display:flex;align-items:center;gap:10px;align-self:stretch;color:#595959;font-family:Rubik,sans-serif;font-size:.875rem;font-style:normal;font-weight:400;line-height:20px;letter-spacing:.28px}.right-data .buttons{display:flex;justify-content:flex-end;align-items:center;gap:8px}.right-data .btn{display:flex;width:40px;height:40px;padding:8px;justify-content:center;align-items:center;gap:4px;aspect-ratio:1/1;border-radius:8px;background:#fff}.dropdown{position:absolute;top:calc(100% + 8px);right:0;z-index:9999;min-width:max-content;white-space:nowrap}.options{display:flex;align-items:center;position:relative}\n"] }]
|
|
4436
4441
|
}], propDecorators: { image: [{
|
|
4437
4442
|
type: Input
|
|
4438
4443
|
}], state: [{
|
|
@@ -4453,6 +4458,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
4453
4458
|
type: Input
|
|
4454
4459
|
}], letterIcon: [{
|
|
4455
4460
|
type: Input
|
|
4461
|
+
}], activeText: [{
|
|
4462
|
+
type: Input
|
|
4463
|
+
}], inactiveText: [{
|
|
4464
|
+
type: Input
|
|
4456
4465
|
}], onClickEdit: [{
|
|
4457
4466
|
type: Output
|
|
4458
4467
|
}], onClickDelete: [{
|