@inspark/inspark-components 19.0.49 → 19.0.51

package/src/components/select-list/select-list.component.scss

@@ -0,0 +1,36 @@
+.buttons {
+  text-align: right;
+
+  p-button {
+    margin-left: 8px;
+  }
+}
+
+.container {
+  padding: 12px;
+}
+
+:host ::ng-deep .c-select_block {
+  position: relative;
+  left: 10px;
+  width:30%;
+}
+
+:host ::ng-deep .c-input_small {
+  width: 50%;
+}
+
+
+:host {
+  ::ng-deep .my-tree {
+    width: 100%;
+    display:inline-block;
+    position: relative;
+
+    .c-inputtext {
+      width: 500px;
+      /*background: url("magnifier.svg") no-repeat 460px 5px;*/
+    }
+
+  }
+}

package/src/components/select-list/select-list.component.ts

@@ -0,0 +1,65 @@
+import {
+  Component, OnInit,
+} from '@angular/core';
+import {Router} from '@angular/router';
+import {InsparkMessageService} from "../../services/inspark-message.service";
+import {gettext} from "../../utils/gettextMarker.function";
+import {DynamicDialogConfig, DynamicDialogRef} from 'primeng/dynamicdialog';
+
+@Component({
+  standalone: false,
+  selector: 'app-select-list',
+  templateUrl: './select-list.component.html',
+  styleUrls: ['./select-list.component.scss'],
+})
+export class SelectListComponent implements OnInit {
+
+  objects: any[];
+  selected: Boolean[];
+  title: string;
+  objs;
+  options: {value: string, checked: boolean}[] = null;
+  isShowSpinner = false;
+
+  constructor(public ref: DynamicDialogRef,
+              public config: DynamicDialogConfig,
+              private messageService: InsparkMessageService,
+              public router: Router,
+              ) {
+
+  }
+
+  ngOnInit() {
+    this.options = this.config.data.command.options.map(item =>  {
+        return {value: item, checked: false};
+      }
+    );
+    this.selected = Array(this.options.length).fill(false);
+  }
+
+ closeModal(val = null) {
+    this.ref.close(val);
+  }
+
+  applySelection() {
+    if (!this.selected) {
+      this.messageService.message(gettext('Select object'));
+      return;
+    } else {
+      this.closeModal({selected: this.options.filter(o => o.checked)});
+    }
+
+  }
+
+
+  select(i) {
+    this.options[i].checked = !this.options[i].checked;
+  }
+
+
+
+  highlight(value: string, text): string {
+    const regex = new RegExp('(' + text + ')', 'gi');
+    return value.replace(regex, '<span class="u-text-highlight">$1</span>');
+  }
+}

package/src/components/shared/shared-components.module.ts

@@ -0,0 +1,24 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { RouterModule } from '@angular/router';
+
+import { TranslateModule } from '@ngx-translate/core';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    ReactiveFormsModule,
+    RouterModule,
+    TranslateModule
+  ],
+  exports: [
+    CommonModule,
+    FormsModule,
+    ReactiveFormsModule,
+    RouterModule,
+    TranslateModule
+  ]
+})
+export class SharedComponentsModule {}

package/src/components/shared/shared-ui.module.ts

@@ -0,0 +1,23 @@
+import { NgModule } from '@angular/core';
+import { SharedComponentsModule } from './shared-components.module';
+import {InlineSVGModule} from 'ng-inline-svg-2';
+import { ButtonComponentModule } from '../button/button.module';
+import { StickyComponentModule } from '../sticky/sticky.module';
+import { HttpClientModule } from '@angular/common/http';
+
+@NgModule({
+  imports: [
+    SharedComponentsModule,
+    HttpClientModule,
+    ButtonComponentModule,
+    StickyComponentModule,
+    InlineSVGModule
+  ],
+  exports: [
+    SharedComponentsModule,
+    InlineSVGModule,
+    ButtonComponentModule,
+    StickyComponentModule
+  ]
+})
+export class SharedUiModule {}

package/src/components/status-circle/status-circle.component.html

@@ -0,0 +1,10 @@
+<div [ngClass]="{'icon': icon ,'has-content': content!==''}"
+     class="circle-container {{size}}"
+     title="{{title ? title : label}}">
+    <span class="circle {{mode}}">
+      <in-svg *ngIf="icon" [src]="icon"></in-svg>
+      <i *ngIf="inIcon" [ngClass]="inIcon" class="in"></i>
+      <span *ngIf="content!==''" class="content">{{content}}</span>
+    </span>
+  <span *ngIf="showLabel && label" class="label">{{label}}</span>
+</div>

package/src/components/status-circle/status-circle.component.scss

@@ -0,0 +1,115 @@
+@use "@inspark/components-web/src/inspark" as *;
+
+:host {
+  display: inline-block;
+  line-height: 0;
+
+}
+
+.circle-container {
+  font-size: 14px;
+  display: inline-block;
+
+  &.small {
+    font-size: 12px;
+
+    .circle {
+      width: 8px;
+      height: 8px;
+    }
+  }
+
+  &.normal .circle {
+    width: 12px;
+    height: 12px;
+  }
+
+  &.big .circle {
+    min-width: 20px;
+    min-height: 20px;
+  }
+
+
+  &.mini {
+    margin-top: -2px;
+    position: relative;
+    padding: 0;
+    top: -3px;
+
+    .circle {
+      width: 4px;
+      height: 4px;
+    }
+  }
+}
+
+.circle {
+  display: inline-grid;
+  align-items: center;
+  justify-content: center;
+  color: var(--colorTextOnStatus);
+  border-radius: 20px;
+  position: relative;
+
+  in-svg {
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    height: 18px;
+    width: 18px;
+    transform: translate(-50%, -50%);
+  }
+}
+
+.falsevalue {
+  background: var(--colorFalseValue)
+}
+
+.success {
+  background: var(--colorSuccess)
+}
+
+.maintenance  {
+  background: var(--colorMaintenance);
+}
+
+.warning {
+  background: var(--colorWarning);
+}
+
+.error {
+  background: var(--colorError)
+}
+
+.none {
+  background: var(--colorNoControl);
+}
+
+.critical {
+  background: var(--colorCritical);
+}
+
+.primary {
+  background: var(--ids-theme-primary, $ids-theme-primary);
+}
+
+
+.inverse {
+  background: var(--colorIcon, $ids-theme-primary);
+  color: var(--colorTextInverse);
+}
+
+.black {
+  background: #000;
+}
+
+
+.label {
+  margin-left: 6px;
+}
+
+.content {
+  display: inline-block;
+  line-height: 100%;
+  padding: 0 5px;
+}

package/src/components/status-circle/status-circle.component.ts

@@ -0,0 +1,24 @@
+import {Component, Input, ViewEncapsulation} from '@angular/core';
+import {CircleMode, CircleSize} from "../../interface";
+
+
+@Component({
+  standalone: false,
+  selector: 'in-status-circle',
+  templateUrl: './status-circle.component.html',
+  styleUrls: ['./status-circle.component.scss'],
+  encapsulation: ViewEncapsulation.Emulated
+})
+export class StatusCircleComponent {
+
+
+  @Input() label = '';
+  @Input() title = '';
+  @Input() icon = '';
+  @Input() inIcon = '';
+  @Input() showLabel = true;
+  @Input() mode: CircleMode = 'success';
+  @Input() size: CircleSize = 'normal';
+  @Input() content: any = '';
+
+}

package/src/components/sticky/sticky.component.html

@@ -0,0 +1,9 @@
+<div #sticky [ngClass]="{inline:isInline}" [ngStyle]="{height: this.height?this.height+'px':'auto'}"
+     class="sticky-container">
+  <div [ngClass]="{sticky: isSticky, floated: isFloated && isSticky}"
+       [ngStyle]="{zIndex:this.zIndex, top: (this.top) + 'px', left: this.left+ 'px', width: this.width?this.width+'px':'auto'}">
+    <div [ngClass]="class + ' u-overflow-hidden'">
+      <ng-content></ng-content>
+    </div>
+  </div>
+</div>

package/src/components/sticky/sticky.component.scss

@@ -0,0 +1,17 @@
+.sticky {
+  position: fixed;
+  display: inline-block;
+}
+
+.floated {
+  box-shadow: 0 0 4px 2px rgba(0, 0, 0, 0.3);
+
+}
+
+.sticky-container {
+
+}
+
+.inline {
+  display: inline-block;
+}

package/src/components/sticky/sticky.component.ts

@@ -0,0 +1,60 @@
+import {ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, Input, OnDestroy, OnInit, ViewChild, ViewEncapsulation} from '@angular/core';
+
+@Component({
+  standalone: false,
+  selector: 'in-sticky',
+  templateUrl: './sticky.component.html',
+  styleUrls: ['./sticky.component.scss'],
+  encapsulation: ViewEncapsulation.Emulated,
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class InsparkStickyComponent implements OnInit, OnDestroy {
+
+  @ViewChild('sticky', {static: false}) stickyRef: ElementRef;
+  @Input() top = 100;
+  @Input() isInline = false;
+  @Input() isFloated = true;
+  @Input() zIndex = 10;
+  @Input() class = '';
+
+  isSticky = false;
+  height = 0;
+  width = 0;
+  left = 0;
+  right = 0;
+
+  constructor(private cdr: ChangeDetectorRef) {
+
+  }
+
+  ngOnInit() {
+    document.addEventListener('scroll', this.scroll);
+    window.addEventListener('resize', this.resize);
+  }
+
+  ngOnDestroy() {
+    document.removeEventListener('scroll', this.scroll);
+    window.removeEventListener('resize', this.resize);
+  }
+
+  resize = () => {
+    const rect = this.stickyRef.nativeElement.getBoundingClientRect();
+    this.width = rect.width;
+    this.left = rect.x;
+    this.cdr.detectChanges();
+  };
+
+  scroll = () => {
+    const rect = this.stickyRef.nativeElement.getBoundingClientRect();
+    const isSticky = rect.top < this.top;
+    if (isSticky !== this.isSticky) {
+      this.height = rect.height;
+      this.isSticky = rect.top < this.top;
+      this.left = rect.x;
+      this.width = rect.width;
+      this.right = rect.right;
+      this.cdr.detectChanges();
+    }
+  };
+
+}

package/src/components/sticky/sticky.module.ts

@@ -0,0 +1,18 @@
+import { NgModule } from '@angular/core';
+
+import { SharedComponentsModule } from '../shared/shared-components.module';
+
+import { InsparkStickyComponent } from './sticky.component';
+
+@NgModule({
+  declarations: [
+    InsparkStickyComponent
+  ],
+  imports: [
+    SharedComponentsModule
+  ],
+  exports: [
+    InsparkStickyComponent
+  ]
+})
+export class StickyComponentModule {}

package/src/components/svg/svg.component.html

@@ -0,0 +1,3 @@
+<span [inlineSVG]="src"
+      [ngClass]="{svg: true, 'c-icon_svg-small': size === 'small', 'c-icon_svg-large': size === 'large'}" [ngStyle]="{width: width, height: height}"></span>
+

package/src/components/svg/svg.component.scss

@@ -0,0 +1,14 @@
+.svg {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.c-icon_svg-small {
+  width: 16px;
+  height: 16px;
+}
+
+:host {
+  display: inline-block;
+}

package/src/components/svg/svg.component.ts

@@ -0,0 +1,18 @@
+import {Component, Input} from '@angular/core';
+
+type SVGSize = 'small' | 'normal' | 'large';
+
+@Component({
+  standalone: false,
+  selector: 'in-svg',
+  templateUrl: './svg.component.html',
+  styleUrls: ['./svg.component.scss'],
+})
+export class SvgComponent {
+
+  @Input() size: SVGSize = 'normal';
+  @Input() width = '100%';
+  @Input() height = '100%';
+  @Input() src: string;
+
+}

package/src/components/svg/svg.module.ts

@@ -0,0 +1,18 @@
+import { NgModule } from '@angular/core';
+import { SharedComponentsModule } from '../shared/shared-components.module';
+import { SvgComponent } from './svg.component';
+import {InlineSVGModule} from 'ng-inline-svg-2';
+
+@NgModule({
+  declarations: [
+    SvgComponent
+  ],
+  imports: [
+    SharedComponentsModule,
+    InlineSVGModule
+  ],
+  exports: [
+    SvgComponent
+  ]
+})
+export class SvgComponentModule {}

package/src/components/switcher/switcher.component.html

@@ -0,0 +1,23 @@
+<label class="c-checkbox c-checkbox_switch container">
+  <span *ngIf="label" class="label">{{label}}</span>
+  <span  class="switcher-container">
+        <span class="c-checkbox__label u-vertical-align-middle u-text_center">
+            <span *ngIf="!iconOff">{{labelOff | translate}}</span>
+            <span *ngIf="faIconOff"><i class="fa" [ngClass]="faIconOff"></i></span>
+            <in-svg *ngIf="iconOff" [src]="iconOff" height="48px" size="large" width="48px"></in-svg>
+        </span>
+        <input  *ngIf="!waiting" (change)="onChange($event)"
+               [(ngModel)]="value"
+               [checked]="value" [disabled]="disabled"
+               class="c-checkbox__input"
+               name="element_name"
+               type="checkbox"/>
+        <i  *ngIf="!waiting" class="c-checkbox__icon u-margin-left-tiny u-vertical-align-baseline"></i>
+        <span *ngIf="waiting" style = "display: inline-block; width:50px; text-align: center"><i class="in in-spinner fa-spin "></i></span>
+        <span  class="c-spinner c-checkbox__label u-vertical-align-middle u-text_center">
+            <span *ngIf="!iconOn">{{labelOn | translate}}</span>
+            <span *ngIf="faIconOn"><i class="fa" [ngClass]="faIconOn"></i></span>
+            <in-svg *ngIf="iconOn" [src]="iconOn" height="48px" size="large" width="48px"></in-svg>
+        </span>
+    </span>
+</label>

package/src/components/switcher/switcher.component.scss

@@ -0,0 +1,30 @@
+.container {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+}
+
+.c-checkbox_switch .c-checkbox__icon {
+  height: 30px;
+}
+
+.c-checkbox {
+  margin-right: 0;
+}
+
+.label {
+  font-size: 11px;
+  font-weight: bold;
+  display: block;
+  text-align: center;
+  //color: var(--colorTextSecondary);
+  text-transform: uppercase;
+  margin-bottom: 2px;
+}
+
+.switcher-container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}

package/src/components/switcher/switcher.component.ts

@@ -0,0 +1,104 @@
+import {ChangeDetectorRef, Component, ElementRef, EventEmitter, forwardRef, Input, OnChanges, OnInit, Output} from '@angular/core';
+import {ControlValueAccessor, NG_VALUE_ACCESSOR} from '@angular/forms';
+import {Router} from '@angular/router';
+
+@Component({
+  standalone: false,
+  selector: 'in-switcher',
+  templateUrl: './switcher.component.html',
+  styleUrls: ['./switcher.component.scss'],
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => SwitcherComponent),
+      multi: true,
+    }
+  ],
+})
+export class SwitcherComponent implements OnInit, OnChanges, ControlValueAccessor {
+
+  @Input() name = null;
+  @Input() label = null;
+  @Input() error = null;
+  @Input() iconOff = '';
+  @Input() iconOn = '';
+  @Input() labelOff = 'Off';
+  @Input() labelOn = 'On';
+  @Input() faIconOn = '';
+  @Input() faIconOff = '';
+  @Input() id = null;
+  @Input() disabled: boolean;
+  @Input() waiting?: boolean;
+
+  @Output() change: EventEmitter<any> = new EventEmitter();
+
+  _isBoolean = false;
+
+  value: boolean;
+
+
+  constructor(public element: ElementRef, private cdRef: ChangeDetectorRef, public router: Router) {
+
+  }
+
+
+  ngOnInit() {
+    this._isBoolean = typeof this.value === 'boolean';
+    this.value = typeof this.value === 'string' ? JSON.parse(this.value) : !!this.value;
+  }
+
+  ngOnChanges(changes) {
+  }
+
+  /**
+   * Write form value to the DOM element (model => view)
+   */
+  writeValue(value: any): void {
+    this._isBoolean = typeof value === 'boolean';
+    this.value = value;
+    this.cdRef.detectChanges();
+  }
+
+  /**
+   * Write form disabled state to the DOM element (model => view)
+   */
+  setDisabledState(isDisabled: boolean): void {
+    this.disabled = isDisabled;
+  }
+
+  /**
+   * Update form when DOM element value changes (view => model)
+   */
+  registerOnChange(fn: any): void {
+    // Store the provided function as an internal method.
+    this.propagateChange = fn;
+  }
+
+  /**
+   * Update form when DOM element is blurred (view => model)
+   */
+  registerOnTouched(fn: any): void {
+    // Store the provided function as an internal method.
+    this.onTouched = fn;
+  }
+
+  private propagateChange = (_: any) => {
+  }
+
+   onChange(e: Event) {
+    e.stopPropagation();
+    e.preventDefault();
+    if (this._isBoolean) {
+      this.propagateChange(this.value);
+      this.change.emit(this.value);
+
+    } else {
+      this.propagateChange(this.value ? 1 : 0);
+      this.change.emit(this.value ? 1 : 0);
+    }
+  }
+
+  private onTouched() {
+  }
+
+}

package/src/components/table/table-click-outside.directive.ts

@@ -0,0 +1,24 @@
+import {Directive, ElementRef, EventEmitter, HostListener, Output} from '@angular/core';
+
+@Directive({
+  standalone: false,
+  selector: '[inClickOutside]'
+})
+export class TableClickOutsideDirective {
+
+  @Output() clickedOutside = new EventEmitter();
+
+  constructor(private element: ElementRef) {
+  }
+
+  @HostListener('document:click', ['$event'])
+  click(event) {
+    if (!this.element.nativeElement.contains(event.target)) {
+      // console.log('clicked outside');
+      this.clickedOutside.emit(event);
+    } else {
+      // console.log('clicked inside');
+    }
+  }
+
+}

package/src/components/table/table-columns-multiselect/table-columns-multiselect.component.html

@@ -0,0 +1,26 @@
+<in-table-menu-overlay [isExpanded]="isExpanded">
+  <ng-container ngProjectAs="host">
+    <button class="c-btn c-btn_border-free c-btn_small">
+      <i [title]="('column switch' | translate)" class="in in-cog"></i><i class="c-caret"></i>
+    </button>
+
+  </ng-container>
+  <ng-container ngProjectAs="body">
+    <ul class="o-list">
+      <li *ngFor="let column of columns" class="c-dropdown-menu__listitem" role="menuitem">
+        <div class="c-dropdown-menu__content">
+          <label class="c-checkbox c-checkbox_switch c-checkbox_compact">
+            <input (ngModelChange)="columnsChange.emit({event: $event, column: column})"
+                   [disabled]="(!column.isHidden && disableActiveCheckboxes) || column.isRequired"
+                   [ngModel]="!column.isHidden "
+                   class="c-checkbox__input"
+                   type="checkbox">
+            <i class="c-checkbox__icon"></i>
+            <span class="c-checkbox__label dropdown-label">{{column.label | translate}}</span>
+          </label>
+        </div>
+      </li>
+    </ul>
+
+  </ng-container>
+</in-table-menu-overlay>

package/src/components/table/table-columns-multiselect/table-columns-multiselect.component.scss

@@ -0,0 +1,3 @@
+.dropdown-label {
+  color: var(--text-color);
+}