spiderly 19.0.1 → 19.0.3

package/src/lib/components/spiderly-form-control/spiderly-form-control.ts

@@ -1,60 +0,0 @@
-import { FormArray, FormControl, FormControlOptions, FormControlState, FormGroup, ValidatorFn } from '@angular/forms';
-import { Observable } from 'rxjs';
-import { BaseEntity } from '../../entities/base-entity';
-
-export interface SpiderlyValidatorFn extends ValidatorFn {
-    hasNotEmptyRule?: boolean;
-}
-
-// It's made like generic type because of <number>, <string> etc. not to put class like User.
-export class SpiderlyFormControl<T = any> extends FormControl<T> {
-    public label: string;
-    public labelForDisplay: string;
-    public required: boolean;
-    private _spiderlyValidator: SpiderlyValidatorFn | null;
-
-    constructor(value: any, opts: FormControlOptions=null, required:boolean=false) {
-        opts = opts ?? {updateOn: 'blur'};
-        super(value, opts);
-        this.required = required;
-     }
-
-    override getRawValue(): T { // Doing this because .value gets only not disabled values
-        return super.getRawValue() as T;
-    }
-
-    public override get validator(): SpiderlyValidatorFn | null {
-        return this._spiderlyValidator;
-    }
-
-    public override set validator(validator: SpiderlyValidatorFn | null) {
-        this._spiderlyValidator = validator;
-        this.setValidators(validator); 
-    }
-}
-
-export class SpiderlyFormGroup<TValue = any> extends FormGroup {
-    declare controls: { [P in keyof TValue]: SpiderlyFormControl<TValue[P]> };
-
-    constructor(controls: { [P in keyof TValue]: SpiderlyFormControl<TValue[P]> }) {
-        super(controls);
-    }
-
-    override getRawValue(): TValue { // Doing this because .value gets only not disabled values
-        return super.getRawValue() as TValue;
-    }
-
-    public name?: string; // Using for nested form groups
-    public mainDTOName?: string;
-    public saveObservableMethod?: (saveBody: any) => Observable<any>;
-    public initSaveBody?: () => BaseEntity = () => null;
-    public controlNamesFromHtml?: string[] = [];
-}
-
-export class SpiderlyFormArray<TValue = any> extends FormArray {
-    override value: TValue[]; // There is no getRawValue in FormArray
-    public required: boolean;
-    public modelConstructor: TValue;
-    public translationKey: string;
-    public controlNamesFromHtml?: string[] = [];
-}

package/src/lib/components/spiderly-panels/panel-body/panel-body.component.html

@@ -1,8 +0,0 @@
-<!-- FT: this is selector, not the class -->
-<div class="panel-body"
-    [ngClass]="{
-        'non-grid-panel-bottom-padding': normalBottomPadding, 
-    }">
-    <!-- 'card': true, -->
-    <ng-content></ng-content>
-</div>

package/src/lib/components/spiderly-panels/panel-body/panel-body.component.ts

@@ -1,16 +0,0 @@
-import { Component, Input, OnInit } from '@angular/core';
-
-@Component({
-    selector: 'panel-body',
-    templateUrl: './panel-body.component.html',
-    styles: [],
-    standalone: false
-})
-export class PanelBodyComponent implements OnInit {
-  @Input() normalBottomPadding: boolean = false; // FT: By default we set to false, when the grid is inside the body.
-
-  constructor() { }
-
-  ngOnInit(): void {
-  }
-}

package/src/lib/components/spiderly-panels/panel-footer/panel-footer.component.html

@@ -1,8 +0,0 @@
-<div class="spiderly-panel-footer">
-    <div class="buttons-wrapper">
-        <ng-content></ng-content>
-    </div>
-    <span class="p-text-secondary">
-        <ng-content select="[footerRight]"></ng-content>
-    </span>
-</div>

package/src/lib/components/spiderly-panels/panel-footer/panel-footer.component.ts

@@ -1,15 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-
-@Component({
-    selector: 'panel-footer',
-    templateUrl: './panel-footer.component.html',
-    styleUrl: './panel-footer.component.scss',
-    standalone: false
-})
-export class PanelFooterComponent implements OnInit {
-
-  constructor() { }
-
-  ngOnInit(): void {
-  }
-}

package/src/lib/components/spiderly-panels/panel-header/panel-header.component.html

@@ -1,25 +0,0 @@
-<div style="display: flex; align-items: center; gap: 24px; flex-wrap: wrap;">
-    @if (tabs == null) {
-        <div style="display: flex; align-items: center; gap: 14px;">
-            <span *ngIf="index != null" class="number-circle">{{index + 1}}</span>
-            <i class="{{icon}} primary-color" [style]="showBigTitle ? 'font-size: 19px' : 'font-size: 16px;'"></i> 
-            <h2 [style]="(showBigTitle ? 'font-size: 16px;' : '')" class="remove-h-css">{{title}}</h2>
-        </div>
-    }
-    @else {
-        @for (tab of tabs; track $index) {
-            <div (click)="setTabIsSelected(tab)"
-                [style]="{
-                    display: 'flex',
-                    alignItems: 'center',
-                    gap: '14px',
-                    cursor: 'pointer',
-                    fontWeight: tab.isSelected ? '700' : 'normal'
-                }">
-                <span *ngIf="index != null" class="number-circle">{{index + 1}}</span>
-                <i class="{{tab.icon}} primary-color" [style]="showBigTitle ? 'font-size: 19px' : 'font-size: 16px;'"></i> 
-                <div [style]="showBigTitle ? 'font-size: 16px' : ''">{{tab.label}}</div>
-            </div>
-        }
-    }
-</div>

package/src/lib/components/spiderly-panels/panel-header/panel-header.component.ts

@@ -1,69 +0,0 @@
-import { TranslocoService } from '@jsverse/transloco';
-import { Component, OnInit, Input } from '@angular/core';
-
-@Component({
-    selector: 'panel-header',
-    templateUrl: './panel-header.component.html',
-    styles: [`
-    .p-panel-icons-end {
-      font-size: 50px;
-    }
-  `],
-    standalone: false
-})
-export class PanelHeaderComponent implements OnInit {
-  @Input() title: string;
-  @Input() showBigTitle: boolean;
-  @Input() showIcon: boolean = true;
-  @Input() icon: string;
-  @Input() index: number;
-  @Input() tabs: SpiderlyTab[];
-
-  constructor(
-    private translocoService: TranslocoService
-  ) { }
-
-  ngOnInit(): void {
-    if (this.title == null)
-      this.title = this.translocoService.translate('Details');
-
-    if (this.showIcon === true && this.icon == null)
-      this.icon = 'pi pi-file-edit';
-  }
-
-  setTabIsSelected(tab: SpiderlyTab){
-    this.tabs.forEach(t => {
-      t.isSelected = false;
-    });
-
-    tab.isSelected = true;
-  }
-}
-
-export class SpiderlyTab
-{
-    label?: string;
-    id?: number;
-    icon?: string;
-    isSelected?: boolean;
-  
-    constructor(
-    {
-        label,
-        id,
-        icon,
-        isSelected,
-    }:{
-        label?: string;
-        id?: number;
-        icon?: string;
-        isSelected?: boolean;
-    } = {}
-    ) {
-        this.label = label;
-        this.id = id;
-        this.icon = icon;
-        this.isSelected = isSelected;
-    }
-
-}

package/src/lib/components/spiderly-panels/spiderly-card/spiderly-card.component.html

@@ -1,7 +0,0 @@
-<div class="card responsive-card-padding">
-    <div style="display: flex; align-items: center; margin-bottom: 14px; gap: 12px;">
-        <i  style="font-size: 20px;" class="{{icon}} primary-color"></i>
-        <h5 style="margin: 0;">{{title}}</h5>
-    </div>
-    <ng-content></ng-content>
-</div>

package/src/lib/components/spiderly-panels/spiderly-card/spiderly-card.component.ts

@@ -1,17 +0,0 @@
-import { Component, Input, OnInit } from '@angular/core';
-
-@Component({
-    selector: 'spiderly-card',
-    templateUrl: './spiderly-card.component.html',
-    styles: [],
-    standalone: false
-})
-export class SpiderlyCardComponent implements OnInit {
-  @Input() icon: string = 'pi pi-file-edit';
-  @Input() title: string;
-
-  constructor() { }
-
-  ngOnInit(): void {
-  }
-}

package/src/lib/components/spiderly-panels/spiderly-panel/spiderly-panel.component.html

@@ -1,40 +0,0 @@
-<p-panel 
-[showHeader]="showPanelHeader"
-[ngClass]="{
-    'multiple-panel-first-without-header': isFirstMultiplePanel && !showPanelHeader,
-    'multiple-panel-first': isFirstMultiplePanel,
-    'multiple-panel-middle-without-header': isMiddleMultiplePanel && !showPanelHeader,
-    'multiple-panel-middle': isMiddleMultiplePanel,
-    'multiple-panel-last-without-header': isLastMultiplePanel && !showPanelHeader,
-    'multiple-panel-last': isLastMultiplePanel,
-    'panel-border': !isFirstMultiplePanel,
-    'spiderly-panel': true,
-}"
-[toggleable]="toggleable"
-[collapsed]="toggleable && collapsed"
-expandIcon="pi pi-chevron-up"
-collapseIcon="pi pi-chevron-down"
->
-    <ng-template pTemplate="header">
-        <div>
-            <ng-content select="panel-header"></ng-content>
-        </div>
-    </ng-template>
-
-    <ng-template pTemplate="icons">
-        <div *ngIf="showCrudMenu && crudMenu" class="mr-2">
-            <i class="pi pi-ellipsis-h icon-hover" (click)="menuItemClick(index, $event)"></i>
-            <p-menu #menu [model]="crudMenu" [popup]="true" appendTo="body"></p-menu>
-        </div>
-        <div *ngIf="showRemoveIcon" class="mr-2">
-            <i class="pi pi-minus icon-hover error-color-light" (click)="removeItemClick()"></i>
-        </div>
-    </ng-template>
-
-    <div class="panel-body-wrapper">
-        <ng-content select="panel-body"></ng-content>
-    </div>
-
-    <ng-content select="panel-footer"></ng-content>
-
-</p-panel>

package/src/lib/components/spiderly-panels/spiderly-panel/spiderly-panel.component.ts

@@ -1,42 +0,0 @@
-import { Component, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core';
-import { MenuItem } from 'primeng/api';
-import { Menu } from 'primeng/menu';
-
-@Component({
-    selector: 'spiderly-panel',
-    templateUrl: './spiderly-panel.component.html',
-    styleUrl: './spiderly-panel.component.scss',
-    standalone: false
-})
-export class SpiderlyPanelComponent implements OnInit {
-  @Input() isFirstMultiplePanel: boolean = false;
-  @Input() isMiddleMultiplePanel: boolean = false;
-  @Input() isLastMultiplePanel: boolean = false;
-  @Input() toggleable: boolean = false;
-  @Input() collapsed: boolean = false;
-  @Input() crudMenu: MenuItem[];
-  @Input() showCrudMenu: boolean = true;
-  @Input() showRemoveIcon: boolean = false;
-  @Input() index: number;
-  @Input() showPanelHeader: boolean = true;
-
-  @Output() onMenuIconClick: EventEmitter<number> = new EventEmitter();
-  @Output() onRemoveIconClick: EventEmitter<null> = new EventEmitter();
-
-  @ViewChild('menu') menu: Menu;
-  
-  constructor() { }
-
-  ngOnInit(): void {
-  }
-
-  menuItemClick(index: number, event){
-    this.menu.toggle(event);
-    this.onMenuIconClick.next(index);
-  }
-
-  removeItemClick(){
-    this.onRemoveIconClick.next(null);
-  }
-
-}

package/src/lib/components/spiderly-panels/spiderly-panels.module.ts

@@ -1,32 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { PanelBodyComponent } from './panel-body/panel-body.component';
-import { PanelFooterComponent } from './panel-footer/panel-footer.component';
-import { PanelHeaderComponent } from './panel-header/panel-header.component';
-import { SpiderlyPanelComponent } from './spiderly-panel/spiderly-panel.component';
-import { SpiderlyCardComponent } from './spiderly-card/spiderly-card.component';
-import { PrimengModule } from '../../modules/primeng.module';
-
-@NgModule({
-  imports: [
-    CommonModule,
-    PrimengModule,
-  ],
-  exports: [
-    PanelHeaderComponent,
-    PanelBodyComponent,
-    PanelFooterComponent,
-    SpiderlyPanelComponent,
-    SpiderlyCardComponent
-  ],
-  declarations: [
-    PanelHeaderComponent,
-    PanelBodyComponent,
-    PanelFooterComponent,
-    SpiderlyPanelComponent,
-    SpiderlyCardComponent
-  ],
-  providers: [
-  ]
-})
-export class SpiderlyPanelsModule {}

package/src/lib/controls/base-autocomplete-control.ts

@@ -1,17 +0,0 @@
-import {
-    Component,
-    EventEmitter,
-    Output,
-  } from '@angular/core';
-import { AutoCompleteCompleteEvent } from 'primeng/autocomplete';
-import { BaseDropdownControl } from './base-dropdown-control';
-
-  @Component({
-    selector: 'base-autocomplete-control',
-    template: '',
-    styles: [],
-    standalone: false
-})
-  export class BaseAutocompleteControl extends BaseDropdownControl {
-    @Output() onTextInput: EventEmitter<AutoCompleteCompleteEvent> = new EventEmitter();
-  }

package/src/lib/controls/base-control.ts

@@ -1,60 +0,0 @@
-import {
-    Component, Input,
-  } from '@angular/core';
-import { SpiderlyFormControl } from '../components/spiderly-form-control/spiderly-form-control';
-import { TranslocoService } from '@jsverse/transloco';
-  
-  @Component({
-    selector: 'base-control',
-    template: '',
-    styles: [],
-    standalone: false
-})
-  export class BaseControl {
-    @Input() control: SpiderlyFormControl; // FT: if you name it formControl: https://stackoverflow.com/a/54755671/21209982
-    @Input() disabled: boolean = false;
-    @Input() showLabel: boolean = true;
-    @Input() label: string = null; // NgModel/Want custom translation
-    @Input() controlValid: boolean = true; // NgModel
-    @Input() placeholder: string = '';
-    @Input() showTooltip: boolean = false;
-    @Input() tooltipText: string = null;
-    @Input() tooltipIcon: string = 'pi pi-info-circle';
-    errorMessageTooltipEvent: 'hover' | 'focus';
-    
-    constructor(
-      protected translocoService: TranslocoService,
-    ) {
-
-    }
-
-    ngOnInit(){
-      if(this.control != null && this.disabled == true)
-        this.control.disable();
-
-      // TODO FT: Delete if you don't need
-      // if(this.control?.validator?.hasNotEmptyRule == true) // FT HACK: Be carefull with this name, if you change it in generator you need to change it here also
-      //   this.control.required = true;
-
-       this.errorMessageTooltipEvent = window.innerWidth > 1000 ? 'hover' : 'focus'
-    }
-
-    ngAfterViewInit(){
-
-    }
-
-    getTranslatedLabel(): string{
-      return this.label ?? this.control.labelForDisplay;
-    }
-
-    getValidationErrrorMessages(){
-      if(this.control?.errors && this.control?.dirty){
-          // FT: it should always be one error message for single form control, 
-          // also i don't need to reassign it to null because it will be shown only when control.valid == false
-          return this.control.errors['_'];
-      }
-
-      return null;
-    }
-
-  }

package/src/lib/controls/base-dropdown-control.ts

@@ -1,37 +0,0 @@
-import {
-    Component,
-    EventEmitter,
-    Input,
-    Output,
-  } from '@angular/core';
-import { BaseControl } from './base-control';
-import { PrimengOption } from '../entities/primeng-option';
-import { TranslocoService } from '@jsverse/transloco';
-
-  @Component({
-    selector: 'base-dropdown-control',
-    template: '',
-    styles: [],
-    standalone: false
-})
-  export class BaseDropdownControl extends BaseControl {
-    @Input() options: PrimengOption[];
-    @Input() showAddon: boolean = false;
-    @Input() addonIcon: string = 'pi pi-ellipsis-h';
-    @Input() override placeholder: string = this.translocoService.translate('SelectFromTheList');
-    @Output() onButtonClick: EventEmitter<null> = new EventEmitter();
-    
-    constructor(
-      protected override translocoService: TranslocoService,
-    ) {
-      super(translocoService);
-    }
-
-    dropdownMarkAsDirty(){
-      this.control.markAsDirty();
-    }
-
-    addonClick(){
-      this.onButtonClick.next(null);
-    }
-  }

package/src/lib/controls/spiderly-autocomplete/spiderly-autocomplete.component.html

@@ -1,36 +0,0 @@
-<ng-container *transloco="let t">
-  <div class="flex flex-column gap-2">
-    <div *ngIf="getTranslatedLabel() != '' && getTranslatedLabel() != null">
-      <label>{{getTranslatedLabel()}}</label>
-      <required *ngIf="control?.required"></required>
-    </div>
-  
-    <p-inputgroup>
-      <p-autocomplete
-      *ngIf="control"
-      [pTooltip]="getValidationErrrorMessages()" [tooltipEvent]="errorMessageTooltipEvent" tooltipPosition="bottom" [tooltipDisabled]="control.valid" tooltipStyleClass="spiderly-tooltip-invalid"
-      [id]="label"
-      [formControl]="control"
-      [placeholder]="placeholder"
-      [suggestions]="options"
-      optionLabel="label"
-      optionValue="code"
-      (completeMethod)="search($event)"
-      [forceSelection]="true"
-      [dropdown]="false"
-      [showClear]="showClear"
-      (onHide)="dropdownMarkAsDirty()"
-      (onSelect)="select($event)"
-      [completeOnFocus]="true"
-      [style]="{'width': '100%'}"
-      [fluid]="true"
-      [appendTo]="appendTo"
-      [emptyMessage]="emptyMessage"
-      [lazy]="true"
-      />
-      <p-inputgroup-addon *ngIf="showAddon" (click)="addonClick()" [style]="{'cursor': 'pointer', 'background-color': 'var(--p-primary-color)', 'border-color': 'var(--p-primary-color)'}">
-        <i class="{{addonIcon}}" style="color: #fff;"></i>
-      </p-inputgroup-addon>
-    </p-inputgroup>
-  </div>
-</ng-container>

package/src/lib/controls/spiderly-autocomplete/spiderly-autocomplete.component.ts

@@ -1,56 +0,0 @@
-import { Component, Input, OnInit } from '@angular/core';
-import { AutoCompleteCompleteEvent } from 'primeng/autocomplete';
-import { BaseAutocompleteControl } from '../base-autocomplete-control';
-import { CommonModule } from '@angular/common';
-import { ReactiveFormsModule, FormsModule } from '@angular/forms';
-import { RequiredComponent } from '../../components/required/required.component';
-import { TranslocoDirective, TranslocoService } from '@jsverse/transloco';
-import { PrimengModule } from '../../modules/primeng.module';
-
-@Component({
-    selector: 'spiderly-autocomplete',
-    templateUrl: './spiderly-autocomplete.component.html',
-    styles: [],
-    imports: [
-        ReactiveFormsModule,
-        FormsModule,
-        PrimengModule,
-        CommonModule,
-        RequiredComponent,
-        TranslocoDirective,
-    ]
-})
-export class SpiderlyAutocompleteComponent extends BaseAutocompleteControl implements OnInit {
-    @Input() appendTo: any = 'body';
-    @Input() showClear: boolean = true;
-    @Input() emptyMessage: string;
-    @Input() displayName: string; // Added because when we initialize the object options are null
-
-    constructor(
-        protected override translocoService: TranslocoService,
-    ) { 
-        super(translocoService);
-    }
-
-    override ngOnInit(){
-        super.ngOnInit();
-
-        if (this.options == null && this.control.value != null) {
-            this.options = [
-                { label: this.displayName, code: this.control.value }
-            ];
-        }
-
-        if (this.emptyMessage == null) {
-            this.emptyMessage = this.translocoService.translate('EmptyMessage');
-        }
-    }
-
-    search(event: AutoCompleteCompleteEvent){
-        this.onTextInput.next(event);
-    }
-
-    select(event){
-    }
-
-}

package/src/lib/controls/spiderly-calendar/spiderly-calendar.component.html

@@ -1,21 +0,0 @@
-<div class="flex flex-column gap-2">
-    <div *ngIf="getTranslatedLabel() != '' && getTranslatedLabel() != null">
-        <label>{{getTranslatedLabel()}}</label>
-        <required *ngIf="control?.required"></required>
-        <!-- tabindex="-1": Makes the element focusable, but removes it from the tab order. -->
-        <i *ngIf="showTooltip" class="{{tooltipIcon}}" style="margin-left: 5px; cursor: pointer;" [pTooltip]="tooltipText" tabindex="-1" tooltipEvent="focus"></i>
-    </div>
-    <p-datepicker
-    *ngIf="control"
-    [pTooltip]="getValidationErrrorMessages()" [tooltipEvent]="errorMessageTooltipEvent" tooltipPosition="bottom" [tooltipDisabled]="control.valid" tooltipStyleClass="spiderly-tooltip-invalid"
-    [formControl]="control"
-    (onBlur)="control.markAsDirty()"
-    dateFormat="dd.mm.yy."
-    iconDisplay="input" 
-    [showIcon]="true" 
-    [showTime]="showTime"
-    (onSelect)="setDate($event)"
-    appendTo="body"
-    [fluid]="true"
-    />
-</div>

package/src/lib/controls/spiderly-calendar/spiderly-calendar.component.ts

@@ -1,37 +0,0 @@
-import { Component, Input, OnInit } from '@angular/core';
-import { BaseControl } from '../base-control';
-import { CommonModule } from '@angular/common';
-import { ReactiveFormsModule, FormsModule } from '@angular/forms';
-import { RequiredComponent } from '../../components/required/required.component';
-import { TranslocoService } from '@jsverse/transloco';
-import { PrimengModule } from '../../modules/primeng.module';
-
-@Component({
-    selector: 'spiderly-calendar',
-    templateUrl: './spiderly-calendar.component.html',
-    styles: [],
-    imports: [
-        CommonModule,
-        ReactiveFormsModule,
-        FormsModule,
-        PrimengModule,
-        RequiredComponent
-    ]
-})
-export class SpiderlyCalendarComponent extends BaseControl implements OnInit {
-    @Input() showTime: boolean = false;
-
-    constructor(
-        protected override translocoService: TranslocoService,
-    ) { 
-        super(translocoService);
-    }
-
-    override ngOnInit(){
-        super.ngOnInit();
-    }
-
-    setDate(event:Date) { 
-        
-    }
-}

package/src/lib/controls/spiderly-checkbox/spiderly-checkbox.component.html

@@ -1,16 +0,0 @@
-<div class="flex flex-column gap-2">
-    <div *ngIf="inlineLabel === false && getTranslatedLabel() != '' && getTranslatedLabel() != null">
-      <label>{{getTranslatedLabel()}}</label>
-      <required *ngIf="control?.required"></required>
-    </div>
-    <div class="p-inputgroup p-fluid" style="margin-top: 0.5rem;">
-        <p-checkbox
-        *ngIf="control"
-        [pTooltip]="getValidationErrrorMessages()" [tooltipEvent]="errorMessageTooltipEvent" tooltipPosition="bottom" [tooltipDisabled]="control.valid" tooltipStyleClass="spiderly-tooltip-invalid" 
-        [formControl]="control"
-        [value]="inlineLabel ? label : null"
-        [id]="label"
-        [binary]="true"
-        />
-    </div>
-</div>