fix: toggle button group updates (#336)

* fix: toggle button group updates

Author: arjunlalb

projects/components/src/public-api.ts

@@ -253,7 +253,7 @@ export { TitledContentModule } from './titled-content/titled-content.module';
 
 // Toggle Button
 export { ToggleButtonComponent } from './toggle-button-group/button/toggle-button.component';
-export { ToggleButtonGroupComponent } from './toggle-button-group/toggle-button-group.component';
+export * from './toggle-button-group/toggle-button-group.component';
 export { ToggleButtonModule } from './toggle-button-group/toggle-button.module';
 export { ToggleViewMode } from './toggle-button-group/toggle-button';
 

projects/components/src/toggle-button-group/button/toggle-button.component.scss

@@ -71,11 +71,11 @@
   }
 
   .first {
-    border-radius: 4px 0px 0px 4px;
+    border-radius: 4px 0 0 4px;
   }
 
   .last {
-    border-radius: 0px 4px 4px 0px;
+    border-radius: 0 4px 4px 0;
     border-right: 1px solid $color-border;
   }
 }
@@ -85,8 +85,8 @@
 
   .button {
     @include body-1-medium;
-    border-radius: 4px;
-    padding: 0px 20px;
+    border-radius: 6px;
+    padding: 0 20px;
 
     &:not(.selected) {
       border: 1px solid $color-border;

projects/components/src/toggle-button-group/toggle-button-group.component.ts

@@ -21,7 +21,7 @@ import { ToggleButtonState, ToggleViewMode } from './toggle-button';
   providers: [SubscriptionLifecycle],
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: `
-    <div class="toggle-button-group">
+    <div class="toggle-button-group" [ngStyle]="{ 'justify-content': this.justifyContent }">
       <ng-content select="ht-toggle-button"></ng-content>
     </div>
   `
@@ -39,6 +39,9 @@ export class ToggleButtonGroupComponent implements OnChanges, AfterViewInit {
   @Input()
   public disableInitialSelection?: boolean;
 
+  @Input()
+  public justifyContent: ToggleButtonsJustifyMode = ToggleButtonsJustifyMode.Default;
+
   @Output()
   public readonly selectedLabelChange: EventEmitter<string> = new EventEmitter();
 
@@ -118,3 +121,8 @@ export class ToggleButtonGroupComponent implements OnChanges, AfterViewInit {
     this.buttons.forEach(button => button.setState(state));
   }
 }
+
+export enum ToggleButtonsJustifyMode {
+  SpaceBetween = 'space-between',
+  Default = 'initial'
+}