suis 0.25.0 → 0.27.0

package/fesm2022/suis.mjs

@@ -5,7 +5,7 @@ import { CommonModule } from '@angular/common';
 import * as i2 from '@angular/router';
 import { RouterModule } from '@angular/router';
 import * as i2$1 from '@angular/forms';
-import { NG_VALUE_ACCESSOR, FormControl, ReactiveFormsModule, FormsModule } from '@angular/forms';
+import { NG_VALUE_ACCESSOR, FormControl, ReactiveFormsModule, RadioControlValueAccessor, FormsModule } from '@angular/forms';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 
 class SuisNgClassPipe {
@@ -445,11 +445,15 @@ class SuisInputBase {
         this.cdRef.markForCheck();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SuisInputBase, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.0.0", type: SuisInputBase, inputs: { readonly: "readonly", invalid: "invalid" }, outputs: { changed: "changed", touched: "touched" }, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.0.0", type: SuisInputBase, inputs: { id: "id", name: "name", readonly: "readonly", invalid: "invalid" }, outputs: { changed: "changed", touched: "touched" }, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SuisInputBase, decorators: [{
             type: Directive
-        }], propDecorators: { readonly: [{
+        }], propDecorators: { id: [{
+                type: Input
+            }], name: [{
+                type: Input
+            }], readonly: [{
                 type: Input
             }], invalid: [{
                 type: Input
@@ -459,11 +463,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImpor
                 type: Output
             }] } });
 
-class SuisInputTextComponent extends SuisInputBase {
+class SuisInputComponent extends SuisInputBase {
     constructor() {
         super(...arguments);
         /**
-         * Sets input's type to one of the accepted values - 'text' or 'password'. By default set to 'text'.
+         * Sets input's type to one of the accepted values - type of SuisInputType. By default set to 'text'.
          */
         this.type = 'text';
         /**
@@ -493,24 +497,24 @@ class SuisInputTextComponent extends SuisInputBase {
     onEnter() {
         this.enterPressed.emit();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SuisInputTextComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: SuisInputTextComponent, isStandalone: true, selector: "suis-input-text", inputs: { type: "type", placeholder: "placeholder" }, outputs: { enterPressed: "enterPressed" }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SuisInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: SuisInputComponent, isStandalone: true, selector: "suis-input", inputs: { type: "type", placeholder: "placeholder" }, outputs: { enterPressed: "enterPressed" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 multi: true,
-                useExisting: forwardRef(() => SuisInputTextComponent),
+                useExisting: forwardRef(() => SuisInputComponent),
             },
-        ], usesInheritance: true, ngImport: i0, template: "<input\n  class=\"suis-input-text\"\n  [class.suis-input-text--invalid]=\"invalid\"\n  [type]=\"type\"\n  [value]=\"value\"\n  [placeholder]=\"placeholder\"\n  [disabled]=\"readonly\"\n  (input)=\"onChange($event)\"\n  (focus)=\"onTouch()\"\n  (keydown.enter)=\"onEnter()\"\n/>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host{display:block}.suis-input-text{width:100%;background-color:#fff;box-shadow:0 2px 5px #00000040;border-radius:.25rem;padding:.5rem 1rem;border:0;min-height:2rem}.suis-input-text:focus{box-shadow:0 2px 5px #192a56bf;outline:none}.suis-input-text--invalid{box-shadow:0 2px 5px #ff4757bf}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], usesInheritance: true, ngImport: i0, template: "<input\n  class=\"suis-input\"\n  [class.suis-input--invalid]=\"invalid\"\n  [attr.id]=\"id\"\n  [attr.name]=\"name\"\n  [type]=\"type\"\n  [value]=\"value\"\n  [placeholder]=\"placeholder\"\n  [disabled]=\"readonly\"\n  (input)=\"onChange($event)\"\n  (focus)=\"onTouch()\"\n  (keydown.enter)=\"onEnter()\"\n/>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host{display:block}.suis-input{width:100%;background-color:#fff;box-shadow:0 2px 5px #00000040;border-radius:.25rem;padding:.5rem 1rem;border:0;min-height:2rem}.suis-input:focus{box-shadow:0 2px 5px #192a56bf;outline:none}.suis-input--invalid{box-shadow:0 2px 5px #ff4757bf}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SuisInputTextComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SuisInputComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'suis-input-text', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+            args: [{ selector: 'suis-input', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,
                             multi: true,
-                            useExisting: forwardRef(() => SuisInputTextComponent),
+                            useExisting: forwardRef(() => SuisInputComponent),
                         },
-                    ], template: "<input\n  class=\"suis-input-text\"\n  [class.suis-input-text--invalid]=\"invalid\"\n  [type]=\"type\"\n  [value]=\"value\"\n  [placeholder]=\"placeholder\"\n  [disabled]=\"readonly\"\n  (input)=\"onChange($event)\"\n  (focus)=\"onTouch()\"\n  (keydown.enter)=\"onEnter()\"\n/>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host{display:block}.suis-input-text{width:100%;background-color:#fff;box-shadow:0 2px 5px #00000040;border-radius:.25rem;padding:.5rem 1rem;border:0;min-height:2rem}.suis-input-text:focus{box-shadow:0 2px 5px #192a56bf;outline:none}.suis-input-text--invalid{box-shadow:0 2px 5px #ff4757bf}\n"] }]
+                    ], template: "<input\n  class=\"suis-input\"\n  [class.suis-input--invalid]=\"invalid\"\n  [attr.id]=\"id\"\n  [attr.name]=\"name\"\n  [type]=\"type\"\n  [value]=\"value\"\n  [placeholder]=\"placeholder\"\n  [disabled]=\"readonly\"\n  (input)=\"onChange($event)\"\n  (focus)=\"onTouch()\"\n  (keydown.enter)=\"onEnter()\"\n/>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host{display:block}.suis-input{width:100%;background-color:#fff;box-shadow:0 2px 5px #00000040;border-radius:.25rem;padding:.5rem 1rem;border:0;min-height:2rem}.suis-input:focus{box-shadow:0 2px 5px #192a56bf;outline:none}.suis-input--invalid{box-shadow:0 2px 5px #ff4757bf}\n"] }]
         }], propDecorators: { type: [{
                 type: Input
             }], placeholder: [{
@@ -519,6 +523,83 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImpor
                 type: Output
             }] } });
 
+class SuisLabelComponent {
+    constructor() {
+        /**
+         * Adds a red colored asterisk after the label. By default set to false.
+         */
+        this.required = false;
+        /**
+         * Shows the pointer cursor when hovered. By default set to false.
+         */
+        this.pointer = false;
+        /**
+         * Grays out the label content and removes cursor pointer behavior. By default set to false.
+         */
+        this.readonly = false;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SuisLabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: SuisLabelComponent, isStandalone: true, selector: "suis-label", inputs: { for: "for", required: "required", pointer: "pointer", readonly: "readonly" }, ngImport: i0, template: "<label\n  class=\"suis-label\"\n  [class.suis-label--pointer]=\"!readonly && pointer\"\n  [class.suis-label--readonly]=\"readonly\"\n  [htmlFor]=\"for ? for : undefined\"\n>\n  <ng-content></ng-content>\n  <span *ngIf=\"required\" class=\"suis-label__asterisk\">*</span>\n  <ng-content select=\"[suisLabelAside]\"></ng-content>\n</label>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host{display:block}.suis-label{font-size:.875rem;display:flex;align-items:center}.suis-label__asterisk{color:#ff4757;margin-left:.0625rem}.suis-label--pointer{cursor:pointer}.suis-label--readonly{color:#dcdde1}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SuisLabelComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'suis-label', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<label\n  class=\"suis-label\"\n  [class.suis-label--pointer]=\"!readonly && pointer\"\n  [class.suis-label--readonly]=\"readonly\"\n  [htmlFor]=\"for ? for : undefined\"\n>\n  <ng-content></ng-content>\n  <span *ngIf=\"required\" class=\"suis-label__asterisk\">*</span>\n  <ng-content select=\"[suisLabelAside]\"></ng-content>\n</label>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host{display:block}.suis-label{font-size:.875rem;display:flex;align-items:center}.suis-label__asterisk{color:#ff4757;margin-left:.0625rem}.suis-label--pointer{cursor:pointer}.suis-label--readonly{color:#dcdde1}\n"] }]
+        }], propDecorators: { for: [{
+                type: Input
+            }], required: [{
+                type: Input
+            }], pointer: [{
+                type: Input
+            }], readonly: [{
+                type: Input
+            }] } });
+
+class SuisInputCheckboxComponent extends SuisInputBase {
+    constructor() {
+        super(...arguments);
+        /** @internal */
+        this.SuisIconType = SuisIconType;
+        /** @internal */
+        this.value = false;
+        /**
+         * Adds a red colored asterisk after the label. By default set to false.
+         */
+        this.required = false;
+    }
+    writeValue(obj) {
+        this.value = obj;
+        this._onChange(this.value);
+        this.cdRef.markForCheck();
+    }
+    onChange(event) {
+        const target = event.target;
+        this.value = target.checked;
+        this._onChange(this.value);
+        this.changed.emit(this.value);
+        this.cdRef.markForCheck();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SuisInputCheckboxComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: SuisInputCheckboxComponent, isStandalone: true, selector: "suis-input-checkbox", inputs: { required: "required" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                multi: true,
+                useExisting: forwardRef(() => SuisInputCheckboxComponent),
+            },
+        ], usesInheritance: true, ngImport: i0, template: "<input\n  type=\"checkbox\"\n  class=\"suis-input-checkbox\"\n  [attr.id]=\"id\"\n  [attr.name]=\"name\"\n  [value]=\"value\"\n  [disabled]=\"readonly\"\n  (input)=\"onChange($event)\"\n  (focus)=\"onTouch()\"\n/>\n\n<suis-label\n  [for]=\"id\"\n  [required]=\"required\"\n  [pointer]=\"true\"\n  [readonly]=\"readonly\"\n>\n  <div\n    [tabindex]=\"readonly ? -1 : 0\"\n    class=\"suis-input-checkbox__check\"\n    [class.suis-input-checkbox__check--invalid]=\"invalid\"\n    [class.suis-input-checkbox__check--readonly]=\"readonly\"\n  >\n    <suis-icon\n      *ngIf=\"value\"\n      [type]=\"SuisIconType.CHECK\"\n      [color]=\"readonly ? 'tertiary' : 'primary'\"\n    ></suis-icon>\n  </div>\n  <ng-content></ng-content>\n</suis-label>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host{display:flex}.suis-input-checkbox{display:none}.suis-input-checkbox__check{width:1.25rem;height:1.25rem;border:.0625rem solid #192a56;display:flex;justify-content:center;align-items:center;margin-right:.5rem;background-color:#fff}.suis-input-checkbox__check:focus{box-shadow:0 2px 5px #192a56bf;outline:none}.suis-input-checkbox__check--readonly{border:.0625rem solid #dcdde1}.suis-input-checkbox__check--readonly:focus{box-shadow:none}.suis-input-checkbox__check--invalid{border:.0625rem solid #ff4757;box-shadow:0 2px 5px #ff4757bf}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: SuisLabelComponent, selector: "suis-label", inputs: ["for", "required", "pointer", "readonly"] }, { kind: "component", type: SuisIconComponent, selector: "suis-icon", inputs: ["size", "color", "type", "outlined", "filled", "pointer", "bold"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SuisInputCheckboxComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'suis-input-checkbox', standalone: true, imports: [CommonModule, SuisLabelComponent, SuisIconComponent], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            multi: true,
+                            useExisting: forwardRef(() => SuisInputCheckboxComponent),
+                        },
+                    ], template: "<input\n  type=\"checkbox\"\n  class=\"suis-input-checkbox\"\n  [attr.id]=\"id\"\n  [attr.name]=\"name\"\n  [value]=\"value\"\n  [disabled]=\"readonly\"\n  (input)=\"onChange($event)\"\n  (focus)=\"onTouch()\"\n/>\n\n<suis-label\n  [for]=\"id\"\n  [required]=\"required\"\n  [pointer]=\"true\"\n  [readonly]=\"readonly\"\n>\n  <div\n    [tabindex]=\"readonly ? -1 : 0\"\n    class=\"suis-input-checkbox__check\"\n    [class.suis-input-checkbox__check--invalid]=\"invalid\"\n    [class.suis-input-checkbox__check--readonly]=\"readonly\"\n  >\n    <suis-icon\n      *ngIf=\"value\"\n      [type]=\"SuisIconType.CHECK\"\n      [color]=\"readonly ? 'tertiary' : 'primary'\"\n    ></suis-icon>\n  </div>\n  <ng-content></ng-content>\n</suis-label>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host{display:flex}.suis-input-checkbox{display:none}.suis-input-checkbox__check{width:1.25rem;height:1.25rem;border:.0625rem solid #192a56;display:flex;justify-content:center;align-items:center;margin-right:.5rem;background-color:#fff}.suis-input-checkbox__check:focus{box-shadow:0 2px 5px #192a56bf;outline:none}.suis-input-checkbox__check--readonly{border:.0625rem solid #dcdde1}.suis-input-checkbox__check--readonly:focus{box-shadow:none}.suis-input-checkbox__check--invalid{border:.0625rem solid #ff4757;box-shadow:0 2px 5px #ff4757bf}\n"] }]
+        }], propDecorators: { required: [{
+                type: Input
+            }] } });
+
 class SuisInputChipsComponent extends SuisInputBase {
     constructor() {
         super(...arguments);
@@ -571,7 +652,7 @@ class SuisInputChipsComponent extends SuisInputBase {
                 multi: true,
                 useExisting: forwardRef(() => SuisInputChipsComponent),
             },
-        ], viewQueries: [{ propertyName: "inputEl", first: true, predicate: ["input"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"suis-input-chips\">\n  <div #input class=\"suis-input-chips__input\">\n    <suis-input-text\n      [formControl]=\"inputControl\"\n      [readonly]=\"readonly\"\n      [invalid]=\"invalid\"\n      [placeholder]=\"placeholder\"\n      (touched)=\"onTouch()\"\n      (enterPressed)=\"submitValue()\"\n    ></suis-input-text>\n  </div>\n  <div *ngIf=\"value.length\" class=\"suis-input-chips__chips\">\n    <suis-chip\n      [removable]=\"readonly ? false : true\"\n      [color]=\"chipColor\"\n      [iconColor]=\"chipIconColor\"\n      (remove)=\"removeItem(item)\"\n      *ngFor=\"let item of value\"\n    >\n      {{ item }}\n    </suis-chip>\n  </div>\n</div>\n", styles: [":host{display:block}.suis-input-chips__chips{margin-top:.375rem;display:flex;flex-wrap:wrap}.suis-input-chips__chips suis-chip:not(:last-child){margin-right:.25rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: SuisChipComponent, selector: "suis-chip", inputs: ["color", "iconColor", "removable"], outputs: ["remove"] }, { kind: "component", type: SuisInputTextComponent, selector: "suis-input-text", inputs: ["type", "placeholder"], outputs: ["enterPressed"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], viewQueries: [{ propertyName: "inputEl", first: true, predicate: ["input"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"suis-input-chips\">\n  <div #input class=\"suis-input-chips__input\">\n    <suis-input\n      [id]=\"id\"\n      [name]=\"name\"\n      [formControl]=\"inputControl\"\n      [readonly]=\"readonly\"\n      [invalid]=\"invalid\"\n      [placeholder]=\"placeholder\"\n      (touched)=\"onTouch()\"\n      (enterPressed)=\"submitValue()\"\n    ></suis-input>\n  </div>\n  <div *ngIf=\"value.length\" class=\"suis-input-chips__chips\">\n    <suis-chip\n      [removable]=\"readonly ? false : true\"\n      [color]=\"chipColor\"\n      [iconColor]=\"chipIconColor\"\n      (remove)=\"removeItem(item)\"\n      *ngFor=\"let item of value\"\n    >\n      {{ item }}\n    </suis-chip>\n  </div>\n</div>\n", styles: [":host{display:block}.suis-input-chips__chips{margin-top:.375rem;display:flex;flex-wrap:wrap}.suis-input-chips__chips suis-chip:not(:last-child){margin-right:.25rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: SuisChipComponent, selector: "suis-chip", inputs: ["color", "iconColor", "removable"], outputs: ["remove"] }, { kind: "component", type: SuisInputComponent, selector: "suis-input", inputs: ["type", "placeholder"], outputs: ["enterPressed"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SuisInputChipsComponent, decorators: [{
             type: Component,
@@ -579,14 +660,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImpor
                         CommonModule,
                         ReactiveFormsModule,
                         SuisChipComponent,
-                        SuisInputTextComponent,
+                        SuisInputComponent,
                     ], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,
                             multi: true,
                             useExisting: forwardRef(() => SuisInputChipsComponent),
                         },
-                    ], template: "<div class=\"suis-input-chips\">\n  <div #input class=\"suis-input-chips__input\">\n    <suis-input-text\n      [formControl]=\"inputControl\"\n      [readonly]=\"readonly\"\n      [invalid]=\"invalid\"\n      [placeholder]=\"placeholder\"\n      (touched)=\"onTouch()\"\n      (enterPressed)=\"submitValue()\"\n    ></suis-input-text>\n  </div>\n  <div *ngIf=\"value.length\" class=\"suis-input-chips__chips\">\n    <suis-chip\n      [removable]=\"readonly ? false : true\"\n      [color]=\"chipColor\"\n      [iconColor]=\"chipIconColor\"\n      (remove)=\"removeItem(item)\"\n      *ngFor=\"let item of value\"\n    >\n      {{ item }}\n    </suis-chip>\n  </div>\n</div>\n", styles: [":host{display:block}.suis-input-chips__chips{margin-top:.375rem;display:flex;flex-wrap:wrap}.suis-input-chips__chips suis-chip:not(:last-child){margin-right:.25rem}\n"] }]
+                    ], template: "<div class=\"suis-input-chips\">\n  <div #input class=\"suis-input-chips__input\">\n    <suis-input\n      [id]=\"id\"\n      [name]=\"name\"\n      [formControl]=\"inputControl\"\n      [readonly]=\"readonly\"\n      [invalid]=\"invalid\"\n      [placeholder]=\"placeholder\"\n      (touched)=\"onTouch()\"\n      (enterPressed)=\"submitValue()\"\n    ></suis-input>\n  </div>\n  <div *ngIf=\"value.length\" class=\"suis-input-chips__chips\">\n    <suis-chip\n      [removable]=\"readonly ? false : true\"\n      [color]=\"chipColor\"\n      [iconColor]=\"chipIconColor\"\n      (remove)=\"removeItem(item)\"\n      *ngFor=\"let item of value\"\n    >\n      {{ item }}\n    </suis-chip>\n  </div>\n</div>\n", styles: [":host{display:block}.suis-input-chips__chips{margin-top:.375rem;display:flex;flex-wrap:wrap}.suis-input-chips__chips suis-chip:not(:last-child){margin-right:.25rem}\n"] }]
         }], propDecorators: { inputEl: [{
                 type: ViewChild,
                 args: ['input']
@@ -728,7 +809,7 @@ class SuisInputNumberComponent extends SuisInputBase {
                 multi: true,
                 useExisting: forwardRef(() => SuisInputNumberComponent),
             },
-        ], usesInheritance: true, ngImport: i0, template: "<input\n  class=\"suis-input-number\"\n  [class.suis-input-number--invalid]=\"invalid\"\n  type=\"number\"\n  [value]=\"value\"\n  [placeholder]=\"placeholder\"\n  [disabled]=\"readonly\"\n  (input)=\"onChange($event)\"\n  (focus)=\"onTouch()\"\n/>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host{display:block}.suis-input-number{width:100%;background-color:#fff;box-shadow:0 2px 5px #00000040;border-radius:.25rem;padding:.5rem 1rem;border:0;min-height:2rem;-moz-appearance:textfield}.suis-input-number:focus{box-shadow:0 2px 5px #192a56bf;outline:none}.suis-input-number--invalid{box-shadow:0 2px 5px #ff4757bf}.suis-input-number::-webkit-outer-spin-button,.suis-input-number::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], usesInheritance: true, ngImport: i0, template: "<input\n  type=\"number\"\n  class=\"suis-input-number\"\n  [class.suis-input-number--invalid]=\"invalid\"\n  [attr.id]=\"id\"\n  [attr.name]=\"name\"\n  [value]=\"value\"\n  [placeholder]=\"placeholder\"\n  [disabled]=\"readonly\"\n  (input)=\"onChange($event)\"\n  (focus)=\"onTouch()\"\n/>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host{display:block}.suis-input-number{width:100%;background-color:#fff;box-shadow:0 2px 5px #00000040;border-radius:.25rem;padding:.5rem 1rem;border:0;min-height:2rem;-moz-appearance:textfield}.suis-input-number:focus{box-shadow:0 2px 5px #192a56bf;outline:none}.suis-input-number--invalid{box-shadow:0 2px 5px #ff4757bf}.suis-input-number::-webkit-outer-spin-button,.suis-input-number::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SuisInputNumberComponent, decorators: [{
             type: Component,
@@ -738,25 +819,60 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImpor
                             multi: true,
                             useExisting: forwardRef(() => SuisInputNumberComponent),
                         },
-                    ], template: "<input\n  class=\"suis-input-number\"\n  [class.suis-input-number--invalid]=\"invalid\"\n  type=\"number\"\n  [value]=\"value\"\n  [placeholder]=\"placeholder\"\n  [disabled]=\"readonly\"\n  (input)=\"onChange($event)\"\n  (focus)=\"onTouch()\"\n/>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host{display:block}.suis-input-number{width:100%;background-color:#fff;box-shadow:0 2px 5px #00000040;border-radius:.25rem;padding:.5rem 1rem;border:0;min-height:2rem;-moz-appearance:textfield}.suis-input-number:focus{box-shadow:0 2px 5px #192a56bf;outline:none}.suis-input-number--invalid{box-shadow:0 2px 5px #ff4757bf}.suis-input-number::-webkit-outer-spin-button,.suis-input-number::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}\n"] }]
+                    ], template: "<input\n  type=\"number\"\n  class=\"suis-input-number\"\n  [class.suis-input-number--invalid]=\"invalid\"\n  [attr.id]=\"id\"\n  [attr.name]=\"name\"\n  [value]=\"value\"\n  [placeholder]=\"placeholder\"\n  [disabled]=\"readonly\"\n  (input)=\"onChange($event)\"\n  (focus)=\"onTouch()\"\n/>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host{display:block}.suis-input-number{width:100%;background-color:#fff;box-shadow:0 2px 5px #00000040;border-radius:.25rem;padding:.5rem 1rem;border:0;min-height:2rem;-moz-appearance:textfield}.suis-input-number:focus{box-shadow:0 2px 5px #192a56bf;outline:none}.suis-input-number--invalid{box-shadow:0 2px 5px #ff4757bf}.suis-input-number::-webkit-outer-spin-button,.suis-input-number::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}\n"] }]
         }], propDecorators: { placeholder: [{
                 type: Input
             }] } });
 
-class SuisLabelComponent {
+class SuisInputRadioComponent extends RadioControlValueAccessor {
     constructor() {
+        super(...arguments);
         /**
-         * Adds a red colored asterisk after the label. By default set to false.
+         * Sets input disabled state. By default set to false.
          */
-        this.required = false;
+        this.readonly = false;
+        /**
+         * Adds invalid styling to the input. By default set to false.
+         */
+        this.invalid = false;
+        /**
+         * Sets input checked state to true. By default set to false.
+         */
+        this.default = false;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SuisLabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: SuisLabelComponent, isStandalone: true, selector: "suis-label", inputs: { required: "required" }, ngImport: i0, template: "<label class=\"suis-label\">\n  <ng-content></ng-content>\n  <span *ngIf=\"required\" class=\"suis-label__asterisk\">*</span>\n  <ng-content select=\"[suisLabelAside]\"></ng-content>\n</label>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host{display:block}.suis-label{font-size:.875rem;display:flex}.suis-label__asterisk{color:#ff4757;margin-left:.0625rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    ngAfterViewInit() {
+        if (this.default)
+            (this.radioInput?.nativeElement).checked = true;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SuisInputRadioComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: SuisInputRadioComponent, isStandalone: true, selector: "suis-input-radio", inputs: { id: "id", readonly: "readonly", invalid: "invalid", default: "default" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                multi: true,
+                useExisting: forwardRef(() => SuisInputRadioComponent),
+            },
+        ], viewQueries: [{ propertyName: "radioInput", first: true, predicate: ["input"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<input\n  #input\n  type=\"radio\"\n  class=\"suis-input-radio\"\n  [attr.id]=\"id\"\n  [attr.name]=\"name\"\n  [value]=\"value\"\n  [disabled]=\"readonly\"\n/>\n\n<suis-label [for]=\"id\" [pointer]=\"true\" [readonly]=\"readonly\">\n  <div\n    [tabindex]=\"readonly ? -1 : 0\"\n    class=\"suis-input-radio__circle\"\n    [class.suis-input-radio__circle--invalid]=\"invalid\"\n    [class.suis-input-radio__circle--readonly]=\"readonly\"\n  >\n    <div class=\"suis-input-radio__circle__fill\"></div>\n  </div>\n  <ng-content></ng-content>\n</suis-label>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host{display:flex}.suis-input-radio{display:none}.suis-input-radio:checked~suis-label ::ng-deep .suis-input-radio__circle__fill{border-radius:100%;height:.75rem;width:.75rem;background-color:#273c75}.suis-input-radio:checked~suis-label ::ng-deep .suis-input-radio__circle--readonly .suis-input-radio__circle__fill{background-color:#dcdde1}.suis-input-radio__circle{margin-right:.5rem;border:.0625rem solid #192a56;border-radius:100%;height:1.25rem;width:1.25rem;display:flex;justify-content:center;align-items:center}.suis-input-radio__circle:focus{box-shadow:0 2px 5px #192a56bf;outline:none}.suis-input-radio__circle--readonly{border:.0625rem solid #dcdde1}.suis-input-radio__circle--readonly:focus{box-shadow:none}.suis-input-radio__circle--invalid{border:.0625rem solid #ff4757;box-shadow:0 2px 5px #ff4757bf}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: SuisLabelComponent, selector: "suis-label", inputs: ["for", "required", "pointer", "readonly"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SuisLabelComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SuisInputRadioComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'suis-label', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<label class=\"suis-label\">\n  <ng-content></ng-content>\n  <span *ngIf=\"required\" class=\"suis-label__asterisk\">*</span>\n  <ng-content select=\"[suisLabelAside]\"></ng-content>\n</label>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host{display:block}.suis-label{font-size:.875rem;display:flex}.suis-label__asterisk{color:#ff4757;margin-left:.0625rem}\n"] }]
-        }], propDecorators: { required: [{
+            args: [{ selector: 'suis-input-radio', standalone: true, imports: [CommonModule, SuisLabelComponent], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            multi: true,
+                            useExisting: forwardRef(() => SuisInputRadioComponent),
+                        },
+                    ], template: "<input\n  #input\n  type=\"radio\"\n  class=\"suis-input-radio\"\n  [attr.id]=\"id\"\n  [attr.name]=\"name\"\n  [value]=\"value\"\n  [disabled]=\"readonly\"\n/>\n\n<suis-label [for]=\"id\" [pointer]=\"true\" [readonly]=\"readonly\">\n  <div\n    [tabindex]=\"readonly ? -1 : 0\"\n    class=\"suis-input-radio__circle\"\n    [class.suis-input-radio__circle--invalid]=\"invalid\"\n    [class.suis-input-radio__circle--readonly]=\"readonly\"\n  >\n    <div class=\"suis-input-radio__circle__fill\"></div>\n  </div>\n  <ng-content></ng-content>\n</suis-label>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host{display:flex}.suis-input-radio{display:none}.suis-input-radio:checked~suis-label ::ng-deep .suis-input-radio__circle__fill{border-radius:100%;height:.75rem;width:.75rem;background-color:#273c75}.suis-input-radio:checked~suis-label ::ng-deep .suis-input-radio__circle--readonly .suis-input-radio__circle__fill{background-color:#dcdde1}.suis-input-radio__circle{margin-right:.5rem;border:.0625rem solid #192a56;border-radius:100%;height:1.25rem;width:1.25rem;display:flex;justify-content:center;align-items:center}.suis-input-radio__circle:focus{box-shadow:0 2px 5px #192a56bf;outline:none}.suis-input-radio__circle--readonly{border:.0625rem solid #dcdde1}.suis-input-radio__circle--readonly:focus{box-shadow:none}.suis-input-radio__circle--invalid{border:.0625rem solid #ff4757;box-shadow:0 2px 5px #ff4757bf}\n"] }]
+        }], propDecorators: { radioInput: [{
+                type: ViewChild,
+                args: ['input']
+            }], id: [{
+                type: Input,
+                args: [{ required: true }]
+            }], readonly: [{
+                type: Input
+            }], invalid: [{
+                type: Input
+            }], default: [{
                 type: Input
             }] } });
 
@@ -1895,5 +2011,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { SuisAlertComponent, SuisBoxComponent, SuisBreadcrumbsComponent, SuisButtonComponent, SuisButtonLinkComponent, SuisButtonOutlinedComponent, SuisChipComponent, SuisContainerComponent, SuisFormFieldComponent, SuisIconComponent, SuisIconType, SuisInputChipsComponent, SuisInputNumberComponent, SuisInputTextComponent, SuisLabelComponent, SuisNavigationComponent, SuisNavigationGroupComponent, SuisNavigationGroupItemComponent, SuisNavigationItemComponent, SuisNavigationItemDirective, SuisNavigationModule, SuisNgClassPipe, SuisNotificationComponent, SuisNotificationService, SuisNotificationsComponent, SuisPaginationComponent, SuisProgressBarComponent, SuisSelectComponent, SuisSelectModule, SuisSelectMultiComponent, SuisSelectMultiModule, SuisSelectOptionComponent, SuisSelectOptionDirective, SuisSpinnerComponent, SuisSpinnerContainerComponent, SuisTabDirective, SuisTableCellDirective, SuisTableColumnDirective, SuisTableComponent, SuisTableModule, SuisTabsComponent, SuisTabsModule, SuisTitleComponent, SuisToolbarComponent };
+export { SuisAlertComponent, SuisBoxComponent, SuisBreadcrumbsComponent, SuisButtonComponent, SuisButtonLinkComponent, SuisButtonOutlinedComponent, SuisChipComponent, SuisContainerComponent, SuisFormFieldComponent, SuisIconComponent, SuisIconType, SuisInputCheckboxComponent, SuisInputChipsComponent, SuisInputComponent, SuisInputNumberComponent, SuisInputRadioComponent, SuisLabelComponent, SuisNavigationComponent, SuisNavigationGroupComponent, SuisNavigationGroupItemComponent, SuisNavigationItemComponent, SuisNavigationItemDirective, SuisNavigationModule, SuisNgClassPipe, SuisNotificationComponent, SuisNotificationService, SuisNotificationsComponent, SuisPaginationComponent, SuisProgressBarComponent, SuisSelectComponent, SuisSelectModule, SuisSelectMultiComponent, SuisSelectMultiModule, SuisSelectOptionComponent, SuisSelectOptionDirective, SuisSpinnerComponent, SuisSpinnerContainerComponent, SuisTabDirective, SuisTableCellDirective, SuisTableColumnDirective, SuisTableComponent, SuisTableModule, SuisTabsComponent, SuisTabsModule, SuisTitleComponent, SuisToolbarComponent };
 //# sourceMappingURL=suis.mjs.map