Skip to content

Commit 97fc8e1

Browse files
artembelikartembelik
authored
feat: migrate on booleanAttribute (#DS-2905) (#301)
1 parent 8b7b34e commit 97fc8e1

File tree

18 files changed

+157
-182
lines changed

18 files changed

+157
-182
lines changed

‎karma.conf.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ module.exports = () => {
1616
require('@angular-devkit/build-angular/plugins/karma')
1717
],
1818
client: {
19-
clearContext: false, // leave Jasmine Spec Runner output visible in browser
19+
clearContext: true,
2020
jasmine: {
2121
random: false
2222
}

‎packages/components/checkbox/checkbox.ts

Lines changed: 3 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ import {
1313
Output,
1414
ViewChild,
1515
ViewEncapsulation,
16+
booleanAttribute,
1617
forwardRef
1718
} from '@angular/core';
1819
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
@@ -26,8 +27,7 @@ import {
2627
KbqComponentColors,
2728
mixinColor,
2829
mixinDisabled,
29-
mixinTabIndex,
30-
toBoolean
30+
mixinTabIndex
3131
} from '@koobiq/components/core';
3232
import { KBQ_CHECKBOX_CLICK_ACTION, KbqCheckboxClickAction } from './checkbox-config';
3333

@@ -139,16 +139,7 @@ export class KbqCheckbox
139139
}
140140

141141
/** Whether the checkbox is required. */
142-
@Input()
143-
get required(): boolean {
144-
return this._required;
145-
}
146-
147-
set required(value: boolean) {
148-
this._required = toBoolean(value);
149-
}
150-
151-
private _required: boolean;
142+
@Input({ transform: booleanAttribute }) required: boolean | undefined;
152143

153144
/**
154145
* Whether the checkbox is checked.

‎packages/components/core/utils/utils.ts

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,12 @@
1-
export function isBoolean(val: any): val is boolean {
2-
return typeof val === 'boolean';
1+
export function isBoolean(value: unknown): value is boolean {
2+
return typeof value === 'boolean';
33
}
44

5-
export function toBoolean(value: any): boolean {
5+
/**
6+
* Will be removed in the next major release
7+
*
8+
* @deprecated Use `booleanAttribute` instead
9+
*/
10+
export function toBoolean(value: unknown): boolean {
611
return value != null && `${value}` !== 'false';
712
}

‎packages/components/form-field/hint.ts

Lines changed: 11 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,12 @@
1-
import { ChangeDetectionStrategy, Component, ElementRef, Input, ViewEncapsulation } from '@angular/core';
2-
import { CanColorCtor, KbqComponentColors, mixinColor, toBoolean } from '@koobiq/components/core';
1+
import {
2+
booleanAttribute,
3+
ChangeDetectionStrategy,
4+
Component,
5+
ElementRef,
6+
Input,
7+
ViewEncapsulation
8+
} from '@angular/core';
9+
import { CanColorCtor, KbqComponentColors, mixinColor } from '@koobiq/components/core';
310

411
let nextHintUniqueId = 0;
512

@@ -35,18 +42,9 @@ export const KbqHintMixinBase: CanColorCtor & typeof KbqHintBase = mixinColor(Kb
3542
export class KbqHint extends KbqHintMixinBase {
3643
@Input() id: string = `kbq-hint-${nextHintUniqueId++}`;
3744

38-
@Input() fillTextOff: boolean = false;
45+
@Input({ transform: booleanAttribute }) fillTextOff: boolean = false;
3946

40-
@Input()
41-
get compact() {
42-
return this._compact;
43-
}
44-
45-
set compact(value: any) {
46-
this._compact = toBoolean(value);
47-
}
48-
49-
private _compact = false;
47+
@Input({ transform: booleanAttribute }) compact: boolean = false;
5048

5149
constructor(elementRef: ElementRef) {
5250
super(elementRef);

‎packages/components/icon/icon-button.component.ts

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import { FocusMonitor } from '@angular/cdk/a11y';
22
import {
33
Attribute,
4+
booleanAttribute,
45
ChangeDetectionStrategy,
56
ChangeDetectorRef,
67
Component,
@@ -11,7 +12,7 @@ import {
1112
Optional,
1213
ViewEncapsulation
1314
} from '@angular/core';
14-
import { CanColor, KBQ_FORM_FIELD_REF, KbqFormFieldRef, toBoolean } from '@koobiq/components/core';
15+
import { CanColor, KBQ_FORM_FIELD_REF, KbqFormFieldRef } from '@koobiq/components/core';
1516
import { KbqIcon } from './icon.component';
1617

1718
@Component({
@@ -45,16 +46,15 @@ export class KbqIconButton extends KbqIcon implements OnDestroy, CanColor {
4546

4647
private _tabindex = 0;
4748

48-
@Input()
49+
/** Whether the button is disabled. */
50+
@Input({ transform: booleanAttribute })
4951
get disabled(): boolean {
5052
return this._disabled;
5153
}
5254

5355
set disabled(value: boolean) {
54-
const newDisabledState = toBoolean(value);
55-
56-
if (this._disabled !== newDisabledState) {
57-
this._disabled = newDisabledState;
56+
if (this._disabled !== value) {
57+
this._disabled = value;
5858

5959
this._disabled ? this.stopFocusMonitor() : this.runFocusMonitor();
6060
}

‎packages/components/link/link.component.ts

Lines changed: 21 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,20 @@
11
import { FocusMonitor } from '@angular/cdk/a11y';
2-
import { ChangeDetectorRef, ContentChild, Directive, ElementRef, Input, OnDestroy } from '@angular/core';
2+
import {
3+
booleanAttribute,
4+
ChangeDetectorRef,
5+
ContentChild,
6+
Directive,
7+
ElementRef,
8+
Input,
9+
OnDestroy
10+
} from '@angular/core';
311
import {
412
CanDisable,
513
CanDisableCtor,
614
HasTabIndex,
715
HasTabIndexCtor,
816
mixinDisabled,
9-
mixinTabIndex,
10-
toBoolean
17+
mixinTabIndex
1118
} from '@koobiq/components/core';
1219
import { KbqIcon } from '@koobiq/components/icon';
1320

@@ -42,76 +49,30 @@ export const baseURLRegex = /^http(s)?:\/\//;
4249
}
4350
})
4451
export class KbqLink extends KbqLinkMixinBase implements OnDestroy, HasTabIndex, CanDisable {
45-
@Input()
46-
get disabled() {
52+
/** Whether the link is disabled. */
53+
@Input({ transform: booleanAttribute })
54+
get disabled(): boolean {
4755
return this._disabled;
4856
}
4957

50-
set disabled(value: any) {
51-
const newValue = toBoolean(value);
52-
53-
if (newValue !== this._disabled) {
54-
this._disabled = newValue;
58+
set disabled(value: boolean) {
59+
if (value !== this._disabled) {
60+
this._disabled = value;
5561
this.changeDetector.markForCheck();
5662
}
5763
}
5864

5965
private _disabled = false;
6066

61-
@Input()
62-
get pseudo() {
63-
return this._pseudo;
64-
}
65-
66-
set pseudo(value: any) {
67-
this._pseudo = toBoolean(value);
68-
}
69-
70-
private _pseudo = false;
71-
72-
@Input()
73-
get noUnderline() {
74-
return this._noUnderline;
75-
}
76-
77-
set noUnderline(value: any) {
78-
this._noUnderline = toBoolean(value);
79-
}
80-
81-
private _noUnderline = false;
67+
@Input({ transform: booleanAttribute }) pseudo: boolean = false;
8268

83-
@Input()
84-
get big() {
85-
return this._big;
86-
}
87-
88-
set big(value: any) {
89-
this._big = toBoolean(value);
90-
}
91-
92-
private _big = false;
93-
94-
@Input()
95-
get compact() {
96-
return this._compact;
97-
}
98-
99-
set compact(value: any) {
100-
this._compact = toBoolean(value);
101-
}
69+
@Input({ transform: booleanAttribute }) noUnderline: boolean = false;
10270

103-
private _compact = false;
71+
@Input({ transform: booleanAttribute }) big: boolean = false;
10472

105-
@Input()
106-
get useVisited() {
107-
return this._useVisited;
108-
}
109-
110-
set useVisited(value: any) {
111-
this._useVisited = toBoolean(value);
112-
}
73+
@Input({ transform: booleanAttribute }) compact: boolean = false;
11374

114-
private _useVisited = false;
75+
@Input({ transform: booleanAttribute }) useVisited: boolean = false;
11576

11677
get hasIcon(): boolean {
11778
return !!this.icon;

‎packages/components/list/list-selection.component.ts

Lines changed: 12 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import { SelectionModel } from '@angular/cdk/collections';
44
import {
55
AfterContentInit,
66
Attribute,
7+
booleanAttribute,
78
ChangeDetectionStrategy,
89
ChangeDetectorRef,
910
Component,
@@ -55,8 +56,7 @@ import {
5556
KbqTitleTextRef,
5657
mixinDisabled,
5758
mixinTabIndex,
58-
MultipleMode,
59-
toBoolean
59+
MultipleMode
6060
} from '@koobiq/components/core';
6161
import { KbqDropdownTrigger } from '@koobiq/components/dropdown';
6262
import { KbqTooltipTrigger } from '@koobiq/components/tooltip';
@@ -171,7 +171,7 @@ export class KbqListSelection
171171
return !!this.multipleMode;
172172
}
173173

174-
@Input() horizontal: boolean = false;
174+
@Input({ transform: booleanAttribute }) horizontal: boolean = false;
175175

176176
@Input()
177177
get tabIndex(): any {
@@ -244,8 +244,6 @@ export class KbqListSelection
244244
@Input() compareWith: (o1: any, o2: any) => boolean = (a1, a2) => a1 === a2;
245245

246246
ngAfterContentInit(): void {
247-
this.horizontal = toBoolean(this.horizontal);
248-
249247
this.keyManager = new FocusKeyManager<KbqListOption>(this.options)
250248
.withTypeAhead()
251249
.withVerticalOrientation(!this.horizontal)
@@ -709,19 +707,18 @@ export class KbqListOption implements OnDestroy, OnInit, IFocusableOption, KbqTi
709707
}
710708
private _value: any;
711709

712-
@Input()
713-
get disabled() {
710+
/** Whether list is disabled. */
711+
@Input({ transform: booleanAttribute })
712+
get disabled(): boolean {
714713
const listSelectionDisabled = this.listSelection && this.listSelection.disabled;
715714
const groupDisabled = this.group && this.group.disabled;
716715

717716
return listSelectionDisabled || groupDisabled || this._disabled;
718717
}
719718

720-
set disabled(value: any) {
721-
const newValue = toBoolean(value);
722-
723-
if (newValue !== this._disabled) {
724-
this._disabled = newValue;
719+
set disabled(value: boolean) {
720+
if (value !== this._disabled) {
721+
this._disabled = value;
725722
this.changeDetector.markForCheck();
726723
}
727724
}
@@ -739,16 +736,14 @@ export class KbqListOption implements OnDestroy, OnInit, IFocusableOption, KbqTi
739736

740737
private _showCheckbox: boolean;
741738

742-
@Input()
739+
@Input({ transform: booleanAttribute })
743740
get selected(): boolean {
744741
return this.listSelection.selectionModel?.isSelected(this) || false;
745742
}
746743

747744
set selected(value: boolean) {
748-
const isSelected = toBoolean(value);
749-
750-
if (isSelected !== this._selected) {
751-
this.setSelected(isSelected);
745+
if (value !== this._selected) {
746+
this.setSelected(value);
752747
}
753748
}
754749

‎packages/components/navbar/navbar-item.component.ts

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -16,12 +16,13 @@ import {
1616
OnDestroy,
1717
Optional,
1818
TemplateRef,
19-
ViewEncapsulation
19+
ViewEncapsulation,
20+
booleanAttribute
2021
} from '@angular/core';
2122
import { IFocusableOption } from '@koobiq/cdk/a11y';
2223
import { DOWN_ARROW, ENTER, NUMPAD_DIVIDE, RIGHT_ARROW, SLASH, SPACE } from '@koobiq/cdk/keycodes';
2324
import { KbqButton, KbqButtonCssStyler } from '@koobiq/components/button';
24-
import { PopUpPlacements, PopUpTriggers, toBoolean } from '@koobiq/components/core';
25+
import { PopUpPlacements, PopUpTriggers } from '@koobiq/components/core';
2526
import { KbqDropdownTrigger } from '@koobiq/components/dropdown';
2627
import { KbqFormField } from '@koobiq/components/form-field';
2728
import { KbqIcon } from '@koobiq/components/icon';
@@ -187,16 +188,15 @@ export class KbqNavbarFocusableItem implements IFocusableOption, AfterContentIni
187188

188189
private _hasFocus: boolean = false;
189190

190-
@Input()
191+
/** Whether the item is disabled. */
192+
@Input({ transform: booleanAttribute })
191193
get disabled() {
192194
return this._disabled;
193195
}
194196

195-
set disabled(value: any) {
196-
const newValue = toBoolean(value);
197-
198-
if (newValue !== this._disabled) {
199-
this._disabled = newValue;
197+
set disabled(value: boolean) {
198+
if (value !== this._disabled) {
199+
this._disabled = value;
200200
this.changeDetector.markForCheck();
201201
}
202202
}

0 commit comments

Comments
 (0)