suis 0.11.0 → 0.13.0

package/fesm2022/suis.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Pipe, Component, ChangeDetectionStrategy, Input, EventEmitter, Output, inject, ElementRef, Renderer2, Directive, ChangeDetectorRef, ViewEncapsulation, HostListener, forwardRef, ViewChild, TemplateRef, ContentChild } from '@angular/core';
+import { Pipe, Component, ChangeDetectionStrategy, Input, EventEmitter, Output, inject, ElementRef, Renderer2, Directive, ChangeDetectorRef, TemplateRef, ContentChild, HostListener, ViewEncapsulation, forwardRef, ViewChild } from '@angular/core';
 import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i2 from '@angular/forms';
@@ -155,11 +155,11 @@ class SuisAlertComponent {
         this.hiddenChange.emit(true);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SuisAlertComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: SuisAlertComponent, isStandalone: true, selector: "suis-alert", inputs: { hidden: "hidden", color: "color" }, outputs: { hiddenChange: "hiddenChange" }, ngImport: i0, template: "<div\n  *ngIf=\"!hidden\"\n  class=\"suis-alert\"\n  [ngClass]=\"'suis-alert' | suisNgClass : color\"\n>\n  <ng-content></ng-content>\n  <button class=\"suis-alert__cancel\" type=\"button\" (click)=\"onCancel()\">\n    <suis-icon\n      [type]=\"SuisIconType.CROSS\"\n      [color]=\"'white'\"\n      [size]=\"'lg'\"\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-alert{display:flex;align-items:center;justify-content:space-between;width:100%;padding:.75rem 1.25rem;border-radius:.25rem;color:#fff;font-weight:500}.suis-alert__cancel{background-color:transparent;border:none;cursor:pointer}.suis-alert--success{background-color:#2ed573}.suis-alert--warning{background-color:#ffa502}.suis-alert--danger{background-color:#ff4757}\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: "pipe", type: SuisNgClassPipe, name: "suisNgClass" }, { kind: "component", type: SuisIconComponent, selector: "suis-icon", inputs: ["size", "color", "type", "outlined", "filled", "pointer", "bold"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: SuisAlertComponent, isStandalone: true, selector: "suis-alert", inputs: { hidden: "hidden", color: "color" }, outputs: { hiddenChange: "hiddenChange" }, ngImport: i0, template: "<div\n  *ngIf=\"!hidden\"\n  class=\"suis-alert\"\n  [ngClass]=\"'suis-alert' | suisNgClass : color\"\n>\n  <ng-content></ng-content>\n  <button class=\"suis-alert__cancel\" type=\"button\" (click)=\"onCancel()\">\n    <suis-icon\n      [type]=\"SuisIconType.CROSS\"\n      [color]=\"'white'\"\n      [size]=\"'lg'\"\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-alert{display:flex;align-items:center;justify-content:space-between;width:100%;padding:.75rem 1.25rem;border-radius:.25rem;color:#fff;font-weight:500}.suis-alert--success{background-color:#2ed573}.suis-alert--warning{background-color:#ffa502}.suis-alert--danger{background-color:#ff4757}.suis-alert__cancel{background-color:transparent;border:none;cursor:pointer}\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: "pipe", type: SuisNgClassPipe, name: "suisNgClass" }, { 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: SuisAlertComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'suis-alert', standalone: true, imports: [CommonModule, SuisNgClassPipe, SuisIconComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  *ngIf=\"!hidden\"\n  class=\"suis-alert\"\n  [ngClass]=\"'suis-alert' | suisNgClass : color\"\n>\n  <ng-content></ng-content>\n  <button class=\"suis-alert__cancel\" type=\"button\" (click)=\"onCancel()\">\n    <suis-icon\n      [type]=\"SuisIconType.CROSS\"\n      [color]=\"'white'\"\n      [size]=\"'lg'\"\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-alert{display:flex;align-items:center;justify-content:space-between;width:100%;padding:.75rem 1.25rem;border-radius:.25rem;color:#fff;font-weight:500}.suis-alert__cancel{background-color:transparent;border:none;cursor:pointer}.suis-alert--success{background-color:#2ed573}.suis-alert--warning{background-color:#ffa502}.suis-alert--danger{background-color:#ff4757}\n"] }]
+            args: [{ selector: 'suis-alert', standalone: true, imports: [CommonModule, SuisNgClassPipe, SuisIconComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  *ngIf=\"!hidden\"\n  class=\"suis-alert\"\n  [ngClass]=\"'suis-alert' | suisNgClass : color\"\n>\n  <ng-content></ng-content>\n  <button class=\"suis-alert__cancel\" type=\"button\" (click)=\"onCancel()\">\n    <suis-icon\n      [type]=\"SuisIconType.CROSS\"\n      [color]=\"'white'\"\n      [size]=\"'lg'\"\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-alert{display:flex;align-items:center;justify-content:space-between;width:100%;padding:.75rem 1.25rem;border-radius:.25rem;color:#fff;font-weight:500}.suis-alert--success{background-color:#2ed573}.suis-alert--warning{background-color:#ffa502}.suis-alert--danger{background-color:#ff4757}.suis-alert__cancel{background-color:transparent;border:none;cursor:pointer}\n"] }]
         }], propDecorators: { hidden: [{
                 type: Input
             }], hiddenChange: [{
@@ -274,6 +274,98 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImpor
                 type: Output
             }] } });
 
+class SuisSelectOptionDirective {
+    constructor() {
+        /**
+         * Custom template of the option.
+         */
+        this.templateRef = inject((TemplateRef));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SuisSelectOptionDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.0.0", type: SuisSelectOptionDirective, isStandalone: true, selector: "[suisSelectOption]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SuisSelectOptionDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[suisSelectOption]',
+                    standalone: true,
+                }]
+        }] });
+
+class SuisSelectBase extends SuisInputBase {
+    constructor() {
+        super(...arguments);
+        /** @internal */
+        this.SuisIconType = SuisIconType;
+        /** @internal */
+        this.searchPhrase = '';
+        /** @internal */
+        this.expanded = false;
+        /**
+         * Options displayed in dropdown list. Type of SuisSelectOption[].
+         */
+        this.options = [];
+        /**
+         * Displays search input above options. By default set to true.
+         */
+        this.search = true;
+        /**
+         * Placeholder text displayed in options search. By default set to 'Search...'.
+         */
+        this.searchPlaceholder = 'Search...';
+        /**
+         * Placeholder text displayed when value is not selected. By default set to 'Select option...'.
+         */
+        this.placeholder = 'Select option...';
+        /**
+         * Emits on search phrase changed.
+         */
+        this.searchPhraseChanged = new EventEmitter();
+    }
+    onClear(event) {
+        this.clearValue();
+        event.stopPropagation();
+    }
+    onSearchPhraseChange(text) {
+        this.searchPhrase = text;
+        this.searchPhraseChanged.emit(text);
+    }
+    onExpand() {
+        this.toggle(!this.expanded);
+        this.onTouch();
+    }
+    toggle(value) {
+        this.expanded = value;
+        this.searchPhrase = '';
+    }
+    onDocumentClick(event) {
+        if (!this.elRef.nativeElement.contains(event.target)) {
+            this.expanded = false;
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SuisSelectBase, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.0.0", type: SuisSelectBase, inputs: { options: "options", search: "search", searchPlaceholder: "searchPlaceholder", placeholder: "placeholder" }, outputs: { searchPhraseChanged: "searchPhraseChanged" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, queries: [{ propertyName: "suisSelectOption", first: true, predicate: SuisSelectOptionDirective, descendants: true }], usesInheritance: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SuisSelectBase, decorators: [{
+            type: Directive
+        }], propDecorators: { suisSelectOption: [{
+                type: ContentChild,
+                args: [SuisSelectOptionDirective]
+            }], options: [{
+                type: Input
+            }], search: [{
+                type: Input
+            }], searchPlaceholder: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], searchPhraseChanged: [{
+                type: Output
+            }], onDocumentClick: [{
+                type: HostListener,
+                args: ['document:click', ['$event']]
+            }] } });
+
 class SuisButtonComponent extends SuisButtonBase {
     ngAfterViewInit() {
         this.renderer2.addClass(this.elementRef.nativeElement, 'suis-button');
@@ -354,11 +446,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\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", "bold"] }, { 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--primary{background-color:#192a56}.suis-chip--secondary{background-color:#273c75}.suis-chip--tertiary{background-color:#dcdde1}.suis-chip--complementary{background-color:#f5f6fa}.suis-chip--success{background-color:#2ed573}.suis-chip--warning{background-color:#ffa502}.suis-chip--danger{background-color:#ff4757}.suis-chip--white{background-color:#fff}.suis-chip--gray{background-color:#bcbcbc}.suis-chip--dark{background-color:#000}.suis-chip__remove{border:none;background-color:transparent}.suis-chip--tertiary,.suis-chip--complementary,.suis-chip--white{color:#2f3640}\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", "bold"] }, { 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\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"] }]
+            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--primary{background-color:#192a56}.suis-chip--secondary{background-color:#273c75}.suis-chip--tertiary{background-color:#dcdde1}.suis-chip--complementary{background-color:#f5f6fa}.suis-chip--success{background-color:#2ed573}.suis-chip--warning{background-color:#ffa502}.suis-chip--danger{background-color:#ff4757}.suis-chip--white{background-color:#fff}.suis-chip--gray{background-color:#bcbcbc}.suis-chip--dark{background-color:#000}.suis-chip__remove{border:none;background-color:transparent}.suis-chip--tertiary,.suis-chip--complementary,.suis-chip--white{color:#2f3640}\n"] }]
         }], propDecorators: { color: [{
                 type: Input
             }], iconColor: [{
@@ -429,7 +521,7 @@ class SuisInputTextComponent extends SuisInputBase {
                 multi: true,
                 useExisting: forwardRef(() => SuisInputTextComponent),
             },
-        ], 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%;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-text\"\n  [class.suis-input-text--invalid]=\"invalid\"\n  [type]=\"type\"\n  [value]=\"value\"\n  [placeholder]=\"placeholder\"\n  [disabled]=\"readonly\"\n  (input)=\"onChange($event)\"\n  (focus)=\"onTouch()\"\n  (keydown.enter)=\"onEnter()\"\n/>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.suis-input-text{width:100%;background-color:#fff;box-shadow:0 2px 5px #00000080;border-radius:.25rem;padding:.5rem 1rem;border:0;min-height:2rem}.suis-input-text:focus{box-shadow:0 2px 5px #192a56bf;outline:none}.suis-input-text--invalid{box-shadow:0 2px 5px #ff4757bf}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SuisInputTextComponent, decorators: [{
             type: Component,
@@ -439,7 +531,7 @@ 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  (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%;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-text\"\n  [class.suis-input-text--invalid]=\"invalid\"\n  [type]=\"type\"\n  [value]=\"value\"\n  [placeholder]=\"placeholder\"\n  [disabled]=\"readonly\"\n  (input)=\"onChange($event)\"\n  (focus)=\"onTouch()\"\n  (keydown.enter)=\"onEnter()\"\n/>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.suis-input-text{width:100%;background-color:#fff;box-shadow:0 2px 5px #00000080;border-radius:.25rem;padding:.5rem 1rem;border:0;min-height:2rem}.suis-input-text:focus{box-shadow:0 2px 5px #192a56bf;outline:none}.suis-input-text--invalid{box-shadow:0 2px 5px #ff4757bf}\n"] }]
         }], propDecorators: { type: [{
                 type: Input
             }], placeholder: [{
@@ -530,6 +622,51 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImpor
                 args: ['document:click', ['$event']]
             }] } });
 
+class SuisInputNumberComponent extends SuisInputBase {
+    constructor() {
+        super(...arguments);
+        /**
+         * Placeholder text displayed in input. By default set to empty string.
+         */
+        this.placeholder = '';
+        /** @internal */
+        this.value = null;
+    }
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    writeValue(obj) {
+        this.value = obj;
+        this._onChange(this.value);
+        this.cdRef.markForCheck();
+    }
+    onChange(event) {
+        const target = event.target;
+        this.value = target.value ? Number(target.value) : null;
+        this._onChange(this.value);
+        this.changed.emit(this.value);
+        this.cdRef.markForCheck();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SuisInputNumberComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: SuisInputNumberComponent, isStandalone: true, selector: "suis-input-number", inputs: { placeholder: "placeholder" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                multi: true,
+                useExisting: forwardRef(() => SuisInputNumberComponent),
+            },
+        ], usesInheritance: true, ngImport: i0, template: "<input\n  class=\"suis-input-number\"\n  [class.suis-input-number--invalid]=\"invalid\"\n  type=\"number\"\n  [value]=\"value\"\n  [placeholder]=\"placeholder\"\n  [disabled]=\"readonly\"\n  (input)=\"onChange($event)\"\n  (focus)=\"onTouch()\"\n/>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.suis-input-number{width:100%;background-color:#fff;box-shadow:0 2px 5px #00000080;border-radius:.25rem;padding:.5rem 1rem;border:0;min-height:2rem;-moz-appearance:textfield}.suis-input-number:focus{box-shadow:0 2px 5px #192a56bf;outline:none}.suis-input-number--invalid{box-shadow:0 2px 5px #ff4757bf}.suis-input-number::-webkit-outer-spin-button,.suis-input-number::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SuisInputNumberComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'suis-input-number', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            multi: true,
+                            useExisting: forwardRef(() => SuisInputNumberComponent),
+                        },
+                    ], template: "<input\n  class=\"suis-input-number\"\n  [class.suis-input-number--invalid]=\"invalid\"\n  type=\"number\"\n  [value]=\"value\"\n  [placeholder]=\"placeholder\"\n  [disabled]=\"readonly\"\n  (input)=\"onChange($event)\"\n  (focus)=\"onTouch()\"\n/>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.suis-input-number{width:100%;background-color:#fff;box-shadow:0 2px 5px #00000080;border-radius:.25rem;padding:.5rem 1rem;border:0;min-height:2rem;-moz-appearance:textfield}.suis-input-number:focus{box-shadow:0 2px 5px #192a56bf;outline:none}.suis-input-number--invalid{box-shadow:0 2px 5px #ff4757bf}.suis-input-number::-webkit-outer-spin-button,.suis-input-number::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}\n"] }]
+        }], propDecorators: { placeholder: [{
+                type: Input
+            }] } });
+
 class SuisLabelComponent {
     constructor() {
         /**
@@ -553,6 +690,66 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImpor
                 type: Input
             }] } });
 
+class SuisProgressBarPipe {
+    transform(value) {
+        return `${(value / 100) * 100}%`;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SuisProgressBarPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "16.0.0", ngImport: i0, type: SuisProgressBarPipe, isStandalone: true, name: "suisProgressBar" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SuisProgressBarPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    standalone: true,
+                    name: 'suisProgressBar',
+                }]
+        }] });
+
+class SuisProgressBarComponent {
+    constructor() {
+        /** @internal */
+        this._value = 0;
+        /**
+         * Sets the color of the progress bar. Type of SuisColor. By default set to 'primary'.
+         */
+        this.color = 'primary';
+        /**
+         * Sets the background color of the progress bar. Type of SuisColor. By default set to 'tertiary'.
+         */
+        this.backgroundColor = 'tertiary';
+    }
+    /** @internal */
+    get value() {
+        return this._value;
+    }
+    /**
+     * Width of the progress bar in percentage (value >= 0 && value <= 100). By default set to 0.
+     */
+    set value(value) {
+        if (value >= 0 && value <= 100) {
+            this._value = value;
+        }
+        else if (value > 100) {
+            this._value = 100;
+        }
+        else {
+            this._value = 0;
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SuisProgressBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: SuisProgressBarComponent, isStandalone: true, selector: "suis-progress-bar", inputs: { value: "value", color: "color", backgroundColor: "backgroundColor" }, ngImport: i0, template: "<div\n  class=\"suis-progress-bar\"\n  [ngClass]=\"'suis-progress-bar' | suisNgClass : backgroundColor\"\n>\n  <div\n    class=\"suis-progress-bar__progress\"\n    [style]=\"{ width: value | suisProgressBar }\"\n    [ngClass]=\"'suis-progress-bar__progress' | suisNgClass : color\"\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-progress-bar{width:100%;border-radius:1rem;height:1rem}.suis-progress-bar--primary{background-color:#192a56}.suis-progress-bar--secondary{background-color:#273c75}.suis-progress-bar--tertiary{background-color:#dcdde1}.suis-progress-bar--complementary{background-color:#f5f6fa}.suis-progress-bar--success{background-color:#2ed573}.suis-progress-bar--warning{background-color:#ffa502}.suis-progress-bar--danger{background-color:#ff4757}.suis-progress-bar--white{background-color:#fff}.suis-progress-bar--gray{background-color:#bcbcbc}.suis-progress-bar--dark{background-color:#000}.suis-progress-bar__progress{border-radius:1rem;height:1rem}.suis-progress-bar__progress--primary{background-color:#192a56}.suis-progress-bar__progress--secondary{background-color:#273c75}.suis-progress-bar__progress--tertiary{background-color:#dcdde1}.suis-progress-bar__progress--complementary{background-color:#f5f6fa}.suis-progress-bar__progress--success{background-color:#2ed573}.suis-progress-bar__progress--warning{background-color:#ffa502}.suis-progress-bar__progress--danger{background-color:#ff4757}.suis-progress-bar__progress--white{background-color:#fff}.suis-progress-bar__progress--gray{background-color:#bcbcbc}.suis-progress-bar__progress--dark{background-color:#000}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: SuisNgClassPipe, name: "suisNgClass" }, { kind: "pipe", type: SuisProgressBarPipe, name: "suisProgressBar" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SuisProgressBarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'suis-progress-bar', standalone: true, imports: [CommonModule, SuisNgClassPipe, SuisProgressBarPipe], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  class=\"suis-progress-bar\"\n  [ngClass]=\"'suis-progress-bar' | suisNgClass : backgroundColor\"\n>\n  <div\n    class=\"suis-progress-bar__progress\"\n    [style]=\"{ width: value | suisProgressBar }\"\n    [ngClass]=\"'suis-progress-bar__progress' | suisNgClass : color\"\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-progress-bar{width:100%;border-radius:1rem;height:1rem}.suis-progress-bar--primary{background-color:#192a56}.suis-progress-bar--secondary{background-color:#273c75}.suis-progress-bar--tertiary{background-color:#dcdde1}.suis-progress-bar--complementary{background-color:#f5f6fa}.suis-progress-bar--success{background-color:#2ed573}.suis-progress-bar--warning{background-color:#ffa502}.suis-progress-bar--danger{background-color:#ff4757}.suis-progress-bar--white{background-color:#fff}.suis-progress-bar--gray{background-color:#bcbcbc}.suis-progress-bar--dark{background-color:#000}.suis-progress-bar__progress{border-radius:1rem;height:1rem}.suis-progress-bar__progress--primary{background-color:#192a56}.suis-progress-bar__progress--secondary{background-color:#273c75}.suis-progress-bar__progress--tertiary{background-color:#dcdde1}.suis-progress-bar__progress--complementary{background-color:#f5f6fa}.suis-progress-bar__progress--success{background-color:#2ed573}.suis-progress-bar__progress--warning{background-color:#ffa502}.suis-progress-bar__progress--danger{background-color:#ff4757}.suis-progress-bar__progress--white{background-color:#fff}.suis-progress-bar__progress--gray{background-color:#bcbcbc}.suis-progress-bar__progress--dark{background-color:#000}\n"] }]
+        }], propDecorators: { value: [{
+                type: Input
+            }], color: [{
+                type: Input
+            }], backgroundColor: [{
+                type: Input
+            }] } });
+
 class SuisSelectLabelPipe {
     transform(value, options, placeholder) {
         if (!value)
@@ -588,32 +785,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImpor
                 }]
         }] });
 
-class SuisSelectOptionDirective {
-    constructor() {
-        /**
-         * Custom template of the option.
-         */
-        this.templateRef = inject((TemplateRef));
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SuisSelectOptionDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.0.0", type: SuisSelectOptionDirective, isStandalone: true, selector: "[suisSelectOption]", ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SuisSelectOptionDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[suisSelectOption]',
-                    standalone: true,
-                }]
-        }] });
-
 class SuisSelectOptionComponent {
     constructor() {
         /** @internal */
         this.SuisIconType = SuisIconType;
         /**
-         * Adds checkmark icon to checkbox.
+         * Adds checkmark icon to checkbox (if checkbox input set to true). By default set to false.
          */
         this.selected = false;
+        /**
+         * Display checkbox next to option label. By default set to true.
+         */
+        this.checkbox = true;
         /**
          * Emits on option selected.
          */
@@ -624,11 +807,11 @@ class SuisSelectOptionComponent {
         this.clicked.emit();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SuisSelectOptionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: SuisSelectOptionComponent, isStandalone: true, selector: "suis-select-option", inputs: { option: "option", templateRef: "templateRef", selected: "selected" }, outputs: { clicked: "clicked" }, ngImport: i0, template: "<button\n  class=\"suis-select-option\"\n  type=\"button\"\n  tabindex=\"-1\"\n  (click)=\"onClick()\"\n>\n  <span\n    class=\"suis-select-option__checkbox\"\n    [class.suis-select-option__checkbox--selected]=\"selected\"\n  >\n    <suis-icon\n      *ngIf=\"selected\"\n      [bold]=\"true\"\n      color=\"primary\"\n      [type]=\"SuisIconType.CHECK\"\n      size=\"sm\"\n    ></suis-icon>\n  </span>\n  <span class=\"suis-select-option__label\">\n    <ng-container *ngIf=\"templateRef; else label\">\n      <ng-container\n        *ngTemplateOutlet=\"templateRef; context: { $implicit: option }\"\n      ></ng-container>\n    </ng-container>\n    <ng-template #label>\n      {{ option?.label }}\n    </ng-template>\n  </span>\n</button>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.suis-select-option{width:100%;display:flex;align-items:center;background-color:transparent;border:none;border-bottom:1px solid #dcdde1;padding:.375rem 1rem;cursor:pointer}.suis-select-option:hover{background-color:#f5f6fa}.suis-select-option__checkbox{width:1rem;height:1rem;border:.0625rem solid #dcdde1;margin-right:.75rem;display:flex;justify-content:center;align-items:center}.suis-select-option__checkbox--selected{border:.0625rem solid #bcbcbc}.suis-select-option__label{display:flex;justify-content:left;align-items:center}\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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: SuisSelectOptionComponent, isStandalone: true, selector: "suis-select-option", inputs: { option: "option", templateRef: "templateRef", selected: "selected", checkbox: "checkbox" }, outputs: { clicked: "clicked" }, ngImport: i0, template: "<button\n  class=\"suis-select-option\"\n  type=\"button\"\n  tabindex=\"-1\"\n  (click)=\"onClick()\"\n>\n  <span\n    class=\"suis-select-option__checkbox\"\n    [class.suis-select-option__checkbox--selected]=\"selected\"\n    *ngIf=\"checkbox\"\n  >\n    <suis-icon\n      *ngIf=\"selected\"\n      [bold]=\"true\"\n      color=\"primary\"\n      [type]=\"SuisIconType.CHECK\"\n      size=\"sm\"\n    ></suis-icon>\n  </span>\n  <span class=\"suis-select-option__label\">\n    <ng-container *ngIf=\"templateRef; else label\">\n      <ng-container\n        *ngTemplateOutlet=\"templateRef; context: { $implicit: option }\"\n      ></ng-container>\n    </ng-container>\n    <ng-template #label>\n      {{ option?.label }}\n    </ng-template>\n  </span>\n</button>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.suis-select-option{width:100%;display:flex;align-items:center;background-color:transparent;border:none;border-bottom:1px solid #dcdde1;padding:.375rem 1rem;cursor:pointer}.suis-select-option:hover{background-color:#f5f6fa}.suis-select-option__checkbox{min-width:1rem;min-height:1rem;border:.0625rem solid #dcdde1;margin-right:.75rem;display:flex;justify-content:center;align-items:center}.suis-select-option__checkbox--selected{border:.0625rem solid #bcbcbc}.suis-select-option__label{display:flex;justify-content:left;align-items:center;text-align:left}\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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SuisSelectOptionComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'suis-select-option', standalone: true, imports: [CommonModule, SuisIconComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n  class=\"suis-select-option\"\n  type=\"button\"\n  tabindex=\"-1\"\n  (click)=\"onClick()\"\n>\n  <span\n    class=\"suis-select-option__checkbox\"\n    [class.suis-select-option__checkbox--selected]=\"selected\"\n  >\n    <suis-icon\n      *ngIf=\"selected\"\n      [bold]=\"true\"\n      color=\"primary\"\n      [type]=\"SuisIconType.CHECK\"\n      size=\"sm\"\n    ></suis-icon>\n  </span>\n  <span class=\"suis-select-option__label\">\n    <ng-container *ngIf=\"templateRef; else label\">\n      <ng-container\n        *ngTemplateOutlet=\"templateRef; context: { $implicit: option }\"\n      ></ng-container>\n    </ng-container>\n    <ng-template #label>\n      {{ option?.label }}\n    </ng-template>\n  </span>\n</button>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.suis-select-option{width:100%;display:flex;align-items:center;background-color:transparent;border:none;border-bottom:1px solid #dcdde1;padding:.375rem 1rem;cursor:pointer}.suis-select-option:hover{background-color:#f5f6fa}.suis-select-option__checkbox{width:1rem;height:1rem;border:.0625rem solid #dcdde1;margin-right:.75rem;display:flex;justify-content:center;align-items:center}.suis-select-option__checkbox--selected{border:.0625rem solid #bcbcbc}.suis-select-option__label{display:flex;justify-content:left;align-items:center}\n"] }]
+            args: [{ selector: 'suis-select-option', standalone: true, imports: [CommonModule, SuisIconComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n  class=\"suis-select-option\"\n  type=\"button\"\n  tabindex=\"-1\"\n  (click)=\"onClick()\"\n>\n  <span\n    class=\"suis-select-option__checkbox\"\n    [class.suis-select-option__checkbox--selected]=\"selected\"\n    *ngIf=\"checkbox\"\n  >\n    <suis-icon\n      *ngIf=\"selected\"\n      [bold]=\"true\"\n      color=\"primary\"\n      [type]=\"SuisIconType.CHECK\"\n      size=\"sm\"\n    ></suis-icon>\n  </span>\n  <span class=\"suis-select-option__label\">\n    <ng-container *ngIf=\"templateRef; else label\">\n      <ng-container\n        *ngTemplateOutlet=\"templateRef; context: { $implicit: option }\"\n      ></ng-container>\n    </ng-container>\n    <ng-template #label>\n      {{ option?.label }}\n    </ng-template>\n  </span>\n</button>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.suis-select-option{width:100%;display:flex;align-items:center;background-color:transparent;border:none;border-bottom:1px solid #dcdde1;padding:.375rem 1rem;cursor:pointer}.suis-select-option:hover{background-color:#f5f6fa}.suis-select-option__checkbox{min-width:1rem;min-height:1rem;border:.0625rem solid #dcdde1;margin-right:.75rem;display:flex;justify-content:center;align-items:center}.suis-select-option__checkbox--selected{border:.0625rem solid #bcbcbc}.suis-select-option__label{display:flex;justify-content:left;align-items:center;text-align:left}\n"] }]
         }], propDecorators: { option: [{
                 type: Input,
                 args: [{ required: true }]
@@ -636,6 +819,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImpor
                 type: Input
             }], selected: [{
                 type: Input
+            }], checkbox: [{
+                type: Input
             }], clicked: [{
                 type: Output
             }] } });
@@ -672,33 +857,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImpor
                 }]
         }] });
 
-class SuisSelectComponent extends SuisInputBase {
+class SuisSelectComponent extends SuisSelectBase {
     constructor() {
         super(...arguments);
         /** @internal */
-        this.SuisIconType = SuisIconType;
-        /** @internal */
         this.value = null;
-        /** @internal */
-        this.searchPhrase = '';
-        /** @internal */
-        this.expanded = false;
-        /**
-         * Options displayed in dropdown list. Type of SuisSelectOption[].
-         */
-        this.options = [];
-        /**
-         * Displays search input above options. By default set to true.
-         */
-        this.search = true;
-        /**
-         * Placeholder text displayed in options search. By default set to 'Search...'.
-         */
-        this.searchPlaceholder = 'Search...';
-        /**
-         * Placeholder text displayed when value is not selected. By default set to 'Select option...'.
-         */
-        this.placeholder = 'Select option...';
     }
     writeValue(obj) {
         this.value = obj;
@@ -710,10 +873,6 @@ class SuisSelectComponent extends SuisInputBase {
             return this.clearValue();
         this.setValue(value);
     }
-    onExpand() {
-        this.toggle(!this.expanded);
-        this.onTouch();
-    }
     clearValue() {
         this.setValue(null);
     }
@@ -724,27 +883,14 @@ class SuisSelectComponent extends SuisInputBase {
         this.changed.emit();
         this.cdRef.markForCheck();
     }
-    onClear(event) {
-        this.clearValue();
-        event.stopPropagation();
-    }
-    toggle(value) {
-        this.expanded = value;
-        this.searchPhrase = '';
-    }
-    onDocumentClick(event) {
-        if (!this.elRef.nativeElement.contains(event.target)) {
-            this.expanded = false;
-        }
-    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SuisSelectComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: SuisSelectComponent, isStandalone: true, selector: "suis-select", inputs: { options: "options", search: "search", searchPlaceholder: "searchPlaceholder", placeholder: "placeholder" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, providers: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: SuisSelectComponent, isStandalone: true, selector: "suis-select", providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 multi: true,
                 useExisting: forwardRef(() => SuisSelectComponent),
             },
-        ], queries: [{ propertyName: "suisSelectOption", first: true, predicate: SuisSelectOptionDirective, descendants: true }], 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    <suis-icon\n      *ngIf=\"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  </button>\n  <div *ngIf=\"expanded\" class=\"suis-select__list\">\n    <input\n      *ngIf=\"search\"\n      [(ngModel)]=\"searchPhrase\"\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      \"\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)}}.suis-select{position:relative}.suis-select__button{position:relative;width:100%;background-color:#fff;box-shadow:0 2px 5px #00000080;border-radius:.25rem;padding:.5rem 2.75rem .5rem 1rem;border:0;cursor:pointer;height:2rem}.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;display:block}.suis-select__button__chevron{position:absolute;right:.5rem;top:.375rem}.suis-select__button__cross{position:absolute;right:1.75rem;top:.375rem}.suis-select__list{position:absolute;z-index:10;background-color:#fff;box-shadow:0 2px 5px #00000080;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.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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.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"], 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=\"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      \"\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)}}.suis-select{position:relative}.suis-select__button{width:100%;background-color:#fff;box-shadow:0 2px 5px #00000080;border-radius:.25rem;padding:.5rem 1rem;border:0;min-height:2rem;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 #00000080;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.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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.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,
@@ -763,22 +909,8 @@ 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    <suis-icon\n      *ngIf=\"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  </button>\n  <div *ngIf=\"expanded\" class=\"suis-select__list\">\n    <input\n      *ngIf=\"search\"\n      [(ngModel)]=\"searchPhrase\"\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      \"\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)}}.suis-select{position:relative}.suis-select__button{position:relative;width:100%;background-color:#fff;box-shadow:0 2px 5px #00000080;border-radius:.25rem;padding:.5rem 2.75rem .5rem 1rem;border:0;cursor:pointer;height:2rem}.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;display:block}.suis-select__button__chevron{position:absolute;right:.5rem;top:.375rem}.suis-select__button__cross{position:absolute;right:1.75rem;top:.375rem}.suis-select__list{position:absolute;z-index:10;background-color:#fff;box-shadow:0 2px 5px #00000080;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: { suisSelectOption: [{
-                type: ContentChild,
-                args: [SuisSelectOptionDirective]
-            }], options: [{
-                type: Input
-            }], search: [{
-                type: Input
-            }], searchPlaceholder: [{
-                type: Input
-            }], placeholder: [{
-                type: Input
-            }], onDocumentClick: [{
-                type: HostListener,
-                args: ['document:click', ['$event']]
-            }] } });
+                    ], 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=\"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      \"\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)}}.suis-select{position:relative}.suis-select__button{width:100%;background-color:#fff;box-shadow:0 2px 5px #00000080;border-radius:.25rem;padding:.5rem 1rem;border:0;min-height:2rem;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 #00000080;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"] }]
+        }] });
 
 class SuisSpinnerComponent {
     constructor() {
@@ -842,5 +974,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { SuisAlertComponent, SuisAnchorButtonComponent, SuisBoxComponent, SuisButtonComponent, SuisButtonOutlinedComponent, SuisChipComponent, SuisFormFieldComponent, SuisIconComponent, SuisIconType, SuisInputChipsComponent, SuisInputTextComponent, SuisLabelComponent, SuisNgClassPipe, SuisSelectComponent, SuisSelectOptionComponent, SuisSelectOptionDirective, SuisSpinnerComponent, SuisSpinnerContainerComponent };
+export { SuisAlertComponent, SuisAnchorButtonComponent, SuisBoxComponent, SuisButtonComponent, SuisButtonOutlinedComponent, SuisChipComponent, SuisFormFieldComponent, SuisIconComponent, SuisIconType, SuisInputChipsComponent, SuisInputNumberComponent, SuisInputTextComponent, SuisLabelComponent, SuisNgClassPipe, SuisProgressBarComponent, SuisSelectComponent, SuisSelectOptionComponent, SuisSelectOptionDirective, SuisSpinnerComponent, SuisSpinnerContainerComponent };
 //# sourceMappingURL=suis.mjs.map