ngx-wapp-components 1.8.2 → 1.8.4

package/src/lib/button/w-radio-button/w-radio-button.component.spec.ts

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

package/src/lib/button/w-radio-button/w-radio-button.component.ts

@@ -0,0 +1,73 @@
+import { Component, EventEmitter, Input, OnInit, Optional, Output, Self, forwardRef } from '@angular/core';
+import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
+import { SizeType } from '../../shared/enums/enum';
+
+@Component({
+  selector: 'w-radio-button',
+  templateUrl: './w-radio-button.component.html',
+  styleUrls: ['./w-radio-button.component.scss'],
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => WRadioButtonComponent),
+      multi: true
+    }
+  ]
+})
+export class WRadioButtonComponent implements OnInit, ControlValueAccessor {
+  selectedOption: any;
+  selectedIndex = 0;
+  isDisabled: boolean = false;
+  isTouched : boolean = false;
+
+  @Input('radioGroupElements') radioGroupElements: any[] = [];
+  @Input('required') required: boolean = false;
+  @Input('disabled') disabled: boolean = false;
+  @Input('requiredErrorDescription') requiredErrorDescription: string = "Default required error description";
+  @Input('size') size: string = "medium";
+  
+  @Output('onChange') onChangeEvent: EventEmitter<any> = new EventEmitter();
+
+  formControl: any;
+  ngModelValue: any;
+
+  onChange: any = () => {};
+  onTouch: any = () => {};
+  
+  sizeType: typeof SizeType = SizeType;
+
+  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.isDisabled = isDisabled;
+  }
+
+  onChanged(){
+    this.onChange(this.ngModelValue);
+    this.onTouch();
+
+    this.onChangeEvent.emit(this.ngModelValue);
+  }
+
+  onChangedForm(value: any){
+    this.onChange(value);
+    this.onTouch();
+    this.onChangeEvent.emit(value);
+  }
+
+  getSizeName(value: number): string {
+    return SizeType[value];
+  }
+}

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

@@ -0,0 +1,29 @@
+<ng-container *ngIf="formControl; else noNgControl">
+    <p-selectButton [ngClass]="{'w-button-small' : size == getSizeName(sizeType.small), 
+                                'w-button-medium' : size == getSizeName(sizeType.medium),
+                                'w-button-large' : size == getSizeName(sizeType.large)}"
+                    [options]="stateOptions" 
+                    [formControl]="formControl" 
+                    [disabled]="disabled" 
+                    optionLabel="label" 
+                    optionValue="value" 
+                    [pTooltip]="tooltip" 
+                    [tooltipPosition]="tooltipPosition" 
+                    (onChange)="onButtonChangedForm($event)">
+    </p-selectButton>
+</ng-container>
+<ng-template #noNgControl>
+    <p-selectButton [ngClass]="{'w-button-small' : size == getSizeName(sizeType.small), 
+                                'w-button-medium' : size == getSizeName(sizeType.medium),
+                                'w-button-large' : size == getSizeName(sizeType.large)}"
+                    [options]="stateOptions" 
+                    [(ngModel)]="ngModelValue" 
+                    [disabled]="disabled" 
+                    optionLabel="label" 
+                    optionValue="value" 
+                    [pTooltip]="tooltip" 
+                    [tooltipPosition]="tooltipPosition"
+                    (ngModelChange)="onButtonChanged()">
+    </p-selectButton>
+</ng-template>
+

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

@@ -0,0 +1,64 @@
+@import '../../../styles/_variables.scss';
+
+:host ::ng-deep .w-button-small .p-button {
+	height: 32px;
+    padding: calc($spacingXS - $borderWidth) calc($spacingM - $borderWidth);
+	border-radius: $borderRadius;
+    .p-button-label{
+        @extend .w-button-small-label-text-typography;
+    }
+}
+
+:host ::ng-deep .w-button-medium .p-button {
+	height: 40px;
+    padding: calc($spacingS - $borderWidth) calc($spacingL - $borderWidth);
+	border-radius: $borderRadius;
+    .p-button-label{
+        @extend .w-button-medium-label-text-typography;
+    }
+}
+
+:host ::ng-deep .w-button-large .p-button {
+	height: 56px;
+    padding: calc($spacingM - $borderWidth) calc($spacingXXL - $borderWidth);
+	border-radius: $borderRadius;
+    .p-button-label{
+        @extend .w-button-large-label-text-typography;
+    }
+}
+
+::ng-deep .p-selectbutton .p-button {
+	border: $borderWidth solid $black200;
+    color: $text846;
+	transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+}
+
+::ng-deep .p-selectbutton .p-button:first-child {
+    border-top-right-radius: 0 !important;
+    border-bottom-right-radius: 0 !important;
+}
+
+::ng-deep .p-selectbutton .p-button:last-child {
+    border-top-left-radius: 0 !important;
+    border-bottom-left-radius: 0 !important;
+}
+
+:host ::ng-deep .w-button-small .p-button:focus,
+:host ::ng-deep .w-button-medium .p-button:focus,
+:host ::ng-deep .w-button-large .p-button:focus {
+	box-shadow: $spacingZero $spacingZero 3px 3px #00A6E940 !important;
+}
+
+::ng-deep .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover, 
+::ng-deep .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover,
+::ng-deep .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover {
+	background: transparent;
+	border-color: $secondary400;
+	color: $secondary400;
+}
+
+::ng-deep .p-selectbutton .p-button.p-highlight:hover {
+	background: $secondary400;
+	border-color: $secondary400;
+	color: $textWhite;
+}

package/src/lib/button/w-select-button/w-select-button.component.spec.ts

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

package/src/lib/button/w-select-button/w-select-button.component.ts

@@ -0,0 +1,65 @@
+import { Component, EventEmitter, Input, Output, forwardRef } from '@angular/core';
+import { SizeType } from '../../shared/enums/enum';
+import { FormControl, NG_VALUE_ACCESSOR } from '@angular/forms';
+import { WSelectButtonState } from '../../shared/models/w-select-button-state.model';
+
+@Component({
+  selector: 'w-select-button',
+  templateUrl: './w-select-button.component.html',
+  styleUrls: ['./w-select-button.component.scss'],
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => WSelectButtonComponent),
+      multi: true
+    }
+  ]
+})
+export class WSelectButtonComponent {
+  @Input('stateOptions') stateOptions: WSelectButtonState[] = [{label: 'Off', value: 'off'}, {label: 'On', value: 'on'}];
+  @Input('size') size: string = "small";
+ 
+  @Input('tooltipPosition') tooltipPosition: string = "bottom";
+  @Input('tooltip') tooltip: string = "";
+  @Input('disabled') disabled: boolean = false;
+  @Input('formControl') formControl!: FormControl | null;
+
+  @Output('onChange') onChangeEvent: EventEmitter<any> = new EventEmitter();
+
+  sizeType: typeof SizeType = SizeType;
+
+  onChange: any = () => {};
+  onTouch: any = () => {};
+  ngModelValue: any;
+
+  getSizeName(value: number): string {
+    return SizeType[value];
+  }
+
+  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;
+  }
+
+  onButtonChanged(){
+    this.onChange(this.ngModelValue);
+    this.onTouch();
+
+    this.onChangeEvent.emit(this.ngModelValue);
+  }
+
+  onButtonChangedForm(value: any){
+    this.onChangeEvent.emit(value.checked);
+  }
+}

package/src/lib/button/w-toggle-button/w-toggle-button.component.html

@@ -0,0 +1,33 @@
+<ng-container *ngIf="formControl; else noNgControl">
+    <p-toggleButton 
+        [ngClass]="{'w-togglebutton-small' : size == getSizeName(sizeType.small),
+                    'w-togglebutton-medium' : size == getSizeName(sizeType.medium),
+                    'w-togglebutton-large' : size == getSizeName(sizeType.large)}"
+        [onLabel]="onLabel" 
+        [offLabel]="offLabel" 
+        iconPos="right" 
+        [onIcon]="onIcon"
+        [offIcon]="offIcon" 
+        [pTooltip]="tooltip" 
+        [tooltipPosition]="tooltipPosition" 
+        [formControl]="formControl" 
+        (onChange)="onButtonChangedForm($event)">
+    </p-toggleButton>
+</ng-container>
+<ng-template #noNgControl>
+    <p-toggleButton 
+        [ngClass]="{'w-togglebutton-small' : size == getSizeName(sizeType.small),
+                    'w-togglebutton-medium' : size == getSizeName(sizeType.medium),
+                    'w-togglebutton-large' : size == getSizeName(sizeType.large)}"
+        [(ngModel)]="ngModelValue" 
+        (ngModelChange)="onButtonChanged()"
+        [disabled]="disabled" 
+        [onLabel]="onLabel" 
+        [offLabel]="offLabel" 
+        iconPos="right" 
+        [onIcon]="onIcon"
+        [offIcon]="offIcon" 
+        [pTooltip]="tooltip" 
+        [tooltipPosition]="tooltipPosition">
+    </p-toggleButton>
+</ng-template>

package/src/lib/button/w-toggle-button/w-toggle-button.component.scss

@@ -0,0 +1,116 @@
+@import '../../../styles/_variables.scss';
+
+:host ::ng-deep .w-togglebutton-medium .p-togglebutton.p-button{
+    height: 40px;
+    padding: calc($spacingS - $borderWidth) calc($spacingL - $borderWidth);
+    border-radius: $borderRadius;
+    border-width: $borderWidth;
+    border: $borderWidth solid $black200;
+    color: $text846;
+
+    :hover{
+        border-width: $borderWidth;
+    }
+    
+    .p-button-icon{
+        margin-left: $spacingS;
+        @extend .w-button-medium-icon-text;
+    }
+
+    .p-button-label{
+        @extend .w-button-medium-label-text-typography;
+    }
+}
+
+:host ::ng-deep .w-togglebutton-small .p-togglebutton.p-button{
+    height: 32px;
+    padding: calc($spacingXS - $borderWidth) calc($spacingM - $borderWidth);
+    border-radius: $borderRadius;
+    border-width: $borderWidth;
+    border: $borderWidth solid $black200;
+    color: $text846;
+
+    :hover{
+        border-width: $borderWidth;
+    }
+    
+    .p-button-icon{
+        margin-left: $spacingXS;
+        @extend .w-button-small-icon-text;
+    }
+
+    .p-button-label{
+        @extend .w-button-small-label-text-typography;
+    }
+}
+
+:host ::ng-deep .w-togglebutton-large .p-togglebutton.p-button{
+    height: 56px;
+    padding: calc($spacingM - $borderWidth) calc($spacingXXL - $borderWidth);
+    border-radius: $borderRadius;
+    border-width: $borderWidth;
+    border: $borderWidth solid $black200;
+    color: $text846;
+
+    :hover{
+        border-width: $borderWidth;
+    }
+    
+    .p-button-icon{
+        margin-left: $spacingM;
+        @extend .w-button-large-icon-text;
+    }
+
+    .p-button-label{
+        @extend .w-button-large-label-text-typography;
+    }
+}
+
+:host ::ng-deep .w-togglebutton-small .p-togglebutton.p-button.p-highlight,
+:host ::ng-deep .w-togglebutton-medium .p-togglebutton.p-button.p-highlight,
+:host ::ng-deep .w-togglebutton-large .p-togglebutton.p-button.p-highlight{
+    border: $borderWidth solid $primary700;
+    color: $textWhite;
+}
+
+:host ::ng-deep .w-togglebutton-small .p-togglebutton.p-button:hover,
+:host ::ng-deep .w-togglebutton-medium .p-togglebutton.p-button:hover,
+:host ::ng-deep .w-togglebutton-large .p-togglebutton.p-button:hover{
+    border-color: $secondary400;
+    background: none;
+}
+
+:host ::ng-deep .w-togglebutton-small .p-togglebutton.p-button:focus,
+:host ::ng-deep .w-togglebutton-medium .p-togglebutton.p-button:focus,
+:host ::ng-deep .w-togglebutton-large .p-togglebutton.p-button:focus{
+    @extend .focus;
+}
+
+:host ::ng-deep .w-togglebutton-small .p-togglebutton.p-button.p-highlight:hover,
+:host ::ng-deep .w-togglebutton-small .p-togglebutton.p-button.p-highlight:focus, 
+:host ::ng-deep .w-togglebutton-small .p-togglebutton.p-button.p-highlight:focus,
+:host ::ng-deep .w-togglebutton-medium .p-togglebutton.p-button.p-highlight:hover,
+:host ::ng-deep .w-togglebutton-medium .p-togglebutton.p-button.p-highlight:focus, 
+:host ::ng-deep .w-togglebutton-large .p-togglebutton.p-button.p-highlight:hover,
+:host ::ng-deep .w-togglebutton-large .p-togglebutton.p-button.p-highlight:focus {
+    background-color: $secondary400;
+    border-color: $secondary400;
+}
+
+:host ::ng-deep .w-togglebutton-small .p-togglebutton.p-button.p-highlight:focus,
+:host ::ng-deep .w-togglebutton-medium .p-togglebutton.p-button.p-highlight:focus,
+:host ::ng-deep .w-togglebutton-large .p-togglebutton.p-button.p-highlight:focus{
+    outline: $borderWidth solid $primary50;
+    background-color: $primary700;
+    border-color: $primary700;
+    @extend .focus;
+}
+
+
+:host ::ng-deep .w-togglebutton-small .p-button.p-disabled,
+:host ::ng-deep .w-togglebutton-medium .p-button.p-disabled,
+:host ::ng-deep .w-togglebutton-large .p-button.p-disabled {
+  background: $black200;
+  border-color: $black200;
+  color: $black400;
+}

package/src/lib/button/w-toggle-button/w-toggle-button.component.spec.ts

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

package/src/lib/button/w-toggle-button/w-toggle-button.component.ts

@@ -0,0 +1,75 @@
+import { Component, EventEmitter, Input, OnInit, Output, forwardRef } from '@angular/core';
+import { ControlValueAccessor, FormControl, NG_VALUE_ACCESSOR } from '@angular/forms';
+import { SizeType, ButtonType } from '../../shared/enums/enum';
+
+@Component({
+  selector: 'w-toggle-button',
+  templateUrl: './w-toggle-button.component.html',
+  styleUrls: ['./w-toggle-button.component.scss'],
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => WToggleButtonComponent),
+      multi: true
+    }
+  ]
+})
+export class WToggleButtonComponent implements OnInit, ControlValueAccessor {
+  @Input('onLabel') onLabel: string = "";
+  @Input('offLabel') offLabel: string = "";
+  @Input('size') size: string = "small";
+  @Input('onIcon') onIcon: string = "";
+  @Input('offIcon') offIcon: string = "";
+  @Input('tooltipPosition') tooltipPosition: string = "bottom";
+  @Input('tooltip') tooltip: string = "";
+  @Input('disabled') disabled: boolean = false;
+  @Input('formControl') formControl!: FormControl | null;
+
+  @Output('onChange') onChangeEvent: EventEmitter<any> = new EventEmitter();
+
+  sizeType: typeof SizeType = SizeType;
+  buttonType: typeof ButtonType = ButtonType;
+
+  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;
+  }
+
+  onButtonChanged(){
+    this.onChange(this.ngModelValue);
+    this.onTouch();
+
+    this.onChangeEvent.emit(this.ngModelValue);
+  }
+
+  onButtonChangedForm(value: any){
+    this.onChangeEvent.emit(value.checked);
+  }
+
+  getSizeName(value: number): string {
+    return SizeType[value];
+  }
+
+  getButtonTypeName(value: number): string{
+    return ButtonType[value];
+  }
+}

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

@@ -0,0 +1,47 @@
+<div *ngIf="formControl; else noNgControl" class="w-edit-calendar-styles p-fluid field">
+    <label *ngIf="(label != undefined && label.length > 0)" htmlFor="state" 
+        [ngClass]="{'w-edit-calendar-small-label': getSizeName(sizeType.small) == size && !disabled,
+                    'w-edit-calendar-small-label-disabled': getSizeName(sizeType.small) == size && disabled,
+                    'w-edit-calendar-medium-label': getSizeName(sizeType.medium) == size && !disabled,
+                    'w-edit-calendar-medium-label-disabled': getSizeName(sizeType.medium) == size && disabled, 
+                    'no-top': removePaddingTop == true}">
+                    {{label}}
+    </label>
+    <div *ngIf="(label != undefined && label == '')" class="w-input-no-label-height"></div>
+    <p-calendar [ngClass]="{'ng-invalid ng-dirty': formControl.hasError('required') && formControl.touched}"
+                [ngClass]="{'w-edit-calendar-small' : size == getSizeName(sizeType.small), 
+                            'w-edit-calendar-medium' : size == getSizeName(sizeType.medium)}"
+                appendTo="body"
+                dateFormat="dd.mm.yy"
+                inputId="time" placeholder="{{placeholder}}"
+                [showTime]="showTime" 
+                [showSeconds]="showSeconds" 
+                [showIcon]="showIcon"
+                [icon]="timeOnly ? 'pi pi-clock' : 'pi pi-calendar'"
+                [minDate]="minDate" 
+                [maxDate]="maxDate" 
+                [required]="required" 
+                [formControl]="formControl" 
+                (onSelect)="onValue($event)" 
+                [inputStyleClass]="getSizeName(sizeType.small) ? 'w-edit-calendar-medium' : 'w-edit-calendar-small' ">
+    </p-calendar>
+    <small *ngIf="formControl.hasError('required') && formControl.touched" class="p-error block">{{requiredErrorDescription}}</small> 
+</div>
+<ng-template #noNgControl>
+    <div class="w-edit-calendar-styles" [ngClass]="{'w-edit-calendar-medium-display-block' : displayInlineBlock}">
+        <p-calendar [ngClass]="{'w-edit-calendar-small' : size == getSizeName(sizeType.small), 
+                                'w-edit-calendar-medium' : size == getSizeName(sizeType.medium)}"
+                    appendTo="body"
+                    dateFormat="dd.mm.yy"
+                    [(ngModel)]="ngModelValue" inputId="time" placeholder="{{placeholder}}"
+                    [showTime]="showTime" 
+                    [timeOnly]="timeOnly"
+                    [showSeconds]="showSeconds" 
+                    [showIcon]="showIcon"
+                    [icon]="timeOnly ? 'pi pi-clock' : 'pi pi-calendar'"
+                    [minDate]="minDate" 
+                    [maxDate]="maxDate" 
+                    (onSelect)="onDateChanged()">
+        </p-calendar>
+    </div>
+</ng-template>

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

@@ -0,0 +1,96 @@
+@import '../../../styles/_variables.scss';
+
+::ng-deep .w-edit-calendar-styles .p-inputtext:enabled:hover {
+    border-color: $secondary400;
+}
+
+::ng-deep .w-edit-calendar-styles .p-inputtext:enabled:focus {
+    @extend .focus;
+    border-radius: $borderRadius;
+    border: $borderWidth solid $secondary50;
+    padding-left: $spacingM;
+}
+
+/* SMALL */
+::ng-deep .w-edit-calendar-small .p-calendar {
+    height: 32px;
+    width: 100%;
+}
+
+.w-edit-calendar-small-label {
+    @extend .w-input-small-label-text;
+    @extend .w-input-small-label-text-content; 
+
+    &.no-top{
+        @extend .w-input-small-label-text-content-no-top;
+    }
+}
+
+:host ::ng-deep .w-edit-calendar-small .p-inputtext {
+    @extend .w-input-small-placeholder-text;
+    border-radius: $borderRadius;
+    border-width: $borderWidth;
+    padding-left: calc($spacingS - $borderWidth) !important;
+    border: $borderWidth solid $black200;
+}
+
+:host ::ng-deep .w-edit-calendar-small.p-component::-webkit-input-placeholder {/* Chrome/Opera/Safari */
+    color: $text700 !important;
+}
+
+:host ::ng-deep .w-edit-calendar-small.p-component::-moz-placeholder {/* Firefox 19+ */
+    color: $text700 !important;
+}
+
+:host ::ng-deep .w-edit-calendar-small.p-component:-ms-input-placeholder {/* IE 10+ */
+    color: $text700 !important;
+}
+
+:host ::ng-deep .w-edit-calendar-small.p-component:-moz-placeholder {/* Firefox 18- */
+    color: $text700 !important;
+}
+
+:host ::ng-deep .w-edit-calendar-small.p-component:disabled{
+    @extend .w-input-disabled;
+}
+
+.w-edit-calendar-small-label-disabled.w-edit-calendar-label{
+    @extend .w-input-small-label-disabled;
+    @extend .w-input-small-label-text-content;
+
+    &.no-top{
+        @extend .w-input-small-label-text-content-no-top;
+    }
+}
+
+//MEDIUM
+::ng-deep .w-edit-calendar-medium .p-calendar {
+    height: 40px;
+    width: 100%;
+}
+
+.w-edit-calendar-medium-label{
+    @extend .w-input-medium-label-text;
+    @extend .w-input-small-label-text-content;
+}
+
+:host ::ng-deep .w-edit-calendar-medium .p-inputtext {
+    @extend .w-input-medium-placeholder-text;
+    border-radius: $borderRadius;
+    border-width: $borderWidth;
+    padding-left: calc($spacingM - $borderWidth) !important;
+    border: $borderWidth solid $black200;
+}
+
+:host ::ng-deep .w-edit-calendar-medium.p-component:disabled{
+    @extend .w-input-disabled;
+}
+
+.w-edit-calendar-medium-label-disabled.w-edit-calendar-medium-label{
+    @extend .w-input-medium-label-disabled;
+    @extend .w-input-small-label-text-content;
+}
+
+.w-edit-calendar-medium-display-block{
+    display: inline-block;
+}