@litigiovirtual/ius-design-components 1.0.82 → 1.0.83
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.
|
@@ -33,11 +33,11 @@ export class UserCardComponent {
|
|
|
33
33
|
this.options = !this.options;
|
|
34
34
|
}
|
|
35
35
|
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\r\n class=\"container-card\"\r\n (mouseenter)=\"onMouseEnter()\"\r\n (mouseleave)=\"onMouseLeave()\"\r\n (click)=\"clickCard($event)\"\r\n >\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\">{{ state }}</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\r\n iconName=\"icon-edit\"\r\n (buttonClicked)=\"clickEdit($event)\"\r\n ></ius-button-squared-tertiary>\r\n </div>\r\n <div>\r\n <ius-button-squared-tertiary\r\n iconName=\"icon-delete\"\r\n (buttonClicked)=\"clickDelete($event)\"\r\n ></ius-button-squared-tertiary>\r\n </div>\r\n <div class=\"options\">\r\n <ius-button-squared-tertiary\r\n iconName=\"icon-more-vert\"\r\n (buttonClicked)=\"clickShowMore()\"\r\n ></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\r\n iconName=\"icon-keyboard-arrow-right\"\r\n (buttonClicked)=\"clickCard($event)\"\r\n ></ius-button-squared-tertiary>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n", styles: [".h1{font-family:Roboto,sans-serif;font-size:2.375rem;font-weight:500;line-height:46px}.h2{font-family:Roboto,sans-serif;font-size:1.875rem;font-weight:700;line-height:38px}.h3{font-family:Roboto,sans-serif;font-size:1.5rem;font-weight:500;line-height:32px}.h4{font-family:Roboto,sans-serif;font-size:1.25rem;font-weight:700;line-height:26px}.h5{font-family:Roboto,sans-serif;font-size:1.125rem;font-weight:500;line-height:24px;letter-spacing:.18px}.label-large{font-family:Roboto,sans-serif;font-size:1rem;font-weight:500;line-height:22px}.body-large{font-family:Rubik,sans-serif;font-size:1rem;font-weight:400;line-height:22px}.label-base{font-family:Rubik,sans-serif;font-size:.875rem;font-weight:500;line-height:20px;letter-spacing:.28px}.body-base{font-family:Rubik,sans-serif;font-size:.875rem;font-weight:400;line-height:20px;font-style:italic;letter-spacing:.28px}.body-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;
|
|
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\r\n class=\"container-card\"\r\n (mouseenter)=\"onMouseEnter()\"\r\n (mouseleave)=\"onMouseLeave()\"\r\n (click)=\"clickCard($event)\"\r\n >\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\">{{ state }}</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\r\n iconName=\"icon-edit\"\r\n (buttonClicked)=\"clickEdit($event)\"\r\n ></ius-button-squared-tertiary>\r\n </div>\r\n <div>\r\n <ius-button-squared-tertiary\r\n iconName=\"icon-delete\"\r\n (buttonClicked)=\"clickDelete($event)\"\r\n ></ius-button-squared-tertiary>\r\n </div>\r\n <div class=\"options\">\r\n <ius-button-squared-tertiary\r\n iconName=\"icon-more-vert\"\r\n (buttonClicked)=\"clickShowMore()\"\r\n ></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\r\n iconName=\"icon-keyboard-arrow-right\"\r\n (buttonClicked)=\"clickCard($event)\"\r\n ></ius-button-squared-tertiary>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n", styles: [".h1{font-family:Roboto,sans-serif;font-size:2.375rem;font-weight:500;line-height:46px}.h2{font-family:Roboto,sans-serif;font-size:1.875rem;font-weight:700;line-height:38px}.h3{font-family:Roboto,sans-serif;font-size:1.5rem;font-weight:500;line-height:32px}.h4{font-family:Roboto,sans-serif;font-size:1.25rem;font-weight:700;line-height:26px}.h5{font-family:Roboto,sans-serif;font-size:1.125rem;font-weight:500;line-height:24px;letter-spacing:.18px}.label-large{font-family:Roboto,sans-serif;font-size:1rem;font-weight:500;line-height:22px}.body-large{font-family:Rubik,sans-serif;font-size:1rem;font-weight:400;line-height:22px}.label-base{font-family:Rubik,sans-serif;font-size:.875rem;font-weight:500;line-height:20px;letter-spacing:.28px}.body-base{font-family:Rubik,sans-serif;font-size:.875rem;font-weight:400;line-height:20px;font-style:italic;letter-spacing:.28px}.body-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
37
|
}
|
|
38
38
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: UserCardComponent, decorators: [{
|
|
39
39
|
type: Component,
|
|
40
|
-
args: [{ selector: 'ius-user-card', standalone: true, imports: [ButtonSquaredTertiaryComponent, DropdownContextualMenuComponent], template: "<div class=\"general-container\">\r\n <div\r\n class=\"container-card\"\r\n (mouseenter)=\"onMouseEnter()\"\r\n (mouseleave)=\"onMouseLeave()\"\r\n (click)=\"clickCard($event)\"\r\n >\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\">{{ state }}</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\r\n iconName=\"icon-edit\"\r\n (buttonClicked)=\"clickEdit($event)\"\r\n ></ius-button-squared-tertiary>\r\n </div>\r\n <div>\r\n <ius-button-squared-tertiary\r\n iconName=\"icon-delete\"\r\n (buttonClicked)=\"clickDelete($event)\"\r\n ></ius-button-squared-tertiary>\r\n </div>\r\n <div class=\"options\">\r\n <ius-button-squared-tertiary\r\n iconName=\"icon-more-vert\"\r\n (buttonClicked)=\"clickShowMore()\"\r\n ></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\r\n iconName=\"icon-keyboard-arrow-right\"\r\n (buttonClicked)=\"clickCard($event)\"\r\n ></ius-button-squared-tertiary>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n", styles: [".h1{font-family:Roboto,sans-serif;font-size:2.375rem;font-weight:500;line-height:46px}.h2{font-family:Roboto,sans-serif;font-size:1.875rem;font-weight:700;line-height:38px}.h3{font-family:Roboto,sans-serif;font-size:1.5rem;font-weight:500;line-height:32px}.h4{font-family:Roboto,sans-serif;font-size:1.25rem;font-weight:700;line-height:26px}.h5{font-family:Roboto,sans-serif;font-size:1.125rem;font-weight:500;line-height:24px;letter-spacing:.18px}.label-large{font-family:Roboto,sans-serif;font-size:1rem;font-weight:500;line-height:22px}.body-large{font-family:Rubik,sans-serif;font-size:1rem;font-weight:400;line-height:22px}.label-base{font-family:Rubik,sans-serif;font-size:.875rem;font-weight:500;line-height:20px;letter-spacing:.28px}.body-base{font-family:Rubik,sans-serif;font-size:.875rem;font-weight:400;line-height:20px;font-style:italic;letter-spacing:.28px}.body-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;
|
|
40
|
+
args: [{ selector: 'ius-user-card', standalone: true, imports: [ButtonSquaredTertiaryComponent, DropdownContextualMenuComponent], template: "<div class=\"general-container\">\r\n <div\r\n class=\"container-card\"\r\n (mouseenter)=\"onMouseEnter()\"\r\n (mouseleave)=\"onMouseLeave()\"\r\n (click)=\"clickCard($event)\"\r\n >\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\">{{ state }}</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\r\n iconName=\"icon-edit\"\r\n (buttonClicked)=\"clickEdit($event)\"\r\n ></ius-button-squared-tertiary>\r\n </div>\r\n <div>\r\n <ius-button-squared-tertiary\r\n iconName=\"icon-delete\"\r\n (buttonClicked)=\"clickDelete($event)\"\r\n ></ius-button-squared-tertiary>\r\n </div>\r\n <div class=\"options\">\r\n <ius-button-squared-tertiary\r\n iconName=\"icon-more-vert\"\r\n (buttonClicked)=\"clickShowMore()\"\r\n ></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\r\n iconName=\"icon-keyboard-arrow-right\"\r\n (buttonClicked)=\"clickCard($event)\"\r\n ></ius-button-squared-tertiary>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n", styles: [".h1{font-family:Roboto,sans-serif;font-size:2.375rem;font-weight:500;line-height:46px}.h2{font-family:Roboto,sans-serif;font-size:1.875rem;font-weight:700;line-height:38px}.h3{font-family:Roboto,sans-serif;font-size:1.5rem;font-weight:500;line-height:32px}.h4{font-family:Roboto,sans-serif;font-size:1.25rem;font-weight:700;line-height:26px}.h5{font-family:Roboto,sans-serif;font-size:1.125rem;font-weight:500;line-height:24px;letter-spacing:.18px}.label-large{font-family:Roboto,sans-serif;font-size:1rem;font-weight:500;line-height:22px}.body-large{font-family:Rubik,sans-serif;font-size:1rem;font-weight:400;line-height:22px}.label-base{font-family:Rubik,sans-serif;font-size:.875rem;font-weight:500;line-height:20px;letter-spacing:.28px}.body-base{font-family:Rubik,sans-serif;font-size:.875rem;font-weight:400;line-height:20px;font-style:italic;letter-spacing:.28px}.body-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
41
|
}], propDecorators: { image: [{
|
|
42
42
|
type: Input
|
|
43
43
|
}], state: [{
|
|
@@ -65,4 +65,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
65
65
|
}], onClickCard: [{
|
|
66
66
|
type: Output
|
|
67
67
|
}] } });
|
|
68
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
68
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidXNlci1jYXJkLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2l1cy1kZXNpZ24tY29tcG9uZW50cy9zcmMvbGliL3VzZXItY2FyZC91c2VyLWNhcmQuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvaXVzLWRlc2lnbi1jb21wb25lbnRzL3NyYy9saWIvdXNlci1jYXJkL3VzZXItY2FyZC5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFFLFlBQVksRUFBRSxLQUFLLEVBQUUsTUFBTSxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBQ3ZFLE9BQU8sRUFBRSwrQkFBK0IsRUFBRSxNQUFNLDZCQUE2QixDQUFDO0FBQzlFLE9BQU8sRUFBRSw4QkFBOEIsRUFBRSxNQUFNLDRCQUE0QixDQUFBOztBQVMzRSxNQUFNLE9BQU8saUJBQWlCO0lBUDlCO1FBUUUsVUFBSyxHQUFZLEtBQUssQ0FBQztRQUN2QixZQUFPLEdBQVksS0FBSyxDQUFDO1FBYWYsZ0JBQVcsR0FBRyxJQUFJLFlBQVksRUFBTyxDQUFDO1FBQ3RDLGtCQUFhLEdBQUcsSUFBSSxZQUFZLEVBQU8sQ0FBQztRQUN4QyxnQkFBVyxHQUFHLElBQUksWUFBWSxFQUFPLENBQUM7S0E2QmpEO0lBM0JDLFlBQVk7UUFDVixJQUFJLENBQUMsS0FBSyxHQUFHLElBQUksQ0FBQztJQUNwQixDQUFDO0lBRUQsWUFBWTtRQUNWLElBQUksQ0FBQyxLQUFLLEdBQUcsS0FBSyxDQUFDO1FBQ25CLElBQUksQ0FBQyxPQUFPLEdBQUcsS0FBSyxDQUFDO0lBQ3ZCLENBQUM7SUFFRCxTQUFTLENBQUMsS0FBWTtRQUNwQixLQUFLLENBQUMsd0JBQXdCLEVBQUUsQ0FBQztRQUNqQyxJQUFJLENBQUMsV0FBVyxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsTUFBTSxDQUFDLENBQUM7SUFDckMsQ0FBQztJQUVELFdBQVcsQ0FBQyxLQUFZO1FBQ3RCLEtBQUssQ0FBQyx3QkFBd0IsRUFBRSxDQUFDO1FBQ2pDLElBQUksQ0FBQyxhQUFhLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxNQUFNLENBQUMsQ0FBQztJQUN2QyxDQUFDO0lBRUQsU0FBUyxDQUFDLEtBQVk7UUFDcEIsS0FBSyxDQUFDLHdCQUF3QixFQUFFLENBQUM7UUFDakMsSUFBSSxDQUFDLFdBQVcsQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLE1BQU0sQ0FBQyxDQUFDO0lBQ3JDLENBQUM7SUFFRCxhQUFhO1FBQ1gsSUFBSSxDQUFDLE9BQU8sR0FBRyxDQUFDLElBQUksQ0FBQyxPQUFPLENBQUM7SUFDL0IsQ0FBQzsrR0E3Q1UsaUJBQWlCO21HQUFqQixpQkFBaUIsc1dDWDlCLDJsRkE2RUEsNmxKRHRFWSw4QkFBOEIsc0lBQUUsK0JBQStCOzs0RkFJOUQsaUJBQWlCO2tCQVA3QixTQUFTOytCQUNFLGVBQWUsY0FDYixJQUFJLFdBQ1AsQ0FBQyw4QkFBOEIsRUFBRSwrQkFBK0IsQ0FBQzs4QkFRakUsS0FBSztzQkFBYixLQUFLO2dCQUNHLEtBQUs7c0JBQWIsS0FBSztnQkFDRyxJQUFJO3NCQUFaLEtBQUs7Z0JBQ0csSUFBSTtzQkFBWixLQUFLO2dCQUNHLE1BQU07c0JBQWQsS0FBSztnQkFDRyxLQUFLO3NCQUFiLEtBQUs7Z0JBQ0csTUFBTTtzQkFBZCxLQUFLO2dCQUNHLEtBQUs7c0JBQWIsS0FBSztnQkFDRyxNQUFNO3NCQUFkLEtBQUs7Z0JBQ0csVUFBVTtzQkFBbEIsS0FBSztnQkFFSSxXQUFXO3NCQUFwQixNQUFNO2dCQUNHLGFBQWE7c0JBQXRCLE1BQU07Z0JBQ0csV0FBVztzQkFBcEIsTUFBTSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCwgRXZlbnRFbWl0dGVyLCBJbnB1dCwgT3V0cHV0IH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XHJcbmltcG9ydCB7IERyb3Bkb3duQ29udGV4dHVhbE1lbnVDb21wb25lbnQgfSBmcm9tIFwiLi4vZHJvcGRvd24tY29udGV4dHVhbC1tZW51XCI7XHJcbmltcG9ydCB7IEJ1dHRvblNxdWFyZWRUZXJ0aWFyeUNvbXBvbmVudCB9IGZyb20gXCIuLi9idXR0b24tc3F1YXJlZC10ZXJ0aWFyeVwiXHJcblxyXG5AQ29tcG9uZW50KHtcclxuICBzZWxlY3RvcjogJ2l1cy11c2VyLWNhcmQnLFxyXG4gIHN0YW5kYWxvbmU6IHRydWUsXHJcbiAgaW1wb3J0czogW0J1dHRvblNxdWFyZWRUZXJ0aWFyeUNvbXBvbmVudCwgRHJvcGRvd25Db250ZXh0dWFsTWVudUNvbXBvbmVudF0sXHJcbiAgdGVtcGxhdGVVcmw6ICcuL3VzZXItY2FyZC5jb21wb25lbnQuaHRtbCcsXHJcbiAgc3R5bGVVcmw6ICcuL3VzZXItY2FyZC5jb21wb25lbnQuc2NzcydcclxufSlcclxuZXhwb3J0IGNsYXNzIFVzZXJDYXJkQ29tcG9uZW50IHtcclxuICBob3ZlcjogYm9vbGVhbiA9IGZhbHNlO1xyXG4gIG9wdGlvbnM6IGJvb2xlYW4gPSBmYWxzZTtcclxuXHJcbiAgQElucHV0KCkgaW1hZ2U/OiBzdHJpbmc7XHJcbiAgQElucHV0KCkgc3RhdGU/OiBzdHJpbmc7XHJcbiAgQElucHV0KCkgbmFtZT86IHN0cmluZztcclxuICBASW5wdXQoKSByb2xlPzogc3RyaW5nO1xyXG4gIEBJbnB1dCgpIGxhYmVsMT86IHN0cmluZztcclxuICBASW5wdXQoKSBkYXRhMT86IHN0cmluZztcclxuICBASW5wdXQoKSBsYWJlbDI/OiBzdHJpbmc7XHJcbiAgQElucHV0KCkgZGF0YTI/OiBzdHJpbmc7XHJcbiAgQElucHV0KCkgdXNlcklEPzogbnVtYmVyO1xyXG4gIEBJbnB1dCgpIGxldHRlckljb24/OiBzdHJpbmc7XHJcblxyXG4gIEBPdXRwdXQoKSBvbkNsaWNrRWRpdCA9IG5ldyBFdmVudEVtaXR0ZXI8YW55PigpO1xyXG4gIEBPdXRwdXQoKSBvbkNsaWNrRGVsZXRlID0gbmV3IEV2ZW50RW1pdHRlcjxhbnk+KCk7XHJcbiAgQE91dHB1dCgpIG9uQ2xpY2tDYXJkID0gbmV3IEV2ZW50RW1pdHRlcjxhbnk+KCk7XHJcblxyXG4gIG9uTW91c2VFbnRlcigpIHtcclxuICAgIHRoaXMuaG92ZXIgPSB0cnVlO1xyXG4gIH1cclxuXHJcbiAgb25Nb3VzZUxlYXZlKCkge1xyXG4gICAgdGhpcy5ob3ZlciA9IGZhbHNlO1xyXG4gICAgdGhpcy5vcHRpb25zID0gZmFsc2U7XHJcbiAgfVxyXG5cclxuICBjbGlja0VkaXQoZXZlbnQ6IEV2ZW50KTogdm9pZCB7XHJcbiAgICBldmVudC5zdG9wSW1tZWRpYXRlUHJvcGFnYXRpb24oKTtcclxuICAgIHRoaXMub25DbGlja0VkaXQuZW1pdCh0aGlzLnVzZXJJRCk7XHJcbiAgfVxyXG5cclxuICBjbGlja0RlbGV0ZShldmVudDogRXZlbnQpOiB2b2lkIHtcclxuICAgIGV2ZW50LnN0b3BJbW1lZGlhdGVQcm9wYWdhdGlvbigpO1xyXG4gICAgdGhpcy5vbkNsaWNrRGVsZXRlLmVtaXQodGhpcy51c2VySUQpO1xyXG4gIH1cclxuXHJcbiAgY2xpY2tDYXJkKGV2ZW50OiBFdmVudCk6IHZvaWQge1xyXG4gICAgZXZlbnQuc3RvcEltbWVkaWF0ZVByb3BhZ2F0aW9uKCk7XHJcbiAgICB0aGlzLm9uQ2xpY2tDYXJkLmVtaXQodGhpcy51c2VySUQpO1xyXG4gIH1cclxuXHJcbiAgY2xpY2tTaG93TW9yZSgpe1xyXG4gICAgdGhpcy5vcHRpb25zID0gIXRoaXMub3B0aW9ucztcclxuICB9XHJcbn1cclxuIiwiPGRpdiBjbGFzcz1cImdlbmVyYWwtY29udGFpbmVyXCI+XHJcbiAgPGRpdlxyXG4gICAgY2xhc3M9XCJjb250YWluZXItY2FyZFwiXHJcbiAgICAobW91c2VlbnRlcik9XCJvbk1vdXNlRW50ZXIoKVwiXHJcbiAgICAobW91c2VsZWF2ZSk9XCJvbk1vdXNlTGVhdmUoKVwiXHJcbiAgICAoY2xpY2spPVwiY2xpY2tDYXJkKCRldmVudClcIlxyXG4gID5cclxuICAgIDxkaXYgY2xhc3M9XCJkYXRhXCI+XHJcbiAgICAgIDxkaXYgY2xhc3M9XCJsZWZ0LWRhdGFcIj5cclxuICAgICAgICBAaWYgKGxldHRlckljb24gJiYgIWltYWdlKSB7XHJcbiAgICAgICAgPGRpdiBjbGFzcz1cImNvbnRhaW5lci1pY29uLWxldHJhXCI+XHJcbiAgICAgICAgICA8c3Bhbj57eyBsZXR0ZXJJY29uIH19PC9zcGFuPlxyXG4gICAgICAgIDwvZGl2PlxyXG4gICAgICAgIH1AZWxzZSBpZihpbWFnZSAmJiAhbGV0dGVySWNvbil7XHJcbiAgICAgICAgPGRpdiBjbGFzcz1cImltYWdlLWNvbnRhaW5lclwiID5cclxuICAgICAgICAgIDxpbWcgW3NyY109XCJpbWFnZVwiIGNsYXNzPVwiaW1hZ2VcIiAvPlxyXG4gICAgICAgIDwvZGl2PlxyXG4gICAgICAgIH1cclxuICAgICAgICA8ZGl2IGNsYXNzPVwiZGF0YS1jb250YWluZXJcIj5cclxuICAgICAgICAgIDxwIGNsYXNzPVwic3RhdGVcIj57eyBzdGF0ZSB9fTwvcD5cclxuICAgICAgICAgIDxwIGNsYXNzPVwibmFtZVwiPnt7IG5hbWUgfX08L3A+XHJcbiAgICAgICAgICA8cCBjbGFzcz1cInJvbGVcIj57eyByb2xlIH19PC9wPlxyXG4gICAgICAgIDwvZGl2PlxyXG4gICAgICA8L2Rpdj5cclxuICAgICAgPGRpdiBjbGFzcz1cInJpZ2h0LWRhdGFcIj5cclxuICAgICAgICA8ZGl2IGNsYXNzPVwiY29udGFpbmVyXCI+XHJcbiAgICAgICAgICBAaWYgKGxhYmVsMSAmJiBkYXRhMSkge1xyXG4gICAgICAgICAgPGRpdiBjbGFzcz1cImRhdGEtY29udGFpbmVyXCI+XHJcbiAgICAgICAgICAgIDxwIGNsYXNzPVwidGl0bGVcIj57eyBsYWJlbDEgfX08L3A+XHJcbiAgICAgICAgICAgIDxwIGNsYXNzPVwiZGF0YVwiPnt7IGRhdGExIH19PC9wPlxyXG4gICAgICAgICAgPC9kaXY+XHJcbiAgICAgICAgICB9IEBpZiAobGFiZWwyICYmIGRhdGEyKSB7XHJcbiAgICAgICAgICA8ZGl2IGNsYXNzPVwiZGF0YS1jb250YWluZXJcIj5cclxuICAgICAgICAgICAgPHAgY2xhc3M9XCJ0aXRsZVwiPnt7IGxhYmVsMiB9fTwvcD5cclxuICAgICAgICAgICAgPHAgY2xhc3M9XCJkYXRhXCI+e3sgZGF0YTIgfX08L3A+XHJcbiAgICAgICAgICA8L2Rpdj5cclxuICAgICAgICAgIH1cclxuICAgICAgICA8L2Rpdj5cclxuICAgICAgICBAaWYgKGhvdmVyKSB7XHJcbiAgICAgICAgPGRpdiBjbGFzcz1cImJ1dHRvbnNcIj5cclxuICAgICAgICAgIDxkaXY+XHJcbiAgICAgICAgICAgIDxpdXMtYnV0dG9uLXNxdWFyZWQtdGVydGlhcnlcclxuICAgICAgICAgICAgICBpY29uTmFtZT1cImljb24tZWRpdFwiXHJcbiAgICAgICAgICAgICAgKGJ1dHRvbkNsaWNrZWQpPVwiY2xpY2tFZGl0KCRldmVudClcIlxyXG4gICAgICAgICAgICA+PC9pdXMtYnV0dG9uLXNxdWFyZWQtdGVydGlhcnk+XHJcbiAgICAgICAgICA8L2Rpdj5cclxuICAgICAgICAgIDxkaXY+XHJcbiAgICAgICAgICAgIDxpdXMtYnV0dG9uLXNxdWFyZWQtdGVydGlhcnlcclxuICAgICAgICAgICAgICBpY29uTmFtZT1cImljb24tZGVsZXRlXCJcclxuICAgICAgICAgICAgICAoYnV0dG9uQ2xpY2tlZCk9XCJjbGlja0RlbGV0ZSgkZXZlbnQpXCJcclxuICAgICAgICAgICAgPjwvaXVzLWJ1dHRvbi1zcXVhcmVkLXRlcnRpYXJ5PlxyXG4gICAgICAgICAgPC9kaXY+XHJcbiAgICAgICAgICA8ZGl2IGNsYXNzPVwib3B0aW9uc1wiPlxyXG4gICAgICAgICAgICA8aXVzLWJ1dHRvbi1zcXVhcmVkLXRlcnRpYXJ5XHJcbiAgICAgICAgICAgICAgaWNvbk5hbWU9XCJpY29uLW1vcmUtdmVydFwiXHJcbiAgICAgICAgICAgICAgKGJ1dHRvbkNsaWNrZWQpPVwiY2xpY2tTaG93TW9yZSgpXCJcclxuICAgICAgICAgICAgPjwvaXVzLWJ1dHRvbi1zcXVhcmVkLXRlcnRpYXJ5PlxyXG4gICAgICAgICAgICBAaWYgKG9wdGlvbnMpIHtcclxuICAgICAgICAgICAgPGRpdiBjbGFzcz1cImRyb3Bkb3duXCI+XHJcbiAgICAgICAgICAgICAgPGl1cy1kcm9wZG93bi1jb250ZXh0dWFsLW1lbnU+XHJcbiAgICAgICAgICAgICAgICA8bmctY29udGVudD48L25nLWNvbnRlbnQ+XHJcbiAgICAgICAgICAgICAgPC9pdXMtZHJvcGRvd24tY29udGV4dHVhbC1tZW51PlxyXG4gICAgICAgICAgICA8L2Rpdj5cclxuICAgICAgICAgICAgfVxyXG4gICAgICAgICAgPC9kaXY+XHJcbiAgICAgICAgPC9kaXY+XHJcbiAgICAgICAgfVxyXG4gICAgICAgIDxkaXYgY2xhc3M9XCJidG5cIj5cclxuICAgICAgICAgIDxpdXMtYnV0dG9uLXNxdWFyZWQtdGVydGlhcnlcclxuICAgICAgICAgICAgaWNvbk5hbWU9XCJpY29uLWtleWJvYXJkLWFycm93LXJpZ2h0XCJcclxuICAgICAgICAgICAgKGJ1dHRvbkNsaWNrZWQpPVwiY2xpY2tDYXJkKCRldmVudClcIlxyXG4gICAgICAgICAgPjwvaXVzLWJ1dHRvbi1zcXVhcmVkLXRlcnRpYXJ5PlxyXG4gICAgICAgIDwvZGl2PlxyXG4gICAgICA8L2Rpdj5cclxuICAgIDwvZGl2PlxyXG4gIDwvZGl2PlxyXG48L2Rpdj5cclxuIl19
|
|
@@ -4445,11 +4445,11 @@ class UserCardComponent {
|
|
|
4445
4445
|
this.options = !this.options;
|
|
4446
4446
|
}
|
|
4447
4447
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: UserCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4448
|
-
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\r\n class=\"container-card\"\r\n (mouseenter)=\"onMouseEnter()\"\r\n (mouseleave)=\"onMouseLeave()\"\r\n (click)=\"clickCard($event)\"\r\n >\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\">{{ state }}</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\r\n iconName=\"icon-edit\"\r\n (buttonClicked)=\"clickEdit($event)\"\r\n ></ius-button-squared-tertiary>\r\n </div>\r\n <div>\r\n <ius-button-squared-tertiary\r\n iconName=\"icon-delete\"\r\n (buttonClicked)=\"clickDelete($event)\"\r\n ></ius-button-squared-tertiary>\r\n </div>\r\n <div class=\"options\">\r\n <ius-button-squared-tertiary\r\n iconName=\"icon-more-vert\"\r\n (buttonClicked)=\"clickShowMore()\"\r\n ></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\r\n iconName=\"icon-keyboard-arrow-right\"\r\n (buttonClicked)=\"clickCard($event)\"\r\n ></ius-button-squared-tertiary>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n", styles: [".h1{font-family:Roboto,sans-serif;font-size:2.375rem;font-weight:500;line-height:46px}.h2{font-family:Roboto,sans-serif;font-size:1.875rem;font-weight:700;line-height:38px}.h3{font-family:Roboto,sans-serif;font-size:1.5rem;font-weight:500;line-height:32px}.h4{font-family:Roboto,sans-serif;font-size:1.25rem;font-weight:700;line-height:26px}.h5{font-family:Roboto,sans-serif;font-size:1.125rem;font-weight:500;line-height:24px;letter-spacing:.18px}.label-large{font-family:Roboto,sans-serif;font-size:1rem;font-weight:500;line-height:22px}.body-large{font-family:Rubik,sans-serif;font-size:1rem;font-weight:400;line-height:22px}.label-base{font-family:Rubik,sans-serif;font-size:.875rem;font-weight:500;line-height:20px;letter-spacing:.28px}.body-base{font-family:Rubik,sans-serif;font-size:.875rem;font-weight:400;line-height:20px;font-style:italic;letter-spacing:.28px}.body-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;
|
|
4448
|
+
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\r\n class=\"container-card\"\r\n (mouseenter)=\"onMouseEnter()\"\r\n (mouseleave)=\"onMouseLeave()\"\r\n (click)=\"clickCard($event)\"\r\n >\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\">{{ state }}</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\r\n iconName=\"icon-edit\"\r\n (buttonClicked)=\"clickEdit($event)\"\r\n ></ius-button-squared-tertiary>\r\n </div>\r\n <div>\r\n <ius-button-squared-tertiary\r\n iconName=\"icon-delete\"\r\n (buttonClicked)=\"clickDelete($event)\"\r\n ></ius-button-squared-tertiary>\r\n </div>\r\n <div class=\"options\">\r\n <ius-button-squared-tertiary\r\n iconName=\"icon-more-vert\"\r\n (buttonClicked)=\"clickShowMore()\"\r\n ></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\r\n iconName=\"icon-keyboard-arrow-right\"\r\n (buttonClicked)=\"clickCard($event)\"\r\n ></ius-button-squared-tertiary>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n", styles: [".h1{font-family:Roboto,sans-serif;font-size:2.375rem;font-weight:500;line-height:46px}.h2{font-family:Roboto,sans-serif;font-size:1.875rem;font-weight:700;line-height:38px}.h3{font-family:Roboto,sans-serif;font-size:1.5rem;font-weight:500;line-height:32px}.h4{font-family:Roboto,sans-serif;font-size:1.25rem;font-weight:700;line-height:26px}.h5{font-family:Roboto,sans-serif;font-size:1.125rem;font-weight:500;line-height:24px;letter-spacing:.18px}.label-large{font-family:Roboto,sans-serif;font-size:1rem;font-weight:500;line-height:22px}.body-large{font-family:Rubik,sans-serif;font-size:1rem;font-weight:400;line-height:22px}.label-base{font-family:Rubik,sans-serif;font-size:.875rem;font-weight:500;line-height:20px;letter-spacing:.28px}.body-base{font-family:Rubik,sans-serif;font-size:.875rem;font-weight:400;line-height:20px;font-style:italic;letter-spacing:.28px}.body-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" }] }); }
|
|
4449
4449
|
}
|
|
4450
4450
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: UserCardComponent, decorators: [{
|
|
4451
4451
|
type: Component,
|
|
4452
|
-
args: [{ selector: 'ius-user-card', standalone: true, imports: [ButtonSquaredTertiaryComponent, DropdownContextualMenuComponent], template: "<div class=\"general-container\">\r\n <div\r\n class=\"container-card\"\r\n (mouseenter)=\"onMouseEnter()\"\r\n (mouseleave)=\"onMouseLeave()\"\r\n (click)=\"clickCard($event)\"\r\n >\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\">{{ state }}</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\r\n iconName=\"icon-edit\"\r\n (buttonClicked)=\"clickEdit($event)\"\r\n ></ius-button-squared-tertiary>\r\n </div>\r\n <div>\r\n <ius-button-squared-tertiary\r\n iconName=\"icon-delete\"\r\n (buttonClicked)=\"clickDelete($event)\"\r\n ></ius-button-squared-tertiary>\r\n </div>\r\n <div class=\"options\">\r\n <ius-button-squared-tertiary\r\n iconName=\"icon-more-vert\"\r\n (buttonClicked)=\"clickShowMore()\"\r\n ></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\r\n iconName=\"icon-keyboard-arrow-right\"\r\n (buttonClicked)=\"clickCard($event)\"\r\n ></ius-button-squared-tertiary>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n", styles: [".h1{font-family:Roboto,sans-serif;font-size:2.375rem;font-weight:500;line-height:46px}.h2{font-family:Roboto,sans-serif;font-size:1.875rem;font-weight:700;line-height:38px}.h3{font-family:Roboto,sans-serif;font-size:1.5rem;font-weight:500;line-height:32px}.h4{font-family:Roboto,sans-serif;font-size:1.25rem;font-weight:700;line-height:26px}.h5{font-family:Roboto,sans-serif;font-size:1.125rem;font-weight:500;line-height:24px;letter-spacing:.18px}.label-large{font-family:Roboto,sans-serif;font-size:1rem;font-weight:500;line-height:22px}.body-large{font-family:Rubik,sans-serif;font-size:1rem;font-weight:400;line-height:22px}.label-base{font-family:Rubik,sans-serif;font-size:.875rem;font-weight:500;line-height:20px;letter-spacing:.28px}.body-base{font-family:Rubik,sans-serif;font-size:.875rem;font-weight:400;line-height:20px;font-style:italic;letter-spacing:.28px}.body-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;
|
|
4452
|
+
args: [{ selector: 'ius-user-card', standalone: true, imports: [ButtonSquaredTertiaryComponent, DropdownContextualMenuComponent], template: "<div class=\"general-container\">\r\n <div\r\n class=\"container-card\"\r\n (mouseenter)=\"onMouseEnter()\"\r\n (mouseleave)=\"onMouseLeave()\"\r\n (click)=\"clickCard($event)\"\r\n >\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\">{{ state }}</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\r\n iconName=\"icon-edit\"\r\n (buttonClicked)=\"clickEdit($event)\"\r\n ></ius-button-squared-tertiary>\r\n </div>\r\n <div>\r\n <ius-button-squared-tertiary\r\n iconName=\"icon-delete\"\r\n (buttonClicked)=\"clickDelete($event)\"\r\n ></ius-button-squared-tertiary>\r\n </div>\r\n <div class=\"options\">\r\n <ius-button-squared-tertiary\r\n iconName=\"icon-more-vert\"\r\n (buttonClicked)=\"clickShowMore()\"\r\n ></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\r\n iconName=\"icon-keyboard-arrow-right\"\r\n (buttonClicked)=\"clickCard($event)\"\r\n ></ius-button-squared-tertiary>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n", styles: [".h1{font-family:Roboto,sans-serif;font-size:2.375rem;font-weight:500;line-height:46px}.h2{font-family:Roboto,sans-serif;font-size:1.875rem;font-weight:700;line-height:38px}.h3{font-family:Roboto,sans-serif;font-size:1.5rem;font-weight:500;line-height:32px}.h4{font-family:Roboto,sans-serif;font-size:1.25rem;font-weight:700;line-height:26px}.h5{font-family:Roboto,sans-serif;font-size:1.125rem;font-weight:500;line-height:24px;letter-spacing:.18px}.label-large{font-family:Roboto,sans-serif;font-size:1rem;font-weight:500;line-height:22px}.body-large{font-family:Rubik,sans-serif;font-size:1rem;font-weight:400;line-height:22px}.label-base{font-family:Rubik,sans-serif;font-size:.875rem;font-weight:500;line-height:20px;letter-spacing:.28px}.body-base{font-family:Rubik,sans-serif;font-size:.875rem;font-weight:400;line-height:20px;font-style:italic;letter-spacing:.28px}.body-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"] }]
|
|
4453
4453
|
}], propDecorators: { image: [{
|
|
4454
4454
|
type: Input
|
|
4455
4455
|
}], state: [{
|