Merge branch 'main' into title_spacing_radio_button

Author: alok-traceable

package-lock.json

@@ -58,7 +58,7 @@
     "d3-shape": "^1.3.5",
     "d3-transition": "^1.2.0",
     "d3-zoom": "^1.8.3",
-    "graphql": "^15.5.2",
+    "graphql": "^15.5.3",
     "graphql-tag": "^2.12.5",
     "iso8601-duration": "^1.3.0",
     "lodash-es": "^4.17.21",
@@ -74,7 +74,7 @@
     "@angular/compiler-cli": "~12.2.1",
     "@angular/language-service": "~12.2.1",
     "@commitlint/cli": "^12.1.4",
-    "@commitlint/config-conventional": "^12.1.4",
+    "@commitlint/config-conventional": "^13.1.0",
     "@compodoc/compodoc": "^1.1.14",
     "@ngneat/spectator": "^8.0.4",
     "@types/d3-array": "^2.9.0",
@@ -90,7 +90,7 @@
     "@types/d3-zoom": "^1.7.5",
     "@types/jest": "^26.0.24",
     "@types/lodash-es": "^4.17.4",
-    "@types/node": "^16.7.7",
+    "@types/node": "^16.7.10",
     "@types/uuid": "^8.3.1",
     "@types/webpack-env": "^1.16.2",
     "codelyzer": "^6.0.2",

package.json

@@ -46,6 +46,11 @@ $paginator-height: 48px;
   border: 1px solid $color-border;
 }
 
+@mixin frame-box-shadow {
+  border-radius: 10px;
+  box-shadow: 0 1px 3px rgba(63, 71, 74, 0.16), 0 2px 2px rgba(63, 71, 74, 0.12), 0 0 2px rgba(63, 71, 74, 0.16);
+}
+
 @mixin vertical-divider($height: 16px) {
   height: $height;
   margin: 0 2px;

projects/assets-library/assets/styles/_layout.scss

@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { ChangeDetectionStrategy, Component, EventEmitter, Input, OnInit, Output, TemplateRef } from '@angular/core';
 import { MatRadioChange } from '@angular/material/radio';
 import { LoggerService } from '@hypertrace/common';
 import { RadioOption } from './radio-option';
@@ -22,10 +22,16 @@ import { RadioOption } from './radio-option';
         [ngClass]="[this.optionsDirection, this.disabled ? 'disabled' : '']"
         [value]="option.value"
       >
-        <ht-label class="radio-button-label" [label]="option.label"></ht-label>
+        <ng-container
+          *ngTemplateOutlet="
+            this.isLabelAString(option.label) ? defaultLabel : option.label;
+            context: { $implicit: option.label }
+          "
+        ></ng-container>
         <span *ngIf="option.description" class="radio-button-description">{{ option.description }}</span>
       </mat-radio-button>
     </mat-radio-group>
+    <ng-template #defaultLabel let-label><ht-label class="radio-button-label" [label]="label"></ht-label></ng-template>
   `
 })
 export class RadioGroupComponent implements OnInit {
@@ -67,6 +73,10 @@ export class RadioGroupComponent implements OnInit {
     this.selected = this.options.find(option => option.value === event.value);
     this.selectedChange.emit(event.value);
   }
+
+  public isLabelAString(label: string | TemplateRef<unknown>): boolean {
+    return typeof label === 'string';
+  }
 }
 
 export const enum OptionsDirection {

projects/components/src/radio/radio-group.component.ts

@@ -1,5 +1,7 @@
+import { TemplateRef } from '@angular/core';
+
 export interface RadioOption {
   value: string;
-  label: string;
+  label: string | TemplateRef<unknown>;
   description?: string;
 }