Add ability to disable primary and trigger buttons; emit trigger clic…

…k event
feature23 · Nov 19, 2024 · 63d0869 · 63d0869
1 parent 7f12d10
commit 63d0869
Show file tree

Hide file tree

Showing 5 changed files with 92 additions and 9 deletions.
diff --git a/projects/ngx-mat-split-button-demo/src/app/app.component.html b/projects/ngx-mat-split-button-demo/src/app/app.component.html
@@ -35,6 +35,22 @@ <h2>Basic Style</h2>
             <button mat-menu-item (click)="secondaryClick()">Item 2</button>
             <button mat-menu-item (click)="secondaryClick()">Item 3</button>
         </ngx-mat-split-button>
+        <ngx-mat-split-button color="primary" (primaryClick)="primaryClick()" [primaryDisabled]="true">
+            <ng-template ngx-mat-split-primary-action>
+                Primary disabled
+            </ng-template>
+            <button mat-menu-item (click)="secondaryClick()">Item 1</button>
+            <button mat-menu-item (click)="secondaryClick()">Item 2</button>
+            <button mat-menu-item (click)="secondaryClick()">Item 3</button>
+        </ngx-mat-split-button>
+        <ngx-mat-split-button color="primary" (primaryClick)="primaryClick()" [menuTriggerDisabled]="true">
+            <ng-template ngx-mat-split-primary-action>
+                Trigger disabled
+            </ng-template>
+            <button mat-menu-item (click)="secondaryClick()">Item 1</button>
+            <button mat-menu-item (click)="secondaryClick()">Item 2</button>
+            <button mat-menu-item (click)="secondaryClick()">Item 3</button>
+        </ngx-mat-split-button>
     </div>
 
     <div class="col">
@@ -71,6 +87,22 @@ <h2>Flat Style</h2>
             <button mat-menu-item (click)="secondaryClick()">Item 2</button>
             <button mat-menu-item (click)="secondaryClick()">Item 3</button>
         </ngx-mat-split-button>
+        <ngx-mat-split-button color="primary" buttonStyle="flat" (primaryClick)="primaryClick()" [primaryDisabled]="true">
+            <ng-template ngx-mat-split-primary-action>
+                Primary disabled
+            </ng-template>
+            <button mat-menu-item (click)="secondaryClick()">Item 1</button>
+            <button mat-menu-item (click)="secondaryClick()">Item 2</button>
+            <button mat-menu-item (click)="secondaryClick()">Item 3</button>
+        </ngx-mat-split-button>
+        <ngx-mat-split-button color="primary" buttonStyle="flat" (primaryClick)="primaryClick()" [menuTriggerDisabled]="true">
+            <ng-template ngx-mat-split-primary-action>
+                Trigger disabled
+            </ng-template>
+            <button mat-menu-item (click)="secondaryClick()">Item 1</button>
+            <button mat-menu-item (click)="secondaryClick()">Item 2</button>
+            <button mat-menu-item (click)="secondaryClick()">Item 3</button>
+        </ngx-mat-split-button>
     </div>
 
     <div class="col">
@@ -107,6 +139,22 @@ <h2>Raised Style</h2>
             <button mat-menu-item (click)="secondaryClick()">Item 2</button>
             <button mat-menu-item (click)="secondaryClick()">Item 3</button>
         </ngx-mat-split-button>
+        <ngx-mat-split-button color="primary" buttonStyle="raised" (primaryClick)="primaryClick()" [primaryDisabled]="true">
+            <ng-template ngx-mat-split-primary-action>
+                Primary disabled
+            </ng-template>
+            <button mat-menu-item (click)="secondaryClick()">Item 1</button>
+            <button mat-menu-item (click)="secondaryClick()">Item 2</button>
+            <button mat-menu-item (click)="secondaryClick()">Item 3</button>
+        </ngx-mat-split-button>
+        <ngx-mat-split-button color="primary" buttonStyle="raised" (primaryClick)="primaryClick()" [menuTriggerDisabled]="true">
+            <ng-template ngx-mat-split-primary-action>
+                Trigger disabled
+            </ng-template>
+            <button mat-menu-item (click)="secondaryClick()">Item 1</button>
+            <button mat-menu-item (click)="secondaryClick()">Item 2</button>
+            <button mat-menu-item (click)="secondaryClick()">Item 3</button>
+        </ngx-mat-split-button>
     </div>
 
     <div class="col">
@@ -143,5 +191,21 @@ <h2>Stroked Style</h2>
             <button mat-menu-item (click)="secondaryClick()">Item 2</button>
             <button mat-menu-item (click)="secondaryClick()">Item 3</button>
         </ngx-mat-split-button>
+        <ngx-mat-split-button color="primary" buttonStyle="stroked" (primaryClick)="primaryClick()" [primaryDisabled]="true">
+            <ng-template ngx-mat-split-primary-action>
+                Primary disabled
+            </ng-template>
+            <button mat-menu-item (click)="secondaryClick()">Item 1</button>
+            <button mat-menu-item (click)="secondaryClick()">Item 2</button>
+            <button mat-menu-item (click)="secondaryClick()">Item 3</button>
+        </ngx-mat-split-button>
+        <ngx-mat-split-button color="primary" buttonStyle="stroked" (primaryClick)="primaryClick()" [menuTriggerDisabled]="true">
+            <ng-template ngx-mat-split-primary-action>
+                Trigger disabled
+            </ng-template>
+            <button mat-menu-item (click)="secondaryClick()">Item 1</button>
+            <button mat-menu-item (click)="secondaryClick()">Item 2</button>
+            <button mat-menu-item (click)="secondaryClick()">Item 3</button>
+        </ngx-mat-split-button>
     </div>
 </div>
diff --git a/projects/ngx-mat-split-button-demo/src/app/app.component.scss b/projects/ngx-mat-split-button-demo/src/app/app.component.scss
@@ -8,6 +8,7 @@
 .grid {
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+    gap: 1rem;
 
     .col {
         display: flex;

diff --git a/projects/ngx-mat-split-button/README.md b/projects/ngx-mat-split-button/README.md
@@ -37,6 +37,8 @@ The `ngx-mat-split-button` component has the following inputs to customize its a
 | --- | --- | --- |
 | `color` | `'primary' \| 'accent' \| 'warn' \| undefined` | (Optional; default `undefined`) The color of the primary action button. (Material 2 themes only.) |
 | `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`.) |
+| `primaryDisabled` | `boolean` | (Optional; default `false`) Whether the primary action button should be disabled. |
+| `menuTriggerDisabled` | `boolean` | (Optional; default `false`) Whether the dropdown menu trigger button should be disabled. |
 
 ## Events
 
@@ -45,5 +47,6 @@ The following output events are available to support interactivity:
 | Output | Event/Argument Type | Description |
 | --- | --- | --- |
 | `primaryClick` | `MouseEvent` | Emitted when the primary action button is clicked. |
+| `menuTriggerClick` | `MouseEvent` | Emitted when the dropdown menu trigger button is clicked. |
 
 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.
diff --git a/projects/ngx-mat-split-button/package.json b/projects/ngx-mat-split-button/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@feature23/ngx-mat-split-button",
-  "version": "0.1.2",
+  "version": "0.2.0",
   "license": "MIT",
   "private": false,
   "repository": {

diff --git a/projects/ngx-mat-split-button/src/lib/ngx-mat-split-button.component.ts b/projects/ngx-mat-split-button/src/lib/ngx-mat-split-button.component.ts
@@ -19,44 +19,56 @@ import { NgxMatSplitPrimaryAction } from './ngx-mat-split-primary-action.directi
     template: `
     @if (buttonStyle() === 'basic') {
         <button mat-button [color]="color()" (click)="primaryClick.emit($event)"
-            class="ngx-mat-split-button-primary ngx-mat-split-button-basic">
+            class="ngx-mat-split-button-primary ngx-mat-split-button-basic"
+            [disabled]="primaryDisabled()">
             <ng-container [ngTemplateOutlet]="primaryAction().templateRef" />
         </button>
         <button mat-button [color]="color()" [matMenuTriggerFor]="menu"
             class="ngx-mat-split-button-trigger"
-            aria-label="Toggle dropdown">
+            aria-label="Toggle menu"
+            [disabled]="menuTriggerDisabled()"
+            (click)="menuTriggerClick.emit($event)">
             <mat-icon svgIcon="ngx-mat-split-arrow-down-icon" aria-label="Down arrow icon" />
         </button>
     } @else if (buttonStyle() === 'raised') {
         <div class="ngx-mat-split-button-raised-wrapper">
             <button mat-flat-button [color]="color()" (click)="primaryClick.emit($event)"
-                class="ngx-mat-split-button-primary ngx-mat-split-button-raised">
+                class="ngx-mat-split-button-primary ngx-mat-split-button-raised"
+                [disabled]="primaryDisabled()">
                 <ng-container [ngTemplateOutlet]="primaryAction().templateRef" />
             </button>
             <button mat-flat-button [color]="color()" [matMenuTriggerFor]="menu"
                 class="ngx-mat-split-button-trigger"
-                aria-label="Toggle dropdown">
+                aria-label="Toggle menu"
+                [disabled]="menuTriggerDisabled()"
+                (click)="menuTriggerClick.emit($event)">
                 <mat-icon svgIcon="ngx-mat-split-arrow-down-icon" aria-label="Down arrow icon" />
             </button>
         </div>
     } @else if (buttonStyle() === 'stroked') {
         <button mat-stroked-button [color]="color()" (click)="primaryClick.emit($event)"
-            class="ngx-mat-split-button-primary ngx-mat-split-button-stroked">
+            class="ngx-mat-split-button-primary ngx-mat-split-button-stroked"
+            [disabled]="primaryDisabled()">
             <ng-container [ngTemplateOutlet]="primaryAction().templateRef" />
         </button>
         <button mat-stroked-button [color]="color()" [matMenuTriggerFor]="menu"
             class="ngx-mat-split-button-trigger"
-            aria-label="Toggle dropdown">
+            aria-label="Toggle menu"
+            [disabled]="menuTriggerDisabled()"
+            (click)="menuTriggerClick.emit($event)">
             <mat-icon svgIcon="ngx-mat-split-arrow-down-icon" aria-label="Down arrow icon" />
         </button>
     } @else if (buttonStyle() === 'flat') {
         <button mat-flat-button [color]="color()" (click)="primaryClick.emit($event)"
-            class="ngx-mat-split-button-primary ngx-mat-split-button-flat">
+            class="ngx-mat-split-button-primary ngx-mat-split-button-flat"
+            [disabled]="primaryDisabled()">
             <ng-container [ngTemplateOutlet]="primaryAction().templateRef" />
         </button>
         <button mat-flat-button [color]="color()" [matMenuTriggerFor]="menu"
             class="ngx-mat-split-button-trigger"
-            aria-label="Toggle dropdown">
+            aria-label="Toggle menu"
+            [disabled]="menuTriggerDisabled()"
+            (click)="menuTriggerClick.emit($event)">
             <mat-icon svgIcon="ngx-mat-split-arrow-down-icon" aria-label="Down arrow icon" />
         </button>
     }
@@ -97,8 +109,11 @@ import { NgxMatSplitPrimaryAction } from './ngx-mat-split-primary-action.directi
 export class NgxMatSplitButton {
     readonly color = input<string>();
     readonly buttonStyle = input<'basic' | 'raised' | 'stroked' | 'flat'>('basic');
+    readonly primaryDisabled = input<boolean>();
+    readonly menuTriggerDisabled = input<boolean>();
 
     readonly primaryClick = output<MouseEvent>();
+    readonly menuTriggerClick = output<MouseEvent>();
 
     readonly primaryAction = contentChild.required(NgxMatSplitPrimaryAction);