@inspark/inspark-components 19.0.49 → 19.0.51

package/src/components/pie/pie.service.ts

@@ -0,0 +1,67 @@
+import {Injectable} from '@angular/core';
+
+
+export interface PieStatuses {
+  '-1': number;
+  0: number;
+  1: number;
+  2: number;
+  3: number;
+}
+
+@Injectable()
+export class PieService {
+
+
+  private colorArray = ['-1', 0, 1, 2, 3, 4]; // Цвета и последовательность в которой они будут отображены
+
+  private colors = {
+    1: '#31ac51',
+    2: '#EE9946',
+    3: '#F95C5D',
+    4: '#a20000',
+    0: '#7E8087',
+    '-1': '#85B3CB'
+  };
+
+  create(statuses: PieStatuses, size): { path: string, color: string }[] {
+    const data = [];
+    let allCount = 0;
+    this.colorArray.forEach((color: any) => {
+      allCount += statuses[color] || 0;
+    });
+    let cumulativePercent = 0;
+    this.colorArray.forEach((color: any) => {
+      const count = statuses[color];
+      if (!count) {
+        return;
+      }
+      const percent = count / allCount;
+      const [startX, startY] = this.getCoordinatesForPercent(size, cumulativePercent);
+      cumulativePercent += percent;
+      const [endX, endY] = this.getCoordinatesForPercent(size, cumulativePercent);
+
+      const largeArcFlag = percent > .5 ? 1 : 0;
+
+      const pathData = [
+        `M ${startX} ${startY}`, // Move
+        `A 20 20 0 ${largeArcFlag} 1 ${endX} ${endY}`, // Arc
+        `L 0 0`, // Line
+      ].join(' ');
+
+      data.push({
+        path: pathData,
+        color: this.colors[color + '']
+      });
+    });
+    return data;
+  }
+
+  private getCoordinatesForPercent(size, percent) {
+    const x = size / 2 * Math.cos(2 * Math.PI * percent);
+    const y = size / 2 * Math.sin(2 * Math.PI * percent);
+    return [x, y];
+  }
+
+}
+

package/src/components/preloader/preloader.component.html

@@ -0,0 +1,17 @@
+<div [ngClass]="{float:!inline, small: size==='small'}" class="preloader-container">
+  <div class="lds-spinner">
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+  </div>
+</div>
+<div *ngIf="overlay" class="overlay"></div>

package/src/components/preloader/preloader.component.scss

@@ -0,0 +1,144 @@
+@use "@inspark/components-web/src/inspark" as *;
+
+.preloader-container {
+  display: inline-flex;
+  width: 100%;
+  height: 64px;
+  position: relative;
+  align-items: center;
+  justify-content: center;
+  z-index: 101;
+
+  &.float {
+    position: absolute;
+    height: auto;
+    width: auto;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+  }
+
+  &.small {
+    width: 32px;
+    height: 32px;
+
+    .lds-spinner {
+      color: var(--ids-theme-btn-primary-background);
+      width: 32px;
+      height: 32px;
+    }
+  }
+}
+
+.lds-spinner {
+  color: var(--ids-theme-btn-primary-background);
+  width: 64px;
+  height: 64px;
+}
+
+.lds-spinner div {
+  transform-origin: 32px 32px;
+  animation: lds-spinner 1.2s linear infinite;
+
+  .small & {
+    transform-origin: 16px 16px;
+  }
+}
+
+.lds-spinner div:after {
+  content: " ";
+  display: block;
+  position: absolute;
+  top: 3px;
+  left: 29px;
+  width: 5px;
+  height: 14px;
+  border-radius: 20%;
+  background: var(--ids-theme-btn-primary-background, $ids-theme-primary);
+
+  .small & {
+    width: 3px;
+    height: 6px;
+    left: 15px;
+  }
+}
+
+.lds-spinner div:nth-child(1) {
+  transform: rotate(0deg);
+  animation-delay: -1.1s;
+}
+
+.lds-spinner div:nth-child(2) {
+  transform: rotate(30deg);
+  animation-delay: -1s;
+}
+
+.lds-spinner div:nth-child(3) {
+  transform: rotate(60deg);
+  animation-delay: -0.9s;
+}
+
+.lds-spinner div:nth-child(4) {
+  transform: rotate(90deg);
+  animation-delay: -0.8s;
+}
+
+.lds-spinner div:nth-child(5) {
+  transform: rotate(120deg);
+  animation-delay: -0.7s;
+}
+
+.lds-spinner div:nth-child(6) {
+  transform: rotate(150deg);
+  animation-delay: -0.6s;
+}
+
+.lds-spinner div:nth-child(7) {
+  transform: rotate(180deg);
+  animation-delay: -0.5s;
+}
+
+.lds-spinner div:nth-child(8) {
+  transform: rotate(210deg);
+  animation-delay: -0.4s;
+}
+
+.lds-spinner div:nth-child(9) {
+  transform: rotate(240deg);
+  animation-delay: -0.3s;
+}
+
+.lds-spinner div:nth-child(10) {
+  transform: rotate(270deg);
+  animation-delay: -0.2s;
+}
+
+.lds-spinner div:nth-child(11) {
+  transform: rotate(300deg);
+  animation-delay: -0.1s;
+}
+
+.lds-spinner div:nth-child(12) {
+  transform: rotate(330deg);
+  animation-delay: 0s;
+}
+
+@keyframes lds-spinner {
+  0% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+
+
+.overlay {
+  position: fixed;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, .7);
+  z-index: 100;
+}

package/src/components/preloader/preloader.component.ts

@@ -0,0 +1,25 @@
+import {Component, Input, OnInit, ViewEncapsulation} from '@angular/core';
+
+
+type PreloaderSize = 'small' | 'normal';
+
+@Component({
+  standalone: false,
+  selector: 'in-preloader',
+  templateUrl: './preloader.component.html',
+  styleUrls: ['./preloader.component.scss'],
+  encapsulation: ViewEncapsulation.Emulated
+})
+export class PreloaderComponent implements OnInit {
+
+  @Input() inline = false;
+  @Input() overlay = false;
+  @Input() size: PreloaderSize = 'normal';
+
+  constructor() {
+  }
+
+  ngOnInit() {
+  }
+
+}

package/src/components/preloader/preloader.module.ts

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

package/src/components/primeng.module.ts

@@ -0,0 +1,28 @@
+import {NgModule} from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+
+import { RadioButtonModule } from 'primeng/radiobutton';
+import { ButtonModule } from 'primeng/button';
+import { DropdownModule } from 'primeng/dropdown';
+
+
+@NgModule({
+  imports: [
+    DropdownModule,
+    CommonModule,
+    FormsModule,
+    RadioButtonModule,
+    ButtonModule
+  ],
+  declarations: [],
+  exports: [
+    DropdownModule,
+    CommonModule,
+    FormsModule,
+    RadioButtonModule,
+    ButtonModule
+  ]
+})
+export class PrimengComponentsModule {
+}

package/src/components/radiobutton/radiobutton.component.html

@@ -0,0 +1,24 @@
+<ng-container *ngFor="let element of values">
+  <label class="in-radiobutton-option u-margin-left-tiny u-vertical-align-middle field_{{name}}">
+    <span
+      class="p-radiobutton p-component"
+      [class.p-radiobutton-checked]="isSelected(element)"
+      [class.p-disabled]="disabled">
+      <input
+        class="p-radiobutton-input"
+        type="radio"
+        [attr.id]="name + '-' + element.id"
+        [attr.name]="name"
+        [value]="element.id"
+        [checked]="isSelected(element)"
+        [disabled]="disabled"
+        (change)="selectElement(element)">
+      <span class="p-radiobutton-box">
+        <span class="p-radiobutton-icon"></span>
+      </span>
+    </span>
+    <span class="p-radiobutton-label u-vertical-align-middle">
+      {{ element[keyLabel] }}
+    </span>
+  </label>
+</ng-container>

package/src/components/radiobutton/radiobutton.component.scss

@@ -0,0 +1,9 @@
+.in-radiobutton-option {
+  display: inline-flex;
+  align-items: center;
+  cursor: pointer;
+}
+
+.in-radiobutton-option .p-disabled {
+  cursor: default;
+}

package/src/components/radiobutton/radiobutton.component.ts

@@ -0,0 +1,47 @@
+import {ChangeDetectionStrategy, Component, EventEmitter, Input, Output} from '@angular/core';
+
+@Component({
+  standalone: false,
+  selector: 'in-radiobutton',
+  templateUrl: './radiobutton.component.html',
+  styleUrls: ['./radiobutton.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class RadiobuttonComponent {
+  @Input() name = null;
+  @Input() label = null;
+  @Input() required = false;
+  @Input() error = null;
+  @Input() placeholder = '';
+  @Input() id = null;
+  @Input() disabled: boolean;
+  @Input() value;
+  @Input() values;
+  @Input() keyLabel;
+  @Input() item;
+  @Output() change = new EventEmitter();
+
+
+  constructor() {
+  }
+
+  get selectedId() {
+    return this.item && typeof this.item === 'object' ? this.item.id : this.item;
+  }
+
+  isSelected(value) {
+    return value && String(this.selectedId) === String(value.id);
+  }
+
+  selectElement(value) {
+    if (!value || this.disabled) {
+      return;
+    }
+    this.item = value.id;
+    this.onChangeEvent(value);
+  }
+
+  onChangeEvent(value) {
+    this.change.next({name: this.name, value});
+  }
+}

package/src/components/select-button/select-button.component.html

@@ -0,0 +1,23 @@
+<span *ngIf="label" class="c-label__content">
+  {{ label }}
+  <span *ngIf="required" class="c-label__req">*</span>
+  <span *ngIf="error" class="c-label__sub_is-error">{{ error }}</span>
+</span>
+
+<div class="container">
+  <!-- фиктивная кнопка если нужна разметка -->
+  <in-button class="button-none"></in-button>
+
+  <in-button
+    *ngFor="let option of options; trackBy: trackByValue"
+    (click)="clickButton(option)"
+    [color]="selected.includes(option.value) ? 'primary' : 'normal'"
+    [icon]="option.icon"
+    [label]="option.label | translate"
+    [testId]="'filter-buttons-' + option.value"
+    [title]="option.title ? (option.title | translate) : ''"
+    [name]="option.label"
+    [disabled]="option.readonly || disabled"
+  >
+  </in-button>
+</div>

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

@@ -0,0 +1,28 @@
+.container {
+  white-space: nowrap;
+}
+
+in-button ::ng-deep button {
+  outline: none;
+}
+
+
+in-button:first-child ::ng-deep button {
+  border-bottom-right-radius: 0;
+  border-top-right-radius: 0;
+  border-right: 1px solid #000;
+}
+
+in-button:not(:first-child):not(:last-child) ::ng-deep button {
+  border-radius: 0;
+  border-right: 1px solid #000;
+}
+
+in-button:last-child ::ng-deep button {
+  border-bottom-left-radius: 0;
+  border-top-left-radius: 0;
+}
+
+.button-none {
+  display: none;
+}

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

@@ -0,0 +1,190 @@
+import {
+  ChangeDetectorRef,
+  Component,
+  EventEmitter,
+  forwardRef,
+  Input,
+  OnChanges,
+  OnInit,
+  Output,
+  SimpleChanges,
+} from '@angular/core';
+import {ControlValueAccessor, NG_VALUE_ACCESSOR} from '@angular/forms';
+
+type IconPos = 'left' | 'right';
+
+export interface SelectOption {
+  label: string;
+  title?: string;
+  value: string | number | boolean; // важно: примитив
+  icon?: string;
+  readonly?: boolean;
+}
+
+@Component({
+  standalone: false,
+  selector: 'in-select-button',
+  templateUrl: './select-button.component.html',
+  styleUrls: ['./select-button.component.scss'],
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => SelectButtonComponent),
+      multi: true,
+    },
+  ],
+})
+export class SelectButtonComponent
+  implements ControlValueAccessor, OnInit, OnChanges {
+
+  @Input() name = '';
+  @Input() testId = '';
+  @Input() label = '';
+  @Input() icon = '';
+  @Input() error = '';
+  @Input() iconPos: IconPos = 'left';
+  @Input() options: SelectOption[] = [];
+  @Input() disabled = false;
+  @Input() required = false;
+  @Input() multiple = false;
+  @Input() initial?: Array<string | number | boolean>;
+
+  @Output() focus = new EventEmitter<any>();
+  @Output() blur = new EventEmitter<any>();
+  @Output() click = new EventEmitter<any>();
+  @Output() change = new EventEmitter<any>();
+
+  // хранит выбранные ЗНАЧЕНИЯ, а не объекты
+  selected: Array<string | number | boolean> = [];
+
+  // то, что отдаем наружу в форму
+  value: string | number | boolean | Array<string | number | boolean> | null = null;
+
+  private propagateChange: (val: any) => void = () => {};
+  private propagateTouched: () => void = () => {};
+
+  constructor(private cdRef: ChangeDetectorRef) {}
+
+  ngOnInit(): void {}
+
+  ngOnChanges(changes: SimpleChanges): void {
+    // применяем initial только когда он реально поменялся
+    if (changes['initial'] && this.initial) {
+      this.selected = [...this.initial];
+      this.value = this.multiple ? [...this.initial] : this.initial[0] ?? null;
+      this.cdRef.detectChanges();
+    }
+
+    // если меняется список опций, надо попытаться восстановить выделение
+    if (changes['options'] && this.options && this.options.length > 0) {
+      this.syncSelectedWithOptions();
+    }
+  }
+
+  clickButton(option: SelectOption): void {
+    if (option.readonly || this.disabled) {
+      return;
+    }
+
+    this.click.emit(option);
+
+    if (this.multiple) {
+      if (this.selected.includes(option.value)) {
+        // убираем
+        this.selected = this.selected.filter(v => v !== option.value);
+      } else {
+        // добавляем
+        this.selected = [...this.selected, option.value];
+      }
+      this.value = [...this.selected];
+    } else {
+      this.selected = [option.value];
+      this.value = option.value;
+    }
+
+    this.cdRef.detectChanges();
+    this.onChange();
+  }
+
+  // ControlValueAccessor: model -> view
+  writeValue(value: any): void {
+    this.value = value;
+
+    if (value === null || value === undefined) {
+      this.selected = [];
+    } else if (Array.isArray(value)) {
+      // multiple
+      this.selected = [...value];
+    } else {
+      // single
+      this.selected = [value];
+    }
+
+    // когда значение пришло извне, надо убедиться что такие опции есть
+    this.syncSelectedWithOptions();
+    this.cdRef.detectChanges();
+  }
+
+  // ControlValueAccessor
+  registerOnChange(fn: any): void {
+    this.propagateChange = fn;
+  }
+
+  // ControlValueAccessor
+  registerOnTouched(fn: any): void {
+    this.propagateTouched = fn;
+  }
+
+  // ControlValueAccessor: disabled
+  setDisabledState(isDisabled: boolean): void {
+    this.disabled = isDisabled;
+    this.cdRef.detectChanges();
+  }
+
+  // пробросить наружу
+  private onChange(): void {
+    this.propagateChange(this.value);
+    this.change.emit(this.value);
+  }
+
+  onBlur(): void {
+    this.propagateTouched();
+    this.blur.emit();
+  }
+
+  onFocus(): void {
+    this.focus.emit();
+  }
+
+  // синхронизируем текущее выбранное со свежими options
+  private syncSelectedWithOptions(): void {
+    if (!this.options || this.options.length === 0) {
+      return;
+    }
+
+    if (this.multiple) {
+      // оставляем только те выбранные, которые реально есть в новых options
+      const optionValues = this.options.map(o => o.value);
+      this.selected = this.selected.filter(v => optionValues.includes(v));
+      this.value = [...this.selected];
+    } else {
+      if (this.selected.length > 0) {
+        const current = this.selected[0];
+        const found = this.options.find(o => o.value === current);
+        if (!found) {
+          // выбранного больше нет в списке
+          this.selected = [];
+          this.value = null;
+        } else {
+          this.selected = [found.value];
+          this.value = found.value;
+        }
+      }
+    }
+  }
+
+  // для *ngFor trackBy
+  trackByValue(index: number, item: SelectOption): string | number | boolean {
+    return item.value;
+  }
+}

package/src/components/select-button/select-button.module.ts

@@ -0,0 +1,18 @@
+import { NgModule } from '@angular/core';
+
+import { SharedUiModule } from '../shared/shared-ui.module';
+
+import { SelectButtonComponent } from './select-button.component';
+
+@NgModule({
+  declarations: [
+    SelectButtonComponent
+  ],
+  imports: [
+    SharedUiModule
+  ],
+  exports: [
+    SelectButtonComponent
+  ]
+})
+export class SelectButtonComponentModule {}

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

@@ -0,0 +1,27 @@
+<div class="c-panel__heading-title h4">
+    {{'Select objects for which to execute the command' | translate}}
+</div>
+<span *ngIf="isShowSpinner"><ng-container *ngTemplateOutlet="spinner"></ng-container></span>
+<div class="container">
+    <div class="c-form-group type_treeblock">
+      <div style="overflow: hidden; width: 100%; white-space: nowrap; display: inline-flex;" *ngFor="let item of options; let i = index">
+          <span class="c-label c-label__content" style="width: 100px; min-height: 30px;">{{item.value}}</span>
+          <input class="c-checkbox__input" type="checkbox" [checked]="options[i].checked" >
+          <i class="p-chkbox-box c-checkbox__icon" (click)="select(i)"></i>
+      </div>
+
+    </div>
+    <div class="buttons">
+        <in-component-container>
+            <in-button id="close" (click)="closeModal()"
+                       label="{{'Cancel' | translate}}"></in-button>
+            <in-button id="edit" (click)="applySelection()" type="submit"
+                       label="{{'Apply' | translate}}"
+                       color="primary" [disabled]="" [title]="'Select an action' | translate"></in-button>
+        </in-component-container>
+    </div>
+</div>
+
+<ng-template #spinner><span class="c-spinner">
+            <i class="in in-spinner fa-spin "></i>
+</span></ng-template>