@tuki-io/tuki-widgets 0.0.122 → 0.0.124

package/fesm2020/tuki-io-tuki-widgets-user-manage.mjs

@@ -1065,10 +1065,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
 class UserInfoComponent {
 }
 UserInfoComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: UserInfoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-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"] }] });
+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"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: UserInfoComponent, decorators: [{
             type: Component,
-            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"] }]
+            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"] }]
         }], propDecorators: { name: [{
                 type: Input
             }], active: [{