add select-multi-tags

docs/src/app/app.component.html

@@ -47,6 +47,14 @@
 [loading]="false"
 ></sq-select-search>
 {{ option | json }}
+<sq-select-multi-tags
+            [id]="'teste-5'"
+            [name]="'teste-5'"
+            label="teste-5"
+            [options]="multiOptions"
+            [(value)]="multiOption"
+          ></sq-select-multi-tags>
+          {{ multiOption | json }}
 <!-- <sq-selector
   [id]="'teste-1'"
   [name]="'teste-1'"

docs/src/app/app.component.ts

@@ -1,5 +1,5 @@
 import { Component } from '@angular/core'
-import { Option } from '@squidit/ngx-css'
+import { Option, OptionMulti } from '@squidit/ngx-css'
 
 @Component({
   selector: 'app-root',
@@ -13,6 +13,12 @@ export class AppComponent {
   date = '2023-08-30T14:24:08.292Z'
   val = '0'
   option?: Option
+  multiOption?: OptionMulti[] = []
+  multiOptions: OptionMulti[] = [
+    { value: '1', label: 'Option 1' },
+    { value: '2', label: 'Option 2', children: [{ value: '2.1', label: 'Option 2.1' }, { value: '2.2', label: 'Option 2.2' }] },
+    { value: '3', label: 'Option 3' },
+  ]
 
   onScroll() {
     console.log('scroll')

src/components/sq-select-multi-tags/sq-select-multi-tags.component.html

@@ -0,0 +1,132 @@
+<div class="wrapper-all-inside-input {{ customClass }}">
+  <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="wrapper-select-multi"
+    [ngClass]="{
+      error: (externalError && externalError !== '') || (error && error !== ''),
+      disabled: disabled,
+      readonly: readonly,
+      loading: loading
+    }"
+  >
+    <div
+      [class]="'input-fake col  border-' + borderColor"
+      style="min-height: auto"
+      [ngStyle]="{ 'border-color': borderColor }"
+      [ngClass]="{
+        'no-label': !(label && label.length > 0),
+        'has-icon': error || externalError,
+        disabled: disabled,
+        readonly: readonly
+      }"
+      [clickOutsideEnabled]="open"
+      (clickOutside)="closeDropdown()"
+    >
+      <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?.length || !showInside">{{ placeholder }}</span>
+        <div class="input-fake-content-text" *ngIf="showInside && value?.length">
+          <span class="tag" *ngFor="let opt of value; let i = index" (click)="removeItem(opt)">
+            {{ opt?.label }} <i class="fas fa-times"></i>
+          </span>
+        </div>
+        <span *ngIf="value?.length" class="badge">{{ value!.length }}</span>
+        <i *ngIf="!loading" class="icon-down fas fa-chevron-down"></i>
+      </div>
+      <div
+        class="input-window scrollbar"
+        *ngIf="!disabled"
+        [ngClass]="{
+          open: open && !disabled && !loading
+        }"
+      >
+        <sq-input
+          [name]="name || timeStamp"
+          [id]="id || timeStamp"
+          [value]="searchText"
+          [placeholder]="placeholderSearch || (getTranslation('search') | async)"
+          (sharedValue)="searchText = $event"
+          [errorSpan]="false"
+          [externalIcon]="'<i class=\'fas fa-search\'></i>'"
+          class="input-search"
+          *ngIf="!hideSearch"
+        ></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>
+        </ng-container>
+        <p *ngIf="!options?.length">
+          {{ getTranslation('seachSelectEmpty') | async }}
+        </p>
+      </div>
+    </div>
+  </div>
+  <div
+    class="box-validation box-invalid show"
+    *ngIf="errorSpan"
+    [ngClass]="{
+      'visibility-hidden-force': ((!externalError || externalError === '') && (!error || error === '')) || disabled || readonly
+    }"
+  >
+    <i [ngClass]="{
+      'visibility-hidden-force': !error || !externalError
+    }" class="fa-solid fa-triangle-exclamation"></i>
+    {{ externalError ? externalError : '' }}
+    {{ error && !externalError ? error : '' }}
+  </div>
+  <ng-template #option let-opt="opt" let-i="i">
+    <li>
+      <i
+        class="icon-collapse fas fa-chevron-down"
+        [ngClass]="{ 'fa-rotate-by': !opt.open }"
+        [ngStyle]="{ color: !opt?.children?.length || opt?.disabled ? 'transparent' : '' }"
+        (click)="handleCollapse(opt)"
+        style="--fa-rotate-angle: -90deg"
+        *ngIf="verifyIfOptionsHasChildren(options)"
+      ></i>
+      <sq-selector
+        [id]="(id || timeStamp) + '-checkbox-' + opt?.value + '-' + i"
+        [name]="(name || timeStamp) + '-checkbox'"
+        [value]="opt?.value"
+        [disabled]="opt?.disabled"
+        [checked]="findItemInValue(opt)"
+        [indeterminate]="verifyIfHasChildrenInValue(opt)"
+        (sharedValue)="emit(opt, $event.checked)"
+      ></sq-selector>
+      <span class="text m-0 display-inline-block" [ngClass]="{ 'cursor-pointer': opt?.children?.length }" (click)="handleCollapse(opt)">{{
+        opt?.label
+      }}</span>
+      <ul class="children" [ngClass]="{ open: opt.open && !opt?.disabled }" *ngIf="opt?.children?.length">
+        <ng-container *ngFor="let child of opt?.children | search : getSearchValue(); let j = index">
+          <ng-template *ngTemplateOutlet="option; context: { opt: child, i: j }"></ng-template>
+        </ng-container>
+      </ul>
+    </li>
+  </ng-template>
+</div>

src/components/sq-select-multi-tags/sq-select-multi-tags.component.scss

@@ -0,0 +1,140 @@
+.wrapper-select-multi {
+  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);
+    .tag {
+      margin: 0;
+      border: 1px solid var(--border_color);
+      border-radius: 5px;
+      padding: 0.2rem 0.35rem;
+      display: flex;
+      align-items: center;
+      gap: 5px;
+      cursor: pointer;
+      transition: var(--transition);
+      background: var(--background_secondary);
+      &:hover {
+        background: var(--border_color);
+      }
+    }
+  }
+  .input-fake-content {
+    min-height: 44px;
+    border: 1px solid var(--border_color);
+    background: var(--background);
+    padding: 0.75rem 1rem;
+    transition: all 0.3s ease;
+    color: var(--text_color);
+    border-radius: 5px;
+    .icon-down {
+      right: 5px;
+      bottom: calc(50% - 6px);
+      position: absolute;
+      font-size: 0.86rem;
+    }
+  }
+  .loading-wrapper {
+    position: absolute;
+    right: 5px;
+    bottom: 10px;
+  }
+  .badge {
+    position: absolute;
+    bottom: 15px;
+    right: 20px;
+    margin: 0;
+    border-radius: 50%;
+    background-color: var(--border_color);
+    color: var(--black);
+    font-size: 0.86rem;
+    font-weight: 700;
+    padding: 0 0.35rem;
+    border-radius: 50%;
+    min-width: 20px;
+    height: 20px;
+    line-height: 20px;
+    text-align: center;
+    transition: var(--transition);
+  }
+  .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);
+    }
+  }
+  .icon-collapse {
+    transition: var(--transition);
+    cursor: pointer;
+    padding: 0.35rem;
+    position: relative;
+  }
+  .list,
+  .children {
+    padding: 0;
+    list-style: none;
+    margin: 0;
+    width: 100%;
+    li {
+      margin: 0;
+      min-height: 30px;
+      flex-flow: row wrap;
+      display: flex;
+      align-items: center;
+      justify-content: flex-start;
+      transition: var(--transition);
+    }
+  }
+  .list {
+    margin: 0.7rem 0 0;
+  }
+  .children {
+    max-height: 0;
+    overflow: hidden;
+    transition: var(--transition);
+    padding-left: 1.4rem;
+    &.open {
+      max-height: 9999px;
+    }
+  }
+}