feat(switch): update samples content

live-editing/configs/SwitchConfigGenerator.ts

@@ -7,24 +7,44 @@ export class SwitchConfigGenerator implements IConfigGenerator {
     public generateConfigs(): Config[] {
         const configs = new Array<Config>();
 
-        // switch sample 1
+        // switch overview
         configs.push(new Config({
-            component: 'SwitchSample1Component',
+            component: 'SwitchOverviewComponent',
             appConfig: BaseAppConfig,
             shortenComponentPathBy: "/data-entries/switch/"
         }));
 
-        // switch sample 2
+        // switch enabled
         configs.push(new Config({
-            component: 'SwitchSample2Component',
+            component: 'SwitchEnabledComponent',
+            appConfig: BaseAppConfig,
+            shortenComponentPathBy: "/data-entries/switch/"
+        }));
+
+        // switch disabled
+        configs.push(new Config({
+            component: 'SwitchDisabledComponent',
+            appConfig: BaseAppConfig,
+            shortenComponentPathBy: "/data-entries/switch/"
+        }));
+
+        // switch selected
+        configs.push(new Config({
+            component: 'SwitchSelectedComponent',
+            appConfig: BaseAppConfig,
+            shortenComponentPathBy: "/data-entries/switch/"
+        }));
+
+        // switch layout
+        configs.push(new Config({
+            component: 'SwitchLayoutComponent',
             appConfig: BaseAppConfig,
             shortenComponentPathBy: "/data-entries/switch/"
         }));
 
         // switch styling
         configs.push(new Config({
             component: 'SwitchStylingComponent',
-            additionalFiles: ["/src/app/data-entries/switch/switch-styling/layout.scss"],
             appConfig: BaseAppConfig,
             shortenComponentPathBy: "/data-entries/switch/"
         }));

src/app/data-entries/data-entries-routes-data.ts

@@ -69,8 +69,11 @@ export const dataEntriesRoutesData = {
     "radio-styling-sample": { displayName: "Styling Radio Buttons", parentName: "Radio" },
     "radio-tailwind-styling-sample": { displayName: "Tailwind Styling Radio Buttons", parentName: "Radio" },
     "rating-form": { displayName: "Rating in Form", parentName: "Rating" },
-    "switch-sample-1": { displayName: "Switch Overview", parentName: "Switch" },
-    "switch-sample-2": { displayName: "Multiple Switches", parentName: "Switch" },
+    "switch-overview": { displayName: "Switch Overview", parentName: "Switch" },
+    "switch-enabled": { displayName: "Enabled Switches", parentName: "Switch" },
+    "switch-disabled": { displayName: "Disabled Switches", parentName: "Switch" },
+    "switch-selected": { displayName: "Selected Switches", parentName: "Switch" },
+    "switch-layout": { displayName: "Switch Label Position", parentName: "Switch" },
     "switch-styling": { displayName: "Styled Switches", parentName: "Switch" },
     "switch-tailwind-styling": { displayName: "Tailwind Styled Switches", parentName: "Switch" },
     "select-sample-1": { displayName: "Simple Select", parentName: "Select" },

src/app/data-entries/data-entries.routes.ts

@@ -67,8 +67,11 @@ import { SelectSample2Component } from './select/select-sample-2/select-sample-2
 import { SelectSample4Component } from './select/select-sample-4/select-sample-4.component';
 import { SelectStylingComponent } from './select/select-styling/select-styling.component';
 import { SelectTailwindStylingComponent } from './select/select-tailwind-styling/select-tailwind-styling.component';
-import { SwitchSample1Component } from './switch/switch-sample-1/switch-sample-1.component';
-import { SwitchSample2Component } from './switch/switch-sample-2/switch-sample-2.component';
+import { SwitchOverviewComponent } from './switch/switch-overview/switch-overview.component';
+import { SwitchEnabledComponent } from './switch/switch-enabled/switch-enabled.component';
+import { SwitchDisabledComponent } from './switch/switch-disabled/switch-disabled.component';
+import { SwitchSelectedComponent } from './switch/switch-selected/switch-selected.component';
+import { SwitchLayoutComponent } from './switch/switch-layout/switch-layout.component';
 import { SwitchStylingComponent } from './switch/switch-styling/switch-styling.component';
 import { SwitchTailwindStylingComponent } from './switch/switch-tailwind-styling/switch-tailwind-styling.component';
 import { RatingInFormComponent } from './rating/rating-form/rating-form.component';
@@ -427,14 +430,29 @@ export const DataEntriesRoutes: Routes = [
         path: 'rating-form'
     },
     {
-        component: SwitchSample1Component,
-        data: dataEntriesRoutesData['switch-sample-1'],
-        path: 'switch-sample-1'
+        component: SwitchOverviewComponent,
+        data: dataEntriesRoutesData['switch-overview'],
+        path: 'switch-overview'
     },
     {
-        component: SwitchSample2Component,
-        data: dataEntriesRoutesData['switch-sample-2'],
-        path: 'switch-sample-2'
+        component: SwitchEnabledComponent,
+        data: dataEntriesRoutesData['switch-enabled'],
+        path: 'switch-enabled'
+    },
+    {
+        component: SwitchDisabledComponent,
+        data: dataEntriesRoutesData['switch-disabled'],
+        path: 'switch-disabled'
+    },
+    {
+        component: SwitchSelectedComponent,
+        data: dataEntriesRoutesData['switch-selected'],
+        path: 'switch-selected'
+    },
+    {
+        component: SwitchLayoutComponent,
+        data: dataEntriesRoutesData['switch-layout'],
+        path: 'switch-layout'
     },
     {
         component: SwitchStylingComponent,

src/app/data-entries/switch/switch-bootstrap.scss

@@ -0,0 +1,65 @@
+@use "igniteui-angular/theming" as *;
+
+// Bootstrap switch geometry, aligned with the Bootstrap form-switch proportions.
+@mixin bootstrap-switch {
+    :host ::ng-deep igx-switch {
+        --switch-width: #{rem(32px)};
+        --switch-height: #{rem(16px)};
+        --switch-thumb-size: #{rem(9px)};
+        --switch-on-offset: #{rem(3px)};
+        --switch-off-offset: #{rem(3px)};
+
+        ::ng-deep {
+            .igx-switch__composite {
+                box-sizing: border-box;
+            }
+
+            .igx-switch__composite-thumb {
+                width: #{rem(9px)};
+                height: #{rem(9px)};
+                min-width: #{rem(9px)};
+                box-shadow: none;
+            }
+
+            .igx-switch__thumb {
+                width: #{rem(9px)};
+                height: #{rem(9px)};
+                min-width: #{rem(9px)};
+            }
+
+            .igx-switch__composite-thumb,
+            .igx-switch__thumb {
+                inline-size: #{rem(9px)};
+                block-size: #{rem(9px)};
+                min-inline-size: #{rem(9px)};
+                max-inline-size: #{rem(9px)};
+                min-block-size: #{rem(9px)};
+                max-block-size: #{rem(9px)};
+            }
+        }
+
+        &.igx-switch--checked:not(.igx-switch--disabled) ::ng-deep .igx-switch__composite-thumb {
+            transform: translateX(#{rem(18px)});
+        }
+
+        &.igx-switch--checked:not(.igx-switch--disabled) ::ng-deep .igx-switch__composite {
+            background: var(--ig-primary-500);
+        }
+
+        &.igx-switch--disabled ::ng-deep .igx-switch__composite-thumb {
+            transform: translateX(#{rem(3px)}) translateY(-1px);
+        }
+
+        &.igx-switch--disabled.igx-switch--checked ::ng-deep .igx-switch__composite-thumb {
+            transform: translateX(#{rem(18px)}) translateY(0);
+        }
+    }
+
+    :host ::ng-deep igx-switch.igx-switch--disabled.igx-switch--checked .igx-switch__composite-thumb {
+        transform: translateX(#{rem(18px)}) translateY(0);
+    }
+
+    :host ::ng-deep igx-switch:not(.igx-switch--disabled) {
+        --track-on-color: var(--ig-primary-500);
+    }
+}

src/app/data-entries/switch/switch-disabled/switch-disabled.component.html

@@ -0,0 +1,14 @@
+<div class="states">
+    <div class="states__variant">
+        <span class="states__label">Disabled Checked</span>
+        <igx-switch labelPosition="before" [disabled]="true" [checked]="true">
+            <span>Power</span>
+        </igx-switch>
+    </div>
+    <div class="states__variant">
+        <span class="states__label">Disabled Unchecked</span>
+        <igx-switch labelPosition="before" [disabled]="true">
+            <span>Power</span>
+        </igx-switch>
+    </div>
+</div>

src/app/data-entries/switch/switch-disabled/switch-disabled.component.scss

@@ -0,0 +1,38 @@
+@use "igniteui-angular/theming" as *;
+@use "sass:map";
+@use "../switch-bootstrap" as switch-bootstrap;
+
+@include switch-bootstrap.bootstrap-switch;
+
+:host {
+    display: flex;
+    min-block-size: 100%;
+    box-sizing: border-box;
+    place-content: center;
+    place-items: center;
+    padding: 16px;
+
+    @include tokens(switch-theme($schema: map.get($light-bootstrap-schema, switch)));
+}
+
+.states {
+    --variant-gap: 60px;
+    --label-gap: 30px;
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--variant-gap);
+
+    .states__variant {
+        display: flex;
+        align-items: center;
+        gap: var(--label-gap);
+    }
+
+    .states__label {
+        font: 500 14px / 24px "Aktiv Grotesk", sans-serif;
+        letter-spacing: 0.1px;
+        color: var(--ig-gray-600);
+    }
+}

src/app/data-entries/switch/switch-disabled/switch-disabled.component.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+import { IgxSwitchComponent } from 'igniteui-angular/switch';
+
+@Component({
+    selector: 'app-switch-disabled',
+    styleUrls: ['./switch-disabled.component.scss'],
+    templateUrl: './switch-disabled.component.html',
+    imports: [IgxSwitchComponent]
+})
+export class SwitchDisabledComponent { }

src/app/data-entries/switch/switch-enabled/switch-enabled.component.html

@@ -0,0 +1,28 @@
+<div class="states">
+    <span class="states__corner"></span>
+    <span class="states__column">Hover</span>
+    <span class="states__column">Focused</span>
+    <span class="states__column">Focused &amp; Hover</span>
+
+    <span class="states__row">Enabled / On</span>
+    <igx-switch labelPosition="before" [checked]="true">
+        <span>Power</span>
+    </igx-switch>
+    <igx-switch labelPosition="before" [checked]="true">
+        <span>Power</span>
+    </igx-switch>
+    <igx-switch labelPosition="before" [checked]="true">
+        <span>Power</span>
+    </igx-switch>
+
+    <span class="states__row">Enabled / Off</span>
+    <igx-switch labelPosition="before">
+        <span>Power</span>
+    </igx-switch>
+    <igx-switch labelPosition="before">
+        <span>Power</span>
+    </igx-switch>
+    <igx-switch labelPosition="before">
+        <span>Power</span>
+    </igx-switch>
+</div>

src/app/data-entries/switch/switch-enabled/switch-enabled.component.scss

@@ -0,0 +1,40 @@
+@use "igniteui-angular/theming" as *;
+@use "sass:map";
+@use "../switch-bootstrap" as switch-bootstrap;
+
+@include switch-bootstrap.bootstrap-switch;
+
+:host {
+    display: flex;
+    place-content: center;
+    place-items: center;
+    padding: 16px;
+
+    @include tokens(switch-theme($schema: map.get($light-bootstrap-schema, switch)));
+}
+
+.states {
+    display: grid;
+    grid-template-columns: repeat(4, auto);
+    align-items: center;
+    gap: 32px 24px;
+
+    .states__column,
+    .states__row {
+        font: 500 14px / 24px "Aktiv Grotesk", sans-serif;
+        letter-spacing: 0.1px;
+        color: var(--ig-gray-600);
+    }
+
+    .states__column {
+        text-align: center;
+    }
+
+    .states__row {
+        text-align: end;
+    }
+
+    igx-switch {
+        justify-self: center;
+    }
+}

src/app/data-entries/switch/switch-enabled/switch-enabled.component.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+import { IgxSwitchComponent } from 'igniteui-angular/switch';
+
+@Component({
+    selector: 'app-switch-enabled',
+    styleUrls: ['./switch-enabled.component.scss'],
+    templateUrl: './switch-enabled.component.html',
+    imports: [IgxSwitchComponent]
+})
+export class SwitchEnabledComponent { }

src/app/data-entries/switch/switch-layout/switch-layout.component.html

@@ -0,0 +1,14 @@
+<div class="variants">
+    <div class="variants__item">
+        <span class="variants__label">Label Before</span>
+        <igx-switch labelPosition="before" [checked]="true">
+            <span>Power</span>
+        </igx-switch>
+    </div>
+    <div class="variants__item">
+        <span class="variants__label">Label After</span>
+        <igx-switch labelPosition="after" [checked]="true">
+            <span>Power</span>
+        </igx-switch>
+    </div>
+</div>

src/app/data-entries/switch/switch-layout/switch-layout.component.scss

@@ -0,0 +1,39 @@
+@use "igniteui-angular/theming" as *;
+@use "sass:map";
+@use "../switch-bootstrap" as switch-bootstrap;
+
+@include switch-bootstrap.bootstrap-switch;
+
+:host {
+    display: flex;
+    min-block-size: 100%;
+    box-sizing: border-box;
+    place-content: center;
+    place-items: center;
+    padding: 16px;
+
+    @include tokens(switch-theme($schema: map.get($light-bootstrap-schema, switch)));
+}
+
+.variants {
+    --variant-gap: 60px;
+    --label-gap: 30px;
+
+    display: flex;
+    inline-size: 100%;
+    align-items: center;
+    justify-content: center;
+    gap: var(--variant-gap);
+
+    .variants__item {
+        display: flex;
+        align-items: center;
+        gap: var(--label-gap);
+    }
+
+    .variants__label {
+        font: 500 14px / 24px "Aktiv Grotesk", sans-serif;
+        letter-spacing: 0.1px;
+        color: var(--ig-gray-600);
+    }
+}

src/app/data-entries/switch/switch-layout/switch-layout.component.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+import { IgxSwitchComponent } from 'igniteui-angular/switch';
+
+@Component({
+    selector: 'app-switch-layout',
+    styleUrls: ['./switch-layout.component.scss'],
+    templateUrl: './switch-layout.component.html',
+    imports: [IgxSwitchComponent]
+})
+export class SwitchLayoutComponent { }