ngx-wapp-components 1.8.2 → 1.8.4

package/ng-package.json

@@ -0,0 +1,7 @@
+{
+  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../dist/wapp-components",
+  "lib": {
+    "entryFile": "src/public-api.ts"
+  }
+}

package/package.json

@@ -1,53 +1,46 @@
-{
-  "name": "ngx-wapp-components",
-  "version": "1.8.2",
-  "description": "This is a Wapping reusable component library published by Wapping.",
-  "keywords": [
-    "code",
-    "wapping",
-    "reusable",
-    "components",
-    "angular"
-  ],
-  "author": {
-    "name": "Wapping",
-    "email": "marcelfd@wappingweb.com",
-    "url": "https://www.wappingweb.com/"
-  },
-  "peerDependencies": {
-    "@angular/cdk": "^15.2.5",
-    "@angular/common": "^15.2.0",
-    "@angular/core": "^15.2.0",
-    "@angular/google-maps": "^15.2.9",
-    "angular2-query-builder": "^0.6.2",
-    "highlight.js": "^11.8.0",
-    "ngx-highlightjs": "^8.0.0",
-    "primeflex": "^3.3.0",
-    "primeicons": "^6.0.1",
-    "primeng": "^15.2.1",
-    "ngx-image-cropper": "^6.3.4"
-  },
-  "dependencies": {
-    "tslib": "^2.3.0"
-  },
-  "sideEffects": false,
-  "module": "fesm2015/ngx-wapp-components.mjs",
-  "es2020": "fesm2020/ngx-wapp-components.mjs",
-  "esm2020": "esm2020/ngx-wapp-components.mjs",
-  "fesm2020": "fesm2020/ngx-wapp-components.mjs",
-  "fesm2015": "fesm2015/ngx-wapp-components.mjs",
-  "typings": "index.d.ts",
-  "exports": {
-    "./package.json": {
-      "default": "./package.json"
-    },
-    ".": {
-      "types": "./index.d.ts",
-      "esm2020": "./esm2020/ngx-wapp-components.mjs",
-      "es2020": "./fesm2020/ngx-wapp-components.mjs",
-      "es2015": "./fesm2015/ngx-wapp-components.mjs",
-      "node": "./fesm2015/ngx-wapp-components.mjs",
-      "default": "./fesm2020/ngx-wapp-components.mjs"
-    }
-  }
-}
+{
+  "name": "ngx-wapp-components",
+  "version": "1.8.4",
+  "description": "This is a Wapping reusable component library published by Wapping.",
+  "keywords": [
+    "code",
+    "wapping",
+    "reusable",
+    "components",
+    "angular"
+  ],
+  "author": {
+    "name": "Wapping",
+    "email": "marcelfd@wappingweb.com",
+    "url": "https://www.wappingweb.com/"
+  },
+  "peerDependencies": {
+    "@angular/cdk": "^15.2.5",
+    "@angular/common": "^15.2.0",
+    "@angular/core": "^15.2.0",
+    "@angular/google-maps": "^15.2.9",
+    "angular2-query-builder": "^0.6.2",
+    "highlight.js": "^11.8.0",
+    "ngx-highlightjs": "^8.0.0",
+    "primeflex": "^3.3.0",
+    "primeicons": "^6.0.1",
+    "primeng": "^15.2.1",
+    "ngx-image-cropper": "^6.3.4"
+  },
+  "devDependencies": {
+    "@angular/google-maps": "^15.2.9",
+    "angular2-query-builder": "^0.6.2",
+    "highlight.js": "^11.8.0",
+    "ngx-highlightjs": "^8.0.0",
+    "primeflex": "^3.3.0",
+    "primeicons": "^6.0.1",
+    "primeng": "^15.2.1",
+    "rxjs": "~7.5.0",
+    "zone.js": "~0.11.4",
+    "ngx-image-cropper": "^6.3.4"
+  },
+  "dependencies": {
+    "tslib": "^2.3.0"
+  },
+  "sideEffects": false
+}

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

@@ -0,0 +1,85 @@
+<ng-container *ngIf="type == getButtonTypeName(buttonType.primary); else buttonSecondary">
+    <p-button *ngIf="size == getSizeName(sizeType.small)" 
+        label="{{label}}" 
+        [icon]="getIcon()" 
+        iconPos="right" 
+        styleClass="w-button-small border-none" 
+        [disabled]="disabled"
+        (onClick)="onButtonClick($event)"
+        [loading]="loading" 
+        [pTooltip]="tooltip" 
+        [tooltipPosition]="tooltipPosition">
+    </p-button>
+    <p-button *ngIf="size == getSizeName(sizeType.medium)" 
+        label="{{label}}" 
+        [icon]="getIcon()" 
+        iconPos="right" 
+        styleClass="w-button-medium border-none" 
+        [disabled]="disabled"
+        (onClick)="onButtonClick($event)"
+        [loading]="loading" 
+        [pTooltip]="tooltip" 
+        [tooltipPosition]="tooltipPosition">
+    </p-button>
+    <p-button *ngIf="size == getSizeName(sizeType.large)" 
+        label="{{label}}" 
+        [icon]="getIcon()" 
+        iconPos="right" 
+        styleClass="w-button-large border-none" 
+        [disabled]="disabled"
+        (onClick)="onButtonClick($event)"
+        [loading]="loading" 
+        [pTooltip]="tooltip" 
+        [tooltipPosition]="tooltipPosition">
+    </p-button>
+</ng-container>
+<ng-template #buttonSecondary>
+    <ng-container *ngIf="type == getButtonTypeName(buttonType.secondary) || type == getButtonTypeName(buttonType.tertiary); else buttonText">
+        <p-button *ngIf="size == getSizeName(sizeType.small)" 
+            label="{{label}}" 
+            [icon]="getIcon()" 
+            iconPos="right" 
+            [styleClass]="'p-button-outlined ' + (type == getButtonTypeName(buttonType.tertiary) ? 'w-button-small-tertiary' : 'w-button-small p-button-outlined')"
+            [disabled]="disabled"
+            (onClick)="onButtonClick($event)"
+            [loading]="loading" 
+            [pTooltip]="tooltip" 
+            [tooltipPosition]="tooltipPosition">
+        </p-button>
+        <p-button *ngIf="size == getSizeName(sizeType.medium)" 
+            label="{{label}}" 
+            [icon]="getIcon()" 
+            iconPos="right" 
+            [styleClass]="'p-button-outlined ' + (type == getButtonTypeName(buttonType.tertiary) ? 'w-button-medium-tertiary' : 'w-button-medium p-button-outlined')"
+            [disabled]="disabled"
+            (onClick)="onButtonClick($event)"
+            [loading]="loading" 
+            [pTooltip]="tooltip" 
+            [tooltipPosition]="tooltipPosition">
+        </p-button>
+        <p-button *ngIf="size == getSizeName(sizeType.large)" 
+            label="{{label}}" 
+            [icon]="getIcon()" 
+            iconPos="right" 
+            [styleClass]="'p-button-outlined ' + (type == getButtonTypeName(buttonType.tertiary) ? 'w-button-large-tertiary' : 'w-button-large p-button-outlined')"
+            [disabled]="disabled"
+            (onClick)="onButtonClick($event)"
+            [loading]="loading" 
+            [pTooltip]="tooltip" 
+            [tooltipPosition]="tooltipPosition">
+        </p-button>
+    </ng-container>
+    <ng-template #buttonText>
+        <p-button 
+            label="{{label}}" 
+            [icon]="getIcon()" 
+            iconPos="right" 
+            styleClass="p-button-text w-button-text-small"
+            [disabled]="disabled"
+            (onClick)="onButtonClick($event)"
+            [loading]="loading" 
+            [pTooltip]="tooltip" 
+            [tooltipPosition]="tooltipPosition">
+        </p-button>
+    </ng-template>
+</ng-template>

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

@@ -0,0 +1,227 @@
+@import '../../../styles/_variables.scss';
+
+:host ::ng-deep .w-button-small.p-button {
+    height: 32px;
+    padding: calc($spacingXS - $borderWidth) calc($spacingM - $borderWidth);
+    border-radius: $borderRadius;
+    border-width: $borderWidth;
+
+    :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-button-small.p-button:enabled:hover {
+    background-color: $secondary400;
+    border-color: $secondary400;
+}
+
+:host ::ng-deep .w-button-small.p-button:enabled:focus {
+    outline: $borderWidth solid $primary50;
+    background-color: $primary700;
+    @extend .focus;
+}
+
+:host ::ng-deep .w-button-small.p-button.p-button-outlined:enabled:hover {
+    border-radius: $borderRadius;
+    border-width: $borderWidth;
+}
+
+:host ::ng-deep .w-button-medium.p-button {
+    height: 40px;
+    padding: calc($spacingS - $borderWidth) calc($spacingL - $borderWidth);
+    border-radius: $borderRadius;
+    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-button-medium.p-button:enabled:hover {
+    background-color: $secondary400;
+    border-color: $secondary400;
+}
+
+:host ::ng-deep .w-button-medium.p-button:enabled:focus {
+    @extend .focus;
+    outline: $borderWidth solid $primary50;
+    background-color: $primary700;
+}
+
+:host ::ng-deep .w-button-medium.p-button.p-button-outlined:enabled:hover {
+    border-radius: $borderRadius;
+    border-width: $borderWidth;
+}
+
+:host ::ng-deep .w-button-large.p-button {
+    height: 56px;
+    padding: calc($spacingM - $borderWidth) calc($spacingXXL - $borderWidth);
+    border-radius: $borderRadius;
+    border-width: $borderWidth;
+
+    :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-button-large.p-button:enabled:hover {
+    background-color: $secondary400;
+    border-color: $secondary400;
+}
+
+:host ::ng-deep .w-button-large.p-button:enabled:focus {
+    outline: $borderWidth solid $primary50;
+    background-color: $primary700;
+    @extend .focus;
+}
+
+:host ::ng-deep .w-button-small.p-button.p-button-outlined:enabled:hover,
+:host ::ng-deep .w-button-medium.p-button.p-button-outlined:enabled:hover,
+:host ::ng-deep .w-button-large.p-button.p-button-outlined:enabled:hover {
+    border-radius: $borderRadius;
+    border-width: $borderWidth;
+    background-color: transparent;
+    border-color: $secondary400;
+    color: $secondary400;
+}
+
+:host ::ng-deep .w-button-small.p-button.p-button-outlined:focus, 
+:host ::ng-deep .w-button-medium.p-button.p-button-outlined:focus, 
+:host ::ng-deep .w-button-large.p-button.p-button-outlined:focus {
+    border-color: $primary700;
+    color: $primary700;
+    background-color: transparent;
+    outline: $spacingZero;
+}
+
+:host ::ng-deep .w-button-small.p-button.p-button-outlined.p-disabled,
+:host ::ng-deep .w-button-medium.p-button.p-button-outlined.p-disabled,
+:host ::ng-deep .w-button-large.p-button.p-button-outlined.p-disabled{
+background-color: transparent;
+    color: $black400;
+    border-color: $black200;
+}
+
+:host ::ng-deep .w-button-medium.p-button.p-disabled,
+:host ::ng-deep .w-button-small.p-button.p-disabled,
+:host ::ng-deep .w-button-large.p-button.p-disabled {
+  background: $black200;
+  color: $black400;
+}
+
+:host ::ng-deep .w-button-small-tertiary.p-button{
+    @extend .w-button-small;
+    @extend .w-button-small-tertiary-label-text;
+    border: $borderWidth solid $black200;
+}
+
+:host ::ng-deep .w-button-small-tertiary.p-button.p-button-outlined:enabled:hover{
+    border-color: $secondary400;
+    background: none;
+    color: $secondary400;
+}
+
+:host ::ng-deep .w-button-small-tertiary.p-button.p-button-outlined:enabled:focus{
+    border: $borderWidth solid $black300;
+    color: $black700;
+}
+
+:host ::ng-deep .w-button-medium-tertiary.p-button{
+    @extend .w-button-medium;
+    @extend .w-button-medium-tertiary-label-text; 
+    border: $borderWidth solid $black200;
+}
+
+:host ::ng-deep .w-button-medium-tertiary.p-button.p-button-outlined:enabled:hover{
+    border-color: $secondary400;
+    background: none;
+    color: $secondary400;
+}
+
+:host ::ng-deep .w-button-medium-tertiary.p-button.p-button-outlined:enabled:focus{
+    border: $borderWidth solid $black300;
+    color: $black700;
+}
+
+:host ::ng-deep .w-button-large-tertiary.p-button{
+    @extend .w-button-large; 
+    @extend .w-button-large-tertiary-label-text;
+    border: $borderWidth solid $black200;
+}
+
+:host ::ng-deep .w-button-large-tertiary.p-button.p-button-outlined:enabled:hover{
+    border-color: $secondary400;
+    background: none;
+    color: $secondary400;
+}
+
+:host ::ng-deep .w-button-large-tertiary.p-button.p-button-outlined:enabled:focus{
+    border: $borderWidth solid $black300;
+    color: $black700;
+}
+
+:host ::ng-deep .w-button-small.p-button.p-button-icon-only,
+:host ::ng-deep .w-button-medium.p-button.p-button-icon-only,
+:host ::ng-deep .w-button-large.p-button.p-button-icon-only,
+:host ::ng-deep .w-button-small-tertiary.p-button.p-button-icon-only,
+:host ::ng-deep .w-button-medium-tertiary.p-button.p-button-icon-only,
+:host ::ng-deep .w-button-large-tertiary.p-button.p-button-icon-only,
+:host ::ng-deep .w-button-text-small.p-button.p-button-icon-only
+{ 
+    width: 32px;
+    .p-button-icon{
+        padding-left: $spacingZero;
+        margin-left: $spacingZero;
+    }
+}
+
+:host ::ng-deep .w-button-text-small.p-button{
+    @extend .w-button-small;
+    @extend .w-button-small-text-label-text; 
+    border: none;
+}
+
+:host ::ng-deep .w-button-text-small.p-button.p-button-text .p-button-label{
+    @extend .w-button-small-only-label-text;
+}
+
+:host ::ng-deep .w-button-text-small.p-button.p-button-text:enabled:hover{
+    color: $secondary400; 
+    background: none;
+    border: none;
+}
+
+:host ::ng-deep .w-button-text-small.p-button.p-button-text:enabled:focus{
+    background: none;
+    border: none;
+}
+
+:host ::ng-deep .w-button-small.p-button.p-button-text.p-disabled{
+    background: none;
+    border: none;
+    color: $black400;
+}

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

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

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

@@ -0,0 +1,40 @@
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { ButtonType, SizeType } from '../../shared/enums/enum';
+
+@Component({
+  selector: 'w-button',
+  templateUrl: './w-button.component.html',
+  styleUrls: ['./w-button.component.scss']
+})
+export class WButtonComponent implements OnInit{
+  @Input('type') type: string = "primary";
+  @Input('label') label!: string;
+  @Input('size') size: string = "small";
+  @Input('icon') icon: string = "";
+  @Input('tooltipPosition') tooltipPosition: string = "bottom";
+  @Input('tooltip') tooltip: string = "";
+  @Input('disabled') disabled: boolean = false;
+  @Input('loading') loading: boolean = false;
+  @Output('onClick') onClick: EventEmitter<MouseEvent> = new EventEmitter();
+  
+  sizeType: typeof SizeType = SizeType;
+  buttonType: typeof ButtonType = ButtonType;
+
+  ngOnInit(): void {}
+
+  onButtonClick(event: MouseEvent){
+    this.onClick.emit(event);
+  }
+  
+  getIcon(): string{
+    return this.icon ? "pi " + this.icon: "";
+  }
+  
+  getSizeName(value: number): string {
+    return SizeType[value];
+  }
+
+  getButtonTypeName(value: number): string{
+    return ButtonType[value];
+  }
+}

package/src/lib/button/w-buttons-footer/w-buttons-footer.component.html

@@ -0,0 +1,3 @@
+<div class="flex flex-row-reverse flex-wrap right-0 bottom-0 fixed wapp-button-footer">
+    <ng-content select=".wapp-buttons-footer"></ng-content>
+</div>

package/src/lib/button/w-buttons-footer/w-buttons-footer.component.scss

@@ -0,0 +1,11 @@
+@import './../../../styles/_variables.scss';
+@import 'primeflex/primeflex.scss';
+
+.wapp-button-footer{
+    padding: 40px;
+}
+
+:host ::ng-deep .wapp-buttons-footer{
+    @include styleclass('flex flex-row-reverse');
+    gap: $spacingM;
+}

package/src/lib/button/w-buttons-footer/w-buttons-footer.component.spec.ts

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

package/src/lib/button/w-buttons-footer/w-buttons-footer.component.ts

@@ -0,0 +1,10 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+
+@Component({
+  selector: 'w-buttons-footer',
+  templateUrl: './w-buttons-footer.component.html',
+  styleUrls: ['./w-buttons-footer.component.scss']
+})
+export class WButtonsFooterComponent {
+
+}

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

@@ -0,0 +1,31 @@
+<div *ngIf="formControl; else noNgControl">
+    <div *ngFor="let option of radioGroupElements" class="field-checkbox">
+        <p-radioButton [ngClass]="{'w-radiobutton-small' : size == getSizeName(sizeType.small),
+                                   'w-radiobutton-medium' : size == getSizeName(sizeType.medium)}"
+                       [inputId]="option.key" 
+                       [required]="required" 
+                       [disabled]="disabled"
+                       [formControl]="formControl"
+                       ngDefaultControl
+                       (onClick)="onChangedForm($event)">
+        </p-radioButton>
+        <label [ngClass]="{'w-radiobutton-label-small' : size == getSizeName(sizeType.small),
+                           'w-radiobutton-label-medium' : size == getSizeName(sizeType.medium)}" [for]="option.key">{{option.name}}</label>
+    </div>
+    <small *ngIf="formControl.hasError('required') && formControl.touched" class="p-error block">{{requiredErrorDescription}}</small> 
+</div>
+<ng-template #noNgControl>
+    <div *ngFor="let option of radioGroupElements" class="field-checkbox">
+        <p-radioButton [ngClass]="{'w-radiobutton-small' : size == getSizeName(sizeType.small),
+                                   'w-radiobutton-medium' : size == getSizeName(sizeType.medium)}"
+                       [inputId]="option.key" 
+                       [(ngModel)]="ngModelValue" 
+                       [disabled]="disabled"
+                       [value]="option" 
+                       ngDefaultControl
+                       (onClick)="onChanged()">
+        </p-radioButton>
+        <label [ngClass]="{'w-radiobutton-label-small' : size == getSizeName(sizeType.small),
+                           'w-radiobutton-label-medium' : size == getSizeName(sizeType.medium)}" [for]="option.key">{{option.name}}</label>
+    </div>
+</ng-template>

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

@@ -0,0 +1,114 @@
+@import '../../../styles/_variables.scss';
+
+:host ::ng-deep .w-radiobutton-small .p-radiobutton .p-radiobutton-box {
+    border: $borderWidth solid $black300;
+    background: $white;
+    min-width: 16px;
+    width: 16px;
+    height: 16px;
+    color: $primaryColor;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+}
+
+:host ::ng-deep .w-radiobutton-medium .p-radiobutton .p-radiobutton-box {
+    border: $borderWidth solid $black300;
+    background: $white;
+    min-width: 24px;
+    width: 24px;
+    height: 24px;
+    color: $primaryColor;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+}
+
+:host ::ng-deep .w-radiobutton-small .p-radiobutton .p-radiobutton-box:hover {
+    border: $borderWidth solid $black300;
+    background: $white;
+    min-width: 16px;
+    width: 16px;
+    height: 16px;
+    color: $black300;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+
+:host ::ng-deep .w-radiobutton-medium .p-radiobutton .p-radiobutton-box:hover {
+    border: $borderWidth solid $black300;
+    background: $white;
+    min-width: 24px;
+    width: 24px;
+    height: 24px;
+    color: $black300;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+
+  :host ::ng-deep .p-radiobutton .p-radiobutton-box:focus {
+    @extend .focus;
+  }
+
+  :host ::ng-deep .p-radiobutton .p-radiobutton-box:not(.p-disabled).p-focus {
+    @extend .focus;
+  }
+
+:host ::ng-deep .w-radiobutton-medium .p-radiobutton .p-radiobutton-box .p-radiobutton-icon {
+    width: 12px;
+    height: 12px;
+    transition-duration: 0.2s;
+    background-color: #ffffff;
+}
+
+:host ::ng-deep .w-radiobutton-small .p-radiobutton .p-radiobutton-box .p-radiobutton-icon {
+    width: 8px;
+    height: 8px;
+    transition-duration: 0.2s;
+    background-color: #ffffff;
+}
+
+  :host ::ng-deep .w-radiobutton-small .p-radiobutton .p-radiobutton-box.p-highlight, 
+  :host ::ng-deep .w-radiobutton-medium .p-radiobutton .p-radiobutton-box.p-highlight {
+    border-color: $primaryColor;
+    background: $primaryColor;
+  }
+
+  :host ::ng-deep .w-radiobutton-small .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover {
+    border-color: $black300;
+    background: $black500;
+    border: 4px solid $black300;
+  }
+
+  :host ::ng-deep .w-radiobutton-medium .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover {
+    border-color: $black300;
+    background: $black500;
+    border: 6px solid $black300;
+  }
+
+  :host ::ng-deep .field-checkbox, .field-radiobutton {
+    height: 24px;
+    margin-bottom: $spacingM;
+    display: flex;
+    align-items: center;
+  }
+
+  ::ng-deep .field-checkbox > label.w-radiobutton-label-small, .field-radiobutton > label {
+    margin-left: $spacingXS;
+    /* line-height: 1; */
+    @extend .w-control-button-small-label-text;
+  }
+
+  ::ng-deep .field-checkbox > label.w-radiobutton-label-medium, .field-radiobutton > label {
+    margin-left: $spacingS;
+    /* line-height: 1; */
+    @extend .w-control-button-medium-label-text;
+  }
+
+  :host ::ng-deep .w-radiobutton-small .p-radiobutton {
+    width: 16px;
+    height: 16px;
+  }
+
+  :host ::ng-deep .w-radiobutton-medium .p-radiobutton {
+    width: 24px;
+    height: 24px;
+  }