@inspark/inspark-components 19.0.49 → 19.0.51

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

@@ -0,0 +1,284 @@
+@use "@inspark/components-web/src/inspark" as *;
+
+.container {
+  display: inline-block;
+}
+
+.button-container {
+  position: relative;
+  display: inline-block;
+}
+
+button {
+  outline: none;
+  width: 100%;
+}
+
+.p-button-icon-only .p-button-icon-left {
+  margin-top: -9px;
+}
+
+
+.p-button-text {
+  vertical-align: middle;
+
+}
+
+.notify {
+  width: 8px;
+  height: 8px;
+  border-radius: 100%;
+  position: absolute;
+  right: 8px;
+  top: 8px;
+
+  &.warning {
+    background: var(--colorWarning);
+  }
+
+  &.success {
+    background: var(--colorSuccess);
+  }
+
+  &.error {
+    background: var(--colorError);
+  }
+
+  &.critical {
+    background: var(--colorCritical);
+  }
+}
+.p-button {
+  margin-right: 0;
+  height: 36px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+
+  &.p-button-pressed {
+    background-color: var(--colorBgLevel4);
+  }
+
+  &.p-button-large {
+    height: 48px;
+
+
+    .p-button-icon-left {
+      font-size: 18px;
+      margin-top: -8px;
+    }
+
+    .p-button-text {
+      padding: 0 1em 0 48px;
+      margin-top: 6px;
+    }
+  }
+
+}
+
+.p-button-text-icon-left .p-button-text {
+  padding: 0 1em 0 2.4em;
+}
+
+.p-button-text-only .p-button-text{
+  padding: .25em 1em;
+}
+
+.p-button-icon-only {
+  font-size: 18px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+
+
+  &.p-button-large {
+    width: 48px;
+    height: 48px;
+
+    .svg {
+      display: inline-block;
+      line-height: 0;
+    }
+  }
+
+  .svg {
+    display: inline-block;
+    line-height: 0;
+  }
+}
+
+.p-button-transparency {
+  background: none;
+  color: currentColor;
+
+  &:hover {
+    color: currentColor;
+  }
+}
+
+.p-button-shadowed {
+  box-shadow: $box-shadow-small;
+}
+
+.p-button.p-button-svg {
+
+  &.p-button-small {
+    .p-button-icon-left {
+      margin-top: -4px;
+    }
+
+    &.p-button-icon-only .p-button-icon-left {
+      margin-top: -2px;
+    }
+  }
+
+  .p-button-icon-left {
+    left: 6px;
+    transform: translateY(-50%);
+    margin-top: -4px;
+  }
+
+  &.p-button-icon-only .p-button-icon-left {
+    left: auto;
+    width: auto;
+    transform: none;
+    margin-left: 0;
+    margin-top: 0;
+  }
+
+  &.p-button-large {
+    &.p-button-icon-only .p-button-icon-left {
+      margin-top: 0;
+    }
+  }
+}
+
+
+.p-button-material {
+
+  &.p-button-icon-only {
+    .material-icons {
+      font-size: 20px;
+    }
+
+    .p-button-icon-left {
+      margin-top: -10px;
+      margin-left: -12px;
+
+    }
+  }
+
+  .material-icons {
+    font-size: 16px;
+  }
+
+  .p-button-icon-left {
+    margin-top: -8px;
+    margin-left: -2px;
+
+  }
+
+  &.p-button-small {
+    .p-button-icon-left {
+      margin-top: -7px;
+    }
+
+    .material-icons {
+      font-size: 14px;
+    }
+
+    &.p-button-icon-only .p-button-icon-left {
+      margin-top: -12px;
+      margin-left: -10px;
+
+      .material-icons {
+        font-size: 18px;
+      }
+    }
+  }
+
+  &.p-button-large {
+    .material-icons {
+      font-size: 24px;
+    }
+
+    .p-button-icon-left {
+      margin-top: -11px;
+    }
+
+    &.p-button-icon-only .p-button-icon-left {
+      margin-top: -11px;
+      margin-left: -13px;
+    }
+  }
+
+}
+
+
+:host .p-menu .p-menuitem-link {
+  font-size: 16px;
+}
+
+
+.dropdown-menu {
+  display: none;
+  background: var(--colorBgLevel3);
+  padding: 4px;
+
+  li {
+    padding: 4px;
+    font-size: 14px;
+  }
+
+  &.show {
+    display: block;
+  }
+}
+
+
+.in-dropdown-menu {
+  background: var(--colorBgLevel2);
+  padding: 0;
+  position: absolute;
+  display: none;
+  margin-left: 0;
+  box-shadow: 0 0 3px 1px rgba(0, 0, 0, .2);
+
+  &.show {
+    display: block;
+  }
+
+  .in-dropdown-menu-item {
+
+    list-style-type: none;
+    min-width: 250px;
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    min-height: 48px;
+
+    in-button, in-button ::ng-deep button {
+      width: 100%;
+      border-radius: 0;
+
+      .p-button {
+        justify-content: flex-start;
+      }
+    }
+
+    .in-dropdown-menu-link {
+
+    }
+
+    .switcher {
+      flex: 1;
+      display: flex;
+      justify-content: flex-end;
+      padding-right: 4px;
+    }
+  }
+
+  .in-dropdown-menu-item + .in-dropdown-menu-item {
+    border-top: 1px solid var(--colorBgLevel4);
+  }
+}

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

@@ -0,0 +1,134 @@
+// tslint:disable-next-line:max-line-length
+import {
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  EventEmitter,
+  Input,
+  OnChanges,
+  OnInit,
+  Output,
+  ViewChild,
+  ViewEncapsulation,
+  HostBinding
+} from '@angular/core';
+import {InsparkMenuItem} from '../../interface';
+import {Menu} from 'primeng/menu';
+
+type ButtonSize = 'small' | 'normal' | 'large' | 'tiny';
+type ButtonColor = 'normal' | 'danger' | 'primary' | 'secondary' | 'transparent';
+type ButtonType = 'button' | 'submit';
+type IconPos = 'left' | 'right';
+type ButtonNotify = 'warning' | 'error';
+
+
+@Component({
+  standalone: false,
+  selector: 'in-button',
+  templateUrl: './button.component.html',
+  styleUrls: ['./button.component.scss'],
+  encapsulation: ViewEncapsulation.Emulated,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ButtonComponent implements OnInit, OnChanges {
+
+  @Input() size: ButtonSize = 'normal';
+  @Input() color: ButtonColor = 'normal';
+  @Input() type: ButtonType = 'button';
+  @Input() name = '';
+  @Input() testId = '';
+  @Input() label = '';
+  @Input() icon = '';
+  @Input() className = '';
+  @Input() notify: ButtonNotify = null;
+  @Input() svg = '';
+  @Input() width = 'auto';
+  @Input() link = '';
+  @Input() isLoading = false;
+  @Input() shadow = false;
+  @Input() isIconOnly = false;
+  @Input() style: any = {};
+
+  /**
+   * 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() selectedItem = null;
+  @Input() menuPlacement = 'bottom-left';
+  @Input() menuItems: InsparkMenuItem[] = [];
+
+  @ViewChild(Menu, {static: false}) _menu !: Menu;
+  @HostBinding('style.pointer-events')
+  get pointerEvents(): string {
+    return this.disabled ? 'none' : 'auto';
+  }
+
+  @Output() focus: EventEmitter<any> = new EventEmitter();
+  @Output() blur: EventEmitter<any> = new EventEmitter();
+  @Output() click: EventEmitter<any> = new EventEmitter();
+
+  _target = '_self';
+  _linkType: 'auto' | 'external' | 'internal' = 'auto';
+
+  isMaterialIcon = false;
+  constructor(private cdr: ChangeDetectorRef) {}
+
+  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('pi-') === -1) {
+      this.isMaterialIcon = true;
+    } else {
+      this.isMaterialIcon = false;
+    }
+  }
+
+  _onClick($event) {
+   this.cdr.detectChanges();
+  }
+}

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

@@ -0,0 +1,22 @@
+import { NgModule } from '@angular/core';
+import { SharedComponentsModule } from '../shared/shared-components.module';
+import { ButtonComponent } from './button.component';
+import { SvgComponentModule } from '../svg/svg.module';
+import { PreloaderComponentModule } from '../preloader/preloader.module';
+import { NgbDropdownModule } from '@ng-bootstrap/ng-bootstrap';
+
+@NgModule({
+  declarations: [
+    ButtonComponent
+  ],
+  imports: [
+    SharedComponentsModule,
+    SvgComponentModule,
+    PreloaderComponentModule,
+    NgbDropdownModule,
+  ],
+  exports: [
+    ButtonComponent
+  ]
+})
+export class ButtonComponentModule {}

package/src/components/checkbox/checkbox.component.html

@@ -0,0 +1,12 @@
+<label class="c-checkbox">
+  <input (change)="onChange($event)" (input)="onChange($event)"
+         (ngModelChange)="onChange(value)"
+         [(ngModel)]="value"
+         [disabled]="disabled"
+         class="c-checkbox__input field_{{id}}"
+         name="element_name"
+         type="checkbox"/>
+  <i class="c-checkbox__icon"></i>
+  <span *ngIf="label" class="label">{{ label }}</span>
+  <span class="label"><ng-content></ng-content></span>
+</label>

package/src/components/checkbox/checkbox.component.scss

@@ -0,0 +1,30 @@
+:host {
+  width: 100%;
+}
+
+.c-checkbox {
+  margin: 0;
+  display: flex;
+  min-width: 100%;
+  align-items: center;
+  padding: 8px;
+
+  .c-checkbox__input + .c-checkbox__icon {
+    padding-left: 20px;
+    top: 0;
+  }
+
+  .label {
+    display: flex;
+    align-items: center;
+
+    &:not(:empty) {
+      display: inline-flex;
+      padding-left: 8px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+  }
+}
+

package/src/components/checkbox/checkbox.component.ts

@@ -0,0 +1,77 @@
+import {ChangeDetectorRef, Component, ElementRef, forwardRef, Input} from '@angular/core';
+import {ControlValueAccessor, NG_VALUE_ACCESSOR} from '@angular/forms';
+import {Router} from '@angular/router';
+
+@Component({
+  standalone: false,
+  selector: 'in-checkbox',
+  templateUrl: './checkbox.component.html',
+  styleUrls: ['./checkbox.component.scss'],
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => CheckboxComponent),
+      multi: true,
+    }
+  ],
+})
+export class CheckboxComponent implements ControlValueAccessor {
+
+  @Input() name = null;
+  @Input() label = null;
+  @Input() required = false;
+  @Input() error = null;
+  @Input() placeholder = '';
+  @Input() id = null;
+  @Input() disabled: boolean;
+
+  value: string;
+
+  constructor(public element: ElementRef, private cdRef: ChangeDetectorRef, public router: Router) {
+
+  }
+
+  /**
+   * Write form value to the DOM element (model => view)
+   */
+  writeValue(value: any): void {
+    this.value = value;
+    if (!this.cdRef['destroyed']) {
+      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(_: any) {
+    this.propagateChange(this.value);
+  }
+
+  private onTouched() {
+  }
+
+}

package/src/components/checkbox/checkbox.module.ts

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

package/src/components/communication.service.ts

@@ -0,0 +1,22 @@
+import {Injectable} from '@angular/core';
+import {Subject} from 'rxjs';
+
+@Injectable()
+export class CommunicationService {
+
+
+  private messageSource = {};
+  message$ = {};
+
+  create(id: number) {
+    if (!this.messageSource[id]) {
+      this.messageSource[id] = new Subject();
+      this.message$[id] = this.messageSource[id].asObservable();
+    }
+  }
+
+  next(widgetId: number, value: any) {
+    this.create(widgetId);
+    this.messageSource[widgetId].next(value);
+  }
+}

package/src/components/component-container/component-container.component.html

@@ -0,0 +1,3 @@
+<div [ngClass]="align" class="inspark-component-container">
+  <ng-content></ng-content>
+</div>

package/src/components/component-container/component-container.component.scss

@@ -0,0 +1,13 @@
+@use "@inspark/components-web/src/inspark" as *;
+
+.inspark-component-container {
+  display: flex;
+  gap: 8px;
+  @media screen and (min-width: $screen-xs-min) {
+    padding-bottom: 0;
+  }
+}
+
+.right {
+  justify-content: flex-end;
+}

package/src/components/component-container/component-container.component.ts

@@ -0,0 +1,17 @@
+import {Component, Input} from '@angular/core';
+
+
+type ALIGN = 'right' | 'left' | 'center';
+
+@Component({
+  standalone: false,
+  selector: 'in-component-container',
+  templateUrl: './component-container.component.html',
+  styleUrls: ['./component-container.component.scss'],
+})
+export class ComponentContainerComponent {
+
+
+  @Input() align: ALIGN = 'left';
+
+}

package/src/components/component-container/component-container.module.ts

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

package/src/components/content-toggle/content-toggle.component.html

@@ -0,0 +1,19 @@
+<div class="block" (click)="toggleOpen($event)" tabIndex="1">
+    <span [ngClass]="{arrow: true, close: !isOpen}">
+        <in-svg *ngIf="manualArrow" [src]="'arrow-down.svg'" width="48px" height="48px"></in-svg>
+        <ng-content select="[arrow]"></ng-content>
+    </span>
+  <span class="label">
+    <in-svg *ngIf="icon" class="label-icon" [src]="icon"></in-svg>
+    {{label}}
+  </span>
+  <span class="counter">
+    <ng-content select="[header]"></ng-content>
+  </span>
+  <div class="buttons" #buttons>
+    <ng-content select="[buttons]"></ng-content>
+  </div>
+</div>
+<div class="container" *ngIf="isOpen">
+  <ng-content select="[body]"></ng-content>
+</div>