Feat/button toggle

commitlint.config.js

@@ -9,6 +9,7 @@ module.exports = {
                 'badge',
                 'build',
                 'button',
+                'button-toggle',
                 'ci',
                 'cdk',
                 'card',

package.json

@@ -157,6 +157,7 @@
         "server-dev:alert": "npm run server-dev -- --env.component alert",
         "server-dev:badge": "npm run server-dev -- --env.component badge",
         "server-dev:button": "npm run server-dev -- --env.component button",
+        "server-dev:button-toggle": "npm run server-dev -- --env.component button-toggle",
         "server-dev:card": "npm run server-dev -- --env.component card",
         "server-dev:cdk-vscroll-custom-strategy": "npm run server-dev -- --env.component cdk-virtual-scroll-custom-strategy",
         "server-dev:cdk-vscroll-data-source": "npm run server-dev -- --env.component cdk-virtual-scroll-data-source",

src/dev-app/system-config.ts

@@ -61,6 +61,7 @@ System.config({
         '@ptsecurity/mosaic': 'dist/packages/mosaic/index.js',
 
         '@ptsecurity/mosaic/button': 'dist/packages/mosaic/button/index.js',
+        '@ptsecurity/mosaic/button-toggle': 'dist/packages/mosaic/button-toggle/index.js',
         '@ptsecurity/mosaic/core': 'dist/packages/mosaic/core/index.js',
         '@ptsecurity/mosaic/card': 'dist/packages/mosaic/card/index.js',
         '@ptsecurity/mosaic/datepicker': 'dist/packages/mosaic/datepicker/index.js',

src/lib-dev/all/module.ts

@@ -8,6 +8,7 @@ import { BrowserModule } from '@angular/platform-browser';
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
 import { CdkTreeModule, FlatTreeControl, NestedTreeControl } from '@ptsecurity/cdk/tree';
 import { McButtonModule } from '@ptsecurity/mosaic/button';
+import { McButtonToggleModule } from '@ptsecurity/mosaic/button-toggle';
 
 import { McCardModule } from '@ptsecurity/mosaic/card';
 import { McCheckboxModule } from '@ptsecurity/mosaic/checkbox';
@@ -54,6 +55,8 @@ export class DemoComponent {
     disabled: boolean = false;
     labelPosition = 'after';
 
+    buttonToggleModelResult: string;
+
     typesOfShoes = ['Boots', 'Clogs', 'Loafers', 'Moccasins', 'Sneakers'];
 
     folders = [
@@ -194,6 +197,7 @@ export class DemoComponent {
         ReactiveFormsModule,
         McIconModule,
         McButtonModule,
+        McButtonToggleModule,
         McLinkModule,
         McCardModule,
         McCheckboxModule,

src/lib-dev/all/template.html

@@ -101,6 +101,133 @@ <h1>Button</h1>
         <button class="cdk-keyboard-focused" mc-icon-button color="error"><i mc-icon="mc-play_16"></i>focus</button>&nbsp;
     </div>
 
+    <div class="dev-box">
+        <h1>Button-Toggle</h1>
+
+        <label>Horizontal Group</label>
+        <mc-button-toggle-group #group1="mcButtonToggleGroup">
+            <mc-button-toggle value="1">
+                default 1
+            </mc-button-toggle>
+            <mc-button-toggle value="2">
+                default 2
+            </mc-button-toggle>
+            <mc-button-toggle value="3">
+                default 3
+            </mc-button-toggle>
+            <mc-button-toggle value="4" disabled>
+                default 4
+            </mc-button-toggle>
+            <mc-button-toggle value="5">
+                <i mc-icon="mc-angle-down-L_16"></i>
+            </mc-button-toggle>
+            <mc-button-toggle value="6">
+                default 6
+            </mc-button-toggle>
+            <mc-button-toggle value="7">
+                <i mc-icon="mc-angle-down-L_16"></i>
+            </mc-button-toggle>
+        </mc-button-toggle-group>
+        <div class="example-selected-value">Selected value: {{group1.value}}</div>
+
+        <br>
+
+        <label>DisableGroup</label>
+
+        <br>
+
+        <button mc-button (click)="disabled = !disabled">Toggle Disabled</button>
+
+        <br>
+        <br>
+
+        <mc-button-toggle-group [disabled]="disabled" #disabledGroup="mcButtonToggleGroup">
+            <mc-button-toggle value="1">
+                default 1
+            </mc-button-toggle>
+            <mc-button-toggle value="2" disabled>
+                default 2
+            </mc-button-toggle>
+            <mc-button-toggle value="3">
+                default 3
+            </mc-button-toggle>
+            <mc-button-toggle value="4">
+                <i mc-icon="mc-angle-down-L_16"></i>
+            </mc-button-toggle>
+        </mc-button-toggle-group>
+        <div class="example-selected-value">Selected value: {{disabledGroup.value}}</div>
+
+        <br>
+
+        <label>Multiple Group</label>
+        <mc-button-toggle-group multiple #multipleGroup="mcButtonToggleGroup">
+            <mc-button-toggle value="1">
+                default 1
+            </mc-button-toggle>
+            <mc-button-toggle value="2" disabled>
+                default 2
+            </mc-button-toggle>
+            <mc-button-toggle value="3">
+                default
+            </mc-button-toggle>
+            <mc-button-toggle value="4">
+                <i mc-icon="mc-angle-down-L_16"></i>
+            </mc-button-toggle>
+        </mc-button-toggle-group>
+        <div class="example-selected-value">Selected value: {{multipleGroup.value}}</div>
+
+        <br>
+
+        <label>Standalone Toggle</label>
+
+        <br>
+
+        <mc-button-toggle value="123" #standAloneToggle="mcButtonToggle">
+            default
+        </mc-button-toggle>
+        <div class="example-selected-value">Selected value: {{standAloneToggle.checked}}</div>
+
+        <br>
+
+        <label>Vertical Group</label>
+
+        <mc-button-toggle-group #group3="mcButtonToggleGroup" [vertical]="true">
+            <mc-button-toggle value="1">
+                default 1
+            </mc-button-toggle>
+            <mc-button-toggle value="2" disabled>
+                default 2
+            </mc-button-toggle>
+            <mc-button-toggle value="3">
+                default 3
+            </mc-button-toggle>
+            <mc-button-toggle value="4">
+                <i mc-icon="mc-angle-down-L_16"></i>
+            </mc-button-toggle>
+        </mc-button-toggle-group>
+        <div class="example-selected-value">Selected value: {{group3.value}}</div>
+
+        <br>
+
+        <label>Group With Model</label>
+
+        <mc-button-toggle-group [(ngModel)]="buttonToggleModelResult">
+            <mc-button-toggle value="1">
+                default 1
+            </mc-button-toggle>
+            <mc-button-toggle value="2" disabled>
+                default 2
+            </mc-button-toggle>
+            <mc-button-toggle value="3">
+                default 3
+            </mc-button-toggle>
+            <mc-button-toggle value="4">
+                <i mc-icon="mc-angle-down-L_16"></i>
+            </mc-button-toggle>
+        </mc-button-toggle-group>
+        <div class="example-selected-value">Model result: {{buttonToggleModelResult}}</div>
+    </div>
+
     <div class="dev-box">
         <h1>Card</h1>
 

src/lib-dev/button-toggle/module.ts

@@ -0,0 +1,44 @@
+import { Component, NgModule, ViewEncapsulation } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { BrowserModule } from '@angular/platform-browser';
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+import { McIconModule } from '@ptsecurity/mosaic/icon';
+
+import { McButtonModule } from '../../lib/button';
+import { McButtonToggleModule } from '../../lib/button-toggle';
+
+
+@Component({
+    selector: 'app',
+    template: require('./template.html'),
+    styleUrls: ['./styles.scss'],
+    encapsulation: ViewEncapsulation.None
+})
+export class ButtonToggleDemoComponent {
+    modelResult: any;
+    disabled: boolean;
+}
+
+
+@NgModule({
+    declarations: [
+        ButtonToggleDemoComponent
+    ],
+    imports: [
+        BrowserModule,
+        McButtonModule,
+        McButtonToggleModule,
+        McIconModule,
+        FormsModule
+    ],
+    bootstrap: [
+        ButtonToggleDemoComponent
+    ]
+})
+export class ButtonToggleDemoModule {}
+
+platformBrowserDynamic()
+    .bootstrapModule(ButtonToggleDemoModule)
+    // tslint:disable-next-line:no-console
+    .catch((error) => console.error(error));
+

src/lib-dev/button-toggle/styles.scss

@@ -0,0 +1,4 @@
+@import '~@ptsecurity/mosaic-icons/dist/styles/mc-icons';
+
+// @import '../../lib/core/theming/prebuilt/default-theme';
+@import '../../lib/core/theming/prebuilt/dark-theme';

src/lib-dev/button-toggle/template.html

@@ -0,0 +1,124 @@
+<div>
+    <label>Horizontal Group</label>
+    <mc-button-toggle-group #group1="mcButtonToggleGroup">
+        <mc-button-toggle value="1">
+            default 1
+        </mc-button-toggle>
+        <mc-button-toggle value="2">
+            default 2
+        </mc-button-toggle>
+        <mc-button-toggle value="3">
+            default 3
+        </mc-button-toggle>
+        <mc-button-toggle value="4" disabled>
+            default 4
+        </mc-button-toggle>
+        <mc-button-toggle value="5">
+            <i mc-icon="mc-angle-down-L_16"></i>
+        </mc-button-toggle>
+        <mc-button-toggle value="6">
+            default 6
+        </mc-button-toggle>
+        <mc-button-toggle value="7">
+            <i mc-icon="mc-angle-down-L_16"></i>
+        </mc-button-toggle>
+    </mc-button-toggle-group>
+    <div class="example-selected-value">Selected value: {{group1.value}}</div>
+
+    <br>
+
+    <label>DisableGroup</label>
+
+    <br>
+
+    <button mc-button (click)="disabled = !disabled">Toggle Disabled</button>
+
+    <br>
+    <br>
+
+    <mc-button-toggle-group [disabled]="disabled" #disabledGroup="mcButtonToggleGroup">
+        <mc-button-toggle value="1">
+            default 1
+        </mc-button-toggle>
+        <mc-button-toggle value="2" disabled>
+            default 2
+        </mc-button-toggle>
+        <mc-button-toggle value="3">
+            default 3
+        </mc-button-toggle>
+        <mc-button-toggle value="4">
+            <i mc-icon="mc-angle-down-L_16"></i>
+        </mc-button-toggle>
+    </mc-button-toggle-group>
+    <div class="example-selected-value">Selected value: {{disabledGroup.value}}</div>
+
+    <br>
+
+    <label>Multiple Group</label>
+    <mc-button-toggle-group multiple #multipleGroup="mcButtonToggleGroup">
+        <mc-button-toggle value="1">
+            default 1
+        </mc-button-toggle>
+        <mc-button-toggle value="2" disabled>
+            default 2
+        </mc-button-toggle>
+        <mc-button-toggle value="3">
+            default 3
+        </mc-button-toggle>
+        <mc-button-toggle value="4">
+            <i mc-icon="mc-angle-down-L_16"></i>
+        </mc-button-toggle>
+    </mc-button-toggle-group>
+    <div class="example-selected-value">Selected value: {{multipleGroup.value}}</div>
+
+    <br>
+
+    <label>Standalone Toggle</label>
+
+    <br>
+
+    <mc-button-toggle value="123" #standAloneToggle="mcButtonToggle">
+        default
+    </mc-button-toggle>
+    <div class="example-selected-value">Selected value: {{standAloneToggle.checked}}</div>
+
+    <br>
+
+    <label>Vertical Group</label>
+
+    <mc-button-toggle-group #group3="mcButtonToggleGroup" [vertical]="true">
+        <mc-button-toggle value="1">
+            default 1
+        </mc-button-toggle>
+        <mc-button-toggle value="2" disabled>
+            default 2
+        </mc-button-toggle>
+        <mc-button-toggle value="3">
+            default 3
+        </mc-button-toggle>
+        <mc-button-toggle value="4">
+            <i mc-icon="mc-angle-down-L_16"></i>
+        </mc-button-toggle>
+    </mc-button-toggle-group>
+    <div class="example-selected-value">Selected value: {{group3.value}}</div>
+
+    <br>
+
+    <label>Group With Model</label>
+
+    <mc-button-toggle-group [(ngModel)]="modelResult">
+        <mc-button-toggle value="1">
+            default 1
+        </mc-button-toggle>
+        <mc-button-toggle value="2" disabled>
+            default 2
+        </mc-button-toggle>
+        <mc-button-toggle value="3">
+            default 3
+        </mc-button-toggle>
+        <mc-button-toggle value="4">
+            <i mc-icon="mc-angle-down-L_16"></i>
+        </mc-button-toggle>
+    </mc-button-toggle-group>
+    <div class="example-selected-value">Model result: {{modelResult}}</div>
+</div>