Merge branch 'main' into copy-to-clipboard

Author: anandtiwary

package-lock.json

@@ -62,7 +62,7 @@
     "iso8601-duration": "^1.3.0",
     "lodash-es": "^4.17.21",
     "rxjs": "~6.6.7",
-    "tslib": "^2.2.0",
+    "tslib": "^2.3.0",
     "uuid": "^8.3.2",
     "zone.js": "^0.11.4"
   },
@@ -85,7 +85,7 @@
     "@types/d3-quadtree": "^1.0.7",
     "@types/d3-scale": "^2.1.1",
     "@types/d3-selection": "^1.4.2",
-    "@types/d3-shape": "^1.3.1",
+    "@types/d3-shape": "^2.1.0",
     "@types/d3-zoom": "^1.7.5",
     "@types/jest": "^26.0.23",
     "@types/lodash-es": "^4.17.4",

package.json

@@ -25,6 +25,7 @@ const iconsRootPath = 'assets/icons';
         { key: IconType.ArrowUpLeft, url: `${iconsRootPath}/arrow-up-left.svg` },
         { key: IconType.ArrowUpRight, url: `${iconsRootPath}/arrow-up-right.svg` },
         { key: IconType.CheckCircle, url: `${iconsRootPath}/check-circle.svg` },
+        { key: IconType.CheckCircleFill, url: `${iconsRootPath}/check-circle-fill.svg` },
         { key: IconType.ChevronDown, url: `${iconsRootPath}/chevron-down.svg` },
         { key: IconType.ChevronLeft, url: `${iconsRootPath}/chevron-left.svg` },
         { key: IconType.ChevronRight, url: `${iconsRootPath}/chevron-right.svg` },

projects/assets-library/assets/icons/check-circle-fill.svg

@@ -16,6 +16,7 @@ export const enum IconType {
   ArrowUpRight = 'svg:arrow-up-right',
   Cancel = 'cancel',
   CheckCircle = 'svg:check-circle',
+  CheckCircleFill = 'svg:check-circle-fill',
   Checkmark = 'checkmark',
   ChevronDown = 'svg:chevron-down',
   ChevronLeft = 'svg:chevron-left',

projects/assets-library/src/icons/icon-library.module.ts

@@ -3,7 +3,7 @@
 :host {
   ::ng-deep .mat-checkbox-checked .mat-checkbox-background,
   .mat-checkbox-indeterminate {
-    background-color: $blue-5;
+    background-color: $blue-4;
   }
 
   ::ng-deep .mat-checkbox-disabled {
@@ -13,13 +13,14 @@
 
     &.mat-checkbox-checked .mat-checkbox-background,
     .mat-checkbox-indeterminate {
+      background-color: $gray-5;
       opacity: 0.4;
       cursor: not-allowed;
     }
   }
 
   ::ng-deep .mat-checkbox:not(.mat-checkbox-disabled) .mat-checkbox-ripple .mat-ripple-element {
-    background-color: $blue-5;
+    background-color: $blue-4;
   }
 }
 

projects/assets-library/src/icons/icon-type.ts

@@ -12,6 +12,7 @@ import { MatCheckboxChange } from '@angular/material/checkbox';
       [disabled]="this.disabled"
       (change)="onCheckboxChange($event)"
       class="ht-checkbox"
+      [ngClass]="{ disabled: this.disabled }"
     >
       <ht-label class="label" *ngIf="this.label !== undefined && this.label !== ''" [label]="this.label"></ht-label>
     </mat-checkbox>

projects/components/src/checkbox/checkbox.component.scss

@@ -35,7 +35,12 @@ import { NavigableTab } from '../../tabs/navigable/navigable-tab';
       <ng-content></ng-content>
 
       <ht-navigable-tab-group *ngIf="this.tabs?.length" class="tabs">
-        <ht-navigable-tab *ngFor="let tab of this.tabs" [path]="tab.path" [hidden]="tab.hidden">
+        <ht-navigable-tab
+          *ngFor="let tab of this.tabs"
+          [path]="tab.path"
+          [hidden]="tab.hidden"
+          [features]="tab.features"
+        >
           {{ tab.label }}
         </ht-navigable-tab>
       </ht-navigable-tab-group>

projects/components/src/checkbox/checkbox.component.ts

@@ -4,6 +4,7 @@ export const enum IconSize {
   Medium = 'medium',
   Large = 'large',
   ExtraLarge = 'extra-large',
+  ExtraLarger = 'extra-larger',
   Hodor = 'hodor',
   Inherit = 'inherit'
 }

projects/components/src/header/page/page-header.component.ts

@@ -35,6 +35,12 @@
     width: 32px;
   }
 
+  &.extra-larger {
+    font-size: 48px;
+    height: 48px;
+    width: 48px;
+  }
+
   &.hodor {
     font-size: 64px;
     height: 64px;