@inspark/inspark-components 19.0.49 → 19.0.51

package/src/components/toolbar/toolbar.component.scss

@@ -0,0 +1,117 @@
+
+.toolbar-wrapper {
+  padding-bottom: 4px;
+}
+
+.toolbar-container {
+  padding: 8px;
+  position: relative;
+}
+
+:host {
+  position: sticky;
+  //top: 72px;
+  z-index: 2;
+}
+
+.c-toolbar {
+  display: inline-flex;
+  width: 100%;
+  flex-wrap: wrap;
+}
+
+.c-toolbar__side-left {
+  flex: 100%;
+  text-align: left;
+
+  @media screen and (min-width: 1200px) {
+    flex: 1;
+  }
+}
+
+.c-toolbar__title {
+  display: inline-flex;
+  vertical-align: middle;
+  font-size: 22px;
+}
+
+.c-toolbar__side-right {
+  display: flex;
+  text-align: right;
+}
+
+.add-widget {
+  position: fixed;
+  right: 16px;
+  bottom: 16px;
+}
+
+.widget-container {
+  position: absolute;
+  left: 0;
+  top: 40px;
+  right: 0;
+  bottom: 0;
+  overflow: auto;
+}
+
+.widget-block {
+  position: absolute;
+  left: 5px;
+  top: 5px;
+  right: 5px;
+  bottom: 5px;
+}
+
+
+.sidebar {
+  background: var(--main-background);
+  position: absolute;
+  left: 0;
+  top: 35px;
+  bottom: 0;
+  height: 100vh;
+  z-index: 100;
+  width: 300px;
+  box-shadow: 0 0 3px 8px rgba(0, 0, 0, .1);
+  overflow: auto;
+}
+
+.right-side {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  flex: 1;
+
+  & > * {
+    margin-left: 5px;
+  }
+}
+
+.left-side {
+  white-space: nowrap;
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+
+  & > * {
+    margin-right: 5px;
+  }
+}
+
+.controls-panel {
+  height: 41px;
+  border-radius: 2px;
+  padding: 4px 0;
+  margin: 0 5px 5px;
+  display: flex;
+}
+
+
+.dashboard-list {
+  position: relative;
+}
+
+.title {
+  font-size: 22px;
+}

package/src/components/toolbar/toolbar.component.ts

@@ -0,0 +1,38 @@
+import {ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, Input, OnInit} from '@angular/core';
+import {Router} from '@angular/router';
+
+@Component({
+  standalone: false,
+  selector: 'in-toolbar',
+  templateUrl: './toolbar.component.html',
+  styleUrls: ['./toolbar.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class ToolbarComponent implements OnInit {
+
+
+  @Input() title: string;
+  display = false;
+  objects;
+
+  selected: any;
+
+  constructor(public element: ElementRef, private cdRef: ChangeDetectorRef, public router: Router) {
+
+  }
+
+  ngOnInit() {
+
+  }
+
+  public clickedOutsideOverlay(event) {
+    if (!this.element.nativeElement.contains(event.target)) {
+      this.display = false;
+      this.cdRef.detectChanges();
+    }
+  }
+
+}
+
+
+

package/src/components/toolbar/toolbar.module.ts

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

package/src/components/tooltip/tooltip.component.html

@@ -0,0 +1,7 @@
+<div class="c-tooltip c-tooltip_left">
+  <ng-content></ng-content>
+  <div class="c-tooltip__content" style="width: 12em;" >
+    <ng-content select="tooltip_content"></ng-content>
+  </div>
+</div>
+

package/src/components/tooltip/tooltip.component.scss

@@ -0,0 +1,47 @@
+.c-tooltip {
+  display: inline-block;
+  position: relative;
+  text-align: left;
+  overflow: visible;
+}
+
+.c-tooltip:hover .c-tooltip__content {
+  visibility: visible;
+  opacity: 1;
+}
+
+.c-tooltip_left>.c-tooltip__content {
+  left: auto;
+  right: 100%;
+  top: 50%;
+  bottom: auto;
+  margin-right: 12px;
+  border-top-right-radius: 0;
+
+  &:before {
+    border-top-color: var(--colorBgLevel2, #282A31);
+    border-left-color: var(--colorBgLevel2, #282A31);
+  }
+}
+
+
+.c-tooltip__content {
+  position: absolute;
+  width: auto;
+  margin: 0;
+  margin-bottom: 12px;
+  padding: 9px 12px;
+  font-size: 13px;
+  font-weight: 400;
+  letter-spacing: normal;
+  border-radius: 3px;
+  line-height: 1.64286;
+  visibility: hidden;
+  opacity: 0;
+  transition: opacity 0.3s linear;
+  z-index: 1070;
+  background: var(--colorBgLevel2, #282A31);
+  color: var(--ids-theme-text-color, #fff);
+  white-space: normal;
+  text-transform: none;
+}

package/src/components/tooltip/tooltip.component.ts

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

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

@@ -0,0 +1,162 @@
+<p-treeTable #dt
+             [(selection)]="selectionValue"
+             [class]="class"
+             [columns]="visibleColumns()"
+             [resizableColumns]="true"
+             [scrollHeight]="scrollHeight"
+             [scrollable]="scrollable"
+             [selectionMode]="selectionMode"
+             [sortField]="sortField || 'id'"
+             [sortOrder]="isAscending ? 1 : -1"
+             [style]="style"
+             [value]="values"
+             columnResizeMode="expand"
+>
+  <ng-template let-columns pTemplate="colgroup">
+    <colgroup>
+      <col *ngIf="checkboxSelection" style="width:44px;">
+      <col *ngFor="let col of visibleColumns()" [style.width]="col.width ? col.width : '10px'">
+    </colgroup>
+  </ng-template>
+  <ng-template let-columns pTemplate="header">
+    <tr>
+      <th *ngIf="checkboxSelection">
+        <input type="checkbox"
+               class="in-table-checkbox"
+               [checked]="_isAllSelected()"
+               (change)="_onHeaderCheckboxChange($event)"
+               (click)="$event.stopPropagation()"
+        >
+      </th>
+      <th *ngFor="let col of columns; let i = index" [ttSortableColumn]="col.field" class="u-position-relative"
+          ttResizableColumn>
+        <div class="p-treetable-thead-title" title="{{col.label | translate}}">
+          {{col.label | translate}}
+        </div>
+        <p-treeTableSortIcon [field]="col.field" class="p-sortable-column-buttons"></p-treeTableSortIcon>
+      </th>
+    </tr>
+  </ng-template>
+
+  <ng-template let-columns="columns" let-rowData="rowData" let-rowNode pTemplate="body">
+    <tr [ngClass]="{row_active: isRowActive(rowData)}" [ttSelectableRow]="rowNode" class="row">
+      <td *ngIf="checkboxSelection">
+        <!-- rowData = plain data; rowNode = PrimeNG wrapper used for selection cascade -->
+        <input type="checkbox"
+               class="in-table-checkbox"
+               [checked]="_isRowSelected(rowData)"
+               [indeterminate]="_isIndeterminate(rowData)"
+               (change)="_onCheckboxChange($event, rowNode, rowData)"
+               (click)="$event.stopPropagation()"
+        >
+      </td>
+      <td (click)="activeChange.emit(rowData)" *ngFor="let col of columns; let i = index"
+          class="_u-overflow-visible">
+        <div class="" style="display: flex; flex-wrap: nowrap;">
+          <ng-template [ngIf]="i == 0">
+            <p-treeTableToggler  [rowNode]="rowNode" style="align-self: center;"></p-treeTableToggler>
+          </ng-template>
+          <div [ngClass]="{ 'p-treetable-tbody-content_has-toggler ': i == 0 }"
+               class="p-treetable-tbody-content cell-content_hover"
+               style="flex-grow: 1;"
+               title="{{rowData | propertyValue: col.field}}">
+            <ng-container *ngIf="!valueTemplate">
+              <i *ngIf="rowData.icon && i == 0" [ngClass]="rowData.icon" class="u-margin-right-tiny"></i>
+              {{rowData | propertyValue: col.field}}
+            </ng-container>
+
+            <ng-container
+              *ngTemplateOutlet="valueTemplate; context: {$implicit: { data: rowData, col: col}}"></ng-container>
+          </div>
+        </div>
+      </td>
+    </tr>
+  </ng-template>
+
+  <ng-template *ngIf="toolbar" pTemplate="caption">
+
+    <div class="o-grid o-grid_no-gutter">
+      <div class="c-tree-table__toolbar-content u-display-inline-flex">
+        <div class="c-form c-form_inline u-display-inline-block">
+          <form class="c-label">
+            <div class="input-wrapper u-margin-right-tiny">
+              <input #searchTextInput
+                     (input)="dt.filterGlobal($any($event.target).value, 'contains')"
+                     [(ngModel)]="searchText"
+                     [ngModelOptions]="{standalone: true}"
+                     autofocus=""
+                     class="search-box c-input c-input_small ng-pristine ng-valid ng-scope ng-empty ng-touched"
+                     pInputText
+                     placeholder="{{('SHARED.SEARCH' | translate) + ':'}}"
+                     required
+                     style="padding-right: 28px"
+                     tabindex="1"
+                     type="search"
+              >
+              <button (click)="dt.filterGlobal($any($event.target).value, 'contains')" class="button-reset" type="reset"
+                      [attr.title]="'Reset' | translate">
+                <i class="in in-close"></i>
+              </button>
+            </div>
+          </form>
+        </div>
+        <div class="c-btn c-btn_border-free c-btn_small">
+          <in-table-columns-multiselect (columnsChange)="columnsChange($event)"
+                                        [columns]="columns"></in-table-columns-multiselect>
+        </div>
+
+        <button (click)="addAction.emit($event)" *ngIf="toolbar.add" [disabled]="toolbar.add.disabled"
+                class="c-btn c-btn_border-free c-btn_small"
+        >
+          <i class="in in-plus" [title]="toolbar.add.title || 'Добавить'"></i>
+        </button>
+
+        <button (click)="groupAddAction.emit($event)" *ngIf="toolbar.groupAdd" [disabled]="toolbar.groupAdd.disabled"
+                class="c-btn c-btn_border-free c-btn_small"
+        >
+          <i class="in in-folder-closed" [title]="toolbar.groupAdd.title || 'Добавить группу'"></i>
+        </button>
+
+
+        <button (click)="saveAction.emit($event)" *ngIf="toolbar.save"
+                [disabled]="toolbar.save.disabled"
+                class="c-btn c-btn_primary c-btn_small"
+                title="{{'Save' | translate}}"
+        >
+          {{'Save' | translate}}
+        </button>
+        <button (click)="groupEditAction.emit($event)" *ngIf="toolbar.groupEdit && toolbar.groupEdit.active"
+                [disabled]="toolbar.groupEdit.disabled"
+                class="c-btn c-btn_border-free c-btn_small">
+          <i class="in in-pencil" title="{{'groupEdit' | translate}}"></i>
+        </button>
+        <button (click)="removeAction.emit($event)" *ngIf="toolbar.remove && toolbar.remove.active"
+                [disabled]="toolbar.remove.disabled"
+                class="c-btn c-btn_border-free c-btn_small">
+          <i class="in in-trash" [title]="toolbar.remove?.title || 'Удалить'"></i>
+        </button>
+        <button (click)="unlinkAction.emit($event)" *ngIf="toolbar.unlink" [disabled]="toolbar.unlink.disabled"
+                class="c-btn c-btn_border-free c-btn_small">
+          <i class="in in-link-off" title="{{'Detach tag from selected items' | translate}}"></i>
+        </button>
+        <button (click)="csvAction.emit($event)" *ngIf="toolbar.csv" [disabled]="toolbar.csv.disabled"
+                class="c-btn c-btn_border-free c-btn_small"
+        >
+<!--          Todo: заменить на in-file-csv-->
+          <i class="in in-file-excel-outline" title="Сохранить как CSV"></i>
+        </button>
+        <button  *ngIf="toolbar.collapse"
+                 class="c-btn c-btn_small c-btn_svg-24 c-icon c-icon_svg c-icon_svg-24 c-btn_border-free"
+                 (click)="collapse($event, dt)"
+                 title="{{(isCollapse ? 'Expand all' : 'Collapse all') | translate}}">
+          <svg *ngIf="isCollapse"  xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 24 24">
+            <path d="M20 2H4v2h16V2zM4 20v2h16v-2H4zM12 5l5 6H7l5-6zM17 13l-5 6-5-6h10z"/>
+          </svg>
+          <svg *ngIf="!isCollapse"  xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 24 24">
+            <path fill-rule="evenodd" d="M17 3l-5 6-5-6h10zM4 13v-2h16v2H4zm8 2l5 6H7l5-6z" clip-rule="evenodd"/>
+          </svg>
+        </button>
+      </div>
+    </div>
+  </ng-template>
+</p-treeTable>

package/src/components/tree-table/tree-table.component.scss

@@ -0,0 +1,129 @@
+.p-sortable-column {
+  cursor: pointer;
+  position: relative;
+}
+
+/* Light / contrast themes: darker border so checkbox is visible on white background */
+:host-context(.theme-light),
+:host-context(.theme-contrast) {
+  .in-table-checkbox {
+    border-color: rgba(0, 0, 0, 0.45);
+
+    &:hover:not(:checked):not(:indeterminate) {
+      border-color: rgba(0, 0, 0, 0.7);
+    }
+  }
+}
+
+/* Matches in-table-checkbox styles from table.component.scss */
+.in-table-checkbox {
+  appearance: none;
+  -webkit-appearance: none;
+  width: var(--p-checkbox-width, 20px);
+  height: var(--p-checkbox-height, 20px);
+  border: 1px solid var(--p-checkbox-border-color, #B3B3B3);
+  border-radius: var(--p-checkbox-border-radius, 2px);
+  background: var(--p-checkbox-background, transparent);
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  vertical-align: middle;
+  flex-shrink: 0;
+  transition: border-color var(--p-checkbox-transition-duration, 0.15s),
+              background var(--p-checkbox-transition-duration, 0.15s);
+
+  &:checked {
+    background: var(--p-checkbox-checked-background, #387382);
+    border-color: var(--p-checkbox-checked-border-color, #387382);
+
+    &::after {
+      content: '';
+      display: block;
+      width: var(--p-checkbox-icon-size, 14px);
+      height: var(--p-checkbox-icon-size, 14px);
+      background-color: var(--p-checkbox-icon-checked-color, #ffffff);
+      mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath fill='currentColor' d='M5.25 10.15l-2.8-2.8-.7.7 3.5 3.5 7.5-7.5-.7-.7z'/%3E%3C/svg%3E");
+      -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath fill='currentColor' d='M5.25 10.15l-2.8-2.8-.7.7 3.5 3.5 7.5-7.5-.7-.7z'/%3E%3C/svg%3E");
+      mask-size: contain;
+      -webkit-mask-size: contain;
+      mask-repeat: no-repeat;
+      -webkit-mask-repeat: no-repeat;
+      mask-position: center;
+      -webkit-mask-position: center;
+    }
+  }
+
+  &:indeterminate {
+    background: var(--p-checkbox-checked-background, #387382);
+    border-color: var(--p-checkbox-checked-border-color, #387382);
+
+    &::after {
+      content: '';
+      display: block;
+      width: calc(var(--p-checkbox-icon-size, 14px) - 2px);
+      height: 2px;
+      background-color: var(--p-checkbox-icon-checked-color, #ffffff);
+      margin: auto;
+    }
+  }
+
+  &:hover:not(:checked):not(:indeterminate) {
+    border-color: var(--p-checkbox-hover-border-color, #999999);
+  }
+}
+
+.p-sortable-column-buttons {
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: 18px;
+  height: 100%;
+  display: inline-flex;
+  align-items: center;
+  z-index: 10000;
+  > a {
+    position: absolute;
+    top: 50%;
+    right: 0;
+    left: 0;
+    transform: translateY(-50%);
+  }
+}
+
+/* Временное решение до устранения SEM-1532 после перехода на нормальные тултипы убурать заглушку*/
+.u-overflow-visible {
+  overflow: visible !important;
+}
+
+.button-reset {
+  display: flex;
+  align-items: center;
+  position: absolute;
+  right: 6px;
+  top: 5px;
+  padding: 6px 6px;
+  font-size: 15px;
+  border: none;
+  outline: 0;
+  cursor: pointer;
+  color: var(--colorTextMuted);
+  background-color: transparent;
+}
+
+.button-reset:hover {
+  color: var(--colorIcon);
+}
+
+.input-wrapper{
+  position: relative;
+  display: flex;
+  align-items: baseline;
+}
+
+.search-box:focus {
+}
+
+.c-input:not(:valid) ~ .button-reset {
+  display: none;
+}