@tuki-io/tuki-widgets 0.0.134 → 0.0.136

package/projects/tuki/widgets/user-device-manage/src/device-info/device-info.component.html

@@ -1,52 +0,0 @@
-<div class="info-holder">
-  <!-- <div class="content-box"> -->
-    <div class="info-holder__device-image">
-      <i class="icon device-image" [ngClass]="getImageClass(device?.model)"></i>
-    </div>
-    <div class="info-holder__device-information">
-      <div class="info-holder__device-name">{{ device && device.model ? device.model : 'No device type available' }}</div>
-      <div class="info-holder__device-breadcrumbs">
-        <div class="is-active" *ngIf="device?.activationState; else notActive">
-          <span class="icon-device-status icon-device-status-active"></span>Active
-        </div>
-        <i style="transform: translateX(-10px);" class="icon info-icon rem-1"></i>
-        <div class="icon-text-wrapper">
-          <div class="icon-separator"></div>
-          <div class="phones">Phones</div>
-        </div>
-        <div class="icon-text-wrapper">
-          <div class="icon-separator"></div>
-          <div class="position">Device platform:</div>
-          <i class="icon cisco-icon rem-1"></i>
-        </div>
-      </div>
-    </div>
-    <div class="actions-wrapper">
-      <div class="action-btn-wrapper">
-            <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>
-      </div>
-      <div class="back-button-block" (click)="onClickBack()">
-        <div style="gap: 0.6rem; display: flex; align-items: center;">
-          <div class="icon-round-wrapper">
-            <i class="icon people-regular rem-1_25"></i>
-          </div>
-          <div class="lines-block">
-            <span>{{firstName}}</span>
-            <span>{{lastName}}</span>
-          </div>
-        </div>
-        <i class="icon arrow-right-icon rem-1"></i>
-      </div>
-    </div>
-  <!-- </div> -->
-
-</div>
-
-<ng-template #notActive>
-    <div class="is-active">
-        <svg width="8" height="9" viewBox="0 0 8 9" fill="none" xmlns="http://www.w3.org/2000/svg">
-            <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"/>
-        </svg>
-        <div>Not active</div>
-    </div>
-</ng-template>

package/projects/tuki/widgets/user-device-manage/src/device-info/device-info.component.scss

@@ -1,219 +0,0 @@
-// $base-font-size: 16px;
-
-// @function rem($px) {
-//   @return ($px / $base-font-size) * 1rem;
-// }
-
-.info-holder {
-  display: flex;
-  gap: 0.75rem;
-  align-items: center;
-  font-family: "Inter", sans-serif;
-  height: 102px;
-  // width: 100%;
-  background: white;
-  // margin: 0 0 30px 0;
-  // padding: 0 4.375rem 0;
-  padding: 0 1.75rem 0;
-  font-family: poppins, sans-serif;
-
-  &__device-image {
-    img {
-      width: 40px;
-      border-radius: 120px;
-      margin: 20px 0 0 0;
-    }
-  }
-
-  &__device-information {
-    gap: 10px;
-    display: flex;
-    flex-direction: column;
-    flex: 1;
-  }
-
-  &__device-name {
-    font-size: 20px;
-    font-weight: 600;
-  }
-
-  &__device-breadcrumbs {
-    display: flex;
-    gap: 18px;
-    font-weight: 400;
-    font-size: 14px;
-    color: rgba(0, 0, 0, 0.7);
-    align-items: center;
-  }
-
-  .is-active {
-    display: flex;
-    gap: 0.5rem;
-    align-items: center;
-  }
-
-  .icon-text-wrapper {
-    display: flex;
-    gap: 0.5rem;
-    align-items: center;
-
-    .icon-separator {
-      border-radius: 50%;
-      flex-shrink: 0;
-      border-radius: 50%;
-      background-color: rgba(0, 0, 0, 0.75);
-      inline-size: .25rem;
-      block-size: .25rem;
-      margin-inline-end: .25rem;
-    }
-  }
-
-  .info-holder__device-image {
-    margin-bottom: 1.3rem;
-    width: 40px;
-    height: 40px;
-
-    // .icon-people-regular {
-    //   background-image: url('../assets/icons/people-regular.svg');
-    //   background-repeat: no-repeat;
-    //   background-position: center;
-    //   height: 40px;
-    //   width: 40px;
-    //   display: block;
-    //   background-size: contain;
-    // }
-  }
-
-  .actions-wrapper {
-    display: flex;
-    align-items: center;
-    gap: .75rem;
-    // flex: 1;
-
-    .actions-buttons-block {
-      border-right: .0625rem solid #00000033;
-      height: 2rem;
-    }
-
-    .back-button-block {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      gap: 0.6rem;
-      // flex: 1;
-      cursor: pointer;
-      width: 20rem;
-
-      .icon-round-wrapper {
-        width: 2rem;
-        height: 2rem;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        background-color: #ededed;
-        border-radius: 50rem;
-      }
-
-      .lines-block {
-        display: flex;
-        gap: .5rem;
-        color: #0353a8;
-        font-size: .875rem;
-      }
-    }
-  }
-}
-.icon-device-status {
-  width: .5rem;
-  height: .5rem;
-  border-radius: 50%;
-  background-color: #707070;
-}
-.icon-device-status.icon-device-status-active  {
-  background-color: #1d805f;
-  display:inline-block;
-}
-
-.device-image {
-  // background-image: url('../assets/icons/cisco_8851.png');
-  width: 2.5rem;
-  height: 2.5rem;
-}
-
-.icon {
-  background-repeat: no-repeat;
-  background-position: center;
-  display: inline-block;
-  background-size: contain;
-
-  &.cisco_9861 {
-      background-image: url('../assets/icons/cisco_9861.png');
-  }
-
-  &.cisco_8851 {
-      background-image: url('../assets/icons/cisco_8851.png');
-  }
-
-  &.cisco_8841 {
-      background-image: url('../assets/icons/cisco_8841.png');
-  }
-
-  &.cisco_7841 {
-      background-image: url('../assets/icons/cisco_7841.png');
-  }
-}
-
-.info-icon {
-  background-image: url('../assets/icons/info-circle-regular.svg');
-}
-
-.cisco-icon {
-  background-image: url('../assets/icons/cisco.svg');
-}
-
-.people-regular {
-  background-image: url('../assets/icons/people-regular.svg');
-}
-
-.arrow-right-icon {
-  background-image: url('../assets/icons/arrow-right-regular.svg');
-}
-
-.rem-1 {
-  width: 1rem;
-  height: 1rem;
-}
-
-.rem-1_5 {
-  width: 1.5rem;
-  height: 1.5rem;
-}
-
-.rem-1_25 {
-  width: 1.25rem;
-  height: 1.25rem;
-}
-
-.action-btn-wrapper {
-  margin-right: 4rem;
-  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%;
-  }
-}

package/projects/tuki/widgets/user-device-manage/src/device-info/device-info.component.ts

@@ -1,38 +0,0 @@
-import { Component, EventEmitter, Input, Output } from '@angular/core';
-import { FormGroup } from '@angular/forms';
-
-const POPULAR_DEVICES = ['8851', '8841', '7841'];
-const DEFAULT_SCREEN = 'cisco_8851';
-
-@Component({
-  selector: 'app-device-info',
-  templateUrl: './device-info.component.html',
-  styleUrls: ['./device-info.component.scss']
-})
-export class DeviceInfoComponent {
-  @Input()
-  device: any = null;
-  @Input() 
-  firstName?: string;
-  @Input() 
-  lastName?: string;
-  @Input()
-  active!: boolean;
-  @Input()
-  email!: string;
-  @Input()
-  position!: string;
-  @Output() onclickBack = new EventEmitter<void>();
-
-  getImageClass(deviceType: string) {
-    const numbers = deviceType && deviceType.match(/\d+/g);
-    if(numbers && POPULAR_DEVICES.includes(numbers[0])) {
-      return `cisco_${numbers[0]}`;
-    }
-    else return DEFAULT_SCREEN;
-  }
-
-  onClickBack() {
-    this.onclickBack.emit();
-  }
-}

package/projects/tuki/widgets/user-device-manage/src/device-list/device-list.component.html

@@ -1,27 +0,0 @@
-<div class="webex-list device-list-container">
-  <div class="webex-list-header">
-    <div class="webex-list-header__hr">Name</div>
-    <div class="webex-list-header__hr">Type</div>
-    <div class="webex-list-header__hr">Line</div>
-    <div class="webex-list-header__hr">Device description</div>
-    <div class="webex-list-header__hr">Plar service</div>
-  </div>
-  <ng-container *ngFor="let device of devices">
-    <div class="device-item" (click)="selectDevice(device)">
-      <div class="device-item__td">{{ device.name }}</div>
-      <div class="device-item__td">{{ device.deviceType }}</div>
-      <div class="device-item__td" *ngIf="device.lineAssociations?.length">
-        <span class="device-associated-line" *ngFor="let line of device.lineAssociations">{{line.directoryNumber?.directoryNumber}} | </span>
-      </div>
-      <div class="device-item__td">{{ device.description }}</div>
-      <div class="device-item__td">
-        <mat-slide-toggle class="custom-toggle device-slide-toggle" [disabled]="true" [checked]="device.plarService"></mat-slide-toggle>
-      </div>
-      <div class="device-item__actions-menu" style="text-align: right;">
-        <div class="device-item__more">
-<!--          <mat-icon>more_vert</mat-icon>-->
-        </div>
-      </div>
-    </div>
-  </ng-container>
-</div>

package/projects/tuki/widgets/user-device-manage/src/device-list/device-list.component.scss

@@ -1,131 +0,0 @@
-.info-holder {
-  display: flex;
-  gap: 16px;
-  align-items: center;
-  font-family: "Inter", sans-serif;
-  height: 102px;
-  width: 100%;
-  background: white;
-  margin: 0 0 30px 0;
-
-  &__user-image {
-    img {
-      width: 40px;
-      border-radius: 120px;
-      margin: 20px 0 0 0;
-    }
-  }
-
-  &__user-information {
-    padding: 10px;
-    margin: 10px;
-    gap: 10px;
-    display: flex;
-    flex-direction: column;
-  }
-
-  &__user-name {
-    font-size: 20px;
-    font-weight: 500;
-  }
-
-  &__user-breadcrumbs {
-    display: flex;
-    gap: 8px;
-    font-weight: 400;
-    font-size: 14px;
-    color: rgba(0, 0, 0, 0.7);
-    align-items: center;
-  }
-
-  .icon-separator {
-    height: 5px;
-    width: 5px;
-    background-color: rgba(0, 0, 0, 0.7);
-    border-radius: 50%;
-  }
-
-  .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;
-}
-// Devices list
-
-.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 Row --------------
-
-.device-item {
-  position: relative;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  background-color: white;
-  border-bottom: 1px solid #b0b0b0;
-  padding: 0.8rem;
-  z-index: 10;
-  cursor: pointer;
-  transition: background-color 0.3s;
-  cursor: pointer;
-
-  /*&:hover {
-    background-color: #ededed;
-  }*/
-}
-
-.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: 0.5rem;
-
-  transition: background-color 0.3s ease-in-out;
-
-  /*&:hover {
-    background-color: #ffffff;
-  }*/
-}

package/projects/tuki/widgets/user-device-manage/src/device-list/device-list.component.ts

@@ -1,25 +0,0 @@
-import { Component, EventEmitter, Input, Output } from '@angular/core';
-import { Device } from '../classes/device';
-
-@Component({
-  selector: 'app-device-list',
-  templateUrl: './device-list.component.html',
-  styleUrls: ['./device-list.component.scss']
-})
-export class DeviceListComponent {
-  @Input() devices!: any;
-  @Output()
-  onDeviceSelect = new EventEmitter<Device>();
-
-  constructor() {
-    console.log('devices list');
-
-  }
-
-
-  selectDevice(device: Device): void {
-    this.onDeviceSelect.emit(device);
-  }
-
-
-}