@feature23/ngx-mat-split-button 0.1.0

package/README.md

@@ -0,0 +1,49 @@
+# ngx-mat-split-button
+
+A split button component for Angular Material.
+
+## Installation
+
+```bash
+npm i --save @feature23/ngx-mat-split-button
+```
+
+## Usage
+
+Import `NgxMatSplitButton` and `NgxMatSplitButtonPrimaryAction` into either your standalone component's `imports` array, or the module in which it will be used.
+
+You likely will also need to import `MatMenuItem` from `@angular/material/menu`, if you want to use the attached menu as intended.
+
+Example:
+```html
+<ngx-mat-split-button color="primary" buttonStyle="raised" (primaryClick)="primaryClick()">
+    <ng-template ngx-mat-split-primary-action>
+        Primary action
+    </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>
+```
+
+The `ng-template` with the `ngx-mat-split-primary-action` directive is required to provide the inner content for the primary action button (the button to the left of the dropdown arrow).
+Anything else inside the `ngx-mat-split-button` component will be rendered in the dropdown menu, which internally is just a `mat-menu` with `xPosition="before"`.
+
+## Inputs
+
+The `ngx-mat-split-button` component has the following inputs to customize its appearance and behavior:
+
+| Input | Type | Description |
+| --- | --- | --- |
+| `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`.) |
+
+## Events
+
+The following output events are available to support interactivity:
+
+| Output | Event/Argument Type | Description |
+| --- | --- | --- |
+| `primaryClick` | `MouseEvent` | Emitted when the primary action 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.

package/ng-package.json

@@ -0,0 +1,7 @@
+{
+  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../dist/ngx-mat-split-button",
+  "lib": {
+    "entryFile": "src/public-api.ts"
+  }
+}

package/package.json

@@ -0,0 +1,15 @@
+{
+  "name": "@feature23/ngx-mat-split-button",
+  "version": "0.1.0",
+  "license": "MIT",
+  "private": false,
+  "peerDependencies": {
+    "@angular/common": "^18.2.0",
+    "@angular/core": "^18.2.0",
+    "@angular/material": "^18.2.0"
+  },
+  "dependencies": {
+    "tslib": "^2.3.0"
+  },
+  "sideEffects": false
+}

package/src/lib/ngx-mat-split-button.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { NgxMatSplitButton } from './ngx-mat-split-button.component';
+
+describe('NgxMatSplitButton', () => {
+  let component: NgxMatSplitButton;
+  let fixture: ComponentFixture<NgxMatSplitButton>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [NgxMatSplitButton]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(NgxMatSplitButton);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/lib/ngx-mat-split-button.component.ts

@@ -0,0 +1,109 @@
+import { CommonModule } from '@angular/common';
+import { Component, contentChild, inject, input, output } from '@angular/core';
+import { MatButton } from '@angular/material/button';
+import { MatIcon } from '@angular/material/icon';
+import { MatMenuModule } from '@angular/material/menu';
+import { NgxMatSplitButtonService } from './ngx-mat-split-button.service';
+import { NgxMatSplitPrimaryAction } from './ngx-mat-split-primary-action.directive';
+
+@Component({
+    selector: 'ngx-mat-split-button',
+    standalone: true,
+    imports: [
+        CommonModule,
+        MatButton,
+        MatIcon,
+        MatMenuModule,
+    ],
+    // NOTE: the repetitive code here is required because it doesn't appear that you can conditionally add directives like `mat-button` vs `mat-flat-button`.
+    template: `
+    @if (buttonStyle() === 'basic') {
+        <button mat-button [color]="color()" (click)="primaryClick.emit($event)"
+            class="ngx-mat-split-button-primary ngx-mat-split-button-basic">
+            <ng-container [ngTemplateOutlet]="primaryAction().templateRef" />
+        </button>
+        <button mat-button [color]="color()" [matMenuTriggerFor]="menu"
+            class="ngx-mat-split-button-trigger"
+            aria-label="Toggle dropdown">
+            <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">
+                <ng-container [ngTemplateOutlet]="primaryAction().templateRef" />
+            </button>
+            <button mat-flat-button [color]="color()" [matMenuTriggerFor]="menu"
+                class="ngx-mat-split-button-trigger"
+                aria-label="Toggle dropdown">
+                <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">
+            <ng-container [ngTemplateOutlet]="primaryAction().templateRef" />
+        </button>
+        <button mat-stroked-button [color]="color()" [matMenuTriggerFor]="menu"
+            class="ngx-mat-split-button-trigger"
+            aria-label="Toggle dropdown">
+            <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">
+            <ng-container [ngTemplateOutlet]="primaryAction().templateRef" />
+        </button>
+        <button mat-flat-button [color]="color()" [matMenuTriggerFor]="menu"
+            class="ngx-mat-split-button-trigger"
+            aria-label="Toggle dropdown">
+            <mat-icon svgIcon="ngx-mat-split-arrow-down-icon" aria-label="Down arrow icon" />
+        </button>
+    }
+    <mat-menu #menu="matMenu" xPosition="before">
+        <ng-content />
+    </mat-menu>
+  `,
+    styles: `
+    .ngx-mat-split-button-primary {
+        border-top-right-radius: 0;
+        border-bottom-right-radius: 0;
+    }
+    .ngx-mat-split-button-trigger {
+        border-top-left-radius: 0;
+        border-bottom-left-radius: 0;
+        border-left-width: 0;
+        min-width: 3rem;
+
+        mat-icon {
+            --mat-text-button-icon-spacing: 0;
+            --mat-filled-button-icon-spacing: 0;
+            --mat-protected-button-icon-spacing: 0;
+            --mat-outlined-button-icon-spacing: 0;
+        }
+    }
+    .ngx-mat-split-button-raised-wrapper {
+        display: inline-block;
+        border-radius: var(--mdc-filled-button-container-shape, var(--mat-app-corner-full));
+        box-shadow: var(--mdc-protected-button-container-elevation-shadow, var(--mat-app-level1));
+    }
+    .ngx-mat-split-button-flat {
+        mat-icon svg {
+            fill: var(--mdc-filled-button-label-text-color, var(--mat-app-on-primary));
+        }
+    }
+    `
+})
+export class NgxMatSplitButton {
+    readonly color = input<string>();
+    readonly buttonStyle = input<'basic' | 'raised' | 'stroked' | 'flat'>('basic');
+
+    readonly primaryClick = output<MouseEvent>();
+
+    readonly primaryAction = contentChild.required(NgxMatSplitPrimaryAction);
+
+    constructor() {
+        const service = inject(NgxMatSplitButtonService);
+        service.initialize();
+    }
+}

package/src/lib/ngx-mat-split-button.service.ts

@@ -0,0 +1,23 @@
+import { inject, Injectable } from '@angular/core';
+import { MatIconRegistry } from '@angular/material/icon';
+import { DomSanitizer } from '@angular/platform-browser';
+
+const ARROW_DOWN_ICON = `
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"><path d="M0 0h24v24H0z" fill="none"/><path d="M7 10l5 5 5-5z"/></svg>
+`;
+
+@Injectable({
+    providedIn: 'root'
+})
+export class NgxMatSplitButtonService {
+
+    constructor() {
+        const iconRegistry = inject(MatIconRegistry);
+        const sanitizer = inject(DomSanitizer);
+        iconRegistry.addSvgIconLiteral('ngx-mat-split-arrow-down-icon', sanitizer.bypassSecurityTrustHtml(ARROW_DOWN_ICON));
+    }
+
+    initialize() {
+        // noop, ensure service is injected and constructor run
+    }
+}

package/src/lib/ngx-mat-split-primary-action.directive.ts

@@ -0,0 +1,10 @@
+import { Directive, TemplateRef } from '@angular/core';
+
+@Directive({
+    selector: '[ngx-mat-split-primary-action]',
+    standalone: true,
+})
+export class NgxMatSplitPrimaryAction {
+    constructor(public templateRef: TemplateRef<unknown>) {
+    }
+ }

package/src/public-api.ts

@@ -0,0 +1,6 @@
+/*
+ * Public API Surface of ngx-mat-split-button
+ */
+
+export * from './lib/ngx-mat-split-button.component';
+export * from './lib/ngx-mat-split-primary-action.directive';

package/tsconfig.lib.json

@@ -0,0 +1,15 @@
+/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
+/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../out-tsc/lib",
+    "declaration": true,
+    "declarationMap": true,
+    "inlineSources": true,
+    "types": []
+  },
+  "exclude": [
+    "**/*.spec.ts"
+  ]
+}

package/tsconfig.lib.prod.json

@@ -0,0 +1,11 @@
+/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
+/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
+{
+  "extends": "./tsconfig.lib.json",
+  "compilerOptions": {
+    "declarationMap": false
+  },
+  "angularCompilerOptions": {
+    "compilationMode": "partial"
+  }
+}

package/tsconfig.spec.json

@@ -0,0 +1,15 @@
+/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
+/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../out-tsc/spec",
+    "types": [
+      "jasmine"
+    ]
+  },
+  "include": [
+    "**/*.spec.ts",
+    "**/*.d.ts"
+  ]
+}