ngx-wapp-components 1.0.49 → 1.0.51

package/src/lib/edit/w-edit-input-textarea/w-edit-input-textarea.component.ts

@@ -0,0 +1,71 @@
+import { Component, EventEmitter, Input, Optional, Output, Self, forwardRef } from '@angular/core';
+import { FormControl, FormControlName, NG_VALUE_ACCESSOR, NgControl, Validators } from '@angular/forms';
+import { SizeType } from '../../shared/enums/enum';
+@Component({
+  selector: 'w-edit-input-textarea',
+  templateUrl: './w-edit-input-textarea.component.html',
+  styleUrls: ['./w-edit-input-textarea.component.scss'],
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => WEditInputTextareaComponent),
+      multi: true
+    }
+  ]
+})
+export class WEditInputTextareaComponent {
+
+  @Input('label') label!: string;
+  @Input('placeholder') placeholder: string = "";
+
+  @Input('rows') rows: number = 4;
+  @Input('minlength') minlength!: number;
+  @Input('maxlength') maxlength!: number;
+  @Input('autoResize') autoResize: boolean = true;
+
+  @Input('required') required: boolean = false;
+  @Input('disabled') disabled: boolean = false;
+  @Input('successMessage') successMessage: string = "";
+  @Input('requiredErrorDescription') requiredErrorDescription: string = "Data is required";
+  @Input('minlengthErrorDescription') minlengthErrorDescription: string = "Min length warning";
+  @Input('maxlengthErrorDescription') maxlengthErrorDescription: string = "Max length warning";
+
+  @Input('size') size: string = "medium";
+
+  @Input('formControl') formControl!: FormControl | null;
+
+  value: string = '';
+
+  isTouched: boolean = false;
+  onChange = (_: any) => { }
+  onTouch = () => { }
+
+  writeValue(value: any): void {
+    this.value = value;
+  }
+
+  registerOnChange(onChange: any): void {
+    this.onChange = onChange;
+  }
+
+  registerOnTouched(onTouch: any): void {
+    this.onTouch = onTouch;
+  }
+
+  setDisabledState?(isDisabled: boolean): void {
+    this.disabled = isDisabled;
+  }
+
+  onValueChanged() {
+    this.onChange(this.value);
+    this.onTouch();
+  }
+
+  getSizeName(value: number): string {
+    return SizeType[value];
+  }
+
+  get sizeType(): typeof SizeType {
+    return SizeType;
+  }
+}

package/src/lib/edit/w-edit-multiselect/w-edit-multiselect.component.html

@@ -0,0 +1,59 @@
+<div *ngIf="formControl; else noNgControl" class="w-input-multiselect-field p-fluid field">
+    <label *ngIf="getSizeName(sizeType.medium) == size && (label != undefined && label.length > 0)" class="w-input-multiselect-label body" [ngClass]="{'w-input-multiselect-label-disabled' : disabled}">{{label}}</label>
+    <div *ngIf="getSizeName(sizeType.medium) == size && (label != undefined && label == '')" class="w-generic-input-no-label-height"></div>
+    <p-multiSelect *ngIf="getSizeName(sizeType.medium) == size" class="w-input-multiselect" 
+        [options]="options" 
+        display="chip" 
+        [optionLabel]="optionLabel" 
+        [optionValue]="optionValue" 
+        [placeholder]="placeholder" 
+        [required]="required" 
+        [formControl]="formControl"
+        [appendTo]="appendTo"
+        [showClear]="showClear" 
+        (onChange)="onOptionSelectedForm($event)">
+    </p-multiSelect>
+    <p-multiSelect *ngIf="getSizeName(sizeType.small) == size" class="w-input-multiselect-small" 
+        [options]="options" 
+        display="chip" 
+        [optionLabel]="optionLabel" 
+        [optionValue]="optionValue" 
+        [placeholder]="placeholder"
+        [required]="required" 
+        [formControl]="formControl"
+        [appendTo]="appendTo"
+        [showClear]="showClear" 
+        (onChange)="onOptionSelectedForm($event)">
+    </p-multiSelect>
+    <small *ngIf="getSizeName(sizeType.medium) == size && formControl.dirty && formControl.hasError('required')" class="w-error-message-container w-full w-error-message p-error block">{{errorDescription}}</small>
+</div>
+<ng-template #noNgControl>
+    <div class="w-input-multiselect-field p-fluid field">
+        <label *ngIf="getSizeName(sizeType.medium) == size && (label != undefined && label.length > 0)" class="w-input-multiselect-label body" [ngClass]="{'w-input-multiselect-label-disabled' : disabled}">{{label}}</label>
+        <div *ngIf="getSizeName(sizeType.medium) == size && (label != undefined && label == '')" class="w-generic-input-no-label-height"></div>
+        <p-multiSelect *ngIf="getSizeName(sizeType.medium) == size" class="w-input-multiselect" 
+            [options]="options" 
+            display="chip" 
+            [optionLabel]="optionLabel" 
+            [optionValue]="optionValue" 
+            [placeholder]="placeholder" 
+            [disabled]="disabled" 
+            [(ngModel)]="ngModelValue" 
+            (ngModelChange)="onOptionSelected()" 
+            [appendTo]="appendTo"
+            [showClear]="showClear">    
+        </p-multiSelect>
+        <p-multiSelect *ngIf="getSizeName(sizeType.small) == size" class="w-input-multiselect-small" 
+            [options]="options" 
+            display="chip" 
+            [optionLabel]="optionLabel" 
+            [optionValue]="optionValue" 
+            [placeholder]="placeholder"
+            [disabled]="disabled" 
+            [(ngModel)]="ngModelValue" 
+            (ngModelChange)="onOptionSelected()" 
+            [appendTo]="appendTo"
+            [showClear]="showClear">
+        </p-multiSelect>
+    </div>
+</ng-template>

package/src/lib/edit/w-edit-multiselect/w-edit-multiselect.component.scss

@@ -0,0 +1,227 @@
+@import '../../../styles/_variables.scss';
+
+.w-input-multiselect-field{
+    margin: $spacingZero
+}
+
+.w-input-multiselect-label{
+    padding: $spacingXS $spacingXS $spacingS $spacingXS;
+    margin: $spacingZero;
+    color: $black846;
+    @extend .input-generic-label;
+}
+
+.w-input-multiselect-label-disabled.w-input-multiselect-label{
+    color: $black400;
+}
+
+:host ::ng-deep .w-input-multiselect .p-multiselect{
+    border: $borderWidth solid $black200;
+    border-radius: $borderRadius;
+}
+
+:host ::ng-deep .w-input-multiselect .p-multiselect:hover{
+    border: $borderWidth solid $secondary400;
+}
+
+:host ::ng-deep .w-input-multiselect .p-multiselect.p-focus{
+    @extend .focus;
+    border: $borderWidth solid $secondary50;
+}
+
+:host ::ng-deep .w-input-multiselect .p-multiselect-label{
+    padding: calc($spacingXS - $borderWidth) 0px calc($spacingXS - $borderWidth) $spacingM;
+    @extend .input-generic;
+    color: $black400;
+}
+
+:host ::ng-deep .w-input-multiselect .p-multiselect.p-multiselect-chip .p-multiselect-label{
+    padding: calc($spacingXS - $borderWidth) 0px calc($spacingXS - $borderWidth) $spacingM;
+}
+
+:host ::ng-deep .w-input-multiselect .p-multiselect-token{
+    height: $spacingXL; 
+    padding: $spacingXSM $spacingS;
+    @extend .tag-generic;
+}
+
+:host ::ng-deep .w-input-multiselect .p-multiselect-panel{
+    border: $borderWidth solid $black200;
+}
+
+:host ::ng-deep .w-input-multiselect .p-multiselect-panel .p-multiselect-items{
+    padding: calc($spacingXS - $borderWidth) calc($spacingXS - $borderWidth) calc($spacingM - $borderWidth);
+}
+
+:host ::ng-deep .w-input-multiselect .p-multiselect-panel .p-multiselect-items .p-multiselect-item{
+    padding: $spacingXS $spacingM;
+    margin-bottom: $spacingXXS;
+    @extend .input-generic;
+}
+
+:host ::ng-deep .w-input-multiselect .p-multiselect-panel .p-multiselect-items .p-multiselect-item:hover{
+    background: $primary50;
+    border-radius: $borderRadius;
+}
+
+:host ::ng-deep .w-input-multiselect .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight{
+    background: $primary50;
+    border-radius: $borderRadius;
+}
+
+:host ::ng-deep .w-input-multiselect .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled):hover{
+    background: $primary50;
+    border-radius: $borderRadius;
+}
+
+:host ::ng-deep .w-input-multiselect .p-multiselect-panel .p-multiselect-items .p-multiselect-item .p-checkbox{
+    width: 24px;
+    margin-right: $spacingS;
+}
+
+:host ::ng-deep .w-input-multiselect .p-checkbox .p-checkbox-box {
+    border: $borderWidth solid $black200;
+    width: $spacingXL;
+    height: $spacingXL;
+    color: $black200;
+    border-radius: $checkboxBorderRadius;
+    align-self: center;
+}
+
+:host ::ng-deep .w-input-multiselect .p-checkbox .p-checkbox-box .p-checkbox-icon{
+    @extend .icon-small-x-size;
+    font-weight: bold;
+}
+
+:host ::ng-deep .w-input-multiselect .p-checkbox .p-checkbox-box.p-highlight{
+    border-color: $primaryColor !important;
+    background: $primaryColor;
+    color: $primaryColor !important;
+}
+
+:host ::ng-deep .w-input-multiselect .p-multiselect-panel .p-multiselect-header{
+    padding: calc($spacingXS - $borderWidth) calc($spacingXL - $borderWidth);
+}
+
+:host ::ng-deep .w-input-multiselect .p-disabled{
+    background: $black100;
+    opacity: 1;
+}
+
+:host ::ng-deep .w-input-multiselect .p-disabled .p-inputtext{
+    color: $black400;
+}
+
+:host ::ng-deep p-multiselect.w-input-multiselect.ng-dirty.ng-invalid > .p-multiselect {
+    border-color: $statusError3;
+}
+
+.w-error-message-container{
+    height: $spacingXXXL;
+}
+
+.w-error-message{
+    @extend .caption;
+    color: $statusError1;
+    padding: $spacingXS;
+    margin-top: $spacingZero;
+}
+
+:host ::ng-deep .w-input-multiselect-small .p-multiselect{
+    border: $borderWidth solid $black200;
+    border-radius: $borderRadius;
+}
+
+:host ::ng-deep .w-input-multiselect-small .p-multiselect:hover{
+    border: $borderWidth solid $secondary400;
+}
+
+:host ::ng-deep .w-input-multiselect-small .p-multiselect.p-focus{
+    @extend .focus;
+    border: $borderWidth solid $secondary50;
+}
+
+:host ::ng-deep .w-input-multiselect-small .p-multiselect-label{
+    padding: calc($spacingXS - $borderWidth) $spacingZero calc($spacingXS - $borderWidth) $spacingS;
+    @extend .input-generic-small;
+    color: $black400;
+}
+
+:host ::ng-deep .w-input-multiselect-small .p-multiselect.p-multiselect-chip .p-multiselect-label{
+    padding: calc($spacingXS - $borderWidth) $spacingZero calc($spacingXS - $borderWidth) $spacingS;
+}
+
+:host ::ng-deep .w-input-multiselect-small .p-multiselect-token{
+    height: $spacingM; 
+    padding: calc($spacingXXS - $borderWidth) $spacingS;
+    border-radius: $borderRadius;
+    border-width: $borderWidth;
+    @extend .tag-generic-small;
+
+    .p-multiselect-token-icon{
+        @extend .icon-small-x-size;
+    }
+}
+
+:host ::ng-deep .w-input-multiselect-small .p-multiselect-panel{
+    border: $borderWidth solid $black200;
+}
+
+:host ::ng-deep .w-input-multiselect-small .p-multiselect-panel .p-multiselect-items{
+    padding: $spacingXS;
+}
+
+:host ::ng-deep .w-input-multiselect-small .p-multiselect-panel .p-multiselect-items .p-multiselect-item{
+    padding: calc($spacingXS - $borderWidth);
+    margin-bottom: $spacingXXS;
+    @extend .input-generic-small;
+}
+
+:host ::ng-deep .w-input-multiselect-small .p-multiselect-panel .p-multiselect-items .p-multiselect-item:hover{
+    background: $primary50;
+    border-radius: $borderRadius;
+}
+
+:host ::ng-deep .w-input-multiselect-small .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight{
+    background: $primary50;
+    border-radius: $borderRadius;
+}
+
+:host ::ng-deep .w-input-multiselect-small .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled):hover{
+    background: $primary50;
+    border-radius: $borderRadius;
+}
+
+:host ::ng-deep .w-input-multiselect-small .p-multiselect-panel .p-multiselect-items .p-multiselect-item .p-checkbox{
+    margin-right: $spacingXS;
+    width: $spacingM;
+}
+
+:host ::ng-deep .w-input-multiselect-small .p-checkbox .p-checkbox-box {
+    border: $borderWidth solid $black200;
+    width: $spacingM;
+    height: $spacingM;
+    color: $black200;
+    border-radius: $checkboxBorderRadius;
+    align-self: center;
+}
+
+:host ::ng-deep .w-input-multiselect-small .p-checkbox .p-checkbox-box .p-checkbox-icon{
+    @extend .icon-small-size;
+    font-weight: bold;
+}
+
+:host ::ng-deep .w-input-multiselect-small .p-checkbox .p-checkbox-box.p-highlight{
+    border-color: $primaryColor !important;
+    background: $primaryColor;
+    color: $primaryColor !important;
+}
+
+:host ::ng-deep .w-input-multiselect-small .p-multiselect-panel .p-multiselect-header{
+    padding: calc($spacingXS - $borderWidth) calc($spacingM - $borderWidth);
+}
+
+:host ::ng-deep .w-input-multiselect-small .p-disabled{
+    background: $black100;
+    opacity: 1;
+}

package/src/lib/edit/w-edit-multiselect/w-edit-multiselect.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { WEditMultiselectComponent } from './w-edit-multiselect.component';
+
+describe('WEditMultiselectComponent', () => {
+  let component: WEditMultiselectComponent;
+  let fixture: ComponentFixture<WEditMultiselectComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ WEditMultiselectComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(WEditMultiselectComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/lib/edit/w-edit-multiselect/w-edit-multiselect.component.ts

@@ -0,0 +1,81 @@
+import { Component, EventEmitter, Input, OnInit, Output, forwardRef } from '@angular/core';
+import { FormControl, NG_VALUE_ACCESSOR } from '@angular/forms';
+import { ControlValueAccessor } from '@angular/forms';
+import { SizeType } from '../../shared/enums/enum';
+
+@Component({
+  selector: 'w-edit-multiselect',
+  templateUrl: './w-edit-multiselect.component.html',
+  styleUrls: ['./w-edit-multiselect.component.scss'],
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => WEditMultiselectComponent),
+      multi: true
+    }
+  ]
+})
+export class WEditMultiselectComponent implements OnInit, ControlValueAccessor{
+  @Input('label') label!: string;
+  @Input('placeholder') placeholder = "";
+  @Input('disabled') disabled: boolean = false;
+  @Input('required') required: boolean = false;
+  @Input('size') size: string = "medium";
+  @Input('options') options: any;
+  @Input('optionLabel') optionLabel!: string;
+  @Input('optionValue') optionValue!: string;
+  @Input('appendTo') appendTo!: string;
+  @Input('showClear') showClear: boolean = true;
+  @Input('formControl') formControl!: FormControl | null;
+  @Input('requiredErrorDescription') errorDescription: string = "Select an option is required";
+
+  @Output('onChange') onChangeEvent: EventEmitter<any> = new EventEmitter();
+
+  sizeType: typeof SizeType = SizeType;
+
+  onChange: any = () => {};
+  onTouch: any = () => {};
+
+  ngModelValue: any;
+
+  ngOnInit(): void {
+  }
+
+  writeValue(value: any): void {
+    this.ngModelValue = value;
+  }
+
+  registerOnChange(fn: any): void {
+    this.onChange = fn;
+  }
+
+  registerOnTouched(fn: any): void {
+    this.onTouch = fn;
+  }
+  
+  setDisabledState(isDisabled: boolean): void {
+    this.disabled = isDisabled;
+  }
+
+  onOptionSelected(){
+    this.onChange(this.ngModelValue);
+    this.onTouch();
+
+    this.onChangeEvent.emit(this.ngModelValue);
+  }
+
+  onOptionSelectedForm(event: any){
+    this.onChangeEvent.emit(event.value);
+  }
+
+  onInputBlur(event: Event){
+    const newValue = (event.target as HTMLInputElement).value;
+    this.ngModelValue = newValue;
+    this.onChange(this.ngModelValue);
+    this.onTouch();
+  }
+
+  getSizeName(value: number): string {
+    return SizeType[value];
+  }
+}

package/src/lib/edit/w-edit-select/w-edit-select.component.html

@@ -0,0 +1,56 @@
+<div *ngIf="formControl; else noNgControl" class="w-input-select-field p-fluid field">
+    <label *ngIf="getSizeName(sizeType.medium) == size && (label != undefined && label.length > 0)" class="w-input-select-label" htmlFor="state" [ngClass]="{'w-input-select-label-disabled' : disabled}">{{label}}</label>
+    <div *ngIf="getSizeName(sizeType.medium) == size && (label != undefined && label == '')" class="w-generic-input-no-label-height"></div>
+    <p-dropdown *ngIf="getSizeName(sizeType.medium) == size" class="w-edit-select-input" 
+        [ngClass]="{'ng-invalid ng-dirty': formControl.dirty && formControl.hasError('required')}"
+        [options]="options" 
+        [optionLabel]="optionLabel" 
+        [optionValue]="optionValue" 
+        [placeholder]="placeholder" 
+        [filter]="filter"
+        [showClear]="showClear" 
+        [required]="required"
+        [formControl]="formControl" 
+        [appendTo]="appendTo" 
+        (onChange)="onOptionSelectForm($event)">
+    </p-dropdown>
+    <p-dropdown *ngIf="getSizeName(sizeType.small) == size" class="w-edit-select-input-small" 
+        [ngClass]="{'ng-invalid ng-dirty': formControl.dirty && formControl.hasError('required')}"
+        [options]="options" 
+        [optionLabel]="optionLabel" 
+        [optionValue]="optionValue" 
+        [filter]="filter"
+        [placeholder]="placeholder" 
+        [showClear]="showClear"
+        [required]="required"
+        [formControl]="formControl"
+        [appendTo]="appendTo" 
+        (onChange)="onOptionSelectForm($event)">
+    </p-dropdown>
+    <small *ngIf="getSizeName(sizeType.medium) == size && formControl.dirty && formControl.hasError('required')" 
+    class="w-error-message-container w-full w-error-message p-error block">{{errorDescription}}</small> 
+</div>
+<ng-template #noNgControl>
+    <div class="w-input-select-field p-fluid field">
+        <label *ngIf="getSizeName(sizeType.medium) == size && (label != undefined && label.length > 0)" class="w-input-select-label" htmlFor="state" [ngClass]="{'w-input-select-label-disabled' : disabled}">{{label}}</label>
+        <div *ngIf="getSizeName(sizeType.medium) == size && (label != undefined && label == '')" class="w-generic-input-no-label-height"></div>
+        <p-dropdown *ngIf="getSizeName(sizeType.medium) == size" class="w-edit-select-input" 
+            [options]="options" 
+            [optionLabel]="optionLabel" 
+            [optionValue]="optionValue" 
+            [filter]="filter"
+            [placeholder]="placeholder" 
+            [disabled]="disabled" [(ngModel)]="ngModelValue" (ngModelChange)="onOptionSelected()" [showClear]="showClear"
+            [appendTo]="appendTo">
+        </p-dropdown>
+        <p-dropdown *ngIf="getSizeName(sizeType.small) == size" class="w-edit-select-input-small" 
+            [options]="options" 
+            [filter]="filter"
+            [optionLabel]="optionLabel" 
+            [optionValue]="optionValue" 
+            [placeholder]="placeholder" 
+            [disabled]="disabled" [(ngModel)]="ngModelValue" (ngModelChange)="onOptionSelected()" [showClear]="showClear"
+            [appendTo]="appendTo">
+        </p-dropdown>
+    </div>
+</ng-template>

package/src/lib/edit/w-edit-select/w-edit-select.component.scss

@@ -0,0 +1,166 @@
+@import '../../../styles/_variables.scss';
+
+.w-input-select-field{
+    margin: $spacingZero;
+}
+
+.w-input-select-label{
+    padding: $spacingXS $spacingXS $spacingS $spacingXS;
+    margin: $spacingZero;
+    color: $black846;
+    @extend .input-generic-label;
+}
+
+.w-input-select-label-disabled.w-input-select-label{
+    color: $black400;
+}
+
+:host ::ng-deep .w-edit-select-input .p-dropdown{
+    border-width: $borderWidth;
+    border-radius: $borderRadius;
+    border-color: $black200;   
+}
+
+:host ::ng-deep .w-edit-select-input .p-inputtext{
+    @extend .input-generic;
+    padding: calc($spacingXS - $borderWidth) 0px ($spacingXS - $borderWidth) $spacingM;
+}
+
+:host ::ng-deep .w-edit-select-input .p-dropdown:not(.p-disabled):hover{
+    border: $borderWidth solid $secondary400;
+}
+
+:host ::ng-deep .w-edit-select-input .p-dropdown:not(.p-disabled).p-focus {
+    @extend .focus;
+    border: $borderWidth solid $secondary50;
+}
+
+:host ::ng-deep .w-edit-select-input .p-dropdown .p-placeholder {
+    color: $black400;
+}
+
+:host ::ng-deep .w-edit-select-input .p-dropdown .p-dropdown-trigger{
+    width: 24px;
+    padding: $spacingXS $spacingXL $spacingXS $spacingXL;
+}
+
+:host ::ng-deep .w-edit-select-input .p-dropdown-panel{
+    padding: $spacingXS $spacingXS $spacingM $spacingXS;
+}
+
+:host ::ng-deep .w-edit-select-input .p-dropdown-panel .p-dropdown-items{
+    padding: $spacingZero;
+}
+
+:host ::ng-deep .w-edit-select-input .p-dropdown-panel .p-dropdown-items .p-dropdown-item{
+    padding: $spacingXS $spacingM;
+    margin-bottom: $spacingXXS;
+    @extend .subtitle2;
+    font-weight: 600;
+}
+
+:host ::ng-deep .w-edit-select-input .p-dropdown-panel .p-dropdown-items .p-dropdown-item:hover{
+    background: $primary50;
+    border-radius: $borderRadius;
+}
+
+:host ::ng-deep .w-edit-select-input .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight{
+    background: $primary50;
+    border-radius: $borderRadius;
+}
+
+:host ::ng-deep .w-edit-select-input .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight{
+    background: $primary50;
+    border-radius: $borderRadius;
+    color: $black;
+}
+
+:host ::ng-deep .w-edit-select-input .p-disabled{
+    background: $black100;
+    opacity: 1;
+}
+
+:host ::ng-deep .w-edit-select-input .p-disabled .p-inputtext{
+    color: $black400;
+    font-weight: 600;
+}
+
+:host ::ng-deep p-dropdown.w-edit-select-input.ng-dirty.ng-invalid > .p-dropdown {
+    border-color: $statusError3;
+}
+
+.w-error-message-container{
+    height: $spacingXXXL;
+}
+
+.w-error-message{
+    @extend .caption;
+    color: $statusError1;
+    padding: $spacingXS;
+    margin-top: $spacingZero;
+}
+
+:host ::ng-deep .w-edit-select-input-small .p-dropdown{
+    border-width: $borderWidth;
+    border-radius: $borderRadius;
+    border-color: $black200;
+}
+
+:host ::ng-deep .w-edit-select-input-small .p-inputtext{
+    padding: $spacingZero $spacingZero $spacingZero $spacingS;
+    align-self: center;
+    @extend .input-generic-small;
+}
+
+:host ::ng-deep .w-edit-select-input-small .p-dropdown:not(.p-disabled):hover{
+    border: $borderWidth solid $secondary400;
+}
+
+:host ::ng-deep .w-edit-select-input-small .p-dropdown:not(.p-disabled).p-focus {
+    @extend .focus;
+    border: $borderWidth solid $secondary50;
+}
+
+:host ::ng-deep .w-edit-select-input-small .p-dropdown .p-placeholder {
+    color: $black400;
+}
+
+:host ::ng-deep .w-edit-select-input-small .p-dropdown .p-dropdown-trigger{
+    width: auto;
+    height: 28px;
+    padding-right: $spacingS;
+}
+
+:host ::ng-deep .w-edit-select-input-small .p-dropdown-panel{
+    padding: $spacingXS;
+}
+
+:host ::ng-deep .w-edit-select-input-small .p-dropdown-panel .p-dropdown-items{
+    padding: $spacingZero;
+}
+
+:host ::ng-deep .w-edit-select-input-small .p-dropdown-panel .p-dropdown-items .p-dropdown-item{
+    padding: $spacingXS;
+    margin-bottom: $spacingXXS;
+    font-weight: 600;
+}
+
+:host ::ng-deep .w-edit-select-input-small .p-dropdown-panel .p-dropdown-items .p-dropdown-item:hover{
+    background: $primary50;
+    border-radius: $borderRadius;
+}
+
+:host ::ng-deep .w-edit-select-input-small .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight{
+    background: $primary50;
+    border-radius: $borderRadius;
+    color: $black;
+}
+
+:host ::ng-deep .w-edit-select-input-small .p-disabled{
+    background: $black100;
+    opacity: 1;
+}
+
+:host ::ng-deep .w-edit-select-input-small .p-disabled .p-inputtext{
+    color: $black400;
+}