From daa7e2f7e261de6721735e637b4bc5b8d8af0a88 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Vin=C3=ADcius=20Marcili?= <vinipetter@gmail.com>
Date: Wed, 30 Aug 2023 16:45:02 -0300
Subject: [PATCH] Add select-search

---
 docs/src/app/app.component.html               |  12 ++
 docs/src/app/app.component.ts                 |   2 +
 docs/src/assets/i18n/en.json                  |   2 +
 docs/src/assets/i18n/es.json                  |   2 +
 docs/src/assets/i18n/pt.json                  |   2 +
 .../sq-select-search.component.html           |  99 +++++++++++++++++
 .../sq-select-search.component.scss           | 103 +++++++++++++++++
 .../sq-select-search.component.ts             | 104 ++++++++++++++++++
 .../sq-select/sq-select.component.ts          |   7 +-
 .../sq-click-outside.directive.ts             |  38 +++++++
 src/interfaces/option.interface.ts            |   5 +
 src/main.module.ts                            |  13 ++-
 src/pipes/search/search.pipe.ts               |  20 ++++
 src/public-api.ts                             |   5 +
 14 files changed, 406 insertions(+), 8 deletions(-)
 create mode 100644 src/components/sq-select-search/sq-select-search.component.html
 create mode 100644 src/components/sq-select-search/sq-select-search.component.scss
 create mode 100644 src/components/sq-select-search/sq-select-search.component.ts
 create mode 100644 src/directives/sq-click-outside/sq-click-outside.directive.ts
 create mode 100644 src/interfaces/option.interface.ts
 create mode 100644 src/pipes/search/search.pipe.ts

diff --git a/docs/src/app/app.component.html b/docs/src/app/app.component.html
index 89572b5..1c90d60 100644
--- a/docs/src/app/app.component.html
+++ b/docs/src/app/app.component.html
@@ -35,6 +35,18 @@
 [name]="'teste-4'"
 placeholder="teste"
 ></sq-input-file>
+<sq-select-search
+[id]="'search-influencer-organization-filter'"
+[name]="'search-influencer-organization-filter'"
+[options]="[{label: 'teste', value: 'teste'}, {label: 'teste2', value: 'teste2'}, {label: 'teste3', value: 'teste3'}, {label: 'teste4', value: 'teste4'}]"
+label="teste4"
+tooltipMessage="teste"
+tooltipPlacement="left center"
+[readonly]="false"
+[(value)]="option"
+[loading]="false"
+></sq-select-search>
+{{ option | json }}
 <!-- <sq-selector
   [id]="'teste-1'"
   [name]="'teste-1'"
diff --git a/docs/src/app/app.component.ts b/docs/src/app/app.component.ts
index ce4ae26..093124b 100644
--- a/docs/src/app/app.component.ts
+++ b/docs/src/app/app.component.ts
@@ -1,4 +1,5 @@
 import { Component } from '@angular/core'
+import { Option } from '@squidit/ngx-css'
 
 @Component({
   selector: 'app-root',
@@ -11,6 +12,7 @@ export class AppComponent {
   overlay = false
   date = '2023-08-30T14:24:08.292Z'
   val = '0'
+  option?: Option
 
   onScroll() {
     console.log('scroll')
diff --git a/docs/src/assets/i18n/en.json b/docs/src/assets/i18n/en.json
index 899bdbc..e8f3b0e 100644
--- a/docs/src/assets/i18n/en.json
+++ b/docs/src/assets/i18n/en.json
@@ -1,5 +1,7 @@
 {
   "formErrors": {
+    "search": "Search",
+    "seachSelectEmpty": "There are no options to select",
     "fileSize": "File too large",
     "required": "Required field",
     "email": "Invalid email",
diff --git a/docs/src/assets/i18n/es.json b/docs/src/assets/i18n/es.json
index 6f889a3..52a4de8 100644
--- a/docs/src/assets/i18n/es.json
+++ b/docs/src/assets/i18n/es.json
@@ -1,5 +1,7 @@
 {
   "formErrors": {
+    "search": "Buscar",
+    "seachSelectEmpty": "No hay opciones a seleccionar",
     "fileSize": "Archivo demasiado grande",
     "required": "Campo obligatorio",
     "email": "E-mail inválido",
diff --git a/docs/src/assets/i18n/pt.json b/docs/src/assets/i18n/pt.json
index 11641a2..4f07a05 100644
--- a/docs/src/assets/i18n/pt.json
+++ b/docs/src/assets/i18n/pt.json
@@ -1,5 +1,7 @@
 {
   "formErrors": {
+    "search": "Buscar",
+    "seachSelectEmpty": "Não há opções a serem selecionadas",
     "fileSize": "O arquivo enviado é muito grande, tente diminuir a qualidade ou fazer o upload novamente.",
     "required": "Campo obrigatório",
     "email": "E-mail inválido",
diff --git a/src/components/sq-select-search/sq-select-search.component.html b/src/components/sq-select-search/sq-select-search.component.html
new file mode 100644
index 0000000..b872a40
--- /dev/null
+++ b/src/components/sq-select-search/sq-select-search.component.html
@@ -0,0 +1,99 @@
+<div
+  class="wrapper-all-inside-input wrapper-select-search {{ customClass }}"
+  [ngClass]="{
+    error: (externalError && externalError !== '') || (error && error !== ''),
+    readonly: readonly,
+    loading: loading
+  }"
+>
+  <label
+    class="display-flex"
+    *ngIf="label?.length || tooltipMessage"
+    [ngClass]="{
+      readonly: readonly
+    }"
+    [for]="id"
+  >
+    <div *ngIf="label" [ngStyle]="{ 'color': labelColor }" [innerHtml]="label | universalSafe"></div>
+    <sq-tooltip
+      *ngIf="tooltipMessage"
+      class="ml-1"
+      [message]="tooltipMessage"
+      [placement]="tooltipPlacement"
+      [color]="tooltipColor"
+      [icon]="tooltipIcon"
+    ></sq-tooltip>
+  </label>
+  <div
+    [class]="'input-fake col  border-' + borderColor"
+    style="min-height: auto"
+    [ngStyle]="{ 'border-color': borderColor }"
+    [ngClass]="{
+      'no-label': !label.length,
+      'has-icon': error || externalError,
+      disabled: disabled,
+      readonly: readonly
+    }"
+    (clickOutside)="closeDropdown()"
+    [clickOutsideEnabled]="open"
+  >
+    <div
+      class="input-fake-content"
+      [ngClass]="{
+        disabled: disabled
+      }"
+      (click)="open = !open; !open ? closeDropdown() : null"
+    >
+      <div class="loading-wrapper" *ngIf="loading">
+        <sq-loader></sq-loader>
+      </div>
+      <span *ngIf="!value">{{ placeholder }}</span>
+      <div class="input-fake-content-text" *ngIf="value">
+        <span class="text" *ngIf="value">
+          {{ value!.label }}
+        </span>
+      </div>
+      <i *ngIf="!loading" class="icon-down fas fa-chevron-down"></i>
+    </div>
+    <div
+      class="input-window scrollbar"
+      *ngIf="!disabled"
+      [ngClass]="{
+        open: open && !disabled
+      }"
+    >
+      <sq-input
+        [name]="name || timeStamp"
+        [id]="id || timeStamp"
+        [borderColor]="borderColor"
+        [value]="searchText"
+        [hasTimeout]="hasTimeout"
+        [placeholder]="placeholderSearch || (getTranslation('search') | async)"
+        (sharedValue)="onTipSearchChange($event)"
+        [errorSpan]="false"
+        [externalIcon]="'<i class=\'fa-solid fa-search\'></i>'"
+        class="input-search"
+      ></sq-input>
+      <ng-container *ngIf="open && !loading">
+        <ul class="list" *ngFor="let opt of options | search : getSearchValue(); let i = index">
+          <ng-container *ngTemplateOutlet="option; context: { opt: opt, i: i }"></ng-container>
+        </ul>
+        <p class="mb-0 mt-3" *ngIf="!options?.length">
+          {{ getTranslation('seachSelectEmpty') | async }}
+        </p>
+      </ng-container>
+    </div>
+  </div>
+  <div class="box-validation box-invalid show" *ngIf="errorSpan">
+    <ng-container *ngIf="externalError || error">
+      <i class="fa-solid fa-triangle-exclamation"></i>
+    </ng-container>
+    {{ externalError ? externalError : '' }}
+    {{ error && !externalError ? error : '' }}
+  </div>
+</div>
+<ng-template #option let-opt="opt" let-i="i">
+  <li (click)="emit(opt)">
+    <span class="text m-0 display-inline-block">{{ opt?.label }}</span>
+  </li>
+</ng-template>
diff --git a/src/components/sq-select-search/sq-select-search.component.scss b/src/components/sq-select-search/sq-select-search.component.scss
new file mode 100644
index 0000000..8fae8be
--- /dev/null
+++ b/src/components/sq-select-search/sq-select-search.component.scss
@@ -0,0 +1,103 @@
+.wrapper-select-search {
+  margin: 0;
+  padding: 0;
+  text-align: left;
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  &.loading {
+    cursor: wait;
+  }
+  .input-fake-content-text {
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: 5px;
+    max-width: calc(100% - 40px);
+    .text {
+      margin: 0;
+      display: flex;
+      width: 100%;
+      height: 100%;
+      font-weight: 700;
+      align-items: center;
+      justify-content: flex-start;
+    }
+  }
+  .input-fake-content {
+    min-height: 44px;
+    border: 1px solid var(--border_color);
+    background: var(--background);
+    padding: 0.75rem 1rem;
+    color: var(--text_color);
+    border-radius: 5px;
+    .icon-down {
+      right: 5px;
+      top: 18px;
+      position: absolute;
+      font-size: 0.86rem;
+    }
+  }
+  .loading-wrapper {
+    position: absolute;
+    right: 5px;
+    bottom: 10px;
+  }
+  .input-search {
+    display: inline-block;
+    position: sticky;
+    top: 0;
+    z-index: 1;
+    width: 100%;
+    padding-top: 1.1rem;
+    ::ng-deep {
+      .wrapper-all-inside-input {
+        .icon.no-label {
+          right: 11px;
+          top: 27px;
+        }
+      }
+    }
+  }
+  .input-window {
+    width: 100%;
+    position: absolute;
+    top: 100%;
+    max-height: 0;
+    height: 0;
+    transition: all 0.3s ease;
+    overflow: hidden;
+    z-index: 1;
+    &.open {
+      height: auto;
+      max-height: 400px;
+      background: var(--background_secondary);
+      padding: 0 0.7rem 1.1rem;
+      overflow-y: auto;
+      box-shadow: var(--box-shadow);
+    }
+  }
+  .list {
+    padding: 0;
+    list-style: none;
+    margin: 0;
+    width: 100%;
+    margin: 0.7rem 0 0;
+    li {
+      margin: 0;
+      cursor: pointer;
+      min-height: 30px;
+      flex-flow: row wrap;
+      display: flex;
+      align-items: center;
+      justify-content: flex-start;
+      transition: var(--transition);
+      padding: 0.35rem;
+      border-radius: 5px;
+      &:hover {
+        background-color: var(--border_color);
+      }
+    }
+  }
+}
diff --git a/src/components/sq-select-search/sq-select-search.component.ts b/src/components/sq-select-search/sq-select-search.component.ts
new file mode 100644
index 0000000..e2f18c7
--- /dev/null
+++ b/src/components/sq-select-search/sq-select-search.component.ts
@@ -0,0 +1,104 @@
+import { Component, ElementRef, EventEmitter, Input, Optional, Output } from '@angular/core'
+import { TranslateService } from '@ngx-translate/core'
+import { Option } from '../../interfaces/option.interface'
+import { useMemo } from '../../helpers/memo.helper'
+
+@Component({
+  selector: 'sq-select-search',
+  templateUrl: './sq-select-search.component.html',
+  styleUrls: ['./sq-select-search.component.scss'],
+  providers: [],
+})
+export class SqSelectSearchComponent {
+  @Input() name = ''
+  @Input() value?: Option
+  @Input() id = ''
+  @Input() label = ''
+  @Input() customClass = ''
+
+  @Input() placeholder = ''
+  @Input() externalError = ''
+  @Input() externalIcon = ''
+  @Input() placeholderSearch = ''
+
+  @Input() disabled = false
+  @Input() readonly = false
+  @Input() required = false
+  @Input() loading = false
+  @Input() useFormErrors = true
+  @Input() errorSpan = true
+  @Input() hasTimeout = false
+
+  @Input() options: Array<Option> = []
+
+  @Input() backgroundColor = ''
+  @Input() borderColor = ''
+  @Input() labelColor = ''
+
+  @Input() tooltipMessage = ''
+  @Input() tooltipPlacement: 'center top' | 'center bottom' | 'left center' | 'right center' = 'right center'
+  @Input() tooltipColor = 'inherit'
+  @Input() tooltipIcon = ''
+
+  @Output() valueChange: EventEmitter<Option> = new EventEmitter()
+  @Output() searchChange: EventEmitter<string> = new EventEmitter()
+  @Output() sharedValid: EventEmitter<boolean> = new EventEmitter()
+
+  error: boolean | string = false
+  timeoutInput!: ReturnType<typeof setTimeout>
+  timeOutInputTime = 800
+  timeStamp = `random-id-${(1 + Date.now() + Math.random()).toString().replace('.', '')}`
+  nativeElement: ElementRef
+  searchText = ''
+  open = false
+
+  constructor(public element: ElementRef, @Optional() private translate: TranslateService) {
+    this.nativeElement = element.nativeElement
+  }
+
+  emit(event: any) {
+    this.value = event
+    this.valueChange.emit(this.value)
+    this.validate()
+    this.closeDropdown()
+  }
+
+  validate() {
+    if (this.externalError) {
+      this.error = false
+    } else if (this.required && !this.value) {
+      this.setError('formErrors.required')
+      this.sharedValid.emit(false)
+    } else {
+      this.sharedValid.emit(true)
+      this.error = ''
+    }
+  }
+
+  getSearchValue() {
+    return this.searchText || ''
+  }
+
+  closeDropdown() {
+    this.open = false
+    this.searchText = ''
+  }
+
+  onTipSearchChange(event: string) {
+    this.searchText = event
+    this.searchChange.emit(event)
+  }
+
+  async setError(key: string) {
+    if (this.useFormErrors && this.translate) {
+      this.error = await this.translate.instant(key)
+    }
+  }
+
+  getTranslation = useMemo(async (key: string) => {
+    if (this.translate) {
+      return await this.translate.instant(key)
+    }
+    return ''
+  })
+}
diff --git a/src/components/sq-select/sq-select.component.ts b/src/components/sq-select/sq-select.component.ts
index 678b786..5fb07c1 100755
--- a/src/components/sq-select/sq-select.component.ts
+++ b/src/components/sq-select/sq-select.component.ts
@@ -1,11 +1,6 @@
 import { Component, ContentChild, EventEmitter, Input, Output, TemplateRef, Optional, ElementRef } from '@angular/core'
 import { TranslateService } from '@ngx-translate/core'
-
-export interface Option {
-  value: any
-  label: string
-  disabled?: boolean
-}
+import { Option } from '../../interfaces/option.interface'
 
 @Component({
   selector: 'sq-select',
diff --git a/src/directives/sq-click-outside/sq-click-outside.directive.ts b/src/directives/sq-click-outside/sq-click-outside.directive.ts
new file mode 100644
index 0000000..ea12c2b
--- /dev/null
+++ b/src/directives/sq-click-outside/sq-click-outside.directive.ts
@@ -0,0 +1,38 @@
+import { Directive, ElementRef, Output, EventEmitter, OnDestroy, Renderer2, Input, OnChanges, SimpleChanges } from '@angular/core'
+
+@Directive({
+  selector: '[clickOutside]',
+})
+export class SqClickOutsideDirective implements OnDestroy, OnChanges {
+  @Input() clickOutsideEnabled = false
+  @Output() public clickOutside = new EventEmitter()
+
+  listener!: () => void
+
+  constructor(private elementRef: ElementRef, private renderer: Renderer2) { }
+
+  ngOnChanges(changes: SimpleChanges): void {
+    if (changes['clickOutsideEnabled']) {
+      if (changes['clickOutsideEnabled'].currentValue) {
+        this.createListener()
+      } else if (typeof this.listener === 'function') {
+        this.listener()
+      }
+    }
+  }
+
+  ngOnDestroy() {
+    if (typeof this.listener === 'function') {
+      this.listener()
+    }
+  }
+
+  createListener() {
+    this.listener = this.renderer.listen('window', 'click', ($event) => {
+      const isClickedInside = this.elementRef.nativeElement.contains($event.target)
+      if (!isClickedInside) {
+        this.clickOutside.emit()
+      }
+    })
+  }
+}
diff --git a/src/interfaces/option.interface.ts b/src/interfaces/option.interface.ts
new file mode 100644
index 0000000..ecb7683
--- /dev/null
+++ b/src/interfaces/option.interface.ts
@@ -0,0 +1,5 @@
+export interface Option {
+  value: any
+  label: string
+  disabled?: boolean
+}
\ No newline at end of file
diff --git a/src/main.module.ts b/src/main.module.ts
index 3f739ec..b31c49b 100644
--- a/src/main.module.ts
+++ b/src/main.module.ts
@@ -26,6 +26,9 @@ import { SqInputDateComponent } from './components/sq-input-date/sq-input-date.c
 import { SqInputRangeComponent } from './components/sq-input-range/sq-input-range.component'
 import { SqInputFileComponent } from './components/sq-input-file/sq-input-file.component'
 import { SqDropdownDirective } from './directives/sq-dropdown/sq-dropdown.directive'
+import { SqSelectSearchComponent } from './components/sq-select-search/sq-select-search.component'
+import { SqClickOutsideDirective } from './directives/sq-click-outside/sq-click-outside.directive'
+import { SearchPipe } from './pipes/search/search.pipe'
 
 @NgModule({
   declarations: [
@@ -53,7 +56,10 @@ import { SqDropdownDirective } from './directives/sq-dropdown/sq-dropdown.direct
     SqInputDateComponent,
     SqInputRangeComponent,
     SqInputFileComponent,
-    SqDropdownDirective
+    SqDropdownDirective,
+    SqSelectSearchComponent,
+    SqClickOutsideDirective,
+    SearchPipe
   ],
   imports: [
     CommonModule,
@@ -84,7 +90,10 @@ import { SqDropdownDirective } from './directives/sq-dropdown/sq-dropdown.direct
     SqInputDateComponent,
     SqInputRangeComponent,
     SqInputFileComponent,
-    SqDropdownDirective
+    SqDropdownDirective,
+    SqSelectSearchComponent,
+    SqClickOutsideDirective,
+    SearchPipe
   ]
 })
 export class SquidCSSModule { }
diff --git a/src/pipes/search/search.pipe.ts b/src/pipes/search/search.pipe.ts
new file mode 100644
index 0000000..d6f5b2d
--- /dev/null
+++ b/src/pipes/search/search.pipe.ts
@@ -0,0 +1,20 @@
+import { Pipe, PipeTransform } from '@angular/core'
+
+@Pipe({ name: 'search' })
+export class SearchPipe implements PipeTransform {
+  transform(value: any, search: string): any {
+    if (!search) {
+      return value
+    }
+    if (!value) {
+      return ''
+    }
+    const solution = value?.filter((v: any) => {
+      if (!v) {
+        return
+      }
+      return JSON.stringify(v).toLowerCase().indexOf(search.toLowerCase()) > -1
+    })
+    return solution
+  }
+}
diff --git a/src/public-api.ts b/src/public-api.ts
index 302198c..f23d937 100644
--- a/src/public-api.ts
+++ b/src/public-api.ts
@@ -24,16 +24,21 @@ export * from './components/sq-input/sq-input.component'
 export * from './components/sq-input-date/sq-input-date.component'
 export * from './components/sq-input-range/sq-input-range.component'
 export * from './components/sq-input-file/sq-input-file.component'
+export * from './components/sq-select-search/sq-select-search.component'
 
 export * from './directives/sq-tooltip/sq-tooltip.directive'
 export * from './directives/sq-dropdown/sq-dropdown.directive'
+export * from './directives/sq-click-outside/sq-click-outside.directive'
 
 export * from './pipes/thousands/thousands.pipe'
 export * from './pipes/universal-safe/universal-safe.pipe'
+export * from './pipes/search/search.pipe'
 
 export * from './helpers/colors.helper'
 export * from './helpers/memo.helper'
 export * from './helpers/toast.helper'
 export * from './helpers/validator.helper'
 
+export * from './interfaces/option.interface'
+
 export * from './main.module'
\ No newline at end of file