suis 0.10.0 → 0.12.0

package/fesm2022/suis.mjs

@@ -1,9 +1,9 @@
 import * as i0 from '@angular/core';
-import { Pipe, Component, ChangeDetectionStrategy, Input, EventEmitter, Output, inject, ElementRef, Renderer2, Directive, ChangeDetectorRef, ViewEncapsulation, HostListener, forwardRef, ViewChild } 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';
-import { NG_VALUE_ACCESSOR, FormControl, ReactiveFormsModule } from '@angular/forms';
+import { NG_VALUE_ACCESSOR, FormControl, ReactiveFormsModule, FormsModule } from '@angular/forms';
 
 class SuisNgClassPipe {
     transform(prefix, ...args) {
@@ -34,6 +34,8 @@ var SuisIconType;
     SuisIconType["ARROW_LEFT"] = "arrow-left";
     SuisIconType["ARROW_RIGHT"] = "arrow-right";
     SuisIconType["ARROW_DOWN"] = "arrow-down";
+    SuisIconType["CHEVRON_UP"] = "chevron-up";
+    SuisIconType["CHEVRON_DOWN"] = "chevron-down";
 })(SuisIconType || (SuisIconType = {}));
 
 class SuisIconTypePipe {
@@ -59,6 +61,10 @@ class SuisIconTypePipe {
                 return '→';
             case SuisIconType.ARROW_DOWN:
                 return '↓';
+            case SuisIconType.CHEVRON_UP:
+                return '‹';
+            case SuisIconType.CHEVRON_DOWN:
+                return '›';
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SuisIconTypePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
@@ -97,16 +103,20 @@ class SuisIconComponent {
          */
         this.filled = false;
         /**
-         * Shows the pointer cursor when hovered. By defauly set to false.
+         * Shows the pointer cursor when hovered. By default set to false.
          */
         this.pointer = false;
+        /**
+         * Sets HTML Entity font weight to bold. By default set to false.
+         */
+        this.bold = 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}@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 }); }
+    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", bold: "bold" }, 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  [class.suis-icon--bold]=\"bold\"\n  [class.suis-icon--rotate]=\"\n    type === SuisIconType.CHEVRON_UP || type === SuisIconType.CHEVRON_DOWN\n  \"\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--rotate{transform:rotate(90deg)}.suis-icon--outlined{border-width:.0625rem;border-style:solid}.suis-icon--bold{font-weight:700}.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.25rem;width:1.25rem;height:1.25rem}.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}@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"] }]
+            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  [class.suis-icon--bold]=\"bold\"\n  [class.suis-icon--rotate]=\"\n    type === SuisIconType.CHEVRON_UP || type === SuisIconType.CHEVRON_DOWN\n  \"\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--rotate{transform:rotate(90deg)}.suis-icon--outlined{border-width:.0625rem;border-style:solid}.suis-icon--bold{font-weight:700}.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.25rem;width:1.25rem;height:1.25rem}.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: [{
@@ -119,6 +129,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImpor
                 type: Input
             }], pointer: [{
                 type: Input
+            }], bold: [{
+                type: Input
             }] } });
 
 class SuisAlertComponent {
@@ -143,7 +155,7 @@ 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"] }], 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__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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SuisAlertComponent, decorators: [{
             type: Component,
@@ -209,6 +221,8 @@ class SuisInputBase {
     constructor() {
         /** @internal */
         this.cdRef = inject(ChangeDetectorRef);
+        /** @internal */
+        this.elRef = inject(ElementRef);
         /**
          * Sets input disabled state. By default set to false.
          */
@@ -260,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');
@@ -340,7 +446,7 @@ 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"] }, { 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", "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,
@@ -415,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%}.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,
@@ -425,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%}.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: [{
@@ -516,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() {
         /**
@@ -539,6 +690,168 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImpor
                 type: Input
             }] } });
 
+class SuisSelectLabelPipe {
+    transform(value, options, placeholder) {
+        if (!value)
+            return placeholder;
+        const selectedOption = options.find((option) => JSON.stringify(option.value) === JSON.stringify(value));
+        if (!selectedOption)
+            throw Error('[SuisSelectLabelPipe] Provided value does not belong to valid values');
+        return selectedOption.label;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SuisSelectLabelPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "16.0.0", ngImport: i0, type: SuisSelectLabelPipe, isStandalone: true, name: "suisSelectLabel" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SuisSelectLabelPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    standalone: true,
+                    name: 'suisSelectLabel',
+                }]
+        }] });
+
+class SuisSelectIsSelectedPipe {
+    transform(optionValue, value) {
+        return JSON.stringify(optionValue) === JSON.stringify(value);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SuisSelectIsSelectedPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "16.0.0", ngImport: i0, type: SuisSelectIsSelectedPipe, isStandalone: true, name: "suisSelectIsSelected" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SuisSelectIsSelectedPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    standalone: true,
+                    name: 'suisSelectIsSelected',
+                }]
+        }] });
+
+class SuisSelectOptionComponent {
+    constructor() {
+        /** @internal */
+        this.SuisIconType = SuisIconType;
+        /**
+         * 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.
+         */
+        this.clicked = new EventEmitter();
+    }
+    /** @internal */
+    onClick() {
+        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", 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{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 }); }
+}
+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    *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{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"] }]
+        }], propDecorators: { option: [{
+                type: Input,
+                args: [{ required: true }]
+            }], templateRef: [{
+                type: Input
+            }], selected: [{
+                type: Input
+            }], checkbox: [{
+                type: Input
+            }], clicked: [{
+                type: Output
+            }] } });
+
+class SuisSelectSortOptionsPipe {
+    transform(options) {
+        return options.sort((a, b) => a.label.localeCompare(b.label));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SuisSelectSortOptionsPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "16.0.0", ngImport: i0, type: SuisSelectSortOptionsPipe, isStandalone: true, name: "suisSelectSortOptions" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SuisSelectSortOptionsPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    standalone: true,
+                    name: 'suisSelectSortOptions',
+                }]
+        }] });
+
+class SuisSelectFilterOptionsPipe {
+    transform(options, phrase) {
+        if (!phrase)
+            return options;
+        return options.filter((option) => option.label.toLocaleLowerCase().includes(phrase.toLocaleLowerCase()));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SuisSelectFilterOptionsPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "16.0.0", ngImport: i0, type: SuisSelectFilterOptionsPipe, isStandalone: true, name: "suisSelectFilterOptions" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SuisSelectFilterOptionsPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    standalone: true,
+                    name: 'suisSelectFilterOptions',
+                }]
+        }] });
+
+class SuisSelectComponent extends SuisSelectBase {
+    constructor() {
+        super(...arguments);
+        /** @internal */
+        this.value = null;
+    }
+    writeValue(obj) {
+        this.value = obj;
+        this._onChange(this.value);
+        this.cdRef.markForCheck();
+    }
+    onSelect(value) {
+        if (JSON.stringify(this.value) === JSON.stringify(value))
+            return this.clearValue();
+        this.setValue(value);
+    }
+    clearValue() {
+        this.setValue(null);
+    }
+    setValue(value) {
+        this.value = value;
+        this.toggle(false);
+        this._onChange(this.value);
+        this.changed.emit();
+        this.cdRef.markForCheck();
+    }
+    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", providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                multi: true,
+                useExisting: forwardRef(() => SuisSelectComponent),
+            },
+        ], usesInheritance: true, ngImport: i0, template: "<div class=\"suis-select\">\n  <button\n    type=\"button\"\n    (click)=\"onExpand()\"\n    class=\"suis-select__button\"\n    [class.suis-select__button--invalid]=\"invalid\"\n    [disabled]=\"readonly\"\n  >\n    <span class=\"suis-select__button__value\">\n      {{ value | suisSelectLabel : options : placeholder }}\n    </span>\n    <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      (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{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", "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,
+            args: [{ selector: 'suis-select', standalone: true, imports: [
+                        CommonModule,
+                        FormsModule,
+                        SuisIconComponent,
+                        SuisSelectOptionComponent,
+                        SuisSelectLabelPipe,
+                        SuisSelectIsSelectedPipe,
+                        SuisSelectSortOptionsPipe,
+                        SuisSelectFilterOptionsPipe,
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            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      (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{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"] }]
+        }] });
+
 class SuisSpinnerComponent {
     constructor() {
         /**
@@ -601,5 +914,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, SuisSpinnerComponent, SuisSpinnerContainerComponent };
+export { SuisAlertComponent, SuisAnchorButtonComponent, SuisBoxComponent, SuisButtonComponent, SuisButtonOutlinedComponent, SuisChipComponent, SuisFormFieldComponent, SuisIconComponent, SuisIconType, SuisInputChipsComponent, SuisInputNumberComponent, SuisInputTextComponent, SuisLabelComponent, SuisNgClassPipe, SuisSelectComponent, SuisSelectOptionComponent, SuisSelectOptionDirective, SuisSpinnerComponent, SuisSpinnerContainerComponent };
 //# sourceMappingURL=suis.mjs.map