@tuki-io/tuki-widgets 0.0.123 → 0.0.124
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/esm2020/user-manage/src/user-info/user-info.component.mjs +3 -3
- package/fesm2015/tuki-io-tuki-widgets-user-manage.mjs +2 -2
- package/fesm2015/tuki-io-tuki-widgets-user-manage.mjs.map +1 -1
- package/fesm2020/tuki-io-tuki-widgets-user-manage.mjs +2 -2
- package/fesm2020/tuki-io-tuki-widgets-user-manage.mjs.map +1 -1
- package/package.json +1 -1
|
@@ -4,10 +4,10 @@ import * as i1 from "@angular/common";
|
|
|
4
4
|
export class UserInfoComponent {
|
|
5
5
|
}
|
|
6
6
|
UserInfoComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: UserInfoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
7
|
-
UserInfoComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: UserInfoComponent, selector: "app-user-info", inputs: { name: "name", active: "active", email: "email", position: "position" }, ngImport: i0, template: "<div style=\"display: flex; align-items: center; justify-content: space-between;\">\n <!-- <div class=\"content-box\"> -->\n <div class=\"info-holder\">\n <div class=\"info-holder__user-image\">\n <i class=\"icon-people-regular\"></i>\n </div>\n <div class=\"info-holder__user-information\">\n <div class=\"info-holder__user-name\">{{name}}</div>\n <div class=\"info-holder__user-breadcrumbs\">\n <div class=\"is-active\" *ngIf=\"active; else notActive\">\n <span class=\"icon-user-status icon-user-status-active\"></span>Active\n </div>\n <div class=\"icon-text-wrapper\">\n <div class=\"icon-separator\"></div>\n <div class=\"email\">{{email}}</div>\n </div>\n <div class=\"icon-text-wrapper\">\n <div class=\"icon-separator\"></div>\n <div class=\"position\">{{position}}</div>\n </div>\n </div>\n </div>\n </div>\n <!-- </div> -->\n <div class=\"action-btn-wrapper\">\n <button><span>Actions</span><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"14\" viewBox=\"0 0 32 32\" style=\"vertical-align:middle;\"><path d=\"M28.708 9.293a1 1 0 0 0-1.415 0L16 20.586 4.707 9.293a1 1 0 0 0-1.414 1.414l12 12a1 1 0 0 0 1.414 0l12-12a1 1 0 0 0 0-1.414\" fill=\"currentColor\"/></svg></button>\n </div>\n</div>\n\n<ng-template #notActive>\n <div class=\"is-active\">\n <svg width=\"8\" height=\"9\" viewBox=\"0 0 8 9\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M4 8.5C6.20914 8.5 8 6.70914 8 4.5C8 2.29086 6.20914 0.5 4 0.5C1.79086 0.5 0 2.29086 0 4.5C0 6.70914 1.79086 8.5 4 8.5Z\" fill=\"grey\"/>\n </svg>\n <div>Not active</div>\n </div>\n</ng-template>\n", styles: [".info-holder{display:flex;gap:.75rem;align-items:center;font-family:Inter,sans-serif;height:102px;width:100%;background:white;padding:0 4.375rem;font-family:poppins,sans-serif}.info-holder__user-image img{width:40px;border-radius:120px;margin:20px 0 0}.info-holder__user-information{gap:10px;display:flex;flex-direction:column}.info-holder__user-name{font-size:20px;font-weight:600}.info-holder__user-breadcrumbs{display:flex;gap:8px;font-weight:400;font-size:14px;color:#000000b3;align-items:center}.info-holder .is-active,.info-holder .icon-text-wrapper{display:flex;gap:.5rem;align-items:center}.info-holder .icon-text-wrapper .icon-separator{flex-shrink:0;border-radius:50%;background-color:#000000bf;inline-size:.25rem;block-size:.25rem;margin-inline-end:.25rem}.info-holder .info-holder__user-image{width:40px;height:40px}.info-holder .info-holder__user-image .icon-people-regular{background-image:url(\"data:image/svg+xml,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 width%3D%2232%22 height%3D%2232%22 viewBox%3D%220 0 32 32%22%3E%3Cpath d%3D%22M23.23 16.757a5.746 5.746 0 1 0-7.041-9.048 5 5 0 0 0 .071-.705 4.75 4.75 0 1 0-7.705 3.689 8.43 8.43 0 0 0-6.305 7.84c0 1.052.543 2.521 3.13 3.55 1.643.595 3.371.92 5.118.965a7.8 7.8 0 0 0-.248 1.926c0 1.1.57 2.636 3.285 3.716a18.1 18.1 0 0 0 6.463 1.06c4.853 0 9.75-1.476 9.75-4.776a8.86 8.86 0 0 0-6.517-8.217M20 7.755a4.25 4.25 0 0 1 .006 8.499h-.013a4.25 4.25 0 0 1 .007-8.5M8.26 7.004a3.25 3.25 0 1 1 6.5 0 3.25 3.25 0 0 1-6.5 0m2.76 14.574c-4.177-.093-7.27-1.368-7.27-3.045 0-3.737 3.478-6.778 7.752-6.778a8.7 8.7 0 0 1 2.757.45 5.75 5.75 0 0 0 2.508 4.552 9.43 9.43 0 0 0-5.747 4.82m8.978 6.672c-4.703 0-8.249-1.408-8.249-3.276 0-3.982 3.7-7.22 8.25-7.22s8.248 3.238 8.248 7.22c0 1.868-3.546 3.276-8.25 3.276%22%2F%3E%3C%2Fsvg%3E\");background-repeat:no-repeat;background-position:center;height:40px;width:40px;display:block;background-size:contain}.icon-user-status{width:.5rem;height:.5rem;border-radius:50%;background-color:#707070}.icon-user-status.icon-user-status-active{background-color:#1d805f;display:inline-block}.action-btn-wrapper{margin-right:4rem}.action-btn-wrapper button{background-color:#000000f2;color:#fffffff2;position:relative;display:inline-flex;gap:6px;align-items:center;justify-content:center;overflow:hidden!important;padding:8px .75rem;border:1px solid transparent;border-radius:6.25rem;font-weight:500;font-size:14px;text-overflow:ellipsis;white-space:nowrap;transition:all .1s cubic-bezier(.25,.1,.25,1);inline-size:min-content;max-inline-size:100%}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
|
|
7
|
+
UserInfoComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: UserInfoComponent, selector: "app-user-info", inputs: { name: "name", active: "active", email: "email", position: "position" }, ngImport: i0, template: "<div style=\"display: flex; align-items: center; justify-content: space-between; background-color: white;\">\n <!-- <div class=\"content-box\"> -->\n <div class=\"info-holder\">\n <div class=\"info-holder__user-image\">\n <i class=\"icon-people-regular\"></i>\n </div>\n <div class=\"info-holder__user-information\">\n <div class=\"info-holder__user-name\">{{name}}</div>\n <div class=\"info-holder__user-breadcrumbs\">\n <div class=\"is-active\" *ngIf=\"active; else notActive\">\n <span class=\"icon-user-status icon-user-status-active\"></span>Active\n </div>\n <div class=\"icon-text-wrapper\">\n <div class=\"icon-separator\"></div>\n <div class=\"email\">{{email}}</div>\n </div>\n <div class=\"icon-text-wrapper\">\n <div class=\"icon-separator\"></div>\n <div class=\"position\">{{position}}</div>\n </div>\n </div>\n </div>\n </div>\n <!-- </div> -->\n <div class=\"action-btn-wrapper\">\n <button><span>Actions</span><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"14\" viewBox=\"0 0 32 32\" style=\"vertical-align:middle;\"><path d=\"M28.708 9.293a1 1 0 0 0-1.415 0L16 20.586 4.707 9.293a1 1 0 0 0-1.414 1.414l12 12a1 1 0 0 0 1.414 0l12-12a1 1 0 0 0 0-1.414\" fill=\"currentColor\"/></svg></button>\n </div>\n</div>\n\n<ng-template #notActive>\n <div class=\"is-active\">\n <svg width=\"8\" height=\"9\" viewBox=\"0 0 8 9\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M4 8.5C6.20914 8.5 8 6.70914 8 4.5C8 2.29086 6.20914 0.5 4 0.5C1.79086 0.5 0 2.29086 0 4.5C0 6.70914 1.79086 8.5 4 8.5Z\" fill=\"grey\"/>\n </svg>\n <div>Not active</div>\n </div>\n</ng-template>\n", styles: [".info-holder{display:flex;gap:.75rem;align-items:center;font-family:Inter,sans-serif;height:102px;width:100%;background:white;padding:0 4.375rem;font-family:poppins,sans-serif}.info-holder__user-image img{width:40px;border-radius:120px;margin:20px 0 0}.info-holder__user-information{gap:10px;display:flex;flex-direction:column}.info-holder__user-name{font-size:20px;font-weight:600}.info-holder__user-breadcrumbs{display:flex;gap:8px;font-weight:400;font-size:14px;color:#000000b3;align-items:center}.info-holder .is-active,.info-holder .icon-text-wrapper{display:flex;gap:.5rem;align-items:center}.info-holder .icon-text-wrapper .icon-separator{flex-shrink:0;border-radius:50%;background-color:#000000bf;inline-size:.25rem;block-size:.25rem;margin-inline-end:.25rem}.info-holder .info-holder__user-image{width:40px;height:40px}.info-holder .info-holder__user-image .icon-people-regular{background-image:url(\"data:image/svg+xml,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 width%3D%2232%22 height%3D%2232%22 viewBox%3D%220 0 32 32%22%3E%3Cpath d%3D%22M23.23 16.757a5.746 5.746 0 1 0-7.041-9.048 5 5 0 0 0 .071-.705 4.75 4.75 0 1 0-7.705 3.689 8.43 8.43 0 0 0-6.305 7.84c0 1.052.543 2.521 3.13 3.55 1.643.595 3.371.92 5.118.965a7.8 7.8 0 0 0-.248 1.926c0 1.1.57 2.636 3.285 3.716a18.1 18.1 0 0 0 6.463 1.06c4.853 0 9.75-1.476 9.75-4.776a8.86 8.86 0 0 0-6.517-8.217M20 7.755a4.25 4.25 0 0 1 .006 8.499h-.013a4.25 4.25 0 0 1 .007-8.5M8.26 7.004a3.25 3.25 0 1 1 6.5 0 3.25 3.25 0 0 1-6.5 0m2.76 14.574c-4.177-.093-7.27-1.368-7.27-3.045 0-3.737 3.478-6.778 7.752-6.778a8.7 8.7 0 0 1 2.757.45 5.75 5.75 0 0 0 2.508 4.552 9.43 9.43 0 0 0-5.747 4.82m8.978 6.672c-4.703 0-8.249-1.408-8.249-3.276 0-3.982 3.7-7.22 8.25-7.22s8.248 3.238 8.248 7.22c0 1.868-3.546 3.276-8.25 3.276%22%2F%3E%3C%2Fsvg%3E\");background-repeat:no-repeat;background-position:center;height:40px;width:40px;display:block;background-size:contain}.icon-user-status{width:.5rem;height:.5rem;border-radius:50%;background-color:#707070}.icon-user-status.icon-user-status-active{background-color:#1d805f;display:inline-block}.action-btn-wrapper{margin-right:4rem}.action-btn-wrapper button{background-color:#000000f2;color:#fffffff2;position:relative;display:inline-flex;gap:6px;align-items:center;justify-content:center;overflow:hidden!important;padding:8px .75rem;border:1px solid transparent;border-radius:6.25rem;font-weight:500;font-size:14px;text-overflow:ellipsis;white-space:nowrap;transition:all .1s cubic-bezier(.25,.1,.25,1);inline-size:min-content;max-inline-size:100%}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
|
|
8
8
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: UserInfoComponent, decorators: [{
|
|
9
9
|
type: Component,
|
|
10
|
-
args: [{ selector: 'app-user-info', template: "<div style=\"display: flex; align-items: center; justify-content: space-between;\">\n <!-- <div class=\"content-box\"> -->\n <div class=\"info-holder\">\n <div class=\"info-holder__user-image\">\n <i class=\"icon-people-regular\"></i>\n </div>\n <div class=\"info-holder__user-information\">\n <div class=\"info-holder__user-name\">{{name}}</div>\n <div class=\"info-holder__user-breadcrumbs\">\n <div class=\"is-active\" *ngIf=\"active; else notActive\">\n <span class=\"icon-user-status icon-user-status-active\"></span>Active\n </div>\n <div class=\"icon-text-wrapper\">\n <div class=\"icon-separator\"></div>\n <div class=\"email\">{{email}}</div>\n </div>\n <div class=\"icon-text-wrapper\">\n <div class=\"icon-separator\"></div>\n <div class=\"position\">{{position}}</div>\n </div>\n </div>\n </div>\n </div>\n <!-- </div> -->\n <div class=\"action-btn-wrapper\">\n <button><span>Actions</span><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"14\" viewBox=\"0 0 32 32\" style=\"vertical-align:middle;\"><path d=\"M28.708 9.293a1 1 0 0 0-1.415 0L16 20.586 4.707 9.293a1 1 0 0 0-1.414 1.414l12 12a1 1 0 0 0 1.414 0l12-12a1 1 0 0 0 0-1.414\" fill=\"currentColor\"/></svg></button>\n </div>\n</div>\n\n<ng-template #notActive>\n <div class=\"is-active\">\n <svg width=\"8\" height=\"9\" viewBox=\"0 0 8 9\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M4 8.5C6.20914 8.5 8 6.70914 8 4.5C8 2.29086 6.20914 0.5 4 0.5C1.79086 0.5 0 2.29086 0 4.5C0 6.70914 1.79086 8.5 4 8.5Z\" fill=\"grey\"/>\n </svg>\n <div>Not active</div>\n </div>\n</ng-template>\n", styles: [".info-holder{display:flex;gap:.75rem;align-items:center;font-family:Inter,sans-serif;height:102px;width:100%;background:white;padding:0 4.375rem;font-family:poppins,sans-serif}.info-holder__user-image img{width:40px;border-radius:120px;margin:20px 0 0}.info-holder__user-information{gap:10px;display:flex;flex-direction:column}.info-holder__user-name{font-size:20px;font-weight:600}.info-holder__user-breadcrumbs{display:flex;gap:8px;font-weight:400;font-size:14px;color:#000000b3;align-items:center}.info-holder .is-active,.info-holder .icon-text-wrapper{display:flex;gap:.5rem;align-items:center}.info-holder .icon-text-wrapper .icon-separator{flex-shrink:0;border-radius:50%;background-color:#000000bf;inline-size:.25rem;block-size:.25rem;margin-inline-end:.25rem}.info-holder .info-holder__user-image{width:40px;height:40px}.info-holder .info-holder__user-image .icon-people-regular{background-image:url(\"data:image/svg+xml,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 width%3D%2232%22 height%3D%2232%22 viewBox%3D%220 0 32 32%22%3E%3Cpath d%3D%22M23.23 16.757a5.746 5.746 0 1 0-7.041-9.048 5 5 0 0 0 .071-.705 4.75 4.75 0 1 0-7.705 3.689 8.43 8.43 0 0 0-6.305 7.84c0 1.052.543 2.521 3.13 3.55 1.643.595 3.371.92 5.118.965a7.8 7.8 0 0 0-.248 1.926c0 1.1.57 2.636 3.285 3.716a18.1 18.1 0 0 0 6.463 1.06c4.853 0 9.75-1.476 9.75-4.776a8.86 8.86 0 0 0-6.517-8.217M20 7.755a4.25 4.25 0 0 1 .006 8.499h-.013a4.25 4.25 0 0 1 .007-8.5M8.26 7.004a3.25 3.25 0 1 1 6.5 0 3.25 3.25 0 0 1-6.5 0m2.76 14.574c-4.177-.093-7.27-1.368-7.27-3.045 0-3.737 3.478-6.778 7.752-6.778a8.7 8.7 0 0 1 2.757.45 5.75 5.75 0 0 0 2.508 4.552 9.43 9.43 0 0 0-5.747 4.82m8.978 6.672c-4.703 0-8.249-1.408-8.249-3.276 0-3.982 3.7-7.22 8.25-7.22s8.248 3.238 8.248 7.22c0 1.868-3.546 3.276-8.25 3.276%22%2F%3E%3C%2Fsvg%3E\");background-repeat:no-repeat;background-position:center;height:40px;width:40px;display:block;background-size:contain}.icon-user-status{width:.5rem;height:.5rem;border-radius:50%;background-color:#707070}.icon-user-status.icon-user-status-active{background-color:#1d805f;display:inline-block}.action-btn-wrapper{margin-right:4rem}.action-btn-wrapper button{background-color:#000000f2;color:#fffffff2;position:relative;display:inline-flex;gap:6px;align-items:center;justify-content:center;overflow:hidden!important;padding:8px .75rem;border:1px solid transparent;border-radius:6.25rem;font-weight:500;font-size:14px;text-overflow:ellipsis;white-space:nowrap;transition:all .1s cubic-bezier(.25,.1,.25,1);inline-size:min-content;max-inline-size:100%}\n"] }]
|
|
10
|
+
args: [{ selector: 'app-user-info', template: "<div style=\"display: flex; align-items: center; justify-content: space-between; background-color: white;\">\n <!-- <div class=\"content-box\"> -->\n <div class=\"info-holder\">\n <div class=\"info-holder__user-image\">\n <i class=\"icon-people-regular\"></i>\n </div>\n <div class=\"info-holder__user-information\">\n <div class=\"info-holder__user-name\">{{name}}</div>\n <div class=\"info-holder__user-breadcrumbs\">\n <div class=\"is-active\" *ngIf=\"active; else notActive\">\n <span class=\"icon-user-status icon-user-status-active\"></span>Active\n </div>\n <div class=\"icon-text-wrapper\">\n <div class=\"icon-separator\"></div>\n <div class=\"email\">{{email}}</div>\n </div>\n <div class=\"icon-text-wrapper\">\n <div class=\"icon-separator\"></div>\n <div class=\"position\">{{position}}</div>\n </div>\n </div>\n </div>\n </div>\n <!-- </div> -->\n <div class=\"action-btn-wrapper\">\n <button><span>Actions</span><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"14\" viewBox=\"0 0 32 32\" style=\"vertical-align:middle;\"><path d=\"M28.708 9.293a1 1 0 0 0-1.415 0L16 20.586 4.707 9.293a1 1 0 0 0-1.414 1.414l12 12a1 1 0 0 0 1.414 0l12-12a1 1 0 0 0 0-1.414\" fill=\"currentColor\"/></svg></button>\n </div>\n</div>\n\n<ng-template #notActive>\n <div class=\"is-active\">\n <svg width=\"8\" height=\"9\" viewBox=\"0 0 8 9\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M4 8.5C6.20914 8.5 8 6.70914 8 4.5C8 2.29086 6.20914 0.5 4 0.5C1.79086 0.5 0 2.29086 0 4.5C0 6.70914 1.79086 8.5 4 8.5Z\" fill=\"grey\"/>\n </svg>\n <div>Not active</div>\n </div>\n</ng-template>\n", styles: [".info-holder{display:flex;gap:.75rem;align-items:center;font-family:Inter,sans-serif;height:102px;width:100%;background:white;padding:0 4.375rem;font-family:poppins,sans-serif}.info-holder__user-image img{width:40px;border-radius:120px;margin:20px 0 0}.info-holder__user-information{gap:10px;display:flex;flex-direction:column}.info-holder__user-name{font-size:20px;font-weight:600}.info-holder__user-breadcrumbs{display:flex;gap:8px;font-weight:400;font-size:14px;color:#000000b3;align-items:center}.info-holder .is-active,.info-holder .icon-text-wrapper{display:flex;gap:.5rem;align-items:center}.info-holder .icon-text-wrapper .icon-separator{flex-shrink:0;border-radius:50%;background-color:#000000bf;inline-size:.25rem;block-size:.25rem;margin-inline-end:.25rem}.info-holder .info-holder__user-image{width:40px;height:40px}.info-holder .info-holder__user-image .icon-people-regular{background-image:url(\"data:image/svg+xml,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 width%3D%2232%22 height%3D%2232%22 viewBox%3D%220 0 32 32%22%3E%3Cpath d%3D%22M23.23 16.757a5.746 5.746 0 1 0-7.041-9.048 5 5 0 0 0 .071-.705 4.75 4.75 0 1 0-7.705 3.689 8.43 8.43 0 0 0-6.305 7.84c0 1.052.543 2.521 3.13 3.55 1.643.595 3.371.92 5.118.965a7.8 7.8 0 0 0-.248 1.926c0 1.1.57 2.636 3.285 3.716a18.1 18.1 0 0 0 6.463 1.06c4.853 0 9.75-1.476 9.75-4.776a8.86 8.86 0 0 0-6.517-8.217M20 7.755a4.25 4.25 0 0 1 .006 8.499h-.013a4.25 4.25 0 0 1 .007-8.5M8.26 7.004a3.25 3.25 0 1 1 6.5 0 3.25 3.25 0 0 1-6.5 0m2.76 14.574c-4.177-.093-7.27-1.368-7.27-3.045 0-3.737 3.478-6.778 7.752-6.778a8.7 8.7 0 0 1 2.757.45 5.75 5.75 0 0 0 2.508 4.552 9.43 9.43 0 0 0-5.747 4.82m8.978 6.672c-4.703 0-8.249-1.408-8.249-3.276 0-3.982 3.7-7.22 8.25-7.22s8.248 3.238 8.248 7.22c0 1.868-3.546 3.276-8.25 3.276%22%2F%3E%3C%2Fsvg%3E\");background-repeat:no-repeat;background-position:center;height:40px;width:40px;display:block;background-size:contain}.icon-user-status{width:.5rem;height:.5rem;border-radius:50%;background-color:#707070}.icon-user-status.icon-user-status-active{background-color:#1d805f;display:inline-block}.action-btn-wrapper{margin-right:4rem}.action-btn-wrapper button{background-color:#000000f2;color:#fffffff2;position:relative;display:inline-flex;gap:6px;align-items:center;justify-content:center;overflow:hidden!important;padding:8px .75rem;border:1px solid transparent;border-radius:6.25rem;font-weight:500;font-size:14px;text-overflow:ellipsis;white-space:nowrap;transition:all .1s cubic-bezier(.25,.1,.25,1);inline-size:min-content;max-inline-size:100%}\n"] }]
|
|
11
11
|
}], propDecorators: { name: [{
|
|
12
12
|
type: Input
|
|
13
13
|
}], active: [{
|
|
@@ -17,4 +17,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
|
|
|
17
17
|
}], position: [{
|
|
18
18
|
type: Input
|
|
19
19
|
}] } });
|
|
20
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
20
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidXNlci1pbmZvLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL3R1a2kvd2lkZ2V0cy91c2VyLW1hbmFnZS9zcmMvdXNlci1pbmZvL3VzZXItaW5mby5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy90dWtpL3dpZGdldHMvdXNlci1tYW5hZ2Uvc3JjL3VzZXItaW5mby91c2VyLWluZm8uY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFNBQVMsRUFBRSxLQUFLLEVBQUUsTUFBTSxlQUFlLENBQUM7OztBQU9qRCxNQUFNLE9BQU8saUJBQWlCOzsrR0FBakIsaUJBQWlCO21HQUFqQixpQkFBaUIsdUlDUDlCLG15REFxQ0E7NEZEOUJhLGlCQUFpQjtrQkFMN0IsU0FBUzsrQkFDRSxlQUFlOzhCQU16QixJQUFJO3NCQURILEtBQUs7Z0JBR04sTUFBTTtzQkFETCxLQUFLO2dCQUdOLEtBQUs7c0JBREosS0FBSztnQkFHTixRQUFRO3NCQURQLEtBQUsiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQsIElucHV0IH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XHJcblxyXG5AQ29tcG9uZW50KHtcclxuICBzZWxlY3RvcjogJ2FwcC11c2VyLWluZm8nLFxyXG4gIHRlbXBsYXRlVXJsOiAnLi91c2VyLWluZm8uY29tcG9uZW50Lmh0bWwnLFxyXG4gIHN0eWxlVXJsczogWycuL3VzZXItaW5mby5jb21wb25lbnQuc2NzcyddXHJcbn0pXHJcbmV4cG9ydCBjbGFzcyBVc2VySW5mb0NvbXBvbmVudCB7XHJcbiAgQElucHV0KClcclxuICBuYW1lITogc3RyaW5nO1xyXG4gIEBJbnB1dCgpXHJcbiAgYWN0aXZlITogYm9vbGVhbjtcclxuICBASW5wdXQoKVxyXG4gIGVtYWlsITogc3RyaW5nO1xyXG4gIEBJbnB1dCgpXHJcbiAgcG9zaXRpb24hOiBzdHJpbmc7XHJcblxyXG5cclxufVxyXG4iLCI8ZGl2IHN0eWxlPVwiZGlzcGxheTogZmxleDsgYWxpZ24taXRlbXM6IGNlbnRlcjsganVzdGlmeS1jb250ZW50OiBzcGFjZS1iZXR3ZWVuOyBiYWNrZ3JvdW5kLWNvbG9yOiB3aGl0ZTtcIj5cbiAgPCEtLSA8ZGl2IGNsYXNzPVwiY29udGVudC1ib3hcIj4gLS0+XG4gIDxkaXYgY2xhc3M9XCJpbmZvLWhvbGRlclwiPlxuICAgICA8ZGl2IGNsYXNzPVwiaW5mby1ob2xkZXJfX3VzZXItaW1hZ2VcIj5cbiAgICAgICAgPGkgY2xhc3M9XCJpY29uLXBlb3BsZS1yZWd1bGFyXCI+PC9pPlxuICAgIDwvZGl2PlxuICAgIDxkaXYgY2xhc3M9XCJpbmZvLWhvbGRlcl9fdXNlci1pbmZvcm1hdGlvblwiPlxuICAgICAgPGRpdiBjbGFzcz1cImluZm8taG9sZGVyX191c2VyLW5hbWVcIj57e25hbWV9fTwvZGl2PlxuICAgICAgPGRpdiBjbGFzcz1cImluZm8taG9sZGVyX191c2VyLWJyZWFkY3J1bWJzXCI+XG4gICAgICAgIDxkaXYgY2xhc3M9XCJpcy1hY3RpdmVcIiAqbmdJZj1cImFjdGl2ZTsgZWxzZSBub3RBY3RpdmVcIj5cbiAgICAgICAgICA8c3BhbiBjbGFzcz1cImljb24tdXNlci1zdGF0dXMgaWNvbi11c2VyLXN0YXR1cy1hY3RpdmVcIj48L3NwYW4+QWN0aXZlXG4gICAgICAgIDwvZGl2PlxuICAgICAgICA8ZGl2IGNsYXNzPVwiaWNvbi10ZXh0LXdyYXBwZXJcIj5cbiAgICAgICAgICA8ZGl2IGNsYXNzPVwiaWNvbi1zZXBhcmF0b3JcIj48L2Rpdj5cbiAgICAgICAgICA8ZGl2IGNsYXNzPVwiZW1haWxcIj57e2VtYWlsfX08L2Rpdj5cbiAgICAgICAgPC9kaXY+XG4gICAgICAgIDxkaXYgY2xhc3M9XCJpY29uLXRleHQtd3JhcHBlclwiPlxuICAgICAgICAgIDxkaXYgY2xhc3M9XCJpY29uLXNlcGFyYXRvclwiPjwvZGl2PlxuICAgICAgICAgIDxkaXYgY2xhc3M9XCJwb3NpdGlvblwiPnt7cG9zaXRpb259fTwvZGl2PlxuICAgICAgICA8L2Rpdj5cbiAgICAgIDwvZGl2PlxuICAgIDwvZGl2PlxuICA8L2Rpdj5cbiAgPCEtLSA8L2Rpdj4gLS0+XG4gIDxkaXYgY2xhc3M9XCJhY3Rpb24tYnRuLXdyYXBwZXJcIj5cbiAgICA8YnV0dG9uPjxzcGFuPkFjdGlvbnM8L3NwYW4+PHN2ZyB4bWxucz1cImh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnXCIgd2lkdGg9XCIxMlwiIGhlaWdodD1cIjE0XCIgdmlld0JveD1cIjAgMCAzMiAzMlwiIHN0eWxlPVwidmVydGljYWwtYWxpZ246bWlkZGxlO1wiPjxwYXRoIGQ9XCJNMjguNzA4IDkuMjkzYTEgMSAwIDAgMC0xLjQxNSAwTDE2IDIwLjU4NiA0LjcwNyA5LjI5M2ExIDEgMCAwIDAtMS40MTQgMS40MTRsMTIgMTJhMSAxIDAgMCAwIDEuNDE0IDBsMTItMTJhMSAxIDAgMCAwIDAtMS40MTRcIiBmaWxsPVwiY3VycmVudENvbG9yXCIvPjwvc3ZnPjwvYnV0dG9uPlxuICA8L2Rpdj5cbjwvZGl2PlxuXG48bmctdGVtcGxhdGUgI25vdEFjdGl2ZT5cbiAgICA8ZGl2IGNsYXNzPVwiaXMtYWN0aXZlXCI+XG4gICAgICAgIDxzdmcgd2lkdGg9XCI4XCIgaGVpZ2h0PVwiOVwiIHZpZXdCb3g9XCIwIDAgOCA5XCIgZmlsbD1cIm5vbmVcIiB4bWxucz1cImh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnXCI+XG4gICAgICAgICAgICA8cGF0aCBmaWxsLXJ1bGU9XCJldmVub2RkXCIgY2xpcC1ydWxlPVwiZXZlbm9kZFwiIGQ9XCJNNCA4LjVDNi4yMDkxNCA4LjUgOCA2LjcwOTE0IDggNC41QzggMi4yOTA4NiA2LjIwOTE0IDAuNSA0IDAuNUMxLjc5MDg2IDAuNSAwIDIuMjkwODYgMCA0LjVDMCA2LjcwOTE0IDEuNzkwODYgOC41IDQgOC41WlwiIGZpbGw9XCJncmV5XCIvPlxuICAgICAgICA8L3N2Zz5cbiAgICAgICAgPGRpdj5Ob3QgYWN0aXZlPC9kaXY+XG4gICAgPC9kaXY+XG48L25nLXRlbXBsYXRlPlxuIl19
|
|
@@ -1067,10 +1067,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
|
|
|
1067
1067
|
class UserInfoComponent {
|
|
1068
1068
|
}
|
|
1069
1069
|
UserInfoComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: UserInfoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1070
|
-
UserInfoComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: UserInfoComponent, selector: "app-user-info", inputs: { name: "name", active: "active", email: "email", position: "position" }, ngImport: i0, template: "<div style=\"display: flex; align-items: center; justify-content: space-between;\">\n <!-- <div class=\"content-box\"> -->\n <div class=\"info-holder\">\n <div class=\"info-holder__user-image\">\n <i class=\"icon-people-regular\"></i>\n </div>\n <div class=\"info-holder__user-information\">\n <div class=\"info-holder__user-name\">{{name}}</div>\n <div class=\"info-holder__user-breadcrumbs\">\n <div class=\"is-active\" *ngIf=\"active; else notActive\">\n <span class=\"icon-user-status icon-user-status-active\"></span>Active\n </div>\n <div class=\"icon-text-wrapper\">\n <div class=\"icon-separator\"></div>\n <div class=\"email\">{{email}}</div>\n </div>\n <div class=\"icon-text-wrapper\">\n <div class=\"icon-separator\"></div>\n <div class=\"position\">{{position}}</div>\n </div>\n </div>\n </div>\n </div>\n <!-- </div> -->\n <div class=\"action-btn-wrapper\">\n <button><span>Actions</span><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"14\" viewBox=\"0 0 32 32\" style=\"vertical-align:middle;\"><path d=\"M28.708 9.293a1 1 0 0 0-1.415 0L16 20.586 4.707 9.293a1 1 0 0 0-1.414 1.414l12 12a1 1 0 0 0 1.414 0l12-12a1 1 0 0 0 0-1.414\" fill=\"currentColor\"/></svg></button>\n </div>\n</div>\n\n<ng-template #notActive>\n <div class=\"is-active\">\n <svg width=\"8\" height=\"9\" viewBox=\"0 0 8 9\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M4 8.5C6.20914 8.5 8 6.70914 8 4.5C8 2.29086 6.20914 0.5 4 0.5C1.79086 0.5 0 2.29086 0 4.5C0 6.70914 1.79086 8.5 4 8.5Z\" fill=\"grey\"/>\n </svg>\n <div>Not active</div>\n </div>\n</ng-template>\n", styles: [".info-holder{display:flex;gap:.75rem;align-items:center;font-family:Inter,sans-serif;height:102px;width:100%;background:white;padding:0 4.375rem;font-family:poppins,sans-serif}.info-holder__user-image img{width:40px;border-radius:120px;margin:20px 0 0}.info-holder__user-information{gap:10px;display:flex;flex-direction:column}.info-holder__user-name{font-size:20px;font-weight:600}.info-holder__user-breadcrumbs{display:flex;gap:8px;font-weight:400;font-size:14px;color:#000000b3;align-items:center}.info-holder .is-active,.info-holder .icon-text-wrapper{display:flex;gap:.5rem;align-items:center}.info-holder .icon-text-wrapper .icon-separator{flex-shrink:0;border-radius:50%;background-color:#000000bf;inline-size:.25rem;block-size:.25rem;margin-inline-end:.25rem}.info-holder .info-holder__user-image{width:40px;height:40px}.info-holder .info-holder__user-image .icon-people-regular{background-image:url(\"data:image/svg+xml,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 width%3D%2232%22 height%3D%2232%22 viewBox%3D%220 0 32 32%22%3E%3Cpath d%3D%22M23.23 16.757a5.746 5.746 0 1 0-7.041-9.048 5 5 0 0 0 .071-.705 4.75 4.75 0 1 0-7.705 3.689 8.43 8.43 0 0 0-6.305 7.84c0 1.052.543 2.521 3.13 3.55 1.643.595 3.371.92 5.118.965a7.8 7.8 0 0 0-.248 1.926c0 1.1.57 2.636 3.285 3.716a18.1 18.1 0 0 0 6.463 1.06c4.853 0 9.75-1.476 9.75-4.776a8.86 8.86 0 0 0-6.517-8.217M20 7.755a4.25 4.25 0 0 1 .006 8.499h-.013a4.25 4.25 0 0 1 .007-8.5M8.26 7.004a3.25 3.25 0 1 1 6.5 0 3.25 3.25 0 0 1-6.5 0m2.76 14.574c-4.177-.093-7.27-1.368-7.27-3.045 0-3.737 3.478-6.778 7.752-6.778a8.7 8.7 0 0 1 2.757.45 5.75 5.75 0 0 0 2.508 4.552 9.43 9.43 0 0 0-5.747 4.82m8.978 6.672c-4.703 0-8.249-1.408-8.249-3.276 0-3.982 3.7-7.22 8.25-7.22s8.248 3.238 8.248 7.22c0 1.868-3.546 3.276-8.25 3.276%22%2F%3E%3C%2Fsvg%3E\");background-repeat:no-repeat;background-position:center;height:40px;width:40px;display:block;background-size:contain}.icon-user-status{width:.5rem;height:.5rem;border-radius:50%;background-color:#707070}.icon-user-status.icon-user-status-active{background-color:#1d805f;display:inline-block}.action-btn-wrapper{margin-right:4rem}.action-btn-wrapper button{background-color:#000000f2;color:#fffffff2;position:relative;display:inline-flex;gap:6px;align-items:center;justify-content:center;overflow:hidden!important;padding:8px .75rem;border:1px solid transparent;border-radius:6.25rem;font-weight:500;font-size:14px;text-overflow:ellipsis;white-space:nowrap;transition:all .1s cubic-bezier(.25,.1,.25,1);inline-size:min-content;max-inline-size:100%}\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
|
|
1070
|
+
UserInfoComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: UserInfoComponent, selector: "app-user-info", inputs: { name: "name", active: "active", email: "email", position: "position" }, ngImport: i0, template: "<div style=\"display: flex; align-items: center; justify-content: space-between; background-color: white;\">\n <!-- <div class=\"content-box\"> -->\n <div class=\"info-holder\">\n <div class=\"info-holder__user-image\">\n <i class=\"icon-people-regular\"></i>\n </div>\n <div class=\"info-holder__user-information\">\n <div class=\"info-holder__user-name\">{{name}}</div>\n <div class=\"info-holder__user-breadcrumbs\">\n <div class=\"is-active\" *ngIf=\"active; else notActive\">\n <span class=\"icon-user-status icon-user-status-active\"></span>Active\n </div>\n <div class=\"icon-text-wrapper\">\n <div class=\"icon-separator\"></div>\n <div class=\"email\">{{email}}</div>\n </div>\n <div class=\"icon-text-wrapper\">\n <div class=\"icon-separator\"></div>\n <div class=\"position\">{{position}}</div>\n </div>\n </div>\n </div>\n </div>\n <!-- </div> -->\n <div class=\"action-btn-wrapper\">\n <button><span>Actions</span><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"14\" viewBox=\"0 0 32 32\" style=\"vertical-align:middle;\"><path d=\"M28.708 9.293a1 1 0 0 0-1.415 0L16 20.586 4.707 9.293a1 1 0 0 0-1.414 1.414l12 12a1 1 0 0 0 1.414 0l12-12a1 1 0 0 0 0-1.414\" fill=\"currentColor\"/></svg></button>\n </div>\n</div>\n\n<ng-template #notActive>\n <div class=\"is-active\">\n <svg width=\"8\" height=\"9\" viewBox=\"0 0 8 9\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M4 8.5C6.20914 8.5 8 6.70914 8 4.5C8 2.29086 6.20914 0.5 4 0.5C1.79086 0.5 0 2.29086 0 4.5C0 6.70914 1.79086 8.5 4 8.5Z\" fill=\"grey\"/>\n </svg>\n <div>Not active</div>\n </div>\n</ng-template>\n", styles: [".info-holder{display:flex;gap:.75rem;align-items:center;font-family:Inter,sans-serif;height:102px;width:100%;background:white;padding:0 4.375rem;font-family:poppins,sans-serif}.info-holder__user-image img{width:40px;border-radius:120px;margin:20px 0 0}.info-holder__user-information{gap:10px;display:flex;flex-direction:column}.info-holder__user-name{font-size:20px;font-weight:600}.info-holder__user-breadcrumbs{display:flex;gap:8px;font-weight:400;font-size:14px;color:#000000b3;align-items:center}.info-holder .is-active,.info-holder .icon-text-wrapper{display:flex;gap:.5rem;align-items:center}.info-holder .icon-text-wrapper .icon-separator{flex-shrink:0;border-radius:50%;background-color:#000000bf;inline-size:.25rem;block-size:.25rem;margin-inline-end:.25rem}.info-holder .info-holder__user-image{width:40px;height:40px}.info-holder .info-holder__user-image .icon-people-regular{background-image:url(\"data:image/svg+xml,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 width%3D%2232%22 height%3D%2232%22 viewBox%3D%220 0 32 32%22%3E%3Cpath d%3D%22M23.23 16.757a5.746 5.746 0 1 0-7.041-9.048 5 5 0 0 0 .071-.705 4.75 4.75 0 1 0-7.705 3.689 8.43 8.43 0 0 0-6.305 7.84c0 1.052.543 2.521 3.13 3.55 1.643.595 3.371.92 5.118.965a7.8 7.8 0 0 0-.248 1.926c0 1.1.57 2.636 3.285 3.716a18.1 18.1 0 0 0 6.463 1.06c4.853 0 9.75-1.476 9.75-4.776a8.86 8.86 0 0 0-6.517-8.217M20 7.755a4.25 4.25 0 0 1 .006 8.499h-.013a4.25 4.25 0 0 1 .007-8.5M8.26 7.004a3.25 3.25 0 1 1 6.5 0 3.25 3.25 0 0 1-6.5 0m2.76 14.574c-4.177-.093-7.27-1.368-7.27-3.045 0-3.737 3.478-6.778 7.752-6.778a8.7 8.7 0 0 1 2.757.45 5.75 5.75 0 0 0 2.508 4.552 9.43 9.43 0 0 0-5.747 4.82m8.978 6.672c-4.703 0-8.249-1.408-8.249-3.276 0-3.982 3.7-7.22 8.25-7.22s8.248 3.238 8.248 7.22c0 1.868-3.546 3.276-8.25 3.276%22%2F%3E%3C%2Fsvg%3E\");background-repeat:no-repeat;background-position:center;height:40px;width:40px;display:block;background-size:contain}.icon-user-status{width:.5rem;height:.5rem;border-radius:50%;background-color:#707070}.icon-user-status.icon-user-status-active{background-color:#1d805f;display:inline-block}.action-btn-wrapper{margin-right:4rem}.action-btn-wrapper button{background-color:#000000f2;color:#fffffff2;position:relative;display:inline-flex;gap:6px;align-items:center;justify-content:center;overflow:hidden!important;padding:8px .75rem;border:1px solid transparent;border-radius:6.25rem;font-weight:500;font-size:14px;text-overflow:ellipsis;white-space:nowrap;transition:all .1s cubic-bezier(.25,.1,.25,1);inline-size:min-content;max-inline-size:100%}\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
|
|
1071
1071
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: UserInfoComponent, decorators: [{
|
|
1072
1072
|
type: Component,
|
|
1073
|
-
args: [{ selector: 'app-user-info', template: "<div style=\"display: flex; align-items: center; justify-content: space-between;\">\n <!-- <div class=\"content-box\"> -->\n <div class=\"info-holder\">\n <div class=\"info-holder__user-image\">\n <i class=\"icon-people-regular\"></i>\n </div>\n <div class=\"info-holder__user-information\">\n <div class=\"info-holder__user-name\">{{name}}</div>\n <div class=\"info-holder__user-breadcrumbs\">\n <div class=\"is-active\" *ngIf=\"active; else notActive\">\n <span class=\"icon-user-status icon-user-status-active\"></span>Active\n </div>\n <div class=\"icon-text-wrapper\">\n <div class=\"icon-separator\"></div>\n <div class=\"email\">{{email}}</div>\n </div>\n <div class=\"icon-text-wrapper\">\n <div class=\"icon-separator\"></div>\n <div class=\"position\">{{position}}</div>\n </div>\n </div>\n </div>\n </div>\n <!-- </div> -->\n <div class=\"action-btn-wrapper\">\n <button><span>Actions</span><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"14\" viewBox=\"0 0 32 32\" style=\"vertical-align:middle;\"><path d=\"M28.708 9.293a1 1 0 0 0-1.415 0L16 20.586 4.707 9.293a1 1 0 0 0-1.414 1.414l12 12a1 1 0 0 0 1.414 0l12-12a1 1 0 0 0 0-1.414\" fill=\"currentColor\"/></svg></button>\n </div>\n</div>\n\n<ng-template #notActive>\n <div class=\"is-active\">\n <svg width=\"8\" height=\"9\" viewBox=\"0 0 8 9\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M4 8.5C6.20914 8.5 8 6.70914 8 4.5C8 2.29086 6.20914 0.5 4 0.5C1.79086 0.5 0 2.29086 0 4.5C0 6.70914 1.79086 8.5 4 8.5Z\" fill=\"grey\"/>\n </svg>\n <div>Not active</div>\n </div>\n</ng-template>\n", styles: [".info-holder{display:flex;gap:.75rem;align-items:center;font-family:Inter,sans-serif;height:102px;width:100%;background:white;padding:0 4.375rem;font-family:poppins,sans-serif}.info-holder__user-image img{width:40px;border-radius:120px;margin:20px 0 0}.info-holder__user-information{gap:10px;display:flex;flex-direction:column}.info-holder__user-name{font-size:20px;font-weight:600}.info-holder__user-breadcrumbs{display:flex;gap:8px;font-weight:400;font-size:14px;color:#000000b3;align-items:center}.info-holder .is-active,.info-holder .icon-text-wrapper{display:flex;gap:.5rem;align-items:center}.info-holder .icon-text-wrapper .icon-separator{flex-shrink:0;border-radius:50%;background-color:#000000bf;inline-size:.25rem;block-size:.25rem;margin-inline-end:.25rem}.info-holder .info-holder__user-image{width:40px;height:40px}.info-holder .info-holder__user-image .icon-people-regular{background-image:url(\"data:image/svg+xml,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 width%3D%2232%22 height%3D%2232%22 viewBox%3D%220 0 32 32%22%3E%3Cpath d%3D%22M23.23 16.757a5.746 5.746 0 1 0-7.041-9.048 5 5 0 0 0 .071-.705 4.75 4.75 0 1 0-7.705 3.689 8.43 8.43 0 0 0-6.305 7.84c0 1.052.543 2.521 3.13 3.55 1.643.595 3.371.92 5.118.965a7.8 7.8 0 0 0-.248 1.926c0 1.1.57 2.636 3.285 3.716a18.1 18.1 0 0 0 6.463 1.06c4.853 0 9.75-1.476 9.75-4.776a8.86 8.86 0 0 0-6.517-8.217M20 7.755a4.25 4.25 0 0 1 .006 8.499h-.013a4.25 4.25 0 0 1 .007-8.5M8.26 7.004a3.25 3.25 0 1 1 6.5 0 3.25 3.25 0 0 1-6.5 0m2.76 14.574c-4.177-.093-7.27-1.368-7.27-3.045 0-3.737 3.478-6.778 7.752-6.778a8.7 8.7 0 0 1 2.757.45 5.75 5.75 0 0 0 2.508 4.552 9.43 9.43 0 0 0-5.747 4.82m8.978 6.672c-4.703 0-8.249-1.408-8.249-3.276 0-3.982 3.7-7.22 8.25-7.22s8.248 3.238 8.248 7.22c0 1.868-3.546 3.276-8.25 3.276%22%2F%3E%3C%2Fsvg%3E\");background-repeat:no-repeat;background-position:center;height:40px;width:40px;display:block;background-size:contain}.icon-user-status{width:.5rem;height:.5rem;border-radius:50%;background-color:#707070}.icon-user-status.icon-user-status-active{background-color:#1d805f;display:inline-block}.action-btn-wrapper{margin-right:4rem}.action-btn-wrapper button{background-color:#000000f2;color:#fffffff2;position:relative;display:inline-flex;gap:6px;align-items:center;justify-content:center;overflow:hidden!important;padding:8px .75rem;border:1px solid transparent;border-radius:6.25rem;font-weight:500;font-size:14px;text-overflow:ellipsis;white-space:nowrap;transition:all .1s cubic-bezier(.25,.1,.25,1);inline-size:min-content;max-inline-size:100%}\n"] }]
|
|
1073
|
+
args: [{ selector: 'app-user-info', template: "<div style=\"display: flex; align-items: center; justify-content: space-between; background-color: white;\">\n <!-- <div class=\"content-box\"> -->\n <div class=\"info-holder\">\n <div class=\"info-holder__user-image\">\n <i class=\"icon-people-regular\"></i>\n </div>\n <div class=\"info-holder__user-information\">\n <div class=\"info-holder__user-name\">{{name}}</div>\n <div class=\"info-holder__user-breadcrumbs\">\n <div class=\"is-active\" *ngIf=\"active; else notActive\">\n <span class=\"icon-user-status icon-user-status-active\"></span>Active\n </div>\n <div class=\"icon-text-wrapper\">\n <div class=\"icon-separator\"></div>\n <div class=\"email\">{{email}}</div>\n </div>\n <div class=\"icon-text-wrapper\">\n <div class=\"icon-separator\"></div>\n <div class=\"position\">{{position}}</div>\n </div>\n </div>\n </div>\n </div>\n <!-- </div> -->\n <div class=\"action-btn-wrapper\">\n <button><span>Actions</span><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"14\" viewBox=\"0 0 32 32\" style=\"vertical-align:middle;\"><path d=\"M28.708 9.293a1 1 0 0 0-1.415 0L16 20.586 4.707 9.293a1 1 0 0 0-1.414 1.414l12 12a1 1 0 0 0 1.414 0l12-12a1 1 0 0 0 0-1.414\" fill=\"currentColor\"/></svg></button>\n </div>\n</div>\n\n<ng-template #notActive>\n <div class=\"is-active\">\n <svg width=\"8\" height=\"9\" viewBox=\"0 0 8 9\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M4 8.5C6.20914 8.5 8 6.70914 8 4.5C8 2.29086 6.20914 0.5 4 0.5C1.79086 0.5 0 2.29086 0 4.5C0 6.70914 1.79086 8.5 4 8.5Z\" fill=\"grey\"/>\n </svg>\n <div>Not active</div>\n </div>\n</ng-template>\n", styles: [".info-holder{display:flex;gap:.75rem;align-items:center;font-family:Inter,sans-serif;height:102px;width:100%;background:white;padding:0 4.375rem;font-family:poppins,sans-serif}.info-holder__user-image img{width:40px;border-radius:120px;margin:20px 0 0}.info-holder__user-information{gap:10px;display:flex;flex-direction:column}.info-holder__user-name{font-size:20px;font-weight:600}.info-holder__user-breadcrumbs{display:flex;gap:8px;font-weight:400;font-size:14px;color:#000000b3;align-items:center}.info-holder .is-active,.info-holder .icon-text-wrapper{display:flex;gap:.5rem;align-items:center}.info-holder .icon-text-wrapper .icon-separator{flex-shrink:0;border-radius:50%;background-color:#000000bf;inline-size:.25rem;block-size:.25rem;margin-inline-end:.25rem}.info-holder .info-holder__user-image{width:40px;height:40px}.info-holder .info-holder__user-image .icon-people-regular{background-image:url(\"data:image/svg+xml,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 width%3D%2232%22 height%3D%2232%22 viewBox%3D%220 0 32 32%22%3E%3Cpath d%3D%22M23.23 16.757a5.746 5.746 0 1 0-7.041-9.048 5 5 0 0 0 .071-.705 4.75 4.75 0 1 0-7.705 3.689 8.43 8.43 0 0 0-6.305 7.84c0 1.052.543 2.521 3.13 3.55 1.643.595 3.371.92 5.118.965a7.8 7.8 0 0 0-.248 1.926c0 1.1.57 2.636 3.285 3.716a18.1 18.1 0 0 0 6.463 1.06c4.853 0 9.75-1.476 9.75-4.776a8.86 8.86 0 0 0-6.517-8.217M20 7.755a4.25 4.25 0 0 1 .006 8.499h-.013a4.25 4.25 0 0 1 .007-8.5M8.26 7.004a3.25 3.25 0 1 1 6.5 0 3.25 3.25 0 0 1-6.5 0m2.76 14.574c-4.177-.093-7.27-1.368-7.27-3.045 0-3.737 3.478-6.778 7.752-6.778a8.7 8.7 0 0 1 2.757.45 5.75 5.75 0 0 0 2.508 4.552 9.43 9.43 0 0 0-5.747 4.82m8.978 6.672c-4.703 0-8.249-1.408-8.249-3.276 0-3.982 3.7-7.22 8.25-7.22s8.248 3.238 8.248 7.22c0 1.868-3.546 3.276-8.25 3.276%22%2F%3E%3C%2Fsvg%3E\");background-repeat:no-repeat;background-position:center;height:40px;width:40px;display:block;background-size:contain}.icon-user-status{width:.5rem;height:.5rem;border-radius:50%;background-color:#707070}.icon-user-status.icon-user-status-active{background-color:#1d805f;display:inline-block}.action-btn-wrapper{margin-right:4rem}.action-btn-wrapper button{background-color:#000000f2;color:#fffffff2;position:relative;display:inline-flex;gap:6px;align-items:center;justify-content:center;overflow:hidden!important;padding:8px .75rem;border:1px solid transparent;border-radius:6.25rem;font-weight:500;font-size:14px;text-overflow:ellipsis;white-space:nowrap;transition:all .1s cubic-bezier(.25,.1,.25,1);inline-size:min-content;max-inline-size:100%}\n"] }]
|
|
1074
1074
|
}], propDecorators: { name: [{
|
|
1075
1075
|
type: Input
|
|
1076
1076
|
}], active: [{
|