v16.4.42 is released

Author: pipeline

components/base/CHANGELOG.md

@@ -2,6 +2,14 @@
 
 ## [Unreleased]
 
+## 16.4.42 (2018-12-10)
+
+### Common
+
+#### Bug Fixes
+
+- Fixed ng-dirty class adding issue when patching object value to control.
+
 ## 16.3.17 (2018-09-12)
 
 ### Common

components/base/dist/ej2-angular-base.umd.min.js

@@ -1,6 +1,6 @@
 {
 	"name": "@syncfusion/ej2-angular-base",
-	"version": "16.3.21",
+	"version": "16.4.40-beta",
 	"description": "A common package of Essential JS 2 base Angular libraries, methods and class definitions",
 	"author": "Syncfusion Inc.",
 	"license": "SEE LICENSE IN license",

components/base/dist/ej2-angular-base.umd.min.js.map

@@ -140,6 +140,16 @@ describe('Form Base Coverage Test', () => {
         formCmpt.writeValue(formCmpt.value);
         expect(formCmpt.angularValue).toBe('name');
     });
+    it("checking value type, if obj type do stringify", () => {
+        let formCmpt: FormBase<any> = new FormBase();
+        formCmpt.value = { value: { check: 'hello' } };
+        formCmpt.writeValue(formCmpt.value);
+        formCmpt.localChange(formCmpt.value);
+        let check = formCmpt.objCheck;
+        let stringy = JSON.stringify(formCmpt.value.value);
+        expect(check).toBe(true);
+        expect(stringy).toBe(formCmpt.duplicateValue);
+    });
     it("test for setDisableState", () => {
         let formCmpt: FormBase<any> = new FormBase();
         formCmpt.setDisabledState(true);

components/base/dist/es6/ej2-angular-base.es2015.js

@@ -1,5 +1,5 @@
 import { EventEmitter, ElementRef } from '@angular/core';
-import { getValue, setValue, isNullOrUndefined } from '@syncfusion/ej2-base';
+import { getValue, setValue, isNullOrUndefined, isObject } from '@syncfusion/ej2-base';
 import { ControlValueAccessor } from '@angular/forms';
 /**
  * Angular Form Base Module
@@ -13,6 +13,9 @@ export class FormBase<T> implements ControlValueAccessor {
     public propagateTouch(): void { return; }
     public enabled: Object;
     public angularValue: T;
+    public objCheck: Boolean;
+    public duplicateValue: string;
+    public duplicateAngularValue: string;
 
     public element: HTMLElement;
     public inputElement: HTMLInputElement;
@@ -24,10 +27,21 @@ export class FormBase<T> implements ControlValueAccessor {
 
     public localChange(e: { value?: T, checked?: T }): void {
         let value: T = (e.checked === undefined ? e.value : e.checked);
-        if (value !== this.angularValue && this.propagateChange !== undefined && value !== undefined) {
-            // Update angular from our control
-            this.propagateChange(value);
-            this.angularValue = value;
+        this.objCheck = isObject(value);
+        if (this.objCheck === true) {
+            this.duplicateValue = JSON.stringify(value);
+            this.duplicateAngularValue = JSON.stringify(this.angularValue);
+            if (this.duplicateValue !== this.duplicateAngularValue && this.propagateChange !== undefined && value !== undefined) {
+                // Update angular from our control
+                this.propagateChange(value);
+                this.angularValue = value;
+            }
+        } else {
+            if (value !== this.angularValue && this.propagateChange !== undefined && value !== undefined) {
+                // Update angular from our control
+                this.propagateChange(value);
+                this.angularValue = value;
+            }
         }
     }
 

components/base/dist/es6/ej2-angular-base.es2015.js.map

@@ -1,6 +1,6 @@
 {
 	"name": "@syncfusion/ej2-angular-buttons",
-	"version": "16.2.41",
+	"version": "16.4.40",
 	"description": "A package of feature-rich Essential JS 2 components such as Button, CheckBox, RadioButton and Switch. for Angular",
 	"author": "Syncfusion Inc.",
 	"license": "SEE LICENSE IN license",

components/base/dist/es6/ej2-angular-base.es5.js

@@ -0,0 +1,8 @@
+import { Rule } from '@angular-devkit/schematics';
+import { componentBuilder } from "@syncfusion/ej2-angular-base/schematics";
+import { Schema } from './schema';
+import * as sampleDetails from './sample-details';
+
+export default function (options: Schema): Rule {
+  return componentBuilder(options, sampleDetails);
+}

components/base/dist/es6/ej2-angular-base.es5.js.map

@@ -0,0 +1,5 @@
+export const componentName: string = 'button';
+export const sampleName: string = 'default';
+export const diModules: string =  null;
+export const packageName: string = '@syncfusion/ej2-angular-buttons';
+export const libModules: string = 'ButtonModule';

components/base/dist/global/ej2-angular-base.min.js

@@ -0,0 +1,26 @@
+import { Component, ViewChild } from '@angular/core';
+import { ButtonComponent } from '@syncfusion/ej2-angular-buttons';
+/**
+ * Default Button Controller
+ */
+@Component({
+    selector: '<%=dasherize(selector)%>',
+    templateUrl: '<%=dasherize(name)%>.component.html',
+    styleUrls: ['<%=dasherize(name)%>.component.css']
+})
+
+export class <%= classify(name) %>Component {
+    @ViewChild('toggleBtn')
+    public toggleBtn: ButtonComponent;
+
+    // Toggle button click event handler
+    private btnClick(): void {
+        if (this.toggleBtn.element.classList.contains('e-active')) {
+            this.toggleBtn.content = 'Play';
+            this.toggleBtn.iconCss = 'e-btn-sb-icons e-play-icon';
+        } else {
+            this.toggleBtn.content = 'Pause';
+            this.toggleBtn.iconCss = 'e-btn-sb-icons e-pause-icon';
+        }
+    }
+}

components/base/dist/global/ej2-angular-base.min.js.map

@@ -0,0 +1,3 @@
+import { Schema as ComponentSchema } from '@schematics/angular/component/schema';
+
+export interface Schema extends ComponentSchema { }

components/base/package.json

@@ -0,0 +1,8 @@
+import { Rule } from '@angular-devkit/schematics';
+import { componentBuilder } from "@syncfusion/ej2-angular-base/schematics";
+import { Schema } from './schema';
+import * as sampleDetails from './sample-details';
+
+export default function (options: Schema): Rule {
+  return componentBuilder(options, sampleDetails);
+}

components/base/spec/form-base.spec.ts

@@ -0,0 +1,5 @@
+export const componentName: string = 'checkbox';
+export const sampleName: string = 'default';
+export const diModules: string =  null;
+export const packageName: string = '@syncfusion/ej2-angular-buttons';
+export const libModules: string = 'CheckBoxModule';

components/base/src/form-base.ts

@@ -0,0 +1,21 @@
+import { Component, ViewChild } from '@angular/core';
+import { CheckBoxComponent } from '@syncfusion/ej2-angular-buttons';
+
+/**
+ * CheckBox Controller
+ */
+@Component({
+    selector: '<%=dasherize(selector)%>',
+    templateUrl: '<%=dasherize(name)%>.component.html',
+    styleUrls: ['<%=dasherize(name)%>.component.css']
+})
+
+export class <%= classify(name) %>Component {
+    @ViewChild('checkbox')
+    public checkbox: CheckBoxComponent;
+
+    // function to handle the CheckBox change event
+    public changeHandler(): void {
+        this.checkbox.label = 'CheckBox: ' + this.checkbox.checked;
+    }
+ }

components/buttons/package.json

@@ -0,0 +1,3 @@
+import { Schema as ComponentSchema } from '@schematics/angular/component/schema';
+
+export interface Schema extends ComponentSchema { }

components/buttons/schematics/generators/button-default/index.ts

@@ -0,0 +1,8 @@
+import { Rule } from '@angular-devkit/schematics';
+import { componentBuilder } from "@syncfusion/ej2-angular-base/schematics";
+import { Schema } from './schema';
+import * as sampleDetails from './sample-details';
+
+export default function (options: Schema): Rule {
+  return componentBuilder(options, sampleDetails);
+}

components/buttons/schematics/generators/button-default/sample-details.ts

@@ -0,0 +1,5 @@
+export const componentName: string = 'radiobutton';
+export const sampleName: string = 'default';
+export const diModules: string =  null;
+export const packageName: string = '@syncfusion/ej2-angular-buttons';
+export const libModules: string = 'RadioButtonModule';

components/buttons/schematics/generators/button-default/samples/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.ts

@@ -0,0 +1,15 @@
+import { Component } from '@angular/core';
+
+
+/**
+ * CheckBox Controller
+ */
+@Component({
+    selector: '<%=dasherize(selector)%>',
+    templateUrl: '<%=dasherize(name)%>.component.html',
+    styleUrls: ['<%=dasherize(name)%>.component.css']
+})
+
+export class <%= classify(name) %>Component {
+
+}

components/buttons/schematics/generators/button-default/schema.ts

@@ -0,0 +1,3 @@
+import { Schema as ComponentSchema } from '@schematics/angular/component/schema';
+
+export interface Schema extends ComponentSchema { }

components/buttons/schematics/generators/checkbox-default/index.ts

@@ -0,0 +1,8 @@
+import { Rule } from '@angular-devkit/schematics';
+import { componentBuilder } from "@syncfusion/ej2-angular-base/schematics";
+import { Schema } from './schema';
+import * as sampleDetails from './sample-details';
+
+export default function (options: Schema): Rule {
+  return componentBuilder(options, sampleDetails);
+}

components/buttons/schematics/generators/checkbox-default/sample-details.ts

@@ -0,0 +1,5 @@
+export const componentName: string = 'switch';
+export const sampleName: string = 'default';
+export const diModules: string =  null;
+export const packageName: string = '@syncfusion/ej2-angular-buttons';
+export const libModules: string = 'SwitchModule';

components/buttons/schematics/generators/checkbox-default/samples/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.ts

@@ -0,0 +1,32 @@
+import { Component, ViewChild } from '@angular/core';
+import { SwitchComponent } from '@syncfusion/ej2-angular-buttons';
+import { rippleMouseHandler } from '@syncfusion/ej2-buttons';
+
+/**
+ * CheckBox Controller
+ */
+@Component({
+    selector: '<%=dasherize(selector)%>',
+    templateUrl: '<%=dasherize(name)%>.component.html',
+    styleUrls: ['<%=dasherize(name)%>.component.css']
+})
+
+export class <%= classify(name) %>Component {
+    @ViewChild('switch')
+    public switch: SwitchComponent;
+
+    public ngOnInit(): void {
+        let elemArray: NodeListOf<Element> = document.querySelectorAll('.switch-control label');
+        for (let i: number = 0, len: number = elemArray.length; i < len; i++) {
+            elemArray[i].addEventListener('mouseup', rippleHandler);
+            elemArray[i].addEventListener('mousedown', rippleHandler);
+        }
+    }
+}
+
+function rippleHandler(e: MouseEvent): void {
+    let rippleSpan: Element = this.nextElementSibling.querySelector('.e-ripple-container');
+    if (rippleSpan) {
+        rippleMouseHandler(e, rippleSpan);
+    }
+}

components/buttons/schematics/generators/checkbox-default/schema.ts

@@ -0,0 +1,3 @@
+import { Schema as ComponentSchema } from '@schematics/angular/component/schema';
+
+export interface Schema extends ComponentSchema { }

components/buttons/schematics/generators/radiobutton-default/index.ts

@@ -1,4 +1,4 @@
 export const pkgName = '@syncfusion/ej2-angular-buttons';
-export const pkgVer = '^16.2.41';
+export const pkgVer = '^16.4.40';
 export const moduleName = 'ButtonModule, CheckBoxModule, RadioButtonModule, SwitchModule, ChipListModule';
-export const themeVer = '~16.2.41';
+export const themeVer = '~16.4.40';

components/buttons/schematics/generators/radiobutton-default/sample-details.ts

@@ -29,30 +29,37 @@ export class ChipDirective extends ComplexBase<ChipDirective> {
 
     /** 
      * This avatarIconCss property helps to customize avatar element.
+     * @default ''
      */
     public avatarIconCss: any;
     /** 
      * This avatarText property helps to customize avatar content.
+     * @default ''
      */
     public avatarText: any;
     /** 
      * This cssClass property helps to customize ChipList component.
+     * @default ''
      */
     public cssClass: any;
     /** 
      * This enabled property helps to enable/disable ChipList component.
+     * @default true
      */
     public enabled: any;
     /** 
      * This leadingIconCss property helps to customize leading icon element.
+     * @default ''
      */
     public leadingIconCss: any;
     /** 
      * This text property helps to render ChipList component.
+     * @default ''
      */
     public text: any;
     /** 
      * This trailingIconCss property helps to customize trailing icon element.
+     * @default ''
      */
     public trailingIconCss: any;