Input select

projects/ion/src/lib/core/types/input-select.ts

@@ -0,0 +1,23 @@
+import { EventEmitter } from '@angular/core';
+import { DropdownItem } from './dropdown';
+
+export type ValueToEmmit = {
+  optionSelected: SelectOption;
+  inputValue: string;
+  secondValue?: string;
+};
+
+export interface SelectOption extends DropdownItem {
+  multiple?: boolean;
+  firstPlaceholder?: string;
+  secondPlaceholder?: string;
+}
+
+export interface IonInputSelectProps {
+  name: string;
+  disabled?: boolean;
+  value?: string;
+  secondValue?: string;
+  selectOptions?: SelectOption[];
+  valueChange?: EventEmitter<ValueToEmmit>;
+}

projects/ion/src/lib/input-select/input-select.component.html

@@ -0,0 +1,60 @@
+<div class="input-wraper" data-testid="ion-input-select">
+  <div
+    class="input-select-container"
+    [class.multiple-input]="currentOption?.multiple"
+  >
+    <div class="dropdown-container" (clickOutside)="onClickOutside()">
+      <button
+        data-testid="ion-select-button"
+        (click)="handleClick()"
+        class="dropdown-container__button"
+        [disabled]="disabled"
+      >
+        <span>{{ currentOption?.label }}</span>
+        <ion-icon type="semi-down" color="#8D93A5"></ion-icon>
+      </button>
+
+      <div *ngIf="!!selectOptions && dropdownVisible" class="ion-btn-dropdown">
+        <ion-dropdown
+          [options]="selectOptions"
+          (selected)="handleSelect($event)"
+          [multiple]="false"
+          [required]="true"
+        >
+        </ion-dropdown>
+      </div>
+    </div>
+
+    <div class="input-container">
+      <div class="input first-input" [class.disabled]="disabled">
+        <input
+          data-testid="first-input"
+          [id]="name"
+          type="text"
+          class="my-input"
+          [attr.placeholder]="
+            currentOption?.firstPlaceholder || 'Digite o valor'
+          "
+          [disabled]="disabled"
+          [(ngModel)]="value"
+          (ngModelChange)="handleChange()"
+        />
+      </div>
+    </div>
+    <div *ngIf="currentOption?.multiple" class="separator">-</div>
+    <div *ngIf="currentOption?.multiple" class="input-container">
+      <div class="input second-input" [class.disabled]="disabled">
+        <input
+          data-testid="second-input"
+          [id]="name"
+          type="text"
+          class="my-input"
+          [attr.placeholder]="currentOption?.secondPlaceholder || 'Valor Final'"
+          [disabled]="disabled"
+          [(ngModel)]="secondValue"
+          (ngModelChange)="handleChange()"
+        />
+      </div>
+    </div>
+  </div>
+</div>

projects/ion/src/lib/input-select/input-select.component.scss

@@ -0,0 +1,78 @@
+@import '../input/input.component.scss';
+@import '../../styles/index.scss';
+
+.input-wraper {
+  display: flex;
+  flex-direction: column;
+  gap: spacing(0.5);
+
+  .input-select-container {
+    display: flex;
+
+    .input {
+      padding: 6px 12px;
+      border-radius: 0 spacing(1) spacing(1) 0;
+    }
+  }
+}
+
+.dropdown-container {
+  &__button {
+    cursor: pointer;
+    background-color: $neutral-2;
+
+    display: flex;
+    align-items: center;
+    gap: spacing(1);
+
+    padding: 6px 12px;
+    min-width: max-content;
+    border-radius: spacing(1) 0px 0px spacing(1);
+    border: 1px solid $neutral-5;
+    border-right: none;
+
+    @include font-size-sm;
+    font-weight: 400;
+    color: $neutral-7;
+  }
+}
+
+.multiple-input {
+  .first-input {
+    border-right: none;
+    border-radius: 0 !important;
+  }
+
+  .second-input {
+    border-left: none;
+  }
+
+  .first-input,
+  .second-input {
+    position: relative;
+    z-index: 2;
+    &:hover {
+      border: 1px solid $primary-4;
+    }
+
+    &:focus-within {
+      border: 1px solid $primary-4;
+      @include add-colors($primary-5, 2px solid, $primary-2);
+    }
+
+    &:active {
+      border: 1px solid $primary-4;
+      @include add-colors($primary-5, 2px solid, $primary-2);
+    }
+  }
+}
+
+.separator {
+  background-color: $neutral-1;
+  color: $neutral-5;
+  line-height: 20px;
+
+  border-top: 1px solid $neutral-5;
+  border-bottom: 1px solid $neutral-5;
+  padding: spacing(1) spacing(1.5);
+}