feat: adding icon properties (#1063)

* feat: adding icon properties

* feat: adding border settings

* feat: adding border settings

* feat: fixing inputs

Co-authored-by: Patricio Albizu <patricioalbizu@Patricios-MacBook-Pro.local>

Author: palbizu

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,8 +11,13 @@ import { IconSize } from './icon-size';
   template: `
     <mat-icon
       class="ht-icon"
-      [ngClass]="this.size"
-      [ngStyle]="{ color: this.color ? this.color : '' }"
+      [ngClass]="[this.size, this.borderType ? this.borderType : '']"
+      [ngStyle]="{
+        color: this.color ? this.color : '',
+        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"
       [htTooltip]="this.showTooltip ? this.labelToUse : undefined"
       [fontSet]="this.fontSet"
@@ -27,6 +33,15 @@ export class IconComponent implements OnChanges {
   @Input()
   public size: IconSize = IconSize.Medium;
 
+  @Input()
+  public borderType: IconBorder = IconBorder.NoBorder;
+
+  @Input()
+  public borderColor?: string;
+
+  @Input()
+  public borderRadius?: string;
+
   @Input()
   public label?: 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({
@@ -27,6 +28,15 @@ export class SelectOptionComponent<V> implements OnChanges, SelectOption<V> {
   @Input()
   public iconColor?: string;
 
+  @Input()
+  public iconBorderType?: IconBorder;
+
+  @Input()
+  public iconBorderColor?: string;
+
+  @Input()
+  public iconBorderRadius?: string;
+
   @Input()
   public disabled?: boolean;
 

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,6 +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"
               >
               </ht-icon>
               <ht-label class="trigger-label" [label]="selected?.selectedLabel || selected?.label || this.placeholder">
@@ -123,6 +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"
                 >
                 </ht-icon>
                 <span class="label">{{ item.label }}</span>