@softwarity/split-button 1.0.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 softwarity
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,216 @@
+<p align="center">
+  <a href="https://www.softwarity.io/">
+    <img src="https://www.softwarity.io/img/softwarity.svg" alt="Softwarity" height="60">
+  </a>
+</p>
+
+# @softwarity/split-button
+
+<p align="center">
+  <a href="https://www.npmjs.com/package/@softwarity/split-button">
+    <img src="https://img.shields.io/npm/v/@softwarity/split-button?color=blue&label=npm" alt="npm version">
+  </a>
+  <a href="https://github.com/softwarity/split-button/blob/main/LICENSE">
+    <img src="https://img.shields.io/badge/license-MIT-blue" alt="license">
+  </a>
+  <a href="https://github.com/softwarity/split-button/actions/workflows/main.yml">
+    <img src="https://github.com/softwarity/split-button/actions/workflows/main.yml/badge.svg" alt="build status">
+  </a>
+</p>
+
+An Angular directive that creates a [Material Design 3 split button](https://m3.material.io/components/buttons/overview) with a dropdown menu for secondary actions.
+
+**[Live Demo](https://softwarity.github.io/split-button/)** | **[Release Notes](RELEASE_NOTES.md)**
+
+<p align="center">
+  <a href="https://softwarity.github.io/split-button/">
+    <img src="projects/demo/src/assets/preview.png" alt="Split Button Preview" width="400">
+  </a>
+</p>
+
+## Features
+
+- **Material Design 3 Compliant** - Follows M3 button specifications
+- **5 Button Variants** - Text, Filled, Tonal, Outlined, Elevated
+- **Responsive to Theme** - Automatically adapts to light/dark color schemes
+- **MatMenu Integration** - Works seamlessly with Angular Material's menu component
+- **Material 3 Ready** - Uses M3 design tokens for theming (`--mat-sys-*`)
+- **Standalone Directive** - Easy to import in any Angular 21+ application
+- **Accessible** - Keyboard navigation and ARIA support
+
+## Installation
+
+```bash
+npm install @softwarity/split-button
+```
+
+### Peer Dependencies
+
+| Package | Version |
+|---------|---------|
+| @angular/core | >= 21.0.0 |
+| @angular/material | >= 21.0.0 |
+
+## Usage
+
+### 1. Import the directive in your component
+
+```typescript
+import { SplitButtonDirective } from '@softwarity/split-button';
+import { MatMenuModule } from '@angular/material/menu';
+
+@Component({
+  selector: 'app-my-component',
+  imports: [SplitButtonDirective, MatMenuModule],
+  template: `...`
+})
+export class MyComponent {}
+```
+
+### 2. Add the `appSplitButton` directive to your button
+
+```html
+<!-- Text button (default) -->
+<button appSplitButton [appSplitButtonTrigger]="trigger" (click)="onSave()">
+  Save
+</button>
+<span [matMenuTriggerFor]="menu" #trigger="matMenuTrigger"></span>
+<mat-menu #menu="matMenu">
+  <button mat-menu-item (click)="onSaveAs()">Save As...</button>
+  <button mat-menu-item (click)="onSaveDraft()">Save Draft</button>
+</mat-menu>
+
+<!-- Filled variant -->
+<button appSplitButton="filled" [appSplitButtonTrigger]="trigger" (click)="onSubmit()">
+  Submit
+</button>
+
+<!-- Outlined variant -->
+<button appSplitButton="outlined" [appSplitButtonTrigger]="trigger" (click)="onAction()">
+  Action
+</button>
+
+<!-- Tonal variant -->
+<button appSplitButton="tonal" [appSplitButtonTrigger]="trigger" (click)="onProcess()">
+  Process
+</button>
+
+<!-- Elevated variant -->
+<button appSplitButton="elevated" [appSplitButtonTrigger]="trigger" (click)="onExport()">
+  Export
+</button>
+```
+
+## API
+
+### Inputs
+
+| Input | Type | Default | Description |
+|-------|------|---------|-------------|
+| `appSplitButton` | `'' \| 'filled' \| 'tonal' \| 'outlined' \| 'elevated'` | `''` | Button variant following Material Design 3 guidelines |
+| `appSplitButtonTrigger` | `MatMenuTrigger` | `undefined` | Reference to the MatMenuTrigger for the dropdown menu |
+| `disabled` | `boolean` | `false` | Whether the button is disabled |
+
+### Button Variants
+
+| Variant | Description |
+|---------|-------------|
+| Text (default) | Lowest emphasis, for less important actions |
+| Filled | High emphasis, for primary actions |
+| Tonal | Medium emphasis with a container color from the secondary palette |
+| Outlined | Medium emphasis with a border outline |
+| Elevated | Medium emphasis with a shadow elevation |
+
+## Theming (Optional)
+
+The directive automatically injects its styles. If you want to customize the colors, you can use the optional SCSS mixin:
+
+```scss
+@use '@softwarity/split-button/split-button-theme' as split-button;
+
+// Customize split-button colors
+@include split-button.overrides((
+  filled-container-color: #ff5722,
+  filled-label-color: #ffffff
+));
+```
+
+### Available Tokens
+
+The `overrides` mixin accepts a map of tokens to customize the appearance:
+
+| Token | Default | Description |
+|-------|---------|-------------|
+| `text-label-color` | `var(--mat-sys-primary)` | Label color for text variant |
+| `filled-container-color` | `var(--mat-sys-primary)` | Container color for filled variant |
+| `filled-label-color` | `var(--mat-sys-on-primary)` | Label color for filled variant |
+| `outlined-outline-color` | `var(--mat-sys-outline)` | Border color for outlined variant |
+| `outlined-label-color` | `var(--mat-sys-primary)` | Label color for outlined variant |
+| `tonal-container-color` | `var(--mat-sys-secondary-container)` | Container color for tonal variant |
+| `tonal-label-color` | `var(--mat-sys-on-secondary-container)` | Label color for tonal variant |
+| `elevated-container-color` | `var(--mat-sys-surface-container-low)` | Container color for elevated variant |
+| `elevated-label-color` | `var(--mat-sys-primary)` | Label color for elevated variant |
+
+### Examples
+
+```scss
+// Customize filled button colors
+@include split-button.overrides((
+  filled-container-color: light-dark(#6750a4, #d0bcff),
+  filled-label-color: light-dark(#ffffff, #381e72)
+));
+
+// Use Material 3 system colors for tonal variant
+@include split-button.overrides((
+  tonal-container-color: var(--mat-sys-tertiary-container),
+  tonal-label-color: var(--mat-sys-on-tertiary-container)
+));
+
+// Custom brand colors
+@include split-button.overrides((
+  filled-container-color: #ff5722,
+  filled-label-color: #ffffff
+));
+```
+
+## Examples
+
+### Save Action with Alternatives
+
+```html
+<button appSplitButton="filled" [appSplitButtonTrigger]="saveTrigger" (click)="onSave()">
+  Save
+</button>
+<span [matMenuTriggerFor]="saveMenu" #saveTrigger="matMenuTrigger"></span>
+<mat-menu #saveMenu="matMenu">
+  <button mat-menu-item (click)="onSaveAs()">Save As...</button>
+  <button mat-menu-item (click)="onSaveDraft()">Save Draft</button>
+  <button mat-menu-item (click)="onSaveAndClose()">Save & Close</button>
+</mat-menu>
+```
+
+### Export with Format Options
+
+```html
+<button appSplitButton="outlined" [appSplitButtonTrigger]="exportTrigger" (click)="onExportPDF()">
+  Export PDF
+</button>
+<span [matMenuTriggerFor]="exportMenu" #exportTrigger="matMenuTrigger"></span>
+<mat-menu #exportMenu="matMenu">
+  <button mat-menu-item (click)="onExportCSV()">Export CSV</button>
+  <button mat-menu-item (click)="onExportXLSX()">Export Excel</button>
+  <button mat-menu-item (click)="onExportJSON()">Export JSON</button>
+</mat-menu>
+```
+
+### Disabled State
+
+```html
+<button appSplitButton="filled" [appSplitButtonTrigger]="trigger" [disabled]="true">
+  Disabled
+</button>
+```
+
+## License
+
+MIT

package/_split-button-theme.scss

@@ -0,0 +1,85 @@
+// =============================================================================
+// Split Button Theme Customization
+// Material Design 3 compliant theming for split-button directive
+//
+// Note: Base styles are automatically injected by the directive.
+// This file is only needed if you want to customize colors.
+// =============================================================================
+
+/// Mixin to override split-button theme tokens
+/// @param {Map} $tokens - Map of token overrides
+/// @example
+///   @use '@softwarity/split-button/split-button-theme' as split-button;
+///   @include split-button.overrides((
+///     filled-container-color: #ff5722,
+///     filled-label-color: #ffffff
+///   ));
+///
+/// Available tokens:
+/// - text-label-color: Label color for text variant
+/// - filled-container-color: Container color for filled variant
+/// - filled-label-color: Label color for filled variant
+/// - outlined-outline-color: Border color for outlined variant
+/// - outlined-label-color: Label color for outlined variant
+/// - tonal-container-color: Container color for tonal variant
+/// - tonal-label-color: Label color for tonal variant
+/// - elevated-container-color: Container color for elevated variant
+/// - elevated-label-color: Label color for elevated variant
+/// - elevated-shadow: Shadow for elevated variant
+/// - container-shape: Border radius
+/// - disabled-opacity: Opacity when disabled
+@mixin overrides($tokens: ()) {
+  @if length($tokens) > 0 {
+    :root {
+      // Text variant
+      @if map-has-key($tokens, text-label-color) {
+        --split-button-text-label-color: #{map-get($tokens, text-label-color)};
+      }
+
+      // Filled variant
+      @if map-has-key($tokens, filled-container-color) {
+        --split-button-filled-container-color: #{map-get($tokens, filled-container-color)};
+      }
+      @if map-has-key($tokens, filled-label-color) {
+        --split-button-filled-label-color: #{map-get($tokens, filled-label-color)};
+      }
+
+      // Outlined variant
+      @if map-has-key($tokens, outlined-outline-color) {
+        --split-button-outlined-outline-color: #{map-get($tokens, outlined-outline-color)};
+      }
+      @if map-has-key($tokens, outlined-label-color) {
+        --split-button-outlined-label-color: #{map-get($tokens, outlined-label-color)};
+      }
+
+      // Tonal variant
+      @if map-has-key($tokens, tonal-container-color) {
+        --split-button-tonal-container-color: #{map-get($tokens, tonal-container-color)};
+      }
+      @if map-has-key($tokens, tonal-label-color) {
+        --split-button-tonal-label-color: #{map-get($tokens, tonal-label-color)};
+      }
+
+      // Elevated variant
+      @if map-has-key($tokens, elevated-container-color) {
+        --split-button-elevated-container-color: #{map-get($tokens, elevated-container-color)};
+      }
+      @if map-has-key($tokens, elevated-label-color) {
+        --split-button-elevated-label-color: #{map-get($tokens, elevated-label-color)};
+      }
+      @if map-has-key($tokens, elevated-shadow) {
+        --split-button-elevated-shadow: #{map-get($tokens, elevated-shadow)};
+      }
+
+      // Shape
+      @if map-has-key($tokens, container-shape) {
+        --split-button-container-shape: #{map-get($tokens, container-shape)};
+      }
+
+      // Disabled
+      @if map-has-key($tokens, disabled-opacity) {
+        --split-button-disabled-opacity: #{map-get($tokens, disabled-opacity)};
+      }
+    }
+  }
+}

package/fesm2022/softwarity-split-button.mjs

@@ -0,0 +1,352 @@
+import * as i0 from '@angular/core';
+import { inject, ElementRef, Renderer2, booleanAttribute, HostBinding, Input, Directive } from '@angular/core';
+import { DOCUMENT } from '@angular/common';
+
+const VARIANT_CLASSES = ['split-button--filled', 'split-button--tonal', 'split-button--outlined', 'split-button--elevated'];
+const STYLE_ID = 'split-button-styles';
+/** Injects styles into the document head (only once) */
+function injectStyles(doc) {
+    if (doc.getElementById(STYLE_ID))
+        return;
+    const style = doc.createElement('style');
+    style.id = STYLE_ID;
+    style.textContent = `
+    .split-button {
+      display: inline-flex;
+      align-items: stretch;
+      border-radius: var(--split-button-container-shape, var(--mdc-outlined-button-container-shape, 20px));
+      overflow: hidden;
+      vertical-align: middle;
+      height: 40px;
+    }
+    .split-button .split-button-main {
+      border: none;
+      background: transparent;
+      border-radius: 0;
+      border-top-left-radius: var(--split-button-container-shape, var(--mdc-outlined-button-container-shape, 20px));
+      border-bottom-left-radius: var(--split-button-container-shape, var(--mdc-outlined-button-container-shape, 20px));
+      min-width: unset;
+      padding: 0 16px 0 24px;
+      height: 40px;
+      font-family: var(--mat-sys-label-large-font);
+      font-size: var(--mat-sys-label-large-size, 14px);
+      font-weight: var(--mat-sys-label-large-weight, 500);
+      letter-spacing: var(--mat-sys-label-large-tracking, 0.1px);
+      cursor: pointer;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      color: var(--split-button-text-label-color, var(--mdc-text-button-label-text-color, var(--mat-sys-primary)));
+    }
+    .split-button .split-button-main:hover {
+      background: color-mix(in srgb, var(--mat-sys-primary) 8%, transparent);
+    }
+    .split-button .split-button-chevron {
+      all: unset;
+      box-sizing: border-box;
+      border: none;
+      background: transparent;
+      border-radius: 0;
+      border-top-right-radius: var(--split-button-container-shape, var(--mdc-outlined-button-container-shape, 20px));
+      border-bottom-right-radius: var(--split-button-container-shape, var(--mdc-outlined-button-container-shape, 20px));
+      width: 40px;
+      min-width: 40px;
+      max-width: 40px;
+      padding: 0;
+      margin: 0;
+      cursor: pointer;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      height: 40px;
+      flex-shrink: 0;
+      color: var(--split-button-text-label-color, var(--mdc-text-button-label-text-color, var(--mat-sys-primary)));
+    }
+    .split-button .split-button-chevron:hover {
+      background: color-mix(in srgb, currentColor 8%, transparent);
+    }
+    .split-button .split-button-chevron:focus-visible {
+      outline: 2px solid var(--mat-sys-primary);
+      outline-offset: -2px;
+    }
+    .split-button .split-button-icon {
+      width: 24px;
+      height: 24px;
+      display: block;
+    }
+    /* Outlined variant */
+    .split-button.split-button--outlined {
+      border: 1px solid var(--split-button-outlined-outline-color, var(--mdc-outlined-button-outline-color, var(--mat-sys-outline)));
+    }
+    .split-button.split-button--outlined .split-button-main {
+      color: var(--split-button-outlined-label-color, var(--mdc-outlined-button-label-text-color, var(--mat-sys-primary)));
+    }
+    .split-button.split-button--outlined .split-button-chevron {
+      border-left: 1px solid var(--split-button-outlined-outline-color, var(--mdc-outlined-button-outline-color, var(--mat-sys-outline)));
+      color: var(--split-button-outlined-label-color, var(--mdc-outlined-button-label-text-color, var(--mat-sys-primary)));
+    }
+    /* Elevated variant */
+    .split-button.split-button--elevated {
+      box-shadow: var(--split-button-elevated-shadow, var(--mdc-protected-button-container-elevation-shadow, 0 1px 2px 0 rgba(0,0,0,0.3), 0 1px 3px 1px rgba(0,0,0,0.15)));
+      background: var(--split-button-elevated-container-color, var(--mdc-protected-button-container-color, var(--mat-sys-surface-container-low)));
+    }
+    .split-button.split-button--elevated .split-button-main {
+      color: var(--split-button-elevated-label-color, var(--mdc-protected-button-label-text-color, var(--mat-sys-primary)));
+      position: relative;
+    }
+    .split-button.split-button--elevated .split-button-main::after {
+      content: '';
+      position: absolute;
+      right: 0;
+      top: 20%;
+      height: 60%;
+      width: 1px;
+      background: currentColor;
+      opacity: 0.2;
+    }
+    .split-button.split-button--elevated .split-button-chevron {
+      color: var(--split-button-elevated-label-color, var(--mdc-protected-button-label-text-color, var(--mat-sys-primary)));
+    }
+    /* Filled variant */
+    .split-button.split-button--filled {
+      background: var(--split-button-filled-container-color, var(--mdc-filled-button-container-color, var(--mat-sys-primary)));
+    }
+    .split-button.split-button--filled .split-button-main {
+      color: var(--split-button-filled-label-color, var(--mdc-filled-button-label-text-color, var(--mat-sys-on-primary)));
+      position: relative;
+    }
+    .split-button.split-button--filled .split-button-main::after {
+      content: '';
+      position: absolute;
+      right: 0;
+      top: 20%;
+      height: 60%;
+      width: 1px;
+      background: currentColor;
+      opacity: 0.2;
+    }
+    .split-button.split-button--filled .split-button-main:hover {
+      background: color-mix(in srgb, var(--mat-sys-on-primary) 8%, transparent);
+    }
+    .split-button.split-button--filled .split-button-chevron {
+      color: var(--split-button-filled-label-color, var(--mdc-filled-button-label-text-color, var(--mat-sys-on-primary)));
+    }
+    /* Tonal variant */
+    .split-button.split-button--tonal {
+      background: var(--split-button-tonal-container-color, var(--mat-sys-secondary-container));
+    }
+    .split-button.split-button--tonal .split-button-main {
+      color: var(--split-button-tonal-label-color, var(--mat-sys-on-secondary-container));
+      position: relative;
+    }
+    .split-button.split-button--tonal .split-button-main::after {
+      content: '';
+      position: absolute;
+      right: 0;
+      top: 20%;
+      height: 60%;
+      width: 1px;
+      background: currentColor;
+      opacity: 0.2;
+    }
+    .split-button.split-button--tonal .split-button-main:hover {
+      background: color-mix(in srgb, var(--mat-sys-on-secondary-container) 8%, transparent);
+    }
+    .split-button.split-button--tonal .split-button-chevron {
+      color: var(--split-button-tonal-label-color, var(--mat-sys-on-secondary-container));
+    }
+    /* Disabled state */
+    .split-button.split-button--disabled {
+      pointer-events: none;
+      opacity: var(--split-button-disabled-opacity, 0.38);
+    }
+    /* Hidden trigger utility - covers full height at right edge for proper menu alignment in both directions */
+    .split-button > .hidden-trigger {
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      right: 0;
+      width: 1px;
+      height: 100%;
+      visibility: hidden;
+      pointer-events: none;
+    }
+  `;
+    doc.head.appendChild(style);
+}
+/**
+ * Split button directive that transforms a button into a split button with dropdown.
+ * Follows Material Design 3 guidelines.
+ *
+ * Usage:
+ * ```html
+ * <button appSplitButton [appSplitButtonTrigger]="trigger" (click)="doAction()">
+ *   Text button (default)
+ * </button>
+ * <button appSplitButton="filled" [appSplitButtonTrigger]="trigger" (click)="doAction()">
+ *   Filled button
+ * </button>
+ * <span [matMenuTriggerFor]="menu" #trigger="matMenuTrigger"></span>
+ * <mat-menu #menu="matMenu">
+ *   <button mat-menu-item>Option 1</button>
+ * </mat-menu>
+ * ```
+ *
+ * M3 Button Variants:
+ * - (no value): Text button - lowest emphasis
+ * - filled: High emphasis
+ * - tonal: Medium emphasis with container color
+ * - outlined: Medium emphasis with border
+ * - elevated: Medium emphasis with shadow
+ */
+class SplitButtonDirective {
+    constructor() {
+        this.el = inject(ElementRef);
+        this.renderer = inject(Renderer2);
+        this.document = inject(DOCUMENT);
+        /** M3 button variant - empty string or no value means text button (lowest emphasis) */
+        this.appSplitButton = '';
+        /** Whether the button is disabled */
+        this.disabled = false;
+        this.mainClass = true;
+        this.wrapper = null;
+        this.chevronButton = null;
+        this.clickListener = null;
+        this.initialized = false;
+    }
+    ngAfterViewInit() {
+        injectStyles(this.document);
+        setTimeout(() => {
+            this.createSplitButton();
+            this.initialized = true;
+        }, 0);
+    }
+    ngOnChanges(changes) {
+        if (!this.initialized || !this.wrapper)
+            return;
+        // Handle variant changes
+        if (changes['appSplitButton']) {
+            this.updateVariantClass();
+        }
+        // Handle disabled changes
+        if (changes['disabled']) {
+            this.updateDisabledState();
+        }
+    }
+    ngOnDestroy() {
+        this.clickListener?.();
+        if (this.wrapper && this.wrapper.parentNode) {
+            const host = this.el.nativeElement;
+            this.wrapper.parentNode.insertBefore(host, this.wrapper);
+            this.wrapper.parentNode.removeChild(this.wrapper);
+        }
+    }
+    updateVariantClass() {
+        if (!this.wrapper)
+            return;
+        // Remove all variant classes
+        VARIANT_CLASSES.forEach(cls => {
+            this.renderer.removeClass(this.wrapper, cls);
+        });
+        // Add new variant class if specified
+        if (this.appSplitButton) {
+            this.renderer.addClass(this.wrapper, `split-button--${this.appSplitButton}`);
+        }
+    }
+    updateDisabledState() {
+        if (!this.wrapper || !this.chevronButton)
+            return;
+        if (this.disabled) {
+            this.renderer.addClass(this.wrapper, 'split-button--disabled');
+            this.renderer.setAttribute(this.chevronButton, 'disabled', 'true');
+        }
+        else {
+            this.renderer.removeClass(this.wrapper, 'split-button--disabled');
+            this.renderer.removeAttribute(this.chevronButton, 'disabled');
+        }
+    }
+    createSplitButton() {
+        const host = this.el.nativeElement;
+        const parent = host.parentNode;
+        if (!parent)
+            return;
+        // Create wrapper
+        this.wrapper = this.renderer.createElement('div');
+        this.renderer.addClass(this.wrapper, 'split-button');
+        // Only add variant class if a variant is specified (otherwise it's text/default)
+        if (this.appSplitButton) {
+            this.renderer.addClass(this.wrapper, `split-button--${this.appSplitButton}`);
+        }
+        if (this.disabled) {
+            this.renderer.addClass(this.wrapper, 'split-button--disabled');
+        }
+        // Create chevron button
+        this.chevronButton = this.renderer.createElement('button');
+        this.renderer.setAttribute(this.chevronButton, 'type', 'button');
+        this.renderer.addClass(this.chevronButton, 'split-button-chevron');
+        if (this.disabled) {
+            this.renderer.setAttribute(this.chevronButton, 'disabled', 'true');
+        }
+        // Add chevron SVG icon using innerHTML for proper namespace handling
+        this.chevronButton.innerHTML = `
+      <svg xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 -960 960 960" fill="currentColor" class="split-button-icon">
+        <path d="M480-360 280-560h400L480-360Z"/>
+      </svg>
+    `;
+        // Wrap the host element
+        this.renderer.insertBefore(parent, this.wrapper, host);
+        this.renderer.appendChild(this.wrapper, host);
+        this.renderer.appendChild(this.wrapper, this.chevronButton);
+        // Move the trigger element inside the wrapper for proper menu alignment (below the full button)
+        if (this.appSplitButtonTrigger) {
+            const triggerEl = this.appSplitButtonTrigger._element?.nativeElement;
+            if (triggerEl) {
+                this.renderer.setStyle(this.wrapper, 'position', 'relative');
+                this.renderer.appendChild(this.wrapper, triggerEl);
+            }
+            // Configure menu position so it aligns with the left edge of the split button
+            const menu = this.appSplitButtonTrigger.menu;
+            if (menu) {
+                menu.xPosition = 'before';
+            }
+        }
+        // Setup click handler for chevron - opens the menu via the trigger
+        this.clickListener = this.renderer.listen(this.chevronButton, 'click', (event) => {
+            event.preventDefault();
+            event.stopPropagation();
+            if (this.appSplitButtonTrigger && !this.disabled) {
+                this.appSplitButtonTrigger.openMenu();
+            }
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SplitButtonDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "21.1.1", type: SplitButtonDirective, isStandalone: true, selector: "[appSplitButton]", inputs: { appSplitButton: "appSplitButton", appSplitButtonTrigger: "appSplitButtonTrigger", disabled: ["disabled", "disabled", booleanAttribute] }, host: { properties: { "class.split-button-main": "this.mainClass" } }, usesOnChanges: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SplitButtonDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[appSplitButton]',
+                    standalone: true
+                }]
+        }], propDecorators: { appSplitButton: [{
+                type: Input
+            }], appSplitButtonTrigger: [{
+                type: Input
+            }], disabled: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], mainClass: [{
+                type: HostBinding,
+                args: ['class.split-button-main']
+            }] } });
+
+/*
+ * Public API Surface of split-button
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { SplitButtonDirective };
+//# sourceMappingURL=softwarity-split-button.mjs.map

package/fesm2022/softwarity-split-button.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"softwarity-split-button.mjs","sources":["../../src/lib/split-button.directive.ts","../../src/public-api.ts","../../src/softwarity-split-button.ts"],"sourcesContent":["import {\n  Directive,\n  ElementRef,\n  Input,\n  Renderer2,\n  AfterViewInit,\n  OnDestroy,\n  OnChanges,\n  SimpleChanges,\n  inject,\n  HostBinding,\n  booleanAttribute\n} from '@angular/core';\nimport { DOCUMENT } from '@angular/common';\nimport { MatMenuTrigger } from '@angular/material/menu';\n\n/** M3 Button variant type */\nexport type SplitButtonVariant = '' | 'filled' | 'tonal' | 'outlined' | 'elevated';\n\nconst VARIANT_CLASSES = ['split-button--filled', 'split-button--tonal', 'split-button--outlined', 'split-button--elevated'];\n\nconst STYLE_ID = 'split-button-styles';\n\n/** Injects styles into the document head (only once) */\nfunction injectStyles(doc: Document): void {\n  if (doc.getElementById(STYLE_ID)) return;\n\n  const style = doc.createElement('style');\n  style.id = STYLE_ID;\n  style.textContent = `\n    .split-button {\n      display: inline-flex;\n      align-items: stretch;\n      border-radius: var(--split-button-container-shape, var(--mdc-outlined-button-container-shape, 20px));\n      overflow: hidden;\n      vertical-align: middle;\n      height: 40px;\n    }\n    .split-button .split-button-main {\n      border: none;\n      background: transparent;\n      border-radius: 0;\n      border-top-left-radius: var(--split-button-container-shape, var(--mdc-outlined-button-container-shape, 20px));\n      border-bottom-left-radius: var(--split-button-container-shape, var(--mdc-outlined-button-container-shape, 20px));\n      min-width: unset;\n      padding: 0 16px 0 24px;\n      height: 40px;\n      font-family: var(--mat-sys-label-large-font);\n      font-size: var(--mat-sys-label-large-size, 14px);\n      font-weight: var(--mat-sys-label-large-weight, 500);\n      letter-spacing: var(--mat-sys-label-large-tracking, 0.1px);\n      cursor: pointer;\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n      color: var(--split-button-text-label-color, var(--mdc-text-button-label-text-color, var(--mat-sys-primary)));\n    }\n    .split-button .split-button-main:hover {\n      background: color-mix(in srgb, var(--mat-sys-primary) 8%, transparent);\n    }\n    .split-button .split-button-chevron {\n      all: unset;\n      box-sizing: border-box;\n      border: none;\n      background: transparent;\n      border-radius: 0;\n      border-top-right-radius: var(--split-button-container-shape, var(--mdc-outlined-button-container-shape, 20px));\n      border-bottom-right-radius: var(--split-button-container-shape, var(--mdc-outlined-button-container-shape, 20px));\n      width: 40px;\n      min-width: 40px;\n      max-width: 40px;\n      padding: 0;\n      margin: 0;\n      cursor: pointer;\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n      height: 40px;\n      flex-shrink: 0;\n      color: var(--split-button-text-label-color, var(--mdc-text-button-label-text-color, var(--mat-sys-primary)));\n    }\n    .split-button .split-button-chevron:hover {\n      background: color-mix(in srgb, currentColor 8%, transparent);\n    }\n    .split-button .split-button-chevron:focus-visible {\n      outline: 2px solid var(--mat-sys-primary);\n      outline-offset: -2px;\n    }\n    .split-button .split-button-icon {\n      width: 24px;\n      height: 24px;\n      display: block;\n    }\n    /* Outlined variant */\n    .split-button.split-button--outlined {\n      border: 1px solid var(--split-button-outlined-outline-color, var(--mdc-outlined-button-outline-color, var(--mat-sys-outline)));\n    }\n    .split-button.split-button--outlined .split-button-main {\n      color: var(--split-button-outlined-label-color, var(--mdc-outlined-button-label-text-color, var(--mat-sys-primary)));\n    }\n    .split-button.split-button--outlined .split-button-chevron {\n      border-left: 1px solid var(--split-button-outlined-outline-color, var(--mdc-outlined-button-outline-color, var(--mat-sys-outline)));\n      color: var(--split-button-outlined-label-color, var(--mdc-outlined-button-label-text-color, var(--mat-sys-primary)));\n    }\n    /* Elevated variant */\n    .split-button.split-button--elevated {\n      box-shadow: var(--split-button-elevated-shadow, var(--mdc-protected-button-container-elevation-shadow, 0 1px 2px 0 rgba(0,0,0,0.3), 0 1px 3px 1px rgba(0,0,0,0.15)));\n      background: var(--split-button-elevated-container-color, var(--mdc-protected-button-container-color, var(--mat-sys-surface-container-low)));\n    }\n    .split-button.split-button--elevated .split-button-main {\n      color: var(--split-button-elevated-label-color, var(--mdc-protected-button-label-text-color, var(--mat-sys-primary)));\n      position: relative;\n    }\n    .split-button.split-button--elevated .split-button-main::after {\n      content: '';\n      position: absolute;\n      right: 0;\n      top: 20%;\n      height: 60%;\n      width: 1px;\n      background: currentColor;\n      opacity: 0.2;\n    }\n    .split-button.split-button--elevated .split-button-chevron {\n      color: var(--split-button-elevated-label-color, var(--mdc-protected-button-label-text-color, var(--mat-sys-primary)));\n    }\n    /* Filled variant */\n    .split-button.split-button--filled {\n      background: var(--split-button-filled-container-color, var(--mdc-filled-button-container-color, var(--mat-sys-primary)));\n    }\n    .split-button.split-button--filled .split-button-main {\n      color: var(--split-button-filled-label-color, var(--mdc-filled-button-label-text-color, var(--mat-sys-on-primary)));\n      position: relative;\n    }\n    .split-button.split-button--filled .split-button-main::after {\n      content: '';\n      position: absolute;\n      right: 0;\n      top: 20%;\n      height: 60%;\n      width: 1px;\n      background: currentColor;\n      opacity: 0.2;\n    }\n    .split-button.split-button--filled .split-button-main:hover {\n      background: color-mix(in srgb, var(--mat-sys-on-primary) 8%, transparent);\n    }\n    .split-button.split-button--filled .split-button-chevron {\n      color: var(--split-button-filled-label-color, var(--mdc-filled-button-label-text-color, var(--mat-sys-on-primary)));\n    }\n    /* Tonal variant */\n    .split-button.split-button--tonal {\n      background: var(--split-button-tonal-container-color, var(--mat-sys-secondary-container));\n    }\n    .split-button.split-button--tonal .split-button-main {\n      color: var(--split-button-tonal-label-color, var(--mat-sys-on-secondary-container));\n      position: relative;\n    }\n    .split-button.split-button--tonal .split-button-main::after {\n      content: '';\n      position: absolute;\n      right: 0;\n      top: 20%;\n      height: 60%;\n      width: 1px;\n      background: currentColor;\n      opacity: 0.2;\n    }\n    .split-button.split-button--tonal .split-button-main:hover {\n      background: color-mix(in srgb, var(--mat-sys-on-secondary-container) 8%, transparent);\n    }\n    .split-button.split-button--tonal .split-button-chevron {\n      color: var(--split-button-tonal-label-color, var(--mat-sys-on-secondary-container));\n    }\n    /* Disabled state */\n    .split-button.split-button--disabled {\n      pointer-events: none;\n      opacity: var(--split-button-disabled-opacity, 0.38);\n    }\n    /* Hidden trigger utility - covers full height at right edge for proper menu alignment in both directions */\n    .split-button > .hidden-trigger {\n      position: absolute;\n      top: 0;\n      bottom: 0;\n      right: 0;\n      width: 1px;\n      height: 100%;\n      visibility: hidden;\n      pointer-events: none;\n    }\n  `;\n  doc.head.appendChild(style);\n}\n\n/**\n * Split button directive that transforms a button into a split button with dropdown.\n * Follows Material Design 3 guidelines.\n *\n * Usage:\n * ```html\n * <button appSplitButton [appSplitButtonTrigger]=\"trigger\" (click)=\"doAction()\">\n *   Text button (default)\n * </button>\n * <button appSplitButton=\"filled\" [appSplitButtonTrigger]=\"trigger\" (click)=\"doAction()\">\n *   Filled button\n * </button>\n * <span [matMenuTriggerFor]=\"menu\" #trigger=\"matMenuTrigger\"></span>\n * <mat-menu #menu=\"matMenu\">\n *   <button mat-menu-item>Option 1</button>\n * </mat-menu>\n * ```\n *\n * M3 Button Variants:\n * - (no value): Text button - lowest emphasis\n * - filled: High emphasis\n * - tonal: Medium emphasis with container color\n * - outlined: Medium emphasis with border\n * - elevated: Medium emphasis with shadow\n */\n@Directive({\n  selector: '[appSplitButton]',\n  standalone: true\n})\nexport class SplitButtonDirective implements AfterViewInit, OnDestroy, OnChanges {\n  private readonly el = inject(ElementRef);\n  private readonly renderer = inject(Renderer2);\n  private readonly document = inject(DOCUMENT);\n\n  /** M3 button variant - empty string or no value means text button (lowest emphasis) */\n  @Input() appSplitButton: SplitButtonVariant = '';\n\n  /** MatMenuTrigger reference for the dropdown */\n  @Input() appSplitButtonTrigger?: MatMenuTrigger;\n\n  /** Whether the button is disabled */\n  @Input({ transform: booleanAttribute }) disabled = false;\n\n  @HostBinding('class.split-button-main') mainClass = true;\n\n  private wrapper: HTMLElement | null = null;\n  private chevronButton: HTMLButtonElement | null = null;\n  private clickListener: (() => void) | null = null;\n  private initialized = false;\n\n  ngAfterViewInit(): void {\n    injectStyles(this.document);\n    setTimeout(() => {\n      this.createSplitButton();\n      this.initialized = true;\n    }, 0);\n  }\n\n  ngOnChanges(changes: SimpleChanges): void {\n    if (!this.initialized || !this.wrapper) return;\n\n    // Handle variant changes\n    if (changes['appSplitButton']) {\n      this.updateVariantClass();\n    }\n\n    // Handle disabled changes\n    if (changes['disabled']) {\n      this.updateDisabledState();\n    }\n  }\n\n  ngOnDestroy(): void {\n    this.clickListener?.();\n    if (this.wrapper && this.wrapper.parentNode) {\n      const host = this.el.nativeElement;\n      this.wrapper.parentNode.insertBefore(host, this.wrapper);\n      this.wrapper.parentNode.removeChild(this.wrapper);\n    }\n  }\n\n  private updateVariantClass(): void {\n    if (!this.wrapper) return;\n\n    // Remove all variant classes\n    VARIANT_CLASSES.forEach(cls => {\n      this.renderer.removeClass(this.wrapper, cls);\n    });\n\n    // Add new variant class if specified\n    if (this.appSplitButton) {\n      this.renderer.addClass(this.wrapper, `split-button--${this.appSplitButton}`);\n    }\n  }\n\n  private updateDisabledState(): void {\n    if (!this.wrapper || !this.chevronButton) return;\n\n    if (this.disabled) {\n      this.renderer.addClass(this.wrapper, 'split-button--disabled');\n      this.renderer.setAttribute(this.chevronButton, 'disabled', 'true');\n    } else {\n      this.renderer.removeClass(this.wrapper, 'split-button--disabled');\n      this.renderer.removeAttribute(this.chevronButton, 'disabled');\n    }\n  }\n\n  private createSplitButton(): void {\n    const host = this.el.nativeElement as HTMLElement;\n    const parent = host.parentNode;\n    if (!parent) return;\n\n    // Create wrapper\n    this.wrapper = this.renderer.createElement('div');\n    this.renderer.addClass(this.wrapper, 'split-button');\n\n    // Only add variant class if a variant is specified (otherwise it's text/default)\n    if (this.appSplitButton) {\n      this.renderer.addClass(this.wrapper, `split-button--${this.appSplitButton}`);\n    }\n\n    if (this.disabled) {\n      this.renderer.addClass(this.wrapper, 'split-button--disabled');\n    }\n\n    // Create chevron button\n    this.chevronButton = this.renderer.createElement('button');\n    this.renderer.setAttribute(this.chevronButton, 'type', 'button');\n    this.renderer.addClass(this.chevronButton, 'split-button-chevron');\n\n    if (this.disabled) {\n      this.renderer.setAttribute(this.chevronButton, 'disabled', 'true');\n    }\n\n    // Add chevron SVG icon using innerHTML for proper namespace handling\n    this.chevronButton!.innerHTML = `\n      <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24\" width=\"24\" viewBox=\"0 -960 960 960\" fill=\"currentColor\" class=\"split-button-icon\">\n        <path d=\"M480-360 280-560h400L480-360Z\"/>\n      </svg>\n    `;\n\n    // Wrap the host element\n    this.renderer.insertBefore(parent, this.wrapper, host);\n    this.renderer.appendChild(this.wrapper, host);\n    this.renderer.appendChild(this.wrapper, this.chevronButton);\n\n    // Move the trigger element inside the wrapper for proper menu alignment (below the full button)\n    if (this.appSplitButtonTrigger) {\n      const triggerEl = (this.appSplitButtonTrigger as any)._element?.nativeElement;\n      if (triggerEl) {\n        this.renderer.setStyle(this.wrapper, 'position', 'relative');\n        this.renderer.appendChild(this.wrapper, triggerEl);\n      }\n      // Configure menu position so it aligns with the left edge of the split button\n      const menu = this.appSplitButtonTrigger.menu;\n      if (menu) {\n        menu.xPosition = 'before';\n      }\n    }\n\n    // Setup click handler for chevron - opens the menu via the trigger\n    this.clickListener = this.renderer.listen(this.chevronButton, 'click', (event: Event) => {\n      event.preventDefault();\n      event.stopPropagation();\n      if (this.appSplitButtonTrigger && !this.disabled) {\n        this.appSplitButtonTrigger.openMenu();\n      }\n    });\n  }\n}\n","/*\n * Public API Surface of split-button\n */\n\nexport { SplitButtonDirective } from './lib/split-button.directive';\n\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;AAmBA,MAAM,eAAe,GAAG,CAAC,sBAAsB,EAAE,qBAAqB,EAAE,wBAAwB,EAAE,wBAAwB,CAAC;AAE3H,MAAM,QAAQ,GAAG,qBAAqB;AAEtC;AACA,SAAS,YAAY,CAAC,GAAa,EAAA;AACjC,IAAA,IAAI,GAAG,CAAC,cAAc,CAAC,QAAQ,CAAC;QAAE;IAElC,MAAM,KAAK,GAAG,GAAG,CAAC,aAAa,CAAC,OAAO,CAAC;AACxC,IAAA,KAAK,CAAC,EAAE,GAAG,QAAQ;IACnB,KAAK,CAAC,WAAW,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiKnB;AACD,IAAA,GAAG,CAAC,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC;AAC7B;AAEA;;;;;;;;;;;;;;;;;;;;;;;;AAwBG;MAKU,oBAAoB,CAAA;AAJjC,IAAA,WAAA,GAAA;AAKmB,QAAA,IAAA,CAAA,EAAE,GAAG,MAAM,CAAC,UAAU,CAAC;AACvB,QAAA,IAAA,CAAA,QAAQ,GAAG,MAAM,CAAC,SAAS,CAAC;AAC5B,QAAA,IAAA,CAAA,QAAQ,GAAG,MAAM,CAAC,QAAQ,CAAC;;QAGnC,IAAA,CAAA,cAAc,GAAuB,EAAE;;QAMR,IAAA,CAAA,QAAQ,GAAG,KAAK;QAEhB,IAAA,CAAA,SAAS,GAAG,IAAI;QAEhD,IAAA,CAAA,OAAO,GAAuB,IAAI;QAClC,IAAA,CAAA,aAAa,GAA6B,IAAI;QAC9C,IAAA,CAAA,aAAa,GAAwB,IAAI;QACzC,IAAA,CAAA,WAAW,GAAG,KAAK;AAyH5B,IAAA;IAvHC,eAAe,GAAA;AACb,QAAA,YAAY,CAAC,IAAI,CAAC,QAAQ,CAAC;QAC3B,UAAU,CAAC,MAAK;YACd,IAAI,CAAC,iBAAiB,EAAE;AACxB,YAAA,IAAI,CAAC,WAAW,GAAG,IAAI;QACzB,CAAC,EAAE,CAAC,CAAC;IACP;AAEA,IAAA,WAAW,CAAC,OAAsB,EAAA;QAChC,IAAI,CAAC,IAAI,CAAC,WAAW,IAAI,CAAC,IAAI,CAAC,OAAO;YAAE;;AAGxC,QAAA,IAAI,OAAO,CAAC,gBAAgB,CAAC,EAAE;YAC7B,IAAI,CAAC,kBAAkB,EAAE;QAC3B;;AAGA,QAAA,IAAI,OAAO,CAAC,UAAU,CAAC,EAAE;YACvB,IAAI,CAAC,mBAAmB,EAAE;QAC5B;IACF;IAEA,WAAW,GAAA;AACT,QAAA,IAAI,CAAC,aAAa,IAAI;QACtB,IAAI,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,OAAO,CAAC,UAAU,EAAE;AAC3C,YAAA,MAAM,IAAI,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa;AAClC,YAAA,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC,YAAY,CAAC,IAAI,EAAE,IAAI,CAAC,OAAO,CAAC;YACxD,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC,WAAW,CAAC,IAAI,CAAC,OAAO,CAAC;QACnD;IACF;IAEQ,kBAAkB,GAAA;QACxB,IAAI,CAAC,IAAI,CAAC,OAAO;YAAE;;AAGnB,QAAA,eAAe,CAAC,OAAO,CAAC,GAAG,IAAG;YAC5B,IAAI,CAAC,QAAQ,CAAC,WAAW,CAAC,IAAI,CAAC,OAAO,EAAE,GAAG,CAAC;AAC9C,QAAA,CAAC,CAAC;;AAGF,QAAA,IAAI,IAAI,CAAC,cAAc,EAAE;AACvB,YAAA,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,IAAI,CAAC,OAAO,EAAE,iBAAiB,IAAI,CAAC,cAAc,CAAA,CAAE,CAAC;QAC9E;IACF;IAEQ,mBAAmB,GAAA;QACzB,IAAI,CAAC,IAAI,CAAC,OAAO,IAAI,CAAC,IAAI,CAAC,aAAa;YAAE;AAE1C,QAAA,IAAI,IAAI,CAAC,QAAQ,EAAE;YACjB,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,IAAI,CAAC,OAAO,EAAE,wBAAwB,CAAC;AAC9D,YAAA,IAAI,CAAC,QAAQ,CAAC,YAAY,CAAC,IAAI,CAAC,aAAa,EAAE,UAAU,EAAE,MAAM,CAAC;QACpE;aAAO;YACL,IAAI,CAAC,QAAQ,CAAC,WAAW,CAAC,IAAI,CAAC,OAAO,EAAE,wBAAwB,CAAC;YACjE,IAAI,CAAC,QAAQ,CAAC,eAAe,CAAC,IAAI,CAAC,aAAa,EAAE,UAAU,CAAC;QAC/D;IACF;IAEQ,iBAAiB,GAAA;AACvB,QAAA,MAAM,IAAI,GAAG,IAAI,CAAC,EAAE,CAAC,aAA4B;AACjD,QAAA,MAAM,MAAM,GAAG,IAAI,CAAC,UAAU;AAC9B,QAAA,IAAI,CAAC,MAAM;YAAE;;QAGb,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC;QACjD,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,IAAI,CAAC,OAAO,EAAE,cAAc,CAAC;;AAGpD,QAAA,IAAI,IAAI,CAAC,cAAc,EAAE;AACvB,YAAA,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,IAAI,CAAC,OAAO,EAAE,iBAAiB,IAAI,CAAC,cAAc,CAAA,CAAE,CAAC;QAC9E;AAEA,QAAA,IAAI,IAAI,CAAC,QAAQ,EAAE;YACjB,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,IAAI,CAAC,OAAO,EAAE,wBAAwB,CAAC;QAChE;;QAGA,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,QAAQ,CAAC,aAAa,CAAC,QAAQ,CAAC;AAC1D,QAAA,IAAI,CAAC,QAAQ,CAAC,YAAY,CAAC,IAAI,CAAC,aAAa,EAAE,MAAM,EAAE,QAAQ,CAAC;QAChE,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,IAAI,CAAC,aAAa,EAAE,sBAAsB,CAAC;AAElE,QAAA,IAAI,IAAI,CAAC,QAAQ,EAAE;AACjB,YAAA,IAAI,CAAC,QAAQ,CAAC,YAAY,CAAC,IAAI,CAAC,aAAa,EAAE,UAAU,EAAE,MAAM,CAAC;QACpE;;AAGA,QAAA,IAAI,CAAC,aAAc,CAAC,SAAS,GAAG;;;;KAI/B;;AAGD,QAAA,IAAI,CAAC,QAAQ,CAAC,YAAY,CAAC,MAAM,EAAE,IAAI,CAAC,OAAO,EAAE,IAAI,CAAC;QACtD,IAAI,CAAC,QAAQ,CAAC,WAAW,CAAC,IAAI,CAAC,OAAO,EAAE,IAAI,CAAC;AAC7C,QAAA,IAAI,CAAC,QAAQ,CAAC,WAAW,CAAC,IAAI,CAAC,OAAO,EAAE,IAAI,CAAC,aAAa,CAAC;;AAG3D,QAAA,IAAI,IAAI,CAAC,qBAAqB,EAAE;YAC9B,MAAM,SAAS,GAAI,IAAI,CAAC,qBAA6B,CAAC,QAAQ,EAAE,aAAa;YAC7E,IAAI,SAAS,EAAE;AACb,gBAAA,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,IAAI,CAAC,OAAO,EAAE,UAAU,EAAE,UAAU,CAAC;gBAC5D,IAAI,CAAC,QAAQ,CAAC,WAAW,CAAC,IAAI,CAAC,OAAO,EAAE,SAAS,CAAC;YACpD;;AAEA,YAAA,MAAM,IAAI,GAAG,IAAI,CAAC,qBAAqB,CAAC,IAAI;YAC5C,IAAI,IAAI,EAAE;AACR,gBAAA,IAAI,CAAC,SAAS,GAAG,QAAQ;YAC3B;QACF;;AAGA,QAAA,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC,IAAI,CAAC,aAAa,EAAE,OAAO,EAAE,CAAC,KAAY,KAAI;YACtF,KAAK,CAAC,cAAc,EAAE;YACtB,KAAK,CAAC,eAAe,EAAE;YACvB,IAAI,IAAI,CAAC,qBAAqB,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;AAChD,gBAAA,IAAI,CAAC,qBAAqB,CAAC,QAAQ,EAAE;YACvC;AACF,QAAA,CAAC,CAAC;IACJ;8GA3IW,oBAAoB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAApB,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,oBAAoB,mLAYX,gBAAgB,CAAA,EAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,yBAAA,EAAA,gBAAA,EAAA,EAAA,EAAA,aAAA,EAAA,IAAA,EAAA,QAAA,EAAA,EAAA,EAAA,CAAA,CAAA;;2FAZzB,oBAAoB,EAAA,UAAA,EAAA,CAAA;kBAJhC,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,QAAQ,EAAE,kBAAkB;AAC5B,oBAAA,UAAU,EAAE;AACb,iBAAA;;sBAOE;;sBAGA;;sBAGA,KAAK;uBAAC,EAAE,SAAS,EAAE,gBAAgB,EAAE;;sBAErC,WAAW;uBAAC,yBAAyB;;;AC7OxC;;AAEG;;ACFH;;AAEG;;;;"}

package/package.json

@@ -0,0 +1,39 @@
+{
+  "name": "@softwarity/split-button",
+  "version": "1.0.1",
+  "author": "Softwarity",
+  "license": "MIT",
+  "description": "Angular Material 3 split button directive with dropdown menu support",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/softwarity/split-button.git"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "keywords": [
+    "angular",
+    "material",
+    "split-button",
+    "button",
+    "dropdown",
+    "menu",
+    "material3",
+    "directive"
+  ],
+  "dependencies": {
+    "tslib": "^2.6.2"
+  },
+  "sideEffects": false,
+  "module": "fesm2022/softwarity-split-button.mjs",
+  "typings": "types/softwarity-split-button.d.ts",
+  "exports": {
+    "./package.json": {
+      "default": "./package.json"
+    },
+    ".": {
+      "types": "./types/softwarity-split-button.d.ts",
+      "default": "./fesm2022/softwarity-split-button.mjs"
+    }
+  }
+}

package/types/softwarity-split-button.d.ts

@@ -0,0 +1,58 @@
+import * as i0 from '@angular/core';
+import { AfterViewInit, OnDestroy, OnChanges, SimpleChanges } from '@angular/core';
+import { MatMenuTrigger } from '@angular/material/menu';
+
+/** M3 Button variant type */
+type SplitButtonVariant = '' | 'filled' | 'tonal' | 'outlined' | 'elevated';
+/**
+ * Split button directive that transforms a button into a split button with dropdown.
+ * Follows Material Design 3 guidelines.
+ *
+ * Usage:
+ * ```html
+ * <button appSplitButton [appSplitButtonTrigger]="trigger" (click)="doAction()">
+ *   Text button (default)
+ * </button>
+ * <button appSplitButton="filled" [appSplitButtonTrigger]="trigger" (click)="doAction()">
+ *   Filled button
+ * </button>
+ * <span [matMenuTriggerFor]="menu" #trigger="matMenuTrigger"></span>
+ * <mat-menu #menu="matMenu">
+ *   <button mat-menu-item>Option 1</button>
+ * </mat-menu>
+ * ```
+ *
+ * M3 Button Variants:
+ * - (no value): Text button - lowest emphasis
+ * - filled: High emphasis
+ * - tonal: Medium emphasis with container color
+ * - outlined: Medium emphasis with border
+ * - elevated: Medium emphasis with shadow
+ */
+declare class SplitButtonDirective implements AfterViewInit, OnDestroy, OnChanges {
+    private readonly el;
+    private readonly renderer;
+    private readonly document;
+    /** M3 button variant - empty string or no value means text button (lowest emphasis) */
+    appSplitButton: SplitButtonVariant;
+    /** MatMenuTrigger reference for the dropdown */
+    appSplitButtonTrigger?: MatMenuTrigger;
+    /** Whether the button is disabled */
+    disabled: boolean;
+    mainClass: boolean;
+    private wrapper;
+    private chevronButton;
+    private clickListener;
+    private initialized;
+    ngAfterViewInit(): void;
+    ngOnChanges(changes: SimpleChanges): void;
+    ngOnDestroy(): void;
+    private updateVariantClass;
+    private updateDisabledState;
+    private createSplitButton;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SplitButtonDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<SplitButtonDirective, "[appSplitButton]", never, { "appSplitButton": { "alias": "appSplitButton"; "required": false; }; "appSplitButtonTrigger": { "alias": "appSplitButtonTrigger"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; }, {}, never, never, true, never>;
+    static ngAcceptInputType_disabled: unknown;
+}
+
+export { SplitButtonDirective };