@litigiovirtual/ius-design-components 1.0.97 → 1.0.98
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.
|
@@ -8,6 +8,7 @@ export class UserCardComponent {
|
|
|
8
8
|
this.options = false;
|
|
9
9
|
this.activeText = 'Activo';
|
|
10
10
|
this.inactiveText = 'Inactivo';
|
|
11
|
+
this.showActions = true;
|
|
11
12
|
this.onClickEdit = new EventEmitter();
|
|
12
13
|
this.onClickDelete = new EventEmitter();
|
|
13
14
|
this.onClickCard = new EventEmitter();
|
|
@@ -39,11 +40,11 @@ export class UserCardComponent {
|
|
|
39
40
|
return this.state ? this.activeText : this.inactiveText;
|
|
40
41
|
}
|
|
41
42
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: UserCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
42
|
-
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($event)\"></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 .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" }] }); }
|
|
43
|
+
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", showActions: "showActions" }, 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 && showActions) {\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($event)\"></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 .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" }] }); }
|
|
43
44
|
}
|
|
44
45
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: UserCardComponent, decorators: [{
|
|
45
46
|
type: Component,
|
|
46
|
-
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($event)\"></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 .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"] }]
|
|
47
|
+
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 && showActions) {\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($event)\"></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 .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"] }]
|
|
47
48
|
}], propDecorators: { image: [{
|
|
48
49
|
type: Input
|
|
49
50
|
}], state: [{
|
|
@@ -68,6 +69,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
68
69
|
type: Input
|
|
69
70
|
}], inactiveText: [{
|
|
70
71
|
type: Input
|
|
72
|
+
}], showActions: [{
|
|
73
|
+
type: Input
|
|
71
74
|
}], onClickEdit: [{
|
|
72
75
|
type: Output
|
|
73
76
|
}], onClickDelete: [{
|
|
@@ -75,4 +78,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
75
78
|
}], onClickCard: [{
|
|
76
79
|
type: Output
|
|
77
80
|
}] } });
|
|
78
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
81
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidXNlci1jYXJkLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2l1cy1kZXNpZ24tY29tcG9uZW50cy9zcmMvbGliL3VzZXItY2FyZC91c2VyLWNhcmQuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvaXVzLWRlc2lnbi1jb21wb25lbnRzL3NyYy9saWIvdXNlci1jYXJkL3VzZXItY2FyZC5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFFLFlBQVksRUFBRSxLQUFLLEVBQUUsTUFBTSxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBQ3ZFLE9BQU8sRUFBRSwrQkFBK0IsRUFBRSxNQUFNLDZCQUE2QixDQUFDO0FBQzlFLE9BQU8sRUFBRSw4QkFBOEIsRUFBRSxNQUFNLDRCQUE0QixDQUFBOztBQVMzRSxNQUFNLE9BQU8saUJBQWlCO0lBUDlCO1FBUUUsVUFBSyxHQUFZLEtBQUssQ0FBQztRQUN2QixZQUFPLEdBQVksS0FBSyxDQUFDO1FBWWhCLGVBQVUsR0FBVyxRQUFRLENBQUM7UUFDOUIsaUJBQVksR0FBVyxVQUFVLENBQUM7UUFDbEMsZ0JBQVcsR0FBWSxJQUFJLENBQUM7UUFFM0IsZ0JBQVcsR0FBRyxJQUFJLFlBQVksRUFBTyxDQUFDO1FBQ3RDLGtCQUFhLEdBQUcsSUFBSSxZQUFZLEVBQU8sQ0FBQztRQUN4QyxnQkFBVyxHQUFHLElBQUksWUFBWSxFQUFPLENBQUM7S0FrQ2pEO0lBaENDLFlBQVk7UUFDVixJQUFJLENBQUMsS0FBSyxHQUFHLElBQUksQ0FBQztJQUNwQixDQUFDO0lBRUQsWUFBWTtRQUNWLElBQUksQ0FBQyxLQUFLLEdBQUcsS0FBSyxDQUFDO1FBQ25CLElBQUksQ0FBQyxPQUFPLEdBQUcsS0FBSyxDQUFDO0lBQ3ZCLENBQUM7SUFFRCxTQUFTLENBQUMsS0FBWTtRQUNwQixLQUFLLENBQUMsd0JBQXdCLEVBQUUsQ0FBQztRQUNqQyxJQUFJLENBQUMsV0FBVyxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsTUFBTSxDQUFDLENBQUM7SUFDckMsQ0FBQztJQUVELFdBQVcsQ0FBQyxLQUFZO1FBQ3RCLEtBQUssQ0FBQyx3QkFBd0IsRUFBRSxDQUFDO1FBQ2pDLElBQUksQ0FBQyxhQUFhLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxNQUFNLENBQUMsQ0FBQztJQUN2QyxDQUFDO0lBRUQsU0FBUyxDQUFDLEtBQVk7UUFDcEIsS0FBSyxDQUFDLHdCQUF3QixFQUFFLENBQUM7UUFDakMsSUFBSSxDQUFDLFdBQVcsQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLE1BQU0sQ0FBQyxDQUFDO0lBQ3JDLENBQUM7SUFFRCxhQUFhLENBQUMsS0FBWTtRQUN4QixLQUFLLENBQUMsd0JBQXdCLEVBQUUsQ0FBQztRQUNqQyxJQUFJLENBQUMsT0FBTyxHQUFHLENBQUMsSUFBSSxDQUFDLE9BQU8sQ0FBQztJQUMvQixDQUFDO0lBRUQsSUFBSSxVQUFVO1FBQ2QsT0FBTyxJQUFJLENBQUMsS0FBSyxDQUFDLENBQUMsQ0FBQyxJQUFJLENBQUMsVUFBVSxDQUFDLENBQUMsQ0FBQyxJQUFJLENBQUMsWUFBWSxDQUFDO0lBQzFELENBQUM7K0dBckRZLGlCQUFpQjttR0FBakIsaUJBQWlCLDBiQ1g5QixpaUZBaUVNLG9qSkQxRE0sOEJBQThCLHNJQUFFLCtCQUErQjs7NEZBSTlELGlCQUFpQjtrQkFQN0IsU0FBUzsrQkFDRSxlQUFlLGNBQ2IsSUFBSSxXQUNQLENBQUMsOEJBQThCLEVBQUUsK0JBQStCLENBQUM7OEJBUWpFLEtBQUs7c0JBQWIsS0FBSztnQkFDRyxLQUFLO3NCQUFiLEtBQUs7Z0JBQ0csSUFBSTtzQkFBWixLQUFLO2dCQUNHLElBQUk7c0JBQVosS0FBSztnQkFDRyxNQUFNO3NCQUFkLEtBQUs7Z0JBQ0csS0FBSztzQkFBYixLQUFLO2dCQUNHLE1BQU07c0JBQWQsS0FBSztnQkFDRyxLQUFLO3NCQUFiLEtBQUs7Z0JBQ0csTUFBTTtzQkFBZCxLQUFLO2dCQUNHLFVBQVU7c0JBQWxCLEtBQUs7Z0JBQ0csVUFBVTtzQkFBbEIsS0FBSztnQkFDRyxZQUFZO3NCQUFwQixLQUFLO2dCQUNHLFdBQVc7c0JBQW5CLEtBQUs7Z0JBRUksV0FBVztzQkFBcEIsTUFBTTtnQkFDRyxhQUFhO3NCQUF0QixNQUFNO2dCQUNHLFdBQVc7c0JBQXBCLE1BQU0iLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQsIEV2ZW50RW1pdHRlciwgSW5wdXQsIE91dHB1dCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xyXG5pbXBvcnQgeyBEcm9wZG93bkNvbnRleHR1YWxNZW51Q29tcG9uZW50IH0gZnJvbSBcIi4uL2Ryb3Bkb3duLWNvbnRleHR1YWwtbWVudVwiO1xyXG5pbXBvcnQgeyBCdXR0b25TcXVhcmVkVGVydGlhcnlDb21wb25lbnQgfSBmcm9tIFwiLi4vYnV0dG9uLXNxdWFyZWQtdGVydGlhcnlcIlxyXG5cclxuQENvbXBvbmVudCh7XHJcbiAgc2VsZWN0b3I6ICdpdXMtdXNlci1jYXJkJyxcclxuICBzdGFuZGFsb25lOiB0cnVlLFxyXG4gIGltcG9ydHM6IFtCdXR0b25TcXVhcmVkVGVydGlhcnlDb21wb25lbnQsIERyb3Bkb3duQ29udGV4dHVhbE1lbnVDb21wb25lbnRdLFxyXG4gIHRlbXBsYXRlVXJsOiAnLi91c2VyLWNhcmQuY29tcG9uZW50Lmh0bWwnLFxyXG4gIHN0eWxlVXJsOiAnLi91c2VyLWNhcmQuY29tcG9uZW50LnNjc3MnXHJcbn0pXHJcbmV4cG9ydCBjbGFzcyBVc2VyQ2FyZENvbXBvbmVudCB7XHJcbiAgaG92ZXI6IGJvb2xlYW4gPSBmYWxzZTtcclxuICBvcHRpb25zOiBib29sZWFuID0gZmFsc2U7XHJcblxyXG4gIEBJbnB1dCgpIGltYWdlPzogc3RyaW5nO1xyXG4gIEBJbnB1dCgpIHN0YXRlPzogYm9vbGVhbjtcclxuICBASW5wdXQoKSBuYW1lPzogc3RyaW5nO1xyXG4gIEBJbnB1dCgpIHJvbGU/OiBzdHJpbmc7XHJcbiAgQElucHV0KCkgbGFiZWwxPzogc3RyaW5nO1xyXG4gIEBJbnB1dCgpIGRhdGExPzogc3RyaW5nO1xyXG4gIEBJbnB1dCgpIGxhYmVsMj86IHN0cmluZztcclxuICBASW5wdXQoKSBkYXRhMj86IHN0cmluZztcclxuICBASW5wdXQoKSB1c2VySUQ/OiBudW1iZXI7XHJcbiAgQElucHV0KCkgbGV0dGVySWNvbj86IHN0cmluZztcclxuICBASW5wdXQoKSBhY3RpdmVUZXh0OiBzdHJpbmcgPSAnQWN0aXZvJztcclxuICBASW5wdXQoKSBpbmFjdGl2ZVRleHQ6IHN0cmluZyA9ICdJbmFjdGl2byc7XHJcbiAgQElucHV0KCkgc2hvd0FjdGlvbnM6IGJvb2xlYW4gPSB0cnVlO1xyXG5cclxuICBAT3V0cHV0KCkgb25DbGlja0VkaXQgPSBuZXcgRXZlbnRFbWl0dGVyPGFueT4oKTtcclxuICBAT3V0cHV0KCkgb25DbGlja0RlbGV0ZSA9IG5ldyBFdmVudEVtaXR0ZXI8YW55PigpO1xyXG4gIEBPdXRwdXQoKSBvbkNsaWNrQ2FyZCA9IG5ldyBFdmVudEVtaXR0ZXI8YW55PigpO1xyXG5cclxuICBvbk1vdXNlRW50ZXIoKSB7XHJcbiAgICB0aGlzLmhvdmVyID0gdHJ1ZTtcclxuICB9XHJcblxyXG4gIG9uTW91c2VMZWF2ZSgpIHtcclxuICAgIHRoaXMuaG92ZXIgPSBmYWxzZTtcclxuICAgIHRoaXMub3B0aW9ucyA9IGZhbHNlO1xyXG4gIH1cclxuXHJcbiAgY2xpY2tFZGl0KGV2ZW50OiBFdmVudCk6IHZvaWQge1xyXG4gICAgZXZlbnQuc3RvcEltbWVkaWF0ZVByb3BhZ2F0aW9uKCk7XHJcbiAgICB0aGlzLm9uQ2xpY2tFZGl0LmVtaXQodGhpcy51c2VySUQpO1xyXG4gIH1cclxuXHJcbiAgY2xpY2tEZWxldGUoZXZlbnQ6IEV2ZW50KTogdm9pZCB7XHJcbiAgICBldmVudC5zdG9wSW1tZWRpYXRlUHJvcGFnYXRpb24oKTtcclxuICAgIHRoaXMub25DbGlja0RlbGV0ZS5lbWl0KHRoaXMudXNlcklEKTtcclxuICB9XHJcblxyXG4gIGNsaWNrQ2FyZChldmVudDogRXZlbnQpOiB2b2lkIHtcclxuICAgIGV2ZW50LnN0b3BJbW1lZGlhdGVQcm9wYWdhdGlvbigpO1xyXG4gICAgdGhpcy5vbkNsaWNrQ2FyZC5lbWl0KHRoaXMudXNlcklEKTtcclxuICB9XHJcblxyXG4gIGNsaWNrU2hvd01vcmUoZXZlbnQ6IEV2ZW50KTogdm9pZCB7XHJcbiAgICBldmVudC5zdG9wSW1tZWRpYXRlUHJvcGFnYXRpb24oKTtcclxuICAgIHRoaXMub3B0aW9ucyA9ICF0aGlzLm9wdGlvbnM7XHJcbiAgfVxyXG5cclxuICBnZXQgc3RhdGVMYWJlbCgpOiBzdHJpbmcge1xyXG4gIHJldHVybiB0aGlzLnN0YXRlID8gdGhpcy5hY3RpdmVUZXh0IDogdGhpcy5pbmFjdGl2ZVRleHQ7XHJcbn1cclxufVxyXG4iLCI8ZGl2IGNsYXNzPVwiZ2VuZXJhbC1jb250YWluZXJcIj5cclxuICA8ZGl2IGNsYXNzPVwiY29udGFpbmVyLWNhcmRcIiAobW91c2VlbnRlcik9XCJvbk1vdXNlRW50ZXIoKVwiIChtb3VzZWxlYXZlKT1cIm9uTW91c2VMZWF2ZSgpXCIgKGNsaWNrKT1cImNsaWNrQ2FyZCgkZXZlbnQpXCI+XHJcbiAgICA8ZGl2IGNsYXNzPVwiZGF0YVwiPlxyXG4gICAgICA8ZGl2IGNsYXNzPVwibGVmdC1kYXRhXCI+XHJcbiAgICAgICAgQGlmIChsZXR0ZXJJY29uICYmICFpbWFnZSkge1xyXG4gICAgICAgIDxkaXYgY2xhc3M9XCJjb250YWluZXItaWNvbi1sZXRyYVwiPlxyXG4gICAgICAgICAgPHNwYW4+e3sgbGV0dGVySWNvbiB9fTwvc3Bhbj5cclxuICAgICAgICA8L2Rpdj5cclxuICAgICAgICB9QGVsc2UgaWYoaW1hZ2UgJiYgIWxldHRlckljb24pe1xyXG4gICAgICAgIDxkaXYgY2xhc3M9XCJpbWFnZS1jb250YWluZXJcIj5cclxuICAgICAgICAgIDxpbWcgW3NyY109XCJpbWFnZVwiIGNsYXNzPVwiaW1hZ2VcIiAvPlxyXG4gICAgICAgIDwvZGl2PlxyXG4gICAgICAgIH1cclxuICAgICAgICA8ZGl2IGNsYXNzPVwiZGF0YS1jb250YWluZXJcIj5cclxuICAgICAgICAgIDxwIGNsYXNzPVwic3RhdGVcIiBbY2xhc3Mub25dPVwic3RhdGVcIiBbY2xhc3Mub2ZmXT1cInN0YXRlID09PSBmYWxzZVwiPlxyXG4gICAgICAgICAgICB7eyBzdGF0ZUxhYmVsIH19XHJcbiAgICAgICAgICA8L3A+XHJcbiAgICAgICAgICA8cCBjbGFzcz1cIm5hbWVcIj57eyBuYW1lIH19PC9wPlxyXG4gICAgICAgICAgPHAgY2xhc3M9XCJyb2xlXCI+e3sgcm9sZSB9fTwvcD5cclxuICAgICAgICA8L2Rpdj5cclxuICAgICAgPC9kaXY+XHJcbiAgICAgIDxkaXYgY2xhc3M9XCJyaWdodC1kYXRhXCI+XHJcbiAgICAgICAgPGRpdiBjbGFzcz1cImNvbnRhaW5lclwiPlxyXG4gICAgICAgICAgQGlmIChsYWJlbDEgJiYgZGF0YTEpIHtcclxuICAgICAgICAgIDxkaXYgY2xhc3M9XCJkYXRhLWNvbnRhaW5lclwiPlxyXG4gICAgICAgICAgICA8cCBjbGFzcz1cInRpdGxlXCI+e3sgbGFiZWwxIH19PC9wPlxyXG4gICAgICAgICAgICA8cCBjbGFzcz1cImRhdGFcIj57eyBkYXRhMSB9fTwvcD5cclxuICAgICAgICAgIDwvZGl2PlxyXG4gICAgICAgICAgfSBAaWYgKGxhYmVsMiAmJiBkYXRhMikge1xyXG4gICAgICAgICAgPGRpdiBjbGFzcz1cImRhdGEtY29udGFpbmVyXCI+XHJcbiAgICAgICAgICAgIDxwIGNsYXNzPVwidGl0bGVcIj57eyBsYWJlbDIgfX08L3A+XHJcbiAgICAgICAgICAgIDxwIGNsYXNzPVwiZGF0YVwiPnt7IGRhdGEyIH19PC9wPlxyXG4gICAgICAgICAgPC9kaXY+XHJcbiAgICAgICAgICB9XHJcbiAgICAgICAgPC9kaXY+XHJcbiAgICAgICAgQGlmIChob3ZlciAmJiBzaG93QWN0aW9ucykge1xyXG4gICAgICAgIDxkaXYgY2xhc3M9XCJidXR0b25zXCI+XHJcbiAgICAgICAgICA8ZGl2PlxyXG4gICAgICAgICAgICA8aXVzLWJ1dHRvbi1zcXVhcmVkLXRlcnRpYXJ5IGljb25OYW1lPVwiaWNvbi1lZGl0XCJcclxuICAgICAgICAgICAgICAoYnV0dG9uQ2xpY2tlZCk9XCJjbGlja0VkaXQoJGV2ZW50KVwiPjwvaXVzLWJ1dHRvbi1zcXVhcmVkLXRlcnRpYXJ5PlxyXG4gICAgICAgICAgPC9kaXY+XHJcbiAgICAgICAgICA8ZGl2PlxyXG4gICAgICAgICAgICA8aXVzLWJ1dHRvbi1zcXVhcmVkLXRlcnRpYXJ5IGljb25OYW1lPVwiaWNvbi1kZWxldGVcIlxyXG4gICAgICAgICAgICAgIChidXR0b25DbGlja2VkKT1cImNsaWNrRGVsZXRlKCRldmVudClcIj48L2l1cy1idXR0b24tc3F1YXJlZC10ZXJ0aWFyeT5cclxuICAgICAgICAgIDwvZGl2PlxyXG4gICAgICAgICAgPGRpdiBjbGFzcz1cIm9wdGlvbnNcIj5cclxuICAgICAgICAgICAgPGl1cy1idXR0b24tc3F1YXJlZC10ZXJ0aWFyeSBpY29uTmFtZT1cImljb24tbW9yZS12ZXJ0XCJcclxuICAgICAgICAgICAgICAoYnV0dG9uQ2xpY2tlZCk9XCJjbGlja1Nob3dNb3JlKCRldmVudClcIj48L2l1cy1idXR0b24tc3F1YXJlZC10ZXJ0aWFyeT5cclxuICAgICAgICAgICAgQGlmIChvcHRpb25zKSB7XHJcbiAgICAgICAgICAgIDxkaXYgY2xhc3M9XCJkcm9wZG93blwiPlxyXG4gICAgICAgICAgICAgIDxpdXMtZHJvcGRvd24tY29udGV4dHVhbC1tZW51PlxyXG4gICAgICAgICAgICAgICAgPG5nLWNvbnRlbnQ+PC9uZy1jb250ZW50PlxyXG4gICAgICAgICAgICAgIDwvaXVzLWRyb3Bkb3duLWNvbnRleHR1YWwtbWVudT5cclxuICAgICAgICAgICAgPC9kaXY+XHJcbiAgICAgICAgICAgIH1cclxuICAgICAgICAgIDwvZGl2PlxyXG4gICAgICAgIDwvZGl2PlxyXG4gICAgICAgIH1cclxuICAgICAgICA8ZGl2IGNsYXNzPVwiYnRuXCI+XHJcbiAgICAgICAgICA8aXVzLWJ1dHRvbi1zcXVhcmVkLXRlcnRpYXJ5IGljb25OYW1lPVwiaWNvbi1rZXlib2FyZC1hcnJvdy1yaWdodFwiXHJcbiAgICAgICAgICAgIChidXR0b25DbGlja2VkKT1cImNsaWNrQ2FyZCgkZXZlbnQpXCI+PC9pdXMtYnV0dG9uLXNxdWFyZWQtdGVydGlhcnk+XHJcbiAgICAgICAgPC9kaXY+XHJcbiAgICAgIDwvZGl2PlxyXG4gICAgPC9kaXY+XHJcbiAgPC9kaXY+XHJcbjwvZGl2PiJdfQ==
|
|
@@ -4469,6 +4469,7 @@ class UserCardComponent {
|
|
|
4469
4469
|
this.options = false;
|
|
4470
4470
|
this.activeText = 'Activo';
|
|
4471
4471
|
this.inactiveText = 'Inactivo';
|
|
4472
|
+
this.showActions = true;
|
|
4472
4473
|
this.onClickEdit = new EventEmitter();
|
|
4473
4474
|
this.onClickDelete = new EventEmitter();
|
|
4474
4475
|
this.onClickCard = new EventEmitter();
|
|
@@ -4500,11 +4501,11 @@ class UserCardComponent {
|
|
|
4500
4501
|
return this.state ? this.activeText : this.inactiveText;
|
|
4501
4502
|
}
|
|
4502
4503
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: UserCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4503
|
-
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($event)\"></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 .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" }] }); }
|
|
4504
|
+
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", showActions: "showActions" }, 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 && showActions) {\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($event)\"></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 .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" }] }); }
|
|
4504
4505
|
}
|
|
4505
4506
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: UserCardComponent, decorators: [{
|
|
4506
4507
|
type: Component,
|
|
4507
|
-
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($event)\"></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 .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"] }]
|
|
4508
|
+
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 && showActions) {\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($event)\"></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 .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"] }]
|
|
4508
4509
|
}], propDecorators: { image: [{
|
|
4509
4510
|
type: Input
|
|
4510
4511
|
}], state: [{
|
|
@@ -4529,6 +4530,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
4529
4530
|
type: Input
|
|
4530
4531
|
}], inactiveText: [{
|
|
4531
4532
|
type: Input
|
|
4533
|
+
}], showActions: [{
|
|
4534
|
+
type: Input
|
|
4532
4535
|
}], onClickEdit: [{
|
|
4533
4536
|
type: Output
|
|
4534
4537
|
}], onClickDelete: [{
|