@syncfusion/ej2-angular-splitbuttons 20.1.55 → 20.2.36

package/src/progress-button/progressbutton-all.module.d.ts

@@ -1,5 +1,11 @@
+import * as i0 from "@angular/core";
+import * as i1 from "@angular/common";
+import * as i2 from "./progressbutton.module";
 /**
  * NgModule definition for the ProgressButton component with providers.
  */
 export declare class ProgressButtonAllModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<ProgressButtonAllModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<ProgressButtonAllModule, never, [typeof i1.CommonModule, typeof i2.ProgressButtonModule], [typeof i2.ProgressButtonModule]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<ProgressButtonAllModule>;
 }

package/src/progress-button/progressbutton.component.d.ts

@@ -1,6 +1,7 @@
 import { ElementRef, ViewContainerRef, Renderer2, Injector } from '@angular/core';
 import { IComponentBase } from '@syncfusion/ej2-angular-base';
 import { ProgressButton } from '@syncfusion/ej2-splitbuttons';
+import * as i0 from "@angular/core";
 export declare const inputs: string[];
 export declare const outputs: string[];
 export declare const twoWays: string[];
@@ -29,4 +30,6 @@ export declare class ProgressButtonComponent extends ProgressButton implements I
     ngAfterContentChecked(): void;
     registerEvents: (eventList: string[]) => void;
     addTwoWay: (propList: string[]) => void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ProgressButtonComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ProgressButtonComponent, "[ejs-progressbutton]", never, { "animationSettings": "animationSettings"; "content": "content"; "cssClass": "cssClass"; "disabled": "disabled"; "duration": "duration"; "enableHtmlSanitizer": "enableHtmlSanitizer"; "enableProgress": "enableProgress"; "iconCss": "iconCss"; "iconPosition": "iconPosition"; "isPrimary": "isPrimary"; "isToggle": "isToggle"; "spinSettings": "spinSettings"; }, { "begin": "begin"; "created": "created"; "end": "end"; "fail": "fail"; "progress": "progress"; }, never, ["*"]>;
 }

package/src/progress-button/progressbutton.module.d.ts

@@ -1,5 +1,11 @@
+import * as i0 from "@angular/core";
+import * as i1 from "./progressbutton.component";
+import * as i2 from "@angular/common";
 /**
  * NgModule definition for the ProgressButton component.
  */
 export declare class ProgressButtonModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<ProgressButtonModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<ProgressButtonModule, [typeof i1.ProgressButtonComponent], [typeof i2.CommonModule], [typeof i1.ProgressButtonComponent]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<ProgressButtonModule>;
 }

package/src/split-button/items.directive.d.ts

@@ -1,5 +1,6 @@
 import { ViewContainerRef } from '@angular/core';
 import { ComplexBase, ArrayBase } from '@syncfusion/ej2-angular-base';
+import * as i0 from "@angular/core";
 export declare class SplitButtonItemDirective extends ComplexBase<SplitButtonItemDirective> {
     private viewContainerRef;
     directivePropList: any;
@@ -35,6 +36,8 @@ export declare class SplitButtonItemDirective extends ComplexBase<SplitButtonIte
      */
     url: any;
     constructor(viewContainerRef: ViewContainerRef);
+    static ɵfac: i0.ɵɵFactoryDeclaration<SplitButtonItemDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<SplitButtonItemDirective, "e-splitbuttonitems>e-splitbuttonitem", never, { "disabled": "disabled"; "iconCss": "iconCss"; "id": "id"; "separator": "separator"; "text": "text"; "url": "url"; }, {}, never>;
 }
 /**
  * SplitButtonItem Array Directive
@@ -42,4 +45,6 @@ export declare class SplitButtonItemDirective extends ComplexBase<SplitButtonIte
  */
 export declare class SplitButtonItemsDirective extends ArrayBase<SplitButtonItemsDirective> {
     constructor();
+    static ɵfac: i0.ɵɵFactoryDeclaration<SplitButtonItemsDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<SplitButtonItemsDirective, "ejs-splitbutton>e-splitbuttonitems", never, {}, {}, ["children"]>;
 }

package/src/split-button/splitbutton-all.module.d.ts

@@ -1,5 +1,11 @@
+import * as i0 from "@angular/core";
+import * as i1 from "@angular/common";
+import * as i2 from "./splitbutton.module";
 /**
  * NgModule definition for the SplitButton component with providers.
  */
 export declare class SplitButtonAllModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<SplitButtonAllModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<SplitButtonAllModule, never, [typeof i1.CommonModule, typeof i2.SplitButtonModule], [typeof i2.SplitButtonModule]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<SplitButtonAllModule>;
 }

package/src/split-button/splitbutton.component.d.ts

@@ -2,6 +2,7 @@ import { ElementRef, ViewContainerRef, Renderer2, Injector, QueryList } from '@a
 import { IComponentBase } from '@syncfusion/ej2-angular-base';
 import { SplitButton } from '@syncfusion/ej2-splitbuttons';
 import { SplitButtonItemsDirective } from './items.directive';
+import * as i0 from "@angular/core";
 export declare const inputs: string[];
 export declare const outputs: string[];
 export declare const twoWays: string[];
@@ -35,4 +36,6 @@ export declare class SplitButtonComponent extends SplitButton implements ICompon
     ngAfterContentChecked(): void;
     registerEvents: (eventList: string[]) => void;
     addTwoWay: (propList: string[]) => void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SplitButtonComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SplitButtonComponent, "ejs-splitbutton", never, { "content": "content"; "createPopupOnClick": "createPopupOnClick"; "cssClass": "cssClass"; "disabled": "disabled"; "enableHtmlSanitizer": "enableHtmlSanitizer"; "enablePersistence": "enablePersistence"; "enableRtl": "enableRtl"; "iconCss": "iconCss"; "iconPosition": "iconPosition"; "items": "items"; "locale": "locale"; "target": "target"; }, { "beforeClose": "beforeClose"; "beforeItemRender": "beforeItemRender"; "beforeOpen": "beforeOpen"; "click": "click"; "close": "close"; "created": "created"; "open": "open"; "select": "select"; }, ["childItems"], ["*"]>;
 }

package/src/split-button/splitbutton.module.d.ts

@@ -1,5 +1,12 @@
+import * as i0 from "@angular/core";
+import * as i1 from "./splitbutton.component";
+import * as i2 from "./items.directive";
+import * as i3 from "@angular/common";
 /**
  * NgModule definition for the SplitButton component.
  */
 export declare class SplitButtonModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<SplitButtonModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<SplitButtonModule, [typeof i1.SplitButtonComponent, typeof i2.SplitButtonItemDirective, typeof i2.SplitButtonItemsDirective], [typeof i3.CommonModule], [typeof i1.SplitButtonComponent, typeof i2.SplitButtonItemDirective, typeof i2.SplitButtonItemsDirective]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<SplitButtonModule>;
 }

package/styles/bootstrap-dark.css

@@ -531,14 +531,6 @@
       flex-direction: row;
   position: relative;
 }
-*.e-btn-group input:focus + label.e-btn,
-*.e-btn-group .e-btn:focus,
-*.e-btn-group .e-btn:hover,
-*.e-css.e-btn-group input:focus + label.e-btn,
-*.e-css.e-btn-group .e-btn:focus,
-*.e-css.e-btn-group .e-btn:hover {
-  z-index: 2;
-}
 *.e-btn-group input + label.e-btn,
 *.e-css.e-btn-group input + label.e-btn {
   margin-bottom: 0;

package/styles/bootstrap.css

@@ -531,14 +531,6 @@
       flex-direction: row;
   position: relative;
 }
-*.e-btn-group input:focus + label.e-btn,
-*.e-btn-group .e-btn:focus,
-*.e-btn-group .e-btn:hover,
-*.e-css.e-btn-group input:focus + label.e-btn,
-*.e-css.e-btn-group .e-btn:focus,
-*.e-css.e-btn-group .e-btn:hover {
-  z-index: 2;
-}
 *.e-btn-group input + label.e-btn,
 *.e-css.e-btn-group input + label.e-btn {
   margin-bottom: 0;

package/styles/bootstrap4.css

@@ -514,14 +514,6 @@
       flex-direction: row;
   position: relative;
 }
-*.e-btn-group input:focus + label.e-btn,
-*.e-btn-group .e-btn:focus,
-*.e-btn-group .e-btn:hover,
-*.e-css.e-btn-group input:focus + label.e-btn,
-*.e-css.e-btn-group .e-btn:focus,
-*.e-css.e-btn-group .e-btn:hover {
-  z-index: 2;
-}
 *.e-btn-group input + label.e-btn,
 *.e-css.e-btn-group input + label.e-btn {
   margin-bottom: 0;

package/styles/bootstrap5-dark.css

@@ -69,6 +69,7 @@
 
 .e-dropdown-popup {
   position: absolute;
+  border-radius: 4px;
   margin-top: 2px;
 }
 .e-dropdown-popup ul {
@@ -148,6 +149,7 @@
 
 *.e-bigger .e-dropdown-popup {
   background-color: transparent;
+  border-radius: 4px;
 }
 
 *.e-bigger .e-dropdown-popup ul,
@@ -778,6 +780,7 @@
   outline: #6c757d 0 solid;
   outline-offset: 0;
   box-shadow: 0 0 0 4px rgba(130, 138, 145, 0.5);
+  border-color: #5c636a;
   outline-color: inherit;
 }
 .e-btn-group .e-btn:focus.e-primary,
@@ -789,6 +792,7 @@
   color: #fff;
   outline: #6c757d 0 solid;
   box-shadow: 0 0 0 4px rgba(49, 132, 253, 0.5);
+  border-color: #0b5ed7;
   outline-color: inherit;
 }
 .e-btn-group .e-btn:focus.e-success,
@@ -799,6 +803,7 @@
   border-color: #198754;
   color: #fff;
   box-shadow: 0 0 0 4px rgba(66, 190, 133, 0.5);
+  border-color: #157347;
   outline-color: inherit;
 }
 .e-btn-group .e-btn:focus.e-info,
@@ -809,6 +814,7 @@
   border-color: #0dcaf0;
   color: #000;
   box-shadow: 0 0 0 4px rgba(49, 210, 242, 0.5);
+  border-color: #31d2f2;
   outline-color: inherit;
 }
 .e-btn-group .e-btn:focus.e-warning,
@@ -819,6 +825,7 @@
   border-color: #ffc107;
   color: #000;
   box-shadow: 0 0 0 4px rgba(255, 202, 44, 0.5);
+  border-color: #ffca2c;
   outline-color: inherit;
 }
 .e-btn-group .e-btn:focus.e-danger,
@@ -829,6 +836,7 @@
   border-color: #dc3545;
   color: #fff;
   box-shadow: 0 0 0 4px rgba(232, 120, 131, 0.5);
+  border-color: #bb2d3b;
   outline-color: inherit;
 }
 .e-btn-group .e-btn:focus.e-link,
@@ -848,36 +856,42 @@
 .e-css.e-btn-group .e-btn:focus.e-outline,
 .e-css.e-btn-group input:focus + label.e-btn.e-outline {
   box-shadow: 0 0 0 4px rgba(130, 138, 145, 0.5);
+  border-color: #5c636a;
 }
 .e-btn-group .e-btn:focus.e-outline.e-primary,
 .e-btn-group input:focus + label.e-btn.e-outline.e-primary,
 .e-css.e-btn-group .e-btn:focus.e-outline.e-primary,
 .e-css.e-btn-group input:focus + label.e-btn.e-outline.e-primary {
   box-shadow: 0 0 0 4px rgba(49, 132, 253, 0.5);
+  border-color: #0d6efd;
 }
 .e-btn-group .e-btn:focus.e-outline.e-success,
 .e-btn-group input:focus + label.e-btn.e-outline.e-success,
 .e-css.e-btn-group .e-btn:focus.e-outline.e-success,
 .e-css.e-btn-group input:focus + label.e-btn.e-outline.e-success {
   box-shadow: 0 0 0 4px rgba(66, 190, 133, 0.5);
+  border-color: #157347;
 }
 .e-btn-group .e-btn:focus.e-outline.e-info,
 .e-btn-group input:focus + label.e-btn.e-outline.e-info,
 .e-css.e-btn-group .e-btn:focus.e-outline.e-info,
 .e-css.e-btn-group input:focus + label.e-btn.e-outline.e-info {
   box-shadow: 0 0 0 4px rgba(49, 210, 242, 0.5);
+  border-color: #31d2f2;
 }
 .e-btn-group .e-btn:focus.e-outline.e-warning,
 .e-btn-group input:focus + label.e-btn.e-outline.e-warning,
 .e-css.e-btn-group .e-btn:focus.e-outline.e-warning,
 .e-css.e-btn-group input:focus + label.e-btn.e-outline.e-warning {
   box-shadow: 0 0 0 4px rgba(255, 202, 44, 0.5);
+  border-color: #ffca2c;
 }
 .e-btn-group .e-btn:focus.e-outline.e-danger,
 .e-btn-group input:focus + label.e-btn.e-outline.e-danger,
 .e-css.e-btn-group .e-btn:focus.e-outline.e-danger,
 .e-css.e-btn-group input:focus + label.e-btn.e-outline.e-danger {
   box-shadow: 0 0 0 4px rgba(232, 120, 131, 0.5);
+  border-color: #bb2d3b;
 }
 .e-btn-group .e-btn:active,
 .e-btn-group input:active + label.e-btn,

package/styles/bootstrap5.css

@@ -69,6 +69,7 @@
 
 .e-dropdown-popup {
   position: absolute;
+  border-radius: 4px;
   margin-top: 2px;
 }
 .e-dropdown-popup ul {
@@ -148,6 +149,7 @@
 
 *.e-bigger .e-dropdown-popup {
   background-color: transparent;
+  border-radius: 4px;
 }
 
 *.e-bigger .e-dropdown-popup ul,
@@ -778,6 +780,7 @@
   outline: #6c757d 0 solid;
   outline-offset: 0;
   box-shadow: 0 0 0 4px rgba(130, 138, 145, 0.5);
+  border-color: #5c636a;
   outline-color: inherit;
 }
 .e-btn-group .e-btn:focus.e-primary,
@@ -789,6 +792,7 @@
   color: #fff;
   outline: #6c757d 0 solid;
   box-shadow: 0 0 0 4px rgba(49, 132, 253, 0.5);
+  border-color: #0b5ed7;
   outline-color: inherit;
 }
 .e-btn-group .e-btn:focus.e-success,
@@ -799,6 +803,7 @@
   border-color: #198754;
   color: #fff;
   box-shadow: 0 0 0 4px rgba(60, 153, 110, 0.5);
+  border-color: #157347;
   outline-color: inherit;
 }
 .e-btn-group .e-btn:focus.e-info,
@@ -809,6 +814,7 @@
   border-color: #0dcaf0;
   color: #000;
   box-shadow: 0 0 0 4px rgba(49, 210, 242, 0.5);
+  border-color: #31d2f2;
   outline-color: inherit;
 }
 .e-btn-group .e-btn:focus.e-warning,
@@ -819,6 +825,7 @@
   border-color: #ffc107;
   color: #000;
   box-shadow: 0 0 0 4px rgba(255, 202, 44, 0.5);
+  border-color: #ffca2c;
   outline-color: inherit;
 }
 .e-btn-group .e-btn:focus.e-danger,
@@ -829,6 +836,7 @@
   border-color: #dc3545;
   color: #fff;
   box-shadow: 0 0 0 4px rgba(225, 83, 97, 0.5);
+  border-color: #bb2d3b;
   outline-color: inherit;
 }
 .e-btn-group .e-btn:focus.e-link,
@@ -848,36 +856,42 @@
 .e-css.e-btn-group .e-btn:focus.e-outline,
 .e-css.e-btn-group input:focus + label.e-btn.e-outline {
   box-shadow: 0 0 0 4px rgba(130, 138, 145, 0.5);
+  border-color: #5c636a;
 }
 .e-btn-group .e-btn:focus.e-outline.e-primary,
 .e-btn-group input:focus + label.e-btn.e-outline.e-primary,
 .e-css.e-btn-group .e-btn:focus.e-outline.e-primary,
 .e-css.e-btn-group input:focus + label.e-btn.e-outline.e-primary {
   box-shadow: 0 0 0 4px rgba(49, 132, 253, 0.5);
+  border-color: #0d6efd;
 }
 .e-btn-group .e-btn:focus.e-outline.e-success,
 .e-btn-group input:focus + label.e-btn.e-outline.e-success,
 .e-css.e-btn-group .e-btn:focus.e-outline.e-success,
 .e-css.e-btn-group input:focus + label.e-btn.e-outline.e-success {
   box-shadow: 0 0 0 4px rgba(60, 153, 110, 0.5);
+  border-color: #157347;
 }
 .e-btn-group .e-btn:focus.e-outline.e-info,
 .e-btn-group input:focus + label.e-btn.e-outline.e-info,
 .e-css.e-btn-group .e-btn:focus.e-outline.e-info,
 .e-css.e-btn-group input:focus + label.e-btn.e-outline.e-info {
   box-shadow: 0 0 0 4px rgba(49, 210, 242, 0.5);
+  border-color: #31d2f2;
 }
 .e-btn-group .e-btn:focus.e-outline.e-warning,
 .e-btn-group input:focus + label.e-btn.e-outline.e-warning,
 .e-css.e-btn-group .e-btn:focus.e-outline.e-warning,
 .e-css.e-btn-group input:focus + label.e-btn.e-outline.e-warning {
   box-shadow: 0 0 0 4px rgba(255, 202, 44, 0.5);
+  border-color: #ffca2c;
 }
 .e-btn-group .e-btn:focus.e-outline.e-danger,
 .e-btn-group input:focus + label.e-btn.e-outline.e-danger,
 .e-css.e-btn-group .e-btn:focus.e-outline.e-danger,
 .e-css.e-btn-group input:focus + label.e-btn.e-outline.e-danger {
   box-shadow: 0 0 0 4px rgba(225, 83, 97, 0.5);
+  border-color: #bb2d3b;
 }
 .e-btn-group .e-btn:active,
 .e-btn-group input:active + label.e-btn,

package/styles/button-group/_all.scss

@@ -0,0 +1,2 @@
+@import 'layout.scss';
+@import 'theme.scss';

package/styles/button-group/_bootstrap-dark-definition.scss

@@ -0,0 +1,32 @@
+//default 
+$btn-grp-margin: -1px !default;
+$btn-grp-margin-left: -1px !default;
+$btn-grp-wrapper-border: 4px !default;
+$btn-grp-round-radius: 20px !default;
+$btn-grp-icon-font-size: 12px !default;
+$btn-grp-icon-font-size-bigger: 14px !default;
+
+//Normal Outline GroupButton
+$btn-grp-outline-focus-border-color: $grey-8c !default;
+$btn-grp-outline-focus-color: inherit !default;
+
+//Outline Primary
+$btn-grp-outline-primary-focus-border-color: $brand-primary-lighten-15 !default;
+$btn-grp-outline-focus-primary-color: inherit !default;
+
+//Outline Success
+$btn-grp-outline-success-focus-border-color: inherit !default;
+$btn-grp-outline-focus-success-color: inherit !default;
+
+//Outline Info
+$btn-grp-outline-info-focus-border-color: inherit !default;
+$btn-grp-outline-focus-info-color: inherit !default;
+
+//Outline warning
+$btn-grp-outline-warning-focus-border-color: inherit !default;
+$btn-grp-outline-focus-warning-color: inherit !default;
+
+//Outline danger
+$btn-grp-outline-danger-focus-border-color:  inherit !default;
+$btn-grp-outline-focus-danger-color: inherit !default;
+//enddefault

package/styles/button-group/_bootstrap-definition.scss

@@ -0,0 +1,30 @@
+$btn-grp-margin: -1px !default;
+$btn-grp-margin-left: -1px !default;
+$btn-grp-wrapper-border: 4px !default;
+$btn-grp-round-radius: 20px !default;
+$btn-grp-icon-font-size: 12px !default;
+$btn-grp-icon-font-size-bigger: 14px !default;
+
+//Normal Outline GroupButton
+$btn-grp-outline-focus-border-color: $grey-8c !default;
+$btn-grp-outline-focus-color: inherit !default;
+
+//Outline Primary
+$btn-grp-outline-primary-focus-border-color: $brand-primary-darken-35 !default;
+$btn-grp-outline-focus-primary-color: inherit !default;
+
+//Outline Success
+$btn-grp-outline-success-focus-border-color: $btn-success-focus-border-color !default;
+$btn-grp-outline-focus-success-color: inherit !default;
+
+//Outline Info
+$btn-grp-outline-info-focus-border-color: $btn-info-focus-border-color !default;
+$btn-grp-outline-focus-info-color: inherit !default;
+
+//Outline warning
+$btn-grp-outline-warning-focus-border-color: $btn-warning-focus-border-color !default;
+$btn-grp-outline-focus-warning-color: inherit !default;
+
+//Outline danger
+$btn-grp-outline-danger-focus-border-color: $btn-danger-focus-border-color !default;
+$btn-grp-outline-focus-danger-color: inherit !default;

package/styles/button-group/_bootstrap4-definition.scss

@@ -0,0 +1,30 @@
+$btn-grp-margin: -1px !default;
+$btn-grp-margin-left: -1px !default;
+$btn-grp-wrapper-border: 4px !default;
+$btn-grp-round-radius: 20px !default;
+$btn-grp-icon-font-size: 14px !default;
+$btn-grp-icon-font-size-bigger: 16px !default;
+
+//Normal Outline GroupButton
+$btn-grp-outline-focus-border-color: $gray-600 !default;
+$btn-grp-outline-focus-color: inherit !default;
+
+//Outline Primary
+$btn-grp-outline-primary-focus-border-color: $primary !default;
+$btn-grp-outline-focus-primary-color: inherit !default;
+
+//Outline Success
+$btn-grp-outline-success-focus-border-color: $btn-success-focus-border-color !default;
+$btn-grp-outline-focus-success-color: inherit !default;
+
+//Outline Info
+$btn-grp-outline-info-focus-border-color: $btn-info-focus-border-color !default;
+$btn-grp-outline-focus-info-color: inherit !default;
+
+//Outline warning
+$btn-grp-outline-warning-focus-border-color: $btn-warning-focus-border-color !default;
+$btn-grp-outline-focus-warning-color: inherit !default;
+
+//Outline danger
+$btn-grp-outline-danger-focus-border-color: $btn-danger-focus-border-color !default;
+$btn-grp-outline-focus-danger-color: inherit !default;

package/styles/button-group/_bootstrap5-dark-definition.scss

@@ -0,0 +1 @@
+@import './bootstrap5-definition.scss';

package/styles/button-group/_bootstrap5-definition.scss

@@ -0,0 +1,31 @@
+//layout variables
+$btn-grp-margin: -1px !default;
+$btn-grp-margin-left: -1px !default;
+$btn-grp-wrapper-border: 4px !default;
+$btn-grp-round-radius: 20px !default;
+$btn-grp-icon-font-size: 16px !default;
+$btn-grp-icon-font-size-bigger: 20px !default;
+
+//Normal Outline GroupButton
+$btn-grp-outline-focus-border-color: $secondary-border-color !default;
+$btn-grp-outline-focus-color: inherit !default;
+
+//Outline Primary
+$btn-grp-outline-primary-focus-border-color: $primary !default;
+$btn-grp-outline-focus-primary-color: inherit !default;
+
+//Outline Success
+$btn-grp-outline-success-focus-border-color: $btn-success-focus-border-color !default;
+$btn-grp-outline-focus-success-color: inherit !default;
+
+//Outline Info
+$btn-grp-outline-info-focus-border-color: $btn-info-focus-border-color !default;
+$btn-grp-outline-focus-info-color: inherit !default;
+
+//Outline warning
+$btn-grp-outline-warning-focus-border-color: $btn-warning-focus-border-color !default;
+$btn-grp-outline-focus-warning-color: inherit !default;
+
+//Outline danger
+$btn-grp-outline-danger-focus-border-color: $btn-danger-focus-border-color !default;
+$btn-grp-outline-focus-danger-color: inherit !default;

package/styles/button-group/_fabric-dark-definition.scss

@@ -0,0 +1,32 @@
+//default 
+$btn-grp-margin: -1px !default;
+$btn-grp-margin-left: 0 !default;
+$btn-grp-wrapper-border: 0 !default;
+$btn-grp-round-radius: 20px !default;
+$btn-grp-icon-font-size: 14px !default;
+$btn-grp-icon-font-size-bigger: 16px !default;
+
+//Normal Outline GroupButton
+$btn-grp-outline-focus-border-color: $neutral-quintenary !default;
+$btn-grp-outline-focus-color: $neutral-secondary-alt !default;
+
+//Outline Primary
+$btn-grp-outline-primary-focus-border-color: inherit !default;
+$btn-grp-outline-focus-primary-color: $btn-primary-active-color !default;
+
+//Outline Success
+$btn-grp-outline-success-focus-border-color: inherit !default;
+$btn-grp-outline-focus-success-color: $btn-success-active-color !default;
+
+//Outline Info
+$btn-grp-outline-info-focus-border-color: inherit !default;
+$btn-grp-outline-focus-info-color: $btn-info-active-color !default;
+
+//Outline warning
+$btn-grp-outline-warning-focus-border-color: inherit !default;
+$btn-grp-outline-focus-warning-color: $btn-warning-active-color !default;
+
+//Outline danger
+$btn-grp-outline-danger-focus-border-color:  inherit !default;
+$btn-grp-outline-focus-danger-color: $btn-danger-active-color !default;
+//enddefault

package/styles/button-group/_fabric-definition.scss

@@ -0,0 +1,30 @@
+$btn-grp-margin: -1px !default;
+$btn-grp-margin-left: 0 !default;
+$btn-grp-wrapper-border: 0 !default;
+$btn-grp-round-radius: 20px !default;
+$btn-grp-icon-font-size: 14px !default;
+$btn-grp-icon-font-size-bigger: 16px !default;
+
+//Normal Outline GroupButton
+$btn-grp-outline-focus-border-color: $neutral-quintenary !default;
+$btn-grp-outline-focus-color: $neutral-secondary-alt !default;
+
+//Outline Primary
+$btn-grp-outline-primary-focus-border-color: inherit !default;
+$btn-grp-outline-focus-primary-color: $theme-primary-font !default;
+
+//Outline Success
+$btn-grp-outline-success-focus-border-color: inherit !default;
+$btn-grp-outline-focus-success-color: #fff !default;
+
+//Outline Info
+$btn-grp-outline-info-focus-border-color: inherit !default;
+$btn-grp-outline-focus-info-color: #fff !default;
+
+//Outline warning
+$btn-grp-outline-warning-focus-border-color: inherit !default;
+$btn-grp-outline-focus-warning-color: #fff !default;
+
+//Outline danger
+$btn-grp-outline-danger-focus-border-color:  inherit !default;
+$btn-grp-outline-focus-danger-color: #fff !default;

package/styles/button-group/_fluent-dark-definition.scss

@@ -0,0 +1 @@
+@import './fluent-definition.scss';

package/styles/button-group/_fluent-definition.scss

@@ -0,0 +1,31 @@
+//layout variables
+$btn-grp-margin: -1px !default;
+$btn-grp-margin-left: -1px !default;
+$btn-grp-wrapper-border: 4px !default;
+$btn-grp-round-radius: 20px !default;
+$btn-grp-icon-font-size: 16px !default;
+$btn-grp-icon-font-size-bigger: 20px !default;
+
+//Normal Outline GroupButton
+$btn-grp-outline-focus-border-color: $secondary-border-color !default;
+$btn-grp-outline-focus-color: inherit !default;
+
+//Outline Primary
+$btn-grp-outline-primary-focus-border-color: $primary !default;
+$btn-grp-outline-focus-primary-color: inherit !default;
+
+//Outline Success
+$btn-grp-outline-success-focus-border-color: $btn-success-focus-border-color !default;
+$btn-grp-outline-focus-success-color: inherit !default;
+
+//Outline Info
+$btn-grp-outline-info-focus-border-color: $btn-info-focus-border-color !default;
+$btn-grp-outline-focus-info-color: inherit !default;
+
+//Outline warning
+$btn-grp-outline-warning-focus-border-color: $btn-warning-focus-border-color !default;
+$btn-grp-outline-focus-warning-color: inherit !default;
+
+//Outline danger
+$btn-grp-outline-danger-focus-border-color: $btn-danger-focus-border-color !default;
+$btn-grp-outline-focus-danger-color: inherit !default;

package/styles/button-group/_fusionnew-definition.scss

@@ -0,0 +1,31 @@
+//layout variables
+$btn-grp-margin: -1px !default;
+$btn-grp-margin-left: -1px !default;
+$btn-grp-wrapper-border: 4px !default;
+$btn-grp-round-radius: 20px !default;
+$btn-grp-icon-font-size: 16px !default;
+$btn-grp-icon-font-size-bigger: 20px !default;
+
+//Normal Outline GroupButton
+$btn-grp-outline-focus-border-color: $secondary-border-color !default;
+$btn-grp-outline-focus-color: inherit !default;
+
+//Outline Primary
+$btn-grp-outline-primary-focus-border-color: $primary !default;
+$btn-grp-outline-focus-primary-color: inherit !default;
+
+//Outline Success
+$btn-grp-outline-success-focus-border-color: $btn-success-focus-border-color !default;
+$btn-grp-outline-focus-success-color: inherit !default;
+
+//Outline Info
+$btn-grp-outline-info-focus-border-color: $btn-info-focus-border-color !default;
+$btn-grp-outline-focus-info-color: inherit !default;
+
+//Outline warning
+$btn-grp-outline-warning-focus-border-color: $btn-warning-focus-border-color !default;
+$btn-grp-outline-focus-warning-color: inherit !default;
+
+//Outline danger
+$btn-grp-outline-danger-focus-border-color: $btn-danger-focus-border-color !default;
+$btn-grp-outline-focus-danger-color: inherit !default;