From 2bb1a99e013a087b90a003cc08e90166f2c4bc28 Mon Sep 17 00:00:00 2001
From: Patricio Albizu <patricioalbizu@Patricios-MacBook-Pro.local>
Date: Tue, 28 Dec 2021 14:50:37 -0300
Subject: [PATCH 1/6] feat: disabled and display Mode input in Time Picker

---
 .../src/form-field/form-field.component.scss      |  1 +
 .../src/time-picker/time-picker.component.scss    | 13 +++++++++++--
 .../src/time-picker/time-picker.component.ts      | 15 +++++++++++++--
 3 files changed, 25 insertions(+), 4 deletions(-)

diff --git a/projects/components/src/form-field/form-field.component.scss b/projects/components/src/form-field/form-field.component.scss
index 32b1c663b..b0607740e 100644
--- a/projects/components/src/form-field/form-field.component.scss
+++ b/projects/components/src/form-field/form-field.component.scss
@@ -42,6 +42,7 @@
 
     &.error-border {
       border: 1px solid $red-3;
+      border-radius: 6px;
     }
   }
 
diff --git a/projects/components/src/time-picker/time-picker.component.scss b/projects/components/src/time-picker/time-picker.component.scss
index 349b9ffe2..bd94cacd1 100644
--- a/projects/components/src/time-picker/time-picker.component.scss
+++ b/projects/components/src/time-picker/time-picker.component.scss
@@ -1,14 +1,23 @@
 @import 'mixins';
 
 .time-picker {
+  @include disableable;
   display: flex;
 
   .time-selector {
     @include body-1-medium($gray-7);
     height: 32px;
-    border: 1px solid $gray-1;
-    background: $gray-1;
     border-radius: 4px;
+
+    &.with-background {
+      border: 1px solid $gray-1;
+      background: $gray-1;
+    }
+
+    &.with-border {
+      border: 1px solid $color-border;
+      border-radius: 6px;
+    }
   }
 }
 
diff --git a/projects/components/src/time-picker/time-picker.component.ts b/projects/components/src/time-picker/time-picker.component.ts
index b46d419ec..db8280d38 100644
--- a/projects/components/src/time-picker/time-picker.component.ts
+++ b/projects/components/src/time-picker/time-picker.component.ts
@@ -9,8 +9,8 @@ import { PredefinedTimeService } from '../time-range/predefined-time.service';
   styleUrls: ['./time-picker.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: `
-    <div class="time-picker">
-      <ht-popover class="time-selector" [closeOnClick]="true">
+    <div class="time-picker" [ngClass]="[this.disabled ? 'disabled' : '']">
+      <ht-popover class="time-selector" [disabled]="this.disabled" [ngClass]="this.displayMode" [closeOnClick]="true">
         <ht-popover-trigger>
           <div class="popover-trigger" #popoverTrigger>
             <ht-icon
@@ -48,6 +48,12 @@ export class TimePickerComponent {
   @Input()
   public showTimeTriggerIcon?: boolean = false;
 
+  @Input()
+  public displayMode?: TimePickerDisplayMode = TimePickerDisplayMode.MenuWithBackground;
+
+  @Input()
+  public disabled: boolean = false;
+
   @Output()
   public readonly timeChange: EventEmitter<Time> = new EventEmitter();
 
@@ -67,3 +73,8 @@ export class TimePickerComponent {
     this.timeChange.emit(time);
   }
 }
+
+export const enum TimePickerDisplayMode {
+  MenuWithBorder = 'with-border',
+  MenuWithBackground = 'with-background'
+}

From b3809365a54beb0a0d395b97b80abe6eee936004 Mon Sep 17 00:00:00 2001
From: Patricio Albizu <patricioalbizu@Patricios-MacBook-Pro.local>
Date: Tue, 28 Dec 2021 18:29:08 -0300
Subject: [PATCH 2/6] feat: adding size inputs

---
 .../src/form-field/form-field.component.ts       |  5 ++++-
 .../src/multi-select/multi-select.component.scss | 13 +++++++++++++
 .../src/multi-select/multi-select.component.ts   |  8 ++++++--
 projects/components/src/select/select-size.ts    |  1 +
 .../src/time-picker/time-picker.component.ts     | 16 +++++++++++++++-
 5 files changed, 39 insertions(+), 4 deletions(-)

diff --git a/projects/components/src/form-field/form-field.component.ts b/projects/components/src/form-field/form-field.component.ts
index 41a53dd44..e292936ec 100644
--- a/projects/components/src/form-field/form-field.component.ts
+++ b/projects/components/src/form-field/form-field.component.ts
@@ -23,7 +23,7 @@ import { IconSize } from '../icon/icon-size';
         class="content"
         [ngClass]="{
           'show-border': this.showBorder,
-          'error-border': this.showFormError && this.errorLabel
+          'error-border': (this.showFormError && this.errorLabel) || this.showOnlyErrorBorder
         }"
       >
         <ng-content></ng-content>
@@ -65,6 +65,9 @@ export class FormFieldComponent {
   @Input()
   public showBorder: boolean = false;
 
+  @Input()
+  public showOnlyErrorBorder: boolean = false;
+
   @Input()
   public showFormError?: boolean = true;
 }
diff --git a/projects/components/src/multi-select/multi-select.component.scss b/projects/components/src/multi-select/multi-select.component.scss
index 4617dca48..694d3af32 100644
--- a/projects/components/src/multi-select/multi-select.component.scss
+++ b/projects/components/src/multi-select/multi-select.component.scss
@@ -28,6 +28,19 @@
     padding: 0 8px;
     cursor: pointer;
     height: 34px;
+    border-radius: 6px;
+
+    &.extra-small {
+      height: 30px;
+    }
+
+    &.small {
+      height: 32px;
+    }
+
+    &.large {
+      height: 44px;
+    }
 
     &.open {
       background-color: $gray-2;
diff --git a/projects/components/src/multi-select/multi-select.component.ts b/projects/components/src/multi-select/multi-select.component.ts
index 465f0e707..806c2250a 100644
--- a/projects/components/src/multi-select/multi-select.component.ts
+++ b/projects/components/src/multi-select/multi-select.component.ts
@@ -53,7 +53,7 @@ import { MultiSelectJustify } from './multi-select-justify';
           <div
             class="trigger-content"
             [style.justify-content]="this.justify"
-            [ngClass]="[this.triggerLabelDisplayMode, this.popoverOpen ? 'open' : '']"
+            [ngClass]="[this.triggerLabelDisplayMode, this.popoverOpen ? 'open' : '', this.size]"
             #triggerContainer
           >
             <ht-icon *ngIf="this.icon" [icon]="this.icon" [size]="this.iconSize"></ht-icon>
@@ -63,7 +63,11 @@ import { MultiSelectJustify } from './multi-select-justify';
                 <span *ngIf="triggerValues.selectedItemsCount > 1" class="trigger-more-items"
                   >+{{ triggerValues.selectedItemsCount - 1 }}</span
                 >
-                <ht-icon class="trigger-icon" icon="${IconType.ChevronDown}" size="${IconSize.Small}"></ht-icon>
+                <ht-icon
+                  class="trigger-icon"
+                  icon="${IconType.ChevronDown}"
+                  [size]="this.size === '${IconSize.ExtraSmall}' ? '${IconSize.ExtraSmall}' : '${IconSize.Small}'"
+                ></ht-icon>
               </div>
             </ng-container>
           </div>
diff --git a/projects/components/src/select/select-size.ts b/projects/components/src/select/select-size.ts
index 0ed4b4634..8529b276b 100644
--- a/projects/components/src/select/select-size.ts
+++ b/projects/components/src/select/select-size.ts
@@ -1,4 +1,5 @@
 export const enum SelectSize {
+  ExtraSmall = 'extra-small',
   Small = 'small',
   Medium = 'medium',
   Large = 'large'
diff --git a/projects/components/src/time-picker/time-picker.component.ts b/projects/components/src/time-picker/time-picker.component.ts
index db8280d38..67832a867 100644
--- a/projects/components/src/time-picker/time-picker.component.ts
+++ b/projects/components/src/time-picker/time-picker.component.ts
@@ -20,7 +20,13 @@ import { PredefinedTimeService } from '../time-range/predefined-time.service';
               *ngIf="this.showTimeTriggerIcon"
             ></ht-icon>
             <ht-label class="trigger-label" *ngIf="this.time" [label]="this.time!.label"></ht-label>
-            <ht-icon class="trigger-caret" icon="${IconType.ChevronDown}" size="${IconSize.Small}"></ht-icon>
+            <ht-icon
+              class="trigger-caret"
+              icon="${IconType.ChevronDown}"
+              [size]="
+                this.iconSize === '${TimePickerIconSize.Regular}' ? '${IconSize.Small}' : '${IconSize.ExtraSmall}'
+              "
+            ></ht-icon>
           </div>
         </ht-popover-trigger>
         <ht-popover-content>
@@ -45,6 +51,9 @@ export class TimePickerComponent {
   @Input()
   public time?: Time;
 
+  @Input()
+  public iconSize?: TimePickerIconSize = TimePickerIconSize.Regular;
+
   @Input()
   public showTimeTriggerIcon?: boolean = false;
 
@@ -78,3 +87,8 @@ export const enum TimePickerDisplayMode {
   MenuWithBorder = 'with-border',
   MenuWithBackground = 'with-background'
 }
+
+export const enum TimePickerIconSize {
+  Small = 'small',
+  Regular = 'regular'
+}

From 083107d697a1b5d4539844dbfbf0af396e51558b Mon Sep 17 00:00:00 2001
From: Patricio Albizu <patricioalbizu@Patricios-MacBook-Pro.local>
Date: Thu, 30 Dec 2021 12:46:03 -0300
Subject: [PATCH 3/6] feat: adding transparent background to select

---
 projects/components/src/select/select.component.scss | 4 ++++
 projects/components/src/select/select.component.ts   | 5 ++++-
 2 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/projects/components/src/select/select.component.scss b/projects/components/src/select/select.component.scss
index 5d40321ca..e1312fbb2 100644
--- a/projects/components/src/select/select.component.scss
+++ b/projects/components/src/select/select.component.scss
@@ -84,6 +84,10 @@
       .trigger-icon {
         padding-top: 1px;
       }
+
+      &.transparent-background {
+        background-color: transparent;
+      }
     }
 
     &.justify-left {
diff --git a/projects/components/src/select/select.component.ts b/projects/components/src/select/select.component.ts
index 427563104..5c2681255 100644
--- a/projects/components/src/select/select.component.ts
+++ b/projects/components/src/select/select.component.ts
@@ -103,7 +103,7 @@ import { SelectSize } from './select-size';
             <div
               *ngSwitchCase="'${SelectTriggerDisplayMode.MenuWithBackground}'"
               class="trigger-content menu-with-background"
-              [ngClass]="[this.justifyClass]"
+              [ngClass]="[this.justifyClass, this.showTransparentBackground ? 'transparent-background' : '']"
             >
               <ng-container
                 [ngTemplateOutlet]="selected?.selectOptionRenderer?.getTemplateRef() ?? defaultMenuWithBackgroundTriggerTemplate"
@@ -200,6 +200,9 @@ export class SelectComponent<V> implements ControlValueAccessor, AfterContentIni
   @Input()
   public showBorder: boolean = false;
 
+  @Input()
+  public showTransparentBackground: boolean = false;
+
   @Input()
   public justify?: SelectJustify;
 

From dec4c0ea28b6cdff9fc10d056018f5a368696acc Mon Sep 17 00:00:00 2001
From: Patricio Albizu <patricioalbizu@Patricios-MacBook-Pro.local>
Date: Thu, 30 Dec 2021 21:54:13 -0300
Subject: [PATCH 4/6] feat: fixing comments

---
 .../components/src/multi-select/multi-select.component.ts   | 6 +-----
 .../components/src/time-picker/time-picker.component.ts     | 2 +-
 2 files changed, 2 insertions(+), 6 deletions(-)

diff --git a/projects/components/src/multi-select/multi-select.component.ts b/projects/components/src/multi-select/multi-select.component.ts
index 806c2250a..ef8074b94 100644
--- a/projects/components/src/multi-select/multi-select.component.ts
+++ b/projects/components/src/multi-select/multi-select.component.ts
@@ -63,11 +63,7 @@ import { MultiSelectJustify } from './multi-select-justify';
                 <span *ngIf="triggerValues.selectedItemsCount > 1" class="trigger-more-items"
                   >+{{ triggerValues.selectedItemsCount - 1 }}</span
                 >
-                <ht-icon
-                  class="trigger-icon"
-                  icon="${IconType.ChevronDown}"
-                  [size]="this.size === '${IconSize.ExtraSmall}' ? '${IconSize.ExtraSmall}' : '${IconSize.Small}'"
-                ></ht-icon>
+                <ht-icon class="trigger-icon" icon="${IconType.ChevronDown}" [size]="this.iconSize"></ht-icon>
               </div>
             </ng-container>
           </div>
diff --git a/projects/components/src/time-picker/time-picker.component.ts b/projects/components/src/time-picker/time-picker.component.ts
index 67832a867..9f6ec018e 100644
--- a/projects/components/src/time-picker/time-picker.component.ts
+++ b/projects/components/src/time-picker/time-picker.component.ts
@@ -9,7 +9,7 @@ import { PredefinedTimeService } from '../time-range/predefined-time.service';
   styleUrls: ['./time-picker.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: `
-    <div class="time-picker" [ngClass]="[this.disabled ? 'disabled' : '']">
+    <div class="time-picker" [ngClass]="{ disabled: this.disabled }">
       <ht-popover class="time-selector" [disabled]="this.disabled" [ngClass]="this.displayMode" [closeOnClick]="true">
         <ht-popover-trigger>
           <div class="popover-trigger" #popoverTrigger>

From 7e800a4bdebeb6458afd50e21695aa10f011216d Mon Sep 17 00:00:00 2001
From: Patricio Albizu <patricioalbizu@Patricios-MacBook-Pro.local>
Date: Tue, 4 Jan 2022 17:20:44 -0300
Subject: [PATCH 5/6] feat: fixing comments

---
 projects/components/src/form-field/form-field.component.ts | 5 +----
 projects/components/src/select/select.component.scss       | 4 ----
 projects/components/src/select/select.component.ts         | 5 +----
 3 files changed, 2 insertions(+), 12 deletions(-)

diff --git a/projects/components/src/form-field/form-field.component.ts b/projects/components/src/form-field/form-field.component.ts
index e292936ec..73d56d6e0 100644
--- a/projects/components/src/form-field/form-field.component.ts
+++ b/projects/components/src/form-field/form-field.component.ts
@@ -23,7 +23,7 @@ import { IconSize } from '../icon/icon-size';
         class="content"
         [ngClass]="{
           'show-border': this.showBorder,
-          'error-border': (this.showFormError && this.errorLabel) || this.showOnlyErrorBorder
+          'error-border': (this.showFormError && this.errorLabel)
         }"
       >
         <ng-content></ng-content>
@@ -65,9 +65,6 @@ export class FormFieldComponent {
   @Input()
   public showBorder: boolean = false;
 
-  @Input()
-  public showOnlyErrorBorder: boolean = false;
-
   @Input()
   public showFormError?: boolean = true;
 }
diff --git a/projects/components/src/select/select.component.scss b/projects/components/src/select/select.component.scss
index e1312fbb2..5d40321ca 100644
--- a/projects/components/src/select/select.component.scss
+++ b/projects/components/src/select/select.component.scss
@@ -84,10 +84,6 @@
       .trigger-icon {
         padding-top: 1px;
       }
-
-      &.transparent-background {
-        background-color: transparent;
-      }
     }
 
     &.justify-left {
diff --git a/projects/components/src/select/select.component.ts b/projects/components/src/select/select.component.ts
index 5c2681255..427563104 100644
--- a/projects/components/src/select/select.component.ts
+++ b/projects/components/src/select/select.component.ts
@@ -103,7 +103,7 @@ import { SelectSize } from './select-size';
             <div
               *ngSwitchCase="'${SelectTriggerDisplayMode.MenuWithBackground}'"
               class="trigger-content menu-with-background"
-              [ngClass]="[this.justifyClass, this.showTransparentBackground ? 'transparent-background' : '']"
+              [ngClass]="[this.justifyClass]"
             >
               <ng-container
                 [ngTemplateOutlet]="selected?.selectOptionRenderer?.getTemplateRef() ?? defaultMenuWithBackgroundTriggerTemplate"
@@ -200,9 +200,6 @@ export class SelectComponent<V> implements ControlValueAccessor, AfterContentIni
   @Input()
   public showBorder: boolean = false;
 
-  @Input()
-  public showTransparentBackground: boolean = false;
-
   @Input()
   public justify?: SelectJustify;
 

From ee5dea4c464954877c210bac253032cabba39077 Mon Sep 17 00:00:00 2001
From: Patricio Albizu <patricioalbizu@Patricios-MacBook-Pro.local>
Date: Tue, 4 Jan 2022 17:22:52 -0300
Subject: [PATCH 6/6] feat: fixing comments

---
 projects/components/src/form-field/form-field.component.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/projects/components/src/form-field/form-field.component.ts b/projects/components/src/form-field/form-field.component.ts
index 73d56d6e0..41a53dd44 100644
--- a/projects/components/src/form-field/form-field.component.ts
+++ b/projects/components/src/form-field/form-field.component.ts
@@ -23,7 +23,7 @@ import { IconSize } from '../icon/icon-size';
         class="content"
         [ngClass]="{
           'show-border': this.showBorder,
-          'error-border': (this.showFormError && this.errorLabel)
+          'error-border': this.showFormError && this.errorLabel
         }"
       >
         <ng-content></ng-content>