From e6135fa0c405c7fc99ef244b95fc1e15ef0c2c46 Mon Sep 17 00:00:00 2001 From: "michael.dill" Date: Thu, 19 Dec 2024 14:09:42 -0600 Subject: [PATCH 1/7] Add support for two icon buttons --- .../src/elements/button/Button.ts | 29 +++++++++++++++++-- .../src/components/buttons/button-examples.md | 6 ++++ .../button-two-icon-example.css | 1 + .../button-two-icon-example.html | 2 ++ .../button-two-icon-example.ts | 11 +++++++ .../buttons/button-two-icon/index.ts | 1 + .../src/components/buttons/index.ts | 1 + 7 files changed, 49 insertions(+), 2 deletions(-) create mode 100644 projects/novo-examples/src/components/buttons/button-two-icon/button-two-icon-example.css create mode 100644 projects/novo-examples/src/components/buttons/button-two-icon/button-two-icon-example.html create mode 100644 projects/novo-examples/src/components/buttons/button-two-icon/button-two-icon-example.ts create mode 100644 projects/novo-examples/src/components/buttons/button-two-icon/index.ts diff --git a/projects/novo-elements/src/elements/button/Button.ts b/projects/novo-elements/src/elements/button/Button.ts index 016d51d36..b8133a095 100644 --- a/projects/novo-elements/src/elements/button/Button.ts +++ b/projects/novo-elements/src/elements/button/Button.ts @@ -27,11 +27,11 @@ import { BooleanInput, Helpers, Key } from 'novo-elements/utils'; template: ` - + - + + +## Two Icons + +A second icon can be specified, and it will take the opposite side of the primary icon. + + \ No newline at end of file diff --git a/projects/novo-examples/src/components/buttons/button-two-icon/button-two-icon-example.css b/projects/novo-examples/src/components/buttons/button-two-icon/button-two-icon-example.css new file mode 100644 index 000000000..743230875 --- /dev/null +++ b/projects/novo-examples/src/components/buttons/button-two-icon/button-two-icon-example.css @@ -0,0 +1 @@ +/** No CSS for this example */ diff --git a/projects/novo-examples/src/components/buttons/button-two-icon/button-two-icon-example.html b/projects/novo-examples/src/components/buttons/button-two-icon/button-two-icon-example.html new file mode 100644 index 000000000..e5698a8cb --- /dev/null +++ b/projects/novo-examples/src/components/buttons/button-two-icon/button-two-icon-example.html @@ -0,0 +1,2 @@ + + diff --git a/projects/novo-examples/src/components/buttons/button-two-icon/button-two-icon-example.ts b/projects/novo-examples/src/components/buttons/button-two-icon/button-two-icon-example.ts new file mode 100644 index 000000000..2595a9623 --- /dev/null +++ b/projects/novo-examples/src/components/buttons/button-two-icon/button-two-icon-example.ts @@ -0,0 +1,11 @@ +import { Component } from '@angular/core'; + +/** + * @title Icon buttons + */ +@Component({ + selector: 'button-two-icon-example', + templateUrl: 'button-two-icon-example.html', + styleUrls: ['button-two-icon-example.css'], +}) +export class ButtonTwoIconExample {} diff --git a/projects/novo-examples/src/components/buttons/button-two-icon/index.ts b/projects/novo-examples/src/components/buttons/button-two-icon/index.ts new file mode 100644 index 000000000..2e4fa1f70 --- /dev/null +++ b/projects/novo-examples/src/components/buttons/button-two-icon/index.ts @@ -0,0 +1 @@ +export * from './button-two-icon-example'; diff --git a/projects/novo-examples/src/components/buttons/index.ts b/projects/novo-examples/src/components/buttons/index.ts index 2f6c3259c..bae4979aa 100644 --- a/projects/novo-examples/src/components/buttons/index.ts +++ b/projects/novo-examples/src/components/buttons/index.ts @@ -8,3 +8,4 @@ export * from './button-overview'; export * from './button-primary'; export * from './button-secondary'; export * from './button-standard'; +export * from './button-two-icon'; From 328c544adcf03d60bd3fbab9a812664c22a891de Mon Sep 17 00:00:00 2001 From: "michael.dill" Date: Thu, 19 Dec 2024 15:26:47 -0600 Subject: [PATCH 2/7] make both buttons show --- projects/novo-elements/src/elements/button/Button.ts | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/projects/novo-elements/src/elements/button/Button.ts b/projects/novo-elements/src/elements/button/Button.ts index b8133a095..d8a604b17 100644 --- a/projects/novo-elements/src/elements/button/Button.ts +++ b/projects/novo-elements/src/elements/button/Button.ts @@ -27,11 +27,11 @@ import { BooleanInput, Helpers, Key } from 'novo-elements/utils'; template: ` - + - + Date: Thu, 19 Dec 2024 16:07:53 -0600 Subject: [PATCH 3/7] update getIconClass method --- projects/novo-elements/src/elements/button/Button.ts | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/projects/novo-elements/src/elements/button/Button.ts b/projects/novo-elements/src/elements/button/Button.ts index d8a604b17..110cd768b 100644 --- a/projects/novo-elements/src/elements/button/Button.ts +++ b/projects/novo-elements/src/elements/button/Button.ts @@ -148,12 +148,11 @@ export class NovoButtonElement implements OnChanges { this.element.nativeElement.focus(options); } - getIconClass(side?) { - if (this.icon && side === this.side) { + getIconClass(side) { + if (side === this.side) { return this.icon; - } else if (this.secondIcon && side !== this.secondSide) { + } else if (side === this.secondSide) { return this.secondSide; } - return this.icon; } } From 26eabfd49c743e023ded1d4a48a68f31afb2bea5 Mon Sep 17 00:00:00 2001 From: "michael.dill" Date: Thu, 19 Dec 2024 16:23:37 -0600 Subject: [PATCH 4/7] fix and oops --- projects/novo-elements/src/elements/button/Button.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/projects/novo-elements/src/elements/button/Button.ts b/projects/novo-elements/src/elements/button/Button.ts index 110cd768b..d9c735fea 100644 --- a/projects/novo-elements/src/elements/button/Button.ts +++ b/projects/novo-elements/src/elements/button/Button.ts @@ -152,7 +152,7 @@ export class NovoButtonElement implements OnChanges { if (side === this.side) { return this.icon; } else if (side === this.secondSide) { - return this.secondSide; + return this.secondIcon; } } } From 7749d52b15a4d85b7ff0062cff542033b6dee18a Mon Sep 17 00:00:00 2001 From: "michael.dill" Date: Tue, 7 Jan 2025 13:40:27 -0600 Subject: [PATCH 5/7] Update comment to give more hints about the second icon behaviour --- projects/novo-elements/src/elements/button/Button.ts | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/projects/novo-elements/src/elements/button/Button.ts b/projects/novo-elements/src/elements/button/Button.ts index d9c735fea..f9baa1122 100644 --- a/projects/novo-elements/src/elements/button/Button.ts +++ b/projects/novo-elements/src/elements/button/Button.ts @@ -74,7 +74,7 @@ export class NovoButtonElement implements OnChanges { */ @Input() side: string = 'right'; /** - * The side of the button to display the icon. + * If a second icon is specified it will default to the opposite side as the primary icon. */ @Input() secondSide: string = this.side === 'right' ? 'left' : 'right'; /** @@ -103,6 +103,9 @@ export class NovoButtonElement implements OnChanges { return this._icon; } + /** + * A second icon can be specified, and it will take the opposite side of the primary icon. + */ @Input() set secondIcon(secondIcon: string) { if (secondIcon) { From 475290a9b1b65cf127d07bf656c7ae96658226db Mon Sep 17 00:00:00 2001 From: "michael.dill" Date: Wed, 8 Jan 2025 13:57:25 -0600 Subject: [PATCH 6/7] refactor using signals --- .../src/elements/button/Button.ts | 56 +++++++++++-------- 1 file changed, 34 insertions(+), 22 deletions(-) diff --git a/projects/novo-elements/src/elements/button/Button.ts b/projects/novo-elements/src/elements/button/Button.ts index f9baa1122..a30360c12 100644 --- a/projects/novo-elements/src/elements/button/Button.ts +++ b/projects/novo-elements/src/elements/button/Button.ts @@ -1,5 +1,15 @@ // NG2 -import { ChangeDetectionStrategy, Component, ElementRef, HostBinding, HostListener, Input, OnChanges, SimpleChanges } from '@angular/core'; +import { + ChangeDetectionStrategy, + Component, computed, + ElementRef, + HostBinding, + HostListener, input, + Input, + InputSignal, + OnChanges, signal, Signal, + SimpleChanges, WritableSignal, +} from '@angular/core'; import { BooleanInput, Helpers, Key } from 'novo-elements/utils'; @Component({ @@ -27,11 +37,11 @@ import { BooleanInput, Helpers, Key } from 'novo-elements/utils'; template: ` - + - + = computed(() => this.side === 'right' ? 'left' : 'right') /** * Sets the size of the button. One of: sm, lg */ @@ -91,31 +100,42 @@ export class NovoButtonElement implements OnChanges { @Input() loading: boolean; /** * Optionally display `bullhorn-icon` with the button along with the text. - * @deprecated */ @Input() set icon(icon: string) { if (icon) { - this._icon = `bhi-${icon}`; + this._icon.set(`bhi-${icon}`); } } get icon(): string { - return this._icon; + return this._icon(); } /** * A second icon can be specified, and it will take the opposite side of the primary icon. */ @Input() - set secondIcon(secondIcon: string) { - if (secondIcon) { - this._secondIcon = `bhi-${secondIcon}`; + set secondIcon(icon: string) { + if (icon) { + this._secondIcon.set(`bhi-${icon}`); } } get secondIcon(): string { - return this._secondIcon; + return this._secondIcon(); } + leftSideIconClass: Signal = computed(() => this.getIconClass('left')); + + rightSideIconClass: Signal = computed(() => this.getIconClass('right')); + + + getIconClass(side) { + if (side === this.side) { + return this._icon(); + } else if (side === this.secondSide()) { + return this._secondIcon(); + } + } /** * Make the button non-interactive. */ @@ -127,9 +147,9 @@ export class NovoButtonElement implements OnChanges { @HostBinding('attr.disabled') disabledAttr: undefined | '' = undefined; - private _icon: string; + private _icon: WritableSignal = signal(undefined); - private _secondIcon: string; + private _secondIcon: WritableSignal = signal(undefined); constructor(public element: ElementRef) {} @@ -150,12 +170,4 @@ export class NovoButtonElement implements OnChanges { focus(options?: FocusOptions): void { this.element.nativeElement.focus(options); } - - getIconClass(side) { - if (side === this.side) { - return this.icon; - } else if (side === this.secondSide) { - return this.secondIcon; - } - } } From 5a7c0fa651a205e83038ae5f29aa991f23c35005 Mon Sep 17 00:00:00 2001 From: "michael.dill" Date: Thu, 9 Jan 2025 14:49:30 -0600 Subject: [PATCH 7/7] a few updates to the signal logic, and margin for the example --- projects/novo-elements/src/elements/button/Button.ts | 12 ++---------- .../button-two-icon/button-two-icon-example.css | 4 ++++ 2 files changed, 6 insertions(+), 10 deletions(-) diff --git a/projects/novo-elements/src/elements/button/Button.ts b/projects/novo-elements/src/elements/button/Button.ts index a30360c12..194710d8a 100644 --- a/projects/novo-elements/src/elements/button/Button.ts +++ b/projects/novo-elements/src/elements/button/Button.ts @@ -124,18 +124,10 @@ export class NovoButtonElement implements OnChanges { return this._secondIcon(); } - leftSideIconClass: Signal = computed(() => this.getIconClass('left')); + leftSideIconClass: Signal = computed(() => this.side === 'left' ? this._icon() : this._secondIcon()); - rightSideIconClass: Signal = computed(() => this.getIconClass('right')); + rightSideIconClass: Signal = computed(() => this.side === 'right' ? this._icon() : this._secondIcon()); - - getIconClass(side) { - if (side === this.side) { - return this._icon(); - } else if (side === this.secondSide()) { - return this._secondIcon(); - } - } /** * Make the button non-interactive. */ diff --git a/projects/novo-examples/src/components/buttons/button-two-icon/button-two-icon-example.css b/projects/novo-examples/src/components/buttons/button-two-icon/button-two-icon-example.css index 743230875..456e536a4 100644 --- a/projects/novo-examples/src/components/buttons/button-two-icon/button-two-icon-example.css +++ b/projects/novo-examples/src/components/buttons/button-two-icon/button-two-icon-example.css @@ -1 +1,5 @@ /** No CSS for this example */ + +button { + margin: 1rem; +}