@tuki-io/tuki-widgets 0.0.219-dev.0 → 0.0.220

package/projects/tuki/widgets/user-device-manage/src/device-associated-line/associated-line-row/associated-line-row.component.scss

@@ -1,97 +0,0 @@
-.line-item{
-    position: relative;
-
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-
-    background-color: white;
-
-    border-radius: 0.5rem;
-    border: 1px solid #cfcfcf;
-
-    padding: 1rem;
-    margin: 1rem 0 0 0;
-
-    z-index: 10;
-}
-.line-informations, .line-actions {
-    display: inherit;
-    align-items: inherit;
-
-    gap: 0.5rem;
-    padding: 0 0.5rem;
-}
-.line-actions {
-    cursor: pointer;
-}
-.line-drag, .line-toggle-details, .line-delete {
-    display: inherit;
-    align-items: inherit;
-    justify-content: center;
-
-    font-size: 1rem;
-
-    color: rgb(150, 150, 150);
-
-    width: 36px;
-    height: 36px;
-
-    border-radius: 50%;
-
-    transition: all 0.25s ease-out;
-
-}
-.line-delete :hover {
-
-  color: red !important;
-}
-.line-drag {
-    cursor: grab
-}
-.line-label {
-    margin-right: 2.5rem;
-}
-.flex-box {
-  display: flex;
-  justify-content: flex-start;
-}
-.app-icon {
-  height: 20px;
-  width: 20px;
-  display: inline-block;
-  cursor: pointer;
-  background-repeat: no-repeat;
-  background-position: center;
-}
-.app-icon {
-    transition: all 0.15s ease-out
-}
-
-.toggled {
-    transform: rotate(-90deg);
-}
-.line-dn-box {
-  line-height: 20px;
-}
-.icon-dragger-vertical {
-  background-image: url('../../assets/icons/dragger-vertical-icon.svg');
-  width: 1px;
-  margin: 0 10px 0 0;
-}
-
-.icon-delete {
-  background-image: url('../../assets/icons/delete_icon.svg');
-}
-
-.icon-arrow-right {
-  background-image: url('../../assets/icons/arrow-right.svg');
-}
-
-.icon-vertical-divider {
-  background-image: url('../../assets/icons/vartical_divider_icon.svg');
-  height: 20px;
-}
-.line-item:hover {
-  background-color: rgba(214, 214, 214, 0.5);
-}

package/projects/tuki/widgets/user-device-manage/src/device-associated-line/associated-line-row/associated-line-row.component.ts

@@ -1,28 +0,0 @@
-import { Component, EventEmitter, Input, Output } from "@angular/core";
-import { LineAssociation } from '../../classes/line-association';
-import { LineAssociationInterface } from '../../classes/line-association-interface';
-
-@Component({
-  selector: "app-associated-line-row",
-  templateUrl: "./associated-line-row.component.html",
-  styleUrls: ["./associated-line-row.component.scss"]
-})
-export class AssociatedLineRowComponent {
-  @Input() line!: LineAssociation | LineAssociationInterface;
-  @Input() toggled: boolean = false;
-
-  @Output() toggleAssociatedLine = new EventEmitter<string>();
-  @Output() removeAssociatedLine = new EventEmitter();
-
-  constructor() {
-  }
-
-  onToggleDetails(): void {
-    this.toggled = !this.toggled;
-    this.toggleAssociatedLine.emit(this.toggled ? this.line.displayLabel : '')
-  }
-
-  onLineRemove(): void {
-      this.removeAssociatedLine.emit();
-  }
-}

package/projects/tuki/widgets/user-device-manage/src/device-associated-line/device-associated-line-details-box/device-associated-line-details-box.component.html

@@ -1,6 +0,0 @@
-<div class="line-details-block">
-    <div class="line-details-block__title">{{ title }}</div>
-    <div class="line-details-block__content">
-        <ng-content></ng-content>
-    </div>
-</div>

package/projects/tuki/widgets/user-device-manage/src/device-associated-line/device-associated-line-details-box/device-associated-line-details-box.component.scss

@@ -1,20 +0,0 @@
-.line-details-block {
-    display: flex;
-
-    padding: 1rem 1.5rem;
-}
-
-.line-details-block__title {
-    width: 150px;
-    max-width: 150px;
-    font-weight: 500;
-}
-
-.line-details-block__content {
-    display: flex;
-    flex-direction: column;
-    
-    width: 100%;
-
-    margin-left: 2.5rem;
-}

package/projects/tuki/widgets/user-device-manage/src/device-associated-line/device-associated-line-details-box/device-associated-line-details-box.component.ts

@@ -1,13 +0,0 @@
-import { Component, Input } from "@angular/core";
-
-@Component({
-    selector: "app-line-details-block",
-    templateUrl: "./device-associated-line-details-box.component.html",
-    styleUrls: ["./device-associated-line-details-box.component.scss"]
-})
-export class DeviceAssociatedLineDetailsBoxComponent {
-
-    @Input() title: string = '';
-
-    constructor() {}
-}

package/projects/tuki/widgets/user-device-manage/src/device-associated-line/device-associated-line-extension/device-associated-line-extension.component.html

@@ -1,24 +0,0 @@
-<!-- <div *ngIf="this.availableNumbers?.length" class="user-calling-extension">
-  <mat-select [formControl]="control" (selectionChange)="this.onChangeField($event)" [compareWith]="compareFn" #page>
-    <mat-option *ngFor="let option of this.availableNumbers; let i = index;"[value]="option">{{option}}</mat-option>
-  </mat-select>
-  <mat-spinner *ngIf="this.dataPending" [diameter]="50"></mat-spinner>
-</div> -->
-
-<div *ngIf="this.availableNumbers?.length" class="user-calling-extension">
-  <mat-form-field appearance="outline">
-    <input
-      [matAutocomplete]="auto"
-      matInput
-      (input)="filterAvailableNumbers($event)"
-      [formControl]="control">
-    <mat-autocomplete
-      #auto="matAutocomplete" [panelWidth]="'auto'"
-      (optionSelected)="this.onChangeField($event)">
-      <mat-option  *ngFor="let option of this.filteredAvailableNumbers; let i = index;" [value]="option" >
-        {{option}}
-      </mat-option>
-    </mat-autocomplete>
-    <mat-spinner *ngIf="this.dataPending" [diameter]="50"></mat-spinner>
-  </mat-form-field>
-</div>

package/projects/tuki/widgets/user-device-manage/src/device-associated-line/device-associated-line-extension/device-associated-line-extension.component.scss

@@ -1,11 +0,0 @@
-table {
-  border-collapse: collapse;
-  border-spacing: 0;
-}
-
-
-.user-calling-extension {
-  mat-form-field {
-    width: 100px;
-  }
-}

package/projects/tuki/widgets/user-device-manage/src/device-associated-line/device-associated-line-extension/device-associated-line-extension.component.ts

@@ -1,74 +0,0 @@
-import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
-import { FormControl } from '@angular/forms';
-import { SimplifiedUser } from '../../classes/simplified-user';
-import { UserService } from '../../services/user.service';
-import { DnsService } from '../../services/dns.service';
-
-@Component({
-  selector: 'app-device-associated-line-extension',
-  templateUrl: './device-associated-line-extension.component.html',
-  styleUrls: ['./device-associated-line-extension.component.scss'],
-})
-export class DeviceAssociatedLineExtensionComponent implements OnInit {
-  @Input() control!: FormControl;
-  @Input() routePartition!: string;
-  @Input() directoryNumber!: string;
-  @Input() siteId!: number;
-  @Output() onChange = new EventEmitter<string>();
-  public dataPending!: boolean;
-
-  public filteredAvailableNumbers: any[] = [];
-
-  get user(): SimplifiedUser {
-    return this.userService.user;
-  }
-
-  get availableNumbers(): any {
-    // @ts-ignore
-    return this.routePartition && this.dnsService.availableNumbers ? this.dnsService.availableNumbers[this.routePartition] : null;
-  }
-
-
-  constructor(
-    public userService: UserService,
-    private dnsService: DnsService
-  ) {
-  }
-
-  ngOnInit(): void {
-    this.getData();
-  }
-
-  public onChangeField(event: any): void {
-    const value = (event.option as HTMLInputElement).value.trim();
-    this.onChange.emit(value);
-  }
-
-  private getData() {
-    if (!this.siteId || !this.routePartition) {
-      return;
-    }
-    this.dataPending = true;
-    this.dnsService.getNumberRange(String(this.siteId), this.routePartition, true)
-      .subscribe(() => {
-        if (this.availableNumbers) {
-          // @ts-ignore
-          this.dnsService.availableNumbers[this.routePartition].push(this.directoryNumber);
-        }
-        this.dataPending = false;
-      });
-  }
-
-  compareFn(a: any, b: any): boolean {
-    return a === b; // or a.id === b.id
-  }
-
-  public setFiltereAvailableNumbers(): void {
-    this.filteredAvailableNumbers = this.availableNumbers;
-  }
-
-  public filterAvailableNumbers(event: Event): void {
-    const value = (event.target as HTMLInputElement).value.trim();
-    this.filteredAvailableNumbers = this.availableNumbers.filter((number: string) => number && number.includes(value));
-  }
-}

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

@@ -1,241 +0,0 @@
-<div id="device-associated-line" *ngIf="lineAssociation && form" [formGroup]="form">
-  <ng-container class="line-details__container">
-      <app-line-details-block [title]="'Line setting on the device'">
-        <div class="form-group">
-          <label>Display Caller ID</label>
-          <mat-form-field appearance="outline">
-            <input matInput type="text" name="displayLabel" formControlName="displayLabel"
-                   (input)="onChangeField('displayLabel')">
-            <mat-error *ngIf="form.get('displayLabel')?.hasError('maxlength')">
-              <i class="fa fa-exclamation-triangle"></i>
-              This field can’t have more than 30 characters
-            </mat-error>
-            <mat-error *ngIf="form.get('displayLabel')?.hasError('pattern')">
-              <i class="fa fa-exclamation-triangle"></i>
-              Invalid symbols are used
-            </mat-error>
-          </mat-form-field>
-        </div>
-        <div class="form-group__separator"></div>
-        <div class="form-group">
-          <label>Text Label</label>
-          <mat-form-field appearance="outline">
-            <input formControlName="textLabel" name="textLabel"
-                   matInput (input)="onChangeField('textLabel')">
-            <mat-error *ngIf="form.get('textLabel')?.hasError('maxlength')">
-              <i class="fa fa-exclamation-triangle"></i>
-              This field can’t have more than 30 characters
-            </mat-error>
-            <mat-error *ngIf="form.get('textLabel')?.hasError('pattern')">
-              <i class="fa fa-exclamation-triangle"></i>
-              Invalid symbols are used
-            </mat-error>
-          </mat-form-field>
-        </div>
-        <div class="form-group__separator"></div>
-        <div class="form-group">
-          <label>External Phone Number Mask</label>
-          <mat-form-field appearance="outline">
-            <input matInput type="text" name="e164Mask" formControlName="e164Mask"
-                   (input)="onChangeField('e164Mask')">
-            <mat-error *ngIf="form.get('e164Mask')?.hasError('e164MaskRule')">
-              <i class="fa fa-exclamation-triangle"></i>
-              e164Mask does not match the rule {{getRule()}}
-            </mat-error>
-          </mat-form-field>
-        </div>
-      </app-line-details-block>
-      <div class="form-group__separator_2px"></div>
-      <app-line-details-block [title]="'Multiple Call/Call Waiting Settings'">
-        <div class="form-group">
-          <label>Max Calls</label>
-          <mat-form-field appearance="outline">
-            <input matInput type="number" name="maxNumberOfCalls" formControlName="maxNumberOfCalls"
-                   (input)="onChangeField('maxNumberOfCalls')">
-            <mat-error *ngIf="form.get('maxNumberOfCalls')?.hasError('max')">
-              <i class="fa fa-exclamation-triangle"></i>
-              Value is too big
-            </mat-error>
-          </mat-form-field>
-        </div>
-        <div class="form-group__separator"></div>
-        <div class="form-group">
-          <label>Busy Trigger</label>
-          <mat-form-field appearance="outline">
-            <input matInput type="number" name="busyTrigger" formControlName="busyTrigger"
-                   (input)="onChangeField('busyTrigger')">
-            <mat-error *ngIf="form.get('busyTrigger')?.hasError('max')">
-              <i class="fa fa-exclamation-triangle"></i>
-              Value can't be bigger than Max Calls
-            </mat-error>
-          </mat-form-field>
-        </div>
-      </app-line-details-block>
-      <div class="form-group__separator_2px"></div>
-      <app-line-details-block [title]="'Call Recording'">
-        <div class="form-group">
-          <label>Recording Option</label>
-          <mat-form-field appearance="outline">
-            <mat-select
-              (selectionChange)="recordingOptionChanged('recordingOption')"
-              formControlName="recordingOption"
-              [id]="'associatedLineRecordingOptionField'">
-              <mat-option [value]=recordingOptions.disabled>Call Recording Disabled</mat-option>
-              <mat-option [value]=recordingOptions.auto_enabled>Automatic Call Recording Enabled</mat-option>
-              <mat-option [value]=recordingOptions.selective_enabled>Selective Call Recording Enabled</mat-option>
-            </mat-select>
-          </mat-form-field>
-        </div>
-        <div class="form-group__separator"></div>
-        <div class="form-group">
-          <label>Recording Media Source</label>
-          <mat-form-field appearance="outline">
-            <mat-select
-              (selectionChange)="onChangeField('recordingMediaSource')" formControlName="recordingMediaSource"
-              [id]="'associatedLineRecordingMediaSourceField'">
-              <mat-option *ngFor="let source of recordingMediaSources" [value]="source">{{source}}</mat-option>
-            </mat-select>
-          </mat-form-field>
-        </div>
-        <div class="form-group__separator"></div>
-        <div class="form-group">
-          <label>Recording Profile</label>
-          <app-lazy-loading-select
-            [siteId]="siteId"
-            [controlName]="'recordingProfile'"
-            [form]="form"
-            (changeField)="onChangeField('recordingProfile')"
-            [optionsToken]="'recordingProfile'"></app-lazy-loading-select>
-        </div>
-      </app-line-details-block>
-      <div class="form-group__separator_2px"></div>
-      <app-line-details-block [title]="'Additional line settings on the device'">
-        <div class="form-group">
-          <label>Visual Message Waiting Indicator Policy</label>
-          <mat-form-field appearance="outline">
-            <mat-select
-              formControlName="visualMWI"
-              (selectionChange)="onChangeField('visualMWI')">
-              <mat-option
-                *ngFor="let option of staticOptions.VISUAL_MWI" [value]="option">
-                {{option}}
-              </mat-option>
-            </mat-select>
-          </mat-form-field>
-        </div>
-        <div class="form-group__separator"></div>
-        <div class="form-group">
-          <label>Ring Setting (Phone Idle)</label>
-          <mat-form-field appearance="outline">
-            <mat-select
-              formControlName="ringSetting_idle"
-              (selectionChange)="onChangeField('ringSetting_idle')">
-              <mat-option *ngFor="let option of staticOptions.RING_SETTING_IDLE" [value]="option">
-                {{option}}
-              </mat-option>
-            </mat-select>
-          </mat-form-field>
-        </div>
-        <div class="form-group__separator"></div>
-        <div class="form-group">
-          <label>Call Pickup Audio Alert Setting (Phone Idle)</label>
-          <mat-form-field appearance="outline">
-            <mat-select name="pickupAAS_idle"
-              formControlName="pickupAAS_idle"
-              (selectionChange)="onChangeField('pickupAAS_idle')">
-              <mat-option *ngFor="let option of staticOptions.CALL_PICKUP_GROUP_AUDIO_SETTING_PHONE_IDLE" [value]="option">
-                {{option}}
-              </mat-option>
-            </mat-select>
-          </mat-form-field>
-        </div>
-        <div class="form-group__separator"></div>
-        <div class="form-group">
-          <label>Monitoring Calling Search Space</label>
-          <mat-form-field appearance="outline">
-            <input
-              [matAutocomplete]="auto"
-              matInput
-              (input)="onAutocomplete('monitorCSS')"
-              formControlName="monitorCSS">
-            <mat-autocomplete
-              #auto="matAutocomplete"
-              (optionSelected)="onChangeField('monitorCSS')">
-              <mat-option  *ngFor="let option of filteredMonitorCssList" [value]="option" >
-                {{option}}
-              </mat-option>
-            </mat-autocomplete>
-          </mat-form-field>
-        </div>
-        <div class="form-group__separator"></div>
-        <div class="form-group">
-          <label>Audible Message Waiting Indicator Policy</label>
-          <mat-form-field appearance="outline">
-            <mat-select
-              formControlName="audibleMWI"
-              (selectionChange)="onChangeField('audibleMWI')">
-              <mat-option *ngFor="let option of staticOptions.DEFAULT_ON_OFF" [value]="option">
-                {{option}}
-              </mat-option>
-            </mat-select>
-          </mat-form-field>
-        </div>
-        <div class="form-group__separator"></div>
-        <div class="form-group">
-          <label>Ring Setting (Phone Active)</label>
-          <mat-form-field appearance="outline">
-            <mat-select
-              formControlName="ringSetting_active"
-              (selectionChange)="onChangeField('ringSetting_active')">
-              <mat-option *ngFor="let option of staticOptions.RING_SETTING_ACTIVE" [value]="option">
-                {{option}}
-              </mat-option>
-            </mat-select>
-          </mat-form-field>
-        </div>
-        <div class="form-group__separator"></div>
-        <div class="form-group">
-          <label>Call Pickup Audio Alert Setting (Phone Active)</label>
-          <mat-form-field appearance="outline">
-            <mat-select
-              formControlName="pickupAAS_active"
-              (selectionChange)="onChangeField('pickupAAS_active')">
-              <mat-option
-                *ngFor="let option of staticOptions.CALL_PICKUP_GROUP_AUDIO_SETTING_PHONE_ACTIVE"
-                [value]="option">
-                {{option}}
-              </mat-option>
-            </mat-select>
-          </mat-form-field>
-        </div>
-        <div class="form-group__separator"></div>
-        <div class="form-group">
-          <label>Log Missed Calls</label>
-          <mat-slide-toggle class="custom-toggle" name="logMissedCalls" formControlName="logMissedCall"></mat-slide-toggle>
-        </div>
-      </app-line-details-block>
-      <div class="form-group__separator_2px"></div>
-      <app-line-details-block [title]="'Forwardred call information display'">
-        <div class="form-group">
-          <label>Caller Name</label>
-          <mat-slide-toggle class="custom-toggle" name="callerName" formControlName="callerName" (change)="onChangeField('callerName')"></mat-slide-toggle>
-        </div>
-        <div class="form-group__separator"></div>
-        <div class="form-group">
-          <label>Redirected Number</label>
-          <mat-slide-toggle class="custom-toggle" name="redirectedNumber" formControlName="redirectedNumber" (change)="onChangeField('redirectedNumber')"></mat-slide-toggle>
-        </div>
-        <div class="form-group__separator"></div>
-        <div class="form-group">
-          <label>Caller Number</label>
-          <mat-slide-toggle class="custom-toggle" name="callerNumber" formControlName="callerNumber" (change)="onChangeField('callerNumber')"></mat-slide-toggle>
-        </div>
-        <div class="form-group__separator"></div>
-        <div class="form-group">
-          <label>Dialed Number</label>
-          <mat-slide-toggle class="custom-toggle" name="dialedNumber" formControlName="dialedNumber" (change)="onChangeField('dialedNumber')"></mat-slide-toggle>
-        </div>
-      </app-line-details-block>
-  </ng-container>
-
-</div>