@inspark/inspark-components 19.0.49 → 19.0.51

package/src/components/link/link.component.html

@@ -0,0 +1,75 @@
+<a (blur)="blur.emit($event)"
+   (focus)="focus.emit($event)"
+   *ngIf="link &&_linkType ==='external'"
+   [class]="className"
+   [href]="link"
+   [ngClass]="{'p-link p-state-default p-corner-all p-link-transparency':true,
+                        'p-link-text-icon-left': ((icon || svg) && label && iconPos === 'left'),
+                        'p-link-text-icon-right': ((icon || svg) && label && iconPos === 'right'),
+                        'p-link-text-only': (!(icon || svg) && label),
+                        'p-link-text-empty': (!(icon || svg) && !label),
+                        'p-link-svg': svg,
+                        'p-link-material': isMaterialIcon,
+                        'p-state-disabled': disabled,
+                        'p-link-primary': color === 'primary',
+                        'p-link-secondary': color === 'secondary',
+                        'p-link-danger': color === 'danger'}"
+   [style]="style" [target]="_target">
+  <ng-container *ngTemplateOutlet="content;"></ng-container>
+</a>
+<a (blur)="blur.emit($event)"
+   (focus)="focus.emit($event)"
+   *ngIf="link && _linkType ==='internal'"
+   [class]="className"
+   [ngClass]="{'p-link p-state-default p-corner-all p-link-transparency':true,
+                        'p-link-text-icon-left': ((icon || svg) && label && iconPos === 'left'),
+                        'p-link-text-icon-right': ((icon || svg) && label && iconPos === 'right'),
+                        'p-link-text-only': (!(icon || svg) && label),
+                        'p-link-text-empty': (!(icon || svg) && !label),
+                        'p-link-svg': svg,
+                        'p-link-material': isMaterialIcon,
+                        'p-state-disabled': disabled,
+                        'p-link-primary': color === 'primary',
+                        'p-link-secondary': color === 'secondary',
+                        'p-link-danger': color === 'danger'}"
+   [routerLink]="link"
+   [style]="style" [target]="_target">
+  <ng-container *ngTemplateOutlet="content;"></ng-container>
+</a>
+<span (blur)="blur.emit($event)"
+      (click)="_onClick($event)"
+      (focus)="focus.emit($event)"
+      *ngIf="!link"
+      [class]="className"
+      [ngClass]="{'p-link p-state-default p-corner-all p-link-transparency':true,
+                        'p-link-text-icon-left': ((icon || svg) && label && iconPos === 'left'),
+                        'p-link-text-icon-right': ((icon || svg) && label && iconPos === 'right'),
+                        'p-link-text-only': (!(icon || svg) && label),
+                        'p-link-text-empty': (!(icon || svg) && !label),
+                        'p-link-svg': svg,
+                        'p-link-material': isMaterialIcon,
+                        'p-state-disabled': disabled,
+                        'p-link-primary': color === 'primary',
+                        'p-link-secondary': color === 'secondary',
+                        'p-link-danger': color === 'danger'}" [style]="style">
+    <ng-container *ngTemplateOutlet="content;"></ng-container>
+</span>
+<p-menu *ngIf="menuItems.length" [model]="menuItems" [popup]="true" appendTo="body" styleClass="button-menu"></p-menu>
+
+<ng-template #content>
+    <span *ngIf="!isMaterialIcon && icon" [class]="icon"
+          [ngClass]="{'p-clickable': true,
+                        'p-link-icon-left': (iconPos === 'left'),
+                        'p-link-icon-right': (iconPos === 'right')}"></span>
+  <span *ngIf="isMaterialIcon && icon" [ngClass]="{'p-clickable': true,
+                        'p-link-icon-left': (iconPos === 'left'),
+                        'p-link-icon-right': (iconPos === 'right')}"
+  ><i class="material-icons">{{icon}}</i></span>
+  <span *ngIf="svg" [ngClass]="{'p-clickable': true,
+                        'p-link-icon-left': (iconPos === 'left'),
+                        'p-link-icon-right': (iconPos === 'right')}">
+        <in-svg [src]="svg" height="20px" width="20px"></in-svg>
+    </span>
+  <span class="p-link-text p-clickable">{{label}}</span>
+
+</ng-template>

package/src/components/link/link.component.scss

@@ -0,0 +1,95 @@
+.p-link {
+  text-decoration: none;
+  color: var(--colorLink);
+  cursor: pointer;
+
+  &.p-link-secondary {
+    color: var(--colorTextSecondary);
+  }
+
+  &:hover {
+    color: var(--colorLink);
+  }
+
+  &:hover .p-link-text {
+    text-decoration: underline;
+    color: var(--colorLink);
+  }
+}
+
+button {
+  outline: none;
+}
+
+.p-link-icon-only .p-link-icon-left {
+  margin-top: -9px;
+}
+
+.p-link-text {
+  vertical-align: middle;
+
+}
+
+.p-link {
+  margin-right: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.p-link-text-icon-left .p-link-text {
+  padding-left: .6em
+}
+
+.p-link-icon-only {
+  font-size: 18px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+
+  .svg {
+    display: inline-block;
+    line-height: 0;
+  }
+}
+
+.p-link-transparency {
+  background: none;
+}
+
+.p-link.p-link-svg {
+
+  .p-clickable {
+    height: 20px;
+  }
+
+  .p-link-icon-left {
+    left: 6px;
+    margin-top: -2px;
+  }
+
+  &.p-link-icon-only .p-link-icon-left {
+    left: 50%;
+    width: auto;
+    transform: translate(-50%, -50%);
+    margin-left: 0;
+    margin-top: 0;
+  }
+}
+
+
+.p-link-material {
+
+  .material-icons {
+    font-size: 16px;
+  }
+
+  .p-link-icon-left {
+
+  }
+}
+
+
+:host .p-menu .p-menuitem-link {
+  font-size: 16px;
+}

package/src/components/link/link.component.ts

@@ -0,0 +1,108 @@
+import {Component, EventEmitter, Input, OnChanges, OnInit, Output, ViewChild} from '@angular/core';
+import {MenuItem} from 'primeng/api';
+import {Menu} from 'primeng/menu';
+
+
+type LinkColor = 'normal' | 'secondary' | 'danger' | 'primary'  | 'transparent';
+type IconPos = 'left' | 'right';
+
+@Component({
+  standalone: false,
+  selector: 'in-link',
+  templateUrl: './link.component.html',
+  styleUrls: ['./link.component.scss'],
+})
+export class LinkComponent implements OnInit, OnChanges {
+
+  @Input() color: LinkColor = 'normal';
+  @Input() name = '';
+  @Input() testId = '';
+  @Input() label = '';
+  @Input() icon = '';
+  @Input() className = '';
+  @Input() svg = '';
+  @Input() link = '';
+  /**
+   * external - ссылка на внешний источник
+   * internal - ссылка внутри приложения
+   * auto - определяется автоматически исходя из link
+   */
+  @Input() linkType: 'auto' | 'external' | 'internal' = 'auto';
+  /**
+   * self - открывается в этом же окне
+   * blank - открывается в новом окне
+   * auto - определяется автоматически исходя из linkType
+   */
+  @Input() linkTarget: 'auto' | 'self' | 'blank' = 'auto';
+
+
+  // Отображает кнопку нажатой
+  @Input() pressed = false;
+
+  @Input() disabled = false;
+
+  @Input() iconPos: IconPos = 'left';
+  @Input() menuItems: MenuItem[] = [];
+
+  @ViewChild(Menu, {static: false}) _menu !: Menu;
+
+  @Output() focus: EventEmitter<any> = new EventEmitter();
+  @Output() blur: EventEmitter<any> = new EventEmitter();
+  @Output() click: EventEmitter<any> = new EventEmitter();
+
+  style={}
+
+  _target = '_self';
+  _linkType: 'auto' | 'external' | 'internal' = 'auto';
+
+   isMaterialIcon = false;
+
+  ngOnInit() {
+
+
+    this.updateData();
+  }
+
+  ngOnChanges(changes) {
+    this.updateData();
+  }
+
+  updateData() {
+    this._linkType = this.linkType;
+
+    if (this._linkType === 'auto') {
+      if ((this.link.indexOf('://') !== -1 || this.link.indexOf('//') === 0)) {
+        this._linkType = 'external';
+      } else {
+        this._linkType = 'internal';
+      }
+    }
+
+    if (this.linkTarget === 'auto') {
+      if (this._linkType === 'external') {
+        this._target = '_blank';
+      } else {
+        this._target = '_self';
+      }
+    } else {
+      this._target = this.linkTarget === 'self' ? '_self' : 'blank';
+    }
+
+    if (this.icon && this.icon.indexOf('in-') === -1 && this.icon.indexOf('fa-') === -1) {
+      this.isMaterialIcon = true;
+    } else {
+      this.isMaterialIcon = false;
+    }
+  }
+
+   _onClick($event: Event) {
+    // if (!this.link) {
+    //   $event.stopPropagation();
+    //   $event.preventDefault();
+    //   this.click.emit($event);
+    // }
+    if (this.menuItems.length) {
+      this._menu.toggle($event);
+    }
+  }
+}

package/src/components/link/link.module.ts

@@ -0,0 +1,23 @@
+import { NgModule } from '@angular/core';
+
+import { MenuModule } from 'primeng/menu';
+
+import { SharedUiModule } from '../shared/shared-ui.module';
+import { SvgComponentModule } from '../svg/svg.module';
+
+import { LinkComponent } from './link.component';
+
+@NgModule({
+  declarations: [
+    LinkComponent
+  ],
+  imports: [
+    SharedUiModule,
+    MenuModule,
+    SvgComponentModule
+  ],
+  exports: [
+    LinkComponent
+  ]
+})
+export class LinkComponentModule {}

package/src/components/modal-input-text/modal-input-text.component.html

@@ -0,0 +1,46 @@
+<div class="c-panel__heading-title h4">
+    {{'Enter parameter value' | translate}}
+</div>
+<span *ngIf="isShowSpinner"><ng-container *ngTemplateOutlet="spinner"></ng-container></span>
+<div class="container">
+    <div *ngIf = this.options class="c-form-group type_treeblock">
+      <div *ngFor="let item of options; let i = index">
+          <label class="c-label type_bool" style="overflow: hidden; width: 100%; white-space: nowrap; display: inline-flex;">
+          <span class="c-onecolumn-form_label__content"  [style.width]="maxLength + 'px'" style="position: relative; top: 5px; min-height: 30px;">
+            {{item.value}}
+          </span>
+          <span class="c-onecolumn-form_label__content field_{{item.value}}" style="min-height: 30px;">
+            <input class="c-checkbox__input field_{{item.value}}" type="checkbox" [checked]="options[i].checked" (click)="select(i)">
+            <i class="p-chkbox-box c-checkbox__icon" ></i>
+          </span>
+          </label>
+      </div>
+    </div>
+
+  <div *ngIf=this.param class="o-grid o-grid_wrap">
+    <div class="o-grid__cell o-grid__cell_width-100 o-grid__cell_width-100@medium o-grid__cell_width-100@large">
+      <div class="c-form-group">
+        <label class="c-label type_varchars">
+          <span class="c-label__content" style="width: 500px;white-space: pre-line">{{translate(param.title)}}</span>
+          <input [(ngModel)]="param.value" class="c-input c-input_block field_{{config.data.command.label}}" type="text" maxlength="60">
+        </label>
+      </div>
+    </div>
+  </div>
+  <div class="buttons">
+      <in-component-container>
+          <in-button id="close" (click)="closeModal()"
+                     label="{{'Cancel' | translate}}"
+                     [name]="'Cancel'"
+          ></in-button>
+          <in-button id="edit" (click)="applySelection()" type="submit"
+                     label="{{'Apply' | translate}}"
+                     [name]="'Apply'"
+                     color="primary" [disabled]="checkSelected()" [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>

package/src/components/modal-input-text/modal-input-text.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/modal-input-text/modal-input-text.component.ts

@@ -0,0 +1,100 @@
+import {
+  Component, OnInit,
+} from '@angular/core';
+import {Router} from '@angular/router';
+import {TranslateService} from '@ngx-translate/core';
+import {InsparkMessageService} from "../../services/inspark-message.service";
+import {gettext} from "../../utils/gettextMarker.function";
+import {DynamicDialogConfig, DynamicDialogRef} from 'primeng/dynamicdialog';
+
+@Component({
+  standalone: false,
+  selector: 'app-modal-input-text',
+  templateUrl: './modal-input-text.component.html',
+  styleUrls: ['./modal-input-text.component.scss'],
+})
+export class ModalInputTextComponent implements OnInit {
+
+  objects: any[];
+  selected: Boolean[];
+  title: string;
+  objs;
+  options: {value: string, checked: boolean}[] = null;
+  param: any;
+  isShowSpinner = false;
+  maxLength = 0;
+
+  constructor(public ref: DynamicDialogRef,
+              public config: DynamicDialogConfig,
+              private translateService: TranslateService,
+              private messageService: InsparkMessageService,
+              public router: Router,
+              ) {
+
+  }
+
+  ngOnInit() {
+    this.param = this.config.data.command.param;
+    this.options = this.config.data.command.options.map(item =>  {
+        return {value: item, checked: false};
+      }
+    );
+    if (this.options && this.options.length > 0) {
+      this.calculateWidth();
+    }
+    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),
+          param: this.param ? this.param.value : undefined
+        });
+    }
+
+  }
+
+
+  select(i) {
+    this.options[i].checked = !this.options[i].checked;
+  }
+
+  checkSelected() {
+    if (this.param) {
+      return !this.param.value;
+    } else if (this.options) {
+      return this.options.filter(opt => opt.checked).length === 0;
+    }
+    return false;
+  }
+
+
+  highlight(value: string, text): string {
+    const regex = new RegExp('(' + text + ')', 'gi');
+    return value.replace(regex, '<span class="u-text-highlight">$1</span>');
+  }
+
+  calculateWidth() {
+    this.options.forEach(opt => {
+      if (opt.value.length * 7 > this.maxLength) {
+        this.maxLength = opt.value.length * 7 + 100;
+      }
+    });
+  }
+
+  translate(str: string) {
+    const splited = str.split('\n');
+    let translated = '';
+    splited.forEach(s => translated += this.translateService.instant(s) + '\n');
+    return translated;
+  }
+}

package/src/components/object-tree/object-tree.component.html

@@ -0,0 +1 @@
+<p>object-tree works!</p>

package/src/components/object-tree/object-tree.component.ts

@@ -0,0 +1,17 @@
+import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core';
+
+@Component({
+  standalone: false,
+  selector: 'in-object-tree',
+  templateUrl: './object-tree.component.html',
+  styleUrls: ['./object-tree.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class ObjectTreeComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

package/src/components/panel/panel.component.html

@@ -0,0 +1,3 @@
+<div class="c-panel inspark-panel">
+  <ng-content></ng-content>
+</div>

package/src/components/panel/panel.component.scss

@@ -0,0 +1,3 @@
+.inspark-panel {
+  padding: 8px;
+}

package/src/components/panel/panel.component.ts

@@ -0,0 +1,13 @@
+import {Component} from '@angular/core';
+
+
+@Component({
+  standalone: false,
+  selector: 'in-panel',
+  templateUrl: './panel.component.html',
+  styleUrls: ['./panel.component.scss'],
+})
+export class PanelComponent {
+
+
+}

package/src/components/pie/pie.component.html

@@ -0,0 +1,17 @@
+<div class="pie-block">
+    <svg viewBox="-20 -20 40 40">
+      <defs>
+        <clipPath id="cut-off-bottom">
+          <circle cx="0" cy="0" r="12"></circle>
+        </clipPath>
+      </defs>
+      <mask id="re8-clip">
+        <circle cx="0" cy="0" r="20" fill="white"></circle>
+        <circle cx="0" cy="0" r="14" fill="black"></circle>
+      </mask>
+        <path *ngFor="let path of data" [attr.d]="path.path" [attr.fill]="path.color"  mask="url(#re8-clip)"></path>
+        <text x="0" y="4" text-anchor="middle" fill="currentColor">{{count}}</text>
+    </svg>
+</div>
+
+

package/src/components/pie/pie.component.scss

@@ -0,0 +1,17 @@
+.pie-block {
+  width: 40px;
+  height: 40px;
+  color: var(--text-color);
+
+  text {
+    width: 20px;
+    height: 20px;
+    background: var(--colorBgLevel2);
+    font-size: 11px;
+  }
+
+  svg {
+    width: 40px;
+    height: 40px;
+  }
+}

package/src/components/pie/pie.component.ts

@@ -0,0 +1,66 @@
+// @ts-nocheck
+import {
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  Input,
+  OnChanges,
+  OnDestroy,
+  OnInit,
+  ViewEncapsulation
+} from '@angular/core';
+import {TranslateService} from '@ngx-translate/core';
+import {PieService, PieStatuses} from './pie.service';
+
+
+@Component({
+  standalone: false,
+  selector: 'in-pie',
+  templateUrl: './pie.component.html',
+  styleUrls: ['./pie.component.scss'],
+  encapsulation: ViewEncapsulation.Emulated,
+  providers: [],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ObjectPieComponent implements OnDestroy, OnChanges, OnInit {
+
+
+  @Input() count = 30;
+  @Input() size = 40;
+
+
+  @Input() statuses: PieStatuses =
+    {
+      '-1': 20,
+      0: 4,
+      1: 3,
+      2: 4,
+      3: 5
+    };
+
+  data;
+
+  constructor(
+    private translate: TranslateService,
+    private pieService: PieService,
+    private cdr: ChangeDetectorRef,
+  ) {
+
+  }
+
+
+  ngOnInit(): void {
+    this.data = this.pieService.create(this.statuses, this.size);
+  }
+
+  ngOnDestroy() {
+  }
+
+  ngOnChanges(changes) {
+  }
+
+}
+
+
+
+