@tuki-io/tuki-widgets 0.0.219-dev.8 → 0.0.219-dev.9

package/esm2020/user-manage/src/device-list/device-list.component.mjs

@@ -14,13 +14,13 @@ export class DeviceListComponent {
     }
 }
 DeviceListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DeviceListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-DeviceListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: DeviceListComponent, selector: "app-device-list", inputs: { devices: "devices" }, outputs: { onDeviceSelect: "onDeviceSelect" }, ngImport: i0, template: "<div class=\"info-boxes-container\">\n  <!--    USER INFO BOX-->\n  <div class=\"user-info-box user-details-box\">\n      <h3 class=\"user-box-title\">Devices</h3>\n      <div class=\"form-holder__inputs\">\n        <ng-container *ngFor=\"let device of devices; let isLast = last\">\n          <app-device-row [device]=\"device\" (onDeviceSelect)=\"selectDevice($event)\"></app-device-row>\n          <mat-divider></mat-divider>\n        </ng-container>\n        <button class=\"add-btn\" style=\"opacity: 0.4; pointer-events: none;\">\n          Add device\n        </button>\n      </div>\n  </div>\n\n  <div class=\"user-info-box user-details-box\">\n      <h3 class=\"user-box-title\">Devices settings</h3>\n      <div class=\"form-holder__inputs\">\n        <div class=\"input-holder\">\n          <div class=\"input-holder__name\">\n            <span class=\"phone-name\">Software upgrade channel</span>\n          </div>\n          <div class=\"input-holder__input\">\n            <div class=\"info-labels\">\n              <span class=\"info-icon\"></span>\n              <span class=\"status-label\">Software upgrade channel setting has moved</span>\n            </div>\n          </div>\n        </div>\n      </div>\n  </div>\n</div>", styles: ["@import\"https://fonts.googleapis.com/css?family=Poppins:400,100,200,300,500,600,800,700,900\";@import\"https://fonts.googleapis.com/css2?family=Inter:wght@300;400&display=swap\";.info-holder{display:flex;gap:16px;align-items:center;font-family:Inter,sans-serif;height:102px;width:100%;background:white;margin:0 0 30px}.info-holder__user-image img{width:40px;border-radius:120px;margin:20px 0 0}.info-holder__user-information{padding:10px;margin:10px;gap:10px;display:flex;flex-direction:column}.info-holder__user-name{font-size:20px;font-weight:500}.info-holder__user-breadcrumbs{display:flex;gap:8px;font-weight:400;font-size:14px;color:#000000b3;align-items:center}.info-holder .icon-separator{height:5px;width:5px;background-color:#000000b3;border-radius:50%}.info-holder .is-active{display:flex;gap:8px;align-items:center}.icon-user-status{width:.5rem;height:.5rem;border-radius:50%;background-color:#707070;margin:0 5px 0 0}.icon-user-status.icon-user-status-active{background-color:#1d805f;display:inline-block}.webex-list{padding:2.5rem}.webex-list-header{display:flex;align-items:center;padding:1rem}.webex-list-header__hr{width:100%;font-size:12px}.device-item{position:relative;display:flex;align-items:center;justify-content:space-between;background-color:#fff;border-bottom:1px solid #b0b0b0;padding:.8rem;z-index:10;transition:background-color .3s;cursor:pointer}.device-item__td{width:100%}.device-item__actions-menu{position:absolute;margin:0 1rem;right:0}.device-item__more{display:flex;align-items:center;justify-content:center;cursor:pointer;color:#b0b0b0;border-radius:50%;padding:.5rem;transition:background-color .3s ease-in-out}.info-boxes-container{padding:24px 0;display:flex;flex-direction:column;gap:24px}.info-boxes-container .user-info-box{background:white;display:flex;gap:2rem;border-radius:8px;border:rgba(0,0,0,.2) 1px solid;padding:24px;font-weight:400;font-size:14px}.info-boxes-container .user-info-box .user-box-title{display:flex;font-weight:500;font-size:16px;max-inline-size:11.25rem;flex:1;color:#000000f2;margin-top:3px;font-family:Poppins,Poppins,sans-serif}.info-boxes-container .user-info-box .form-holder__inputs{display:flex;flex-direction:column;flex:1}.info-boxes-container .user-info-box .form-holder__inputs .input-holder{display:flex;gap:1.5rem;padding:.5rem 0;font-size:.75rem;line-height:1.25;align-items:center;overflow:hidden}.info-boxes-container .user-info-box .form-holder__inputs .input-holder:nth-child(1){padding-top:0}.info-boxes-container .user-info-box .form-holder__inputs .input-holder:last-child{padding-bottom:0}.info-boxes-container .user-info-box .form-holder__inputs .input-holder__name{font-weight:500!important;font-size:14px!important;flex-basis:12rem;display:flex;gap:.5rem;align-items:center;flex-basis:15rem!important}.info-boxes-container .user-info-box .form-holder__inputs .input-holder__name .phone-icon{inline-size:2.25rem;block-size:2.25rem;background-repeat:no-repeat;background-position:center;height:40px;width:40px;display:block;background-size:contain}.info-boxes-container .user-info-box .form-holder__inputs .input-holder__name .primary-label{background-color:#08599c;display:inline-flex;gap:.25rem;align-items:center;justify-content:center;padding:.25rem .5rem;border-radius:.25rem;color:#fffffff2;font-size:.75rem;line-height:1;text-align:center}.info-boxes-container .user-info-box .form-holder__inputs .input-holder__input{display:flex;flex:1;gap:.75rem;align-items:center}.info-boxes-container .user-info-box .form-holder__inputs .input-holder__input .status-indicator{height:7px;width:7px;background-color:#707070;border-radius:50px}.info-boxes-container .user-info-box .form-holder__inputs .input-holder__input .status-label{display:flex;flex-wrap:wrap;gap:1.5rem;overflow:auto;font-size:.9rem;line-height:1.25;color:#000000f2}.info-boxes-container .user-info-box .form-holder__inputs .input-holder__input .info-labels{display:flex;gap:.25rem;align-items:center;justify-content:center;padding:.25rem .5rem;border:.0625rem solid transparent;border-radius:.25rem;line-height:1;text-overflow:ellipsis;border-color:#d6b220;background-color:#f7f6dc;color:#735107}.info-boxes-container .user-info-box .form-holder__inputs .input-holder__input .info-labels .info-icon{inline-size:2.25rem;block-size:2.25rem;background-repeat:no-repeat;background-position:center;height:13px;width:13px;display:block;background-size:contain;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%22M15.75 10.75a1.25 1.25 0 1 0 0-2.5 1.25 1.25 0 0 0 0 2.5M17 14.5a1 1 0 0 0-1-1h-2a1 1 0 1 0 0 2h1V22h-2a1 1 0 1 0 0 2h6a1 1 0 1 0 0-2h-2zM2 16C2 8.268 8.268 2 16 2s14 6.268 14 14-6.268 14-14 14S2 23.732 2 16M16 4C9.373 4 4 9.373 4 16s5.373 12 12 12 12-5.373 12-12S22.627 4 16 4%22%2F%3E%3C%2Fsvg%3E\")}.info-boxes-container .user-info-box .form-holder__inputs .add-btn{position:relative;display:inline-flex;gap:.375rem;align-items:center;justify-content:center;overflow:hidden!important;padding:.75rem;border:.0625rem solid transparent;border-radius:6.25rem;font-weight:500;font-size:.875rem;text-overflow:ellipsis;white-space:nowrap;transition:all .1s cubic-bezier(.25,.1,.25,1);inline-size:min-content;max-inline-size:100%;border-color:#00000080;background-color:#0000;color:#000000f2;margin:1rem 0;block-size:2rem}.info-boxes-container .user-info-box .form-holder__inputs .mat-divider{margin:0!important}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: i2.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: i3.DeviceRowComponent, selector: "app-device-row", inputs: ["device"], outputs: ["onDeviceSelect"] }] });
+DeviceListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: DeviceListComponent, selector: "app-device-list", inputs: { devices: "devices" }, outputs: { onDeviceSelect: "onDeviceSelect" }, ngImport: i0, template: "<div class=\"info-boxes-container\">\r\n  <!--    USER INFO BOX-->\r\n  <div class=\"user-info-box user-details-box\">\r\n      <h3 class=\"user-box-title\">Devices</h3>\r\n      <div class=\"form-holder__inputs\">\r\n        <ng-container *ngFor=\"let device of devices; let isLast = last\">\r\n          <app-device-row [device]=\"device\" (onDeviceSelect)=\"selectDevice($event)\"></app-device-row>\r\n          <mat-divider></mat-divider>\r\n        </ng-container>\r\n        <button class=\"add-btn\" style=\"opacity: 0.4; pointer-events: none;\">\r\n          Add device\r\n        </button>\r\n      </div>\r\n  </div>\r\n\r\n  <div class=\"user-info-box user-details-box\">\r\n      <h3 class=\"user-box-title\">Devices settings</h3>\r\n      <div class=\"form-holder__inputs\">\r\n        <div class=\"input-holder\">\r\n          <div class=\"input-holder__name\">\r\n            <span class=\"phone-name\">Software upgrade channel</span>\r\n          </div>\r\n          <div class=\"input-holder__input\">\r\n            <div class=\"info-labels\">\r\n              <span class=\"info-icon\"></span>\r\n              <span class=\"status-label\">Software upgrade channel setting has moved</span>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n  </div>\r\n</div>", styles: ["@import\"https://fonts.googleapis.com/css?family=Poppins:400,100,200,300,500,600,800,700,900\";@import\"https://fonts.googleapis.com/css2?family=Inter:wght@300;400&display=swap\";.info-holder{display:flex;gap:16px;align-items:center;font-family:Inter,sans-serif;height:102px;width:100%;background:white;margin:0 0 30px}.info-holder__user-image img{width:40px;border-radius:120px;margin:20px 0 0}.info-holder__user-information{padding:10px;margin:10px;gap:10px;display:flex;flex-direction:column}.info-holder__user-name{font-size:20px;font-weight:500}.info-holder__user-breadcrumbs{display:flex;gap:8px;font-weight:400;font-size:14px;color:#000000b3;align-items:center}.info-holder .icon-separator{height:5px;width:5px;background-color:#000000b3;border-radius:50%}.info-holder .is-active{display:flex;gap:8px;align-items:center}.icon-user-status{width:.5rem;height:.5rem;border-radius:50%;background-color:#707070;margin:0 5px 0 0}.icon-user-status.icon-user-status-active{background-color:#1d805f;display:inline-block}.webex-list{padding:2.5rem}.webex-list-header{display:flex;align-items:center;padding:1rem}.webex-list-header__hr{width:100%;font-size:12px}.device-item{position:relative;display:flex;align-items:center;justify-content:space-between;background-color:#fff;border-bottom:1px solid #b0b0b0;padding:.8rem;z-index:10;transition:background-color .3s;cursor:pointer}.device-item__td{width:100%}.device-item__actions-menu{position:absolute;margin:0 1rem;right:0}.device-item__more{display:flex;align-items:center;justify-content:center;cursor:pointer;color:#b0b0b0;border-radius:50%;padding:.5rem;transition:background-color .3s ease-in-out}.info-boxes-container{padding:24px 0;display:flex;flex-direction:column;gap:24px}.info-boxes-container .user-info-box{background:white;display:flex;gap:2rem;border-radius:8px;border:rgba(0,0,0,.2) 1px solid;padding:24px;font-weight:400;font-size:14px}.info-boxes-container .user-info-box .user-box-title{display:flex;font-weight:500;font-size:16px;max-inline-size:11.25rem;flex:1;color:#000000f2;margin-top:3px;font-family:Poppins,Poppins,sans-serif}.info-boxes-container .user-info-box .form-holder__inputs{display:flex;flex-direction:column;flex:1}.info-boxes-container .user-info-box .form-holder__inputs .input-holder{display:flex;gap:1.5rem;padding:.5rem 0;font-size:.75rem;line-height:1.25;align-items:center;overflow:hidden}.info-boxes-container .user-info-box .form-holder__inputs .input-holder:nth-child(1){padding-top:0}.info-boxes-container .user-info-box .form-holder__inputs .input-holder:last-child{padding-bottom:0}.info-boxes-container .user-info-box .form-holder__inputs .input-holder__name{font-weight:500!important;font-size:14px!important;flex-basis:12rem;display:flex;gap:.5rem;align-items:center;flex-basis:15rem!important}.info-boxes-container .user-info-box .form-holder__inputs .input-holder__name .phone-icon{inline-size:2.25rem;block-size:2.25rem;background-repeat:no-repeat;background-position:center;height:40px;width:40px;display:block;background-size:contain}.info-boxes-container .user-info-box .form-holder__inputs .input-holder__name .primary-label{background-color:#08599c;display:inline-flex;gap:.25rem;align-items:center;justify-content:center;padding:.25rem .5rem;border-radius:.25rem;color:#fffffff2;font-size:.75rem;line-height:1;text-align:center}.info-boxes-container .user-info-box .form-holder__inputs .input-holder__input{display:flex;flex:1;gap:.75rem;align-items:center}.info-boxes-container .user-info-box .form-holder__inputs .input-holder__input .status-indicator{height:7px;width:7px;background-color:#707070;border-radius:50px}.info-boxes-container .user-info-box .form-holder__inputs .input-holder__input .status-label{display:flex;flex-wrap:wrap;gap:1.5rem;overflow:auto;font-size:.9rem;line-height:1.25;color:#000000f2}.info-boxes-container .user-info-box .form-holder__inputs .input-holder__input .info-labels{display:flex;gap:.25rem;align-items:center;justify-content:center;padding:.25rem .5rem;border:.0625rem solid transparent;border-radius:.25rem;line-height:1;text-overflow:ellipsis;border-color:#d6b220;background-color:#f7f6dc;color:#735107}.info-boxes-container .user-info-box .form-holder__inputs .input-holder__input .info-labels .info-icon{inline-size:2.25rem;block-size:2.25rem;background-repeat:no-repeat;background-position:center;height:13px;width:13px;display:block;background-size:contain;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%22M15.75 10.75a1.25 1.25 0 1 0 0-2.5 1.25 1.25 0 0 0 0 2.5M17 14.5a1 1 0 0 0-1-1h-2a1 1 0 1 0 0 2h1V22h-2a1 1 0 1 0 0 2h6a1 1 0 1 0 0-2h-2zM2 16C2 8.268 8.268 2 16 2s14 6.268 14 14-6.268 14-14 14S2 23.732 2 16M16 4C9.373 4 4 9.373 4 16s5.373 12 12 12 12-5.373 12-12S22.627 4 16 4%22%2F%3E%3C%2Fsvg%3E\")}.info-boxes-container .user-info-box .form-holder__inputs .add-btn{position:relative;display:inline-flex;gap:.375rem;align-items:center;justify-content:center;overflow:hidden!important;padding:.75rem;border:.0625rem solid transparent;border-radius:6.25rem;font-weight:500;font-size:.875rem;text-overflow:ellipsis;white-space:nowrap;transition:all .1s cubic-bezier(.25,.1,.25,1);inline-size:min-content;max-inline-size:100%;border-color:#00000080;background-color:#0000;color:#000000f2;margin:1rem 0;block-size:2rem}.info-boxes-container .user-info-box .form-holder__inputs .mat-divider{margin:0!important}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: i2.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: i3.DeviceRowComponent, selector: "app-device-row", inputs: ["device"], outputs: ["onDeviceSelect"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DeviceListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-device-list', template: "<div class=\"info-boxes-container\">\n  <!--    USER INFO BOX-->\n  <div class=\"user-info-box user-details-box\">\n      <h3 class=\"user-box-title\">Devices</h3>\n      <div class=\"form-holder__inputs\">\n        <ng-container *ngFor=\"let device of devices; let isLast = last\">\n          <app-device-row [device]=\"device\" (onDeviceSelect)=\"selectDevice($event)\"></app-device-row>\n          <mat-divider></mat-divider>\n        </ng-container>\n        <button class=\"add-btn\" style=\"opacity: 0.4; pointer-events: none;\">\n          Add device\n        </button>\n      </div>\n  </div>\n\n  <div class=\"user-info-box user-details-box\">\n      <h3 class=\"user-box-title\">Devices settings</h3>\n      <div class=\"form-holder__inputs\">\n        <div class=\"input-holder\">\n          <div class=\"input-holder__name\">\n            <span class=\"phone-name\">Software upgrade channel</span>\n          </div>\n          <div class=\"input-holder__input\">\n            <div class=\"info-labels\">\n              <span class=\"info-icon\"></span>\n              <span class=\"status-label\">Software upgrade channel setting has moved</span>\n            </div>\n          </div>\n        </div>\n      </div>\n  </div>\n</div>", styles: ["@import\"https://fonts.googleapis.com/css?family=Poppins:400,100,200,300,500,600,800,700,900\";@import\"https://fonts.googleapis.com/css2?family=Inter:wght@300;400&display=swap\";.info-holder{display:flex;gap:16px;align-items:center;font-family:Inter,sans-serif;height:102px;width:100%;background:white;margin:0 0 30px}.info-holder__user-image img{width:40px;border-radius:120px;margin:20px 0 0}.info-holder__user-information{padding:10px;margin:10px;gap:10px;display:flex;flex-direction:column}.info-holder__user-name{font-size:20px;font-weight:500}.info-holder__user-breadcrumbs{display:flex;gap:8px;font-weight:400;font-size:14px;color:#000000b3;align-items:center}.info-holder .icon-separator{height:5px;width:5px;background-color:#000000b3;border-radius:50%}.info-holder .is-active{display:flex;gap:8px;align-items:center}.icon-user-status{width:.5rem;height:.5rem;border-radius:50%;background-color:#707070;margin:0 5px 0 0}.icon-user-status.icon-user-status-active{background-color:#1d805f;display:inline-block}.webex-list{padding:2.5rem}.webex-list-header{display:flex;align-items:center;padding:1rem}.webex-list-header__hr{width:100%;font-size:12px}.device-item{position:relative;display:flex;align-items:center;justify-content:space-between;background-color:#fff;border-bottom:1px solid #b0b0b0;padding:.8rem;z-index:10;transition:background-color .3s;cursor:pointer}.device-item__td{width:100%}.device-item__actions-menu{position:absolute;margin:0 1rem;right:0}.device-item__more{display:flex;align-items:center;justify-content:center;cursor:pointer;color:#b0b0b0;border-radius:50%;padding:.5rem;transition:background-color .3s ease-in-out}.info-boxes-container{padding:24px 0;display:flex;flex-direction:column;gap:24px}.info-boxes-container .user-info-box{background:white;display:flex;gap:2rem;border-radius:8px;border:rgba(0,0,0,.2) 1px solid;padding:24px;font-weight:400;font-size:14px}.info-boxes-container .user-info-box .user-box-title{display:flex;font-weight:500;font-size:16px;max-inline-size:11.25rem;flex:1;color:#000000f2;margin-top:3px;font-family:Poppins,Poppins,sans-serif}.info-boxes-container .user-info-box .form-holder__inputs{display:flex;flex-direction:column;flex:1}.info-boxes-container .user-info-box .form-holder__inputs .input-holder{display:flex;gap:1.5rem;padding:.5rem 0;font-size:.75rem;line-height:1.25;align-items:center;overflow:hidden}.info-boxes-container .user-info-box .form-holder__inputs .input-holder:nth-child(1){padding-top:0}.info-boxes-container .user-info-box .form-holder__inputs .input-holder:last-child{padding-bottom:0}.info-boxes-container .user-info-box .form-holder__inputs .input-holder__name{font-weight:500!important;font-size:14px!important;flex-basis:12rem;display:flex;gap:.5rem;align-items:center;flex-basis:15rem!important}.info-boxes-container .user-info-box .form-holder__inputs .input-holder__name .phone-icon{inline-size:2.25rem;block-size:2.25rem;background-repeat:no-repeat;background-position:center;height:40px;width:40px;display:block;background-size:contain}.info-boxes-container .user-info-box .form-holder__inputs .input-holder__name .primary-label{background-color:#08599c;display:inline-flex;gap:.25rem;align-items:center;justify-content:center;padding:.25rem .5rem;border-radius:.25rem;color:#fffffff2;font-size:.75rem;line-height:1;text-align:center}.info-boxes-container .user-info-box .form-holder__inputs .input-holder__input{display:flex;flex:1;gap:.75rem;align-items:center}.info-boxes-container .user-info-box .form-holder__inputs .input-holder__input .status-indicator{height:7px;width:7px;background-color:#707070;border-radius:50px}.info-boxes-container .user-info-box .form-holder__inputs .input-holder__input .status-label{display:flex;flex-wrap:wrap;gap:1.5rem;overflow:auto;font-size:.9rem;line-height:1.25;color:#000000f2}.info-boxes-container .user-info-box .form-holder__inputs .input-holder__input .info-labels{display:flex;gap:.25rem;align-items:center;justify-content:center;padding:.25rem .5rem;border:.0625rem solid transparent;border-radius:.25rem;line-height:1;text-overflow:ellipsis;border-color:#d6b220;background-color:#f7f6dc;color:#735107}.info-boxes-container .user-info-box .form-holder__inputs .input-holder__input .info-labels .info-icon{inline-size:2.25rem;block-size:2.25rem;background-repeat:no-repeat;background-position:center;height:13px;width:13px;display:block;background-size:contain;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%22M15.75 10.75a1.25 1.25 0 1 0 0-2.5 1.25 1.25 0 0 0 0 2.5M17 14.5a1 1 0 0 0-1-1h-2a1 1 0 1 0 0 2h1V22h-2a1 1 0 1 0 0 2h6a1 1 0 1 0 0-2h-2zM2 16C2 8.268 8.268 2 16 2s14 6.268 14 14-6.268 14-14 14S2 23.732 2 16M16 4C9.373 4 4 9.373 4 16s5.373 12 12 12 12-5.373 12-12S22.627 4 16 4%22%2F%3E%3C%2Fsvg%3E\")}.info-boxes-container .user-info-box .form-holder__inputs .add-btn{position:relative;display:inline-flex;gap:.375rem;align-items:center;justify-content:center;overflow:hidden!important;padding:.75rem;border:.0625rem solid transparent;border-radius:6.25rem;font-weight:500;font-size:.875rem;text-overflow:ellipsis;white-space:nowrap;transition:all .1s cubic-bezier(.25,.1,.25,1);inline-size:min-content;max-inline-size:100%;border-color:#00000080;background-color:#0000;color:#000000f2;margin:1rem 0;block-size:2rem}.info-boxes-container .user-info-box .form-holder__inputs .mat-divider{margin:0!important}\n"] }]
+            args: [{ selector: 'app-device-list', template: "<div class=\"info-boxes-container\">\r\n  <!--    USER INFO BOX-->\r\n  <div class=\"user-info-box user-details-box\">\r\n      <h3 class=\"user-box-title\">Devices</h3>\r\n      <div class=\"form-holder__inputs\">\r\n        <ng-container *ngFor=\"let device of devices; let isLast = last\">\r\n          <app-device-row [device]=\"device\" (onDeviceSelect)=\"selectDevice($event)\"></app-device-row>\r\n          <mat-divider></mat-divider>\r\n        </ng-container>\r\n        <button class=\"add-btn\" style=\"opacity: 0.4; pointer-events: none;\">\r\n          Add device\r\n        </button>\r\n      </div>\r\n  </div>\r\n\r\n  <div class=\"user-info-box user-details-box\">\r\n      <h3 class=\"user-box-title\">Devices settings</h3>\r\n      <div class=\"form-holder__inputs\">\r\n        <div class=\"input-holder\">\r\n          <div class=\"input-holder__name\">\r\n            <span class=\"phone-name\">Software upgrade channel</span>\r\n          </div>\r\n          <div class=\"input-holder__input\">\r\n            <div class=\"info-labels\">\r\n              <span class=\"info-icon\"></span>\r\n              <span class=\"status-label\">Software upgrade channel setting has moved</span>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n  </div>\r\n</div>", styles: ["@import\"https://fonts.googleapis.com/css?family=Poppins:400,100,200,300,500,600,800,700,900\";@import\"https://fonts.googleapis.com/css2?family=Inter:wght@300;400&display=swap\";.info-holder{display:flex;gap:16px;align-items:center;font-family:Inter,sans-serif;height:102px;width:100%;background:white;margin:0 0 30px}.info-holder__user-image img{width:40px;border-radius:120px;margin:20px 0 0}.info-holder__user-information{padding:10px;margin:10px;gap:10px;display:flex;flex-direction:column}.info-holder__user-name{font-size:20px;font-weight:500}.info-holder__user-breadcrumbs{display:flex;gap:8px;font-weight:400;font-size:14px;color:#000000b3;align-items:center}.info-holder .icon-separator{height:5px;width:5px;background-color:#000000b3;border-radius:50%}.info-holder .is-active{display:flex;gap:8px;align-items:center}.icon-user-status{width:.5rem;height:.5rem;border-radius:50%;background-color:#707070;margin:0 5px 0 0}.icon-user-status.icon-user-status-active{background-color:#1d805f;display:inline-block}.webex-list{padding:2.5rem}.webex-list-header{display:flex;align-items:center;padding:1rem}.webex-list-header__hr{width:100%;font-size:12px}.device-item{position:relative;display:flex;align-items:center;justify-content:space-between;background-color:#fff;border-bottom:1px solid #b0b0b0;padding:.8rem;z-index:10;transition:background-color .3s;cursor:pointer}.device-item__td{width:100%}.device-item__actions-menu{position:absolute;margin:0 1rem;right:0}.device-item__more{display:flex;align-items:center;justify-content:center;cursor:pointer;color:#b0b0b0;border-radius:50%;padding:.5rem;transition:background-color .3s ease-in-out}.info-boxes-container{padding:24px 0;display:flex;flex-direction:column;gap:24px}.info-boxes-container .user-info-box{background:white;display:flex;gap:2rem;border-radius:8px;border:rgba(0,0,0,.2) 1px solid;padding:24px;font-weight:400;font-size:14px}.info-boxes-container .user-info-box .user-box-title{display:flex;font-weight:500;font-size:16px;max-inline-size:11.25rem;flex:1;color:#000000f2;margin-top:3px;font-family:Poppins,Poppins,sans-serif}.info-boxes-container .user-info-box .form-holder__inputs{display:flex;flex-direction:column;flex:1}.info-boxes-container .user-info-box .form-holder__inputs .input-holder{display:flex;gap:1.5rem;padding:.5rem 0;font-size:.75rem;line-height:1.25;align-items:center;overflow:hidden}.info-boxes-container .user-info-box .form-holder__inputs .input-holder:nth-child(1){padding-top:0}.info-boxes-container .user-info-box .form-holder__inputs .input-holder:last-child{padding-bottom:0}.info-boxes-container .user-info-box .form-holder__inputs .input-holder__name{font-weight:500!important;font-size:14px!important;flex-basis:12rem;display:flex;gap:.5rem;align-items:center;flex-basis:15rem!important}.info-boxes-container .user-info-box .form-holder__inputs .input-holder__name .phone-icon{inline-size:2.25rem;block-size:2.25rem;background-repeat:no-repeat;background-position:center;height:40px;width:40px;display:block;background-size:contain}.info-boxes-container .user-info-box .form-holder__inputs .input-holder__name .primary-label{background-color:#08599c;display:inline-flex;gap:.25rem;align-items:center;justify-content:center;padding:.25rem .5rem;border-radius:.25rem;color:#fffffff2;font-size:.75rem;line-height:1;text-align:center}.info-boxes-container .user-info-box .form-holder__inputs .input-holder__input{display:flex;flex:1;gap:.75rem;align-items:center}.info-boxes-container .user-info-box .form-holder__inputs .input-holder__input .status-indicator{height:7px;width:7px;background-color:#707070;border-radius:50px}.info-boxes-container .user-info-box .form-holder__inputs .input-holder__input .status-label{display:flex;flex-wrap:wrap;gap:1.5rem;overflow:auto;font-size:.9rem;line-height:1.25;color:#000000f2}.info-boxes-container .user-info-box .form-holder__inputs .input-holder__input .info-labels{display:flex;gap:.25rem;align-items:center;justify-content:center;padding:.25rem .5rem;border:.0625rem solid transparent;border-radius:.25rem;line-height:1;text-overflow:ellipsis;border-color:#d6b220;background-color:#f7f6dc;color:#735107}.info-boxes-container .user-info-box .form-holder__inputs .input-holder__input .info-labels .info-icon{inline-size:2.25rem;block-size:2.25rem;background-repeat:no-repeat;background-position:center;height:13px;width:13px;display:block;background-size:contain;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%22M15.75 10.75a1.25 1.25 0 1 0 0-2.5 1.25 1.25 0 0 0 0 2.5M17 14.5a1 1 0 0 0-1-1h-2a1 1 0 1 0 0 2h1V22h-2a1 1 0 1 0 0 2h6a1 1 0 1 0 0-2h-2zM2 16C2 8.268 8.268 2 16 2s14 6.268 14 14-6.268 14-14 14S2 23.732 2 16M16 4C9.373 4 4 9.373 4 16s5.373 12 12 12 12-5.373 12-12S22.627 4 16 4%22%2F%3E%3C%2Fsvg%3E\")}.info-boxes-container .user-info-box .form-holder__inputs .add-btn{position:relative;display:inline-flex;gap:.375rem;align-items:center;justify-content:center;overflow:hidden!important;padding:.75rem;border:.0625rem solid transparent;border-radius:6.25rem;font-weight:500;font-size:.875rem;text-overflow:ellipsis;white-space:nowrap;transition:all .1s cubic-bezier(.25,.1,.25,1);inline-size:min-content;max-inline-size:100%;border-color:#00000080;background-color:#0000;color:#000000f2;margin:1rem 0;block-size:2rem}.info-boxes-container .user-info-box .form-holder__inputs .mat-divider{margin:0!important}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { devices: [{
                 type: Input
             }], onDeviceSelect: [{
                 type: Output
             }] } });
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZGV2aWNlLWxpc3QuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvdHVraS93aWRnZXRzL3VzZXItbWFuYWdlL3NyYy9kZXZpY2UtbGlzdC9kZXZpY2UtbGlzdC5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy90dWtpL3dpZGdldHMvdXNlci1tYW5hZ2Uvc3JjL2RldmljZS1saXN0L2RldmljZS1saXN0LmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQUUsWUFBWSxFQUFFLEtBQUssRUFBRSxNQUFNLEVBQUUsTUFBTSxlQUFlLENBQUM7Ozs7O0FBUXZFLE1BQU0sT0FBTyxtQkFBbUI7SUFLOUI7UUFGQSxtQkFBYyxHQUFHLElBQUksWUFBWSxFQUFVLENBQUM7UUFHMUMsT0FBTyxDQUFDLEdBQUcsQ0FBQyxjQUFjLENBQUMsQ0FBQztJQUU5QixDQUFDO0lBR0QsWUFBWSxDQUFDLE1BQWM7UUFDekIsWUFBWSxDQUFDLE9BQU8sQ0FBQyxZQUFZLEVBQUUsTUFBTSxDQUFDLFVBQVUsQ0FBQyxDQUFDO1FBQ3RELElBQUksQ0FBQyxjQUFjLENBQUMsSUFBSSxDQUFDLE1BQU0sQ0FBQyxDQUFDO0lBQ25DLENBQUM7O2lIQWRVLG1CQUFtQjtxR0FBbkIsbUJBQW1CLHNJQ1JoQyw4dENBK0JNOzRGRHZCTyxtQkFBbUI7a0JBTC9CLFNBQVM7K0JBQ0UsaUJBQWlCOzBFQUtsQixPQUFPO3NCQUFmLEtBQUs7Z0JBRU4sY0FBYztzQkFEYixNQUFNIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50LCBFdmVudEVtaXR0ZXIsIElucHV0LCBPdXRwdXQgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcclxuaW1wb3J0IHsgRGV2aWNlIH0gZnJvbSAnLi4vY2xhc3Nlcy9kZXZpY2UnO1xyXG5cclxuQENvbXBvbmVudCh7XHJcbiAgc2VsZWN0b3I6ICdhcHAtZGV2aWNlLWxpc3QnLFxyXG4gIHRlbXBsYXRlVXJsOiAnLi9kZXZpY2UtbGlzdC5jb21wb25lbnQuaHRtbCcsXHJcbiAgc3R5bGVVcmxzOiBbJy4vZGV2aWNlLWxpc3QuY29tcG9uZW50LnNjc3MnXVxyXG59KVxyXG5leHBvcnQgY2xhc3MgRGV2aWNlTGlzdENvbXBvbmVudCB7XHJcbiAgQElucHV0KCkgZGV2aWNlcyE6IGFueTtcclxuICBAT3V0cHV0KClcclxuICBvbkRldmljZVNlbGVjdCA9IG5ldyBFdmVudEVtaXR0ZXI8RGV2aWNlPigpO1xyXG5cclxuICBjb25zdHJ1Y3RvcigpIHtcclxuICAgIGNvbnNvbGUubG9nKCdkZXZpY2VzIGxpc3QnKTtcclxuXHJcbiAgfVxyXG5cclxuXHJcbiAgc2VsZWN0RGV2aWNlKGRldmljZTogRGV2aWNlKTogdm9pZCB7XHJcbiAgICBsb2NhbFN0b3JhZ2Uuc2V0SXRlbSgnZGV2aWNlVHlwZScsIGRldmljZS5kZXZpY2VUeXBlKTtcclxuICAgIHRoaXMub25EZXZpY2VTZWxlY3QuZW1pdChkZXZpY2UpO1xyXG4gIH1cclxuXHJcblxyXG59XHJcbiIsIjxkaXYgY2xhc3M9XCJpbmZvLWJveGVzLWNvbnRhaW5lclwiPlxuICA8IS0tICAgIFVTRVIgSU5GTyBCT1gtLT5cbiAgPGRpdiBjbGFzcz1cInVzZXItaW5mby1ib3ggdXNlci1kZXRhaWxzLWJveFwiPlxuICAgICAgPGgzIGNsYXNzPVwidXNlci1ib3gtdGl0bGVcIj5EZXZpY2VzPC9oMz5cbiAgICAgIDxkaXYgY2xhc3M9XCJmb3JtLWhvbGRlcl9faW5wdXRzXCI+XG4gICAgICAgIDxuZy1jb250YWluZXIgKm5nRm9yPVwibGV0IGRldmljZSBvZiBkZXZpY2VzOyBsZXQgaXNMYXN0ID0gbGFzdFwiPlxuICAgICAgICAgIDxhcHAtZGV2aWNlLXJvdyBbZGV2aWNlXT1cImRldmljZVwiIChvbkRldmljZVNlbGVjdCk9XCJzZWxlY3REZXZpY2UoJGV2ZW50KVwiPjwvYXBwLWRldmljZS1yb3c+XG4gICAgICAgICAgPG1hdC1kaXZpZGVyPjwvbWF0LWRpdmlkZXI+XG4gICAgICAgIDwvbmctY29udGFpbmVyPlxuICAgICAgICA8YnV0dG9uIGNsYXNzPVwiYWRkLWJ0blwiIHN0eWxlPVwib3BhY2l0eTogMC40OyBwb2ludGVyLWV2ZW50czogbm9uZTtcIj5cbiAgICAgICAgICBBZGQgZGV2aWNlXG4gICAgICAgIDwvYnV0dG9uPlxuICAgICAgPC9kaXY+XG4gIDwvZGl2PlxuXG4gIDxkaXYgY2xhc3M9XCJ1c2VyLWluZm8tYm94IHVzZXItZGV0YWlscy1ib3hcIj5cbiAgICAgIDxoMyBjbGFzcz1cInVzZXItYm94LXRpdGxlXCI+RGV2aWNlcyBzZXR0aW5nczwvaDM+XG4gICAgICA8ZGl2IGNsYXNzPVwiZm9ybS1ob2xkZXJfX2lucHV0c1wiPlxuICAgICAgICA8ZGl2IGNsYXNzPVwiaW5wdXQtaG9sZGVyXCI+XG4gICAgICAgICAgPGRpdiBjbGFzcz1cImlucHV0LWhvbGRlcl9fbmFtZVwiPlxuICAgICAgICAgICAgPHNwYW4gY2xhc3M9XCJwaG9uZS1uYW1lXCI+U29mdHdhcmUgdXBncmFkZSBjaGFubmVsPC9zcGFuPlxuICAgICAgICAgIDwvZGl2PlxuICAgICAgICAgIDxkaXYgY2xhc3M9XCJpbnB1dC1ob2xkZXJfX2lucHV0XCI+XG4gICAgICAgICAgICA8ZGl2IGNsYXNzPVwiaW5mby1sYWJlbHNcIj5cbiAgICAgICAgICAgICAgPHNwYW4gY2xhc3M9XCJpbmZvLWljb25cIj48L3NwYW4+XG4gICAgICAgICAgICAgIDxzcGFuIGNsYXNzPVwic3RhdHVzLWxhYmVsXCI+U29mdHdhcmUgdXBncmFkZSBjaGFubmVsIHNldHRpbmcgaGFzIG1vdmVkPC9zcGFuPlxuICAgICAgICAgICAgPC9kaXY+XG4gICAgICAgICAgPC9kaXY+XG4gICAgICAgIDwvZGl2PlxuICAgICAgPC9kaXY+XG4gIDwvZGl2PlxuPC9kaXY+Il19
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZGV2aWNlLWxpc3QuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvdHVraS93aWRnZXRzL3VzZXItbWFuYWdlL3NyYy9kZXZpY2UtbGlzdC9kZXZpY2UtbGlzdC5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy90dWtpL3dpZGdldHMvdXNlci1tYW5hZ2Uvc3JjL2RldmljZS1saXN0L2RldmljZS1saXN0LmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQUUsWUFBWSxFQUFFLEtBQUssRUFBRSxNQUFNLEVBQUUsTUFBTSxlQUFlLENBQUM7Ozs7O0FBUXZFLE1BQU0sT0FBTyxtQkFBbUI7SUFLOUI7UUFGQSxtQkFBYyxHQUFHLElBQUksWUFBWSxFQUFVLENBQUM7UUFHMUMsT0FBTyxDQUFDLEdBQUcsQ0FBQyxjQUFjLENBQUMsQ0FBQztJQUU5QixDQUFDO0lBR0QsWUFBWSxDQUFDLE1BQWM7UUFDekIsWUFBWSxDQUFDLE9BQU8sQ0FBQyxZQUFZLEVBQUUsTUFBTSxDQUFDLFVBQVUsQ0FBQyxDQUFDO1FBQ3RELElBQUksQ0FBQyxjQUFjLENBQUMsSUFBSSxDQUFDLE1BQU0sQ0FBQyxDQUFDO0lBQ25DLENBQUM7O2lIQWRVLG1CQUFtQjtxR0FBbkIsbUJBQW1CLHNJQ1JoQyw0eENBK0JNOzRGRHZCTyxtQkFBbUI7a0JBTC9CLFNBQVM7K0JBQ0UsaUJBQWlCOzBFQUtsQixPQUFPO3NCQUFmLEtBQUs7Z0JBRU4sY0FBYztzQkFEYixNQUFNIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50LCBFdmVudEVtaXR0ZXIsIElucHV0LCBPdXRwdXQgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcclxuaW1wb3J0IHsgRGV2aWNlIH0gZnJvbSAnLi4vY2xhc3Nlcy9kZXZpY2UnO1xyXG5cclxuQENvbXBvbmVudCh7XHJcbiAgc2VsZWN0b3I6ICdhcHAtZGV2aWNlLWxpc3QnLFxyXG4gIHRlbXBsYXRlVXJsOiAnLi9kZXZpY2UtbGlzdC5jb21wb25lbnQuaHRtbCcsXHJcbiAgc3R5bGVVcmxzOiBbJy4vZGV2aWNlLWxpc3QuY29tcG9uZW50LnNjc3MnXVxyXG59KVxyXG5leHBvcnQgY2xhc3MgRGV2aWNlTGlzdENvbXBvbmVudCB7XHJcbiAgQElucHV0KCkgZGV2aWNlcyE6IGFueTtcclxuICBAT3V0cHV0KClcclxuICBvbkRldmljZVNlbGVjdCA9IG5ldyBFdmVudEVtaXR0ZXI8RGV2aWNlPigpO1xyXG5cclxuICBjb25zdHJ1Y3RvcigpIHtcclxuICAgIGNvbnNvbGUubG9nKCdkZXZpY2VzIGxpc3QnKTtcclxuXHJcbiAgfVxyXG5cclxuXHJcbiAgc2VsZWN0RGV2aWNlKGRldmljZTogRGV2aWNlKTogdm9pZCB7XHJcbiAgICBsb2NhbFN0b3JhZ2Uuc2V0SXRlbSgnZGV2aWNlVHlwZScsIGRldmljZS5kZXZpY2VUeXBlKTtcclxuICAgIHRoaXMub25EZXZpY2VTZWxlY3QuZW1pdChkZXZpY2UpO1xyXG4gIH1cclxuXHJcblxyXG59XHJcbiIsIjxkaXYgY2xhc3M9XCJpbmZvLWJveGVzLWNvbnRhaW5lclwiPlxyXG4gIDwhLS0gICAgVVNFUiBJTkZPIEJPWC0tPlxyXG4gIDxkaXYgY2xhc3M9XCJ1c2VyLWluZm8tYm94IHVzZXItZGV0YWlscy1ib3hcIj5cclxuICAgICAgPGgzIGNsYXNzPVwidXNlci1ib3gtdGl0bGVcIj5EZXZpY2VzPC9oMz5cclxuICAgICAgPGRpdiBjbGFzcz1cImZvcm0taG9sZGVyX19pbnB1dHNcIj5cclxuICAgICAgICA8bmctY29udGFpbmVyICpuZ0Zvcj1cImxldCBkZXZpY2Ugb2YgZGV2aWNlczsgbGV0IGlzTGFzdCA9IGxhc3RcIj5cclxuICAgICAgICAgIDxhcHAtZGV2aWNlLXJvdyBbZGV2aWNlXT1cImRldmljZVwiIChvbkRldmljZVNlbGVjdCk9XCJzZWxlY3REZXZpY2UoJGV2ZW50KVwiPjwvYXBwLWRldmljZS1yb3c+XHJcbiAgICAgICAgICA8bWF0LWRpdmlkZXI+PC9tYXQtZGl2aWRlcj5cclxuICAgICAgICA8L25nLWNvbnRhaW5lcj5cclxuICAgICAgICA8YnV0dG9uIGNsYXNzPVwiYWRkLWJ0blwiIHN0eWxlPVwib3BhY2l0eTogMC40OyBwb2ludGVyLWV2ZW50czogbm9uZTtcIj5cclxuICAgICAgICAgIEFkZCBkZXZpY2VcclxuICAgICAgICA8L2J1dHRvbj5cclxuICAgICAgPC9kaXY+XHJcbiAgPC9kaXY+XHJcblxyXG4gIDxkaXYgY2xhc3M9XCJ1c2VyLWluZm8tYm94IHVzZXItZGV0YWlscy1ib3hcIj5cclxuICAgICAgPGgzIGNsYXNzPVwidXNlci1ib3gtdGl0bGVcIj5EZXZpY2VzIHNldHRpbmdzPC9oMz5cclxuICAgICAgPGRpdiBjbGFzcz1cImZvcm0taG9sZGVyX19pbnB1dHNcIj5cclxuICAgICAgICA8ZGl2IGNsYXNzPVwiaW5wdXQtaG9sZGVyXCI+XHJcbiAgICAgICAgICA8ZGl2IGNsYXNzPVwiaW5wdXQtaG9sZGVyX19uYW1lXCI+XHJcbiAgICAgICAgICAgIDxzcGFuIGNsYXNzPVwicGhvbmUtbmFtZVwiPlNvZnR3YXJlIHVwZ3JhZGUgY2hhbm5lbDwvc3Bhbj5cclxuICAgICAgICAgIDwvZGl2PlxyXG4gICAgICAgICAgPGRpdiBjbGFzcz1cImlucHV0LWhvbGRlcl9faW5wdXRcIj5cclxuICAgICAgICAgICAgPGRpdiBjbGFzcz1cImluZm8tbGFiZWxzXCI+XHJcbiAgICAgICAgICAgICAgPHNwYW4gY2xhc3M9XCJpbmZvLWljb25cIj48L3NwYW4+XHJcbiAgICAgICAgICAgICAgPHNwYW4gY2xhc3M9XCJzdGF0dXMtbGFiZWxcIj5Tb2Z0d2FyZSB1cGdyYWRlIGNoYW5uZWwgc2V0dGluZyBoYXMgbW92ZWQ8L3NwYW4+XHJcbiAgICAgICAgICAgIDwvZGl2PlxyXG4gICAgICAgICAgPC9kaXY+XHJcbiAgICAgICAgPC9kaXY+XHJcbiAgICAgIDwvZGl2PlxyXG4gIDwvZGl2PlxyXG48L2Rpdj4iXX0=