feat(core/toggle): support for angular forms (#745)

Co-authored-by: Tiago Viegas <tiago.viegas@siemens.com>
siemens · Sep 19, 2023 · bba4a45 · bba4a45
1 parent 55a514a
commit bba4a45
Show file tree

Hide file tree

Showing 8 changed files with 65 additions and 6 deletions.
diff --git a/packages/angular-test-app/src/app/app-routing.module.ts b/packages/angular-test-app/src/app/app-routing.module.ts
@@ -112,7 +112,8 @@ import ToggleButtonSecondary from 'src/preview-examples/toggle-button-secondary'
 import ToggleButtonSecondaryGhost from 'src/preview-examples/toggle-button-secondary-ghost';
 import ToggleButtonSecondaryOutline from 'src/preview-examples/toggle-button-secondary-outline';
 import ToggleCustomLabel from 'src/preview-examples/toggle-custom-label';
-import ToggleCustomDisabled from 'src/preview-examples/toggle-disabled';
+import ToggleDisabled from 'src/preview-examples/toggle-disabled';
+import ToggleNgModel from 'src/preview-examples/toggle-ng-model';
 import Tooltip from 'src/preview-examples/tooltip';
 import TooltipTitle from 'src/preview-examples/tooltip-title';
 import Tree from 'src/preview-examples/tree';
@@ -329,8 +330,9 @@ const routes: Routes = [
         path: 'toggle-button-primary-outline',
         component: ToggleButtonPrimaryOutline,
       },
-      { path: 'toggle-disabled', component: ToggleCustomDisabled },
+      { path: 'toggle-disabled', component: ToggleDisabled },
       { path: 'toggle-custom-label', component: ToggleCustomLabel },
+      { path: 'toggle-ng-model', component: ToggleNgModel },
       { path: 'toggle', component: Toggle },
       { path: 'upload', component: Upload },
       { path: 'vertical-tabs-with-avatar', component: VerticalTabsWithAvatar },

diff --git a/packages/angular-test-app/src/app/app.module.ts b/packages/angular-test-app/src/app/app.module.ts
@@ -120,7 +120,8 @@ import ToggleButtonSecondary from 'src/preview-examples/toggle-button-secondary'
 import ToggleButtonSecondaryGhost from 'src/preview-examples/toggle-button-secondary-ghost';
 import ToggleButtonSecondaryOutline from 'src/preview-examples/toggle-button-secondary-outline';
 import ToggleCustomLabel from 'src/preview-examples/toggle-custom-label';
-import ToggleCustomDisabled from 'src/preview-examples/toggle-disabled';
+import ToggleDisabled from 'src/preview-examples/toggle-disabled';
+import ToggleNgModel from 'src/preview-examples/toggle-ng-model';
 import Tooltip from 'src/preview-examples/tooltip';
 import TooltipTitle from 'src/preview-examples/tooltip-title';
 import Tree from 'src/preview-examples/tree';
@@ -211,8 +212,9 @@ import { NavigationTestComponent } from './components/navigation-test.component'
     ToggleButtonSecondary,
     ToggleButtonSecondaryGhost,
     ToggleButtonSecondaryOutline,
-    ToggleCustomDisabled,
+    ToggleDisabled,
     ToggleCustomLabel,
+    ToggleNgModel,
     Toggle,
     Upload,
     VerticalTabsWithAvatar,

diff --git a/packages/angular-test-app/src/preview-examples/toggle-ng-model.ts b/packages/angular-test-app/src/preview-examples/toggle-ng-model.ts
@@ -0,0 +1,18 @@
+/*
+ * SPDX-FileCopyrightText: 2023 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-example',
+  template: ` <ix-toggle [(ngModel)]="checked"></ix-toggle>`,
+})
+export default class Toggle {
+  checked = false
+}
diff --git a/packages/angular/src/boolean-value-accessor.ts b/packages/angular/src/boolean-value-accessor.ts
@@ -0,0 +1,27 @@
+import { Directive, ElementRef } from '@angular/core';
+import { NG_VALUE_ACCESSOR } from '@angular/forms';
+
+import { ValueAccessor } from './value-accessor';
+
+@Directive({
+  /* tslint:disable-next-line:directive-selector */
+  selector: 'ix-toggle[ngModel],ix-toggle[formControlName],ix-toggle[formControl]',
+  host: {
+    '(checkedChange)': 'handleChangeEvent($event.target.checked)'
+  },
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: BooleanValueAccessor,
+      multi: true
+    }
+  ]
+})
+export class BooleanValueAccessor extends ValueAccessor {
+  constructor(el: ElementRef) {
+    super(el);
+  }
+  writeValue(value: any) {
+    this.el.nativeElement.checked = this.lastValue = value == null ? false : value;
+  }
+}
diff --git a/packages/angular/src/index.ts b/packages/angular/src/index.ts
@@ -8,11 +8,12 @@
  */
 
 export * from '@siemens/ix';
+export * from './boolean-value-accessor';
 export * from './components';
 export * from './dropdown/trigger.directive';
 export * from './modal';
 export * from './module';
+export * from './select-value-accessor';
 export * from './theme';
 export * from './toast';
 export * from './tree';
-export * from './select-value-accessor'
diff --git a/packages/angular/src/module.ts b/packages/angular/src/module.ts
@@ -19,6 +19,7 @@ import { DIRECTIVES } from './declare-components';
 import { IxDropdownTriggerDirective } from './dropdown/trigger.directive';
 import { ModalService } from './modal';
 import { SelectValueAccessor } from './select-value-accessor';
+import { BooleanValueAccessor } from './boolean-value-accessor';
 import { ThemeService } from './theme';
 import { ToastService } from './toast';
 import * as tree from './tree';
@@ -28,6 +29,7 @@ const DECLARATIONS = [
   tree.IxTree,
   IxDropdownTriggerDirective,
   SelectValueAccessor,
+  BooleanValueAccessor
 ];
 
 @NgModule({

diff --git a/packages/core/stencil.config.ts b/packages/core/stencil.config.ts
@@ -197,6 +197,13 @@ export const config: Config = {
           targetAttr: 'value',
           type: 'select',
         },
+        {
+          elementSelectors:
+            'ix-toggle[ngModel],ix-toggle[formControlName],ix-toggle[formControl]',
+          event: 'checkedChange',
+          targetAttr: 'checked',
+          type: 'boolean',
+        },
       ],
     }),
     reactOutputTarget({

diff --git a/packages/documentation/docs/controls/toggle.md b/packages/documentation/docs/controls/toggle.md
@@ -15,7 +15,7 @@ import SourceReactToggleDisabled from './../auto-generated/previews/react/toggle
 import SourceReactToggleChecked from './../auto-generated/previews/react/toggle-checked.md';
 import SourceReactToggleIndeterminate from './../auto-generated/previews/react/toggle-indeterminate.md';
 
-import SourceAngularToggle from './../auto-generated/previews/angular/toggle.ts.md';
+import SourceAngularToggle from './../auto-generated/previews/angular/toggle-ng-model.ts.md';
 import SourceAngularToggleLabel from './../auto-generated/previews/angular/toggle-custom-label.ts.md';
 import SourceAngularToggleDisabled from './../auto-generated/previews/angular/toggle-disabled.ts.md';
 import SourceAngularToggleChecked from './../auto-generated/previews/angular/toggle-checked.ts.md';