feat(select): Add ability to clear select

Author: avaneev95

demo/src/app/pages/modules/select/select.page.html

@@ -39,6 +39,14 @@ <h4 class="ui header">Variations</h4>
         <example-select-variations result></example-select-variations>
     </demo-example>
 
+    <demo-example [code]="exampleClearableTemplate">
+        <div info>
+            <h4 class="ui header">Clearable select</h4>
+            <p>A select can have a "clear" icon to reset the selected value. It's useful if you want to use a <code>SuiSelect</code> as filter</p>
+        </div>
+        <example-clearable-select result></example-clearable-select>
+    </demo-example>
+
     <demo-example [code]="exampleInMenuSearchTemplate">
         <div info>
             <h4 class="ui header">Search In-Menu</h4>

demo/src/app/pages/modules/select/select.page.ts

@@ -91,6 +91,18 @@ const exampleVariationsTemplate = `
 </div>
 `;
 
+const exampleClearableTemplate = `
+<sui-select class="selection"
+            [(ngModel)]="selectedOption"
+            [options]="filters"
+            [isClearable]="true"
+            #select>
+    <sui-select-option *ngFor="let option of select.filteredOptions"
+                       [value]="option">
+    </sui-select-option>
+</sui-select>
+`;
+
 const exampleInMenuSearchTemplate = `
 <sui-multi-select [(ngModel)]="selected"
                   [options]="options"
@@ -221,6 +233,12 @@ export class SelectPage {
                     description: "Sets whether the multi select is searchable.",
                     defaultValue: "false"
                 },
+                {
+                    name: "isСlearable",
+                    type: "boolean",
+                    description: "Sets whether the select is clearable.",
+                    defaultValue: "false"
+                },
                 {
                     name: "optionFormatter",
                     type: "(result:T, query?:string) => string",
@@ -408,6 +426,7 @@ export class SelectPage {
     ];
     public exampleStandardTemplate:string = exampleStandardTemplate;
     public exampleVariationsTemplate:string = exampleVariationsTemplate;
+    public exampleClearableTemplate:string = exampleClearableTemplate;
     public exampleInMenuSearchTemplate:string = exampleInMenuSearchTemplate;
     public exampleTemplateTemplate:string = exampleTemplateTemplate;
     public formatterCode:string = `
@@ -468,6 +487,15 @@ export class SelectExampleVariations {
     public filters:string[] = ["Important", "Announcement", "Discussion"];
 }
 
+@Component({
+    selector: "example-clearable-select",
+    template: exampleClearableTemplate
+})
+export class SelectClearableExample {
+    public selectedOption:string;
+    public filters:string[] = ["Important", "Announcement", "Discussion"];
+}
+
 @Component({
     selector: "example-select-in-menu-search",
     template: exampleInMenuSearchTemplate
@@ -520,6 +548,7 @@ export const SelectPageComponents = [
 
     SelectExampleStandard,
     SelectExampleVariations,
+    SelectClearableExample,
     SelectExampleInMenuSearch,
     SelectExampleTemplate,
     SelectExampleLookupSearch