spiderly 0.0.8 → 19.0.1

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

@@ -0,0 +1,38 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { BaseControl } from '../base-control';
+import { ReactiveFormsModule, FormsModule } from '@angular/forms';
+import { CommonModule } from '@angular/common';
+import { RequiredComponent } from '../../components/required/required.component';
+import { TranslocoService } from '@jsverse/transloco';
+import { PrimengModule } from '../../modules/primeng.module';
+
+@Component({
+    selector: 'spiderly-checkbox',
+    templateUrl: './spiderly-checkbox.component.html',
+    styles: [],
+    imports: [
+        CommonModule,
+        ReactiveFormsModule,
+        FormsModule,
+        PrimengModule,
+        RequiredComponent
+    ]
+})
+export class SpiderlyCheckboxComponent extends BaseControl implements OnInit {
+    @Input() fakeLabel = true;
+    @Input() initializeToFalse = false;
+    @Input() inlineLabel = false;
+
+    constructor(
+        protected override translocoService: TranslocoService,
+    ) { 
+        super(translocoService);
+    }
+
+     override ngOnInit(){
+        if (this.initializeToFalse == true)
+            this.control.setValue(false);
+
+        super.ngOnInit();
+    }
+}

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

@@ -0,0 +1,33 @@
+<!-- Can't put (onBlur) in this control -->
+
+<div class="flex flex-column gap-2">
+  <div *ngIf="getTranslatedLabel() != '' && getTranslatedLabel() != null">
+    <label>{{getTranslatedLabel()}}</label>
+    <required *ngIf="control?.required"></required>
+  </div>
+  <div style="display: flex; gap: 10px;">
+    <div class="p-inputgroup p-fluid">
+      <!-- <span class="p-inputgroup-addon">
+        #
+      </span> -->
+      <input
+      *ngIf="control"
+      [pTooltip]="getValidationErrrorMessages()" [tooltipEvent]="errorMessageTooltipEvent" tooltipPosition="bottom" [tooltipDisabled]="control.valid" tooltipStyleClass="spiderly-tooltip-invalid"
+      pInputText
+      [placeholder]="placeholder"
+      [style]="{'width':'100%', 'position': 'relative'}"
+      [formControl]="control"
+      [id]="control.label"
+      (blur)="control.markAsDirty()"
+      />
+  </div>
+    <p-colorpicker
+    *ngIf="control"
+    [pTooltip]="getValidationErrrorMessages()" [tooltipEvent]="errorMessageTooltipEvent" tooltipPosition="bottom" [tooltipDisabled]="control.valid" tooltipStyleClass="spiderly-tooltip-invalid"
+    [formControl]="control"
+    [id]="control.label"
+    (blur)="control.markAsDirty()"
+    appendTo="body"
+    ></p-colorpicker>
+  </div>
+</div>

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

@@ -0,0 +1,40 @@
+import { Component, OnInit } from '@angular/core';
+import { BaseControl } from '../base-control';
+import { ReactiveFormsModule, FormsModule } from '@angular/forms';
+import { RequiredComponent } from '../../components/required/required.component';
+import { CommonModule } from '@angular/common';
+import { TranslocoService } from '@jsverse/transloco';
+import { PrimengModule } from '../../modules/primeng.module';
+
+@Component({
+    selector: 'spiderly-colorpick',
+    templateUrl: './spiderly-colorpick.component.html',
+    styles: [],
+    imports: [
+        CommonModule,
+        ReactiveFormsModule,
+        FormsModule,
+        PrimengModule,
+        RequiredComponent
+    ]
+})
+export class SpiderlyColorpickComponent extends BaseControl implements OnInit {
+
+    constructor(
+        protected override translocoService: TranslocoService,
+    ) { 
+        super(translocoService);
+    }
+
+    override ngOnInit(){
+        this.control.valueChanges.subscribe((value) => {
+            this.control.setValue(value, { emitEvent: false }); // Preventing infinite loop
+        });
+
+        if (this.control.value == null)
+            this.placeholder = this.translocoService.translate('SelectAColor');
+
+        super.ngOnInit();
+    }
+
+}

package/src/lib/controls/spiderly-controls.module.ts

@@ -0,0 +1,61 @@
+import { NgModule } from '@angular/core';
+import { SpiderlyPanelsModule } from '../components/spiderly-panels/spiderly-panels.module';
+import { SpiderlyMultiAutocompleteComponent } from './spiderly-multiautocomplete/spiderly-multiautocomplete.component';
+import { SpiderlyPasswordComponent } from './spiderly-password/spiderly-password.component';
+import { SpiderlyTextboxComponent } from './spiderly-textbox/spiderly-textbox.component';
+import { SpiderlyCheckboxComponent } from './spiderly-checkbox/spiderly-checkbox.component';
+import { SpiderlyMultiSelectComponent } from './spiderly-multiselect/spiderly-multiselect.component';
+import { SpiderlyTextareaComponent } from './spiderly-textarea/spiderly-textarea.component';
+import { SpiderlyNumberComponent } from './spiderly-number/spiderly-number.component';
+import { SpiderlyDropdownComponent } from './spiderly-dropdown/spiderly-dropdown.component';
+import { SpiderlyEditorComponent } from './spiderly-editor/spiderly-editor.component';
+import { SpiderlyColorpickComponent } from './spiderly-colorpick/spiderly-colorpick.component';
+import { SpiderlyFileComponent } from './spiderly-file/spiderly-file.component';
+import { SpiderlyCalendarComponent } from './spiderly-calendar/spiderly-calendar.component';
+import { SpiderlyAutocompleteComponent } from './spiderly-autocomplete/spiderly-autocomplete.component';
+import { SpiderlyButtonComponent } from '../components/spiderly-buttons/spiderly-button/spiderly-button.component';
+import { SpiderlyReturnButtonComponent } from '../components/spiderly-buttons/return-button/return-button.component';
+
+@NgModule({
+  imports: [
+    SpiderlyTextboxComponent,
+    SpiderlyTextareaComponent,
+    SpiderlyCheckboxComponent,
+    SpiderlyCalendarComponent,
+    SpiderlyReturnButtonComponent,
+    SpiderlyButtonComponent,
+    SpiderlyPanelsModule,
+    SpiderlyPasswordComponent,
+    SpiderlyAutocompleteComponent,
+    SpiderlyMultiAutocompleteComponent,
+    SpiderlyMultiSelectComponent,
+    SpiderlyNumberComponent,
+    SpiderlyDropdownComponent,
+    SpiderlyEditorComponent,
+    SpiderlyColorpickComponent,
+    SpiderlyFileComponent,
+  ],
+  exports: [
+    SpiderlyTextboxComponent,
+    SpiderlyTextareaComponent,
+    SpiderlyCheckboxComponent,
+    SpiderlyCalendarComponent,
+    SpiderlyReturnButtonComponent,
+    SpiderlyButtonComponent,
+    SpiderlyPanelsModule,
+    SpiderlyPasswordComponent,
+    SpiderlyAutocompleteComponent,
+    SpiderlyMultiAutocompleteComponent,
+    SpiderlyMultiSelectComponent,
+    SpiderlyNumberComponent,
+    SpiderlyDropdownComponent,
+    SpiderlyEditorComponent,
+    SpiderlyColorpickComponent,
+    SpiderlyFileComponent
+  ],
+  declarations: [
+  ],
+  providers: [
+  ]
+})
+export class SpiderlyControlsModule {}

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

@@ -0,0 +1,27 @@
+<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>
+
+  <!-- Don't support p-inputgroup -->
+  <p-select
+  *ngIf="control"
+  [pTooltip]="getValidationErrrorMessages()" tooltipPosition="bottom" [tooltipDisabled]="control.valid" tooltipStyleClass="spiderly-tooltip-invalid" 
+  [id]="label"
+  [formControl]="control"
+  [placeholder]="placeholder"
+  [options]="options"
+  optionLabel="label"
+  optionValue="code"
+  [showClear]="true"
+  (onHide)="dropdownMarkAsDirty()"
+  (onChange)="change($event)"
+  [fluid]="true"
+  appendTo="body"
+  />
+  
+</div>

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

@@ -0,0 +1,39 @@
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { ReactiveFormsModule, FormsModule } from '@angular/forms';
+import { RequiredComponent } from '../../components/required/required.component';
+import { BaseDropdownControl } from '../base-dropdown-control';
+import { TranslocoService } from '@jsverse/transloco';
+import { DropdownChangeEvent } from 'primeng/dropdown';
+import { PrimengModule } from '../../modules/primeng.module';
+
+@Component({
+    selector: 'spiderly-dropdown',
+    templateUrl: './spiderly-dropdown.component.html',
+    styles: [],
+    imports: [
+        ReactiveFormsModule,
+        FormsModule,
+        PrimengModule,
+        CommonModule,
+        RequiredComponent
+    ]
+})
+export class SpiderlyDropdownComponent extends BaseDropdownControl implements OnInit {
+    @Output() onChange: EventEmitter<DropdownChangeEvent> = new EventEmitter();
+
+    constructor(
+        protected override translocoService: TranslocoService,
+    ) { 
+        super(translocoService);
+    }
+
+    override ngOnInit(){
+        super.ngOnInit();
+    }
+
+    change(event: DropdownChangeEvent){
+        this.onChange.next(event);
+    }
+
+}

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

@@ -0,0 +1,22 @@
+<!-- Can't put (onBlur) in this control -->
+
+<div class="flex flex-column gap-2">
+  <div *ngIf="getTranslatedLabel() != '' && getTranslatedLabel() != null">
+    <label>{{getTranslatedLabel()}}</label>
+    <required *ngIf="control?.required"></required>
+  </div>
+
+  <!-- Disable doesn't work on this control -->
+  <p-editor
+  *ngIf="control"
+  [formControl]="control"
+  [pTooltip]="getValidationErrrorMessages()" [tooltipEvent]="errorMessageTooltipEvent" tooltipPosition="bottom" [tooltipDisabled]="control.valid" tooltipStyleClass="spiderly-tooltip-invalid"
+  [readonly]="control.disabled"
+  [class]="control.invalid && control.dirty ? 'control-error-border' : ''"
+  [id]="control.label"
+  [placeholder]="placeholder"
+  (click)="onClick()"
+  [style]="{ height: '320px' }"
+  ></p-editor>
+
+</div>

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

@@ -0,0 +1,58 @@
+import { Component, Input, OnInit, ViewChild } from '@angular/core';
+import { BaseControl } from '../base-control';
+import { ReactiveFormsModule, FormsModule } from '@angular/forms';
+import { RequiredComponent } from '../../components/required/required.component';
+import { CommonModule } from '@angular/common';
+import { TranslocoService } from '@jsverse/transloco';
+import { PrimengModule } from '../../modules/primeng.module';
+import { Editor } from 'primeng/editor';
+import { Tooltip } from 'primeng/tooltip';
+
+@Component({
+    selector: 'spiderly-editor',
+    templateUrl: './spiderly-editor.component.html',
+    styles: [],
+    imports: [
+        CommonModule,
+        ReactiveFormsModule,
+        FormsModule,
+        PrimengModule,
+        RequiredComponent
+    ]
+})
+export class SpiderlyEditorComponent extends BaseControl implements OnInit {
+    @ViewChild(Editor) editor: Editor;
+    @ViewChild(Tooltip) tooltip: Tooltip;
+
+    constructor(
+        protected override translocoService: TranslocoService,
+    ) { 
+        super(translocoService);
+    }
+
+    override ngOnInit(){
+        super.ngOnInit();
+    }
+
+    onClick(){
+        let editableArea: HTMLElement = this.editor.el.nativeElement.querySelector('.ql-editor');
+        
+        editableArea.onblur = () => {
+            this.control.markAsDirty();
+            this.tooltip.deactivate();
+        };
+
+        editableArea.onfocus = () => {
+            if (this.errorMessageTooltipEvent == 'focus' ) {
+                this.tooltip.activate();
+            }
+        };
+
+        editableArea.onmouseover = () => {
+            if (this.errorMessageTooltipEvent == 'hover' ) {
+                this.tooltip.activate();
+            }
+        }
+    }
+
+}

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

@@ -0,0 +1,54 @@
+<ng-container *transloco="let t">
+    <div class="flex flex-column gap-2">
+        <div *ngIf="getTranslatedLabel() != '' && getTranslatedLabel() != null">
+            <label>{{getTranslatedLabel()}}</label>
+            <!-- FT: It's okay for this control, because for the custom uploads where we are not initializing the control from the backend, there is no need for formControl. -->
+            <required *ngIf="control?.required || required"></required>
+        </div>
+
+        <p-fileUpload 
+        [files]="files" 
+        [disabled]="disabled" 
+        [name]="control?.label ?? label" 
+        [multiple]="multiple" 
+        [accept]="acceptedFileTypesCommaSeparated" 
+        [maxFileSize]="1000000" 
+        (onSelect)="filesSelected($event)"
+        [class]="control?.invalid && control?.dirty ? 'control-error-border' : ''"
+        >
+            <ng-template pTemplate="header" let-files let-chooseCallback="chooseCallback" let-clearCallback="clearCallback" let-uploadCallback="uploadCallback">
+                <div class="flex flex-wrap justify-content-between align-items-center flex-1 gap-2">
+                    <div class="flex gap-2">
+                        <spiderly-button [disabled]="disabled" (onClick)="choose($event, chooseCallback)" icon="pi pi-upload" [rounded]="true" [outlined]="true" />
+                        <!-- <p-button (onClick)="clearCallback()" icon="pi pi-times" [rounded]="true" [outlined]="true" severity="danger" [disabled]="!files || files.length === 0" /> -->
+                    </div>
+                </div>
+            </ng-template>
+            <ng-template pTemplate="content" let-files let-removeFileCallback="removeFileCallback">
+                <div *ngIf="files?.length > 0">
+                    <div class="flex justify-content-center p-0 gap-5">
+                        <div *ngFor="let file of files; let index = index" class="card m-0 px-3 py-3 flex flex-column align-items-center gap-3" style="justify-content: center; overflow: hidden;">
+                            <div *ngIf="isImageFileType(file.type)" class="image-container">
+                                <img role="presentation" [src]="file.objectURL"/>
+                            </div>
+                            <div *ngIf="isExcelFileType(file.type)" class="excel-container">
+                                <div class="excel-details">
+                                    <i class="pi pi-file-excel" style="color: green; margin-right: 4px;"></i>
+                                    <span class="file-name">{{ file.name }}</span>
+                                </div>
+                            </div>
+                            <spiderly-button [disabled]="disabled" icon="pi pi-times" (onClick)="fileRemoved(removeFileCallback, index)" [outlined]="true" [rounded]="true" severity="danger" />
+                        </div>
+                    </div>
+                </div>
+            </ng-template>
+            <ng-template pTemplate="file"> </ng-template>
+            <ng-template pTemplate="empty">
+                <div class="flex align-items-center justify-content-center flex-column">
+                    <i class="pi pi-cloud-upload border-2 border-circle p-5 text-8xl text-400 border-400"></i>
+                    <p class="mt-4 mb-0">{{t('DragAndDropFilesHereToUpload')}}</p>
+                </div>
+            </ng-template>
+        </p-fileUpload>
+    </div>
+</ng-container>

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

@@ -0,0 +1,123 @@
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { BaseControl } from '../base-control';
+import { ReactiveFormsModule, FormsModule } from '@angular/forms';
+import { RequiredComponent } from '../../components/required/required.component';
+import { CommonModule } from '@angular/common';
+import { FileSelectEvent } from 'primeng/fileupload';
+import { getMimeTypeForFileName, isExcelFileType, isImageFileType } from '../../services/helper-functions';
+import { TranslocoDirective, TranslocoService } from '@jsverse/transloco';
+import { BaseEntity } from '../../entities/base-entity';
+import { PrimengModule } from '../../modules/primeng.module';
+import { SpiderlyButtonComponent } from '../../components/spiderly-buttons/spiderly-button/spiderly-button.component';
+
+@Component({
+    selector: 'spiderly-file',
+    templateUrl: './spiderly-file.component.html',
+    styles: [],
+    imports: [
+        CommonModule,
+        ReactiveFormsModule,
+        FormsModule,
+        PrimengModule,
+        RequiredComponent,
+        SpiderlyButtonComponent,
+        TranslocoDirective
+    ]
+})
+export class SpiderlyFileComponent extends BaseControl implements OnInit {
+    @Output() onFileSelected = new EventEmitter<SpiderlyFileSelectEvent>();
+    @Output() onFileRemoved = new EventEmitter<null>();
+    @Input() objectId: number;
+    @Input() fileData: string;
+    @Input() acceptedFileTypes: Array<'image/*' | 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' | 'application/vnd.ms-excel' | '.xlsx' | '.xls'> = ['image/*'];
+    @Input() required: boolean; // It's okay for this control, because for the custom uploads where we are not initializing the control from the backend, there is no need for formControl.
+    @Input() multiple: boolean = false;
+    
+    acceptedFileTypesCommaSeparated: string;
+    @Input() files: File[] = [];
+
+    constructor(
+        protected override translocoService: TranslocoService,
+    ) { 
+        super(translocoService);
+    }
+
+    override ngOnInit(){
+        if (this.control?.value != null && this.fileData != null) {
+            const file = this.base64ToFile(this.fileData);
+            this.files.push(file);
+        }
+
+        this.acceptedFileTypesCommaSeparated = this.acceptedFileTypes.join(',');
+
+        super.ngOnInit();
+    }
+
+    filesSelected(event: FileSelectEvent){
+        const file = event.files[0];
+
+        const formData: FormData = new FormData();
+        formData.append('file', file, `${this.objectId}-${file.name}`);
+        
+        this.onFileSelected.next(new SpiderlyFileSelectEvent({file: file, formData: formData}));
+    }
+
+    choose(event, chooseCallback){
+        chooseCallback();
+    }
+    
+    fileRemoved(removeFileCallback, index: number){
+        removeFileCallback(index);
+        this.control?.setValue(null);
+        this.onFileRemoved.next(null);
+    }
+
+    // Put inside global functions if you need it
+    base64ToFile(base64String: string){
+        const [header, base64Content] = base64String.split(';base64,');
+        const fileName = header.split('=')[1];
+        const mimeType = getMimeTypeForFileName(fileName);
+
+        const byteCharacters = atob(base64Content);
+        const byteNumbers = new Uint8Array(byteCharacters.length);
+
+        for (let i = 0; i < byteCharacters.length; i++) {
+            byteNumbers[i] = byteCharacters.charCodeAt(i);
+        }
+
+        const blob = new Blob([byteNumbers], { type: mimeType });
+        const file = new File([blob], fileName, { type: mimeType });
+
+        return file;
+    }
+
+    isImageFileType(mimeType: string): boolean {
+        return isImageFileType(mimeType);
+    }
+
+    isExcelFileType(mimeType: string): boolean {
+        return isExcelFileType(mimeType);
+    }
+
+}
+
+export class SpiderlyFileSelectEvent extends BaseEntity
+{
+    file?: File;
+    formData?: FormData;
+
+    constructor(
+    {
+        file,
+        formData,
+    }:{
+        file?: File;
+        formData?: FormData;
+    } = {}
+    ) {
+        super('SpiderlyFileSelectEvent'); 
+
+        this.file = file;
+        this.formData = formData;
+    }
+}

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

@@ -0,0 +1,30 @@
+<ng-container *transloco="let t">
+  <div class="flex flex-column gap-2">
+    <div>
+      <label>{{getTranslatedLabel()}}</label>
+      <required *ngIf="control?.required"></required>
+    </div>
+
+    <!-- Don't support p-inputgroup -->
+    <!-- Showing label fix: https://github.com/primefaces/primeng/issues/17332#issuecomment-2922861294 -->
+    <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"
+    (completeMethod)="search($event)"
+    [forceSelection]="true"
+    [multiple]="true"
+    [dropdown]="false"
+    [showClear]="true"
+    (onHide)="dropdownMarkAsDirty()"
+    [completeOnFocus]="true"
+    dropdownIcon="pi pi-plus"
+    [fluid]="true"
+    [style]="{'width': '100%'}"
+    >
+    </p-autocomplete>
+  </div>
+</ng-container>

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

@@ -0,0 +1,38 @@
+import { Component, 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-multiautocomplete',
+    templateUrl: './spiderly-multiautocomplete.component.html',
+    styles: [],
+    imports: [
+        ReactiveFormsModule,
+        FormsModule,
+        PrimengModule,
+        CommonModule,
+        RequiredComponent,
+        TranslocoDirective,
+    ]
+})
+export class SpiderlyMultiAutocompleteComponent extends BaseAutocompleteControl implements OnInit {
+    constructor(
+        protected override translocoService: TranslocoService,
+    ) { 
+        super(translocoService);
+    }
+
+    override ngOnInit(){
+        super.ngOnInit();
+    }
+
+    search(event: AutoCompleteCompleteEvent){
+        this.onTextInput.next(event);
+    }
+
+}

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

@@ -0,0 +1,23 @@
+<div class="flex flex-column gap-2">
+  <div>
+    <label>{{getTranslatedLabel()}}</label>
+    <required *ngIf="control?.required"></required>
+  </div>
+  <p-multiSelect
+  *ngIf="control"
+  [pTooltip]="getValidationErrrorMessages()" [tooltipEvent]="errorMessageTooltipEvent" tooltipPosition="bottom" [tooltipDisabled]="control.valid" tooltipStyleClass="spiderly-tooltip-invalid"
+  [id]="label"
+  [formControl]="control"
+  [options]="options"
+  optionLabel="label"
+  optionValue="code"
+  display="chip"
+  [maxSelectedLabels]="20"
+  [placeholder]="placeholder"
+  [fluid]="true"
+  appendTo="body"
+  />
+  <!-- [virtualScroll]="true" FT: I think that this is not doing anything, check -->
+  <!-- (onFilter)="search($event)" FT: While they don't implement lazy load like here: https://github.com/yelhouti/primeng/blob/8.0.0-rc2/src/app/components/multiselect/multiselect.ts
+    we need to use this and dropdown control only on the client -->
+</div>

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

@@ -0,0 +1,32 @@
+import { Component, OnInit } from '@angular/core';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { CommonModule } from '@angular/common';
+import { RequiredComponent } from '../../components/required/required.component';
+import { BaseDropdownControl } from '../base-dropdown-control';
+import { TranslocoService } from '@jsverse/transloco';
+import { PrimengModule } from '../../modules/primeng.module';
+
+@Component({
+    selector: 'spiderly-multiselect',
+    templateUrl: './spiderly-multiselect.component.html',
+    styles: [],
+    imports: [
+        CommonModule,
+        ReactiveFormsModule,
+        FormsModule,
+        PrimengModule,
+        RequiredComponent
+    ]
+})
+export class SpiderlyMultiSelectComponent extends BaseDropdownControl implements OnInit {
+    
+    constructor(
+        protected override translocoService: TranslocoService,
+    ) { 
+        super(translocoService);
+    }
+
+    override ngOnInit(){
+        super.ngOnInit();
+    }
+}

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

@@ -0,0 +1,19 @@
+<div class="flex flex-column gap-2">
+  <div *ngIf="showLabel">
+    <label>{{getTranslatedLabel()}}</label>
+    <required *ngIf="control?.required"></required>
+  </div>
+  <p-inputNumber
+    *ngIf="control"
+    [pTooltip]="getValidationErrrorMessages()" [tooltipEvent]="errorMessageTooltipEvent" tooltipPosition="bottom" [tooltipDisabled]="control.valid" tooltipStyleClass="spiderly-tooltip-invalid"
+    [formControl]="control"
+    [id]="control.label"
+    (onBlur)="control.markAsDirty()"
+    [prefix]="prefix"
+    [style]="{'width':'100%'}"
+    [inputStyle]="{'width':'100%'}"
+    [showButtons]="showButtons"
+    buttonLayout="horizontal"
+    [maxFractionDigits]="maxFractionDigits"
+    />
+  </div>