suis 0.7.0 → 0.9.0

package/fesm2022/suis.mjs

@@ -1,8 +1,9 @@
 import * as i0 from '@angular/core';
-import { Component, ChangeDetectionStrategy, Input, inject, ElementRef, Renderer2, Directive, ViewEncapsulation, HostListener, Pipe, EventEmitter, Output, ChangeDetectorRef, forwardRef } from '@angular/core';
+import { Component, ChangeDetectionStrategy, Input, inject, ElementRef, Renderer2, Directive, ChangeDetectorRef, EventEmitter, Output, ViewEncapsulation, HostListener, Pipe, forwardRef, ViewChild } from '@angular/core';
 import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
-import { NG_VALUE_ACCESSOR } from '@angular/forms';
+import * as i2 from '@angular/forms';
+import { NG_VALUE_ACCESSOR, FormControl, ReactiveFormsModule } from '@angular/forms';
 
 class SuisBoxComponent {
     constructor() {
@@ -12,11 +13,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}.suis-box{background-color:#fff;box-shadow:0 2px 5px #00000080;border-radius:.25rem}.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)}}.suis-box{background-color:#fff;box-shadow:0 2px 5px #00000080;border-radius:.25rem}.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}.suis-box{background-color:#fff;box-shadow:0 2px 5px #00000080;border-radius:.25rem}.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)}}.suis-box{background-color:#fff;box-shadow:0 2px 5px #00000080;border-radius:.25rem}.suis-box--spacing{padding:1.25rem}\n"] }]
         }], propDecorators: { spacing: [{
                 type: Input
             }] } });
@@ -28,7 +29,7 @@ class SuisButtonBase {
         /** @internal */
         this.renderer2 = inject(Renderer2);
         /**
-         * Sets button's color theme. Type of SuisColor. By default set to 'primary'.
+         * Sets button's color theme. Type of SuisPalleteColor | SuisInfoColor. By default set to 'primary'.
          */
         this.color = 'primary';
         /**
@@ -53,20 +54,75 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImpor
                 type: Input
             }] } });
 
+class SuisInputBase {
+    constructor() {
+        /** @internal */
+        this.cdRef = inject(ChangeDetectorRef);
+        /**
+         * Sets input disabled state. By default set to false.
+         */
+        this.readonly = false;
+        /**
+         * Adds invalid styling to the input. By default set to false.
+         */
+        this.invalid = false;
+        /**
+         * Emits on value changed.
+         */
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        this.changed = new EventEmitter();
+        /**
+         * Emits on input touched.
+         */
+        this.touched = new EventEmitter();
+        // eslint-disable-next-line @typescript-eslint/no-empty-function, @typescript-eslint/no-unused-vars, @typescript-eslint/no-explicit-any
+        this._onChange = (value) => { };
+        // eslint-disable-next-line @typescript-eslint/no-empty-function
+        this._onTouched = () => { };
+    }
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    registerOnChange(fn) {
+        this._onChange = fn;
+    }
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    registerOnTouched(fn) {
+        this._onTouched = fn;
+    }
+    /** @internal */
+    onTouch() {
+        this._onTouched();
+        this.touched.emit();
+        this.cdRef.markForCheck();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SuisInputBase, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.0.0", type: SuisInputBase, inputs: { readonly: "readonly", invalid: "invalid" }, outputs: { changed: "changed", touched: "touched" }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SuisInputBase, decorators: [{
+            type: Directive
+        }], propDecorators: { readonly: [{
+                type: Input
+            }], invalid: [{
+                type: Input
+            }], changed: [{
+                type: Output
+            }], touched: [{
+                type: Output
+            }] } });
+
 class SuisButtonComponent extends SuisButtonBase {
     ngAfterViewInit() {
         this.renderer2.addClass(this.elementRef.nativeElement, 'suis-button');
         this.renderer2.addClass(this.elementRef.nativeElement, `suis-button--${this.color}`);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SuisButtonComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: SuisButtonComponent, isStandalone: true, selector: "button[suisButton]", host: { properties: { "attr.disabled": "disabled || null", "attr.tabindex": "disabled ? -1 : 0" } }, usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"!loading; else spinner\">\n  <ng-content></ng-content>\n</ng-container>\n<ng-template #spinner>\n  <!-- TODO: <suis-spinner></suis-spinner> -->\n</ng-template>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}.suis-button{width:100%;display:block;padding:.5rem 1rem;border:none;border-radius:.25rem;transition:background-color .25s ease-in-out;font-size:500;text-decoration:none;text-align:center}.suis-button:hover:not(:disabled){cursor:pointer}.suis-button:hover:disabled{cursor:not-allowed}.suis-button:focus{outline:none}.suis-button--primary{background-color:#192a56;color:#fff}.suis-button--primary:hover:not(:disabled){background-color:#192a56d9}.suis-button--primary:focus:not(:disabled){box-shadow:0 2px 5px #192a56bf}.suis-button--secondary{background-color:#273c75;color:#fff}.suis-button--secondary:hover:not(:disabled){background-color:#273c75d9}.suis-button--secondary:focus:not(:disabled){box-shadow:0 2px 5px #273c75bf}.suis-button--tertiary{background-color:#dcdde1;color:#2f3640}.suis-button--tertiary:hover:not(:disabled){background-color:#dcdde1d9}.suis-button--tertiary:focus:not(:disabled){box-shadow:0 2px 5px #dcdde1bf}.suis-button--complementary{background-color:#f5f6fa;color:#2f3640}.suis-button--complementary:hover:not(:disabled){background-color:#f5f6fad9}.suis-button--complementary:focus:not(:disabled){box-shadow:0 2px 5px #f5f6fabf}.suis-button--success{background-color:#2ed573;color:#fff}.suis-button--success:hover:not(:disabled){background-color:#2ed573d9}.suis-button--success:focus:not(:disabled){box-shadow:0 2px 5px #2ed573bf}.suis-button--warning{background-color:#ffa502;color:#fff}.suis-button--warning:hover:not(:disabled){background-color:#ffa502d9}.suis-button--warning:focus:not(:disabled){box-shadow:0 2px 5px #ffa502bf}.suis-button--danger{background-color:#ff4757;color:#fff}.suis-button--danger:hover:not(:disabled){background-color:#ff4757d9}.suis-button--danger:focus:not(:disabled){box-shadow:0 2px 5px #ff4757bf}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: SuisButtonComponent, isStandalone: true, selector: "button[suisButton]", host: { properties: { "attr.disabled": "disabled || null", "attr.tabindex": "disabled ? -1 : 0" } }, usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"!loading; else spinner\">\r\n  <ng-content></ng-content>\r\n</ng-container>\r\n<ng-template #spinner>\r\n  <!-- TODO: <suis-spinner></suis-spinner> -->\r\n</ng-template>\r\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.suis-button{width:100%;display:block;padding:.5rem 1rem;border:none;border-radius:.25rem;transition:background-color .25s ease-in-out;font-size:500;text-decoration:none;text-align:center}.suis-button:hover:not(:disabled){cursor:pointer}.suis-button:hover:disabled{cursor:not-allowed}.suis-button:focus{outline:none}.suis-button--primary{background-color:#192a56;color:#fff}.suis-button--primary:hover:not(:disabled){background-color:#192a56d9}.suis-button--primary:focus:not(:disabled){box-shadow:0 2px 5px #192a56bf}.suis-button--secondary{background-color:#273c75;color:#fff}.suis-button--secondary:hover:not(:disabled){background-color:#273c75d9}.suis-button--secondary:focus:not(:disabled){box-shadow:0 2px 5px #273c75bf}.suis-button--tertiary{background-color:#dcdde1;color:#2f3640}.suis-button--tertiary:hover:not(:disabled){background-color:#dcdde1d9}.suis-button--tertiary:focus:not(:disabled){box-shadow:0 2px 5px #dcdde1bf}.suis-button--complementary{background-color:#f5f6fa;color:#2f3640}.suis-button--complementary:hover:not(:disabled){background-color:#f5f6fad9}.suis-button--complementary:focus:not(:disabled){box-shadow:0 2px 5px #f5f6fabf}.suis-button--success{background-color:#2ed573;color:#fff}.suis-button--success:hover:not(:disabled){background-color:#2ed573d9}.suis-button--success:focus:not(:disabled){box-shadow:0 2px 5px #2ed573bf}.suis-button--warning{background-color:#ffa502;color:#fff}.suis-button--warning:hover:not(:disabled){background-color:#ffa502d9}.suis-button--warning:focus:not(:disabled){box-shadow:0 2px 5px #ffa502bf}.suis-button--danger{background-color:#ff4757;color:#fff}.suis-button--danger:hover:not(:disabled){background-color:#ff4757d9}.suis-button--danger:focus:not(:disabled){box-shadow:0 2px 5px #ff4757bf}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SuisButtonComponent, decorators: [{
             type: Component,
             args: [{ selector: 'button[suisButton]', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
                         '[attr.disabled]': 'disabled || null',
                         '[attr.tabindex]': 'disabled ? -1 : 0',
-                    }, template: "<ng-container *ngIf=\"!loading; else spinner\">\n  <ng-content></ng-content>\n</ng-container>\n<ng-template #spinner>\n  <!-- TODO: <suis-spinner></suis-spinner> -->\n</ng-template>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}.suis-button{width:100%;display:block;padding:.5rem 1rem;border:none;border-radius:.25rem;transition:background-color .25s ease-in-out;font-size:500;text-decoration:none;text-align:center}.suis-button:hover:not(:disabled){cursor:pointer}.suis-button:hover:disabled{cursor:not-allowed}.suis-button:focus{outline:none}.suis-button--primary{background-color:#192a56;color:#fff}.suis-button--primary:hover:not(:disabled){background-color:#192a56d9}.suis-button--primary:focus:not(:disabled){box-shadow:0 2px 5px #192a56bf}.suis-button--secondary{background-color:#273c75;color:#fff}.suis-button--secondary:hover:not(:disabled){background-color:#273c75d9}.suis-button--secondary:focus:not(:disabled){box-shadow:0 2px 5px #273c75bf}.suis-button--tertiary{background-color:#dcdde1;color:#2f3640}.suis-button--tertiary:hover:not(:disabled){background-color:#dcdde1d9}.suis-button--tertiary:focus:not(:disabled){box-shadow:0 2px 5px #dcdde1bf}.suis-button--complementary{background-color:#f5f6fa;color:#2f3640}.suis-button--complementary:hover:not(:disabled){background-color:#f5f6fad9}.suis-button--complementary:focus:not(:disabled){box-shadow:0 2px 5px #f5f6fabf}.suis-button--success{background-color:#2ed573;color:#fff}.suis-button--success:hover:not(:disabled){background-color:#2ed573d9}.suis-button--success:focus:not(:disabled){box-shadow:0 2px 5px #2ed573bf}.suis-button--warning{background-color:#ffa502;color:#fff}.suis-button--warning:hover:not(:disabled){background-color:#ffa502d9}.suis-button--warning:focus:not(:disabled){box-shadow:0 2px 5px #ffa502bf}.suis-button--danger{background-color:#ff4757;color:#fff}.suis-button--danger:hover:not(:disabled){background-color:#ff4757d9}.suis-button--danger:focus:not(:disabled){box-shadow:0 2px 5px #ff4757bf}\n"] }]
+                    }, template: "<ng-container *ngIf=\"!loading; else spinner\">\r\n  <ng-content></ng-content>\r\n</ng-container>\r\n<ng-template #spinner>\r\n  <!-- TODO: <suis-spinner></suis-spinner> -->\r\n</ng-template>\r\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.suis-button{width:100%;display:block;padding:.5rem 1rem;border:none;border-radius:.25rem;transition:background-color .25s ease-in-out;font-size:500;text-decoration:none;text-align:center}.suis-button:hover:not(:disabled){cursor:pointer}.suis-button:hover:disabled{cursor:not-allowed}.suis-button:focus{outline:none}.suis-button--primary{background-color:#192a56;color:#fff}.suis-button--primary:hover:not(:disabled){background-color:#192a56d9}.suis-button--primary:focus:not(:disabled){box-shadow:0 2px 5px #192a56bf}.suis-button--secondary{background-color:#273c75;color:#fff}.suis-button--secondary:hover:not(:disabled){background-color:#273c75d9}.suis-button--secondary:focus:not(:disabled){box-shadow:0 2px 5px #273c75bf}.suis-button--tertiary{background-color:#dcdde1;color:#2f3640}.suis-button--tertiary:hover:not(:disabled){background-color:#dcdde1d9}.suis-button--tertiary:focus:not(:disabled){box-shadow:0 2px 5px #dcdde1bf}.suis-button--complementary{background-color:#f5f6fa;color:#2f3640}.suis-button--complementary:hover:not(:disabled){background-color:#f5f6fad9}.suis-button--complementary:focus:not(:disabled){box-shadow:0 2px 5px #f5f6fabf}.suis-button--success{background-color:#2ed573;color:#fff}.suis-button--success:hover:not(:disabled){background-color:#2ed573d9}.suis-button--success:focus:not(:disabled){box-shadow:0 2px 5px #2ed573bf}.suis-button--warning{background-color:#ffa502;color:#fff}.suis-button--warning:hover:not(:disabled){background-color:#ffa502d9}.suis-button--warning:focus:not(:disabled){box-shadow:0 2px 5px #ffa502bf}.suis-button--danger{background-color:#ff4757;color:#fff}.suis-button--danger:hover:not(:disabled){background-color:#ff4757d9}.suis-button--danger:focus:not(:disabled){box-shadow:0 2px 5px #ff4757bf}\n"] }]
         }] });
 class SuisButtonOutlinedComponent extends SuisButtonBase {
     ngAfterViewInit() {
@@ -74,14 +130,14 @@ class SuisButtonOutlinedComponent extends SuisButtonBase {
         this.renderer2.addClass(this.elementRef.nativeElement, `suis-button-outlined--${this.color}`);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SuisButtonOutlinedComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: SuisButtonOutlinedComponent, isStandalone: true, selector: "button[suisButtonOutlined]", host: { properties: { "attr.disabled": "disabled || null", "attr.tabindex": "disabled ? -1 : 0" } }, usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"!loading; else spinner\">\n  <ng-content></ng-content>\n</ng-container>\n<ng-template #spinner>\n  <!-- TODO: <suis-spinner></suis-spinner> -->\n</ng-template>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}.suis-button-outlined{width:100%;display:block;padding:.5rem 1rem;border-width:.125rem;border-style:solid;border-radius:.25rem;background-color:transparent;transition:background-color .5s ease-in-out;font-size:500}.suis-button-outlined:hover:not(:disabled){cursor:pointer}.suis-button-outlined:hover:disabled{cursor:not-allowed}.suis-button-outlined:focus,.suis-button-outlined:focus-within{outline:none}.suis-button-outlined--primary{border-color:#192a56;color:#192a56}.suis-button-outlined--primary:hover:not(:disabled){background-color:#192a56;color:#fff}.suis-button-outlined--primary:focus:not(:disabled){box-shadow:0 2px 5px #192a56bf}.suis-button-outlined--secondary{border-color:#273c75;color:#273c75}.suis-button-outlined--secondary:hover:not(:disabled){background-color:#273c75;color:#fff}.suis-button-outlined--secondary:focus:not(:disabled){box-shadow:0 2px 5px #273c75bf}.suis-button-outlined--tertiary{border-color:#dcdde1;color:#dcdde1}.suis-button-outlined--tertiary:hover:not(:disabled){background-color:#dcdde1;color:#2f3640}.suis-button-outlined--tertiary:focus:not(:disabled){box-shadow:0 2px 5px #dcdde1bf}.suis-button-outlined--complementary{border-color:#f5f6fa;color:#f5f6fa}.suis-button-outlined--complementary:hover:not(:disabled){background-color:#f5f6fa;color:#2f3640}.suis-button-outlined--complementary:focus:not(:disabled){box-shadow:0 2px 5px #f5f6fabf}.suis-button-outlined--success{border-color:#2ed573;color:#2ed573}.suis-button-outlined--success:hover:not(:disabled){background-color:#2ed573;color:#fff}.suis-button-outlined--success:focus:not(:disabled){box-shadow:0 2px 5px #2ed573bf}.suis-button-outlined--warning{border-color:#ffa502;color:#ffa502}.suis-button-outlined--warning:hover:not(:disabled){background-color:#ffa502;color:#fff}.suis-button-outlined--warning:focus:not(:disabled){box-shadow:0 2px 5px #ffa502bf}.suis-button-outlined--danger{border-color:#ff4757;color:#ff4757}.suis-button-outlined--danger:hover:not(:disabled){background-color:#ff4757;color:#fff}.suis-button-outlined--danger:focus:not(:disabled){box-shadow:0 2px 5px #ff4757bf}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: SuisButtonOutlinedComponent, isStandalone: true, selector: "button[suisButtonOutlined]", host: { properties: { "attr.disabled": "disabled || null", "attr.tabindex": "disabled ? -1 : 0" } }, usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"!loading; else spinner\">\r\n  <ng-content></ng-content>\r\n</ng-container>\r\n<ng-template #spinner>\r\n  <!-- TODO: <suis-spinner></suis-spinner> -->\r\n</ng-template>\r\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.suis-button-outlined{width:100%;display:block;padding:.5rem 1rem;border-width:.125rem;border-style:solid;border-radius:.25rem;background-color:transparent;transition:background-color .5s ease-in-out;font-size:500}.suis-button-outlined:hover:not(:disabled){cursor:pointer}.suis-button-outlined:hover:disabled{cursor:not-allowed}.suis-button-outlined:focus,.suis-button-outlined:focus-within{outline:none}.suis-button-outlined--primary{border-color:#192a56;color:#192a56}.suis-button-outlined--primary:hover:not(:disabled){background-color:#192a56;color:#fff}.suis-button-outlined--primary:focus:not(:disabled){box-shadow:0 2px 5px #192a56bf}.suis-button-outlined--secondary{border-color:#273c75;color:#273c75}.suis-button-outlined--secondary:hover:not(:disabled){background-color:#273c75;color:#fff}.suis-button-outlined--secondary:focus:not(:disabled){box-shadow:0 2px 5px #273c75bf}.suis-button-outlined--tertiary{border-color:#dcdde1;color:#dcdde1}.suis-button-outlined--tertiary:hover:not(:disabled){background-color:#dcdde1;color:#2f3640}.suis-button-outlined--tertiary:focus:not(:disabled){box-shadow:0 2px 5px #dcdde1bf}.suis-button-outlined--complementary{border-color:#f5f6fa;color:#f5f6fa}.suis-button-outlined--complementary:hover:not(:disabled){background-color:#f5f6fa;color:#2f3640}.suis-button-outlined--complementary:focus:not(:disabled){box-shadow:0 2px 5px #f5f6fabf}.suis-button-outlined--success{border-color:#2ed573;color:#2ed573}.suis-button-outlined--success:hover:not(:disabled){background-color:#2ed573;color:#fff}.suis-button-outlined--success:focus:not(:disabled){box-shadow:0 2px 5px #2ed573bf}.suis-button-outlined--warning{border-color:#ffa502;color:#ffa502}.suis-button-outlined--warning:hover:not(:disabled){background-color:#ffa502;color:#fff}.suis-button-outlined--warning:focus:not(:disabled){box-shadow:0 2px 5px #ffa502bf}.suis-button-outlined--danger{border-color:#ff4757;color:#ff4757}.suis-button-outlined--danger:hover:not(:disabled){background-color:#ff4757;color:#fff}.suis-button-outlined--danger:focus:not(:disabled){box-shadow:0 2px 5px #ff4757bf}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SuisButtonOutlinedComponent, decorators: [{
             type: Component,
             args: [{ selector: 'button[suisButtonOutlined]', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
                         '[attr.disabled]': 'disabled || null',
                         '[attr.tabindex]': 'disabled ? -1 : 0',
-                    }, template: "<ng-container *ngIf=\"!loading; else spinner\">\n  <ng-content></ng-content>\n</ng-container>\n<ng-template #spinner>\n  <!-- TODO: <suis-spinner></suis-spinner> -->\n</ng-template>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}.suis-button-outlined{width:100%;display:block;padding:.5rem 1rem;border-width:.125rem;border-style:solid;border-radius:.25rem;background-color:transparent;transition:background-color .5s ease-in-out;font-size:500}.suis-button-outlined:hover:not(:disabled){cursor:pointer}.suis-button-outlined:hover:disabled{cursor:not-allowed}.suis-button-outlined:focus,.suis-button-outlined:focus-within{outline:none}.suis-button-outlined--primary{border-color:#192a56;color:#192a56}.suis-button-outlined--primary:hover:not(:disabled){background-color:#192a56;color:#fff}.suis-button-outlined--primary:focus:not(:disabled){box-shadow:0 2px 5px #192a56bf}.suis-button-outlined--secondary{border-color:#273c75;color:#273c75}.suis-button-outlined--secondary:hover:not(:disabled){background-color:#273c75;color:#fff}.suis-button-outlined--secondary:focus:not(:disabled){box-shadow:0 2px 5px #273c75bf}.suis-button-outlined--tertiary{border-color:#dcdde1;color:#dcdde1}.suis-button-outlined--tertiary:hover:not(:disabled){background-color:#dcdde1;color:#2f3640}.suis-button-outlined--tertiary:focus:not(:disabled){box-shadow:0 2px 5px #dcdde1bf}.suis-button-outlined--complementary{border-color:#f5f6fa;color:#f5f6fa}.suis-button-outlined--complementary:hover:not(:disabled){background-color:#f5f6fa;color:#2f3640}.suis-button-outlined--complementary:focus:not(:disabled){box-shadow:0 2px 5px #f5f6fabf}.suis-button-outlined--success{border-color:#2ed573;color:#2ed573}.suis-button-outlined--success:hover:not(:disabled){background-color:#2ed573;color:#fff}.suis-button-outlined--success:focus:not(:disabled){box-shadow:0 2px 5px #2ed573bf}.suis-button-outlined--warning{border-color:#ffa502;color:#ffa502}.suis-button-outlined--warning:hover:not(:disabled){background-color:#ffa502;color:#fff}.suis-button-outlined--warning:focus:not(:disabled){box-shadow:0 2px 5px #ffa502bf}.suis-button-outlined--danger{border-color:#ff4757;color:#ff4757}.suis-button-outlined--danger:hover:not(:disabled){background-color:#ff4757;color:#fff}.suis-button-outlined--danger:focus:not(:disabled){box-shadow:0 2px 5px #ff4757bf}\n"] }]
+                    }, template: "<ng-container *ngIf=\"!loading; else spinner\">\r\n  <ng-content></ng-content>\r\n</ng-container>\r\n<ng-template #spinner>\r\n  <!-- TODO: <suis-spinner></suis-spinner> -->\r\n</ng-template>\r\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.suis-button-outlined{width:100%;display:block;padding:.5rem 1rem;border-width:.125rem;border-style:solid;border-radius:.25rem;background-color:transparent;transition:background-color .5s ease-in-out;font-size:500}.suis-button-outlined:hover:not(:disabled){cursor:pointer}.suis-button-outlined:hover:disabled{cursor:not-allowed}.suis-button-outlined:focus,.suis-button-outlined:focus-within{outline:none}.suis-button-outlined--primary{border-color:#192a56;color:#192a56}.suis-button-outlined--primary:hover:not(:disabled){background-color:#192a56;color:#fff}.suis-button-outlined--primary:focus:not(:disabled){box-shadow:0 2px 5px #192a56bf}.suis-button-outlined--secondary{border-color:#273c75;color:#273c75}.suis-button-outlined--secondary:hover:not(:disabled){background-color:#273c75;color:#fff}.suis-button-outlined--secondary:focus:not(:disabled){box-shadow:0 2px 5px #273c75bf}.suis-button-outlined--tertiary{border-color:#dcdde1;color:#dcdde1}.suis-button-outlined--tertiary:hover:not(:disabled){background-color:#dcdde1;color:#2f3640}.suis-button-outlined--tertiary:focus:not(:disabled){box-shadow:0 2px 5px #dcdde1bf}.suis-button-outlined--complementary{border-color:#f5f6fa;color:#f5f6fa}.suis-button-outlined--complementary:hover:not(:disabled){background-color:#f5f6fa;color:#2f3640}.suis-button-outlined--complementary:focus:not(:disabled){box-shadow:0 2px 5px #f5f6fabf}.suis-button-outlined--success{border-color:#2ed573;color:#2ed573}.suis-button-outlined--success:hover:not(:disabled){background-color:#2ed573;color:#fff}.suis-button-outlined--success:focus:not(:disabled){box-shadow:0 2px 5px #2ed573bf}.suis-button-outlined--warning{border-color:#ffa502;color:#ffa502}.suis-button-outlined--warning:hover:not(:disabled){background-color:#ffa502;color:#fff}.suis-button-outlined--warning:focus:not(:disabled){box-shadow:0 2px 5px #ffa502bf}.suis-button-outlined--danger{border-color:#ff4757;color:#ff4757}.suis-button-outlined--danger:hover:not(:disabled){background-color:#ff4757;color:#fff}.suis-button-outlined--danger:focus:not(:disabled){box-shadow:0 2px 5px #ff4757bf}\n"] }]
         }] });
 class SuisAnchorButtonComponent extends SuisButtonBase {
     ngAfterViewInit() {
@@ -95,13 +151,13 @@ class SuisAnchorButtonComponent extends SuisButtonBase {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SuisAnchorButtonComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: SuisAnchorButtonComponent, isStandalone: true, selector: "a[suisButton]", host: { listeners: { "click": "onClick()" }, properties: { "attr.tabindex": "disabled ? -1 : 0" } }, usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"!loading; else spinner\">\n  <ng-content></ng-content>\n</ng-container>\n<ng-template #spinner>\n  <!-- TODO: <suis-spinner></suis-spinner> -->\n</ng-template>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}.suis-button{width:100%;display:block;padding:.5rem 1rem;border:none;border-radius:.25rem;transition:background-color .25s ease-in-out;font-size:500;text-decoration:none;text-align:center}.suis-button:hover:not(:disabled){cursor:pointer}.suis-button:hover:disabled{cursor:not-allowed}.suis-button:focus{outline:none}.suis-button--primary{background-color:#192a56;color:#fff}.suis-button--primary:hover:not(:disabled){background-color:#192a56d9}.suis-button--primary:focus:not(:disabled){box-shadow:0 2px 5px #192a56bf}.suis-button--secondary{background-color:#273c75;color:#fff}.suis-button--secondary:hover:not(:disabled){background-color:#273c75d9}.suis-button--secondary:focus:not(:disabled){box-shadow:0 2px 5px #273c75bf}.suis-button--tertiary{background-color:#dcdde1;color:#2f3640}.suis-button--tertiary:hover:not(:disabled){background-color:#dcdde1d9}.suis-button--tertiary:focus:not(:disabled){box-shadow:0 2px 5px #dcdde1bf}.suis-button--complementary{background-color:#f5f6fa;color:#2f3640}.suis-button--complementary:hover:not(:disabled){background-color:#f5f6fad9}.suis-button--complementary:focus:not(:disabled){box-shadow:0 2px 5px #f5f6fabf}.suis-button--success{background-color:#2ed573;color:#fff}.suis-button--success:hover:not(:disabled){background-color:#2ed573d9}.suis-button--success:focus:not(:disabled){box-shadow:0 2px 5px #2ed573bf}.suis-button--warning{background-color:#ffa502;color:#fff}.suis-button--warning:hover:not(:disabled){background-color:#ffa502d9}.suis-button--warning:focus:not(:disabled){box-shadow:0 2px 5px #ffa502bf}.suis-button--danger{background-color:#ff4757;color:#fff}.suis-button--danger:hover:not(:disabled){background-color:#ff4757d9}.suis-button--danger:focus:not(:disabled){box-shadow:0 2px 5px #ff4757bf}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: SuisAnchorButtonComponent, isStandalone: true, selector: "a[suisButton]", host: { listeners: { "click": "onClick()" }, properties: { "attr.tabindex": "disabled ? -1 : 0" } }, usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"!loading; else spinner\">\r\n  <ng-content></ng-content>\r\n</ng-container>\r\n<ng-template #spinner>\r\n  <!-- TODO: <suis-spinner></suis-spinner> -->\r\n</ng-template>\r\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.suis-button{width:100%;display:block;padding:.5rem 1rem;border:none;border-radius:.25rem;transition:background-color .25s ease-in-out;font-size:500;text-decoration:none;text-align:center}.suis-button:hover:not(:disabled){cursor:pointer}.suis-button:hover:disabled{cursor:not-allowed}.suis-button:focus{outline:none}.suis-button--primary{background-color:#192a56;color:#fff}.suis-button--primary:hover:not(:disabled){background-color:#192a56d9}.suis-button--primary:focus:not(:disabled){box-shadow:0 2px 5px #192a56bf}.suis-button--secondary{background-color:#273c75;color:#fff}.suis-button--secondary:hover:not(:disabled){background-color:#273c75d9}.suis-button--secondary:focus:not(:disabled){box-shadow:0 2px 5px #273c75bf}.suis-button--tertiary{background-color:#dcdde1;color:#2f3640}.suis-button--tertiary:hover:not(:disabled){background-color:#dcdde1d9}.suis-button--tertiary:focus:not(:disabled){box-shadow:0 2px 5px #dcdde1bf}.suis-button--complementary{background-color:#f5f6fa;color:#2f3640}.suis-button--complementary:hover:not(:disabled){background-color:#f5f6fad9}.suis-button--complementary:focus:not(:disabled){box-shadow:0 2px 5px #f5f6fabf}.suis-button--success{background-color:#2ed573;color:#fff}.suis-button--success:hover:not(:disabled){background-color:#2ed573d9}.suis-button--success:focus:not(:disabled){box-shadow:0 2px 5px #2ed573bf}.suis-button--warning{background-color:#ffa502;color:#fff}.suis-button--warning:hover:not(:disabled){background-color:#ffa502d9}.suis-button--warning:focus:not(:disabled){box-shadow:0 2px 5px #ffa502bf}.suis-button--danger{background-color:#ff4757;color:#fff}.suis-button--danger:hover:not(:disabled){background-color:#ff4757d9}.suis-button--danger:focus:not(:disabled){box-shadow:0 2px 5px #ff4757bf}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SuisAnchorButtonComponent, decorators: [{
             type: Component,
             args: [{ selector: 'a[suisButton]', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
                         '[attr.tabindex]': 'disabled ? -1 : 0',
-                    }, template: "<ng-container *ngIf=\"!loading; else spinner\">\n  <ng-content></ng-content>\n</ng-container>\n<ng-template #spinner>\n  <!-- TODO: <suis-spinner></suis-spinner> -->\n</ng-template>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}.suis-button{width:100%;display:block;padding:.5rem 1rem;border:none;border-radius:.25rem;transition:background-color .25s ease-in-out;font-size:500;text-decoration:none;text-align:center}.suis-button:hover:not(:disabled){cursor:pointer}.suis-button:hover:disabled{cursor:not-allowed}.suis-button:focus{outline:none}.suis-button--primary{background-color:#192a56;color:#fff}.suis-button--primary:hover:not(:disabled){background-color:#192a56d9}.suis-button--primary:focus:not(:disabled){box-shadow:0 2px 5px #192a56bf}.suis-button--secondary{background-color:#273c75;color:#fff}.suis-button--secondary:hover:not(:disabled){background-color:#273c75d9}.suis-button--secondary:focus:not(:disabled){box-shadow:0 2px 5px #273c75bf}.suis-button--tertiary{background-color:#dcdde1;color:#2f3640}.suis-button--tertiary:hover:not(:disabled){background-color:#dcdde1d9}.suis-button--tertiary:focus:not(:disabled){box-shadow:0 2px 5px #dcdde1bf}.suis-button--complementary{background-color:#f5f6fa;color:#2f3640}.suis-button--complementary:hover:not(:disabled){background-color:#f5f6fad9}.suis-button--complementary:focus:not(:disabled){box-shadow:0 2px 5px #f5f6fabf}.suis-button--success{background-color:#2ed573;color:#fff}.suis-button--success:hover:not(:disabled){background-color:#2ed573d9}.suis-button--success:focus:not(:disabled){box-shadow:0 2px 5px #2ed573bf}.suis-button--warning{background-color:#ffa502;color:#fff}.suis-button--warning:hover:not(:disabled){background-color:#ffa502d9}.suis-button--warning:focus:not(:disabled){box-shadow:0 2px 5px #ffa502bf}.suis-button--danger{background-color:#ff4757;color:#fff}.suis-button--danger:hover:not(:disabled){background-color:#ff4757d9}.suis-button--danger:focus:not(:disabled){box-shadow:0 2px 5px #ff4757bf}\n"] }]
+                    }, template: "<ng-container *ngIf=\"!loading; else spinner\">\r\n  <ng-content></ng-content>\r\n</ng-container>\r\n<ng-template #spinner>\r\n  <!-- TODO: <suis-spinner></suis-spinner> -->\r\n</ng-template>\r\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.suis-button{width:100%;display:block;padding:.5rem 1rem;border:none;border-radius:.25rem;transition:background-color .25s ease-in-out;font-size:500;text-decoration:none;text-align:center}.suis-button:hover:not(:disabled){cursor:pointer}.suis-button:hover:disabled{cursor:not-allowed}.suis-button:focus{outline:none}.suis-button--primary{background-color:#192a56;color:#fff}.suis-button--primary:hover:not(:disabled){background-color:#192a56d9}.suis-button--primary:focus:not(:disabled){box-shadow:0 2px 5px #192a56bf}.suis-button--secondary{background-color:#273c75;color:#fff}.suis-button--secondary:hover:not(:disabled){background-color:#273c75d9}.suis-button--secondary:focus:not(:disabled){box-shadow:0 2px 5px #273c75bf}.suis-button--tertiary{background-color:#dcdde1;color:#2f3640}.suis-button--tertiary:hover:not(:disabled){background-color:#dcdde1d9}.suis-button--tertiary:focus:not(:disabled){box-shadow:0 2px 5px #dcdde1bf}.suis-button--complementary{background-color:#f5f6fa;color:#2f3640}.suis-button--complementary:hover:not(:disabled){background-color:#f5f6fad9}.suis-button--complementary:focus:not(:disabled){box-shadow:0 2px 5px #f5f6fabf}.suis-button--success{background-color:#2ed573;color:#fff}.suis-button--success:hover:not(:disabled){background-color:#2ed573d9}.suis-button--success:focus:not(:disabled){box-shadow:0 2px 5px #2ed573bf}.suis-button--warning{background-color:#ffa502;color:#fff}.suis-button--warning:hover:not(:disabled){background-color:#ffa502d9}.suis-button--warning:focus:not(:disabled){box-shadow:0 2px 5px #ffa502bf}.suis-button--danger{background-color:#ff4757;color:#fff}.suis-button--danger:hover:not(:disabled){background-color:#ff4757d9}.suis-button--danger:focus:not(:disabled){box-shadow:0 2px 5px #ff4757bf}\n"] }]
         }], propDecorators: { onClick: [{
                 type: HostListener,
                 args: ['click']
@@ -179,11 +235,11 @@ class SuisIconComponent {
         /** @internal */
         this.SuisIconType = SuisIconType;
         /**
-         * Sets the font size of the HTML Entity itself. Type of SuisIconSize. By default set to 'md'.
+         * Sets the font size of the HTML Entity itself. Type of SuisSize. By default set to 'md'.
          */
         this.size = 'md';
         /**
-         * Sets the color pallette of the icon and surroundings. Type of SuisIconColor. By default set to 'dark'.
+         * Sets the color pallette of the icon and surroundings. Type of SuisColor. By default set to 'dark'.
          */
         this.color = 'dark';
         /**
@@ -204,11 +260,11 @@ class SuisIconComponent {
         this.pointer = false;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SuisIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: SuisIconComponent, isStandalone: true, selector: "suis-icon", inputs: { size: "size", color: "color", type: "type", outlined: "outlined", filled: "filled", pointer: "pointer" }, ngImport: i0, template: "<div\n  class=\"suis-icon\"\n  [class.suis-icon--outlined]=\"outlined\"\n  [class.suis-icon--filled]=\"filled\"\n  [class.suis-icon--pointer]=\"pointer\"\n  [ngClass]=\"'suis-icon' | suisNgClass : color : size\"\n>\n  <span [innerHTML]=\"type | suisIconType\"></span>\n</div>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}.suis-icon{display:flex;justify-content:center;align-items:center;width:1rem;height:1rem;border-radius:100%;line-height:1rem;background-color:transparent;border:none}.suis-icon--outlined{border-width:.0625rem;border-style:solid}.suis-icon--pointer{cursor:pointer}.suis-icon--sm{font-size:.5rem}.suis-icon--md{font-size:.75rem}.suis-icon--lg{font-size:1rem}.suis-icon--primary{color:#192a56;border-color:#192a56}.suis-icon--secondary{color:#273c75;border-color:#273c75}.suis-icon--tertiary{color:#dcdde1;border-color:#dcdde1}.suis-icon--complementary{color:#f5f6fa;border-color:#f5f6fa}.suis-icon--success{color:#2ed573;border-color:#2ed573}.suis-icon--warning{color:#ffa502;border-color:#ffa502}.suis-icon--danger{color:#ff4757;border-color:#ff4757}.suis-icon--white{color:#fff;border-color:#fff}.suis-icon--gray{color:#bcbcbc;border-color:#bcbcbc}.suis-icon--dark{color:#000;border-color:#000}.suis-icon--filled{border:none;background-color:#000;color:#fff}.suis-icon--filled.suis-icon--primary{background-color:#192a56}.suis-icon--filled.suis-icon--secondary{background-color:#273c75}.suis-icon--filled.suis-icon--tertiary{background-color:#dcdde1;color:#2f3640}.suis-icon--filled.suis-icon--complementary{background-color:#f5f6fa;color:#2f3640}.suis-icon--filled.suis-icon--success{background-color:#2ed573}.suis-icon--filled.suis-icon--warning{background-color:#ffa502}.suis-icon--filled.suis-icon--danger{background-color:#ff4757}.suis-icon--filled.suis-icon--white{background-color:#fff;color:#2f3640}.suis-icon--filled.suis-icon--gray{background-color:#bcbcbc}.suis-icon--filled.suis-icon--dark{background-color:#000}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: SuisIconTypePipe, name: "suisIconType" }, { kind: "pipe", type: SuisNgClassPipe, name: "suisNgClass" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: SuisIconComponent, isStandalone: true, selector: "suis-icon", inputs: { size: "size", color: "color", type: "type", outlined: "outlined", filled: "filled", pointer: "pointer" }, ngImport: i0, template: "<div\n  class=\"suis-icon\"\n  [class.suis-icon--outlined]=\"outlined\"\n  [class.suis-icon--filled]=\"filled\"\n  [class.suis-icon--pointer]=\"pointer\"\n  [ngClass]=\"'suis-icon' | suisNgClass : color : size\"\n>\n  <span [innerHTML]=\"type | suisIconType\"></span>\n</div>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.suis-icon{display:flex;justify-content:center;align-items:center;width:1rem;height:1rem;border-radius:100%;line-height:1rem;background-color:transparent;border:none}.suis-icon--outlined{border-width:.0625rem;border-style:solid}.suis-icon--pointer{cursor:pointer}.suis-icon--xs{font-size:.5rem}.suis-icon--sm{font-size:.75rem}.suis-icon--md{font-size:1rem}.suis-icon--lg{font-size:1.5rem;width:1.5rem;height:1.5rem}.suis-icon--xl{font-size:2rem;width:2rem;height:2rem}.suis-icon--primary{color:#192a56;border-color:#192a56}.suis-icon--secondary{color:#273c75;border-color:#273c75}.suis-icon--tertiary{color:#dcdde1;border-color:#dcdde1}.suis-icon--complementary{color:#f5f6fa;border-color:#f5f6fa}.suis-icon--success{color:#2ed573;border-color:#2ed573}.suis-icon--warning{color:#ffa502;border-color:#ffa502}.suis-icon--danger{color:#ff4757;border-color:#ff4757}.suis-icon--white{color:#fff;border-color:#fff}.suis-icon--gray{color:#bcbcbc;border-color:#bcbcbc}.suis-icon--dark{color:#000;border-color:#000}.suis-icon--filled{border:none;background-color:#000;color:#fff}.suis-icon--filled.suis-icon--primary{background-color:#192a56}.suis-icon--filled.suis-icon--secondary{background-color:#273c75}.suis-icon--filled.suis-icon--tertiary{background-color:#dcdde1;color:#2f3640}.suis-icon--filled.suis-icon--complementary{background-color:#f5f6fa;color:#2f3640}.suis-icon--filled.suis-icon--success{background-color:#2ed573}.suis-icon--filled.suis-icon--warning{background-color:#ffa502}.suis-icon--filled.suis-icon--danger{background-color:#ff4757}.suis-icon--filled.suis-icon--white{background-color:#fff;color:#2f3640}.suis-icon--filled.suis-icon--gray{background-color:#bcbcbc}.suis-icon--filled.suis-icon--dark{background-color:#000}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: SuisIconTypePipe, name: "suisIconType" }, { kind: "pipe", type: SuisNgClassPipe, name: "suisNgClass" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SuisIconComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'suis-icon', standalone: true, imports: [CommonModule, SuisIconTypePipe, SuisNgClassPipe], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  class=\"suis-icon\"\n  [class.suis-icon--outlined]=\"outlined\"\n  [class.suis-icon--filled]=\"filled\"\n  [class.suis-icon--pointer]=\"pointer\"\n  [ngClass]=\"'suis-icon' | suisNgClass : color : size\"\n>\n  <span [innerHTML]=\"type | suisIconType\"></span>\n</div>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}.suis-icon{display:flex;justify-content:center;align-items:center;width:1rem;height:1rem;border-radius:100%;line-height:1rem;background-color:transparent;border:none}.suis-icon--outlined{border-width:.0625rem;border-style:solid}.suis-icon--pointer{cursor:pointer}.suis-icon--sm{font-size:.5rem}.suis-icon--md{font-size:.75rem}.suis-icon--lg{font-size:1rem}.suis-icon--primary{color:#192a56;border-color:#192a56}.suis-icon--secondary{color:#273c75;border-color:#273c75}.suis-icon--tertiary{color:#dcdde1;border-color:#dcdde1}.suis-icon--complementary{color:#f5f6fa;border-color:#f5f6fa}.suis-icon--success{color:#2ed573;border-color:#2ed573}.suis-icon--warning{color:#ffa502;border-color:#ffa502}.suis-icon--danger{color:#ff4757;border-color:#ff4757}.suis-icon--white{color:#fff;border-color:#fff}.suis-icon--gray{color:#bcbcbc;border-color:#bcbcbc}.suis-icon--dark{color:#000;border-color:#000}.suis-icon--filled{border:none;background-color:#000;color:#fff}.suis-icon--filled.suis-icon--primary{background-color:#192a56}.suis-icon--filled.suis-icon--secondary{background-color:#273c75}.suis-icon--filled.suis-icon--tertiary{background-color:#dcdde1;color:#2f3640}.suis-icon--filled.suis-icon--complementary{background-color:#f5f6fa;color:#2f3640}.suis-icon--filled.suis-icon--success{background-color:#2ed573}.suis-icon--filled.suis-icon--warning{background-color:#ffa502}.suis-icon--filled.suis-icon--danger{background-color:#ff4757}.suis-icon--filled.suis-icon--white{background-color:#fff;color:#2f3640}.suis-icon--filled.suis-icon--gray{background-color:#bcbcbc}.suis-icon--filled.suis-icon--dark{background-color:#000}\n"] }]
+            args: [{ selector: 'suis-icon', standalone: true, imports: [CommonModule, SuisIconTypePipe, SuisNgClassPipe], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  class=\"suis-icon\"\n  [class.suis-icon--outlined]=\"outlined\"\n  [class.suis-icon--filled]=\"filled\"\n  [class.suis-icon--pointer]=\"pointer\"\n  [ngClass]=\"'suis-icon' | suisNgClass : color : size\"\n>\n  <span [innerHTML]=\"type | suisIconType\"></span>\n</div>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.suis-icon{display:flex;justify-content:center;align-items:center;width:1rem;height:1rem;border-radius:100%;line-height:1rem;background-color:transparent;border:none}.suis-icon--outlined{border-width:.0625rem;border-style:solid}.suis-icon--pointer{cursor:pointer}.suis-icon--xs{font-size:.5rem}.suis-icon--sm{font-size:.75rem}.suis-icon--md{font-size:1rem}.suis-icon--lg{font-size:1.5rem;width:1.5rem;height:1.5rem}.suis-icon--xl{font-size:2rem;width:2rem;height:2rem}.suis-icon--primary{color:#192a56;border-color:#192a56}.suis-icon--secondary{color:#273c75;border-color:#273c75}.suis-icon--tertiary{color:#dcdde1;border-color:#dcdde1}.suis-icon--complementary{color:#f5f6fa;border-color:#f5f6fa}.suis-icon--success{color:#2ed573;border-color:#2ed573}.suis-icon--warning{color:#ffa502;border-color:#ffa502}.suis-icon--danger{color:#ff4757;border-color:#ff4757}.suis-icon--white{color:#fff;border-color:#fff}.suis-icon--gray{color:#bcbcbc;border-color:#bcbcbc}.suis-icon--dark{color:#000;border-color:#000}.suis-icon--filled{border:none;background-color:#000;color:#fff}.suis-icon--filled.suis-icon--primary{background-color:#192a56}.suis-icon--filled.suis-icon--secondary{background-color:#273c75}.suis-icon--filled.suis-icon--tertiary{background-color:#dcdde1;color:#2f3640}.suis-icon--filled.suis-icon--complementary{background-color:#f5f6fa;color:#2f3640}.suis-icon--filled.suis-icon--success{background-color:#2ed573}.suis-icon--filled.suis-icon--warning{background-color:#ffa502}.suis-icon--filled.suis-icon--danger{background-color:#ff4757}.suis-icon--filled.suis-icon--white{background-color:#fff;color:#2f3640}.suis-icon--filled.suis-icon--gray{background-color:#bcbcbc}.suis-icon--filled.suis-icon--dark{background-color:#000}\n"] }]
         }], propDecorators: { size: [{
                 type: Input
             }], color: [{
@@ -228,11 +284,11 @@ class SuisChipComponent {
         /** @internal */
         this.SuisIconType = SuisIconType;
         /**
-         * Sets the color pallette of the chip and. Type of SuisChipColor. By default set to 'primary'.
+         * Sets the color pallette of the chip. Type of SuisColor. By default set to 'primary'.
          */
         this.color = 'primary';
         /**
-         * Sets the color of the cross icon. Visible only if removable set to true. Type of SuisIconColor. By default set to 'white'.
+         * Sets the color of the cross icon. Visible only if removable set to true. Type of SuisColor. By default set to 'white'.
          */
         this.iconColor = 'white';
         /**
@@ -249,11 +305,11 @@ class SuisChipComponent {
         this.remove.emit();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SuisChipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: SuisChipComponent, isStandalone: true, selector: "suis-chip", inputs: { color: "color", iconColor: "iconColor", removable: "removable" }, outputs: { remove: "remove" }, ngImport: i0, template: "<div class=\"suis-chip\" [ngClass]=\"'suis-chip' | suisNgClass : color\">\n  <ng-content></ng-content>\n  <button *ngIf=\"removable\" (click)=\"onRemove()\" class=\"suis-chip__remove\">\n    <suis-icon\n      [color]=\"iconColor\"\n      [type]=\"SuisIconType.CROSS\"\n      [pointer]=\"true\"\n      [size]=\"'lg'\"\n    ></suis-icon>\n  </button>\n</div>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}.suis-chip{display:flex;align-items:center;justify-content:center;width:-moz-fit-content;width:fit-content;border-radius:1rem;font-size:.875rem;padding:.25rem .5rem;color:#fff}.suis-chip__remove{border:none;background-color:transparent}.suis-chip--primary{background-color:#192a56}.suis-chip--secondary{background-color:#273c75}.suis-chip--tertiary{background-color:#dcdde1;color:#2f3640}.suis-chip--complementary{background-color:#f5f6fa;color:#2f3640}.suis-chip--success{background-color:#2ed573}.suis-chip--warning{background-color:#ffa502}.suis-chip--danger{background-color:#ff4757}.suis-chip--gray{background-color:#bcbcbc}.suis-chip--white{background-color:#fff;color:#2f3640}.suis-chip--dark{background-color:#000}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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"] }, { kind: "pipe", type: SuisNgClassPipe, name: "suisNgClass" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: SuisChipComponent, isStandalone: true, selector: "suis-chip", inputs: { color: "color", iconColor: "iconColor", removable: "removable" }, outputs: { remove: "remove" }, ngImport: i0, template: "<div class=\"suis-chip\" [ngClass]=\"'suis-chip' | suisNgClass : color\">\n  <ng-content></ng-content>\n  <button\n    *ngIf=\"removable\"\n    class=\"suis-chip__remove\"\n    type=\"button\"\n    (click)=\"onRemove()\"\n  >\n    <suis-icon\n      [color]=\"iconColor\"\n      [type]=\"SuisIconType.CROSS\"\n      [pointer]=\"true\"\n      [size]=\"'md'\"\n    ></suis-icon>\n  </button>\n</div>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.suis-chip{display:flex;align-items:center;justify-content:center;width:-moz-fit-content;width:fit-content;border-radius:1rem;font-size:.875rem;padding:.25rem .5rem;color:#fff}.suis-chip__remove{border:none;background-color:transparent}.suis-chip--primary{background-color:#192a56}.suis-chip--secondary{background-color:#273c75}.suis-chip--tertiary{background-color:#dcdde1;color:#2f3640}.suis-chip--complementary{background-color:#f5f6fa;color:#2f3640}.suis-chip--success{background-color:#2ed573}.suis-chip--warning{background-color:#ffa502}.suis-chip--danger{background-color:#ff4757}.suis-chip--gray{background-color:#bcbcbc}.suis-chip--white{background-color:#fff;color:#2f3640}.suis-chip--dark{background-color:#000}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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"] }, { kind: "pipe", type: SuisNgClassPipe, name: "suisNgClass" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SuisChipComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'suis-chip', standalone: true, imports: [CommonModule, SuisIconComponent, SuisNgClassPipe], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"suis-chip\" [ngClass]=\"'suis-chip' | suisNgClass : color\">\n  <ng-content></ng-content>\n  <button *ngIf=\"removable\" (click)=\"onRemove()\" class=\"suis-chip__remove\">\n    <suis-icon\n      [color]=\"iconColor\"\n      [type]=\"SuisIconType.CROSS\"\n      [pointer]=\"true\"\n      [size]=\"'lg'\"\n    ></suis-icon>\n  </button>\n</div>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}.suis-chip{display:flex;align-items:center;justify-content:center;width:-moz-fit-content;width:fit-content;border-radius:1rem;font-size:.875rem;padding:.25rem .5rem;color:#fff}.suis-chip__remove{border:none;background-color:transparent}.suis-chip--primary{background-color:#192a56}.suis-chip--secondary{background-color:#273c75}.suis-chip--tertiary{background-color:#dcdde1;color:#2f3640}.suis-chip--complementary{background-color:#f5f6fa;color:#2f3640}.suis-chip--success{background-color:#2ed573}.suis-chip--warning{background-color:#ffa502}.suis-chip--danger{background-color:#ff4757}.suis-chip--gray{background-color:#bcbcbc}.suis-chip--white{background-color:#fff;color:#2f3640}.suis-chip--dark{background-color:#000}\n"] }]
+            args: [{ selector: 'suis-chip', standalone: true, imports: [CommonModule, SuisIconComponent, SuisNgClassPipe], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"suis-chip\" [ngClass]=\"'suis-chip' | suisNgClass : color\">\n  <ng-content></ng-content>\n  <button\n    *ngIf=\"removable\"\n    class=\"suis-chip__remove\"\n    type=\"button\"\n    (click)=\"onRemove()\"\n  >\n    <suis-icon\n      [color]=\"iconColor\"\n      [type]=\"SuisIconType.CROSS\"\n      [pointer]=\"true\"\n      [size]=\"'md'\"\n    ></suis-icon>\n  </button>\n</div>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.suis-chip{display:flex;align-items:center;justify-content:center;width:-moz-fit-content;width:fit-content;border-radius:1rem;font-size:.875rem;padding:.25rem .5rem;color:#fff}.suis-chip__remove{border:none;background-color:transparent}.suis-chip--primary{background-color:#192a56}.suis-chip--secondary{background-color:#273c75}.suis-chip--tertiary{background-color:#dcdde1;color:#2f3640}.suis-chip--complementary{background-color:#f5f6fa;color:#2f3640}.suis-chip--success{background-color:#2ed573}.suis-chip--warning{background-color:#ffa502}.suis-chip--danger{background-color:#ff4757}.suis-chip--gray{background-color:#bcbcbc}.suis-chip--white{background-color:#fff;color:#2f3640}.suis-chip--dark{background-color:#000}\n"] }]
         }], propDecorators: { color: [{
                 type: Input
             }], iconColor: [{
@@ -272,20 +328,20 @@ class SuisFormFieldComponent {
         this.spacing = false;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SuisFormFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: SuisFormFieldComponent, isStandalone: true, selector: "suis-form-field", inputs: { errorTemplate: "errorTemplate", spacing: "spacing" }, ngImport: i0, template: "<div class=\"suis-form-field\" [class.suis-form-field--spacing]=\"spacing\">\n  <ng-content></ng-content>\n  <div *ngIf=\"errorTemplate\" class=\"suis-form-field__error\">\n    <ng-container [ngTemplateOutlet]=\"errorTemplate\"></ng-container>\n  </div>\n</div>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}.suis-form-field{width:100%}.suis-form-field__error{color:#ff4757;margin-top:.25rem;font-size:.75rem}.suis-form-field--spacing{margin-bottom:.75rem}\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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: SuisFormFieldComponent, isStandalone: true, selector: "suis-form-field", inputs: { errorTemplate: "errorTemplate", spacing: "spacing" }, ngImport: i0, template: "<div class=\"suis-form-field\" [class.suis-form-field--spacing]=\"spacing\">\n  <ng-content></ng-content>\n  <div *ngIf=\"errorTemplate\" class=\"suis-form-field__error\">\n    <ng-container [ngTemplateOutlet]=\"errorTemplate\"></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)}}.suis-form-field{width:100%}.suis-form-field__error{color:#ff4757;margin-top:.25rem;font-size:.75rem}.suis-form-field--spacing{margin-bottom:.75rem}\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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SuisFormFieldComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'suis-form-field', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"suis-form-field\" [class.suis-form-field--spacing]=\"spacing\">\n  <ng-content></ng-content>\n  <div *ngIf=\"errorTemplate\" class=\"suis-form-field__error\">\n    <ng-container [ngTemplateOutlet]=\"errorTemplate\"></ng-container>\n  </div>\n</div>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}.suis-form-field{width:100%}.suis-form-field__error{color:#ff4757;margin-top:.25rem;font-size:.75rem}.suis-form-field--spacing{margin-bottom:.75rem}\n"] }]
+            args: [{ selector: 'suis-form-field', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"suis-form-field\" [class.suis-form-field--spacing]=\"spacing\">\n  <ng-content></ng-content>\n  <div *ngIf=\"errorTemplate\" class=\"suis-form-field__error\">\n    <ng-container [ngTemplateOutlet]=\"errorTemplate\"></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)}}.suis-form-field{width:100%}.suis-form-field__error{color:#ff4757;margin-top:.25rem;font-size:.75rem}.suis-form-field--spacing{margin-bottom:.75rem}\n"] }]
         }], propDecorators: { errorTemplate: [{
                 type: Input
             }], spacing: [{
                 type: Input
             }] } });
 
-class SuisInputTextComponent {
+class SuisInputTextComponent extends SuisInputBase {
     constructor() {
-        this.cdRef = inject(ChangeDetectorRef);
+        super(...arguments);
         /**
          * Sets input's type to one of the accepted values - 'text' or 'password'. By default set to 'text'.
          */
@@ -295,29 +351,11 @@ class SuisInputTextComponent {
          */
         this.placeholder = '';
         /**
-         * Sets input disabled state. By default set to false.
-         */
-        this.readonly = false;
-        /**
-         * Adds invalid styling to the input. By default set to false.
+         * Emits on keydown enter input event.
          */
-        this.invalid = false;
+        this.enterPressed = new EventEmitter();
         /** @internal */
         this.value = '';
-        // eslint-disable-next-line @typescript-eslint/no-empty-function, @typescript-eslint/no-unused-vars
-        this._onChange = (value) => { };
-        // eslint-disable-next-line @typescript-eslint/no-empty-function
-        this._onTouched = () => { };
-    }
-    onChange(event) {
-        const target = event.target;
-        this.value = target.value;
-        this._onChange(this.value);
-        this.cdRef.markForCheck();
-    }
-    onTouch() {
-        this._onTouched();
-        this.cdRef.markForCheck();
     }
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     writeValue(obj) {
@@ -325,22 +363,24 @@ class SuisInputTextComponent {
         this._onChange(this.value);
         this.cdRef.markForCheck();
     }
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    registerOnChange(fn) {
-        this._onChange = fn;
+    onChange(event) {
+        const target = event.target;
+        this.value = target.value;
+        this._onChange(this.value);
+        this.changed.emit(this.value);
+        this.cdRef.markForCheck();
     }
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    registerOnTouched(fn) {
-        this._onTouched = fn;
+    onEnter() {
+        this.enterPressed.emit();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SuisInputTextComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: SuisInputTextComponent, isStandalone: true, selector: "suis-input-text", inputs: { type: "type", placeholder: "placeholder", readonly: "readonly", invalid: "invalid" }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SuisInputTextComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: SuisInputTextComponent, isStandalone: true, selector: "suis-input-text", inputs: { type: "type", placeholder: "placeholder" }, outputs: { enterPressed: "enterPressed" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 multi: true,
                 useExisting: forwardRef(() => SuisInputTextComponent),
             },
-        ], ngImport: i0, template: "<input\n  class=\"suis-input\"\n  [class.suis-input--invalid]=\"invalid\"\n  [type]=\"type\"\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}.suis-input{background-color:#fff;box-shadow:0 2px 5px #00000080;border-radius:.25rem;padding:.5rem 1rem;border:0;width:100%}.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  [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)}}.suis-input{background-color:#fff;box-shadow:0 2px 5px #00000080;border-radius:.25rem;padding:.5rem 1rem;border:0;width:100%}.suis-input:focus{box-shadow:0 2px 5px #192a56bf;outline:none}.suis-input--invalid{box-shadow:0 2px 5px #ff4757bf}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SuisInputTextComponent, decorators: [{
             type: Component,
@@ -350,15 +390,95 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImpor
                             multi: true,
                             useExisting: forwardRef(() => SuisInputTextComponent),
                         },
-                    ], template: "<input\n  class=\"suis-input\"\n  [class.suis-input--invalid]=\"invalid\"\n  [type]=\"type\"\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}.suis-input{background-color:#fff;box-shadow:0 2px 5px #00000080;border-radius:.25rem;padding:.5rem 1rem;border:0;width:100%}.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  [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)}}.suis-input{background-color:#fff;box-shadow:0 2px 5px #00000080;border-radius:.25rem;padding:.5rem 1rem;border:0;width:100%}.suis-input:focus{box-shadow:0 2px 5px #192a56bf;outline:none}.suis-input--invalid{box-shadow:0 2px 5px #ff4757bf}\n"] }]
         }], propDecorators: { type: [{
                 type: Input
             }], placeholder: [{
                 type: Input
-            }], readonly: [{
+            }], enterPressed: [{
+                type: Output
+            }] } });
+
+class SuisInputChipsComponent extends SuisInputBase {
+    constructor() {
+        super(...arguments);
+        /**
+         * Placeholder text displayed in input. By default set to empty string.
+         */
+        this.placeholder = '';
+        /**
+         * Sets the color pallette of the chips. Type of SuisColor. By default set to 'primary'.
+         */
+        this.chipColor = 'primary';
+        /**
+         * Sets the color of the chips' cross icon. Type of SuisColor. By default set to 'white'.
+         */
+        this.chipIconColor = 'white';
+        /** @internal */
+        this.value = [];
+        /** @internal */
+        this.inputControl = new FormControl('', { nonNullable: true });
+    }
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    writeValue(obj) {
+        this.value = obj || [];
+        this._onChange(this.value);
+        this.cdRef.markForCheck();
+    }
+    addItem(value) {
+        const values = value.split(',').filter((v) => !!v);
+        this.value = this.value.concat(values);
+        this._onChange(this.value);
+        this.changed.emit(this.value);
+        this.cdRef.markForCheck();
+    }
+    removeItem(value) {
+        this.value = this.value.filter((v) => v !== value);
+    }
+    submitValue() {
+        const inputValue = this.inputControl.value;
+        this.inputControl.reset();
+        this.addItem(inputValue);
+    }
+    onDocumentClick(event) {
+        if (!this.inputEl?.nativeElement.contains(event.target))
+            this.submitValue();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SuisInputChipsComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: SuisInputChipsComponent, isStandalone: true, selector: "suis-input-chips", inputs: { placeholder: "placeholder", chipColor: "chipColor", chipIconColor: "chipIconColor" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                multi: true,
+                useExisting: forwardRef(() => SuisInputChipsComponent),
+            },
+        ], viewQueries: [{ propertyName: "inputEl", first: true, predicate: ["input"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"suis-input-chips\">\n  <div #input class=\"suis-input-chips__input\">\n    <suis-input-text\n      [formControl]=\"inputControl\"\n      [readonly]=\"readonly\"\n      [invalid]=\"invalid\"\n      [placeholder]=\"placeholder\"\n      (touched)=\"onTouch()\"\n      (enterPressed)=\"submitValue()\"\n    ></suis-input-text>\n  </div>\n  <div *ngIf=\"value.length\" class=\"suis-input-chips__chips\">\n    <suis-chip\n      [removable]=\"readonly ? false : true\"\n      [color]=\"chipColor\"\n      [iconColor]=\"chipIconColor\"\n      (remove)=\"removeItem(item)\"\n      *ngFor=\"let item of value\"\n    >\n      {{ item }}\n    </suis-chip>\n  </div>\n</div>\n", styles: [".suis-input-chips__chips{margin-top:.375rem;display:flex;flex-wrap:wrap}.suis-input-chips__chips suis-chip:not(:last-child){margin-right:.25rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: SuisChipComponent, selector: "suis-chip", inputs: ["color", "iconColor", "removable"], outputs: ["remove"] }, { kind: "component", type: SuisInputTextComponent, selector: "suis-input-text", inputs: ["type", "placeholder"], outputs: ["enterPressed"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SuisInputChipsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'suis-input-chips', standalone: true, imports: [
+                        CommonModule,
+                        ReactiveFormsModule,
+                        SuisChipComponent,
+                        SuisInputTextComponent,
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            multi: true,
+                            useExisting: forwardRef(() => SuisInputChipsComponent),
+                        },
+                    ], template: "<div class=\"suis-input-chips\">\n  <div #input class=\"suis-input-chips__input\">\n    <suis-input-text\n      [formControl]=\"inputControl\"\n      [readonly]=\"readonly\"\n      [invalid]=\"invalid\"\n      [placeholder]=\"placeholder\"\n      (touched)=\"onTouch()\"\n      (enterPressed)=\"submitValue()\"\n    ></suis-input-text>\n  </div>\n  <div *ngIf=\"value.length\" class=\"suis-input-chips__chips\">\n    <suis-chip\n      [removable]=\"readonly ? false : true\"\n      [color]=\"chipColor\"\n      [iconColor]=\"chipIconColor\"\n      (remove)=\"removeItem(item)\"\n      *ngFor=\"let item of value\"\n    >\n      {{ item }}\n    </suis-chip>\n  </div>\n</div>\n", styles: [".suis-input-chips__chips{margin-top:.375rem;display:flex;flex-wrap:wrap}.suis-input-chips__chips suis-chip:not(:last-child){margin-right:.25rem}\n"] }]
+        }], propDecorators: { inputEl: [{
+                type: ViewChild,
+                args: ['input']
+            }], placeholder: [{
+                type: Input
+            }], chipColor: [{
                 type: Input
-            }], invalid: [{
+            }], chipIconColor: [{
                 type: Input
+            }], onDocumentClick: [{
+                type: HostListener,
+                args: ['document:click', ['$event']]
             }] } });
 
 class SuisLabelComponent {
@@ -373,20 +493,78 @@ class SuisLabelComponent {
         this.spacing = false;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SuisLabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: SuisLabelComponent, isStandalone: true, selector: "suis-label", inputs: { required: "required", spacing: "spacing" }, ngImport: i0, template: "<label class=\"suis-label\" [class.suis-label--spacing]=\"spacing\">\n  <ng-content></ng-content>\n  <span *ngIf=\"required\" class=\"suis-label__asterisk\">*</span>\n  <ng-content select=\"[suisLabelAside]\"></ng-content>\n</label>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}.suis-label{font-size:.875rem;display:flex}.suis-label--spacing{margin-bottom:.25rem}.suis-label__asterisk{color:#ff4757;margin-left:.0625rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: SuisLabelComponent, isStandalone: true, selector: "suis-label", inputs: { required: "required", spacing: "spacing" }, ngImport: i0, template: "<label class=\"suis-label\" [class.suis-label--spacing]=\"spacing\">\n  <ng-content></ng-content>\n  <span *ngIf=\"required\" class=\"suis-label__asterisk\">*</span>\n  <ng-content select=\"[suisLabelAside]\"></ng-content>\n</label>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.suis-label{font-size:.875rem;display:flex}.suis-label--spacing{margin-bottom:.25rem}.suis-label__asterisk{color:#ff4757;margin-left:.0625rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SuisLabelComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'suis-label', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<label class=\"suis-label\" [class.suis-label--spacing]=\"spacing\">\n  <ng-content></ng-content>\n  <span *ngIf=\"required\" class=\"suis-label__asterisk\">*</span>\n  <ng-content select=\"[suisLabelAside]\"></ng-content>\n</label>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}.suis-label{font-size:.875rem;display:flex}.suis-label--spacing{margin-bottom:.25rem}.suis-label__asterisk{color:#ff4757;margin-left:.0625rem}\n"] }]
+            args: [{ selector: 'suis-label', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<label class=\"suis-label\" [class.suis-label--spacing]=\"spacing\">\n  <ng-content></ng-content>\n  <span *ngIf=\"required\" class=\"suis-label__asterisk\">*</span>\n  <ng-content select=\"[suisLabelAside]\"></ng-content>\n</label>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.suis-label{font-size:.875rem;display:flex}.suis-label--spacing{margin-bottom:.25rem}.suis-label__asterisk{color:#ff4757;margin-left:.0625rem}\n"] }]
         }], propDecorators: { required: [{
                 type: Input
             }], spacing: [{
                 type: Input
             }] } });
 
+class SuisSpinnerComponent {
+    constructor() {
+        /**
+         * Sets the size of the spinner. Type of SuisSize. By default set to 'sm'.
+         */
+        this.size = 'sm';
+        /**
+         * Sets the color of the spinner. Type of SuisColor. By default set to 'primary'.
+         */
+        this.color = 'primary';
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SuisSpinnerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: SuisSpinnerComponent, isStandalone: true, selector: "suis-spinner", inputs: { size: "size", color: "color" }, ngImport: i0, template: "<div\n  class=\"suis-spinner\"\n  [ngClass]=\"'suis-spinner' | suisNgClass : size : color\"\n></div>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.suis-spinner{animation:spin .5s infinite linear;border-style:solid;border-radius:50%;border-left-color:transparent!important}.suis-spinner--primary{border-color:#192a56}.suis-spinner--secondary{border-color:#273c75}.suis-spinner--tertiary{border-color:#dcdde1}.suis-spinner--complementary{border-color:#f5f6fa}.suis-spinner--success{border-color:#2ed573}.suis-spinner--warning{border-color:#ffa502}.suis-spinner--danger{border-color:#ff4757}.suis-spinner--dark{border-color:#000}.suis-spinner--gray{border-color:#bcbcbc}.suis-spinner--white{border-color:#fff}.suis-spinner--xs{width:1rem;height:1rem;border-width:.1875rem}.suis-spinner--sm{width:1.5rem;height:1.5rem;border-width:.25rem}.suis-spinner--md{width:2rem;height:2rem;border-width:.375rem}.suis-spinner--lg{width:3rem;height:3rem;border-width:.5rem}.suis-spinner--xl{width:4rem;height:4rem;border-width:.625rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: SuisNgClassPipe, name: "suisNgClass" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SuisSpinnerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'suis-spinner', standalone: true, imports: [CommonModule, SuisNgClassPipe], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  class=\"suis-spinner\"\n  [ngClass]=\"'suis-spinner' | suisNgClass : size : color\"\n></div>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.suis-spinner{animation:spin .5s infinite linear;border-style:solid;border-radius:50%;border-left-color:transparent!important}.suis-spinner--primary{border-color:#192a56}.suis-spinner--secondary{border-color:#273c75}.suis-spinner--tertiary{border-color:#dcdde1}.suis-spinner--complementary{border-color:#f5f6fa}.suis-spinner--success{border-color:#2ed573}.suis-spinner--warning{border-color:#ffa502}.suis-spinner--danger{border-color:#ff4757}.suis-spinner--dark{border-color:#000}.suis-spinner--gray{border-color:#bcbcbc}.suis-spinner--white{border-color:#fff}.suis-spinner--xs{width:1rem;height:1rem;border-width:.1875rem}.suis-spinner--sm{width:1.5rem;height:1.5rem;border-width:.25rem}.suis-spinner--md{width:2rem;height:2rem;border-width:.375rem}.suis-spinner--lg{width:3rem;height:3rem;border-width:.5rem}.suis-spinner--xl{width:4rem;height:4rem;border-width:.625rem}\n"] }]
+        }], propDecorators: { size: [{
+                type: Input
+            }], color: [{
+                type: Input
+            }] } });
+
+class SuisSpinnerContainerComponent {
+    constructor() {
+        /**
+         * Sets the size of the spinner. Type of SuisSize. By default set to 'sm'.
+         */
+        this.size = 'sm';
+        /**
+         * Sets the color of the spinner. Type of SuisColor. By default set to 'primary'.
+         */
+        this.color = 'primary';
+        /**
+         * Adds blur effect to the container background. By default set to false.
+         */
+        this.blur = false;
+        /**
+         * Position absolute to the parent element (must have relative position). By default set to false.
+         */
+        this.absolute = false;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SuisSpinnerContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: SuisSpinnerContainerComponent, isStandalone: true, selector: "suis-spinner-container", inputs: { size: "size", color: "color", blur: "blur", absolute: "absolute" }, ngImport: i0, template: "<div\n  class=\"suis-spinner-container\"\n  [class.suis-spinner-container--blur]=\"blur\"\n  [class.suis-spinner-container--absolute]=\"absolute\"\n>\n  <suis-spinner [size]=\"size\" [color]=\"color\"></suis-spinner>\n</div>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.suis-spinner-container{width:100%;height:100%;display:flex;justify-content:center;align-items:center}.suis-spinner-container--blur{background-color:#ffffff20;-webkit-backdrop-filter:blur(.25rem);backdrop-filter:blur(.25rem)}.suis-spinner-container--absolute{position:absolute;inset:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: SuisSpinnerComponent, selector: "suis-spinner", inputs: ["size", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SuisSpinnerContainerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'suis-spinner-container', standalone: true, imports: [CommonModule, SuisSpinnerComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  class=\"suis-spinner-container\"\n  [class.suis-spinner-container--blur]=\"blur\"\n  [class.suis-spinner-container--absolute]=\"absolute\"\n>\n  <suis-spinner [size]=\"size\" [color]=\"color\"></suis-spinner>\n</div>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.suis-spinner-container{width:100%;height:100%;display:flex;justify-content:center;align-items:center}.suis-spinner-container--blur{background-color:#ffffff20;-webkit-backdrop-filter:blur(.25rem);backdrop-filter:blur(.25rem)}.suis-spinner-container--absolute{position:absolute;inset:0}\n"] }]
+        }], propDecorators: { size: [{
+                type: Input
+            }], color: [{
+                type: Input
+            }], blur: [{
+                type: Input
+            }], absolute: [{
+                type: Input
+            }] } });
+
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { SuisAnchorButtonComponent, SuisBoxComponent, SuisButtonComponent, SuisButtonOutlinedComponent, SuisChipComponent, SuisFormFieldComponent, SuisIconComponent, SuisIconType, SuisInputTextComponent, SuisLabelComponent, SuisNgClassPipe };
+export { SuisAnchorButtonComponent, SuisBoxComponent, SuisButtonComponent, SuisButtonOutlinedComponent, SuisChipComponent, SuisFormFieldComponent, SuisIconComponent, SuisIconType, SuisInputChipsComponent, SuisInputTextComponent, SuisLabelComponent, SuisNgClassPipe, SuisSpinnerComponent, SuisSpinnerContainerComponent };
 //# sourceMappingURL=suis.mjs.map