@inspark/inspark-components 19.0.49 → 19.0.51

package/src/components/input-group/input-group.component.html

@@ -0,0 +1,74 @@
+<label class="label type_varchars">
+  <div class="p-inputgroup">
+    <span *ngIf="isMeasurementVisible" class="p-inputgroup-addon p-inputgroup-addon_trancated" title="{{measureunit}}">
+      <span class="p-inputgroup-addon__content">{{measureunit}}</span>
+    </span>
+    <input (focus)="this.focus.emit($event)"
+           (keydown)="numberOnly($event)"
+           [(ngModel)]="value"
+           [autocomplete]="autocomplete? 'on':'off'"
+           [disabled]="disabled || !isEditable"
+           [id]="id"
+           [maxlength]="30"
+           [ngStyle]="{minWidth: '48px', textAlign: 'left', width: '100%'}"
+           [placeholder]="placeholder"
+           [required]="required"
+           [size]="size"
+           class="p-inputtext c-input c-input_large field_{{id}}"
+           type="text"/>
+    <in-button (click)="changeValue(value)"
+               [color]="'primary'"
+               [disabled]="isApplyDisabled()"
+               [isIconOnly]="true"
+               [label]=""
+               [name]="'apply'"
+               [size]="'tiny'"
+               [title]="'Apply' | translate"
+               icon="in in-check"></in-button>
+    <in-button (click)="cancel()"
+               [isIconOnly]="true"
+               [label]=""
+               [name]="'cancel'"
+               [size]="'tiny'"
+               [title]="'Cancel' | translate"
+               color="transparent"
+               icon="in in-close"></in-button>
+  </div>
+
+</label>
+
+<!--<div *ngIf="!disabled" class="button">-->
+<!--  <in-button (click)="changeValue(value)" [color]="'primary'"-->
+<!--             [disabled]="isApplyDisabled()"-->
+<!--             [isIconOnly]="true"-->
+<!--             [label]=""-->
+<!--             [name]="'apply'"-->
+<!--             [ngStyle]="{'font-size':'1px', 'display': 'inline-block', 'line-height': '2px', position: 'relative', left: '70px',-->
+<!--                             opacity: !isEditable ? '0' : '1',-->
+<!--                             visibility: !isEditable ? 'hidden' : 'visible'-->
+<!--               }"-->
+<!--             [size]="'tiny'"-->
+<!--             [title]="'Apply' | translate" color="transparent" icon="fa fa-check"></in-button>-->
+<!--  <in-button (click)="cancel()" [isIconOnly]="true" [label]=""-->
+<!--             [name]="'cancel'"-->
+<!--             [ngStyle]="{'font-size':'1px', 'display': 'inline-block', 'line-height': '2px', position: 'relative', left: '90px',-->
+<!--                             opacity: !isEditable ? '0' : '1',-->
+<!--                             visibility: !isEditable ? 'hidden' : 'visible'-->
+<!--                          }"-->
+<!--             [size]="'tiny'"-->
+<!--             [title]="'Cancel' | translate" color="transparent" icon="fa fa-times"></in-button>-->
+<!--  <in-button (click)="changeEditMode()" [isIconOnly]="true" [label]=""-->
+<!--             [ngStyle]="{'font-size':'1px',-->
+<!--                            'display': 'inline-block',-->
+<!--                            'line-height': '2px',-->
+<!--                             position: 'relative',-->
+<!--                             left: '80px',-->
+<!--                             top: '2px',-->
+<!--                             opacity: isEditable ? '0' : '1',-->
+<!--                             visibility: isEditable ? 'hidden' : 'visible'-->
+<!--                           }"-->
+<!--             [size]="'tiny'"-->
+<!--             [title]="'Edit' | translate"-->
+<!--             color="transparent" icon="fa fa-pencil" name="edit"></in-button>-->
+<!--</div>-->
+

package/src/components/input-group/input-group.component.scss

@@ -0,0 +1 @@
+//@use "inspark" as *;

package/src/components/input-group/input-group.component.ts

@@ -0,0 +1,134 @@
+import {Component, EventEmitter, forwardRef, Input, OnInit, Output} from '@angular/core';
+import {ControlValueAccessor, NG_VALUE_ACCESSOR} from '@angular/forms';
+
+@Component({
+  standalone: false,
+  selector: 'in-input-group',
+  templateUrl: './input-group.component.html',
+  styleUrls: ['./input-group.component.scss'],
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => InputGroupComponent),
+      multi: true,
+    }
+  ],
+})
+export class InputGroupComponent implements ControlValueAccessor, OnInit {
+
+  isEditableView: boolean;
+
+  @Input() name = null;
+  @Input() measureunit = null;
+  @Input() autocomplete = true;
+  @Input() label = null;
+  @Input() required = false;
+  @Input() error = null;
+  @Input() size = 100000;
+  @Input() maxlength = 100000;
+  @Input() width = 'auto';
+  @Input() placeholder = '';
+  @Input() id = null;
+  @Input() testId = null;
+  @Input() disabled: boolean;
+  @Input() opacity = true;
+  @Input() shadow = false;
+  @Input() isEditMode = true;
+  @Input() isMeasurementVisible = true;
+
+  @Output() focus: EventEmitter<any> = new EventEmitter();
+  @Output() blur: EventEmitter<any> = new EventEmitter();
+  @Output() updateValue: EventEmitter<any> = new EventEmitter();
+  @Output() disableEditableView: EventEmitter<any> = new EventEmitter();
+
+  validators = [/^-?\d*\.?\d*$/];
+  value: string;
+  _value;
+  isEditable = true;
+
+  ngOnInit() {
+    this._value = this.value;
+  }
+
+  /**
+   * Write form value to the DOM element (model => view)
+   */
+  writeValue(value: any): void {
+    this.value = value ? value : this.name;
+    this._value = this.value;
+  }
+
+  /**
+   * 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) => {
+  }
+
+  private onChange(_: any) {
+    this.propagateChange(this.value);
+  }
+
+  private onTouched() {
+  }
+
+  cancel() {
+    this.isEditable = false;
+    this.disableEditableView.emit(false);
+    this.value = this._value;
+  }
+
+  numberOnly(event): boolean {
+    if (event.keyCode === 8) {
+      return true;
+    }
+    let test = '';
+    if (this.value) {
+      test = this.value + event.key;
+    } else {
+      test = event.key;
+    }
+    return this.validators[0].test(test);
+  }
+
+  changeEditMode() {
+    this.isEditable = !this.isEditable;
+  }
+
+  //
+  // disableEditableView() {
+  //   this.isEditableView.emit(false);
+  // }
+
+  changeValue(value: any): void {
+    this.value = value;
+    this._value = this.value;
+    // this.isEditable = false;
+    this.updateValue.emit(value);
+    this.disableEditableView.emit(false);
+  }
+
+  isApplyDisabled() {
+    return this.value != null ? false : true;
+  }
+
+}

package/src/components/input-text/input-text.component.html

@@ -0,0 +1,45 @@
+<label [ngStyle]="{width: width}" class="label type_varchars">
+    <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
+        *ngIf="maxlength && value && value.length && value.length >= maxlength"
+        class="constraints-message__warning u-text_uppercase">
+                     {{'maxlength: ' | translate}} {{maxlength}}</span>
+    </span>
+  <div class="input-wrapper u-margin-right-tiny" [ngClass]="{'u-margin-right-tiny': right}">
+    <input (blur)="this.blur.emit($event)"
+           (change)="onChange($event)"
+           (focus)="this.focus.emit($event)"
+           (input)="onChange($event)"
+           [(ngModel)]="value"
+           [autocomplete]="autocomplete? 'on':'off'"
+           [disabled]="disabled"
+           [id]="id"
+           [maxlength]="maxlength"
+           [name]="name"
+           [ngClass]="{'c-input_opaque' : opacity === false,
+                         'c-input_shadowed' : shadow,
+                         'c-input_large' : large,
+                         'c-input_small' : small,
+                         'c-input_margin_padding': widget,
+                         'c-input_padding_right': forms}"
+           [ngModelOptions]="{standalone: true}"
+           [placeholder]="placeholder"
+           [required]="required"
+           [size]="size"
+           [min]="min"
+           [max]="max"
+           [step]="step"
+           class="search-box c-input field_{{id}}"
+           [type]="type">
+    <button (click)="clear()"
+            class="button-reset"
+            [ngClass]="{empty: !value}"
+            type="submit"
+            [attr.title]="'Reset' | translate">
+      <i class="in in-close"></i>
+    </button>
+  </div>
+</label>

package/src/components/input-text/input-text.component.scss

@@ -0,0 +1,69 @@
+@use "@inspark/components-web/src/inspark" as *;
+
+.label {
+  display: inline-block;
+  margin-bottom: 0;
+}
+
+.c-input {
+  height: 36px;
+  width: 100%;
+}
+
+.c-input_opaque {
+  background: var(--colorBgLevel3)
+}
+
+.c-input_shadowed {
+  box-shadow: $box-shadow-small;
+}
+
+.constraints-message__warning {
+  color: red;
+}
+
+.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(--ids-theme-btn-default-color, $btn-default-color);
+}
+
+.empty {
+  display: none;
+}
+
+.input-wrapper {
+  position: relative;
+  display: flex;
+  align-items: baseline;
+}
+
+.search-box:focus {
+}
+
+.c-input:not(:valid) ~ .button-reset {
+  display: none;
+}
+
+.c-input_margin_padding {
+  margin-left: 56px;
+  padding-right: 10px;
+  max-width: 1200px;
+}
+
+.c-input_padding_right {
+  padding-right: 28px;
+}

package/src/components/input-text/input-text.component.ts

@@ -0,0 +1,100 @@
+import {Component, EventEmitter, forwardRef, Input, Output} from '@angular/core';
+import {ControlValueAccessor, NG_VALUE_ACCESSOR} from '@angular/forms';
+
+@Component({
+  standalone: false,
+  selector: 'in-input-text',
+  templateUrl: './input-text.component.html',
+  styleUrls: ['./input-text.component.scss'],
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => InputTextComponent),
+      multi: true,
+    }
+  ],
+})
+export class InputTextComponent implements ControlValueAccessor {
+
+  @Input() name = null;
+  @Input() autocomplete = true;
+  @Input() label = null;
+  @Input() required = false;
+  @Input() error = null;
+  @Input() size = 100000;
+  @Input() maxlength = 100000;
+  @Input() width = '';
+  @Input() display = true;
+  @Input() large = true;
+  @Input() small = false;
+  @Input() widget = false;
+  @Input() forms = false;
+  @Input() placeholder = '';
+  @Input() id = null;
+  @Input() testId = null;
+  @Input() disabled: boolean;
+  @Input() opacity = true;
+  @Input() shadow = false;
+  @Input() right = false;
+  @Input() type = 'text';
+  @Input() step: number;
+  @Input() min: number;
+  @Input() max: number;
+
+
+  @Output() focus: EventEmitter<any> = new EventEmitter();
+  @Output() blur: EventEmitter<any> = new EventEmitter();
+  @Output() onClick: EventEmitter<any> = new EventEmitter();
+  value: string;
+
+  /**
+   * Write form value to the DOM element (model => view)
+   */
+  writeValue(value: any): void {
+    this.value = value;
+  }
+
+  /**
+   * 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) => {
+  }
+
+  clear() {
+    this.value = '';
+    this.propagateChange('');
+    this.onClick.emit('');
+  }
+
+  onChange(_: any) {
+    if (this.type === 'number') {
+      this.propagateChange(+this.value);
+    } else {
+      this.propagateChange(this.value);
+    }
+  }
+
+  private onTouched() {
+  }
+
+}

package/src/components/input-text/input-text.module.ts

@@ -0,0 +1,19 @@
+import { NgModule } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+
+import { InputTextComponent } from './input-text.component';
+import {SharedUiModule} from '../shared/shared-ui.module';
+
+@NgModule({
+  declarations: [
+    InputTextComponent
+  ],
+  imports: [
+    SharedUiModule,
+    FormsModule
+  ],
+  exports: [
+    InputTextComponent
+  ]
+})
+export class InputTextComponentModule {}

package/src/components/inspark.module.ts

@@ -0,0 +1,132 @@
+import {NgModule} from '@angular/core';
+import {CommonModule} from '@angular/common';
+import {FormsModule, ReactiveFormsModule} from '@angular/forms';
+import {InlineSVGModule} from 'ng-inline-svg-2';
+import {PanelComponent} from './panel/panel.component';
+import {TableComponentModule} from './table/table.component';
+import {EmptyComponent} from './empty/empty.component';
+import {TranslateModule} from '@ngx-translate/core';
+import {InsparkHeaderComponent} from './header/header.component';
+import {InsparkTemplate} from './inspark.shared';
+import {StatusCircleComponent} from './status-circle/status-circle.component';
+import {SwitcherComponent} from './switcher/switcher.component';
+import {MenuModule} from 'primeng/menu';
+import {SliderModule} from 'primeng/slider';
+import {NgbModule} from '@ng-bootstrap/ng-bootstrap';
+import {TooltipComponent} from './tooltip/tooltip.component';
+import {TreeTableComponentModule} from './tree-table/tree-table.component';
+import {RadiobuttonComponent} from './radiobutton/radiobutton.component';
+import {SelectListComponent} from './select-list/select-list.component';
+import {ObjectTreeComponent} from './object-tree/object-tree.component';
+import {ModalInputTextComponent} from './modal-input-text/modal-input-text.component';
+import {AutoCompleteComponentModule} from './autocomplete/autocomplete.module';
+import {ObjectPieComponent} from './pie/pie.component';
+import {RadioButtonModule} from 'primeng/radiobutton';
+import {BreadcrumbModule} from 'primeng/breadcrumb';
+import {TreeModule} from 'primeng/tree';
+import { ButtonComponentModule } from './button/button.module';
+import { InputTextComponentModule } from './input-text/input-text.module';
+import { TextareaComponentModule } from './textarea/textarea.module';
+import { CheckboxComponentModule } from './checkbox/checkbox.module';
+import { ComponentContainerModule } from './component-container/component-container.module';
+import { PreloaderComponentModule } from './preloader/preloader.module';
+import { StickyComponentModule } from './sticky/sticky.module';
+import { FileComponentModule } from './file/file.module';
+import { ToolbarComponentModule } from './toolbar/toolbar.module';
+import { BreadcrumbComponentModule } from './breadcrumb/breadcrumb.module';
+import { SelectButtonComponentModule } from './select-button/select-button.module';
+import { LegacyComponentsModule } from './legacy/legacy-components.module';
+import { LegacyUiModule } from './legacy/legacy-ui.module';
+import { SvgComponentModule } from './svg/svg.module';
+import { DropdownComponentModule } from './dropdown/dropdown.module';
+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { DynamicDialogModule } from 'primeng/dynamicdialog';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    ReactiveFormsModule,
+    AutoCompleteComponentModule,
+    FormsModule,
+    ReactiveFormsModule,
+    DropdownComponentModule,
+    TableComponentModule,
+    TreeTableComponentModule,
+    RadioButtonModule,
+    MenuModule,
+    SliderModule,
+    NgbModule,
+    BreadcrumbModule,
+    TreeModule,
+    TranslateModule,
+    ButtonComponentModule,
+    InputTextComponentModule,
+    TextareaComponentModule,
+    CheckboxComponentModule,
+    ComponentContainerModule,
+    PreloaderComponentModule,
+    EmptyComponent,
+    StickyComponentModule,
+    FileComponentModule,
+    ToolbarComponentModule,
+    BreadcrumbComponentModule,
+    SelectButtonComponentModule,
+    LegacyComponentsModule,
+    LegacyUiModule,
+    InlineSVGModule,
+    SvgComponentModule,
+    DynamicDialogModule,
+  ],
+  declarations: [
+    PanelComponent,
+    ModalInputTextComponent,
+    SelectListComponent,
+    InsparkTemplate,
+    TooltipComponent,
+    RadiobuttonComponent,
+    ObjectTreeComponent,
+    ObjectPieComponent
+  ],
+  exports: [
+    PanelComponent,
+    DropdownComponentModule,
+    TableComponentModule,
+    TreeTableComponentModule,
+    EmptyComponent,
+    InsparkHeaderComponent,
+    ModalInputTextComponent,
+    SelectListComponent,
+    StatusCircleComponent,
+    SwitcherComponent,
+    MenuModule,
+    SliderModule,
+    InsparkTemplate,
+    NgbModule,
+    TooltipComponent,
+    RadiobuttonComponent,
+    ObjectTreeComponent,
+    ObjectPieComponent,
+    AutoCompleteComponentModule,
+    FormsModule,
+    ReactiveFormsModule,
+    ButtonComponentModule,
+    InputTextComponentModule,
+    TextareaComponentModule,
+    CheckboxComponentModule,
+    ComponentContainerModule,
+    PreloaderComponentModule,
+    EmptyComponent,
+    StickyComponentModule,
+    FileComponentModule,
+    ToolbarComponentModule,
+    BreadcrumbComponentModule,
+    SelectButtonComponentModule,
+    LegacyComponentsModule,
+    LegacyUiModule,
+    SvgComponentModule
+  ],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA]
+})
+export class InsparkComponentsModule {
+}

package/src/components/inspark.scss

@@ -0,0 +1,28 @@
+
+.button-menu.p-menu {
+  width: auto;
+  padding: 0;
+
+  .p-menuitem-icon {
+    min-width: 16px;
+    display: inline-block;
+    font-size: 16px;
+  }
+
+  .p-menuitem-link {
+    font-size: 14px;
+    height: 48px;
+    display: flex;
+    align-items: center;
+    padding: 0 12px;
+    border-radius: 0;
+  }
+
+  .p-menuitem {
+    margin: 0;
+  }
+
+  .p-menuitem + .p-menuitem {
+    border-top: 1px solid #444;
+  }
+}

package/src/components/inspark.shared.ts

@@ -0,0 +1,20 @@
+import {Directive, Input, TemplateRef} from '@angular/core';
+
+@Directive({
+  standalone: false,
+  selector: '[inTemplate]',
+  host: {}
+})
+export class InsparkTemplate {
+
+  @Input() type: string;
+
+  @Input('inTemplate') name: string;
+
+  constructor(public template: TemplateRef<any>) {
+  }
+
+  getType(): string {
+    return this.name;
+  }
+}

package/src/components/legacy/legacy-components.module.ts

@@ -0,0 +1,26 @@
+import { NgModule } from '@angular/core';
+
+import { SharedUiModule } from '../shared/shared-ui.module';
+
+import { InsparkHeaderComponent } from '../header/header.component';
+import { StatusCircleComponent } from '../status-circle/status-circle.component';
+import { SwitcherComponent } from '../switcher/switcher.component';
+import { SvgComponentModule } from '../svg/svg.module';
+
+@NgModule({
+  declarations: [
+    InsparkHeaderComponent,
+    StatusCircleComponent,
+    SwitcherComponent
+  ],
+  imports: [
+    SharedUiModule,
+    SvgComponentModule
+  ],
+  exports: [
+    InsparkHeaderComponent,
+    StatusCircleComponent,
+    SwitcherComponent
+  ]
+})
+export class LegacyComponentsModule {}

package/src/components/legacy/legacy-ui.module.ts

@@ -0,0 +1,28 @@
+import { NgModule } from '@angular/core';
+
+import { SharedUiModule } from '../shared/shared-ui.module';
+import { InlineMessageComponent } from '../inline-message/inline-message.component';
+import { ContentToggleComponent } from '../content-toggle/content-toggle.component';
+import { InputGroupComponent } from '../input-group/input-group.component';
+import { LinkComponentModule } from '../link/link.module';
+import { SvgComponentModule } from '../svg/svg.module';
+@NgModule({
+  declarations: [
+    InlineMessageComponent,
+    ContentToggleComponent,
+    InputGroupComponent,
+  ],
+  imports: [
+    SharedUiModule,
+    LinkComponentModule,
+    SvgComponentModule
+  ],
+  exports: [
+    InlineMessageComponent,
+    ContentToggleComponent,
+    InputGroupComponent,
+    LinkComponentModule,
+    SvgComponentModule
+  ]
+})
+export class LegacyUiModule {}