From 67cbc26669295dd5c4700c08ed0bf8a48ebcecb0 Mon Sep 17 00:00:00 2001
From: Patricio Albizu <patricioalbizu@Patricios-MacBook-Pro.local>
Date: Fri, 13 Aug 2021 14:26:36 -0300
Subject: [PATCH 1/4] feat: adding icon properties

---
 projects/components/src/icon/icon.component.ts       | 12 +++++++++++-
 .../components/src/select/select-option.component.ts |  6 ++++++
 projects/components/src/select/select.component.ts   |  4 ++++
 3 files changed, 21 insertions(+), 1 deletion(-)

diff --git a/projects/components/src/icon/icon.component.ts b/projects/components/src/icon/icon.component.ts
index cede590fc..d55b5e707 100644
--- a/projects/components/src/icon/icon.component.ts
+++ b/projects/components/src/icon/icon.component.ts
@@ -11,7 +11,11 @@ import { IconSize } from './icon-size';
     <mat-icon
       class="ht-icon"
       [ngClass]="this.size"
-      [ngStyle]="{ color: this.color ? this.color : '' }"
+      [ngStyle]="{
+        color: this.color ? this.color : '',
+        border: this.border ? this.border : '',
+        borderRadius: this.borderRadius ? this.borderRadius : ''
+      }"
       [attr.aria-label]="this.labelToUse"
       [htTooltip]="this.showTooltip ? this.labelToUse : undefined"
       [fontSet]="this.fontSet"
@@ -27,6 +31,12 @@ export class IconComponent implements OnChanges {
   @Input()
   public size: IconSize = IconSize.Medium;
 
+  @Input()
+  public border?: string;
+
+  @Input()
+  public borderRadius?: string;
+
   @Input()
   public label?: string;
 
diff --git a/projects/components/src/select/select-option.component.ts b/projects/components/src/select/select-option.component.ts
index 372793772..d2398b739 100644
--- a/projects/components/src/select/select-option.component.ts
+++ b/projects/components/src/select/select-option.component.ts
@@ -27,6 +27,12 @@ export class SelectOptionComponent<V> implements OnChanges, SelectOption<V> {
   @Input()
   public iconColor?: string;
 
+  @Input()
+  public iconBorder?: string;
+
+  @Input()
+  public iconBorderRadius?: string;
+
   @Input()
   public disabled?: boolean;
 
diff --git a/projects/components/src/select/select.component.ts b/projects/components/src/select/select.component.ts
index 63549d86f..d36700796 100644
--- a/projects/components/src/select/select.component.ts
+++ b/projects/components/src/select/select.component.ts
@@ -61,6 +61,8 @@ import { SelectSize } from './select-size';
                 [icon]="this.getPrefixIcon(selected)"
                 [size]="this.iconSize"
                 [color]="selected?.iconColor"
+                [border]="selected?.iconBorder"
+                [borderRadius]="selected?.iconBorderRadius"
               >
               </ht-icon>
               <ht-label class="trigger-label" [label]="selected?.selectedLabel || selected?.label || this.placeholder">
@@ -123,6 +125,8 @@ import { SelectSize } from './select-size';
                   [icon]="item.icon"
                   size="${IconSize.Small}"
                   [color]="item.iconColor"
+                  [border]="item.iconBorder"
+                  [borderRadius]="item.iconBorderRadius"
                 >
                 </ht-icon>
                 <span class="label">{{ item.label }}</span>

From 7405086595b5c4d6abe2a47481f8a3a6efd49747 Mon Sep 17 00:00:00 2001
From: Patricio Albizu <patricioalbizu@Patricios-MacBook-Pro.local>
Date: Tue, 17 Aug 2021 13:17:44 -0300
Subject: [PATCH 2/4] feat: adding border settings

---
 projects/components/src/icon/icon-border.ts         |  5 +++++
 projects/components/src/icon/icon.component.scss    | 13 +++++++++++++
 projects/components/src/icon/icon.component.ts      | 11 ++++++++---
 projects/components/src/public-api.ts               |  1 +
 .../src/select/select-option.component.ts           |  6 +++++-
 projects/components/src/select/select-option.ts     |  3 +++
 projects/components/src/select/select.component.ts  |  6 ++++--
 7 files changed, 39 insertions(+), 6 deletions(-)
 create mode 100644 projects/components/src/icon/icon-border.ts

diff --git a/projects/components/src/icon/icon-border.ts b/projects/components/src/icon/icon-border.ts
new file mode 100644
index 000000000..e3f207308
--- /dev/null
+++ b/projects/components/src/icon/icon-border.ts
@@ -0,0 +1,5 @@
+export const enum IconBorder {
+  NoBorder = 'no-border',
+  InsetBorder = 'inset-border',
+  OutsetBorder = 'outset-border'
+}
diff --git a/projects/components/src/icon/icon.component.scss b/projects/components/src/icon/icon.component.scss
index 0c9e5a64d..e9b505580 100644
--- a/projects/components/src/icon/icon.component.scss
+++ b/projects/components/src/icon/icon.component.scss
@@ -52,4 +52,17 @@
     height: inherit;
     width: inherit;
   }
+
+  &.no-border {
+    border-style: none;
+  }
+
+  &.inset-border {
+    box-sizing: border-box;
+  }
+
+  &.outset-border {
+    border-width: 2px;
+    border-style: solid;
+  }
 }
diff --git a/projects/components/src/icon/icon.component.ts b/projects/components/src/icon/icon.component.ts
index d55b5e707..a4685eb58 100644
--- a/projects/components/src/icon/icon.component.ts
+++ b/projects/components/src/icon/icon.component.ts
@@ -1,6 +1,7 @@
 import { ChangeDetectionStrategy, Component, Input, OnChanges } from '@angular/core';
 import { IconRegistryService, IconType } from '@hypertrace/assets-library';
 import { assertUnreachable } from '@hypertrace/common';
+import { IconBorder } from './icon-border';
 import { IconSize } from './icon-size';
 
 @Component({
@@ -10,10 +11,11 @@ import { IconSize } from './icon-size';
   template: `
     <mat-icon
       class="ht-icon"
-      [ngClass]="this.size"
+      [ngClass]="[this.size, this.borderType ? this.borderType : '']"
       [ngStyle]="{
         color: this.color ? this.color : '',
-        border: this.border ? this.border : '',
+        borderColor: this.borderType !== '${IconBorder.InsetBorder}' && this.borderColor ? this.borderColor : '',
+        background: this.borderType === '${IconBorder.InsetBorder}' && this.borderColor ? this.borderColor : '',
         borderRadius: this.borderRadius ? this.borderRadius : ''
       }"
       [attr.aria-label]="this.labelToUse"
@@ -32,7 +34,10 @@ export class IconComponent implements OnChanges {
   public size: IconSize = IconSize.Medium;
 
   @Input()
-  public border?: string;
+  public borderType: IconBorder = IconBorder.NoBorder;
+
+  @Input()
+  public borderColor?: string;
 
   @Input()
   public borderRadius?: string;
diff --git a/projects/components/src/public-api.ts b/projects/components/src/public-api.ts
index 1fa7f7a96..8bbf6d651 100644
--- a/projects/components/src/public-api.ts
+++ b/projects/components/src/public-api.ts
@@ -120,6 +120,7 @@ export * from './header/page/page-header.module';
 
 // Icon
 export * from './icon/icon-size';
+export * from './icon/icon-border';
 export * from './icon/icon.component';
 export * from './icon/icon.module';
 
diff --git a/projects/components/src/select/select-option.component.ts b/projects/components/src/select/select-option.component.ts
index d2398b739..a7df89585 100644
--- a/projects/components/src/select/select-option.component.ts
+++ b/projects/components/src/select/select-option.component.ts
@@ -1,6 +1,7 @@
 import { ChangeDetectionStrategy, Component, Input, OnChanges } from '@angular/core';
 import { IconType } from '@hypertrace/assets-library';
 import { Observable, Subject } from 'rxjs';
+import { IconBorder } from '../icon/icon-border';
 import { SelectOption } from './select-option';
 
 @Component({
@@ -28,7 +29,10 @@ export class SelectOptionComponent<V> implements OnChanges, SelectOption<V> {
   public iconColor?: string;
 
   @Input()
-  public iconBorder?: string;
+  public iconBorderType?: IconBorder;
+
+  @Input()
+  public iconBorderColor?: string;
 
   @Input()
   public iconBorderRadius?: string;
diff --git a/projects/components/src/select/select-option.ts b/projects/components/src/select/select-option.ts
index ab8be64f4..054a3b17b 100644
--- a/projects/components/src/select/select-option.ts
+++ b/projects/components/src/select/select-option.ts
@@ -4,5 +4,8 @@ export interface SelectOption<V> {
   selectedLabel?: string;
   icon?: string;
   iconColor?: string;
+  iconBorderType?: string;
+  iconBorderColor?: string;
+  iconBorderRadius?: string;
   disabled?: boolean;
 }
diff --git a/projects/components/src/select/select.component.ts b/projects/components/src/select/select.component.ts
index d36700796..46a329013 100644
--- a/projects/components/src/select/select.component.ts
+++ b/projects/components/src/select/select.component.ts
@@ -61,7 +61,8 @@ import { SelectSize } from './select-size';
                 [icon]="this.getPrefixIcon(selected)"
                 [size]="this.iconSize"
                 [color]="selected?.iconColor"
-                [border]="selected?.iconBorder"
+                [borderType]="selected.iconBorderType"
+                [borderColor]="selected?.iconBorderColor"
                 [borderRadius]="selected?.iconBorderRadius"
               >
               </ht-icon>
@@ -125,7 +126,8 @@ import { SelectSize } from './select-size';
                   [icon]="item.icon"
                   size="${IconSize.Small}"
                   [color]="item.iconColor"
-                  [border]="item.iconBorder"
+                  [borderType]="item.iconBorderType"
+                  [borderColor]="item.iconBorderColor"
                   [borderRadius]="item.iconBorderRadius"
                 >
                 </ht-icon>

From 15346147526eb713a265c8f7d4e67087ce04c94c Mon Sep 17 00:00:00 2001
From: Patricio Albizu <patricioalbizu@Patricios-MacBook-Pro.local>
Date: Tue, 17 Aug 2021 13:19:37 -0300
Subject: [PATCH 3/4] feat: adding border settings

---
 projects/components/src/select/select.component.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/projects/components/src/select/select.component.ts b/projects/components/src/select/select.component.ts
index 46a329013..8fdfa56f1 100644
--- a/projects/components/src/select/select.component.ts
+++ b/projects/components/src/select/select.component.ts
@@ -62,8 +62,8 @@ import { SelectSize } from './select-size';
                 [size]="this.iconSize"
                 [color]="selected?.iconColor"
                 [borderType]="selected.iconBorderType"
-                [borderColor]="selected?.iconBorderColor"
-                [borderRadius]="selected?.iconBorderRadius"
+                [borderColor]="selected.iconBorderColor"
+                [borderRadius]="selected.iconBorderRadius"
               >
               </ht-icon>
               <ht-label class="trigger-label" [label]="selected?.selectedLabel || selected?.label || this.placeholder">

From 70c0795515e4cd599a59a841ec4c60aeea1fda92 Mon Sep 17 00:00:00 2001
From: Patricio Albizu <patricioalbizu@Patricios-MacBook-Pro.local>
Date: Tue, 17 Aug 2021 13:29:16 -0300
Subject: [PATCH 4/4] feat: fixing inputs

---
 projects/components/src/select/select.component.ts | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/projects/components/src/select/select.component.ts b/projects/components/src/select/select.component.ts
index 8fdfa56f1..a015067f1 100644
--- a/projects/components/src/select/select.component.ts
+++ b/projects/components/src/select/select.component.ts
@@ -61,9 +61,9 @@ import { SelectSize } from './select-size';
                 [icon]="this.getPrefixIcon(selected)"
                 [size]="this.iconSize"
                 [color]="selected?.iconColor"
-                [borderType]="selected.iconBorderType"
-                [borderColor]="selected.iconBorderColor"
-                [borderRadius]="selected.iconBorderRadius"
+                [borderType]="selected?.iconBorderType"
+                [borderColor]="selected?.iconBorderColor"
+                [borderRadius]="selected?.iconBorderRadius"
               >
               </ht-icon>
               <ht-label class="trigger-label" [label]="selected?.selectedLabel || selected?.label || this.placeholder">
@@ -126,9 +126,9 @@ import { SelectSize } from './select-size';
                   [icon]="item.icon"
                   size="${IconSize.Small}"
                   [color]="item.iconColor"
-                  [borderType]="item.iconBorderType"
-                  [borderColor]="item.iconBorderColor"
-                  [borderRadius]="item.iconBorderRadius"
+                  [borderType]="item?.iconBorderType"
+                  [borderColor]="item?.iconBorderColor"
+                  [borderRadius]="item?.iconBorderRadius"
                 >
                 </ht-icon>
                 <span class="label">{{ item.label }}</span>