@tuki-io/tuki-widgets 0.0.134 → 0.0.136

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

@@ -1,154 +0,0 @@
-:host {
-    &:hover {
-        background-color: #ededed;
-        cursor: pointer;
-    }
-
-    padding: 1rem .5rem;
-}
-
-.input-holder {
-    display: flex;
-    gap: 1.5rem;
-    padding: 0.5rem 0;
-    font-size: 0.75rem;
-    line-height: 1.25;
-    align-items: center;
-    overflow: hidden;
-
-    &:nth-child(1) {
-        padding-top: 0;
-    }
-
-    &:last-child {
-        padding-bottom: 0;
-    }
-
-    &__name{
-        font-weight: 500 !important;
-        font-size: 14px !important;
-        flex-basis: 12rem;
-        display: flex;
-        gap: 0.5rem;
-        align-items: center;
-        flex-basis: 15rem !important;
-        
-        .phone-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;
-        }
-    }
-
-    &__input{
-        display: flex;
-        flex: 1;
-        gap: 0.75rem;
-        align-items: center;
-
-        .status-indicator {
-            height: 7px;
-            width: 7px;
-            background-color: #707070;
-            border-radius: 50px;
-        }
-
-        .status-label {
-            display: flex;
-            flex-wrap: wrap;
-            gap: 1.5rem;
-            overflow: auto;
-            font-size: 0.9rem;
-            line-height: 1.25;
-            color: #000000f2;
-        }
-
-        .info-labels {
-            display: flex;
-            gap: 0.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-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('../../assets/icons/info-circle-bold.svg');
-            }
-        }
-
-        .arrow-right-icon {
-            background-repeat: no-repeat;
-            background-position: center;
-            height: 1rem;
-            width: 1rem;
-            display: block;
-            background-size: contain;
-            background-image: url('../../assets/icons/arrow-right-bold.svg');
-            align-self: flex-end;
-
-            margin-left: auto;
-        }
-    }
-}
-
-.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;
-
-    &.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');
-    }
-}
-    // background-image: url('../../assets/icons/cisco_9861.png');
-
-    // &.cisco-9861 {
-    //     background-image: url('../../assets/icons/cisco_9861.png');
-    // }
-
-    // &.cisco-8851 {
-    //     background-image: url('../../assets/icons/cisco_8851.png');
-    // }

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

@@ -1,34 +0,0 @@
-import { Component, EventEmitter, Input, Output } from '@angular/core';
-import { Device } from '../../classes/device';
-
-const POPULAR_DEVICES = ['8851', '8841', '7841'];
-
-const DEFAULT_SCREEN = 'cisco_9861';
-
-@Component({
-  selector: 'app-device-row',
-  templateUrl: './device-row.component.html',
-  styleUrls: ['./device-row.component.scss']
-})
-export class DeviceRowComponent {
-  @Input() device!: Device;
-  @Output()
-  onDeviceSelect = new EventEmitter<Device>();
-
-  constructor() {
-    console.log('device row component', this.device);
-  }
-
-  selectDevice(device: Device): void {
-    this.onDeviceSelect.emit(device);
-  }
-
-
-  getImageClass(deviceType: string) {
-    const numbers = deviceType.match(/\d+/g);
-    if(numbers && POPULAR_DEVICES.includes(numbers[0])) {
-      return `cisco_${numbers[0]}`;
-    }
-    else return DEFAULT_SCREEN;
-  }
-}

package/projects/tuki/widgets/user-manage/src/environments/environment.prod.ts

@@ -1,9 +0,0 @@
-export const environment = {
-  production: true,
-  apiUrl: '',
-  notificationsLifetime: 30000,
-  longNotificationsLifetime: 45000,
-  cashCleanTimer: 300000,
-  cashArrayLength: 1000,
-  matomoUrl: '',
-};

package/projects/tuki/widgets/user-manage/src/environments/environment.ts

@@ -1,10 +0,0 @@
-export const environment = {
-  production: false,
-  // apiUrl: 'http://localhost:4200',
-  apiUrl: 'http://192.168.0.191:8080',
-  notificationsLifetime: 30000,
-  longNotificationsLifetime: 45000,
-  cashCleanTimer: 900000,
-  cashArrayLength: 10000,
-  matomoUrl: 'http://192.168.0.136/matomo/',
-};

package/projects/tuki/widgets/user-manage/src/interseptors/auth.interceptor.ts

@@ -1,35 +0,0 @@
-import { Injectable } from '@angular/core';
-import {HttpEvent, HttpRequest, HttpInterceptor, HttpHandler, HttpErrorResponse} from '@angular/common/http';
-import { Observable, throwError } from 'rxjs';
-import {catchError } from 'rxjs/operators';
-
-@Injectable()
-export class AuthInterceptor implements HttpInterceptor {
-  constructor() {
-  }
-
-  intercept(
-    request: HttpRequest<any>,
-    next: HttpHandler
-  ): Observable<HttpEvent<any>> {
-    request = request.clone({
-      setHeaders: {
-        // Authorization: basicAuthHeaderString
-      }
-      , withCredentials: true
-    })
-
-    return next.handle(request).pipe(catchError(err => {
-      if (err instanceof HttpErrorResponse) {
-        if (err.status === 401) {
-          if (window.history.length < 3) {
-            err.error.message = '';
-          } else {
-            err.error.message = 'SESSION_INACTIVE';
-          }
-        }
-      }
-      return throwError(err);
-    }));
-  }
-}

package/projects/tuki/widgets/user-manage/src/lazy-loading-select/lazy-loading-select.component.html

@@ -1,68 +0,0 @@
-<ng-container *ngIf="standalone">
-  <mat-form-field appearance="outline">
-    <mat-select [formControl]="formControl"
-                (openedChange)="getOptions()"
-                [placeholder]="placeholder"
-                (selectionChange)="onFieldChange(controlName)"
-                [id]="id">
-      <mat-option class="search-input">
-        <div class="select-search-wrapper">
-          <input
-            type="text"
-            placeholder="Search"
-            class="select-search-input"
-            (click)="$event.stopPropagation()"
-            (keydown)="$event.stopPropagation()"
-            (input)="onInputChange($event)"
-          >
-          <span class="search-icon-inside">
-            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 32 32">
-              <path d="M13 2.25C7.063 2.25 2.25 7.063 2.25 13S7.063 23.75 13 23.75c2.699 0 5.165-.994 7.053-2.637l8.417 8.417a.75.75 0 1 0 1.06-1.06l-8.417-8.417A10.7 10.7 0 0 0 23.75 13c0-5.937-4.813-10.75-10.75-10.75M3.75 13a9.25 9.25 0 1 1 18.5 0 9.25 9.25 0 0 1-18.5 0" fill="#000"/>
-            </svg>
-          </span>
-        </div>
-      </mat-option>
-      <mat-option *ngIf="default" [disabled]="default.disabled" [value]="default.key">{{default.value}}</mat-option>
-      <mat-option *ngFor="let type of filteredOptions" [value]="type">
-        {{type}}
-      </mat-option>
-      <mat-progress-spinner class="field-spinner"
-                            [diameter]="70"
-                            strokeWidth="3"
-                            mode="indeterminate"
-                            *ngIf="optionsPending"></mat-progress-spinner>
-    </mat-select>
-    <mat-error *ngIf="form.get(controlName)?.hasError(errorCode)">
-      <i class="fa fa-exclamation-triangle"></i>
-      {{errorText}}
-    </mat-error>
-  </mat-form-field>
-</ng-container>
-
-<!--
-This duplication is caused by the following bug: https://github.com/angular/components/issues/9411
-Which doesn't allow projection in mat-form-field
--->
-
-<ng-container *ngIf="!standalone">
-  <mat-select *ngIf="form.get(controlName)"
-              [formControl]="formControl"
-              (openedChange)="getOptions()"
-              [placeholder]="placeholder"
-              (selectionChange)="onFieldChange(controlName)"
-              [id]="id"
-  >
-    <mat-option *ngIf="default" [disabled]="default.disabled" [value]="default.key">{{default.value}}</mat-option>
-    <mat-option *ngFor="let type of options" [value]="type">
-      {{type}}
-    </mat-option>
-    <mat-progress-spinner class="field-spinner"
-                          [diameter]="20"
-                          mode="indeterminate"
-                          *ngIf="optionsPending"></mat-progress-spinner>
-  </mat-select>
-  <mat-error *ngIf="form.get(controlName)?.hasError(errorCode)">
-    <i class="fa fa-exclamation-triangle"></i>
-    {{errorText}}
-  </mat-error>
-</ng-container>

package/projects/tuki/widgets/user-manage/src/lazy-loading-select/lazy-loading-select.component.scss

@@ -1,125 +0,0 @@
-::ng-deep {
-  .mat-option {
-    white-space: nowrap !important;
-    overflow: hidden !important;
-    text-overflow: ellipsis !important;
-    display: block !important;
-    line-height: 48px !important;
-    height: 48px !important;
-    padding: 0 10px !important;
-    text-align: left !important;
-    text-decoration: none !important;
-    max-width: 100% !important;
-    position: relative !important;
-    cursor: pointer !important;
-    outline: none !important;
-    display: flex !important;
-    flex-direction: row !important;
-    max-width: 100% !important;
-    box-sizing: border-box !important;
-    align-items: center !important;
-    -webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important;
-  }
-
-  .mat-select-panel .mat-option.mat-selected:not(.mat-option-multiple) {
-    background: #bfe3ff;
-    color: #000000;
-  }
-
-  .mat-select-panel .mat-option:not(.search-input):hover {
-      background: #daedfc;
-  }
-}
-
-.select-search-wrapper {
-  position: relative;
-  width: 100%;
-}
-.search-icon-inside {
-  position: absolute;
-  left: 12px;
-  top: 50%;
-  transform: translateY(-50%);
-  pointer-events: none;
-  z-index: 2;
-  display: flex;
-  align-items: center;
-}
-:host {
-  height: 35px;
-    width: 93% !important;
-    max-width: 93% !important;
-    min-width: 0 !important;
-    height: auto !important;
-    box-sizing: border-box;
-  ::ng-deep mat-form-field {    width: 100%;
-    max-width: 100%;
-    height: 35px;
-
-    .mat-form-field-flex {
-      .mat-form-field-outline {
-        .mat-form-field-outline-start {
-          border: none !important;
-        }
-      }
-    }
-  }
-}
-
-.select-search-input {
-  width: 100%;
-  box-sizing: border-box;
-  padding: 7px 14px 7px 38px;
-  margin: 10px 0;
-  border: 3px solid #ccc;
-  border-radius: 0.5rem;
-  outline: none;
-  font-size: 14px;
-  transition: border-color 0.2s;
-}
-
-.select-search-input:focus {
-  border-color: #1170cf;
-}
-
-.field-spinner {
-  margin-top: -30px;
-}
-
-::ng-deep .mat-select-arrow {
-  display: none;
-}
-
-// ::ng-deep .mat-select-trigger {
-//   position: relative;
-//   padding-right: 32px;
-// }
-
-// ::ng-deep .mat-select-trigger::after {
-//   content: '';
-//   position: absolute;
-//   right: 12px;
-//   top: 50%;
-//   width: 12px;
-//   height: 12px;
-//   background: url('../assets/icons/arrow-down-bold.svg') no-repeat center;
-//   background-size: contain;
-//   transform: translateY(-50%) rotate(90deg);
-//   transform-origin: center;
-//   pointer-events: none;
-// }
-
-::ng-deep .mat-select-trigger {
-  background: url("../assets/icons/arrow-down-bold.svg") no-repeat right 12px
-    center;
-  background-size: 16px;
-  padding-right: 32px;
-}
-
-// ::ng-deep .mat-select-arrow {
-//   border: none;               // remove triangle
-//   width: 16px;
-//   height: 16px;
-//   background: url('../assets/icons/arrow-right.svg') no-repeat center;
-//   background-size: contain;
-// }

package/projects/tuki/widgets/user-manage/src/lazy-loading-select/lazy-loading-select.component.ts

@@ -1,93 +0,0 @@
-import { AfterContentInit, Component, EventEmitter, Input, Output } from '@angular/core';
-import { FormControl, FormGroup } from '@angular/forms';
-import { NotificationService } from '../services/notification.service';
-import { SiteSettingsService } from '../services/site-settings.service';
-
-export interface OptionValue {
-  key: string;
-  value: string;
-  disabled: boolean;
-}
-
-@Component({
-  selector: 'app-lazy-loading-select',
-  templateUrl: './lazy-loading-select.component.html',
-  styleUrls: ['./lazy-loading-select.component.scss']
-})
-export class LazyLoadingSelectComponent implements AfterContentInit {
-  optionsPending!: boolean;
-  options!: any;
-
-  @Input()
-  public siteId!: number
-  @Input()
-  public form!: FormGroup;
-  @Input()
-  public standalone = true;
-  @Input()
-  public placeholder!: string;
-  @Input()
-  public controlName!: string;
-  @Input()
-  public optionsToken!: string;
-  @Input()
-  public appearance = 'standard';
-  @Input()
-  public errorCode!: string;
-  @Input()
-  public errorText!: string;
-  @Input()
-  public default!: OptionValue;
-  @Input()
-  public id!: string;
-  @Output()
-  public changeField = new EventEmitter<string>();
-
-  filteredOptions!: any[];
-
-  get formControl(): FormControl {
-    return this.form?.get(this.controlName) as FormControl;
-  }
-
-
-  constructor(
-    private notificationService: NotificationService,
-    private siteSettingsService: SiteSettingsService,
-  ) {
-  }
-
-  ngAfterContentInit() {
-    this.options = [this.form?.get(this.controlName)?.value];
-    this.filteredOptions = this.options;
-  }
-
-  getOptions() {
-    if (!this.siteId && this.options.length > 1) {
-      return;
-    }
-    this.optionsPending = true;
-    this.siteSettingsService.getSelectionOptions(this.siteId, this.optionsToken)
-      .subscribe(() => {
-        this.optionsPending = false;
-        // @ts-ignore
-        this.options = this.siteSettingsService[this.optionsToken];
-        this.filteredOptions = this.options;
-      }, () => {
-        this.optionsPending = false;
-        // this.notificationService.error(this.translate.instant('COMMON.LOAD_SELECT_OPTIONS_FAILED'));
-      });
-  }
-
-  public onFieldChange(token: string) {
-    this.changeField.emit(token);
-  }
-
-  onInputChange(event: Event): void {
-    const input = event.target as HTMLInputElement;
-    const value = input.value.trim().toLowerCase();
-
-    this.filteredOptions = this.options.filter((option: OptionValue) =>
-      option.value.toLowerCase().includes(value)
-    );
-  }
-}

package/projects/tuki/widgets/user-manage/src/material.module.ts

@@ -1,85 +0,0 @@
-import { NgModule } from '@angular/core';
-
-import { MatExpansionModule } from '@angular/material/expansion';
-import { MatDatepickerModule } from '@angular/material/datepicker';
-import { MatAutocompleteModule } from '@angular/material/autocomplete';
-import { MatChipsModule } from '@angular/material/chips';
-import { MatListModule } from '@angular/material/list';
-import { MatSidenavModule } from '@angular/material/sidenav';
-import { MatTreeModule } from '@angular/material/tree';
-import { DragDropModule } from '@angular/cdk/drag-drop';
-import { MatButtonModule } from '@angular/material/button';
-import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
-import { MatInputModule } from '@angular/material/input';
-import { MatNativeDateModule } from '@angular/material/core';
-import { MatTooltipModule } from '@angular/material/tooltip';
-import { MatFormFieldModule } from '@angular/material/form-field';
-import { MatStepperModule } from '@angular/material/stepper';
-import { MatTabsModule } from '@angular/material/tabs';
-import { MatCardModule } from '@angular/material/card';
-import { MatSelectModule } from '@angular/material/select';
-import { MatCheckboxModule } from '@angular/material/checkbox';
-import { MatSlideToggleModule } from '@angular/material/slide-toggle';
-import { MatTableModule } from '@angular/material/table';
-import { MatPaginatorModule } from '@angular/material/paginator';
-
-
-@NgModule({
-  imports: [
-    DragDropModule,
-    MatButtonModule,
-    MatListModule,
-    MatProgressSpinnerModule,
-    MatExpansionModule,
-    MatInputModule,
-    MatInputModule,
-    MatListModule,
-    MatTreeModule,
-    MatTreeModule,
-    MatNativeDateModule,
-    MatDatepickerModule,
-    MatTooltipModule,
-    MatAutocompleteModule,
-    MatChipsModule,
-    MatSidenavModule,
-    MatFormFieldModule,
-    MatStepperModule,
-    MatTabsModule,
-    MatCardModule,
-    MatSelectModule,
-    MatCheckboxModule,
-    MatSlideToggleModule,
-    MatTableModule,
-    MatPaginatorModule
-  ],
-  exports: [
-    DragDropModule,
-    MatButtonModule,
-    MatListModule,
-    MatProgressSpinnerModule,
-    MatExpansionModule,
-    MatInputModule,
-    MatInputModule,
-    MatListModule,
-    MatTreeModule,
-    MatTreeModule,
-    MatNativeDateModule,
-    MatDatepickerModule,
-    MatTooltipModule,
-    MatAutocompleteModule,
-    MatChipsModule,
-    MatSidenavModule,
-    MatFormFieldModule,
-    MatStepperModule,
-    MatTabsModule,
-    MatCardModule,
-    MatCheckboxModule,
-    MatSelectModule,
-    MatSlideToggleModule,
-    MatProgressSpinnerModule,
-    MatTableModule,
-    MatPaginatorModule
-  ],
-})
-export class MaterialModule {
-}

package/projects/tuki/widgets/user-manage/src/notifications/notification.component.html

@@ -1,33 +0,0 @@
-<!--
-
-<div class="notification-block" role="alert" aria-live="assertive">
-  <div class="notification"
-       *ngFor="let notification of list"
-       [ngClass]="{'error': notification.isError(), 'success': notification.isSuccess()}">
-
-    <div class="flex-box">
-      <div class="notification-icons-block">
-        <i *ngIf="notification.isError()" class="fa fa-exclamation-triangle"></i>
-        <i *ngIf="notification.isWarning()" class="fa fa-hand-paper-o"></i>
-        <i *ngIf="notification.isSuccess()" class="fa fa-check"></i>
-        <i *ngIf="notification.isInfo()" class="fa fa-info-circle"></i>
-      </div>
-      <div *ngIf="!isReadMore" class="message-block">
-        {{notification.message | truncate:[93]}}
-      </div>
-      <div *ngIf="isReadMore" class="message-block">
-        {{notification.message}}
-      </div>
-    </div>
-    <div class="read-more-error link clickable" *ngIf="notification.message && notification.message.length > 93"
-         (click)="readMore()">{{(isReadMore ? 'BUTTON.COLLAPSE' : 'BUTTON.READ_MORE') | translate}}</div>
-    <button
-      class="close"
-      mat-icon-button
-      matTooltip="{{'BUTTON.CLOSE' | translate}} {{'NOTIFICATION_MSG.' + notification.type | translate}} {{'NOTIFICATION_MSG.NOTI' | translate}}"
-      (click)="removeNotification(notification)">
-      <img class="notification-icon-close" src="assets/icons/close_icon_modal.svg" alt="">
-    </button>
-  </div>
-</div>
--->