suis 0.11.0 → 0.12.0

package/esm2022/lib/shared/classes/suis-input.base.mjs

@@ -0,0 +1,60 @@
+import { ChangeDetectorRef, Directive, ElementRef, EventEmitter, Input, Output, inject, } from '@angular/core';
+import * as i0 from "@angular/core";
+class SuisInputBase {
+    constructor() {
+        /** @internal */
+        this.cdRef = inject(ChangeDetectorRef);
+        /** @internal */
+        this.elRef = inject(ElementRef);
+        /**
+         * Sets input disabled state. By default set to false.
+         */
+        this.readonly = false;
+        /**
+         * Adds invalid styling to the input. By default set to false.
+         */
+        this.invalid = false;
+        /**
+         * Emits on value changed.
+         */
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        this.changed = new EventEmitter();
+        /**
+         * Emits on input touched.
+         */
+        this.touched = new EventEmitter();
+        // eslint-disable-next-line @typescript-eslint/no-empty-function, @typescript-eslint/no-unused-vars, @typescript-eslint/no-explicit-any
+        this._onChange = (value) => { };
+        // eslint-disable-next-line @typescript-eslint/no-empty-function
+        this._onTouched = () => { };
+    }
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    registerOnChange(fn) {
+        this._onChange = fn;
+    }
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    registerOnTouched(fn) {
+        this._onTouched = fn;
+    }
+    /** @internal */
+    onTouch() {
+        this._onTouched();
+        this.touched.emit();
+        this.cdRef.markForCheck();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SuisInputBase, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.0.0", type: SuisInputBase, inputs: { readonly: "readonly", invalid: "invalid" }, outputs: { changed: "changed", touched: "touched" }, ngImport: i0 }); }
+}
+export { SuisInputBase };
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SuisInputBase, decorators: [{
+            type: Directive
+        }], propDecorators: { readonly: [{
+                type: Input
+            }], invalid: [{
+                type: Input
+            }], changed: [{
+                type: Output
+            }], touched: [{
+                type: Output
+            }] } });
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic3Vpcy1pbnB1dC5iYXNlLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vLi4vbGlicy9zdWlzL3NyYy9saWIvc2hhcmVkL2NsYXNzZXMvc3Vpcy1pbnB1dC5iYXNlLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFDTCxpQkFBaUIsRUFDakIsU0FBUyxFQUNULFVBQVUsRUFDVixZQUFZLEVBQ1osS0FBSyxFQUNMLE1BQU0sRUFDTixNQUFNLEdBQ1AsTUFBTSxlQUFlLENBQUM7O0FBR3ZCLE1BQ3NCLGFBQWE7SUFEbkM7UUFFRSxnQkFBZ0I7UUFDRyxVQUFLLEdBQUcsTUFBTSxDQUFDLGlCQUFpQixDQUFDLENBQUM7UUFFckQsZ0JBQWdCO1FBQ0csVUFBSyxHQUFHLE1BQU0sQ0FBQyxVQUFVLENBQUMsQ0FBQztRQUU5Qzs7V0FFRztRQUNNLGFBQVEsR0FBWSxLQUFLLENBQUM7UUFFbkM7O1dBRUc7UUFDTSxZQUFPLEdBQVksS0FBSyxDQUFDO1FBRWxDOztXQUVHO1FBQ0gsOERBQThEO1FBQ3BELFlBQU8sR0FBRyxJQUFJLFlBQVksRUFBTyxDQUFDO1FBRTVDOztXQUVHO1FBQ08sWUFBTyxHQUFHLElBQUksWUFBWSxFQUFRLENBQUM7UUFFN0MsdUlBQXVJO1FBQ3ZJLGNBQVMsR0FBRyxDQUFDLEtBQVUsRUFBRSxFQUFFLEdBQUUsQ0FBQyxDQUFDO1FBRS9CLGdFQUFnRTtRQUNoRSxlQUFVLEdBQUcsR0FBRyxFQUFFLEdBQUUsQ0FBQyxDQUFDO0tBcUJ2QjtJQW5CQyw4REFBOEQ7SUFDOUQsZ0JBQWdCLENBQUMsRUFBTztRQUN0QixJQUFJLENBQUMsU0FBUyxHQUFHLEVBQUUsQ0FBQztJQUN0QixDQUFDO0lBRUQsOERBQThEO0lBQzlELGlCQUFpQixDQUFDLEVBQU87UUFDdkIsSUFBSSxDQUFDLFVBQVUsR0FBRyxFQUFFLENBQUM7SUFDdkIsQ0FBQztJQUtELGdCQUFnQjtJQUNoQixPQUFPO1FBQ0wsSUFBSSxDQUFDLFVBQVUsRUFBRSxDQUFDO1FBQ2xCLElBQUksQ0FBQyxPQUFPLENBQUMsSUFBSSxFQUFFLENBQUM7UUFDcEIsSUFBSSxDQUFDLEtBQUssQ0FBQyxZQUFZLEVBQUUsQ0FBQztJQUM1QixDQUFDOzhHQXBEbUIsYUFBYTtrR0FBYixhQUFhOztTQUFiLGFBQWE7MkZBQWIsYUFBYTtrQkFEbEMsU0FBUzs4QkFXQyxRQUFRO3NCQUFoQixLQUFLO2dCQUtHLE9BQU87c0JBQWYsS0FBSztnQkFNSSxPQUFPO3NCQUFoQixNQUFNO2dCQUtHLE9BQU87c0JBQWhCLE1BQU0iLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge1xuICBDaGFuZ2VEZXRlY3RvclJlZixcbiAgRGlyZWN0aXZlLFxuICBFbGVtZW50UmVmLFxuICBFdmVudEVtaXR0ZXIsXG4gIElucHV0LFxuICBPdXRwdXQsXG4gIGluamVjdCxcbn0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBDb250cm9sVmFsdWVBY2Nlc3NvciB9IGZyb20gJ0Bhbmd1bGFyL2Zvcm1zJztcblxuQERpcmVjdGl2ZSgpXG5leHBvcnQgYWJzdHJhY3QgY2xhc3MgU3Vpc0lucHV0QmFzZSBpbXBsZW1lbnRzIENvbnRyb2xWYWx1ZUFjY2Vzc29yIHtcbiAgLyoqIEBpbnRlcm5hbCAqL1xuICBwcm90ZWN0ZWQgcmVhZG9ubHkgY2RSZWYgPSBpbmplY3QoQ2hhbmdlRGV0ZWN0b3JSZWYpO1xuXG4gIC8qKiBAaW50ZXJuYWwgKi9cbiAgcHJvdGVjdGVkIHJlYWRvbmx5IGVsUmVmID0gaW5qZWN0KEVsZW1lbnRSZWYpO1xuXG4gIC8qKlxuICAgKiBTZXRzIGlucHV0IGRpc2FibGVkIHN0YXRlLiBCeSBkZWZhdWx0IHNldCB0byBmYWxzZS5cbiAgICovXG4gIEBJbnB1dCgpIHJlYWRvbmx5OiBib29sZWFuID0gZmFsc2U7XG5cbiAgLyoqXG4gICAqIEFkZHMgaW52YWxpZCBzdHlsaW5nIHRvIHRoZSBpbnB1dC4gQnkgZGVmYXVsdCBzZXQgdG8gZmFsc2UuXG4gICAqL1xuICBASW5wdXQoKSBpbnZhbGlkOiBib29sZWFuID0gZmFsc2U7XG5cbiAgLyoqXG4gICAqIEVtaXRzIG9uIHZhbHVlIGNoYW5nZWQuXG4gICAqL1xuICAvLyBlc2xpbnQtZGlzYWJsZS1uZXh0LWxpbmUgQHR5cGVzY3JpcHQtZXNsaW50L25vLWV4cGxpY2l0LWFueVxuICBAT3V0cHV0KCkgY2hhbmdlZCA9IG5ldyBFdmVudEVtaXR0ZXI8YW55PigpO1xuXG4gIC8qKlxuICAgKiBFbWl0cyBvbiBpbnB1dCB0b3VjaGVkLlxuICAgKi9cbiAgQE91dHB1dCgpIHRvdWNoZWQgPSBuZXcgRXZlbnRFbWl0dGVyPHZvaWQ+KCk7XG5cbiAgLy8gZXNsaW50LWRpc2FibGUtbmV4dC1saW5lIEB0eXBlc2NyaXB0LWVzbGludC9uby1lbXB0eS1mdW5jdGlvbiwgQHR5cGVzY3JpcHQtZXNsaW50L25vLXVudXNlZC12YXJzLCBAdHlwZXNjcmlwdC1lc2xpbnQvbm8tZXhwbGljaXQtYW55XG4gIF9vbkNoYW5nZSA9ICh2YWx1ZTogYW55KSA9PiB7fTtcblxuICAvLyBlc2xpbnQtZGlzYWJsZS1uZXh0LWxpbmUgQHR5cGVzY3JpcHQtZXNsaW50L25vLWVtcHR5LWZ1bmN0aW9uXG4gIF9vblRvdWNoZWQgPSAoKSA9PiB7fTtcblxuICAvLyBlc2xpbnQtZGlzYWJsZS1uZXh0LWxpbmUgQHR5cGVzY3JpcHQtZXNsaW50L25vLWV4cGxpY2l0LWFueVxuICByZWdpc3Rlck9uQ2hhbmdlKGZuOiBhbnkpOiB2b2lkIHtcbiAgICB0aGlzLl9vbkNoYW5nZSA9IGZuO1xuICB9XG5cbiAgLy8gZXNsaW50LWRpc2FibGUtbmV4dC1saW5lIEB0eXBlc2NyaXB0LWVzbGludC9uby1leHBsaWNpdC1hbnlcbiAgcmVnaXN0ZXJPblRvdWNoZWQoZm46IGFueSk6IHZvaWQge1xuICAgIHRoaXMuX29uVG91Y2hlZCA9IGZuO1xuICB9XG5cbiAgLy8gZXNsaW50LWRpc2FibGUtbmV4dC1saW5lIEB0eXBlc2NyaXB0LWVzbGludC9uby1leHBsaWNpdC1hbnlcbiAgYWJzdHJhY3Qgd3JpdGVWYWx1ZShvYmo6IGFueSk6IHZvaWQ7XG5cbiAgLyoqIEBpbnRlcm5hbCAqL1xuICBvblRvdWNoKCk6IHZvaWQge1xuICAgIHRoaXMuX29uVG91Y2hlZCgpO1xuICAgIHRoaXMudG91Y2hlZC5lbWl0KCk7XG4gICAgdGhpcy5jZFJlZi5tYXJrRm9yQ2hlY2soKTtcbiAgfVxufVxuIl19

package/esm2022/lib/shared/classes/suis-select.base.mjs

@@ -0,0 +1,80 @@
+import { ContentChild, Directive, EventEmitter, HostListener, Input, Output, } from '@angular/core';
+import { SuisInputBase } from './suis-input.base';
+import { SuisSelectOptionDirective } from '../../components/suis-select-option/suis-select-option.directive';
+import { SuisIconType } from '../../components/suis-icon/suis-icon.enums';
+import * as i0 from "@angular/core";
+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 }); }
+}
+export { SuisSelectBase };
+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']]
+            }] } });
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic3Vpcy1zZWxlY3QuYmFzZS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uLy4uL2xpYnMvc3Vpcy9zcmMvbGliL3NoYXJlZC9jbGFzc2VzL3N1aXMtc2VsZWN0LmJhc2UudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUNMLFlBQVksRUFDWixTQUFTLEVBQ1QsWUFBWSxFQUNaLFlBQVksRUFDWixLQUFLLEVBQ0wsTUFBTSxHQUNQLE1BQU0sZUFBZSxDQUFDO0FBQ3ZCLE9BQU8sRUFBRSxhQUFhLEVBQUUsTUFBTSxtQkFBbUIsQ0FBQztBQUVsRCxPQUFPLEVBQUUseUJBQXlCLEVBQUUsTUFBTSxrRUFBa0UsQ0FBQztBQUM3RyxPQUFPLEVBQUUsWUFBWSxFQUFFLE1BQU0sNENBQTRDLENBQUM7O0FBRTFFLE1BQ3NCLGNBQWtCLFNBQVEsYUFBYTtJQUQ3RDs7UUFNRSxnQkFBZ0I7UUFDUCxpQkFBWSxHQUFHLFlBQVksQ0FBQztRQUVyQyxnQkFBZ0I7UUFDTixpQkFBWSxHQUFXLEVBQUUsQ0FBQztRQUVwQyxnQkFBZ0I7UUFDTixhQUFRLEdBQVksS0FBSyxDQUFDO1FBRXBDOztXQUVHO1FBQ00sWUFBTyxHQUEwQixFQUFFLENBQUM7UUFFN0M7O1dBRUc7UUFDTSxXQUFNLEdBQVksSUFBSSxDQUFDO1FBRWhDOztXQUVHO1FBQ00sc0JBQWlCLEdBQVcsV0FBVyxDQUFDO1FBRWpEOztXQUVHO1FBQ00sZ0JBQVcsR0FBVyxrQkFBa0IsQ0FBQztRQUVsRDs7V0FFRztRQUNPLHdCQUFtQixHQUFHLElBQUksWUFBWSxFQUFVLENBQUM7S0FtQzVEO0lBMUJDLE9BQU8sQ0FBQyxLQUFZO1FBQ2xCLElBQUksQ0FBQyxVQUFVLEVBQUUsQ0FBQztRQUNsQixLQUFLLENBQUMsZUFBZSxFQUFFLENBQUM7SUFDMUIsQ0FBQztJQUVELG9CQUFvQixDQUFDLElBQVk7UUFDL0IsSUFBSSxDQUFDLFlBQVksR0FBRyxJQUFJLENBQUM7UUFDekIsSUFBSSxDQUFDLG1CQUFtQixDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsQ0FBQztJQUN0QyxDQUFDO0lBRUQsUUFBUTtRQUNOLElBQUksQ0FBQyxNQUFNLENBQUMsQ0FBQyxJQUFJLENBQUMsUUFBUSxDQUFDLENBQUM7UUFDNUIsSUFBSSxDQUFDLE9BQU8sRUFBRSxDQUFDO0lBQ2pCLENBQUM7SUFFRCxNQUFNLENBQUMsS0FBYztRQUNuQixJQUFJLENBQUMsUUFBUSxHQUFHLEtBQUssQ0FBQztRQUN0QixJQUFJLENBQUMsWUFBWSxHQUFHLEVBQUUsQ0FBQztJQUN6QixDQUFDO0lBR0QsZUFBZSxDQUFDLEtBQVk7UUFDMUIsSUFBSSxDQUFDLElBQUksQ0FBQyxLQUFLLENBQUMsYUFBYSxDQUFDLFFBQVEsQ0FBQyxLQUFLLENBQUMsTUFBTSxDQUFDLEVBQUU7WUFDcEQsSUFBSSxDQUFDLFFBQVEsR0FBRyxLQUFLLENBQUM7U0FDdkI7SUFDSCxDQUFDOzhHQXZFbUIsY0FBYztrR0FBZCxjQUFjLDZUQUVwQix5QkFBeUI7O1NBRm5CLGNBQWM7MkZBQWQsY0FBYztrQkFEbkMsU0FBUzs4QkFJUixnQkFBZ0I7c0JBRGYsWUFBWTt1QkFBQyx5QkFBeUI7Z0JBZTlCLE9BQU87c0JBQWYsS0FBSztnQkFLRyxNQUFNO3NCQUFkLEtBQUs7Z0JBS0csaUJBQWlCO3NCQUF6QixLQUFLO2dCQUtHLFdBQVc7c0JBQW5CLEtBQUs7Z0JBS0ksbUJBQW1CO3NCQUE1QixNQUFNO2dCQThCUCxlQUFlO3NCQURkLFlBQVk7dUJBQUMsZ0JBQWdCLEVBQUUsQ0FBQyxRQUFRLENBQUMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge1xuICBDb250ZW50Q2hpbGQsXG4gIERpcmVjdGl2ZSxcbiAgRXZlbnRFbWl0dGVyLFxuICBIb3N0TGlzdGVuZXIsXG4gIElucHV0LFxuICBPdXRwdXQsXG59IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgU3Vpc0lucHV0QmFzZSB9IGZyb20gJy4vc3Vpcy1pbnB1dC5iYXNlJztcbmltcG9ydCB7IFN1aXNTZWxlY3RPcHRpb24gfSBmcm9tICcuLi8uLi9jb21wb25lbnRzL3N1aXMtc2VsZWN0LW9wdGlvbi9zdWlzLXNlbGVjdC1vcHRpb24uaW50ZXJmYWNlcyc7XG5pbXBvcnQgeyBTdWlzU2VsZWN0T3B0aW9uRGlyZWN0aXZlIH0gZnJvbSAnLi4vLi4vY29tcG9uZW50cy9zdWlzLXNlbGVjdC1vcHRpb24vc3Vpcy1zZWxlY3Qtb3B0aW9uLmRpcmVjdGl2ZSc7XG5pbXBvcnQgeyBTdWlzSWNvblR5cGUgfSBmcm9tICcuLi8uLi9jb21wb25lbnRzL3N1aXMtaWNvbi9zdWlzLWljb24uZW51bXMnO1xuXG5ARGlyZWN0aXZlKClcbmV4cG9ydCBhYnN0cmFjdCBjbGFzcyBTdWlzU2VsZWN0QmFzZTxUPiBleHRlbmRzIFN1aXNJbnB1dEJhc2Uge1xuICAvKiogQGludGVybmFsICovXG4gIEBDb250ZW50Q2hpbGQoU3Vpc1NlbGVjdE9wdGlvbkRpcmVjdGl2ZSlcbiAgc3Vpc1NlbGVjdE9wdGlvbj86IFN1aXNTZWxlY3RPcHRpb25EaXJlY3RpdmU8VD47XG5cbiAgLyoqIEBpbnRlcm5hbCAqL1xuICByZWFkb25seSBTdWlzSWNvblR5cGUgPSBTdWlzSWNvblR5cGU7XG5cbiAgLyoqIEBpbnRlcm5hbCAqL1xuICBwcm90ZWN0ZWQgc2VhcmNoUGhyYXNlOiBzdHJpbmcgPSAnJztcblxuICAvKiogQGludGVybmFsICovXG4gIHByb3RlY3RlZCBleHBhbmRlZDogYm9vbGVhbiA9IGZhbHNlO1xuXG4gIC8qKlxuICAgKiBPcHRpb25zIGRpc3BsYXllZCBpbiBkcm9wZG93biBsaXN0LiBUeXBlIG9mIFN1aXNTZWxlY3RPcHRpb25bXS5cbiAgICovXG4gIEBJbnB1dCgpIG9wdGlvbnM6IFN1aXNTZWxlY3RPcHRpb248VD5bXSA9IFtdO1xuXG4gIC8qKlxuICAgKiBEaXNwbGF5cyBzZWFyY2ggaW5wdXQgYWJvdmUgb3B0aW9ucy4gQnkgZGVmYXVsdCBzZXQgdG8gdHJ1ZS5cbiAgICovXG4gIEBJbnB1dCgpIHNlYXJjaDogYm9vbGVhbiA9IHRydWU7XG5cbiAgLyoqXG4gICAqIFBsYWNlaG9sZGVyIHRleHQgZGlzcGxheWVkIGluIG9wdGlvbnMgc2VhcmNoLiBCeSBkZWZhdWx0IHNldCB0byAnU2VhcmNoLi4uJy5cbiAgICovXG4gIEBJbnB1dCgpIHNlYXJjaFBsYWNlaG9sZGVyOiBzdHJpbmcgPSAnU2VhcmNoLi4uJztcblxuICAvKipcbiAgICogUGxhY2Vob2xkZXIgdGV4dCBkaXNwbGF5ZWQgd2hlbiB2YWx1ZSBpcyBub3Qgc2VsZWN0ZWQuIEJ5IGRlZmF1bHQgc2V0IHRvICdTZWxlY3Qgb3B0aW9uLi4uJy5cbiAgICovXG4gIEBJbnB1dCgpIHBsYWNlaG9sZGVyOiBzdHJpbmcgPSAnU2VsZWN0IG9wdGlvbi4uLic7XG5cbiAgLyoqXG4gICAqIEVtaXRzIG9uIHNlYXJjaCBwaHJhc2UgY2hhbmdlZC5cbiAgICovXG4gIEBPdXRwdXQoKSBzZWFyY2hQaHJhc2VDaGFuZ2VkID0gbmV3IEV2ZW50RW1pdHRlcjxzdHJpbmc+KCk7XG5cbiAgYWJzdHJhY3Qgb25TZWxlY3QodmFsdWU6IFQpOiB2b2lkO1xuXG4gIGFic3RyYWN0IGNsZWFyVmFsdWUoKTogdm9pZDtcblxuICAvLyBlc2xpbnQtZGlzYWJsZS1uZXh0LWxpbmUgQHR5cGVzY3JpcHQtZXNsaW50L25vLWV4cGxpY2l0LWFueVxuICBhYnN0cmFjdCBzZXRWYWx1ZSh2YWx1ZTogYW55KTogdm9pZDtcblxuICBvbkNsZWFyKGV2ZW50OiBFdmVudCk6IHZvaWQge1xuICAgIHRoaXMuY2xlYXJWYWx1ZSgpO1xuICAgIGV2ZW50LnN0b3BQcm9wYWdhdGlvbigpO1xuICB9XG5cbiAgb25TZWFyY2hQaHJhc2VDaGFuZ2UodGV4dDogc3RyaW5nKTogdm9pZCB7XG4gICAgdGhpcy5zZWFyY2hQaHJhc2UgPSB0ZXh0O1xuICAgIHRoaXMuc2VhcmNoUGhyYXNlQ2hhbmdlZC5lbWl0KHRleHQpO1xuICB9XG5cbiAgb25FeHBhbmQoKTogdm9pZCB7XG4gICAgdGhpcy50b2dnbGUoIXRoaXMuZXhwYW5kZWQpO1xuICAgIHRoaXMub25Ub3VjaCgpO1xuICB9XG5cbiAgdG9nZ2xlKHZhbHVlOiBib29sZWFuKTogdm9pZCB7XG4gICAgdGhpcy5leHBhbmRlZCA9IHZhbHVlO1xuICAgIHRoaXMuc2VhcmNoUGhyYXNlID0gJyc7XG4gIH1cblxuICBASG9zdExpc3RlbmVyKCdkb2N1bWVudDpjbGljaycsIFsnJGV2ZW50J10pXG4gIG9uRG9jdW1lbnRDbGljayhldmVudDogRXZlbnQpOiB2b2lkIHtcbiAgICBpZiAoIXRoaXMuZWxSZWYubmF0aXZlRWxlbWVudC5jb250YWlucyhldmVudC50YXJnZXQpKSB7XG4gICAgICB0aGlzLmV4cGFuZGVkID0gZmFsc2U7XG4gICAgfVxuICB9XG59XG4iXX0=

package/esm2022/lib/shared/pipes/suis-select-filter-options.pipe.mjs

@@ -0,0 +1,20 @@
+import { Pipe } from '@angular/core';
+import * as i0 from "@angular/core";
+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" }); }
+}
+export { SuisSelectFilterOptionsPipe };
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SuisSelectFilterOptionsPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    standalone: true,
+                    name: 'suisSelectFilterOptions',
+                }]
+        }] });
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic3Vpcy1zZWxlY3QtZmlsdGVyLW9wdGlvbnMucGlwZS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uLy4uL2xpYnMvc3Vpcy9zcmMvbGliL3NoYXJlZC9waXBlcy9zdWlzLXNlbGVjdC1maWx0ZXItb3B0aW9ucy5waXBlLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxJQUFJLEVBQWlCLE1BQU0sZUFBZSxDQUFDOztBQUdwRCxNQUlhLDJCQUEyQjtJQUN0QyxTQUFTLENBQ1AsT0FBOEIsRUFDOUIsTUFBYztRQUVkLElBQUksQ0FBQyxNQUFNO1lBQUUsT0FBTyxPQUFPLENBQUM7UUFDNUIsT0FBTyxPQUFPLENBQUMsTUFBTSxDQUFDLENBQUMsTUFBTSxFQUFFLEVBQUUsQ0FDL0IsTUFBTSxDQUFDLEtBQUssQ0FBQyxpQkFBaUIsRUFBRSxDQUFDLFFBQVEsQ0FBQyxNQUFNLENBQUMsaUJBQWlCLEVBQUUsQ0FBQyxDQUN0RSxDQUFDO0lBQ0osQ0FBQzs4R0FUVSwyQkFBMkI7NEdBQTNCLDJCQUEyQjs7U0FBM0IsMkJBQTJCOzJGQUEzQiwyQkFBMkI7a0JBSnZDLElBQUk7bUJBQUM7b0JBQ0osVUFBVSxFQUFFLElBQUk7b0JBQ2hCLElBQUksRUFBRSx5QkFBeUI7aUJBQ2hDIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgUGlwZSwgUGlwZVRyYW5zZm9ybSB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgU3Vpc1NlbGVjdE9wdGlvbiB9IGZyb20gJy4uLy4uL2NvbXBvbmVudHMvc3Vpcy1zZWxlY3Qtb3B0aW9uJztcblxuQFBpcGUoe1xuICBzdGFuZGFsb25lOiB0cnVlLFxuICBuYW1lOiAnc3Vpc1NlbGVjdEZpbHRlck9wdGlvbnMnLFxufSlcbmV4cG9ydCBjbGFzcyBTdWlzU2VsZWN0RmlsdGVyT3B0aW9uc1BpcGU8VD4gaW1wbGVtZW50cyBQaXBlVHJhbnNmb3JtIHtcbiAgdHJhbnNmb3JtKFxuICAgIG9wdGlvbnM6IFN1aXNTZWxlY3RPcHRpb248VD5bXSxcbiAgICBwaHJhc2U6IHN0cmluZ1xuICApOiBTdWlzU2VsZWN0T3B0aW9uPFQ+W10ge1xuICAgIGlmICghcGhyYXNlKSByZXR1cm4gb3B0aW9ucztcbiAgICByZXR1cm4gb3B0aW9ucy5maWx0ZXIoKG9wdGlvbikgPT5cbiAgICAgIG9wdGlvbi5sYWJlbC50b0xvY2FsZUxvd2VyQ2FzZSgpLmluY2x1ZGVzKHBocmFzZS50b0xvY2FsZUxvd2VyQ2FzZSgpKVxuICAgICk7XG4gIH1cbn1cbiJdfQ==

package/esm2022/lib/shared/pipes/suis-select-sort-options.pipe.mjs

@@ -0,0 +1,18 @@
+import { Pipe } from '@angular/core';
+import * as i0 from "@angular/core";
+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" }); }
+}
+export { SuisSelectSortOptionsPipe };
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SuisSelectSortOptionsPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    standalone: true,
+                    name: 'suisSelectSortOptions',
+                }]
+        }] });
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic3Vpcy1zZWxlY3Qtc29ydC1vcHRpb25zLnBpcGUuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi8uLi9saWJzL3N1aXMvc3JjL2xpYi9zaGFyZWQvcGlwZXMvc3Vpcy1zZWxlY3Qtc29ydC1vcHRpb25zLnBpcGUudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLElBQUksRUFBaUIsTUFBTSxlQUFlLENBQUM7O0FBR3BELE1BSWEseUJBQXlCO0lBQ3BDLFNBQVMsQ0FBQyxPQUE4QjtRQUN0QyxPQUFPLE9BQU8sQ0FBQyxJQUFJLENBQUMsQ0FBQyxDQUFDLEVBQUUsQ0FBQyxFQUFFLEVBQUUsQ0FBQyxDQUFDLENBQUMsS0FBSyxDQUFDLGFBQWEsQ0FBQyxDQUFDLENBQUMsS0FBSyxDQUFDLENBQUMsQ0FBQztJQUNoRSxDQUFDOzhHQUhVLHlCQUF5Qjs0R0FBekIseUJBQXlCOztTQUF6Qix5QkFBeUI7MkZBQXpCLHlCQUF5QjtrQkFKckMsSUFBSTttQkFBQztvQkFDSixVQUFVLEVBQUUsSUFBSTtvQkFDaEIsSUFBSSxFQUFFLHVCQUF1QjtpQkFDOUIiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBQaXBlLCBQaXBlVHJhbnNmb3JtIH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBTdWlzU2VsZWN0T3B0aW9uIH0gZnJvbSAnLi4vLi4vY29tcG9uZW50cy9zdWlzLXNlbGVjdC1vcHRpb24nO1xuXG5AUGlwZSh7XG4gIHN0YW5kYWxvbmU6IHRydWUsXG4gIG5hbWU6ICdzdWlzU2VsZWN0U29ydE9wdGlvbnMnLFxufSlcbmV4cG9ydCBjbGFzcyBTdWlzU2VsZWN0U29ydE9wdGlvbnNQaXBlPFQ+IGltcGxlbWVudHMgUGlwZVRyYW5zZm9ybSB7XG4gIHRyYW5zZm9ybShvcHRpb25zOiBTdWlzU2VsZWN0T3B0aW9uPFQ+W10pOiBTdWlzU2VsZWN0T3B0aW9uPFQ+W10ge1xuICAgIHJldHVybiBvcHRpb25zLnNvcnQoKGEsIGIpID0+IGEubGFiZWwubG9jYWxlQ29tcGFyZShiLmxhYmVsKSk7XG4gIH1cbn1cbiJdfQ==

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';
@@ -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');
@@ -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() {
         /**
@@ -588,32 +725,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 +747,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{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  >\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{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 }]
@@ -636,6 +759,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 +797,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 +813,6 @@ class SuisSelectComponent extends SuisInputBase {
             return this.clearValue();
         this.setValue(value);
     }
-    onExpand() {
-        this.toggle(!this.expanded);
-        this.onTouch();
-    }
     clearValue() {
         this.setValue(null);
     }
@@ -724,27 +823,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    <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,
@@ -763,22 +849,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    <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() {
@@ -842,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, SuisSelectComponent, SuisSelectOptionComponent, SuisSelectOptionDirective, 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