feat(select/input): space to add input

matheusdavidson · May 31, 2022 · 0c0567e · 0c0567e
1 parent 880cea3
commit 0c0567e
Show file tree

Hide file tree

Showing 4 changed files with 83 additions and 1 deletion.
diff --git a/projects/ng-tw/src/modules/select/select.component.html b/projects/ng-tw/src/modules/select/select.component.html
@@ -50,6 +50,19 @@
         tabindex="-1"
         role="listbox"
     >
+        <!-- Input container -->
+        <div
+            #inputContainer
+            class="w-full flex flex-col p-3"
+            [ngClass]="{'flex': inputContainer.children.length !== 0, 'hidden': inputContainer.children.length === 0}"
+        >
+            <ng-content select="input"></ng-content>
+        </div>
+
+        <!-- Options -->
         <ng-content select="tw-option"></ng-content>
+
+        <!-- Will be used for extra content like empty list message -->
+        <ng-content></ng-content>
     </div>
 </ng-template>
diff --git a/projects/ng-tw/src/modules/select/select.component.ts b/projects/ng-tw/src/modules/select/select.component.ts
@@ -77,6 +77,7 @@ export class SelectComponent implements ControlValueAccessor, OnInit, AfterConte
         this.selectOption(newValue, null, false);
     }
 
+    @ViewChild('inputContainer', { static: true }) public inputContainer!: ElementRef<HTMLDivElement>;
     @ViewChild('trigger', { static: true }) public trigger!: ElementRef;
     @ContentChildren(OptionComponent, { descendants: true }) public options!: QueryList<OptionComponent>;
 

diff --git a/projects/sandbox/src/app/routes/c-select-route/c-select-route.component.html b/projects/sandbox/src/app/routes/c-select-route/c-select-route.component.html
@@ -87,6 +87,37 @@ <h3 id="basic-usage">Basic usage</h3>
                 Selected Value: {{ selectCompareWithInitialValueControl.value ? (selectCompareWithInitialValueControl.value | json) : '---' }}
             </div>
         </div>
+
+        <div class="demo-row">
+            <div class="demo-row-title">With Input</div>
+
+            <div class="demo-row-content md:flex-1">
+                <tw-select
+                    class="w-64 max-w-full"
+                    [formControl]="selectControlWithInput"
+                >
+                    <input
+                        type="text"
+                        class="focus:ring-0 focus:ring-offset-0 focus:outline-0 min-w-full sm:text-sm border-b border-gray-200 -m-3 -mt-4 p-3 mb-0"
+                        placeholder="Search.."
+                    />
+
+                    <tw-option>Select an option</tw-option>
+                    <tw-option
+                        activeClass="bg-gray-100"
+                        selectedClass="font-bold"
+                        *ngFor="let item of options"
+                        [value]="item.value"
+                    >
+                        {{item.label}}
+                    </tw-option>
+                </tw-select>
+            </div>
+
+            <div class="md:flex-1">
+                Selected Value: {{ selectControlWithInput.value ? selectControlWithInput.value : '---' }}
+            </div>
+        </div>
     </div>
 
     <h3>Usage</h3>

diff --git a/projects/sandbox/src/app/routes/c-select-route/c-select-route.component.ts b/projects/sandbox/src/app/routes/c-select-route/c-select-route.component.ts
@@ -1,5 +1,6 @@
 import { Component, OnInit } from '@angular/core';
 import { FormControl } from '@angular/forms';
+import { cloneDeep } from 'lodash';
 
 @Component({
     selector: 'app-c-select-route',
@@ -103,6 +104,37 @@ export class CSelectRouteComponent implements OnInit {
                     Selected Value: {{ selectCompareWithInitialValueControl.value ? (selectCompareWithInitialValueControl.value | json) : '---' }}
                 </div>
             </div>
+
+            <div class="demo-row">
+                <div class="demo-row-title">With Input</div>
+
+                <div class="demo-row-content md:flex-1">
+                    <tw-select
+                        class="w-64 max-w-full"
+                        [formControl]="selectControlWithInput"
+                    >
+                        <input
+                            type="text"
+                            class="shadow-sm focus:ring-indigo-500 focus:border-indigo-500 block w-full sm:text-sm border-gray-300 rounded-md"
+                            placeholder="Search.."
+                        />
+
+                        <tw-option>Select an option</tw-option>
+                        <tw-option
+                            activeClass="bg-gray-100"
+                            selectedClass="font-bold"
+                            *ngFor="let item of options"
+                            [value]="item.value"
+                        >
+                            {{item.label}}
+                        </tw-option>
+                    </tw-select>
+                </div>
+
+                <div class="md:flex-1">
+                    Selected Value: {{ selectControl.value ? selectControl.value : '---' }}
+                </div>
+            </div>
         </div>
         \`\`\`
     `;
@@ -130,13 +162,18 @@ export class CSelectRouteComponent implements OnInit {
         { label: 'Twenty', value: 'value-20' },
     ];
 
+    public optionsForWithInput: any[] = [];
+
     public selectControl: FormControl = new FormControl({ value: 'value-1', disabled: false });
     public selectCompareWithControl: FormControl = new FormControl({ value: null, disabled: false });
     public selectCompareWithInitialValueControl: FormControl = new FormControl({ value: null, disabled: false });
+    public selectControlWithInput: FormControl = new FormControl({ value: null, disabled: false });
 
     constructor() {}
 
-    ngOnInit(): void {}
+    ngOnInit(): void {
+        this.optionsForWithInput = cloneDeep(this.options);
+    }
 
     compareWith(option: any, value: any): boolean {
         return option?.value && value?.value ? option.value === value.value : option === value;