@inspark/inspark-components 19.0.51 → 19.0.53

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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