refactor: introduce kebab events

.github/workflows/publish.yml

@@ -55,6 +55,7 @@ jobs:
 
       - name: Build Angular Proxy
         run: |
+          yarn workspace @telekom/scale-components process-angular-proxies
           yarn workspace @telekom/scale-components-angular build
 
       - name: Build React Proxy
@@ -123,6 +124,7 @@ jobs:
 
       - name: Build Angular Proxy
         run: |
+          yarn workspace @telekom/scale-components process-angular-proxies
           yarn workspace @telekom/scale-components-angular-neutral build
 
       - name: Build React Proxy

packages/components-angular/src/directives/value-accessor.ts

@@ -1,6 +1,7 @@
-import { ElementRef, HostListener } from '@angular/core';
+import { Directive, ElementRef, HostListener } from '@angular/core';
 import { ControlValueAccessor } from '@angular/forms';
 
+@Directive({})
 export class ValueAccessor implements ControlValueAccessor {
 
   private onChange: (value: any) => void = () => {/**/};

packages/components/package.json

@@ -33,14 +33,15 @@
     "format": "prettier --write \"*.ts\" \"src/**/*.{html,tsx,ts,css,json}\" \"!src/**/*.d.ts\"",
     "lint:fix": "yarn lint:style --fix",
     "lint": "tslint -c tslint.json -p . \"src/**/*.{tsx,ts,css,json}\" \"!src/**/*.d.ts\"",
-    "generate": "node ./scripts/generate-icons.js"
+    "generate": "node ./scripts/generate-icons.js",
+    "process-angular-proxies": "node ./scripts/process-angular-proxies.js"
   },
   "devDependencies": {
     "@babel/core": "7.10.2",
     "@babel/plugin-syntax-jsx": "7.10.1",
     "@babel/plugin-transform-react-jsx": "7.10.1",
     "@nowseemee/vue-output-target": "0.0.4",
-    "@stencil/angular-output-target": "^0.0.5",
+    "@stencil/angular-output-target": "^0.0.7",
     "@stencil/postcss": "^2.0.0",
     "@stencil/react-output-target": "^0.0.9",
     "@types/classnames": "2.2.8",

packages/components/scripts/process-angular-proxies.js

@@ -0,0 +1,15 @@
+const fs = require('fs');
+const angularProxiesFile = '../components-angular/src/directives/proxies.ts';
+
+fs.readFile(angularProxiesFile, 'utf8', (err, data) => {
+  if (err) return console.log(err);
+
+  // regex matches the kebab case event name
+  const withEscapedKeys = data.replace(/(\w)+(-(\w)+)+!:/g, (match) => {
+    return `"${match.split('!:')[0]}"!:`;
+  });
+
+  fs.writeFile(angularProxiesFile, withEscapedKeys, 'utf8', (err) => {
+    if (err) return console.log(err);
+  });
+});

packages/components/src/components/accordion/accordion.tsx

@@ -37,7 +37,7 @@ export class Accordion {
   /**
    * Handle `dependent`
    */
-  @Listen('scaleExpand')
+  @Listen('scale-expand')
   collapsibleHandler(event: CustomEvent) {
     event.stopPropagation();
     const { expanded } = event.detail;

packages/components/src/components/checkbox-group/checkbox-group.tsx

@@ -24,7 +24,7 @@ export class CheckboxGroup {
 
   @State() groupStatus: CheckboxState[] = [];
 
-  @Listen('scaleChange')
+  @Listen('scale-change')
   scaleChangeHandler() {
     this.createNewState();
   }

packages/components/src/components/checkbox/checkbox.spec.ts

@@ -68,11 +68,14 @@ describe('Checkbox', () => {
 
   it('should emit on change', async () => {
     const changeSpy = jest.fn();
-    page.doc.addEventListener('scaleChange', changeSpy);
+    const changeSpyLegacy = jest.fn();
+    page.doc.addEventListener('scale-change', changeSpy);
+    page.doc.addEventListener('scaleChange', changeSpyLegacy);
     const element = page.root.querySelector('input');
     element.dispatchEvent(new Event('change'));
     await page.waitForChanges();
     expect(changeSpy).toHaveBeenCalled();
+    expect(changeSpyLegacy).toHaveBeenCalled();
   });
 
   it('should handle inputId with value null', async () => {

packages/components/src/components/checkbox/checkbox.tsx

@@ -19,6 +19,7 @@ import {
   Prop,
 } from '@stencil/core';
 import classNames from 'classnames';
+import { emitEvent } from '../../utils/utils';
 
 let i = 0;
 
@@ -49,8 +50,11 @@ export class Checkbox {
   @Prop() inputId?: string;
   /** (optional) Injected CSS styles */
   @Prop() styles?: string;
+
   /** Emitted when the value has changed. */
-  @Event() scaleChange!: EventEmitter;
+  @Event({ eventName: 'scale-change' }) scaleChange: EventEmitter;
+  /** @deprecated in v3 in favor of kebab-case event names */
+  @Event({ eventName: 'scaleChange' }) scaleChangeLegacy: EventEmitter;
 
   componentWillLoad() {
     if (this.inputId == null) {
@@ -104,8 +108,7 @@ export class Checkbox {
                 this.indeterminate = false;
               }
               this.checked = e.target.checked;
-              // bubble event through the shadow dom
-              this.scaleChange.emit({ value: this.checked });
+              emitEvent(this, 'scaleChange', { value: this.checked });
             }}
             value={this.value}
             checked={this.checked}

packages/components/src/components/checkbox/readme.md

@@ -23,9 +23,10 @@
 
 ## Events
 
-| Event         | Description                         | Type               |
-| ------------- | ----------------------------------- | ------------------ |
-| `scaleChange` | Emitted when the value has changed. | `CustomEvent<any>` |
+| Event          | Description                                                                                        | Type               |
+| -------------- | -------------------------------------------------------------------------------------------------- | ------------------ |
+| `scale-change` | Emitted when the value has changed.                                                                | `CustomEvent<any>` |
+| `scaleChange`  | <span style="color:red">**[DEPRECATED]**</span> in v3 in favor of kebab-case event names<br/><br/> | `CustomEvent<any>` |
 
 
 ## Dependencies

packages/components/src/components/collapsible/collapsible.spec.ts

@@ -25,10 +25,13 @@ describe('TextField', () => {
   });
   it('should emit on click', async () => {
     const clickSpy = jest.fn();
-    page.doc.addEventListener('scaleExpand', clickSpy);
+    const clickSpyLegacy = jest.fn();
+    page.doc.addEventListener('scale-expand', clickSpy);
+    page.doc.addEventListener('scaleExpand', clickSpyLegacy);
     const buttonElement = page.root.shadowRoot.querySelector('button');
     buttonElement.click();
     await page.waitForChanges();
     expect(clickSpy).toHaveBeenCalled();
+    expect(clickSpyLegacy).toHaveBeenCalled();
   });
 });

packages/components/src/components/collapsible/collapsible.tsx

@@ -19,6 +19,7 @@ import {
   EventEmitter,
 } from '@stencil/core';
 import classNames from 'classnames';
+import { emitEvent } from '../../utils/utils';
 
 export interface CollapsibleEventDetail {
   expanded: boolean;
@@ -46,7 +47,11 @@ export class Collapsible {
   @Prop() styles?: string;
 
   /** Emitted so parent <scale-accordion> knows about it */
-  @Event() scaleExpand: EventEmitter<CollapsibleEventDetail>;
+  @Event({ eventName: 'scale-expand' })
+  scaleExpand: EventEmitter<CollapsibleEventDetail>;
+  /** @deprecated in v3 in favor of kebab-case event names */
+  @Event({ eventName: 'scaleExpand' })
+  scaleExpandLegacy: EventEmitter<CollapsibleEventDetail>;
 
   componentWillLoad() {
     const j = i++;
@@ -60,7 +65,7 @@ export class Collapsible {
 
   handleClick = () => {
     this.expanded = !this.expanded;
-    this.scaleExpand.emit({ expanded: this.expanded });
+    emitEvent(this, 'scaleExpand', { expanded: this.expanded });
   };
 
   /**

packages/components/src/components/collapsible/readme.md

@@ -16,9 +16,10 @@
 
 ## Events
 
-| Event         | Description                                        | Type                                  |
-| ------------- | -------------------------------------------------- | ------------------------------------- |
-| `scaleExpand` | Emitted so parent <scale-accordion> knows about it | `CustomEvent<CollapsibleEventDetail>` |
+| Event          | Description                                                                                        | Type                                  |
+| -------------- | -------------------------------------------------------------------------------------------------- | ------------------------------------- |
+| `scale-expand` | Emitted so parent <scale-accordion> knows about it                                                 | `CustomEvent<CollapsibleEventDetail>` |
+| `scaleExpand`  | <span style="color:red">**[DEPRECATED]**</span> in v3 in favor of kebab-case event names<br/><br/> | `CustomEvent<CollapsibleEventDetail>` |
 
 
 ## Shadow Parts

packages/components/src/components/data-grid/data-grid.tsx

@@ -27,6 +27,7 @@ import {
 } from './data-grid-cells';
 import classNames from 'classnames';
 import statusNote from '../../utils/status-note';
+import { emitEvent } from '../../utils/utils';
 
 // [ ] add options to show nested content without the html column
 // [ ] add options to pre-expand all html content
@@ -110,10 +111,17 @@ export class DataGrid {
 
   /* 4. Events (alphabetical) */
   /** Event triggered every time the editable cells are changed, updating the original rows data */
-  @Event() scaleEdit: EventEmitter<DataGridEditEventDetail>;
+  @Event({ eventName: 'scale-edit' })
+  scaleEdit: EventEmitter<DataGridEditEventDetail>;
+  /** @deprecated in v3 in favor of kebab-case event names */
+  @Event({ eventName: 'scaleEdit' })
+  scaleEditLegacy: EventEmitter<DataGridEditEventDetail>;
   /** Event triggered every time the data is sorted, changing original rows data */
-  @Event() scaleSort: EventEmitter<DataGridSortedEventDetail>;
-
+  @Event({ eventName: 'scale-sort' })
+  scaleSort: EventEmitter<DataGridSortedEventDetail>;
+  /** @deprecated in v3 in favor of kebab-case event names */
+  @Event({ eventName: 'scaleSort' })
+  scaleSortLegacy: EventEmitter<DataGridSortedEventDetail>;
   /* 5. Private Properties (alphabetical) */
   /** Used to update column divider during interaction */
   private activeDivider: any;
@@ -691,7 +699,7 @@ export class DataGrid {
       sortDirection,
       columnIndex,
     } as DataGridSortedEventDetail;
-    this.scaleSort.emit(data);
+    emitEvent(this, 'scaleSort', data);
   }
 
   triggerEditEvent(value, rowIndex, columnIndex) {
@@ -701,7 +709,7 @@ export class DataGrid {
       columnIndex,
       value,
     } as DataGridEditEventDetail;
-    this.scaleEdit.emit(data);
+    emitEvent(this, 'scaleEdit', data);
 
     // Force render for checkboxes
     this.forceRender++;

packages/components/src/components/data-grid/readme.md

@@ -29,10 +29,12 @@
 
 ## Events
 
-| Event       | Description                                                                                | Type                                     |
-| ----------- | ------------------------------------------------------------------------------------------ | ---------------------------------------- |
-| `scaleEdit` | Event triggered every time the editable cells are changed, updating the original rows data | `CustomEvent<DataGridEditEventDetail>`   |
-| `scaleSort` | Event triggered every time the data is sorted, changing original rows data                 | `CustomEvent<DataGridSortedEventDetail>` |
+| Event        | Description                                                                                        | Type                                     |
+| ------------ | -------------------------------------------------------------------------------------------------- | ---------------------------------------- |
+| `scale-edit` | Event triggered every time the editable cells are changed, updating the original rows data         | `CustomEvent<DataGridEditEventDetail>`   |
+| `scale-sort` | Event triggered every time the data is sorted, changing original rows data                         | `CustomEvent<DataGridSortedEventDetail>` |
+| `scaleEdit`  | <span style="color:red">**[DEPRECATED]**</span> in v3 in favor of kebab-case event names<br/><br/> | `CustomEvent<DataGridEditEventDetail>`   |
+| `scaleSort`  | <span style="color:red">**[DEPRECATED]**</span> in v3 in favor of kebab-case event names<br/><br/> | `CustomEvent<DataGridSortedEventDetail>` |
 
 
 ## Dependencies

packages/components/src/components/date-picker/date-picker.tsx

@@ -31,6 +31,7 @@ import {
 import classNames from 'classnames';
 import { DuetLocalizedText } from '@duetds/date-picker/dist/types/components/duet-date-picker/date-localization';
 import statusNote from '../../utils/status-note';
+import { emitEvent } from '../../utils/utils';
 
 let i = 0;
 
@@ -151,17 +152,32 @@ export class DatePicker {
   /**
    * Event emitted when a date is selected.
    */
-  @Event() scaleChange: EventEmitter<DuetDatePickerChangeEvent>;
+  @Event({ eventName: 'scale-change' })
+  scaleChange: EventEmitter<DuetDatePickerChangeEvent>;
+
+  /** @deprecated in v3 in favor of kebab-case event names */
+  @Event({ eventName: 'scaleChange' })
+  scaleChangeLegacy: EventEmitter<DuetDatePickerChangeEvent>;
 
   /**
    * Event emitted the date picker input is blurred.
    */
-  @Event() scaleBlur: EventEmitter<DuetDatePickerFocusEvent>;
+  @Event({ eventName: 'scale-blur' })
+  scaleBlur: EventEmitter<DuetDatePickerFocusEvent>;
+
+  /** @deprecated in v3 in favor of kebab-case event names */
+  @Event({ eventName: 'scaleBlur' })
+  scaleBlurLegacy: EventEmitter<DuetDatePickerFocusEvent>;
 
   /**
    * Event emitted the date picker input is focused.
    */
-  @Event() scaleFocus: EventEmitter<DuetDatePickerFocusEvent>;
+  @Event({ eventName: 'scale-focus' })
+  scaleFocus: EventEmitter<DuetDatePickerFocusEvent>;
+
+  /** @deprecated in v3 in favor of kebab-case event names */
+  @Event({ eventName: 'scaleFocus' })
+  scaleFocusLegacy: EventEmitter<DuetDatePickerFocusEvent>;
 
   private helperTextId = `helper-message-${i}`;
 
@@ -283,15 +299,15 @@ export class DatePicker {
         </label>
         <duet-date-picker
           onDuetChange={(e) => {
-            this.scaleChange.emit(e.detail);
+            emitEvent(this, 'scaleChange', e.detail);
             this.handleKeyPress(e);
           }}
           onDuetFocus={(e) => {
-            this.scaleFocus.emit(e.detail);
+            emitEvent(this, 'scaleFocus', e.detail);
             this.hasFocus = true;
           }}
           onDuetBlur={(e) => {
-            this.scaleBlur.emit(e.detail);
+            emitEvent(this, 'scaleBlur', e.detail);
             this.hasFocus = false;
           }}
           name={this.name}

packages/components/src/components/date-picker/readme.md

@@ -30,11 +30,14 @@
 
 ## Events
 
-| Event         | Description                                     | Type                                                                                |
-| ------------- | ----------------------------------------------- | ----------------------------------------------------------------------------------- |
-| `scaleBlur`   | Event emitted the date picker input is blurred. | `CustomEvent<{ component: "duet-date-picker"; }>`                                   |
-| `scaleChange` | Event emitted when a date is selected.          | `CustomEvent<{ component: "duet-date-picker"; valueAsDate: Date; value: string; }>` |
-| `scaleFocus`  | Event emitted the date picker input is focused. | `CustomEvent<{ component: "duet-date-picker"; }>`                                   |
+| Event          | Description                                                                                        | Type                                                                                |
+| -------------- | -------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------- |
+| `scale-blur`   | Event emitted the date picker input is blurred.                                                    | `CustomEvent<{ component: "duet-date-picker"; }>`                                   |
+| `scale-change` | Event emitted when a date is selected.                                                             | `CustomEvent<{ component: "duet-date-picker"; valueAsDate: Date; value: string; }>` |
+| `scale-focus`  | Event emitted the date picker input is focused.                                                    | `CustomEvent<{ component: "duet-date-picker"; }>`                                   |
+| `scaleBlur`    | <span style="color:red">**[DEPRECATED]**</span> in v3 in favor of kebab-case event names<br/><br/> | `CustomEvent<{ component: "duet-date-picker"; }>`                                   |
+| `scaleChange`  | <span style="color:red">**[DEPRECATED]**</span> in v3 in favor of kebab-case event names<br/><br/> | `CustomEvent<{ component: "duet-date-picker"; valueAsDate: Date; value: string; }>` |
+| `scaleFocus`   | <span style="color:red">**[DEPRECATED]**</span> in v3 in favor of kebab-case event names<br/><br/> | `CustomEvent<{ component: "duet-date-picker"; }>`                                   |
 
 
 ## Methods