Skip to content

Commit 63d0869

Browse files
paulirwinpaulirwin
committed
Add ability to disable primary and trigger buttons; emit trigger click event
1 parent 7f12d10 commit 63d0869

File tree

5 files changed

+92
-9
lines changed

5 files changed

+92
-9
lines changed

‎projects/ngx-mat-split-button-demo/src/app/app.component.html‎

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,22 @@ <h2>Basic Style</h2>
3535
<button mat-menu-item (click)="secondaryClick()">Item 2</button>
3636
<button mat-menu-item (click)="secondaryClick()">Item 3</button>
3737
</ngx-mat-split-button>
38+
<ngx-mat-split-button color="primary" (primaryClick)="primaryClick()" [primaryDisabled]="true">
39+
<ng-template ngx-mat-split-primary-action>
40+
Primary disabled
41+
</ng-template>
42+
<button mat-menu-item (click)="secondaryClick()">Item 1</button>
43+
<button mat-menu-item (click)="secondaryClick()">Item 2</button>
44+
<button mat-menu-item (click)="secondaryClick()">Item 3</button>
45+
</ngx-mat-split-button>
46+
<ngx-mat-split-button color="primary" (primaryClick)="primaryClick()" [menuTriggerDisabled]="true">
47+
<ng-template ngx-mat-split-primary-action>
48+
Trigger disabled
49+
</ng-template>
50+
<button mat-menu-item (click)="secondaryClick()">Item 1</button>
51+
<button mat-menu-item (click)="secondaryClick()">Item 2</button>
52+
<button mat-menu-item (click)="secondaryClick()">Item 3</button>
53+
</ngx-mat-split-button>
3854
</div>
3955

4056
<div class="col">
@@ -71,6 +87,22 @@ <h2>Flat Style</h2>
7187
<button mat-menu-item (click)="secondaryClick()">Item 2</button>
7288
<button mat-menu-item (click)="secondaryClick()">Item 3</button>
7389
</ngx-mat-split-button>
90+
<ngx-mat-split-button color="primary" buttonStyle="flat" (primaryClick)="primaryClick()" [primaryDisabled]="true">
91+
<ng-template ngx-mat-split-primary-action>
92+
Primary disabled
93+
</ng-template>
94+
<button mat-menu-item (click)="secondaryClick()">Item 1</button>
95+
<button mat-menu-item (click)="secondaryClick()">Item 2</button>
96+
<button mat-menu-item (click)="secondaryClick()">Item 3</button>
97+
</ngx-mat-split-button>
98+
<ngx-mat-split-button color="primary" buttonStyle="flat" (primaryClick)="primaryClick()" [menuTriggerDisabled]="true">
99+
<ng-template ngx-mat-split-primary-action>
100+
Trigger disabled
101+
</ng-template>
102+
<button mat-menu-item (click)="secondaryClick()">Item 1</button>
103+
<button mat-menu-item (click)="secondaryClick()">Item 2</button>
104+
<button mat-menu-item (click)="secondaryClick()">Item 3</button>
105+
</ngx-mat-split-button>
74106
</div>
75107

76108
<div class="col">
@@ -107,6 +139,22 @@ <h2>Raised Style</h2>
107139
<button mat-menu-item (click)="secondaryClick()">Item 2</button>
108140
<button mat-menu-item (click)="secondaryClick()">Item 3</button>
109141
</ngx-mat-split-button>
142+
<ngx-mat-split-button color="primary" buttonStyle="raised" (primaryClick)="primaryClick()" [primaryDisabled]="true">
143+
<ng-template ngx-mat-split-primary-action>
144+
Primary disabled
145+
</ng-template>
146+
<button mat-menu-item (click)="secondaryClick()">Item 1</button>
147+
<button mat-menu-item (click)="secondaryClick()">Item 2</button>
148+
<button mat-menu-item (click)="secondaryClick()">Item 3</button>
149+
</ngx-mat-split-button>
150+
<ngx-mat-split-button color="primary" buttonStyle="raised" (primaryClick)="primaryClick()" [menuTriggerDisabled]="true">
151+
<ng-template ngx-mat-split-primary-action>
152+
Trigger disabled
153+
</ng-template>
154+
<button mat-menu-item (click)="secondaryClick()">Item 1</button>
155+
<button mat-menu-item (click)="secondaryClick()">Item 2</button>
156+
<button mat-menu-item (click)="secondaryClick()">Item 3</button>
157+
</ngx-mat-split-button>
110158
</div>
111159

112160
<div class="col">
@@ -143,5 +191,21 @@ <h2>Stroked Style</h2>
143191
<button mat-menu-item (click)="secondaryClick()">Item 2</button>
144192
<button mat-menu-item (click)="secondaryClick()">Item 3</button>
145193
</ngx-mat-split-button>
194+
<ngx-mat-split-button color="primary" buttonStyle="stroked" (primaryClick)="primaryClick()" [primaryDisabled]="true">
195+
<ng-template ngx-mat-split-primary-action>
196+
Primary disabled
197+
</ng-template>
198+
<button mat-menu-item (click)="secondaryClick()">Item 1</button>
199+
<button mat-menu-item (click)="secondaryClick()">Item 2</button>
200+
<button mat-menu-item (click)="secondaryClick()">Item 3</button>
201+
</ngx-mat-split-button>
202+
<ngx-mat-split-button color="primary" buttonStyle="stroked" (primaryClick)="primaryClick()" [menuTriggerDisabled]="true">
203+
<ng-template ngx-mat-split-primary-action>
204+
Trigger disabled
205+
</ng-template>
206+
<button mat-menu-item (click)="secondaryClick()">Item 1</button>
207+
<button mat-menu-item (click)="secondaryClick()">Item 2</button>
208+
<button mat-menu-item (click)="secondaryClick()">Item 3</button>
209+
</ngx-mat-split-button>
146210
</div>
147211
</div>

‎projects/ngx-mat-split-button-demo/src/app/app.component.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@
88
.grid {
99
display: grid;
1010
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
11+
gap: 1rem;
1112

1213
.col {
1314
display: flex;

‎projects/ngx-mat-split-button/README.md‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,8 @@ The `ngx-mat-split-button` component has the following inputs to customize its a
3737
| --- | --- | --- |
3838
| `color` | `'primary' \| 'accent' \| 'warn' \| undefined` | (Optional; default `undefined`) The color of the primary action button. (Material 2 themes only.) |
3939
| `buttonStyle` | `'raised' \| 'stroked' \| 'flat' \| 'basic'` | (Optional; default `'basic'`) The style of the primary action button. These map to the equivalent [Angular Material Button directives](https://material.angular.io/components/button/overview), with `raised` being slightly different in the DOM than the others due to needing a unified shadow. (`raised` style uses `mat-flat-button` internally with a `box-shadow`.) |
40+
| `primaryDisabled` | `boolean` | (Optional; default `false`) Whether the primary action button should be disabled. |
41+
| `menuTriggerDisabled` | `boolean` | (Optional; default `false`) Whether the dropdown menu trigger button should be disabled. |
4042

4143
## Events
4244

@@ -45,5 +47,6 @@ The following output events are available to support interactivity:
4547
| Output | Event/Argument Type | Description |
4648
| --- | --- | --- |
4749
| `primaryClick` | `MouseEvent` | Emitted when the primary action button is clicked. |
50+
| `menuTriggerClick` | `MouseEvent` | Emitted when the dropdown menu trigger button is clicked. |
4851

4952
To handle clicks on the secondary action buttons, you can simply add `(click)="handler()"` to the buttons you provide inside the `ngx-mat-split-button` component.

‎projects/ngx-mat-split-button/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@feature23/ngx-mat-split-button",
3-
"version": "0.1.2",
3+
"version": "0.2.0",
44
"license": "MIT",
55
"private": false,
66
"repository": {

‎projects/ngx-mat-split-button/src/lib/ngx-mat-split-button.component.ts‎

Lines changed: 23 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -19,44 +19,56 @@ import { NgxMatSplitPrimaryAction } from './ngx-mat-split-primary-action.directi
1919
template: `
2020
@if (buttonStyle() === 'basic') {
2121
<button mat-button [color]="color()" (click)="primaryClick.emit($event)"
22-
class="ngx-mat-split-button-primary ngx-mat-split-button-basic">
22+
class="ngx-mat-split-button-primary ngx-mat-split-button-basic"
23+
[disabled]="primaryDisabled()">
2324
<ng-container [ngTemplateOutlet]="primaryAction().templateRef" />
2425
</button>
2526
<button mat-button [color]="color()" [matMenuTriggerFor]="menu"
2627
class="ngx-mat-split-button-trigger"
27-
aria-label="Toggle dropdown">
28+
aria-label="Toggle menu"
29+
[disabled]="menuTriggerDisabled()"
30+
(click)="menuTriggerClick.emit($event)">
2831
<mat-icon svgIcon="ngx-mat-split-arrow-down-icon" aria-label="Down arrow icon" />
2932
</button>
3033
} @else if (buttonStyle() === 'raised') {
3134
<div class="ngx-mat-split-button-raised-wrapper">
3235
<button mat-flat-button [color]="color()" (click)="primaryClick.emit($event)"
33-
class="ngx-mat-split-button-primary ngx-mat-split-button-raised">
36+
class="ngx-mat-split-button-primary ngx-mat-split-button-raised"
37+
[disabled]="primaryDisabled()">
3438
<ng-container [ngTemplateOutlet]="primaryAction().templateRef" />
3539
</button>
3640
<button mat-flat-button [color]="color()" [matMenuTriggerFor]="menu"
3741
class="ngx-mat-split-button-trigger"
38-
aria-label="Toggle dropdown">
42+
aria-label="Toggle menu"
43+
[disabled]="menuTriggerDisabled()"
44+
(click)="menuTriggerClick.emit($event)">
3945
<mat-icon svgIcon="ngx-mat-split-arrow-down-icon" aria-label="Down arrow icon" />
4046
</button>
4147
</div>
4248
} @else if (buttonStyle() === 'stroked') {
4349
<button mat-stroked-button [color]="color()" (click)="primaryClick.emit($event)"
44-
class="ngx-mat-split-button-primary ngx-mat-split-button-stroked">
50+
class="ngx-mat-split-button-primary ngx-mat-split-button-stroked"
51+
[disabled]="primaryDisabled()">
4552
<ng-container [ngTemplateOutlet]="primaryAction().templateRef" />
4653
</button>
4754
<button mat-stroked-button [color]="color()" [matMenuTriggerFor]="menu"
4855
class="ngx-mat-split-button-trigger"
49-
aria-label="Toggle dropdown">
56+
aria-label="Toggle menu"
57+
[disabled]="menuTriggerDisabled()"
58+
(click)="menuTriggerClick.emit($event)">
5059
<mat-icon svgIcon="ngx-mat-split-arrow-down-icon" aria-label="Down arrow icon" />
5160
</button>
5261
} @else if (buttonStyle() === 'flat') {
5362
<button mat-flat-button [color]="color()" (click)="primaryClick.emit($event)"
54-
class="ngx-mat-split-button-primary ngx-mat-split-button-flat">
63+
class="ngx-mat-split-button-primary ngx-mat-split-button-flat"
64+
[disabled]="primaryDisabled()">
5565
<ng-container [ngTemplateOutlet]="primaryAction().templateRef" />
5666
</button>
5767
<button mat-flat-button [color]="color()" [matMenuTriggerFor]="menu"
5868
class="ngx-mat-split-button-trigger"
59-
aria-label="Toggle dropdown">
69+
aria-label="Toggle menu"
70+
[disabled]="menuTriggerDisabled()"
71+
(click)="menuTriggerClick.emit($event)">
6072
<mat-icon svgIcon="ngx-mat-split-arrow-down-icon" aria-label="Down arrow icon" />
6173
</button>
6274
}
@@ -97,8 +109,11 @@ import { NgxMatSplitPrimaryAction } from './ngx-mat-split-primary-action.directi
97109
export class NgxMatSplitButton {
98110
readonly color = input<string>();
99111
readonly buttonStyle = input<'basic' | 'raised' | 'stroked' | 'flat'>('basic');
112+
readonly primaryDisabled = input<boolean>();
113+
readonly menuTriggerDisabled = input<boolean>();
100114

101115
readonly primaryClick = output<MouseEvent>();
116+
readonly menuTriggerClick = output<MouseEvent>();
102117

103118
readonly primaryAction = contentChild.required(NgxMatSplitPrimaryAction);
104119

0 commit comments

Comments
 (0)