@inspark/inspark-components 19.0.49 → 19.0.51

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

@@ -0,0 +1,58 @@
+@use "@inspark/components-web/src/inspark" as *;
+
+.block {
+  font-size: 12px;
+  text-transform: uppercase;
+  cursor: pointer;
+  display: flex;
+  white-space: nowrap;
+
+  .buttons {
+    flex: 1;
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+    user-select: none;
+  }
+
+  &:hover {
+    background: var(--colorBgLevel2);
+  }
+
+  &:focus {
+  }
+
+  & > span {
+    display: inline-block;
+    margin-right: 4px;
+  }
+
+  .label {
+    margin-right: 8px;
+    display: flex;
+    align-items: center;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .counter {
+    display: flex;
+    align-items: center;
+    padding-right: 8px;
+  }
+
+  .arrow {
+    margin-right: 0;
+
+    &.close {
+      transform: rotate(-90deg);
+    }
+  }
+}
+
+
+.label-icon {
+  margin-right: 4px;
+  width: 16px;
+  height: 16px;
+}

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

@@ -0,0 +1,42 @@
+import {ChangeDetectorRef, Component, ElementRef, EventEmitter, Input, OnInit, Output, ViewChild} from '@angular/core';
+
+
+@Component({
+  standalone: false,
+  selector: 'in-content-toggle',
+  templateUrl: './content-toggle.component.html',
+  styleUrls: ['./content-toggle.component.scss'],
+})
+export class ContentToggleComponent implements OnInit {
+
+  @Input() label: any;
+  @Input() defaultOpen: boolean = true;
+  @Input() isOpen = this.defaultOpen;
+  @Input() icon: string = null;
+  @Input() manualArrow: boolean = true;
+
+  @Output() toggle: EventEmitter<any> = new EventEmitter();
+
+  @ViewChild('buttons', {static: true}) elementButtons: ElementRef;
+
+  constructor(private cdr: ChangeDetectorRef) {
+
+  }
+
+  ngOnInit() {
+    this.isOpen = this.defaultOpen
+  }
+
+  toggleOpen(e: MouseEvent) {
+    // Получаем родительский элемент div
+    const parentElement = this.elementButtons.nativeElement;
+
+    // Проверяем, входит ли цель события в родительский элемент
+    if (!parentElement.contains(e.target) || e.target === parentElement) {
+      this.isOpen = !this.isOpen;
+      this.toggle.emit(this.isOpen);
+      this.cdr.detectChanges();
+    }
+
+  }
+}

package/src/components/dropdown/dropdown.component.css

@@ -0,0 +1,4 @@
+.in-dropdown {
+  width: 100%;
+  margin-bottom: 0;
+}

package/src/components/dropdown/dropdown.component.html

@@ -0,0 +1,43 @@
+<p-select
+  #dropdown
+  [options]="options"
+  [placeholder]="placeholder"
+  [optionLabel]="optionLabel"
+  [optionValue]="optionValue"
+  [dataKey]="dataKey"
+  [filter]="filter"
+  [filterBy]="effectiveFilterBy"
+  [filterMatchMode]="filterMatchMode"
+  [showClear]="showClear"
+  [disabled]="disabled"
+  [appendTo]="appendTo"
+  [editable]="editable"
+  [virtualScroll]="virtualScroll"
+  [virtualScrollItemSize]="virtualScrollItemSize"
+  [loading]="loading"
+  [autoDisplayFirst]="autoDisplayFirst"
+  [emptyMessage]="emptyMessage"
+  [styleClass]="styleClass"
+  [(ngModel)]="value"
+  (onChange)="handleChange($event)"
+  (onFilter)="handleFilter($event)"
+  (onShow)="onShow.emit()"
+  (onHide)="onHide.emit()"
+  (onFocus)="onFocus.emit($event)"
+  (onBlur)="handleBlur($event)"
+  (onClear)="$event.stopPropagation()"
+>
+  <ng-template pTemplate="selectedItem" let-item>
+    <ng-container *ngIf="selectedItemTemplate; else defaultSelected">
+      <ng-container *ngTemplateOutlet="selectedItemTemplate; context: {$implicit: item}"></ng-container>
+    </ng-container>
+    <ng-template #defaultSelected>{{ item?.[optionLabel] }}</ng-template>
+  </ng-template>
+
+  <ng-template pTemplate="item" let-item>
+    <ng-container *ngIf="itemTemplate; else defaultItem">
+      <ng-container *ngTemplateOutlet="itemTemplate; context: {$implicit: item}"></ng-container>
+    </ng-container>
+    <ng-template #defaultItem>{{ item?.[optionLabel] }}</ng-template>
+  </ng-template>
+</p-select>

package/src/components/dropdown/dropdown.component.ts

@@ -0,0 +1,167 @@
+import {
+  Component,
+  EventEmitter,
+  forwardRef,
+  Input,
+  Output,
+  ViewChild,
+  AfterContentInit,
+  TemplateRef,
+  ContentChildren,
+  QueryList
+} from '@angular/core';
+
+import {
+  ControlValueAccessor,
+  NG_VALUE_ACCESSOR
+} from '@angular/forms';
+
+import {
+  Select,
+  SelectChangeEvent,
+  SelectFilterEvent
+} from 'primeng/select';
+
+@Component({
+  standalone: false,
+  selector: 'in-dropdown',
+  templateUrl: './dropdown.component.html',
+  styleUrls: ['./dropdown.component.css'],
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => DropdownComponent),
+      multi: true
+    }
+  ]
+})
+export class DropdownComponent implements ControlValueAccessor, AfterContentInit {
+  @ContentChildren(TemplateRef) templates: QueryList<TemplateRef<any>>;
+
+  itemTemplate: TemplateRef<any> | null = null;
+  selectedItemTemplate: TemplateRef<any> | null = null;
+
+  @ViewChild('dropdown') dropdown!: Select;
+
+  @Input() styleClass: string;
+  @Input() options: any[] = [];
+  @Input() placeholder = '';
+  @Input() optionLabel = 'label';
+  @Input() optionValue: string | undefined = undefined;
+  @Input() dataKey: string | undefined;
+  @Input() filter = false;
+  @Input() showClear = false;
+  @Input() disabled = false;
+  @Input() appendTo: any = 'body';
+  @Input() editable = false;
+  @Input() virtualScroll = false;
+  @Input() virtualScrollItemSize = 38;
+  @Input() loading = false;
+  @Input() autoDisplayFirst = false;
+  @Input() filterBy: string | undefined = undefined;
+
+  get effectiveFilterBy(): string {
+    return this.filterBy ?? this.optionLabel;
+  }
+
+  @Input() filterMatchMode: 'equals' | 'endsWith' | 'startsWith' | 'contains' | 'in' | 'notEquals' | 'lt' | 'lte' | 'gt' | 'gte' = 'contains';
+  @Input() emptyMessage = 'No results found';
+
+  @Output() onChange = new EventEmitter<any>();
+  @Output() onFilter = new EventEmitter<any>();
+  @Output() onShow = new EventEmitter<void>();
+  @Output() onHide = new EventEmitter<void>();
+  @Output() onFocus = new EventEmitter<any>();
+  @Output() onBlur = new EventEmitter<any>();
+
+  value: any = null;
+
+  private onModelChange = (_value: any) => {};
+  private onModelTouched = () => {};
+
+  ngAfterContentInit() {
+    this.templates.forEach((template: TemplateRef<any>) => {
+      const templateRef = template as any;
+      const tContainer = templateRef._declarationTContainer;
+      const attrs = tContainer?.attrs;
+
+      if (attrs && Array.isArray(attrs)) {
+        for (let i = 0; i < attrs.length; i++) {
+          if (attrs[i] === 'pTemplate' && attrs[i + 1]) {
+            const templateName = attrs[i + 1];
+            if (templateName === 'item') {
+              this.itemTemplate = template;
+            } else if (templateName === 'selectedItem') {
+              this.selectedItemTemplate = template;
+            }
+            break;
+          }
+        }
+      } else {
+        const viewContainer = templateRef as any;
+        if (viewContainer._declarationTContainer?.value?.attrs) {
+          const valueAttrs = viewContainer._declarationTContainer.value.attrs;
+          for (let i = 0; i < valueAttrs.length; i++) {
+            if (valueAttrs[i]?.name === 'pTemplate' && valueAttrs[i]?.value) {
+              const templateName = valueAttrs[i].value;
+              if (templateName === 'item') {
+                this.itemTemplate = template;
+              } else if (templateName === 'selectedItem') {
+                this.selectedItemTemplate = template;
+              }
+              break;
+            }
+          }
+        }
+      }
+    });
+  }
+
+  writeValue(value: any): void {
+    this.value = value;
+  }
+
+  registerOnChange(fn: any): void {
+    this.onModelChange = fn;
+  }
+
+  registerOnTouched(fn: any): void {
+    this.onModelTouched = fn;
+  }
+
+  setDisabledState(disabled: boolean): void {
+    this.disabled = disabled;
+  }
+
+  handleChange(event: SelectChangeEvent): void {
+    this.value = event.value;
+    this.onModelChange(this.value);
+    this.onChange.emit(event);
+  }
+
+  handleFilter(event: SelectFilterEvent): void {
+    this.onFilter.emit(event);
+  }
+
+  handleBlur(event: any): void {
+    this.onModelTouched();
+    this.onBlur.emit(event);
+  }
+
+  focus(): void {
+    this.dropdown?.focus();
+  }
+
+  show(): void {
+    this.dropdown?.show();
+  }
+
+  hide(): void {
+    this.dropdown?.hide();
+  }
+
+  clear(): void {
+    this.value = null;
+    this.onModelChange(null);
+  }
+}

package/src/components/dropdown/dropdown.interface.ts

@@ -0,0 +1,25 @@
+export interface DropdownFilterEvent {
+  /**
+   * Browser event.
+   */
+  originalEvent: Event;
+  /**
+   * Filter value.
+   */
+  filter: any;
+}
+/**
+ * Custom lazy load event.
+ * @see {@link Dropdown.onLazyLoad}
+ * @group Events
+ */
+export interface DropdownLazyLoadEvent {
+  /**
+   * Index of the first element in viewport.
+   */
+  first: number;
+  /**
+   * Index of the last element in viewport.
+   */
+  last: number;
+}

package/src/components/dropdown/dropdown.module.ts

@@ -0,0 +1,21 @@
+import { NgModule } from '@angular/core';
+
+import { SelectModule } from 'primeng/select';
+
+import { SharedUiModule } from '../shared/shared-ui.module';
+
+import { DropdownComponent } from './dropdown.component';
+
+@NgModule({
+  declarations: [
+    DropdownComponent
+  ],
+  imports: [
+    SharedUiModule,
+    SelectModule
+  ],
+  exports: [
+    DropdownComponent
+  ]
+})
+export class DropdownComponentModule {}

package/src/components/empty/empty.component.html

@@ -0,0 +1,3 @@
+<div class="status-text">
+  {{'no_records' | translate}}
+</div>

package/src/components/empty/empty.component.scss

@@ -0,0 +1,4 @@
+.status-text {
+  font-size: 16px;
+  opacity: .8;
+}

package/src/components/empty/empty.component.ts

@@ -0,0 +1,16 @@
+import { CommonModule } from '@angular/common';
+import { Component } from '@angular/core';
+import { TranslateModule } from '@ngx-translate/core';
+
+@Component({
+  selector: 'in-empty',
+  imports: [
+    CommonModule,
+    TranslateModule
+  ],
+  templateUrl: './empty.component.html',
+  styleUrls: ['./empty.component.scss'],
+})
+export class EmptyComponent {
+
+}

package/src/components/file/file.component.css

@@ -0,0 +1,3 @@
+.hide {
+  display: none;
+}

package/src/components/file/file.component.html

@@ -0,0 +1,10 @@
+<span *ngIf="label" class="c-label__content">
+        {{label}}
+  <span *ngIf="required" class="c-label__req">*</span>
+<span *ngIf="error" class="c-label__sub_is-error">{{error}}</span>
+    </span>
+<in-button (click)="onClickChoose()" *ngIf="file" [label]="file.name"></in-button>
+<in-button (click)="onClear()" *ngIf="file" label="X"></in-button>
+<in-button (click)="onClickChoose()" *ngIf="!file" [label]="'Select file' | translate"></in-button>
+
+<div class="hide"><input #fileInput (change)="onChangeFile($event)" [accept]="accept" type="file"/></div>

package/src/components/file/file.component.ts

@@ -0,0 +1,41 @@
+import {Component, ElementRef, EventEmitter, Input, Output, ViewChild} from '@angular/core';
+
+@Component({
+  standalone: false,
+  selector: 'in-file',
+  templateUrl: './file.component.html',
+  styleUrls: ['./file.component.css'],
+})
+export class FileComponent {
+
+  @Input() name = null;
+  @Input() label = null;
+  @Input() accept: string = null;
+  @Input() required = false;
+  @Input() error = null;
+  @Output() onChange: EventEmitter<any> = new EventEmitter();
+
+
+  @ViewChild('fileInput', {static: false}) el: ElementRef;
+
+  file: File = null;
+
+  onClear() {
+    this.file = null;
+    this.onChange.emit(this.file);
+    this.el.nativeElement.value = '';
+  }
+
+  onClickChoose() {
+    this.el.nativeElement.click();
+  }
+
+  onChangeFile(e) {
+    e.preventDefault();
+    if (e.srcElement.files[0]) {
+      this.file = e.srcElement.files[0];
+      this.onChange.emit(this.file);
+    }
+  }
+
+}

package/src/components/file/file.module.ts

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

package/src/components/header/header.component.html

@@ -0,0 +1,26 @@
+<div [ngClass]="{ h1: level === 1, h2: level === 2, h3: level === 3,
+      h4: level === 4, h5: level === 5, h6:level === 6,
+      'is-wrappable': isWrappable }"
+     class="header u-margin-bottom-tiny u-margin-top-small line-clamp-{{lineClamp}}">
+  <div *ngIf="level === 1" [title]="label" class="u-h1 header__wrapper">
+    {{label}}
+  </div>
+  <div *ngIf="level === 2" [title]="label" class="u-h2 header__wrapper">
+    {{label}}
+  </div>
+  <div *ngIf="level === 3" [title]="label" class="u-h3 header__wrapper">
+    {{label}}
+  </div>
+  <div *ngIf="level === 4" [title]="label" class="u-h4 header__wrapper">
+    {{label}}
+  </div>
+  <div *ngIf="level === 5" [title]="label" class="u-h5 header__wrapper">
+    {{label}}
+  </div>
+  <div *ngIf="level === 6" [title]="label" class="u-h6 header__wrapper">
+    {{label}}
+  </div>
+  <div class="buttons">
+    <ng-content></ng-content>
+  </div>
+</div>

package/src/components/header/header.component.scss

@@ -0,0 +1,64 @@
+.header {
+
+
+  display: flex;
+  align-items: center;
+
+  h1, h2, h3, h5, h6 {
+    display: inline-block;
+    margin: 0;
+    color: var(--colorText);
+  }
+
+  h1 {
+    font-size: 24px;
+  }
+
+  .buttons {
+    margin-left: 8px;
+    display: flex;
+    align-items: center;
+  }
+}
+
+.header__wrapper {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.is-wrappable {
+  .header__wrapper {
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    word-break: break-word;
+    white-space: normal;
+  }
+}
+
+.line-clamp {
+  &-1 {
+    .header__wrapper {
+      -webkit-line-clamp: 1;
+    }
+  }
+
+  &-2 {
+    .header__wrapper {
+      -webkit-line-clamp: 2;
+    }
+  }
+
+  &-3 {
+    .header__wrapper {
+      -webkit-line-clamp: 3;
+    }
+  }
+
+  &-4 {
+    .header__wrapper {
+      -webkit-line-clamp: 4;
+    }
+  }
+}

package/src/components/header/header.component.ts

@@ -0,0 +1,25 @@
+import {Component, Input, OnInit, ViewEncapsulation} from '@angular/core';
+
+@Component({
+  standalone: false,
+  selector: 'in-header',
+  templateUrl: './header.component.html',
+  styleUrls: ['./header.component.scss'],
+  encapsulation: ViewEncapsulation.Emulated
+})
+export class InsparkHeaderComponent implements OnInit {
+
+  @Input() level = 1;
+  @Input() label = '';
+  @Input() isWrappable = false;
+  @Input() lineClamp = 4;
+
+
+  constructor() {
+  }
+
+  ngOnInit() {
+    this.level = Math.max(Math.min(this.level, 6), 1);
+  }
+
+}

package/src/components/inline-message/inline-message.component.html

@@ -0,0 +1,4 @@
+<div [ngClass]="align" class="message">
+  {{message}}
+  <ng-content></ng-content>
+</div>

package/src/components/inline-message/inline-message.component.scss

@@ -0,0 +1,13 @@
+.message {
+  padding: 12px 0;
+  text-align: center;
+  color: #aaa;
+
+  &.left {
+    text-align: left;
+  }
+
+  &.right {
+    text-align: right;
+  }
+}

package/src/components/inline-message/inline-message.component.ts

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