@inspark/inspark-components 19.0.51 → 19.0.52

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

@@ -1,117 +0,0 @@
-
-.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

@@ -1,38 +0,0 @@
-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

@@ -1,18 +0,0 @@
-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

@@ -1,7 +0,0 @@
-<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

@@ -1,47 +0,0 @@
-.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

@@ -1,17 +0,0 @@
-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

@@ -1,162 +0,0 @@
-<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

@@ -1,129 +0,0 @@
-.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;
-}