Skip to content

Commit

Permalink
fix(angular): use event.detail instead of event.target.value
Browse files Browse the repository at this point in the history
  • Loading branch information
hirsch committed Sep 13, 2021
1 parent 602e310 commit 4709780
Show file tree
Hide file tree
Showing 12 changed files with 117 additions and 150 deletions.
36 changes: 18 additions & 18 deletions examples/angular/package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

4 changes: 2 additions & 2 deletions examples/angular/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -21,8 +21,8 @@
"@angular/platform-browser": "^12.2.5",
"@angular/platform-browser-dynamic": "^12.2.5",
"@angular/router": "^12.2.5",
"@baloise/design-system-components-angular": "^1.13.1",
"@baloise/design-system-components-table": "^1.13.1",
"@baloise/design-system-components-angular": "^1.14.3",
"@baloise/design-system-components-table": "^1.14.3",
"ag-grid-angular": "^25.3.0",
"ag-grid-community": "^25.3.0",
"rxjs": "~6.6.0",
Expand Down
2 changes: 1 addition & 1 deletion examples/angular/src/app/app.module.ts
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core'
import { FormsModule, ReactiveFormsModule } from '@angular/forms'
import { BrowserModule } from '@angular/platform-browser'
import { BaloiseDesignSystemModule } from '@baloise/design-system-components-angular'
// import { BaloiseDesignSystemModule } from '@baloise/design-system-components-angular'
import { AgGridModule } from 'ag-grid-angular'

import { AppRoutingModule } from './app-routing.module'
Expand Down
4 changes: 2 additions & 2 deletions examples/angular/src/app/pages/form/form-page.component.html
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
<form [formGroup]="form" (ngSubmit)="onSubmit()" class="columns is-multiline mt-0">
<bal-field class="column is-full py-0" expanded [disabled]="form.get('gender')?.disabled">
<bal-field-control>
<bal-radio-group interface="select-button" [formControlName]="formControlName">
<bal-radio-group [formControlName]="formControlName">
<bal-radio *ngFor="let g of genders" [name]="formControlName" [value]="g.value">{{ g.label }}</bal-radio>
</bal-radio-group>
</bal-field-control>
Expand Down Expand Up @@ -70,7 +70,7 @@
<bal-field class="column is-half py-0" expanded [disabled]="form.get('canton')?.disabled">
<bal-field-label>Canton</bal-field-label>
<bal-field-control>
<bal-select placeholder="select your canton" formControlName="canton" expanded>
<bal-select placeholder="select your canton" formControlName="canton" expanded (balChange)="bubu($event)">
<bal-select-option *ngFor="let canton of cantons" [value]="canton.value" [label]="canton.label">
{{ canton.label }}
</bal-select-option>
Expand Down
14 changes: 12 additions & 2 deletions examples/angular/src/app/pages/form/form-page.component.ts
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { Component } from '@angular/core'
import { Component, OnInit } from '@angular/core'
import { FormControl, FormGroup } from '@angular/forms'
import { NewBalOptionValue, newDateString, now } from '@baloise/design-system-components'
import { BalValidators } from '@baloise/design-system-components-angular'
Expand All @@ -7,7 +7,17 @@ import { BalValidators } from '@baloise/design-system-components-angular'
selector: 'app-form-page',
templateUrl: './form-page.component.html',
})
export class FormPageComponent {
export class FormPageComponent implements OnInit {
ngOnInit(): void {
this.form.get('canton')?.valueChanges.subscribe(a => {
console.log('valueChanges', a)
})
}

bubu(e: any) {
console.log('balChange', e)
}

formControlName = 'gender'

genders = [NewBalOptionValue('male', 'Male'), NewBalOptionValue('female', 'Female')]
Expand Down
2 changes: 1 addition & 1 deletion examples/angular/src/styles.scss
Original file line number Diff line number Diff line change
Expand Up @@ -3,4 +3,4 @@
$font-path: '~assets/fonts';

@import 'node_modules/@baloise/design-system-components/src/styles/global.scss';
@import 'node_modules/@baloise/design-system-components-table/scss';
@import 'node_modules/@baloise/design-system-components-table/scss/design-system-table.scss';
Original file line number Diff line number Diff line change
@@ -1,27 +1,27 @@
import { Directive, ElementRef } from '@angular/core';
import { NG_VALUE_ACCESSOR } from '@angular/forms';
import { Directive, ElementRef } from '@angular/core'
import { NG_VALUE_ACCESSOR } from '@angular/forms'

import { ValueAccessor } from './value-accessor';
import { ValueAccessor } from './value-accessor'

@Directive({
/* tslint:disable-next-line:directive-selector */
selector: 'bal-checkbox',
host: {
'(balChange)': 'handleChangeEvent($event.target.checked)'
'(balChange)': 'handleChangeEvent($event.detail)',
},
providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: BooleanValueAccessor,
multi: true
}
]
multi: true,
},
],
})
export class BooleanValueAccessor extends ValueAccessor {
constructor(el: ElementRef) {
super(el);
super(el)
}
writeValue(value: any) {
this.el.nativeElement.checked = this.lastValue = value == null ? false : value;
this.el.nativeElement.checked = this.lastValue = value == null ? false : value
}
}
Original file line number Diff line number Diff line change
@@ -1,24 +1,24 @@
import { Directive, ElementRef } from '@angular/core';
import { NG_VALUE_ACCESSOR } from '@angular/forms';
import { Directive, ElementRef } from '@angular/core'
import { NG_VALUE_ACCESSOR } from '@angular/forms'

import { ValueAccessor } from './value-accessor';
import { ValueAccessor } from './value-accessor'

@Directive({
/* tslint:disable-next-line:directive-selector */
selector: 'bal-radio-group, bal-select, bal-datepicker, bal-timeinput',
host: {
'(balChange)': 'handleChangeEvent($event.target.value)'
'(balChange)': 'handleChangeEvent($event.detail)',
},
providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: SelectValueAccessor,
multi: true
}
]
multi: true,
},
],
})
export class SelectValueAccessor extends ValueAccessor {
constructor(el: ElementRef) {
super(el);
super(el)
}
}
Original file line number Diff line number Diff line change
@@ -1,24 +1,24 @@
import { Directive, ElementRef } from '@angular/core';
import { NG_VALUE_ACCESSOR } from '@angular/forms';
import { Directive, ElementRef } from '@angular/core'
import { NG_VALUE_ACCESSOR } from '@angular/forms'

import { ValueAccessor } from './value-accessor';
import { ValueAccessor } from './value-accessor'

@Directive({
/* tslint:disable-next-line:directive-selector */
selector: 'bal-input, bal-textarea, bal-slider',
host: {
'(balInput)': 'handleChangeEvent($event.target.value)'
'(balInput)': 'handleChangeEvent($event.detail)',
},
providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: TextValueAccessor,
multi: true
}
]
multi: true,
},
],
})
export class TextValueAccessor extends ValueAccessor {
constructor(el: ElementRef) {
super(el);
super(el)
}
}
18 changes: 9 additions & 9 deletions packages/components/package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion packages/components/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -65,7 +65,7 @@
},
"license": "Apache-2.0",
"devDependencies": {
"@baloise/angular-output-target": "^1.0.11",
"@baloise/angular-output-target": "^1.0.14",
"@baloise/vue-output-target": "^0.2.5",
"@stencil/postcss": "^2.0.0",
"@stencil/sass": "^1.4.1",
Expand Down
Loading

0 comments on commit 4709780

Please sign in to comment.