suis 0.29.0 → 0.30.0

package/fesm2022/suis.mjs

@@ -8,23 +8,6 @@ import * as i2$1 from '@angular/forms';
 import { NG_VALUE_ACCESSOR, FormControl, ReactiveFormsModule, RadioControlValueAccessor, FormsModule } from '@angular/forms';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 
-class SuisNgClassPipe {
-    transform(prefix, ...args) {
-        const classes = [];
-        args.forEach((arg) => classes.push(`${prefix}--${arg}`));
-        return classes;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SuisNgClassPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "16.0.0", ngImport: i0, type: SuisNgClassPipe, isStandalone: true, name: "suisNgClass" }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SuisNgClassPipe, decorators: [{
-            type: Pipe,
-            args: [{
-                    standalone: true,
-                    name: 'suisNgClass',
-                }]
-        }] });
-
 var SuisIconType;
 (function (SuisIconType) {
     SuisIconType["INFO"] = "info";
@@ -85,6 +68,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImpor
                 }]
         }] });
 
+class SuisNgClassPipe {
+    transform(prefix, ...args) {
+        const classes = [];
+        args.forEach((arg) => classes.push(`${prefix}--${arg}`));
+        return classes;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SuisNgClassPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "16.0.0", ngImport: i0, type: SuisNgClassPipe, isStandalone: true, name: "suisNgClass" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SuisNgClassPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    standalone: true,
+                    name: 'suisNgClass',
+                }]
+        }] });
+
 class SuisIconComponent {
     constructor() {
         /** @internal */
@@ -140,6 +140,35 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImpor
                 type: Input
             }] } });
 
+class SuisAccordionComponent {
+    constructor() {
+        /** @internal */
+        this.SuisIconType = SuisIconType;
+        /**
+         * Controlls styling of the accordion based on expanded state of group. By default set to false.
+         */
+        this.expanded = false;
+        /**
+         * Emits when expanded value of the accordion has been changed.
+         */
+        this.expandedChange = new EventEmitter();
+    }
+    onToggle() {
+        this.expanded = !this.expanded;
+        this.expandedChange.emit(this.expanded);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SuisAccordionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: SuisAccordionComponent, isStandalone: true, selector: "suis-accordion", inputs: { expanded: "expanded" }, outputs: { expandedChange: "expandedChange" }, ngImport: i0, template: "<div class=\"suis-accordion\">\n  <button (click)=\"onToggle()\" class=\"suis-accordion__header\">\n    <ng-content select=\"[suisAccordionHeader]\"></ng-content>\n    <suis-icon\n      [type]=\"expanded ? SuisIconType.CHEVRON_UP : SuisIconType.CHEVRON_DOWN\"\n      size=\"lg\"\n      color=\"primary\"\n    ></suis-icon>\n  </button>\n  <div class=\"suis-accordion__content\" *ngIf=\"expanded\">\n    <ng-content select=\"[suisAccordionContent]\"></ng-content>\n  </div>\n</div>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host{display:block}.suis-accordion__header{width:100%;display:flex;align-items:center;justify-content:space-between;padding:.75rem 1rem;background-color:#fff;border:.0625rem solid #dcdde1;border-radius:.25rem;font-size:1rem;font-weight:500;color:#192a56}.suis-accordion__header:hover{cursor:pointer}.suis-accordion__content{padding:.75rem 1rem;border:.0625rem solid #dcdde1;border-top:0;font-size:.875rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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: SuisAccordionComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'suis-accordion', standalone: true, imports: [CommonModule, SuisIconComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"suis-accordion\">\n  <button (click)=\"onToggle()\" class=\"suis-accordion__header\">\n    <ng-content select=\"[suisAccordionHeader]\"></ng-content>\n    <suis-icon\n      [type]=\"expanded ? SuisIconType.CHEVRON_UP : SuisIconType.CHEVRON_DOWN\"\n      size=\"lg\"\n      color=\"primary\"\n    ></suis-icon>\n  </button>\n  <div class=\"suis-accordion__content\" *ngIf=\"expanded\">\n    <ng-content select=\"[suisAccordionContent]\"></ng-content>\n  </div>\n</div>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host{display:block}.suis-accordion__header{width:100%;display:flex;align-items:center;justify-content:space-between;padding:.75rem 1rem;background-color:#fff;border:.0625rem solid #dcdde1;border-radius:.25rem;font-size:1rem;font-weight:500;color:#192a56}.suis-accordion__header:hover{cursor:pointer}.suis-accordion__content{padding:.75rem 1rem;border:.0625rem solid #dcdde1;border-top:0;font-size:.875rem}\n"] }]
+        }], propDecorators: { expanded: [{
+                type: Input
+            }], expandedChange: [{
+                type: Output
+            }] } });
+
 class SuisAlertComponent {
     constructor() {
         /** @internal */
@@ -183,11 +212,11 @@ class SuisBoxComponent {
         this.spacing = false;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SuisBoxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: SuisBoxComponent, isStandalone: true, selector: "suis-box", inputs: { spacing: "spacing" }, ngImport: i0, template: "<div class=\"suis-box\" [class.suis-box--spacing]=\"spacing\">\n  <ng-content></ng-content>\n</div>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host{display:block}.suis-box{background-color:#fff;box-shadow:0 2px 5px #00000040;border-radius:.25rem}.suis-box--spacing{padding:1rem}@media (min-width: 768px){.suis-box--spacing{padding:1.25rem}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: SuisBoxComponent, isStandalone: true, selector: "suis-box", inputs: { spacing: "spacing" }, ngImport: i0, template: "<div class=\"suis-box\" [class.suis-box--spacing]=\"spacing\">\n  <ng-content></ng-content>\n</div>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host{display:block}.suis-box{background-color:#fff;border:.0625rem solid #dcdde1;border-radius:.25rem}.suis-box--spacing{padding:1rem}@media (min-width: 768px){.suis-box--spacing{padding:1.25rem}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SuisBoxComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'suis-box', standalone: true, imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"suis-box\" [class.suis-box--spacing]=\"spacing\">\n  <ng-content></ng-content>\n</div>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host{display:block}.suis-box{background-color:#fff;box-shadow:0 2px 5px #00000040;border-radius:.25rem}.suis-box--spacing{padding:1rem}@media (min-width: 768px){.suis-box--spacing{padding:1.25rem}}\n"] }]
+            args: [{ selector: 'suis-box', standalone: true, imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"suis-box\" [class.suis-box--spacing]=\"spacing\">\n  <ng-content></ng-content>\n</div>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host{display:block}.suis-box{background-color:#fff;border:.0625rem solid #dcdde1;border-radius:.25rem}.suis-box--spacing{padding:1rem}@media (min-width: 768px){.suis-box--spacing{padding:1.25rem}}\n"] }]
         }], propDecorators: { spacing: [{
                 type: Input
             }] } });
@@ -504,7 +533,7 @@ class SuisInputComponent extends SuisInputBase {
                 multi: true,
                 useExisting: forwardRef(() => SuisInputComponent),
             },
-        ], 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 }); }
+        ], 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;border-radius:.25rem;padding:.5rem 1rem;border:.0625rem solid #dcdde1;min-height:2.25rem}.suis-input:focus{border:.0625rem solid #192a56;box-shadow:0 2px 5px #192a56bf;outline:none}.suis-input--invalid{border:.0625rem solid #ff4757}.suis-input--invalid:focus{border:.0625rem solid #ff4757;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: SuisInputComponent, decorators: [{
             type: Component,
@@ -514,7 +543,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImpor
                             multi: true,
                             useExisting: forwardRef(() => SuisInputComponent),
                         },
-                    ], 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"] }]
+                    ], 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;border-radius:.25rem;padding:.5rem 1rem;border:.0625rem solid #dcdde1;min-height:2.25rem}.suis-input:focus{border:.0625rem solid #192a56;box-shadow:0 2px 5px #192a56bf;outline:none}.suis-input--invalid{border:.0625rem solid #ff4757}.suis-input--invalid:focus{border:.0625rem solid #ff4757;box-shadow:0 2px 5px #ff4757bf}\n"] }]
         }], propDecorators: { type: [{
                 type: Input
             }], placeholder: [{
@@ -605,7 +634,7 @@ class SuisInputCheckboxComponent extends SuisCheckboxBase {
                 multi: true,
                 useExisting: forwardRef(() => SuisInputCheckboxComponent),
             },
-        ], usesInheritance: true, ngImport: i0, template: "<input\n  #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 }); }
+        ], usesInheritance: true, ngImport: i0, template: "<input\n  #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:checked~suis-label ::ng-deep .suis-input-checkbox__check{border:.0625rem solid #192a56}.suis-input-checkbox__check{width:1.25rem;height:1.25rem;border:.0625rem solid #dcdde1;display:flex;justify-content:center;align-items:center;margin-right:.5rem;background-color:#fff;border-radius:.25rem}.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}.suis-input-checkbox__check--invalid:focus{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,
@@ -615,7 +644,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImpor
                             multi: true,
                             useExisting: forwardRef(() => SuisInputCheckboxComponent),
                         },
-                    ], template: "<input\n  #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"] }]
+                    ], template: "<input\n  #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:checked~suis-label ::ng-deep .suis-input-checkbox__check{border:.0625rem solid #192a56}.suis-input-checkbox__check{width:1.25rem;height:1.25rem;border:.0625rem solid #dcdde1;display:flex;justify-content:center;align-items:center;margin-right:.5rem;background-color:#fff;border-radius:.25rem}.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}.suis-input-checkbox__check--invalid:focus{box-shadow:0 2px 5px #ff4757bf}\n"] }]
         }] });
 
 class SuisInputChipsComponent extends SuisInputBase {
@@ -736,7 +765,7 @@ class SuisInputImageComponent extends SuisInputBase {
                 multi: true,
                 useExisting: forwardRef(() => SuisInputImageComponent),
             },
-        ], viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["input"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"suis-input-image\">\n  <figure *ngIf=\"imageUrl\" class=\"suis-input-image__preview\">\n    <img [src]=\"imageUrl\" alt=\"Uploaded image\" />\n    <button type=\"button\" (click)=\"onRemove()\">\n      <suis-icon\n        [type]=\"SuisIconType.CROSS\"\n        color=\"danger\"\n        size=\"md\"\n        [filled]=\"true\"\n      ></suis-icon>\n    </button>\n  </figure>\n  <input\n    #input\n    type=\"file\"\n    class=\"suis-input-image__input\"\n    [class.suis-input-image--invalid]=\"invalid\"\n    [attr.id]=\"id\"\n    [attr.name]=\"name\"\n    [disabled]=\"readonly\"\n    (input)=\"onChange($event)\"\n    (focus)=\"onTouch()\"\n  />\n</div>\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-image{width:100%;background-color:#fff;box-shadow:0 2px 5px #00000040;border-radius:.25rem;padding:.5rem 1rem;border:0;min-height:2rem;display:flex;align-items:center}.suis-input-image:focus{box-shadow:0 2px 5px #192a56bf;outline:none}.suis-input-image--invalid{box-shadow:0 2px 5px #ff4757bf}.suis-input-image__preview{position:relative;margin-right:1rem}.suis-input-image__preview img{display:block;min-width:6.25rem;min-height:6.25rem;max-width:6.25rem;max-height:6.25rem;border-radius:.25rem;object-fit:contain;background-color:#dcdde1d9}.suis-input-image__preview button{position:absolute;top:.1875rem;right:.1875rem;border:0;background-color:transparent;cursor:pointer}.suis-input-image__input::file-selector-button{color:#fff;background-color:#273c75;border-radius:.25rem;transition:background-color .25s ease-in-out;padding:.25rem .75rem;border:0;font-size:.75rem}.suis-input-image__input::file-selector-button:hover{background-color:#273c75d9;cursor:pointer}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: SuisIconComponent, selector: "suis-icon", inputs: ["size", "color", "type", "outlined", "filled", "pointer", "bold"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["input"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"suis-input-image\" [class.suis-input-image--invalid]=\"invalid\">\n  <figure *ngIf=\"imageUrl\" class=\"suis-input-image__preview\">\n    <img [src]=\"imageUrl\" alt=\"Uploaded image\" />\n    <button type=\"button\" (click)=\"onRemove()\">\n      <suis-icon\n        [type]=\"SuisIconType.CROSS\"\n        color=\"danger\"\n        size=\"md\"\n        [filled]=\"true\"\n      ></suis-icon>\n    </button>\n  </figure>\n  <input\n    #input\n    type=\"file\"\n    class=\"suis-input-image__input\"\n    [attr.id]=\"id\"\n    [attr.name]=\"name\"\n    [disabled]=\"readonly\"\n    (input)=\"onChange($event)\"\n    (focus)=\"onTouch()\"\n  />\n</div>\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-image{width:100%;background-color:#fff;border-radius:.25rem;padding:.5rem 1rem;border:.0625rem solid #dcdde1;min-height:2.25rem;display:flex;align-items:center}.suis-input-image:focus{border:.0625rem solid #192a56;box-shadow:0 2px 5px #192a56bf;outline:none}.suis-input-image--invalid{border:.0625rem solid #ff4757}.suis-input-image--invalid:focus{border:.0625rem solid #ff4757;box-shadow:0 2px 5px #ff4757bf}.suis-input-image__preview{position:relative;margin-right:1rem}.suis-input-image__preview img{display:block;min-width:6.25rem;min-height:6.25rem;max-width:6.25rem;max-height:6.25rem;border-radius:.25rem;object-fit:contain;background-color:#dcdde1d9}.suis-input-image__preview button{position:absolute;top:.1875rem;right:.1875rem;border:0;background-color:transparent;cursor:pointer}.suis-input-image__input::file-selector-button{color:#fff;background-color:#273c75;border-radius:.25rem;transition:background-color .25s ease-in-out;padding:.25rem .75rem;border:0;font-size:.75rem}.suis-input-image__input::file-selector-button:hover{background-color:#273c75d9;cursor:pointer}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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: SuisInputImageComponent, decorators: [{
             type: Component,
@@ -746,7 +775,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImpor
                             multi: true,
                             useExisting: forwardRef(() => SuisInputImageComponent),
                         },
-                    ], template: "<div class=\"suis-input-image\">\n  <figure *ngIf=\"imageUrl\" class=\"suis-input-image__preview\">\n    <img [src]=\"imageUrl\" alt=\"Uploaded image\" />\n    <button type=\"button\" (click)=\"onRemove()\">\n      <suis-icon\n        [type]=\"SuisIconType.CROSS\"\n        color=\"danger\"\n        size=\"md\"\n        [filled]=\"true\"\n      ></suis-icon>\n    </button>\n  </figure>\n  <input\n    #input\n    type=\"file\"\n    class=\"suis-input-image__input\"\n    [class.suis-input-image--invalid]=\"invalid\"\n    [attr.id]=\"id\"\n    [attr.name]=\"name\"\n    [disabled]=\"readonly\"\n    (input)=\"onChange($event)\"\n    (focus)=\"onTouch()\"\n  />\n</div>\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-image{width:100%;background-color:#fff;box-shadow:0 2px 5px #00000040;border-radius:.25rem;padding:.5rem 1rem;border:0;min-height:2rem;display:flex;align-items:center}.suis-input-image:focus{box-shadow:0 2px 5px #192a56bf;outline:none}.suis-input-image--invalid{box-shadow:0 2px 5px #ff4757bf}.suis-input-image__preview{position:relative;margin-right:1rem}.suis-input-image__preview img{display:block;min-width:6.25rem;min-height:6.25rem;max-width:6.25rem;max-height:6.25rem;border-radius:.25rem;object-fit:contain;background-color:#dcdde1d9}.suis-input-image__preview button{position:absolute;top:.1875rem;right:.1875rem;border:0;background-color:transparent;cursor:pointer}.suis-input-image__input::file-selector-button{color:#fff;background-color:#273c75;border-radius:.25rem;transition:background-color .25s ease-in-out;padding:.25rem .75rem;border:0;font-size:.75rem}.suis-input-image__input::file-selector-button:hover{background-color:#273c75d9;cursor:pointer}\n"] }]
+                    ], template: "<div class=\"suis-input-image\" [class.suis-input-image--invalid]=\"invalid\">\n  <figure *ngIf=\"imageUrl\" class=\"suis-input-image__preview\">\n    <img [src]=\"imageUrl\" alt=\"Uploaded image\" />\n    <button type=\"button\" (click)=\"onRemove()\">\n      <suis-icon\n        [type]=\"SuisIconType.CROSS\"\n        color=\"danger\"\n        size=\"md\"\n        [filled]=\"true\"\n      ></suis-icon>\n    </button>\n  </figure>\n  <input\n    #input\n    type=\"file\"\n    class=\"suis-input-image__input\"\n    [attr.id]=\"id\"\n    [attr.name]=\"name\"\n    [disabled]=\"readonly\"\n    (input)=\"onChange($event)\"\n    (focus)=\"onTouch()\"\n  />\n</div>\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-image{width:100%;background-color:#fff;border-radius:.25rem;padding:.5rem 1rem;border:.0625rem solid #dcdde1;min-height:2.25rem;display:flex;align-items:center}.suis-input-image:focus{border:.0625rem solid #192a56;box-shadow:0 2px 5px #192a56bf;outline:none}.suis-input-image--invalid{border:.0625rem solid #ff4757}.suis-input-image--invalid:focus{border:.0625rem solid #ff4757;box-shadow:0 2px 5px #ff4757bf}.suis-input-image__preview{position:relative;margin-right:1rem}.suis-input-image__preview img{display:block;min-width:6.25rem;min-height:6.25rem;max-width:6.25rem;max-height:6.25rem;border-radius:.25rem;object-fit:contain;background-color:#dcdde1d9}.suis-input-image__preview button{position:absolute;top:.1875rem;right:.1875rem;border:0;background-color:transparent;cursor:pointer}.suis-input-image__input::file-selector-button{color:#fff;background-color:#273c75;border-radius:.25rem;transition:background-color .25s ease-in-out;padding:.25rem .75rem;border:0;font-size:.75rem}.suis-input-image__input::file-selector-button:hover{background-color:#273c75d9;cursor:pointer}\n"] }]
         }], propDecorators: { fileInput: [{
                 type: ViewChild,
                 args: ['input']
@@ -879,7 +908,7 @@ class SuisInputNumberComponent extends SuisInputBase {
                 multi: true,
                 useExisting: forwardRef(() => SuisInputNumberComponent),
             },
-        ], 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 }); }
+        ], 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;border-radius:.25rem;padding:.5rem 1rem;border:.0625rem solid #dcdde1;min-height:2.25rem;-moz-appearance:textfield}.suis-input-number:focus{border:.0625rem solid #192a56;box-shadow:0 2px 5px #192a56bf;outline:none}.suis-input-number--invalid{border:.0625rem solid #ff4757}.suis-input-number--invalid:focus{border:.0625rem solid #ff4757;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,
@@ -889,7 +918,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImpor
                             multi: true,
                             useExisting: forwardRef(() => SuisInputNumberComponent),
                         },
-                    ], 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"] }]
+                    ], 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;border-radius:.25rem;padding:.5rem 1rem;border:.0625rem solid #dcdde1;min-height:2.25rem;-moz-appearance:textfield}.suis-input-number:focus{border:.0625rem solid #192a56;box-shadow:0 2px 5px #192a56bf;outline:none}.suis-input-number--invalid{border:.0625rem solid #ff4757}.suis-input-number--invalid:focus{border:.0625rem solid #ff4757;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
             }] } });
@@ -921,7 +950,7 @@ class SuisInputRadioComponent extends RadioControlValueAccessor {
                 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 }); }
+        ], 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{border:.0625rem solid #192a56}.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 #dcdde1;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: SuisInputRadioComponent, decorators: [{
             type: Component,
@@ -931,7 +960,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImpor
                             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"] }]
+                    ], 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{border:.0625rem solid #192a56}.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 #dcdde1;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']
@@ -946,13 +975,42 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImpor
                 type: Input
             }] } });
 
+class SuisItemComponent {
+    constructor() {
+        /**
+         * Adds a padding around the content. By default set to true.
+         */
+        this.spacing = true;
+        /**
+         * Styles item as a header. By default set to false.
+         */
+        this.header = false;
+        /**
+         * Displays border bottom below the item. Does not effect header item. By default set to true.
+         */
+        this.divider = true;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SuisItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: SuisItemComponent, isStandalone: true, selector: "suis-item", inputs: { spacing: "spacing", header: "header", divider: "divider" }, ngImport: i0, template: "<div\n  class=\"suis-item\"\n  [class.suis-item--spacing]=\"spacing\"\n  [class.suis-item--header]=\"header\"\n  [class.suis-item--divider]=\"divider && !header\"\n>\n  <ng-content></ng-content>\n</div>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host{display:block}.suis-item{background-color:#fff;border:0}.suis-item--spacing{padding:1rem}.suis-item--divider{border-bottom:.0625rem solid #dcdde1}.suis-item--header{font-weight:500;display:flex;color:#192a56;justify-content:center;align-items:center;border-bottom:.1875rem solid #192a56}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SuisItemComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'suis-item', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  class=\"suis-item\"\n  [class.suis-item--spacing]=\"spacing\"\n  [class.suis-item--header]=\"header\"\n  [class.suis-item--divider]=\"divider && !header\"\n>\n  <ng-content></ng-content>\n</div>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host{display:block}.suis-item{background-color:#fff;border:0}.suis-item--spacing{padding:1rem}.suis-item--divider{border-bottom:.0625rem solid #dcdde1}.suis-item--header{font-weight:500;display:flex;color:#192a56;justify-content:center;align-items:center;border-bottom:.1875rem solid #192a56}\n"] }]
+        }], propDecorators: { spacing: [{
+                type: Input
+            }], header: [{
+                type: Input
+            }], divider: [{
+                type: Input
+            }] } });
+
 class SuisNavigationItemComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SuisNavigationItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: SuisNavigationItemComponent, isStandalone: true, selector: "suis-navigation-item", inputs: { item: "item", templateRef: "templateRef" }, ngImport: i0, template: "<a\n  *ngIf=\"item\"\n  class=\"suis-navigation-item\"\n  [routerLink]=\"item.link\"\n  routerLinkActive=\"active\"\n>\n  <div class=\"suis-navigation-item__content\">\n    <ng-container *ngIf=\"templateRef; else label\">\n      <ng-container\n        *ngTemplateOutlet=\"templateRef; context: { $implicit: item }\"\n      ></ng-container>\n    </ng-container>\n    <ng-template #label>\n      {{ item.label }}\n    </ng-template>\n  </div>\n</a>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host{display:block;width:100%}.suis-navigation-item{display:flex;justify-content:space-between;padding:1rem;color:#fff;font-size:.875rem;text-decoration:none;text-transform:uppercase;width:100%;position:relative;cursor:pointer;padding:.75rem 1rem .75rem 2rem}.suis-navigation-item:hover{background-color:#273c75d9}.suis-navigation-item.active{background-color:#273c75;color:#fff;font-weight:600}.suis-navigation-item.active:hover{background-color:#273c75}.suis-navigation-item.active:before{content:\"\";position:absolute;top:0;bottom:0;left:0;width:.1875rem;height:100%;background-color:#dcdde1}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i2.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: SuisNavigationItemComponent, isStandalone: true, selector: "suis-navigation-item", inputs: { item: "item", templateRef: "templateRef" }, ngImport: i0, template: "<a\n  *ngIf=\"item\"\n  class=\"suis-navigation-item\"\n  [routerLink]=\"item.link\"\n  routerLinkActive=\"active\"\n>\n  <div class=\"suis-navigation-item__content\">\n    <ng-container *ngIf=\"templateRef; else label\">\n      <ng-container\n        *ngTemplateOutlet=\"templateRef; context: { $implicit: item }\"\n      ></ng-container>\n    </ng-container>\n    <ng-template #label>\n      {{ item.label }}\n    </ng-template>\n  </div>\n</a>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host{display:block;width:100%}.suis-navigation-item{display:flex;justify-content:space-between;padding:1rem;color:#fff;font-size:.875rem;text-decoration:none;text-transform:uppercase;width:100%;border-radius:.25rem;position:relative;cursor:pointer;padding:.75rem 1rem .75rem 2rem}.suis-navigation-item:hover{background-color:#273c75d9}.suis-navigation-item.active{background-color:#273c75;color:#fff;font-weight:600}.suis-navigation-item.active:hover{background-color:#273c75}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i2.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SuisNavigationItemComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'suis-navigation-item', standalone: true, imports: [CommonModule, RouterModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<a\n  *ngIf=\"item\"\n  class=\"suis-navigation-item\"\n  [routerLink]=\"item.link\"\n  routerLinkActive=\"active\"\n>\n  <div class=\"suis-navigation-item__content\">\n    <ng-container *ngIf=\"templateRef; else label\">\n      <ng-container\n        *ngTemplateOutlet=\"templateRef; context: { $implicit: item }\"\n      ></ng-container>\n    </ng-container>\n    <ng-template #label>\n      {{ item.label }}\n    </ng-template>\n  </div>\n</a>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host{display:block;width:100%}.suis-navigation-item{display:flex;justify-content:space-between;padding:1rem;color:#fff;font-size:.875rem;text-decoration:none;text-transform:uppercase;width:100%;position:relative;cursor:pointer;padding:.75rem 1rem .75rem 2rem}.suis-navigation-item:hover{background-color:#273c75d9}.suis-navigation-item.active{background-color:#273c75;color:#fff;font-weight:600}.suis-navigation-item.active:hover{background-color:#273c75}.suis-navigation-item.active:before{content:\"\";position:absolute;top:0;bottom:0;left:0;width:.1875rem;height:100%;background-color:#dcdde1}\n"] }]
+            args: [{ selector: 'suis-navigation-item', standalone: true, imports: [CommonModule, RouterModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<a\n  *ngIf=\"item\"\n  class=\"suis-navigation-item\"\n  [routerLink]=\"item.link\"\n  routerLinkActive=\"active\"\n>\n  <div class=\"suis-navigation-item__content\">\n    <ng-container *ngIf=\"templateRef; else label\">\n      <ng-container\n        *ngTemplateOutlet=\"templateRef; context: { $implicit: item }\"\n      ></ng-container>\n    </ng-container>\n    <ng-template #label>\n      {{ item.label }}\n    </ng-template>\n  </div>\n</a>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host{display:block;width:100%}.suis-navigation-item{display:flex;justify-content:space-between;padding:1rem;color:#fff;font-size:.875rem;text-decoration:none;text-transform:uppercase;width:100%;border-radius:.25rem;position:relative;cursor:pointer;padding:.75rem 1rem .75rem 2rem}.suis-navigation-item:hover{background-color:#273c75d9}.suis-navigation-item.active{background-color:#273c75;color:#fff;font-weight:600}.suis-navigation-item.active:hover{background-color:#273c75}\n"] }]
         }], propDecorators: { item: [{
                 type: Input
             }], templateRef: [{
@@ -1001,11 +1059,11 @@ class SuisNavigationGroupItemComponent {
         this.expandedChange.emit(this.expanded);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SuisNavigationGroupItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: SuisNavigationGroupItemComponent, isStandalone: true, selector: "suis-navigation-group-item", inputs: { item: "item", templateRef: "templateRef", expanded: "expanded", expandable: "expandable" }, outputs: { expandedChange: "expandedChange" }, ngImport: i0, template: "<a\n  *ngIf=\"item\"\n  class=\"suis-navigation-group-item\"\n  [routerLink]=\"expandable ? undefined : item.link\"\n  routerLinkActive=\"active\"\n  (click)=\"onToggle()\"\n>\n  <div class=\"suis-navigation-group-item__content\">\n    <ng-container *ngIf=\"templateRef; else label\">\n      <ng-container\n        *ngTemplateOutlet=\"templateRef; context: { $implicit: item }\"\n      ></ng-container>\n    </ng-container>\n    <ng-template #label>\n      {{ item.label }}\n    </ng-template>\n  </div>\n  <div *ngIf=\"expandable\" class=\"suis-navigation-group-item__actions\">\n    <suis-icon\n      [type]=\"expanded ? SuisIconType.CHEVRON_UP : SuisIconType.CHEVRON_DOWN\"\n      size=\"lg\"\n      color=\"white\"\n    ></suis-icon>\n  </div>\n</a>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host{display:block;width:100%}.suis-navigation-group-item{display:flex;justify-content:space-between;padding:1rem;color:#fff;font-size:.875rem;text-decoration:none;text-transform:uppercase;width:100%;position:relative;cursor:pointer;font-size:1rem;border-bottom:.0625rem solid #273c75}.suis-navigation-group-item:hover{background-color:#273c75d9}.suis-navigation-group-item.active{background-color:#273c75;color:#fff;font-weight:600}.suis-navigation-group-item.active:hover{background-color:#273c75}.suis-navigation-group-item.active:before{content:\"\";position:absolute;top:0;bottom:0;left:0;width:.1875rem;height:100%;background-color:#dcdde1}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SuisIconComponent, selector: "suis-icon", inputs: ["size", "color", "type", "outlined", "filled", "pointer", "bold"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i2.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: SuisNavigationGroupItemComponent, isStandalone: true, selector: "suis-navigation-group-item", inputs: { item: "item", templateRef: "templateRef", expanded: "expanded", expandable: "expandable" }, outputs: { expandedChange: "expandedChange" }, ngImport: i0, template: "<a\n  *ngIf=\"item\"\n  class=\"suis-navigation-group-item\"\n  [routerLink]=\"expandable ? undefined : item.link\"\n  routerLinkActive=\"active\"\n  (click)=\"onToggle()\"\n>\n  <div class=\"suis-navigation-group-item__content\">\n    <ng-container *ngIf=\"templateRef; else label\">\n      <ng-container\n        *ngTemplateOutlet=\"templateRef; context: { $implicit: item }\"\n      ></ng-container>\n    </ng-container>\n    <ng-template #label>\n      {{ item.label }}\n    </ng-template>\n  </div>\n  <div *ngIf=\"expandable\" class=\"suis-navigation-group-item__actions\">\n    <suis-icon\n      [type]=\"expanded ? SuisIconType.CHEVRON_UP : SuisIconType.CHEVRON_DOWN\"\n      size=\"lg\"\n      color=\"white\"\n    ></suis-icon>\n  </div>\n</a>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host{display:block;width:100%}.suis-navigation-group-item{display:flex;justify-content:space-between;padding:1rem;color:#fff;font-size:.875rem;text-decoration:none;text-transform:uppercase;width:100%;border-radius:.25rem;position:relative;cursor:pointer;font-size:1rem;border-bottom:.0625rem solid #273c75}.suis-navigation-group-item:hover{background-color:#273c75d9}.suis-navigation-group-item.active{background-color:#273c75;color:#fff;font-weight:600}.suis-navigation-group-item.active:hover{background-color:#273c75}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SuisIconComponent, selector: "suis-icon", inputs: ["size", "color", "type", "outlined", "filled", "pointer", "bold"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i2.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SuisNavigationGroupItemComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'suis-navigation-group-item', standalone: true, imports: [CommonModule, SuisIconComponent, RouterModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<a\n  *ngIf=\"item\"\n  class=\"suis-navigation-group-item\"\n  [routerLink]=\"expandable ? undefined : item.link\"\n  routerLinkActive=\"active\"\n  (click)=\"onToggle()\"\n>\n  <div class=\"suis-navigation-group-item__content\">\n    <ng-container *ngIf=\"templateRef; else label\">\n      <ng-container\n        *ngTemplateOutlet=\"templateRef; context: { $implicit: item }\"\n      ></ng-container>\n    </ng-container>\n    <ng-template #label>\n      {{ item.label }}\n    </ng-template>\n  </div>\n  <div *ngIf=\"expandable\" class=\"suis-navigation-group-item__actions\">\n    <suis-icon\n      [type]=\"expanded ? SuisIconType.CHEVRON_UP : SuisIconType.CHEVRON_DOWN\"\n      size=\"lg\"\n      color=\"white\"\n    ></suis-icon>\n  </div>\n</a>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host{display:block;width:100%}.suis-navigation-group-item{display:flex;justify-content:space-between;padding:1rem;color:#fff;font-size:.875rem;text-decoration:none;text-transform:uppercase;width:100%;position:relative;cursor:pointer;font-size:1rem;border-bottom:.0625rem solid #273c75}.suis-navigation-group-item:hover{background-color:#273c75d9}.suis-navigation-group-item.active{background-color:#273c75;color:#fff;font-weight:600}.suis-navigation-group-item.active:hover{background-color:#273c75}.suis-navigation-group-item.active:before{content:\"\";position:absolute;top:0;bottom:0;left:0;width:.1875rem;height:100%;background-color:#dcdde1}\n"] }]
+            args: [{ selector: 'suis-navigation-group-item', standalone: true, imports: [CommonModule, SuisIconComponent, RouterModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<a\n  *ngIf=\"item\"\n  class=\"suis-navigation-group-item\"\n  [routerLink]=\"expandable ? undefined : item.link\"\n  routerLinkActive=\"active\"\n  (click)=\"onToggle()\"\n>\n  <div class=\"suis-navigation-group-item__content\">\n    <ng-container *ngIf=\"templateRef; else label\">\n      <ng-container\n        *ngTemplateOutlet=\"templateRef; context: { $implicit: item }\"\n      ></ng-container>\n    </ng-container>\n    <ng-template #label>\n      {{ item.label }}\n    </ng-template>\n  </div>\n  <div *ngIf=\"expandable\" class=\"suis-navigation-group-item__actions\">\n    <suis-icon\n      [type]=\"expanded ? SuisIconType.CHEVRON_UP : SuisIconType.CHEVRON_DOWN\"\n      size=\"lg\"\n      color=\"white\"\n    ></suis-icon>\n  </div>\n</a>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host{display:block;width:100%}.suis-navigation-group-item{display:flex;justify-content:space-between;padding:1rem;color:#fff;font-size:.875rem;text-decoration:none;text-transform:uppercase;width:100%;border-radius:.25rem;position:relative;cursor:pointer;font-size:1rem;border-bottom:.0625rem solid #273c75}.suis-navigation-group-item:hover{background-color:#273c75d9}.suis-navigation-group-item.active{background-color:#273c75;color:#fff;font-weight:600}.suis-navigation-group-item.active:hover{background-color:#273c75}\n"] }]
         }], propDecorators: { item: [{
                 type: Input
             }], templateRef: [{
@@ -1056,6 +1114,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImpor
 
 class SuisNavigationComponent {
     constructor() {
+        /** @internal */
+        this.SuisIconType = SuisIconType;
         /**
          * List of navigation items. Type of SuisNavigationGroupItem[]. By default set to empty array.
          */
@@ -1068,17 +1128,33 @@ class SuisNavigationComponent {
          * Adds expand / collapse logic to group header items. By default set to false.
          */
         this.expandable = false;
+        /**
+         * Adds collapse / epxand logic to navigiaton. By default set to false.
+         */
+        this.collapsable = false;
+        /**
+         * Collapses the navigiation. By default set to false.
+         */
+        this.collapsed = false;
+        /**
+         * Emits on collapsed value changed.
+         */
+        this.collaspedChange = new EventEmitter();
+    }
+    onToggle() {
+        this.collapsed = !this.collapsed;
+        this.collaspedChange.emit(this.collapsed);
     }
     /** @internal */
     groupItemTrackBy(index, groupItem) {
         return `${groupItem.label}-${index}`;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SuisNavigationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: SuisNavigationComponent, isStandalone: true, selector: "suis-navigation", inputs: { items: "items", expandedGroups: "expandedGroups", expandable: "expandable" }, queries: [{ propertyName: "suisNavigationItem", first: true, predicate: SuisNavigationItemDirective, descendants: true }], ngImport: i0, template: "<div class=\"suis-navigation\">\r\n  <suis-navigation-group\r\n    *ngFor=\"let groupItem of items; trackBy: groupItemTrackBy\"\r\n    [item]=\"groupItem\"\r\n    [templateRef]=\"suisNavigationItem?.templateRef\"\r\n    [expanded]=\"expandedGroups\"\r\n    [expandable]=\"expandable\"\r\n  ></suis-navigation-group>\r\n</div>\r\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host{display:block}.suis-navigation{width:100%;min-width:15rem;max-width:15rem;background-color:#192a56;color:#fff;height:100%;min-height:100vh;max-height:100vh;overflow-y:auto}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: SuisNavigationGroupComponent, selector: "suis-navigation-group", inputs: ["item", "templateRef", "expanded", "expandable"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: SuisNavigationComponent, isStandalone: true, selector: "suis-navigation", inputs: { items: "items", expandedGroups: "expandedGroups", expandable: "expandable", collapsable: "collapsable", collapsed: "collapsed", collaspedChange: "collaspedChange" }, queries: [{ propertyName: "suisNavigationItem", first: true, predicate: SuisNavigationItemDirective, descendants: true }], ngImport: i0, template: "<div\n  class=\"suis-navigation\"\n  [class.suis-navigation--collapsed]=\"collapsable && collapsed\"\n>\n  <div class=\"suis-navigation__groups\">\n    <ng-container *ngIf=\"!collapsed\">\n      <suis-navigation-group\n        *ngFor=\"let groupItem of items; trackBy: groupItemTrackBy\"\n        [item]=\"groupItem\"\n        [templateRef]=\"suisNavigationItem?.templateRef\"\n        [expanded]=\"expandedGroups\"\n        [expandable]=\"expandable\"\n      ></suis-navigation-group>\n    </ng-container>\n  </div>\n  <div class=\"suis-navigation__actions\">\n    <button *ngIf=\"collapsable\" type=\"button\" (click)=\"onToggle()\">\n      <suis-icon\n        [type]=\"collapsed ? SuisIconType.ARROW_RIGHT : SuisIconType.ARROW_LEFT\"\n        color=\"white\"\n        size=\"lg\"\n      ></suis-icon>\n    </button>\n  </div>\n</div>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host{display:block}.suis-navigation{width:100%;min-width:16rem;max-width:16rem;background-color:#192a56;color:#fff;height:100%;min-height:100vh;padding:1rem;display:flex;flex-direction:column;justify-content:space-between}.suis-navigation--collapsed{min-width:3.25rem;max-width:3.25rem}.suis-navigation__groups{overflow-y:auto}.suis-navigation__actions{display:flex;justify-content:flex-end}.suis-navigation__actions button{background-color:transparent;border:0}.suis-navigation__actions button:hover{cursor:pointer}\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: "component", type: SuisNavigationGroupComponent, selector: "suis-navigation-group", inputs: ["item", "templateRef", "expanded", "expandable"] }, { 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: SuisNavigationComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'suis-navigation', standalone: true, imports: [CommonModule, SuisNavigationGroupComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"suis-navigation\">\r\n  <suis-navigation-group\r\n    *ngFor=\"let groupItem of items; trackBy: groupItemTrackBy\"\r\n    [item]=\"groupItem\"\r\n    [templateRef]=\"suisNavigationItem?.templateRef\"\r\n    [expanded]=\"expandedGroups\"\r\n    [expandable]=\"expandable\"\r\n  ></suis-navigation-group>\r\n</div>\r\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host{display:block}.suis-navigation{width:100%;min-width:15rem;max-width:15rem;background-color:#192a56;color:#fff;height:100%;min-height:100vh;max-height:100vh;overflow-y:auto}\n"] }]
+            args: [{ selector: 'suis-navigation', standalone: true, imports: [CommonModule, SuisNavigationGroupComponent, SuisIconComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  class=\"suis-navigation\"\n  [class.suis-navigation--collapsed]=\"collapsable && collapsed\"\n>\n  <div class=\"suis-navigation__groups\">\n    <ng-container *ngIf=\"!collapsed\">\n      <suis-navigation-group\n        *ngFor=\"let groupItem of items; trackBy: groupItemTrackBy\"\n        [item]=\"groupItem\"\n        [templateRef]=\"suisNavigationItem?.templateRef\"\n        [expanded]=\"expandedGroups\"\n        [expandable]=\"expandable\"\n      ></suis-navigation-group>\n    </ng-container>\n  </div>\n  <div class=\"suis-navigation__actions\">\n    <button *ngIf=\"collapsable\" type=\"button\" (click)=\"onToggle()\">\n      <suis-icon\n        [type]=\"collapsed ? SuisIconType.ARROW_RIGHT : SuisIconType.ARROW_LEFT\"\n        color=\"white\"\n        size=\"lg\"\n      ></suis-icon>\n    </button>\n  </div>\n</div>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host{display:block}.suis-navigation{width:100%;min-width:16rem;max-width:16rem;background-color:#192a56;color:#fff;height:100%;min-height:100vh;padding:1rem;display:flex;flex-direction:column;justify-content:space-between}.suis-navigation--collapsed{min-width:3.25rem;max-width:3.25rem}.suis-navigation__groups{overflow-y:auto}.suis-navigation__actions{display:flex;justify-content:flex-end}.suis-navigation__actions button{background-color:transparent;border:0}.suis-navigation__actions button:hover{cursor:pointer}\n"] }]
         }], propDecorators: { suisNavigationItem: [{
                 type: ContentChild,
                 args: [SuisNavigationItemDirective]
@@ -1088,6 +1164,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImpor
                 type: Input
             }], expandable: [{
                 type: Input
+            }], collapsable: [{
+                type: Input
+            }], collapsed: [{
+                type: Input
+            }], collaspedChange: [{
+                type: Input
             }] } });
 
 class SuisNavigationModule {
@@ -1409,7 +1491,7 @@ class SuisSelectComponent extends SuisSelectBase {
                 multi: true,
                 useExisting: forwardRef(() => SuisSelectComponent),
             },
-        ], usesInheritance: true, ngImport: i0, template: "<div class=\"suis-select\">\n  <button\n    type=\"button\"\n    (click)=\"onExpand()\"\n    class=\"suis-select__button\"\n    [class.suis-select__button--invalid]=\"invalid\"\n    [disabled]=\"readonly\"\n  >\n    <span class=\"suis-select__button__value\">\n      {{ value | suisSelectLabel : options : placeholder }}\n    </span>\n    <span class=\"suis-select__button__actions\">\n      <suis-icon\n        *ngIf=\"nullable && value\"\n        class=\"suis-select__button__cross\"\n        [type]=\"SuisIconType.CROSS\"\n        size=\"lg\"\n        color=\"primary\"\n        (click)=\"onClear($event)\"\n      ></suis-icon>\n      <suis-icon\n        class=\"suis-select__button__chevron\"\n        [type]=\"expanded ? SuisIconType.CHEVRON_UP : SuisIconType.CHEVRON_DOWN\"\n        size=\"lg\"\n        color=\"primary\"\n      ></suis-icon>\n    </span>\n  </button>\n  <div *ngIf=\"expanded\" class=\"suis-select__list\">\n    <input\n      *ngIf=\"search\"\n      [ngModel]=\"searchPhrase\"\n      (ngModelChange)=\"onSearchPhraseChange($event)\"\n      class=\"suis-select__list__search\"\n      type=\"search\"\n      [placeholder]=\"searchPlaceholder\"\n    />\n    <suis-select-option\n      *ngFor=\"\n        let option of options\n          | suisSelectSortOptions\n          | suisSelectFilterOptions : searchPhrase;\n        trackBy: optionTrackBy\n      \"\n      [option]=\"option\"\n      [templateRef]=\"suisSelectOption?.templateRef\"\n      [selected]=\"option.value | suisSelectIsSelected : value\"\n      (clicked)=\"onSelect(option.value)\"\n    ></suis-select-option>\n  </div>\n</div>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host{display:block}.suis-select{position:relative}.suis-select__button{width:100%;background-color:#fff;box-shadow:0 2px 5px #00000040;border-radius:.25rem;padding:.5rem 1rem;border:0;min-height:2rem;min-width:5rem;position:relative;display:flex;align-items:center;justify-content:space-between;padding:.25rem .5rem .25rem 1rem;cursor:pointer}.suis-select__button:focus{box-shadow:0 2px 5px #192a56bf;outline:none}.suis-select__button--invalid{box-shadow:0 2px 5px #ff4757bf}.suis-select__button__value{width:100%;text-align:left;text-overflow:ellipsis;text-wrap:nowrap;overflow:hidden}.suis-select__button__actions{margin-left:.25rem;display:flex;justify-content:right;align-items:center}.suis-select__list{position:absolute;z-index:10;background-color:#fff;box-shadow:0 2px 5px #00000040;border-bottom-left-radius:.25rem;border-bottom-right-radius:.25rem;width:100%;top:2rem;left:0;max-height:12.25rem;overflow-y:auto}.suis-select__list__search{width:100%;border:none;border-bottom:1px solid #dcdde1;padding:.375rem 1rem}.suis-select__list__search:focus{outline:none}.suis-select__list::-webkit-scrollbar{width:.5rem}.suis-select__list::-webkit-scrollbar-track{background:#f5f6fa}.suis-select__list::-webkit-scrollbar-thumb{background:#dcdde1}.suis-select__list::-webkit-scrollbar-thumb:hover{background:#bcbcbc}\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: FormsModule }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: SuisIconComponent, selector: "suis-icon", inputs: ["size", "color", "type", "outlined", "filled", "pointer", "bold"] }, { kind: "component", type: SuisSelectOptionComponent, selector: "suis-select-option", inputs: ["option", "templateRef", "selected", "checkbox"], outputs: ["clicked"] }, { kind: "pipe", type: SuisSelectLabelPipe, name: "suisSelectLabel" }, { kind: "pipe", type: SuisSelectIsSelectedPipe, name: "suisSelectIsSelected" }, { kind: "pipe", type: SuisSelectSortOptionsPipe, name: "suisSelectSortOptions" }, { kind: "pipe", type: SuisSelectFilterOptionsPipe, name: "suisSelectFilterOptions" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], usesInheritance: true, ngImport: i0, template: "<div class=\"suis-select\">\n  <button\n    type=\"button\"\n    (click)=\"onExpand()\"\n    class=\"suis-select__button\"\n    [class.suis-select__button--invalid]=\"invalid\"\n    [disabled]=\"readonly\"\n  >\n    <span class=\"suis-select__button__value\">\n      {{ value | suisSelectLabel : options : placeholder }}\n    </span>\n    <span class=\"suis-select__button__actions\">\n      <suis-icon\n        *ngIf=\"nullable && value\"\n        class=\"suis-select__button__cross\"\n        [type]=\"SuisIconType.CROSS\"\n        size=\"lg\"\n        color=\"primary\"\n        (click)=\"onClear($event)\"\n      ></suis-icon>\n      <suis-icon\n        class=\"suis-select__button__chevron\"\n        [type]=\"expanded ? SuisIconType.CHEVRON_UP : SuisIconType.CHEVRON_DOWN\"\n        size=\"lg\"\n        color=\"primary\"\n      ></suis-icon>\n    </span>\n  </button>\n  <div *ngIf=\"expanded\" class=\"suis-select__list\">\n    <input\n      *ngIf=\"search\"\n      [ngModel]=\"searchPhrase\"\n      (ngModelChange)=\"onSearchPhraseChange($event)\"\n      class=\"suis-select__list__search\"\n      type=\"search\"\n      [placeholder]=\"searchPlaceholder\"\n    />\n    <suis-select-option\n      *ngFor=\"\n        let option of options\n          | suisSelectSortOptions\n          | suisSelectFilterOptions : searchPhrase;\n        trackBy: optionTrackBy\n      \"\n      [option]=\"option\"\n      [templateRef]=\"suisSelectOption?.templateRef\"\n      [selected]=\"option.value | suisSelectIsSelected : value\"\n      (clicked)=\"onSelect(option.value)\"\n    ></suis-select-option>\n  </div>\n</div>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host{display:block}.suis-select{position:relative}.suis-select__button{width:100%;background-color:#fff;border-radius:.25rem;padding:.5rem 1rem;border:.0625rem solid #dcdde1;min-height:2.25rem;min-width:5rem;position:relative;display:flex;align-items:center;justify-content:space-between;padding:.25rem .5rem .25rem 1rem;cursor:pointer}.suis-select__button:focus{border:.0625rem solid #192a56;box-shadow:0 2px 5px #192a56bf;outline:none}.suis-select__button--invalid{border:.0625rem solid #ff4757}.suis-select__button--invalid:focus{border:.0625rem solid #ff4757;box-shadow:0 2px 5px #ff4757bf}.suis-select__button__value{width:100%;text-align:left;text-overflow:ellipsis;text-wrap:nowrap;overflow:hidden}.suis-select__button__actions{margin-left:.25rem;display:flex;justify-content:right;align-items:center}.suis-select__list{position:absolute;z-index:10;background-color:#fff;box-shadow:0 2px 5px #00000040;border-bottom-left-radius:.25rem;border-bottom-right-radius:.25rem;width:100%;top:2rem;left:0;max-height:12.25rem;overflow-y:auto}.suis-select__list__search{width:100%;border:none;border-bottom:1px solid #dcdde1;padding:.375rem 1rem}.suis-select__list__search:focus{outline:none}.suis-select__list::-webkit-scrollbar{width:.5rem}.suis-select__list::-webkit-scrollbar-track{background:#f5f6fa}.suis-select__list::-webkit-scrollbar-thumb{background:#dcdde1}.suis-select__list::-webkit-scrollbar-thumb:hover{background:#bcbcbc}\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: FormsModule }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: SuisIconComponent, selector: "suis-icon", inputs: ["size", "color", "type", "outlined", "filled", "pointer", "bold"] }, { kind: "component", type: SuisSelectOptionComponent, selector: "suis-select-option", inputs: ["option", "templateRef", "selected", "checkbox"], outputs: ["clicked"] }, { kind: "pipe", type: SuisSelectLabelPipe, name: "suisSelectLabel" }, { kind: "pipe", type: SuisSelectIsSelectedPipe, name: "suisSelectIsSelected" }, { kind: "pipe", type: SuisSelectSortOptionsPipe, name: "suisSelectSortOptions" }, { kind: "pipe", type: SuisSelectFilterOptionsPipe, name: "suisSelectFilterOptions" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SuisSelectComponent, decorators: [{
             type: Component,
@@ -1428,7 +1510,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImpor
                             multi: true,
                             useExisting: forwardRef(() => SuisSelectComponent),
                         },
-                    ], template: "<div class=\"suis-select\">\n  <button\n    type=\"button\"\n    (click)=\"onExpand()\"\n    class=\"suis-select__button\"\n    [class.suis-select__button--invalid]=\"invalid\"\n    [disabled]=\"readonly\"\n  >\n    <span class=\"suis-select__button__value\">\n      {{ value | suisSelectLabel : options : placeholder }}\n    </span>\n    <span class=\"suis-select__button__actions\">\n      <suis-icon\n        *ngIf=\"nullable && value\"\n        class=\"suis-select__button__cross\"\n        [type]=\"SuisIconType.CROSS\"\n        size=\"lg\"\n        color=\"primary\"\n        (click)=\"onClear($event)\"\n      ></suis-icon>\n      <suis-icon\n        class=\"suis-select__button__chevron\"\n        [type]=\"expanded ? SuisIconType.CHEVRON_UP : SuisIconType.CHEVRON_DOWN\"\n        size=\"lg\"\n        color=\"primary\"\n      ></suis-icon>\n    </span>\n  </button>\n  <div *ngIf=\"expanded\" class=\"suis-select__list\">\n    <input\n      *ngIf=\"search\"\n      [ngModel]=\"searchPhrase\"\n      (ngModelChange)=\"onSearchPhraseChange($event)\"\n      class=\"suis-select__list__search\"\n      type=\"search\"\n      [placeholder]=\"searchPlaceholder\"\n    />\n    <suis-select-option\n      *ngFor=\"\n        let option of options\n          | suisSelectSortOptions\n          | suisSelectFilterOptions : searchPhrase;\n        trackBy: optionTrackBy\n      \"\n      [option]=\"option\"\n      [templateRef]=\"suisSelectOption?.templateRef\"\n      [selected]=\"option.value | suisSelectIsSelected : value\"\n      (clicked)=\"onSelect(option.value)\"\n    ></suis-select-option>\n  </div>\n</div>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host{display:block}.suis-select{position:relative}.suis-select__button{width:100%;background-color:#fff;box-shadow:0 2px 5px #00000040;border-radius:.25rem;padding:.5rem 1rem;border:0;min-height:2rem;min-width:5rem;position:relative;display:flex;align-items:center;justify-content:space-between;padding:.25rem .5rem .25rem 1rem;cursor:pointer}.suis-select__button:focus{box-shadow:0 2px 5px #192a56bf;outline:none}.suis-select__button--invalid{box-shadow:0 2px 5px #ff4757bf}.suis-select__button__value{width:100%;text-align:left;text-overflow:ellipsis;text-wrap:nowrap;overflow:hidden}.suis-select__button__actions{margin-left:.25rem;display:flex;justify-content:right;align-items:center}.suis-select__list{position:absolute;z-index:10;background-color:#fff;box-shadow:0 2px 5px #00000040;border-bottom-left-radius:.25rem;border-bottom-right-radius:.25rem;width:100%;top:2rem;left:0;max-height:12.25rem;overflow-y:auto}.suis-select__list__search{width:100%;border:none;border-bottom:1px solid #dcdde1;padding:.375rem 1rem}.suis-select__list__search:focus{outline:none}.suis-select__list::-webkit-scrollbar{width:.5rem}.suis-select__list::-webkit-scrollbar-track{background:#f5f6fa}.suis-select__list::-webkit-scrollbar-thumb{background:#dcdde1}.suis-select__list::-webkit-scrollbar-thumb:hover{background:#bcbcbc}\n"] }]
+                    ], template: "<div class=\"suis-select\">\n  <button\n    type=\"button\"\n    (click)=\"onExpand()\"\n    class=\"suis-select__button\"\n    [class.suis-select__button--invalid]=\"invalid\"\n    [disabled]=\"readonly\"\n  >\n    <span class=\"suis-select__button__value\">\n      {{ value | suisSelectLabel : options : placeholder }}\n    </span>\n    <span class=\"suis-select__button__actions\">\n      <suis-icon\n        *ngIf=\"nullable && value\"\n        class=\"suis-select__button__cross\"\n        [type]=\"SuisIconType.CROSS\"\n        size=\"lg\"\n        color=\"primary\"\n        (click)=\"onClear($event)\"\n      ></suis-icon>\n      <suis-icon\n        class=\"suis-select__button__chevron\"\n        [type]=\"expanded ? SuisIconType.CHEVRON_UP : SuisIconType.CHEVRON_DOWN\"\n        size=\"lg\"\n        color=\"primary\"\n      ></suis-icon>\n    </span>\n  </button>\n  <div *ngIf=\"expanded\" class=\"suis-select__list\">\n    <input\n      *ngIf=\"search\"\n      [ngModel]=\"searchPhrase\"\n      (ngModelChange)=\"onSearchPhraseChange($event)\"\n      class=\"suis-select__list__search\"\n      type=\"search\"\n      [placeholder]=\"searchPlaceholder\"\n    />\n    <suis-select-option\n      *ngFor=\"\n        let option of options\n          | suisSelectSortOptions\n          | suisSelectFilterOptions : searchPhrase;\n        trackBy: optionTrackBy\n      \"\n      [option]=\"option\"\n      [templateRef]=\"suisSelectOption?.templateRef\"\n      [selected]=\"option.value | suisSelectIsSelected : value\"\n      (clicked)=\"onSelect(option.value)\"\n    ></suis-select-option>\n  </div>\n</div>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host{display:block}.suis-select{position:relative}.suis-select__button{width:100%;background-color:#fff;border-radius:.25rem;padding:.5rem 1rem;border:.0625rem solid #dcdde1;min-height:2.25rem;min-width:5rem;position:relative;display:flex;align-items:center;justify-content:space-between;padding:.25rem .5rem .25rem 1rem;cursor:pointer}.suis-select__button:focus{border:.0625rem solid #192a56;box-shadow:0 2px 5px #192a56bf;outline:none}.suis-select__button--invalid{border:.0625rem solid #ff4757}.suis-select__button--invalid:focus{border:.0625rem solid #ff4757;box-shadow:0 2px 5px #ff4757bf}.suis-select__button__value{width:100%;text-align:left;text-overflow:ellipsis;text-wrap:nowrap;overflow:hidden}.suis-select__button__actions{margin-left:.25rem;display:flex;justify-content:right;align-items:center}.suis-select__list{position:absolute;z-index:10;background-color:#fff;box-shadow:0 2px 5px #00000040;border-bottom-left-radius:.25rem;border-bottom-right-radius:.25rem;width:100%;top:2rem;left:0;max-height:12.25rem;overflow-y:auto}.suis-select__list__search{width:100%;border:none;border-bottom:1px solid #dcdde1;padding:.375rem 1rem}.suis-select__list__search:focus{outline:none}.suis-select__list::-webkit-scrollbar{width:.5rem}.suis-select__list::-webkit-scrollbar-track{background:#f5f6fa}.suis-select__list::-webkit-scrollbar-thumb{background:#dcdde1}.suis-select__list::-webkit-scrollbar-thumb:hover{background:#bcbcbc}\n"] }]
         }], propDecorators: { nullable: [{
                 type: Input
             }] } });
@@ -1726,7 +1808,7 @@ class SuisSelectMultiComponent extends SuisSelectBase {
                 multi: true,
                 useExisting: forwardRef(() => SuisSelectMultiComponent),
             },
-        ], usesInheritance: true, ngImport: i0, template: "<div class=\"suis-select-multi\">\n  <button\n    type=\"button\"\n    (click)=\"onExpand()\"\n    class=\"suis-select-multi__button\"\n    [class.suis-select-multi__button--invalid]=\"invalid\"\n    [class.suis-select-multi__button--valid]=\"values.length > 0\"\n    [disabled]=\"readonly\"\n  >\n    <span class=\"suis-select-multi__button__value\">\n      <ng-container *ngIf=\"!values?.length\">\n        {{ placeholder }}\n      </ng-container>\n      <ng-container *ngIf=\"values?.length\">\n        <suis-chip\n          *ngFor=\"\n            let value of values | suisSelectMultiChips : options;\n            let index = index\n          \"\n          [removable]=\"true\"\n          [color]=\"chipColor\"\n          [iconColor]=\"chipIconColor\"\n          (remove)=\"onRemove(index)\"\n        >\n          {{ value }}\n        </suis-chip>\n      </ng-container>\n    </span>\n    <span class=\"suis-select-multi__button__actions\">\n      <suis-icon\n        *ngIf=\"values?.length\"\n        class=\"suis-select-multi__button__cross\"\n        [type]=\"SuisIconType.CROSS\"\n        size=\"lg\"\n        color=\"primary\"\n        (click)=\"onClear($event)\"\n        tabindex=\"0\"\n      ></suis-icon>\n      <suis-icon\n        class=\"suis-select-multi__button__chevron\"\n        [type]=\"expanded ? SuisIconType.CHEVRON_UP : SuisIconType.CHEVRON_DOWN\"\n        size=\"lg\"\n        color=\"primary\"\n        tabindex=\"0\"\n      ></suis-icon>\n    </span>\n  </button>\n  <div *ngIf=\"expanded\" class=\"suis-select-multi__list\">\n    <input\n      *ngIf=\"search\"\n      [ngModel]=\"searchPhrase\"\n      (ngModelChange)=\"onSearchPhraseChange($event)\"\n      class=\"suis-select-multi__list__search\"\n      type=\"search\"\n      [placeholder]=\"searchPlaceholder\"\n    />\n    <suis-select-option\n      *ngFor=\"\n        let option of options\n          | suisSelectSortOptions\n          | suisSelectFilterOptions : searchPhrase;\n        trackBy: optionTrackBy\n      \"\n      [option]=\"option\"\n      [templateRef]=\"suisSelectOption?.templateRef\"\n      [selected]=\"option.value | suisSelectMultiIsSelected : values\"\n      [checkbox]=\"!duplicate\"\n      (clicked)=\"onSelect(option.value)\"\n    ></suis-select-option>\n  </div>\n</div>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host{display:block}.suis-select-multi{position:relative}.suis-select-multi__button{width:100%;background-color:#fff;box-shadow:0 2px 5px #00000040;border-radius:.25rem;padding:.5rem 1rem;border:0;min-height:2rem;min-width:5rem;position:relative;display:flex;align-items:center;justify-content:space-between;padding:.25rem .5rem .25rem 1rem;cursor:pointer}.suis-select-multi__button:focus{box-shadow:0 2px 5px #192a56bf;outline:none}.suis-select-multi__button--invalid{box-shadow:0 2px 5px #ff4757bf}.suis-select-multi__button__value{width:100%;text-align:left;text-overflow:ellipsis;text-wrap:nowrap;overflow:hidden}.suis-select-multi__button__actions{margin-left:.25rem;display:flex;justify-content:right;align-items:center}.suis-select-multi__button--valid{padding-bottom:.125rem}.suis-select-multi__button suis-chip{margin-right:.25rem;margin-bottom:.125rem}.suis-select-multi__button suis-chip:last-child{margin-right:0}.suis-select-multi__button__value{display:flex;flex-wrap:wrap}.suis-select-multi__list{position:absolute;z-index:10;background-color:#fff;box-shadow:0 2px 5px #00000040;border-bottom-left-radius:.25rem;border-bottom-right-radius:.25rem;width:100%;top:2rem;left:0;max-height:12.25rem;overflow-y:auto}.suis-select-multi__list__search{width:100%;border:none;border-bottom:1px solid #dcdde1;padding:.375rem 1rem}.suis-select-multi__list__search:focus{outline:none}.suis-select-multi__list::-webkit-scrollbar{width:.5rem}.suis-select-multi__list::-webkit-scrollbar-track{background:#f5f6fa}.suis-select-multi__list::-webkit-scrollbar-thumb{background:#dcdde1}.suis-select-multi__list::-webkit-scrollbar-thumb:hover{background:#bcbcbc}\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: FormsModule }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: SuisIconComponent, selector: "suis-icon", inputs: ["size", "color", "type", "outlined", "filled", "pointer", "bold"] }, { kind: "component", type: SuisChipComponent, selector: "suis-chip", inputs: ["color", "iconColor", "removable"], outputs: ["remove"] }, { kind: "component", type: SuisSelectOptionComponent, selector: "suis-select-option", inputs: ["option", "templateRef", "selected", "checkbox"], outputs: ["clicked"] }, { kind: "pipe", type: SuisSelectMultiChipsPipe, name: "suisSelectMultiChips" }, { kind: "pipe", type: SuisSelectMultiIsSelectedPipe, name: "suisSelectMultiIsSelected" }, { kind: "pipe", type: SuisSelectSortOptionsPipe, name: "suisSelectSortOptions" }, { kind: "pipe", type: SuisSelectFilterOptionsPipe, name: "suisSelectFilterOptions" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], usesInheritance: true, ngImport: i0, template: "<div class=\"suis-select-multi\">\n  <button\n    type=\"button\"\n    (click)=\"onExpand()\"\n    class=\"suis-select-multi__button\"\n    [class.suis-select-multi__button--invalid]=\"invalid\"\n    [class.suis-select-multi__button--valid]=\"values.length > 0\"\n    [disabled]=\"readonly\"\n  >\n    <span class=\"suis-select-multi__button__value\">\n      <ng-container *ngIf=\"!values?.length\">\n        {{ placeholder }}\n      </ng-container>\n      <ng-container *ngIf=\"values?.length\">\n        <suis-chip\n          *ngFor=\"\n            let value of values | suisSelectMultiChips : options;\n            let index = index\n          \"\n          [removable]=\"true\"\n          [color]=\"chipColor\"\n          [iconColor]=\"chipIconColor\"\n          (remove)=\"onRemove(index)\"\n        >\n          {{ value }}\n        </suis-chip>\n      </ng-container>\n    </span>\n    <span class=\"suis-select-multi__button__actions\">\n      <suis-icon\n        *ngIf=\"values?.length\"\n        class=\"suis-select-multi__button__cross\"\n        [type]=\"SuisIconType.CROSS\"\n        size=\"lg\"\n        color=\"primary\"\n        (click)=\"onClear($event)\"\n        tabindex=\"0\"\n      ></suis-icon>\n      <suis-icon\n        class=\"suis-select-multi__button__chevron\"\n        [type]=\"expanded ? SuisIconType.CHEVRON_UP : SuisIconType.CHEVRON_DOWN\"\n        size=\"lg\"\n        color=\"primary\"\n        tabindex=\"0\"\n      ></suis-icon>\n    </span>\n  </button>\n  <div *ngIf=\"expanded\" class=\"suis-select-multi__list\">\n    <input\n      *ngIf=\"search\"\n      [ngModel]=\"searchPhrase\"\n      (ngModelChange)=\"onSearchPhraseChange($event)\"\n      class=\"suis-select-multi__list__search\"\n      type=\"search\"\n      [placeholder]=\"searchPlaceholder\"\n    />\n    <suis-select-option\n      *ngFor=\"\n        let option of options\n          | suisSelectSortOptions\n          | suisSelectFilterOptions : searchPhrase;\n        trackBy: optionTrackBy\n      \"\n      [option]=\"option\"\n      [templateRef]=\"suisSelectOption?.templateRef\"\n      [selected]=\"option.value | suisSelectMultiIsSelected : values\"\n      [checkbox]=\"!duplicate\"\n      (clicked)=\"onSelect(option.value)\"\n    ></suis-select-option>\n  </div>\n</div>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host{display:block}.suis-select-multi{position:relative}.suis-select-multi__button{width:100%;background-color:#fff;border-radius:.25rem;padding:.5rem 1rem;border:.0625rem solid #dcdde1;min-height:2.25rem;min-width:5rem;position:relative;display:flex;align-items:center;justify-content:space-between;padding:.25rem .5rem .25rem 1rem;cursor:pointer}.suis-select-multi__button:focus{border:.0625rem solid #192a56;box-shadow:0 2px 5px #192a56bf;outline:none}.suis-select-multi__button--invalid{border:.0625rem solid #ff4757}.suis-select-multi__button--invalid:focus{border:.0625rem solid #ff4757;box-shadow:0 2px 5px #ff4757bf}.suis-select-multi__button__value{width:100%;text-align:left;text-overflow:ellipsis;text-wrap:nowrap;overflow:hidden}.suis-select-multi__button__actions{margin-left:.25rem;display:flex;justify-content:right;align-items:center}.suis-select-multi__button--valid{padding-bottom:.125rem}.suis-select-multi__button suis-chip{margin-right:.25rem;margin-bottom:.125rem}.suis-select-multi__button suis-chip:last-child{margin-right:0}.suis-select-multi__button__value{display:flex;flex-wrap:wrap}.suis-select-multi__list{position:absolute;z-index:10;background-color:#fff;box-shadow:0 2px 5px #00000040;border-bottom-left-radius:.25rem;border-bottom-right-radius:.25rem;width:100%;top:2rem;left:0;max-height:12.25rem;overflow-y:auto}.suis-select-multi__list__search{width:100%;border:none;border-bottom:1px solid #dcdde1;padding:.375rem 1rem}.suis-select-multi__list__search:focus{outline:none}.suis-select-multi__list::-webkit-scrollbar{width:.5rem}.suis-select-multi__list::-webkit-scrollbar-track{background:#f5f6fa}.suis-select-multi__list::-webkit-scrollbar-thumb{background:#dcdde1}.suis-select-multi__list::-webkit-scrollbar-thumb:hover{background:#bcbcbc}\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: FormsModule }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: SuisIconComponent, selector: "suis-icon", inputs: ["size", "color", "type", "outlined", "filled", "pointer", "bold"] }, { kind: "component", type: SuisChipComponent, selector: "suis-chip", inputs: ["color", "iconColor", "removable"], outputs: ["remove"] }, { kind: "component", type: SuisSelectOptionComponent, selector: "suis-select-option", inputs: ["option", "templateRef", "selected", "checkbox"], outputs: ["clicked"] }, { kind: "pipe", type: SuisSelectMultiChipsPipe, name: "suisSelectMultiChips" }, { kind: "pipe", type: SuisSelectMultiIsSelectedPipe, name: "suisSelectMultiIsSelected" }, { kind: "pipe", type: SuisSelectSortOptionsPipe, name: "suisSelectSortOptions" }, { kind: "pipe", type: SuisSelectFilterOptionsPipe, name: "suisSelectFilterOptions" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SuisSelectMultiComponent, decorators: [{
             type: Component,
@@ -1746,7 +1828,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImpor
                             multi: true,
                             useExisting: forwardRef(() => SuisSelectMultiComponent),
                         },
-                    ], template: "<div class=\"suis-select-multi\">\n  <button\n    type=\"button\"\n    (click)=\"onExpand()\"\n    class=\"suis-select-multi__button\"\n    [class.suis-select-multi__button--invalid]=\"invalid\"\n    [class.suis-select-multi__button--valid]=\"values.length > 0\"\n    [disabled]=\"readonly\"\n  >\n    <span class=\"suis-select-multi__button__value\">\n      <ng-container *ngIf=\"!values?.length\">\n        {{ placeholder }}\n      </ng-container>\n      <ng-container *ngIf=\"values?.length\">\n        <suis-chip\n          *ngFor=\"\n            let value of values | suisSelectMultiChips : options;\n            let index = index\n          \"\n          [removable]=\"true\"\n          [color]=\"chipColor\"\n          [iconColor]=\"chipIconColor\"\n          (remove)=\"onRemove(index)\"\n        >\n          {{ value }}\n        </suis-chip>\n      </ng-container>\n    </span>\n    <span class=\"suis-select-multi__button__actions\">\n      <suis-icon\n        *ngIf=\"values?.length\"\n        class=\"suis-select-multi__button__cross\"\n        [type]=\"SuisIconType.CROSS\"\n        size=\"lg\"\n        color=\"primary\"\n        (click)=\"onClear($event)\"\n        tabindex=\"0\"\n      ></suis-icon>\n      <suis-icon\n        class=\"suis-select-multi__button__chevron\"\n        [type]=\"expanded ? SuisIconType.CHEVRON_UP : SuisIconType.CHEVRON_DOWN\"\n        size=\"lg\"\n        color=\"primary\"\n        tabindex=\"0\"\n      ></suis-icon>\n    </span>\n  </button>\n  <div *ngIf=\"expanded\" class=\"suis-select-multi__list\">\n    <input\n      *ngIf=\"search\"\n      [ngModel]=\"searchPhrase\"\n      (ngModelChange)=\"onSearchPhraseChange($event)\"\n      class=\"suis-select-multi__list__search\"\n      type=\"search\"\n      [placeholder]=\"searchPlaceholder\"\n    />\n    <suis-select-option\n      *ngFor=\"\n        let option of options\n          | suisSelectSortOptions\n          | suisSelectFilterOptions : searchPhrase;\n        trackBy: optionTrackBy\n      \"\n      [option]=\"option\"\n      [templateRef]=\"suisSelectOption?.templateRef\"\n      [selected]=\"option.value | suisSelectMultiIsSelected : values\"\n      [checkbox]=\"!duplicate\"\n      (clicked)=\"onSelect(option.value)\"\n    ></suis-select-option>\n  </div>\n</div>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host{display:block}.suis-select-multi{position:relative}.suis-select-multi__button{width:100%;background-color:#fff;box-shadow:0 2px 5px #00000040;border-radius:.25rem;padding:.5rem 1rem;border:0;min-height:2rem;min-width:5rem;position:relative;display:flex;align-items:center;justify-content:space-between;padding:.25rem .5rem .25rem 1rem;cursor:pointer}.suis-select-multi__button:focus{box-shadow:0 2px 5px #192a56bf;outline:none}.suis-select-multi__button--invalid{box-shadow:0 2px 5px #ff4757bf}.suis-select-multi__button__value{width:100%;text-align:left;text-overflow:ellipsis;text-wrap:nowrap;overflow:hidden}.suis-select-multi__button__actions{margin-left:.25rem;display:flex;justify-content:right;align-items:center}.suis-select-multi__button--valid{padding-bottom:.125rem}.suis-select-multi__button suis-chip{margin-right:.25rem;margin-bottom:.125rem}.suis-select-multi__button suis-chip:last-child{margin-right:0}.suis-select-multi__button__value{display:flex;flex-wrap:wrap}.suis-select-multi__list{position:absolute;z-index:10;background-color:#fff;box-shadow:0 2px 5px #00000040;border-bottom-left-radius:.25rem;border-bottom-right-radius:.25rem;width:100%;top:2rem;left:0;max-height:12.25rem;overflow-y:auto}.suis-select-multi__list__search{width:100%;border:none;border-bottom:1px solid #dcdde1;padding:.375rem 1rem}.suis-select-multi__list__search:focus{outline:none}.suis-select-multi__list::-webkit-scrollbar{width:.5rem}.suis-select-multi__list::-webkit-scrollbar-track{background:#f5f6fa}.suis-select-multi__list::-webkit-scrollbar-thumb{background:#dcdde1}.suis-select-multi__list::-webkit-scrollbar-thumb:hover{background:#bcbcbc}\n"] }]
+                    ], template: "<div class=\"suis-select-multi\">\n  <button\n    type=\"button\"\n    (click)=\"onExpand()\"\n    class=\"suis-select-multi__button\"\n    [class.suis-select-multi__button--invalid]=\"invalid\"\n    [class.suis-select-multi__button--valid]=\"values.length > 0\"\n    [disabled]=\"readonly\"\n  >\n    <span class=\"suis-select-multi__button__value\">\n      <ng-container *ngIf=\"!values?.length\">\n        {{ placeholder }}\n      </ng-container>\n      <ng-container *ngIf=\"values?.length\">\n        <suis-chip\n          *ngFor=\"\n            let value of values | suisSelectMultiChips : options;\n            let index = index\n          \"\n          [removable]=\"true\"\n          [color]=\"chipColor\"\n          [iconColor]=\"chipIconColor\"\n          (remove)=\"onRemove(index)\"\n        >\n          {{ value }}\n        </suis-chip>\n      </ng-container>\n    </span>\n    <span class=\"suis-select-multi__button__actions\">\n      <suis-icon\n        *ngIf=\"values?.length\"\n        class=\"suis-select-multi__button__cross\"\n        [type]=\"SuisIconType.CROSS\"\n        size=\"lg\"\n        color=\"primary\"\n        (click)=\"onClear($event)\"\n        tabindex=\"0\"\n      ></suis-icon>\n      <suis-icon\n        class=\"suis-select-multi__button__chevron\"\n        [type]=\"expanded ? SuisIconType.CHEVRON_UP : SuisIconType.CHEVRON_DOWN\"\n        size=\"lg\"\n        color=\"primary\"\n        tabindex=\"0\"\n      ></suis-icon>\n    </span>\n  </button>\n  <div *ngIf=\"expanded\" class=\"suis-select-multi__list\">\n    <input\n      *ngIf=\"search\"\n      [ngModel]=\"searchPhrase\"\n      (ngModelChange)=\"onSearchPhraseChange($event)\"\n      class=\"suis-select-multi__list__search\"\n      type=\"search\"\n      [placeholder]=\"searchPlaceholder\"\n    />\n    <suis-select-option\n      *ngFor=\"\n        let option of options\n          | suisSelectSortOptions\n          | suisSelectFilterOptions : searchPhrase;\n        trackBy: optionTrackBy\n      \"\n      [option]=\"option\"\n      [templateRef]=\"suisSelectOption?.templateRef\"\n      [selected]=\"option.value | suisSelectMultiIsSelected : values\"\n      [checkbox]=\"!duplicate\"\n      (clicked)=\"onSelect(option.value)\"\n    ></suis-select-option>\n  </div>\n</div>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host{display:block}.suis-select-multi{position:relative}.suis-select-multi__button{width:100%;background-color:#fff;border-radius:.25rem;padding:.5rem 1rem;border:.0625rem solid #dcdde1;min-height:2.25rem;min-width:5rem;position:relative;display:flex;align-items:center;justify-content:space-between;padding:.25rem .5rem .25rem 1rem;cursor:pointer}.suis-select-multi__button:focus{border:.0625rem solid #192a56;box-shadow:0 2px 5px #192a56bf;outline:none}.suis-select-multi__button--invalid{border:.0625rem solid #ff4757}.suis-select-multi__button--invalid:focus{border:.0625rem solid #ff4757;box-shadow:0 2px 5px #ff4757bf}.suis-select-multi__button__value{width:100%;text-align:left;text-overflow:ellipsis;text-wrap:nowrap;overflow:hidden}.suis-select-multi__button__actions{margin-left:.25rem;display:flex;justify-content:right;align-items:center}.suis-select-multi__button--valid{padding-bottom:.125rem}.suis-select-multi__button suis-chip{margin-right:.25rem;margin-bottom:.125rem}.suis-select-multi__button suis-chip:last-child{margin-right:0}.suis-select-multi__button__value{display:flex;flex-wrap:wrap}.suis-select-multi__list{position:absolute;z-index:10;background-color:#fff;box-shadow:0 2px 5px #00000040;border-bottom-left-radius:.25rem;border-bottom-right-radius:.25rem;width:100%;top:2rem;left:0;max-height:12.25rem;overflow-y:auto}.suis-select-multi__list__search{width:100%;border:none;border-bottom:1px solid #dcdde1;padding:.375rem 1rem}.suis-select-multi__list__search:focus{outline:none}.suis-select-multi__list::-webkit-scrollbar{width:.5rem}.suis-select-multi__list::-webkit-scrollbar-track{background:#f5f6fa}.suis-select-multi__list::-webkit-scrollbar-thumb{background:#dcdde1}.suis-select-multi__list::-webkit-scrollbar-thumb:hover{background:#bcbcbc}\n"] }]
         }], propDecorators: { duplicate: [{
                 type: Input
             }], chipColor: [{
@@ -1904,11 +1986,11 @@ class SuisTableComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SuisTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: SuisTableComponent, isStandalone: true, selector: "suis-table", inputs: { data: "data", orderBy: "orderBy", sortBy: "sortBy", loading: "loading", emptyMessage: "emptyMessage" }, outputs: { sortByChange: "sortByChange", orderByChange: "orderByChange" }, queries: [{ propertyName: "columns", predicate: SuisTableColumnDirective }], ngImport: i0, template: "<table *ngIf=\"columns\" class=\"suis-table\">\n  <thead>\n    <tr>\n      <th\n        *ngFor=\"let column of columns\"\n        [class.pointer]=\"column.orderProperty\"\n        (click)=\"\n          column.orderProperty ? onColumnClick(column.orderProperty) : undefined\n        \"\n      >\n        <div class=\"suis-table__header\">\n          <span>\n            {{ column.name }}\n          </span>\n          <suis-icon\n            *ngIf=\"column.orderProperty && column.orderProperty === orderBy\"\n            [type]=\"\n              sortBy === 'asc'\n                ? SuisIconType.CHEVRON_DOWN\n                : SuisIconType.CHEVRON_UP\n            \"\n            size=\"lg\"\n            color=\"white\"\n          ></suis-icon>\n        </div>\n      </th>\n      <th *ngIf=\"!columns?.length\"></th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr *ngFor=\"let item of data\">\n      <td *ngFor=\"let column of columns\">\n        <ng-container\n          *ngTemplateOutlet=\"\n            column.cell!.templateRef;\n            context: { $implicit: item }\n          \"\n        ></ng-container>\n      </td>\n    </tr>\n    <tr *ngIf=\"!data?.length\">\n      <td class=\"empty\" [attr.colspan]=\"columns ? columns.length : 1\">\n        {{ loading ? '' : emptyMessage }}\n      </td>\n    </tr>\n    <suis-spinner-container\n      *ngIf=\"loading\"\n      [absolute]=\"true\"\n      [blur]=\"true\"\n      [color]=\"'secondary'\"\n    ></suis-spinner-container>\n  </tbody>\n</table>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host{display:block}.suis-table{width:100%;border-collapse:collapse}.suis-table thead{background-color:#273c75;color:#fff}.suis-table thead tr th{font-weight:500;padding:.75rem 1rem}.suis-table thead tr th:first-child{border-top-left-radius:.25rem}.suis-table thead tr th:last-child{border-top-right-radius:.25rem}.suis-table thead tr th.pointer{cursor:pointer}.suis-table thead tr th>.suis-table__header{display:flex;align-items:center}.suis-table thead tr th>.suis-table__header suis-icon{display:block;margin-left:.125rem}.suis-table tbody{position:relative;background-color:#f5f6fa}.suis-table tbody tr{border-bottom:.0625rem solid #dcdde1}.suis-table tbody tr td{padding:.375rem 1rem}.suis-table tbody tr td.empty{text-align:center;padding:1.5rem 1rem}\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: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SuisIconComponent, selector: "suis-icon", inputs: ["size", "color", "type", "outlined", "filled", "pointer", "bold"] }, { kind: "component", type: SuisSpinnerContainerComponent, selector: "suis-spinner-container", inputs: ["size", "color", "blur", "absolute"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: SuisTableComponent, isStandalone: true, selector: "suis-table", inputs: { data: "data", orderBy: "orderBy", sortBy: "sortBy", loading: "loading", emptyMessage: "emptyMessage" }, outputs: { sortByChange: "sortByChange", orderByChange: "orderByChange" }, queries: [{ propertyName: "columns", predicate: SuisTableColumnDirective }], ngImport: i0, template: "<table *ngIf=\"columns\" class=\"suis-table\">\n  <thead>\n    <tr>\n      <th\n        *ngFor=\"let column of columns\"\n        [class.pointer]=\"column.orderProperty\"\n        (click)=\"\n          column.orderProperty ? onColumnClick(column.orderProperty) : undefined\n        \"\n      >\n        <div class=\"suis-table__header\">\n          <span>\n            {{ column.name }}\n          </span>\n          <suis-icon\n            *ngIf=\"column.orderProperty && column.orderProperty === orderBy\"\n            [type]=\"\n              sortBy === 'asc'\n                ? SuisIconType.CHEVRON_DOWN\n                : SuisIconType.CHEVRON_UP\n            \"\n            size=\"lg\"\n            color=\"white\"\n          ></suis-icon>\n        </div>\n      </th>\n      <th *ngIf=\"!columns?.length\"></th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr *ngFor=\"let item of data\">\n      <td *ngFor=\"let column of columns\">\n        <ng-container\n          *ngTemplateOutlet=\"\n            column.cell!.templateRef;\n            context: { $implicit: item }\n          \"\n        ></ng-container>\n      </td>\n    </tr>\n    <tr *ngIf=\"!data?.length\">\n      <td class=\"empty\" [attr.colspan]=\"columns ? columns.length : 1\">\n        {{ loading ? '' : emptyMessage }}\n      </td>\n    </tr>\n    <suis-spinner-container\n      *ngIf=\"loading\"\n      [absolute]=\"true\"\n      [blur]=\"true\"\n      [color]=\"'secondary'\"\n    ></suis-spinner-container>\n  </tbody>\n</table>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host{display:block}.suis-table{width:100%;border-collapse:collapse}.suis-table thead tr th{font-weight:500;padding:.75rem 1rem;background-color:#273c75;color:#fff}.suis-table thead tr th:first-child{border-top-left-radius:.25rem}.suis-table thead tr th:last-child{border-top-right-radius:.25rem}.suis-table thead tr th.pointer{cursor:pointer}.suis-table thead tr th.pointer:hover{background-color:#273c75d9}.suis-table thead tr th>.suis-table__header{display:flex;align-items:center}.suis-table thead tr th>.suis-table__header suis-icon{display:block;margin-left:.125rem}.suis-table tbody{position:relative;background-color:#f5f6fa}.suis-table tbody tr{border-bottom:.0625rem solid #dcdde1}.suis-table tbody tr td{padding:.375rem 1rem}.suis-table tbody tr td.empty{text-align:center;padding:1.5rem 1rem}\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: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SuisIconComponent, selector: "suis-icon", inputs: ["size", "color", "type", "outlined", "filled", "pointer", "bold"] }, { kind: "component", type: SuisSpinnerContainerComponent, selector: "suis-spinner-container", inputs: ["size", "color", "blur", "absolute"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SuisTableComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'suis-table', standalone: true, imports: [CommonModule, SuisIconComponent, SuisSpinnerContainerComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<table *ngIf=\"columns\" class=\"suis-table\">\n  <thead>\n    <tr>\n      <th\n        *ngFor=\"let column of columns\"\n        [class.pointer]=\"column.orderProperty\"\n        (click)=\"\n          column.orderProperty ? onColumnClick(column.orderProperty) : undefined\n        \"\n      >\n        <div class=\"suis-table__header\">\n          <span>\n            {{ column.name }}\n          </span>\n          <suis-icon\n            *ngIf=\"column.orderProperty && column.orderProperty === orderBy\"\n            [type]=\"\n              sortBy === 'asc'\n                ? SuisIconType.CHEVRON_DOWN\n                : SuisIconType.CHEVRON_UP\n            \"\n            size=\"lg\"\n            color=\"white\"\n          ></suis-icon>\n        </div>\n      </th>\n      <th *ngIf=\"!columns?.length\"></th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr *ngFor=\"let item of data\">\n      <td *ngFor=\"let column of columns\">\n        <ng-container\n          *ngTemplateOutlet=\"\n            column.cell!.templateRef;\n            context: { $implicit: item }\n          \"\n        ></ng-container>\n      </td>\n    </tr>\n    <tr *ngIf=\"!data?.length\">\n      <td class=\"empty\" [attr.colspan]=\"columns ? columns.length : 1\">\n        {{ loading ? '' : emptyMessage }}\n      </td>\n    </tr>\n    <suis-spinner-container\n      *ngIf=\"loading\"\n      [absolute]=\"true\"\n      [blur]=\"true\"\n      [color]=\"'secondary'\"\n    ></suis-spinner-container>\n  </tbody>\n</table>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host{display:block}.suis-table{width:100%;border-collapse:collapse}.suis-table thead{background-color:#273c75;color:#fff}.suis-table thead tr th{font-weight:500;padding:.75rem 1rem}.suis-table thead tr th:first-child{border-top-left-radius:.25rem}.suis-table thead tr th:last-child{border-top-right-radius:.25rem}.suis-table thead tr th.pointer{cursor:pointer}.suis-table thead tr th>.suis-table__header{display:flex;align-items:center}.suis-table thead tr th>.suis-table__header suis-icon{display:block;margin-left:.125rem}.suis-table tbody{position:relative;background-color:#f5f6fa}.suis-table tbody tr{border-bottom:.0625rem solid #dcdde1}.suis-table tbody tr td{padding:.375rem 1rem}.suis-table tbody tr td.empty{text-align:center;padding:1.5rem 1rem}\n"] }]
+            args: [{ selector: 'suis-table', standalone: true, imports: [CommonModule, SuisIconComponent, SuisSpinnerContainerComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<table *ngIf=\"columns\" class=\"suis-table\">\n  <thead>\n    <tr>\n      <th\n        *ngFor=\"let column of columns\"\n        [class.pointer]=\"column.orderProperty\"\n        (click)=\"\n          column.orderProperty ? onColumnClick(column.orderProperty) : undefined\n        \"\n      >\n        <div class=\"suis-table__header\">\n          <span>\n            {{ column.name }}\n          </span>\n          <suis-icon\n            *ngIf=\"column.orderProperty && column.orderProperty === orderBy\"\n            [type]=\"\n              sortBy === 'asc'\n                ? SuisIconType.CHEVRON_DOWN\n                : SuisIconType.CHEVRON_UP\n            \"\n            size=\"lg\"\n            color=\"white\"\n          ></suis-icon>\n        </div>\n      </th>\n      <th *ngIf=\"!columns?.length\"></th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr *ngFor=\"let item of data\">\n      <td *ngFor=\"let column of columns\">\n        <ng-container\n          *ngTemplateOutlet=\"\n            column.cell!.templateRef;\n            context: { $implicit: item }\n          \"\n        ></ng-container>\n      </td>\n    </tr>\n    <tr *ngIf=\"!data?.length\">\n      <td class=\"empty\" [attr.colspan]=\"columns ? columns.length : 1\">\n        {{ loading ? '' : emptyMessage }}\n      </td>\n    </tr>\n    <suis-spinner-container\n      *ngIf=\"loading\"\n      [absolute]=\"true\"\n      [blur]=\"true\"\n      [color]=\"'secondary'\"\n    ></suis-spinner-container>\n  </tbody>\n</table>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host{display:block}.suis-table{width:100%;border-collapse:collapse}.suis-table thead tr th{font-weight:500;padding:.75rem 1rem;background-color:#273c75;color:#fff}.suis-table thead tr th:first-child{border-top-left-radius:.25rem}.suis-table thead tr th:last-child{border-top-right-radius:.25rem}.suis-table thead tr th.pointer{cursor:pointer}.suis-table thead tr th.pointer:hover{background-color:#273c75d9}.suis-table thead tr th>.suis-table__header{display:flex;align-items:center}.suis-table thead tr th>.suis-table__header suis-icon{display:block;margin-left:.125rem}.suis-table tbody{position:relative;background-color:#f5f6fa}.suis-table tbody tr{border-bottom:.0625rem solid #dcdde1}.suis-table tbody tr td{padding:.375rem 1rem}.suis-table tbody tr td.empty{text-align:center;padding:1.5rem 1rem}\n"] }]
         }], propDecorators: { columns: [{
                 type: ContentChildren,
                 args: [SuisTableColumnDirective]
@@ -2026,11 +2108,11 @@ class SuisTabsComponent {
         this.currentTab = name;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SuisTabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: SuisTabsComponent, isStandalone: true, selector: "suis-tabs", inputs: { currentTab: "currentTab" }, queries: [{ propertyName: "tabs", predicate: SuisTabDirective }], ngImport: i0, template: "<div class=\"suis-tabs\">\n  <div class=\"suis-tabs__actions\">\n    <button\n      *ngFor=\"let name of tabs | suisTabActions\"\n      [class.active]=\"name === currentTab\"\n      (click)=\"onTabActionClick(name)\"\n    >\n      {{ name }}\n    </button>\n  </div>\n  <div class=\"suis-tabs__content\">\n    <ng-container\n      *ngTemplateOutlet=\"tabs | suisTabTemplate : currentTab\"\n    ></ng-container>\n  </div>\n</div>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host{display:block}.suis-tabs__actions{width:100%;display:flex}.suis-tabs__actions button{flex:1;border:0;background-color:#fff;border-bottom:.1875rem solid #f5f6fa;margin:0 .5rem;padding:1rem;transition:.5s border-bottom-color ease-in-out}.suis-tabs__actions button:first-child{margin-left:0}.suis-tabs__actions button:last-child{margin-right:0}.suis-tabs__actions button.active{border-bottom-color:#192a56}.suis-tabs__actions button:hover{border-bottom-color:#273c75;cursor:pointer}.suis-tabs__content{margin-top:1rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: SuisTabActionsPipe, name: "suisTabActions" }, { kind: "pipe", type: SuisTabTemplatePipe, name: "suisTabTemplate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: SuisTabsComponent, isStandalone: true, selector: "suis-tabs", inputs: { currentTab: "currentTab" }, queries: [{ propertyName: "tabs", predicate: SuisTabDirective }], ngImport: i0, template: "<div class=\"suis-tabs\">\n  <div class=\"suis-tabs__actions\">\n    <button\n      *ngFor=\"let name of tabs | suisTabActions\"\n      [class.active]=\"name === currentTab\"\n      (click)=\"onTabActionClick(name)\"\n    >\n      {{ name }}\n    </button>\n  </div>\n  <div class=\"suis-tabs__content\">\n    <ng-container\n      *ngTemplateOutlet=\"tabs | suisTabTemplate : currentTab\"\n    ></ng-container>\n  </div>\n</div>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host{display:block}.suis-tabs__actions{width:100%;display:flex}.suis-tabs__actions button{flex:1;border:0;background-color:#fff;border-bottom:.1875rem solid #f5f6fa;margin:0 .5rem;padding:1rem;transition:.5s border-bottom-color ease-in-out}.suis-tabs__actions button:first-child{margin-left:0}.suis-tabs__actions button:last-child{margin-right:0}.suis-tabs__actions button.active{font-weight:500;color:#192a56;border-bottom-color:#192a56}.suis-tabs__actions button:hover{border-bottom-color:#273c75;cursor:pointer}.suis-tabs__content{margin-top:1rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: SuisTabActionsPipe, name: "suisTabActions" }, { kind: "pipe", type: SuisTabTemplatePipe, name: "suisTabTemplate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SuisTabsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'suis-tabs', standalone: true, imports: [CommonModule, SuisTabActionsPipe, SuisTabTemplatePipe], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"suis-tabs\">\n  <div class=\"suis-tabs__actions\">\n    <button\n      *ngFor=\"let name of tabs | suisTabActions\"\n      [class.active]=\"name === currentTab\"\n      (click)=\"onTabActionClick(name)\"\n    >\n      {{ name }}\n    </button>\n  </div>\n  <div class=\"suis-tabs__content\">\n    <ng-container\n      *ngTemplateOutlet=\"tabs | suisTabTemplate : currentTab\"\n    ></ng-container>\n  </div>\n</div>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host{display:block}.suis-tabs__actions{width:100%;display:flex}.suis-tabs__actions button{flex:1;border:0;background-color:#fff;border-bottom:.1875rem solid #f5f6fa;margin:0 .5rem;padding:1rem;transition:.5s border-bottom-color ease-in-out}.suis-tabs__actions button:first-child{margin-left:0}.suis-tabs__actions button:last-child{margin-right:0}.suis-tabs__actions button.active{border-bottom-color:#192a56}.suis-tabs__actions button:hover{border-bottom-color:#273c75;cursor:pointer}.suis-tabs__content{margin-top:1rem}\n"] }]
+            args: [{ selector: 'suis-tabs', standalone: true, imports: [CommonModule, SuisTabActionsPipe, SuisTabTemplatePipe], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"suis-tabs\">\n  <div class=\"suis-tabs__actions\">\n    <button\n      *ngFor=\"let name of tabs | suisTabActions\"\n      [class.active]=\"name === currentTab\"\n      (click)=\"onTabActionClick(name)\"\n    >\n      {{ name }}\n    </button>\n  </div>\n  <div class=\"suis-tabs__content\">\n    <ng-container\n      *ngTemplateOutlet=\"tabs | suisTabTemplate : currentTab\"\n    ></ng-container>\n  </div>\n</div>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host{display:block}.suis-tabs__actions{width:100%;display:flex}.suis-tabs__actions button{flex:1;border:0;background-color:#fff;border-bottom:.1875rem solid #f5f6fa;margin:0 .5rem;padding:1rem;transition:.5s border-bottom-color ease-in-out}.suis-tabs__actions button:first-child{margin-left:0}.suis-tabs__actions button:last-child{margin-right:0}.suis-tabs__actions button.active{font-weight:500;color:#192a56;border-bottom-color:#192a56}.suis-tabs__actions button:hover{border-bottom-color:#273c75;cursor:pointer}.suis-tabs__content{margin-top:1rem}\n"] }]
         }], propDecorators: { tabs: [{
                 type: ContentChildren,
                 args: [SuisTabDirective]
@@ -2081,7 +2163,7 @@ class SuisTextAreaComponent extends SuisInputBase {
                 multi: true,
                 useExisting: forwardRef(() => SuisTextAreaComponent),
             },
-        ], usesInheritance: true, ngImport: i0, template: "<textarea\n  class=\"suis-text-area\"\n  [class.suis-text-area--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></textarea>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host{display:block}.suis-text-area{width:100%;background-color:#fff;box-shadow:0 2px 5px #00000040;border-radius:.25rem;padding:.5rem 1rem;border:0;min-height:2rem;min-height:6.25rem}.suis-text-area:focus{box-shadow:0 2px 5px #192a56bf;outline:none}.suis-text-area--invalid{box-shadow:0 2px 5px #ff4757bf}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], usesInheritance: true, ngImport: i0, template: "<textarea\n  class=\"suis-text-area\"\n  [class.suis-text-area--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></textarea>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host{display:block}.suis-text-area{width:100%;background-color:#fff;border-radius:.25rem;padding:.5rem 1rem;border:.0625rem solid #dcdde1;min-height:2.25rem;min-height:6.25rem}.suis-text-area:focus{border:.0625rem solid #192a56;box-shadow:0 2px 5px #192a56bf;outline:none}.suis-text-area--invalid{border:.0625rem solid #ff4757}.suis-text-area--invalid:focus{border:.0625rem solid #ff4757;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: SuisTextAreaComponent, decorators: [{
             type: Component,
@@ -2091,7 +2173,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImpor
                             multi: true,
                             useExisting: forwardRef(() => SuisTextAreaComponent),
                         },
-                    ], template: "<textarea\n  class=\"suis-text-area\"\n  [class.suis-text-area--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></textarea>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host{display:block}.suis-text-area{width:100%;background-color:#fff;box-shadow:0 2px 5px #00000040;border-radius:.25rem;padding:.5rem 1rem;border:0;min-height:2rem;min-height:6.25rem}.suis-text-area:focus{box-shadow:0 2px 5px #192a56bf;outline:none}.suis-text-area--invalid{box-shadow:0 2px 5px #ff4757bf}\n"] }]
+                    ], template: "<textarea\n  class=\"suis-text-area\"\n  [class.suis-text-area--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></textarea>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host{display:block}.suis-text-area{width:100%;background-color:#fff;border-radius:.25rem;padding:.5rem 1rem;border:.0625rem solid #dcdde1;min-height:2.25rem;min-height:6.25rem}.suis-text-area:focus{border:.0625rem solid #192a56;box-shadow:0 2px 5px #192a56bf;outline:none}.suis-text-area--invalid{border:.0625rem solid #ff4757}.suis-text-area--invalid:focus{border:.0625rem solid #ff4757;box-shadow:0 2px 5px #ff4757bf}\n"] }]
         }], propDecorators: { placeholder: [{
                 type: Input
             }] } });
@@ -2113,7 +2195,7 @@ class SuisToggleComponent extends SuisCheckboxBase {
                 multi: true,
                 useExisting: forwardRef(() => SuisToggleComponent),
             },
-        ], usesInheritance: true, ngImport: i0, template: "<input\n  #input\n  type=\"checkbox\"\n  class=\"suis-toggle\"\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-toggle__container\"\n    [class.suis-toggle__container--invalid]=\"invalid\"\n    [class.suis-toggle__container--readonly]=\"readonly\"\n  >\n    <div\n      class=\"suis-toggle__container__thumb\"\n      [class.suis-toggle__container__thumb--active]=\"value\"\n    ></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-toggle{display:none}.suis-toggle__container{width:2.25rem;height:1.25rem;border:.0625rem solid #192a56;border-radius:1rem;display:flex;align-items:center;margin-right:.5rem;background-color:#fff}.suis-toggle__container:focus{box-shadow:0 2px 5px #192a56bf;outline:none}.suis-toggle__container--readonly{border:.0625rem solid #dcdde1}.suis-toggle__container--readonly:focus{box-shadow:none}.suis-toggle__container--invalid{border:.0625rem solid #ff4757;box-shadow:0 2px 5px #ff4757bf}.suis-toggle__container__thumb{border-radius:100%;height:.75rem;width:.75rem;background-color:#dcdde1;transform:translate(.25rem);transition:.25s ease-in-out}.suis-toggle__container__thumb--active{background-color:#192a56;transform:translate(1.125rem)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: SuisLabelComponent, selector: "suis-label", inputs: ["for", "required", "pointer", "readonly"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], usesInheritance: true, ngImport: i0, template: "<input\n  #input\n  type=\"checkbox\"\n  class=\"suis-toggle\"\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-toggle__container\"\n    [class.suis-toggle__container--invalid]=\"invalid\"\n    [class.suis-toggle__container--readonly]=\"readonly\"\n  >\n    <div\n      class=\"suis-toggle__container__thumb\"\n      [class.suis-toggle__container__thumb--active]=\"value\"\n    ></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-toggle{display:none}.suis-toggle:checked~suis-label ::ng-deep .suis-toggle__container{border:.0625rem solid #192a56}.suis-toggle__container{width:2.25rem;height:1.25rem;border:.0625rem solid #dcdde1;border-radius:1rem;display:flex;align-items:center;margin-right:.5rem;background-color:#fff}.suis-toggle__container:focus{box-shadow:0 2px 5px #192a56bf;outline:none}.suis-toggle__container--readonly{border:.0625rem solid #dcdde1}.suis-toggle__container--readonly:focus{box-shadow:none}.suis-toggle__container--invalid{border:.0625rem solid #ff4757}.suis-toggle__container--invalid:focus{box-shadow:0 2px 5px #ff4757bf}.suis-toggle__container__thumb{border-radius:100%;height:.75rem;width:.75rem;background-color:#dcdde1;transform:translate(.25rem);transition:.25s ease-in-out}.suis-toggle__container__thumb--active{background-color:#192a56;transform:translate(1.125rem)}\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: SuisToggleComponent, decorators: [{
             type: Component,
@@ -2123,7 +2205,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImpor
                             multi: true,
                             useExisting: forwardRef(() => SuisToggleComponent),
                         },
-                    ], template: "<input\n  #input\n  type=\"checkbox\"\n  class=\"suis-toggle\"\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-toggle__container\"\n    [class.suis-toggle__container--invalid]=\"invalid\"\n    [class.suis-toggle__container--readonly]=\"readonly\"\n  >\n    <div\n      class=\"suis-toggle__container__thumb\"\n      [class.suis-toggle__container__thumb--active]=\"value\"\n    ></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-toggle{display:none}.suis-toggle__container{width:2.25rem;height:1.25rem;border:.0625rem solid #192a56;border-radius:1rem;display:flex;align-items:center;margin-right:.5rem;background-color:#fff}.suis-toggle__container:focus{box-shadow:0 2px 5px #192a56bf;outline:none}.suis-toggle__container--readonly{border:.0625rem solid #dcdde1}.suis-toggle__container--readonly:focus{box-shadow:none}.suis-toggle__container--invalid{border:.0625rem solid #ff4757;box-shadow:0 2px 5px #ff4757bf}.suis-toggle__container__thumb{border-radius:100%;height:.75rem;width:.75rem;background-color:#dcdde1;transform:translate(.25rem);transition:.25s ease-in-out}.suis-toggle__container__thumb--active{background-color:#192a56;transform:translate(1.125rem)}\n"] }]
+                    ], template: "<input\n  #input\n  type=\"checkbox\"\n  class=\"suis-toggle\"\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-toggle__container\"\n    [class.suis-toggle__container--invalid]=\"invalid\"\n    [class.suis-toggle__container--readonly]=\"readonly\"\n  >\n    <div\n      class=\"suis-toggle__container__thumb\"\n      [class.suis-toggle__container__thumb--active]=\"value\"\n    ></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-toggle{display:none}.suis-toggle:checked~suis-label ::ng-deep .suis-toggle__container{border:.0625rem solid #192a56}.suis-toggle__container{width:2.25rem;height:1.25rem;border:.0625rem solid #dcdde1;border-radius:1rem;display:flex;align-items:center;margin-right:.5rem;background-color:#fff}.suis-toggle__container:focus{box-shadow:0 2px 5px #192a56bf;outline:none}.suis-toggle__container--readonly{border:.0625rem solid #dcdde1}.suis-toggle__container--readonly:focus{box-shadow:none}.suis-toggle__container--invalid{border:.0625rem solid #ff4757}.suis-toggle__container--invalid:focus{box-shadow:0 2px 5px #ff4757bf}.suis-toggle__container__thumb{border-radius:100%;height:.75rem;width:.75rem;background-color:#dcdde1;transform:translate(.25rem);transition:.25s ease-in-out}.suis-toggle__container__thumb--active{background-color:#192a56;transform:translate(1.125rem)}\n"] }]
         }] });
 
 class SuisToolbarComponent {
@@ -2134,11 +2216,11 @@ class SuisToolbarComponent {
         this.spacing = false;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SuisToolbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: SuisToolbarComponent, isStandalone: true, selector: "suis-toolbar", inputs: { spacing: "spacing" }, ngImport: i0, template: "<div class=\"suis-toolbar\" [class.suis-toolbar--spacing]=\"spacing\">\n  <div>\n    <ng-content select=\"[suisToolbarLeft]\"></ng-content>\n  </div>\n  <div>\n    <ng-content select=\"[suisToolbarCenter]\"></ng-content>\n  </div>\n  <div>\n    <ng-content select=\"[suisToolbarRight]\"></ng-content>\n  </div>\n</div>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host{display:block}.suis-toolbar{width:100%;display:flex;align-items:center;justify-content:space-between;background-color:#fff;box-shadow:0 2px 5px #00000040}.suis-toolbar--spacing{padding:.75rem 1rem}@media (min-width: 768px){.suis-toolbar--spacing{padding:1rem 1.25rem}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: SuisToolbarComponent, isStandalone: true, selector: "suis-toolbar", inputs: { spacing: "spacing" }, ngImport: i0, template: "<div class=\"suis-toolbar\" [class.suis-toolbar--spacing]=\"spacing\">\n  <div>\n    <ng-content select=\"[suisToolbarLeft]\"></ng-content>\n  </div>\n  <div>\n    <ng-content select=\"[suisToolbarCenter]\"></ng-content>\n  </div>\n  <div>\n    <ng-content select=\"[suisToolbarRight]\"></ng-content>\n  </div>\n</div>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host{display:block}.suis-toolbar{width:100%;display:flex;align-items:center;justify-content:space-between;background-color:#fff;border-bottom:.0625rem solid #dcdde1}.suis-toolbar--spacing{padding:.75rem 1rem}@media (min-width: 768px){.suis-toolbar--spacing{padding:1rem 1.25rem}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SuisToolbarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'suis-toolbar', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"suis-toolbar\" [class.suis-toolbar--spacing]=\"spacing\">\n  <div>\n    <ng-content select=\"[suisToolbarLeft]\"></ng-content>\n  </div>\n  <div>\n    <ng-content select=\"[suisToolbarCenter]\"></ng-content>\n  </div>\n  <div>\n    <ng-content select=\"[suisToolbarRight]\"></ng-content>\n  </div>\n</div>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host{display:block}.suis-toolbar{width:100%;display:flex;align-items:center;justify-content:space-between;background-color:#fff;box-shadow:0 2px 5px #00000040}.suis-toolbar--spacing{padding:.75rem 1rem}@media (min-width: 768px){.suis-toolbar--spacing{padding:1rem 1.25rem}}\n"] }]
+            args: [{ selector: 'suis-toolbar', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"suis-toolbar\" [class.suis-toolbar--spacing]=\"spacing\">\n  <div>\n    <ng-content select=\"[suisToolbarLeft]\"></ng-content>\n  </div>\n  <div>\n    <ng-content select=\"[suisToolbarCenter]\"></ng-content>\n  </div>\n  <div>\n    <ng-content select=\"[suisToolbarRight]\"></ng-content>\n  </div>\n</div>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host{display:block}.suis-toolbar{width:100%;display:flex;align-items:center;justify-content:space-between;background-color:#fff;border-bottom:.0625rem solid #dcdde1}.suis-toolbar--spacing{padding:.75rem 1rem}@media (min-width: 768px){.suis-toolbar--spacing{padding:1rem 1.25rem}}\n"] }]
         }], propDecorators: { spacing: [{
                 type: Input
             }] } });
@@ -2147,5 +2229,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, SuisInputCheckboxComponent, SuisInputChipsComponent, SuisInputComponent, SuisInputImageComponent, 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, SuisTextAreaComponent, SuisTitleComponent, SuisToggleComponent, SuisToolbarComponent };
+export { SuisAccordionComponent, SuisAlertComponent, SuisBoxComponent, SuisBreadcrumbsComponent, SuisButtonComponent, SuisButtonLinkComponent, SuisButtonOutlinedComponent, SuisChipComponent, SuisContainerComponent, SuisFormFieldComponent, SuisIconComponent, SuisIconType, SuisInputCheckboxComponent, SuisInputChipsComponent, SuisInputComponent, SuisInputImageComponent, SuisInputNumberComponent, SuisInputRadioComponent, SuisItemComponent, 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, SuisTextAreaComponent, SuisTitleComponent, SuisToggleComponent, SuisToolbarComponent };
 //# sourceMappingURL=suis.mjs.map