diff --git a/projects/novo-elements/src/elements/button/Button.ts b/projects/novo-elements/src/elements/button/Button.ts index 016d51d36..194710d8a 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 */ @@ -87,18 +100,34 @@ 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(icon: string) { + if (icon) { + this._secondIcon.set(`bhi-${icon}`); + } + } + get secondIcon(): string { + return this._secondIcon(); + } + + leftSideIconClass: Signal = computed(() => this.side === 'left' ? this._icon() : this._secondIcon()); + + rightSideIconClass: Signal = computed(() => this.side === 'right' ? this._icon() : this._secondIcon()); + /** * Make the button non-interactive. */ @@ -110,7 +139,9 @@ export class NovoButtonElement implements OnChanges { @HostBinding('attr.disabled') disabledAttr: undefined | '' = undefined; - private _icon: string; + private _icon: WritableSignal = signal(undefined); + + private _secondIcon: WritableSignal = signal(undefined); constructor(public element: ElementRef) {} diff --git a/projects/novo-elements/src/elements/data-table/interfaces.ts b/projects/novo-elements/src/elements/data-table/interfaces.ts index 52d116e66..d31703408 100644 --- a/projects/novo-elements/src/elements/data-table/interfaces.ts +++ b/projects/novo-elements/src/elements/data-table/interfaces.ts @@ -173,7 +173,7 @@ export interface IDataTableSort { export interface IDataTableFilter { id: string; - value: string | string[]; + value: any; transform?: Function; type?: string; selectedOption?: Object; diff --git a/projects/novo-elements/src/elements/field/field-fill.scss b/projects/novo-elements/src/elements/field/field-fill.scss index 10774fed3..ddc638ada 100644 --- a/projects/novo-elements/src/elements/field/field-fill.scss +++ b/projects/novo-elements/src/elements/field/field-fill.scss @@ -43,6 +43,22 @@ border-bottom: 1px solid $negative !important; } } + &.novo-field-disabled { + .novo-field-input { + color: $grey !important; + border-bottom: 1px dashed $grey !important; + } + &:not(.novo-focused):hover { + .novo-field-input { + color: $grey !important; + border-bottom: 1px dashed $grey !important; + } + } + } + .novo-field-input:disabled { + color: $grey !important; + border-bottom: 1px dashed $grey !important; + } } } } diff --git a/projects/novo-elements/src/elements/field/field-standard.scss b/projects/novo-elements/src/elements/field/field-standard.scss index b4e519d90..50e4a39ea 100644 --- a/projects/novo-elements/src/elements/field/field-standard.scss +++ b/projects/novo-elements/src/elements/field/field-standard.scss @@ -22,6 +22,22 @@ border-bottom: 1px solid $negative !important; } } + &.novo-field-disabled { + .novo-field-input { + color: $grey !important; + border-bottom: 1px dashed $grey !important; + } + &:not(.novo-focused):hover { + .novo-field-input { + color: $grey !important; + border-bottom: 1px dashed $grey !important; + } + } + } + .novo-field-input:disabled { + color: $grey !important; + border-bottom: 1px dashed $grey !important; + } } } } diff --git a/projects/novo-elements/src/elements/select/Select.scss b/projects/novo-elements/src/elements/select/Select.scss index 2d8399535..f1af96970 100644 --- a/projects/novo-elements/src/elements/select/Select.scss +++ b/projects/novo-elements/src/elements/select/Select.scss @@ -57,11 +57,24 @@ right: 0px; } } - &[disabled] { + &[disabled], + &.novo-select-disabled { pointer-events: none; div[type="button"] { color: $grey; } + i { + color: $grey !important; + } + .novo-select-trigger { + color: $grey !important; + border-bottom: 1px dashed $grey !important; + + &:hover { + color: $grey !important; + border-bottom: 1px dashed $grey !important; + } + } } } diff --git a/projects/novo-examples/src/components/buttons/button-examples.md b/projects/novo-examples/src/components/buttons/button-examples.md index 1358d7929..3b56c6d38 100644 --- a/projects/novo-examples/src/components/buttons/button-examples.md +++ b/projects/novo-examples/src/components/buttons/button-examples.md @@ -68,3 +68,9 @@ Button parameters can be dynamically set and change at runtime. The styles shoul Buttons can display a loading state when given the "loading" parameter. When loading is true the button will be disabled and get a loading spinner. + +## 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..456e536a4 --- /dev/null +++ b/projects/novo-examples/src/components/buttons/button-two-icon/button-two-icon-example.css @@ -0,0 +1,5 @@ +/** No CSS for this example */ + +button { + margin: 1rem; +} 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';