fix: empty value boolean properties in @cds/angular

Signed-off-by: stsogoo <stsogoo@vmware.com>
vmware-archive · May 14, 2021 · c6fd116 · c6fd116
1 parent e16ac2e
commit c6fd116
Show file tree

Hide file tree

Showing 5 changed files with 26 additions and 4 deletions.
diff --git a/apps/core-angular-cli/package.json b/apps/core-angular-cli/package.json
@@ -42,10 +42,16 @@
     "karma-coverage": "~2.0.3",
     "karma-jasmine": "~4.0.0",
     "karma-jasmine-html-reporter": "^1.5.0",
+    "postcss-cli": "7.1.0",
     "protractor": "~7.0.0",
     "sass": "1.32.8",
     "ts-node": "~8.3.0",
     "tslint": "~6.1.0",
     "typescript": "~4.1.2"
+  },
+  "postcss": {
+    "plugins": {
+      "autoprefixer": {}
+    }
   }
 }
diff --git a/apps/core-angular-cli/src/app/app.component.html b/apps/core-angular-cli/src/app/app.component.html
@@ -14,6 +14,8 @@
 
   <cds-button status="success" (click)="show = true">Open Alert</cds-button>
 
+  <cds-tag status="success" readonly>Should not be focusable, readonly</cds-tag>
+
   <section cds-layout="grid cols:6 gap:lg">
     <cds-accordion>
       <cds-accordion-panel [expanded]="panel1Expanded" (expandedChange)="expandedChange($event)">

diff --git a/apps/core-angular-cli/src/app/app.component.ts b/apps/core-angular-cli/src/app/app.component.ts
@@ -73,7 +73,7 @@ export class AppComponent {
     return this.form.controls.password.touched && this.form.controls.password.hasError('minlength');
   }
 
-  expandedChange(event): void {
+  expandedChange(event: CustomEvent): void {
     this.panel1Expanded = event.detail;
   }
 

diff --git a/packages/angular/projects/cds-angular/src/cds/_stubs/directive.ts.mustache b/packages/angular/projects/cds-angular/src/cds/_stubs/directive.ts.mustache
@@ -4,13 +4,25 @@
  * The full license information can be found in LICENSE in the root directory of this project.
  */
 
-import { Directive, {{#hasProps}} Input {{/hasProps}} } from '@angular/core';
+import { Directive {{#hasProps}}, Input {{/hasProps}} {{#hasEvents}}, Output, EventEmitter {{/hasEvents}} } from '@angular/core';
 import { BaseCdsDirective } from '../../cds-base';
 
 @Directive({ selector: '{{tagName}}' })
 export class {{directiveClassName}} extends BaseCdsDirective {
   {{#props}}
   get {{name}}() { return this.element['{{name}}']; }
-  @Input() set {{name}}(value) { this.element['{{name}}'] = value; };
+  @Input() set {{name}}(value: any) { 
+    {{#isBoolean}}
+      if(value === "") {
+        this.element['{{name}}'] = true; 
+        return;    
+      }
+    {{/isBoolean}}
+    this.element['{{name}}'] = value; 
+  };
   {{/props}}
+
+  {{#events}}
+  @Output() {{name}}: EventEmitter<CustomEvent> = new EventEmitter();
+  {{/events}}
 } 
diff --git a/scripts/core-ng-module-generator.js b/scripts/core-ng-module-generator.js
@@ -114,8 +114,10 @@ function createDirectives(componentDirectories) {
       const templateData = {
         tagName: tag.name,
         directiveClassName: getDirectiveClassName(tag.name, '', 'Directive'),
-        props: tag.properties,
+        props: tag.properties && tag.properties.map(p => ({ ...p, isBoolean: p.type === 'boolean' })),
+        events: tag.events,
         hasProps: !!tag.properties,
+        hasEvents: !!tag.events,
       };
 
       const directory = getDiretoryName(tag.path);