feat: adding border settings

Author: Patricio Albizu

projects/components/src/icon/icon-border.ts

@@ -0,0 +1,5 @@
+export const enum IconBorder {
+  NoBorder = 'no-border',
+  InsetBorder = 'inset-border',
+  OutsetBorder = 'outset-border'
+}

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;
+  }
 }

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;

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';
 

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;

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;
 }

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>