@daffodil/design 0.77.0 → 0.79.0

package/fesm2022/daffodil-design-button.mjs

@@ -1,12 +1,11 @@
-import { coerceBooleanProperty } from '@angular/cdk/coercion';
+import { CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
-import { Directive, Component, ViewEncapsulation, ChangeDetectionStrategy, HostBinding, Input, NgModule } from '@angular/core';
+import { Directive, HostBinding, Input, Component, ViewEncapsulation, ChangeDetectionStrategy, NgModule } from '@angular/core';
 import * as i2 from '@daffodil/design';
 import { DaffSizableDirective, daffPrefixableMixin, daffSuffixableMixin, DaffArticleEncapsulatedDirective, DaffStatusableDirective, DaffColorableDirective, DaffPrefixSuffixModule } from '@daffodil/design';
-import * as i3 from '@angular/common';
-import { CommonModule } from '@angular/common';
-import * as i4 from '@daffodil/design/loading-icon';
-import { DaffLoadingIconModule } from '@daffodil/design/loading-icon';
+import * as i1 from '@daffodil/design/loading-icon';
+import { DAFF_LOADING_ICON_COMPONENTS } from '@daffodil/design/loading-icon';
+import { coerceBooleanProperty } from '@angular/cdk/coercion';
 
 class DaffButtonSizableDirective extends DaffSizableDirective {
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: DaffButtonSizableDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
@@ -19,17 +18,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImpor
                 }]
         }] });
 
-/**
- * List of classes to add to DaffButtonComponent instances based on host attributes to style as different variants.
- */
-const BUTTON_HOST_ATTRIBUTES = [
-    'daff-button',
-    'daff-stroked-button',
-    'daff-raised-button',
-    'daff-flat-button',
-    'daff-icon-button',
-    'daff-underline-button',
-];
 /**
  * An _elementRef and an instance of renderer2 are needed for the button mixins
  */
@@ -40,32 +28,18 @@ class DaffButtonBase {
     }
 }
 const _daffButtonBase = daffPrefixableMixin(daffSuffixableMixin((DaffButtonBase)));
-var DaffButtonTypeEnum;
-(function (DaffButtonTypeEnum) {
-    DaffButtonTypeEnum["Default"] = "daff-button";
-    DaffButtonTypeEnum["Stroked"] = "daff-stroked-button";
-    DaffButtonTypeEnum["Raised"] = "daff-raised-button";
-    DaffButtonTypeEnum["Flat"] = "daff-flat-button";
-    DaffButtonTypeEnum["Icon"] = "daff-icon-button";
-    DaffButtonTypeEnum["Underline"] = "daff-underline-button";
-})(DaffButtonTypeEnum || (DaffButtonTypeEnum = {}));
-/**
- * @inheritdoc
- */
-class DaffButtonComponent extends _daffButtonBase {
+class DaffButtonBaseDirective extends _daffButtonBase {
     constructor(elementRef, renderer, size) {
         super(elementRef, renderer);
         this.elementRef = elementRef;
         this.renderer = renderer;
         this.size = size;
         this.loading = false;
+        /**
+         * Set the `tabindex` to 0.
+         */
         this.tabindex = 0;
         this._disabled = false;
-        for (const attr of BUTTON_HOST_ATTRIBUTES) {
-            if (this._hasHostAttributes(attr)) {
-                elementRef.nativeElement.classList.add(attr);
-            }
-        }
         /**
          * Sets the default size of a button to medium.
          */
@@ -74,49 +48,6 @@ class DaffButtonComponent extends _daffButtonBase {
     /**
      * @docs-private
      */
-    ngOnInit() {
-        for (const attr of BUTTON_HOST_ATTRIBUTES) {
-            if (this._hasHostAttributes(attr)) {
-                this.buttonType = attr;
-            }
-        }
-    }
-    /**
-     * @docs-private
-     */
-    get button() {
-        return this.buttonType === DaffButtonTypeEnum.Default || this.buttonType === undefined;
-    }
-    /**
-     * @docs-private
-     */
-    get stroked() {
-        return this.buttonType === DaffButtonTypeEnum.Stroked;
-    }
-    /**
-     * @docs-private
-     */
-    get raised() {
-        return this.buttonType === DaffButtonTypeEnum.Raised;
-    }
-    /**
-     * @docs-private
-     */
-    get flat() {
-        return this.buttonType === DaffButtonTypeEnum.Flat;
-    }
-    /**
-     * @docs-private
-     */
-    get icon() {
-        return this.buttonType === DaffButtonTypeEnum.Icon;
-    }
-    /**
-     * @docs-private
-     */
-    get underline() {
-        return this.buttonType === DaffButtonTypeEnum.Underline;
-    }
     get disabledClass() {
         return this.disabled;
     }
@@ -135,36 +66,20 @@ class DaffButtonComponent extends _daffButtonBase {
     get ariaDisabled() {
         return this.disabled ? true : null;
     }
+    /**
+     * Set the `tabindex` to -1 if the button is disabled.
+     */
     get disabledTabIndex() {
         return this.disabled ? -1 : this.tabindex;
     }
-    _getHostElement() {
-        return this.elementRef.nativeElement;
-    }
-    /**
-     * Gets whether the button has one of the given attributes.
-     * */
-    _hasHostAttributes(...attributes) {
-        return attributes.some(attribute => this._getHostElement().hasAttribute(attribute));
-    }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: DaffButtonComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: DaffButtonSizableDirective }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.2", type: DaffButtonComponent, selector: "button[daff-button],button[daff-stroked-button],button[daff-raised-button],button[daff-flat-button],button[daff-icon-button],button[daff-underline-button],a[daff-button],a[daff-stroked-button],a[daff-raised-button],a[daff-flat-button],a[daff-icon-button],a[daff-underline-button]", inputs: { loading: "loading", tabindex: "tabindex", disabled: "disabled" }, host: { properties: { "class.daff-button": "this.button", "class.daff-stroked-button": "this.stroked", "class.daff-raised-button": "this.raised", "class.daff-flat-button": "this.flat", "class.daff-icon-button": "this.icon", "class.daff-underline-button": "this.underline", "class.daff-button--disabled": "this.disabledClass", "attr.disabled": "this.disabledAttribute", "attr.aria-disabled": "this.ariaDisabled", "attr.tabindex": "this.disabledTabIndex" } }, usesInheritance: true, hostDirectives: [{ directive: i2.DaffArticleEncapsulatedDirective }, { directive: DaffButtonSizableDirective, inputs: ["size", "size"] }, { directive: i2.DaffStatusableDirective, inputs: ["status", "status"] }, { directive: i2.DaffColorableDirective, inputs: ["color", "color"] }], ngImport: i0, template: "<ng-container *ngIf=\"_prefix\">\n  <ng-content select=\"[daffPrefix]\"></ng-content>\n</ng-container>\n<span class=\"daff-button__content\" *ngIf=\"!loading\"><ng-content></ng-content></span>\n<daff-loading-icon *ngIf=\"loading\" [diameter]=\"24\"></daff-loading-icon>\n<ng-container *ngIf=\"_suffix\">\n  <ng-content select=\"[daffSuffix]\"></ng-content>\n</ng-container>", styles: [".daff-button,.daff-raised-button,.daff-stroked-button,.daff-flat-button{cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:inline-flex;justify-content:center;align-items:center;gap:8px;appearance:none;border:none;border-radius:4px;position:relative;text-align:center;text-decoration:none;min-width:96px}.daff-button[disabled],.daff-button.daff-button--disabled,.daff-raised-button[disabled],.daff-raised-button.daff-button--disabled,.daff-stroked-button[disabled],.daff-stroked-button.daff-button--disabled,.daff-flat-button[disabled],.daff-flat-button.daff-button--disabled{cursor:not-allowed}.daff-button[disabled]:hover:after,.daff-button.daff-button--disabled:hover:after,.daff-raised-button[disabled]:hover:after,.daff-raised-button.daff-button--disabled:hover:after,.daff-stroked-button[disabled]:hover:after,.daff-stroked-button.daff-button--disabled:hover:after,.daff-flat-button[disabled]:hover:after,.daff-flat-button.daff-button--disabled:hover:after{opacity:0}.daff-button .daff-button__content,.daff-button .daff-prefix,.daff-button .daff-suffix,.daff-raised-button .daff-button__content,.daff-raised-button .daff-prefix,.daff-raised-button .daff-suffix,.daff-stroked-button .daff-button__content,.daff-stroked-button .daff-prefix,.daff-stroked-button .daff-suffix,.daff-flat-button .daff-button__content,.daff-flat-button .daff-prefix,.daff-flat-button .daff-suffix{z-index:2}.daff-button.daff-sm,.daff-raised-button.daff-sm,.daff-stroked-button.daff-sm,.daff-flat-button.daff-sm{font-size:.875rem;line-height:2rem;height:2rem;padding:0 1rem}.daff-button.daff-md,.daff-raised-button.daff-md,.daff-stroked-button.daff-md,.daff-flat-button.daff-md{font-size:1rem;line-height:3rem;height:3rem;padding:0 1.5rem}.daff-button.daff-lg,.daff-raised-button.daff-lg,.daff-stroked-button.daff-lg,.daff-flat-button.daff-lg{font-size:1.25rem;line-height:3.5rem;height:3.5rem;padding:0 1.5rem}.daff-button:after,.daff-flat-button:after{content:\"\";border-radius:4px;position:absolute;width:100%;height:100%;opacity:0;transition:opacity .3s}.daff-button:hover:after,.daff-button:active:after,.daff-flat-button:hover:after,.daff-flat-button:active:after{opacity:1}.daff-raised-button:after{content:\"\";border-radius:0;position:absolute;width:100%;height:100%;opacity:0;transition:opacity .3s}.daff-raised-button:hover:after,.daff-raised-button:active:after{opacity:1}.daff-stroked-button:after{content:\"\";border-radius:3px;position:absolute;width:100%;height:100%;opacity:0;transition:opacity .3s}.daff-stroked-button:hover:after,.daff-stroked-button:active:after{opacity:1}.daff-flat-button{background:none;border:none}.daff-icon-button{cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:inline-flex;justify-content:center;align-items:center;gap:8px;appearance:none;border:none;border-radius:4px;position:relative;text-align:center;text-decoration:none;background:none;border:0;padding:0}.daff-icon-button[disabled],.daff-icon-button.daff-button--disabled{cursor:not-allowed}.daff-icon-button[disabled]:hover:after,.daff-icon-button.daff-button--disabled:hover:after{opacity:0}.daff-icon-button .daff-button__content,.daff-icon-button .daff-prefix,.daff-icon-button .daff-suffix{z-index:2}.daff-icon-button.daff-sm{font-size:.875rem;line-height:2rem;height:2rem;width:2rem}.daff-icon-button.daff-md{font-size:1rem;line-height:3rem;height:3rem;width:3rem}.daff-icon-button.daff-lg{font-size:1.25rem;line-height:3.5rem;height:3.5rem;width:3.5rem}.daff-underline-button{cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:inline-flex;justify-content:center;align-items:center;gap:8px;appearance:none;border:none;position:relative;text-align:center;background:transparent;border:0;border-radius:0;line-height:1.25rem;overflow:hidden;text-decoration:none;vertical-align:middle}.daff-underline-button[disabled]:hover:after,.daff-underline-button.daff-button--disabled:hover:after{opacity:0}.daff-underline-button .daff-button__content,.daff-underline-button .daff-prefix,.daff-underline-button .daff-suffix{z-index:2}.daff-underline-button[disabled],.daff-underline-button.daff-button--disabled{cursor:not-allowed}.daff-underline-button[disabled]:hover:after,.daff-underline-button[disabled]:active:after,.daff-underline-button.daff-button--disabled:hover:after,.daff-underline-button.daff-button--disabled:active:after{animation:none}.daff-underline-button:after{bottom:0;content:\"\";height:2px;left:0;opacity:1;position:absolute;width:100%}.daff-underline-button:hover:after{animation:none}@media (min-width: 1024px){.daff-underline-button:hover:after{animation:underline-button-hover .7s ease}}.daff-underline-button.daff-sm{font-size:.875rem;height:1.25rem;padding:0}.daff-underline-button.daff-md{font-size:1rem;height:1.5rem;padding:0 0 4px}.daff-underline-button.daff-lg{font-size:1.25rem;height:1.75rem;padding:0 0 8px}@keyframes underline-button-hover{0%{transform:translate(0)}50%{transform:translate(100%)}51%{transform:translate(-100%)}to{transform:translate(0)}}\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.DaffLoadingIconComponent, selector: "daff-loading-icon", inputs: ["diameter"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: DaffButtonBaseDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: DaffButtonSizableDirective }], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.2", type: DaffButtonBaseDirective, isStandalone: true, selector: "[daffButtonBase]", inputs: { loading: "loading", tabindex: "tabindex", disabled: "disabled" }, host: { properties: { "class.disabled": "this.disabledClass", "attr.disabled": "this.disabledAttribute", "attr.aria-disabled": "this.ariaDisabled", "attr.tabindex": "this.disabledTabIndex" } }, usesInheritance: true, hostDirectives: [{ directive: i2.DaffArticleEncapsulatedDirective }, { directive: DaffButtonSizableDirective, inputs: ["size", "size"] }, { directive: i2.DaffStatusableDirective, inputs: ["status", "status"] }, { directive: i2.DaffColorableDirective, inputs: ["color", "color"] }], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: DaffButtonComponent, decorators: [{
-            type: Component,
-            args: [{ selector: '' +
-                        'button[daff-button]' + ',' +
-                        'button[daff-stroked-button]' + ',' +
-                        'button[daff-raised-button]' + ',' +
-                        'button[daff-flat-button]' + ',' +
-                        'button[daff-icon-button]' + ',' +
-                        'button[daff-underline-button]' + ',' +
-                        'a[daff-button]' + ',' +
-                        'a[daff-stroked-button]' + ',' +
-                        'a[daff-raised-button]' + ',' +
-                        'a[daff-flat-button]' + ',' +
-                        'a[daff-icon-button]' + ',' +
-                        'a[daff-underline-button]', hostDirectives: [
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: DaffButtonBaseDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[daffButtonBase]',
+                    hostDirectives: [
                         { directive: DaffArticleEncapsulatedDirective },
                         {
                             directive: DaffButtonSizableDirective,
@@ -178,28 +93,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImpor
                             directive: DaffColorableDirective,
                             inputs: ['color'],
                         },
-                    ], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"_prefix\">\n  <ng-content select=\"[daffPrefix]\"></ng-content>\n</ng-container>\n<span class=\"daff-button__content\" *ngIf=\"!loading\"><ng-content></ng-content></span>\n<daff-loading-icon *ngIf=\"loading\" [diameter]=\"24\"></daff-loading-icon>\n<ng-container *ngIf=\"_suffix\">\n  <ng-content select=\"[daffSuffix]\"></ng-content>\n</ng-container>", styles: [".daff-button,.daff-raised-button,.daff-stroked-button,.daff-flat-button{cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:inline-flex;justify-content:center;align-items:center;gap:8px;appearance:none;border:none;border-radius:4px;position:relative;text-align:center;text-decoration:none;min-width:96px}.daff-button[disabled],.daff-button.daff-button--disabled,.daff-raised-button[disabled],.daff-raised-button.daff-button--disabled,.daff-stroked-button[disabled],.daff-stroked-button.daff-button--disabled,.daff-flat-button[disabled],.daff-flat-button.daff-button--disabled{cursor:not-allowed}.daff-button[disabled]:hover:after,.daff-button.daff-button--disabled:hover:after,.daff-raised-button[disabled]:hover:after,.daff-raised-button.daff-button--disabled:hover:after,.daff-stroked-button[disabled]:hover:after,.daff-stroked-button.daff-button--disabled:hover:after,.daff-flat-button[disabled]:hover:after,.daff-flat-button.daff-button--disabled:hover:after{opacity:0}.daff-button .daff-button__content,.daff-button .daff-prefix,.daff-button .daff-suffix,.daff-raised-button .daff-button__content,.daff-raised-button .daff-prefix,.daff-raised-button .daff-suffix,.daff-stroked-button .daff-button__content,.daff-stroked-button .daff-prefix,.daff-stroked-button .daff-suffix,.daff-flat-button .daff-button__content,.daff-flat-button .daff-prefix,.daff-flat-button .daff-suffix{z-index:2}.daff-button.daff-sm,.daff-raised-button.daff-sm,.daff-stroked-button.daff-sm,.daff-flat-button.daff-sm{font-size:.875rem;line-height:2rem;height:2rem;padding:0 1rem}.daff-button.daff-md,.daff-raised-button.daff-md,.daff-stroked-button.daff-md,.daff-flat-button.daff-md{font-size:1rem;line-height:3rem;height:3rem;padding:0 1.5rem}.daff-button.daff-lg,.daff-raised-button.daff-lg,.daff-stroked-button.daff-lg,.daff-flat-button.daff-lg{font-size:1.25rem;line-height:3.5rem;height:3.5rem;padding:0 1.5rem}.daff-button:after,.daff-flat-button:after{content:\"\";border-radius:4px;position:absolute;width:100%;height:100%;opacity:0;transition:opacity .3s}.daff-button:hover:after,.daff-button:active:after,.daff-flat-button:hover:after,.daff-flat-button:active:after{opacity:1}.daff-raised-button:after{content:\"\";border-radius:0;position:absolute;width:100%;height:100%;opacity:0;transition:opacity .3s}.daff-raised-button:hover:after,.daff-raised-button:active:after{opacity:1}.daff-stroked-button:after{content:\"\";border-radius:3px;position:absolute;width:100%;height:100%;opacity:0;transition:opacity .3s}.daff-stroked-button:hover:after,.daff-stroked-button:active:after{opacity:1}.daff-flat-button{background:none;border:none}.daff-icon-button{cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:inline-flex;justify-content:center;align-items:center;gap:8px;appearance:none;border:none;border-radius:4px;position:relative;text-align:center;text-decoration:none;background:none;border:0;padding:0}.daff-icon-button[disabled],.daff-icon-button.daff-button--disabled{cursor:not-allowed}.daff-icon-button[disabled]:hover:after,.daff-icon-button.daff-button--disabled:hover:after{opacity:0}.daff-icon-button .daff-button__content,.daff-icon-button .daff-prefix,.daff-icon-button .daff-suffix{z-index:2}.daff-icon-button.daff-sm{font-size:.875rem;line-height:2rem;height:2rem;width:2rem}.daff-icon-button.daff-md{font-size:1rem;line-height:3rem;height:3rem;width:3rem}.daff-icon-button.daff-lg{font-size:1.25rem;line-height:3.5rem;height:3.5rem;width:3.5rem}.daff-underline-button{cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:inline-flex;justify-content:center;align-items:center;gap:8px;appearance:none;border:none;position:relative;text-align:center;background:transparent;border:0;border-radius:0;line-height:1.25rem;overflow:hidden;text-decoration:none;vertical-align:middle}.daff-underline-button[disabled]:hover:after,.daff-underline-button.daff-button--disabled:hover:after{opacity:0}.daff-underline-button .daff-button__content,.daff-underline-button .daff-prefix,.daff-underline-button .daff-suffix{z-index:2}.daff-underline-button[disabled],.daff-underline-button.daff-button--disabled{cursor:not-allowed}.daff-underline-button[disabled]:hover:after,.daff-underline-button[disabled]:active:after,.daff-underline-button.daff-button--disabled:hover:after,.daff-underline-button.daff-button--disabled:active:after{animation:none}.daff-underline-button:after{bottom:0;content:\"\";height:2px;left:0;opacity:1;position:absolute;width:100%}.daff-underline-button:hover:after{animation:none}@media (min-width: 1024px){.daff-underline-button:hover:after{animation:underline-button-hover .7s ease}}.daff-underline-button.daff-sm{font-size:.875rem;height:1.25rem;padding:0}.daff-underline-button.daff-md{font-size:1rem;height:1.5rem;padding:0 0 4px}.daff-underline-button.daff-lg{font-size:1.25rem;height:1.75rem;padding:0 0 8px}@keyframes underline-button-hover{0%{transform:translate(0)}50%{transform:translate(100%)}51%{transform:translate(-100%)}to{transform:translate(0)}}\n"] }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: DaffButtonSizableDirective }], propDecorators: { button: [{
-                type: HostBinding,
-                args: ['class.daff-button']
-            }], stroked: [{
-                type: HostBinding,
-                args: ['class.daff-stroked-button']
-            }], raised: [{
-                type: HostBinding,
-                args: ['class.daff-raised-button']
-            }], flat: [{
-                type: HostBinding,
-                args: ['class.daff-flat-button']
-            }], icon: [{
-                type: HostBinding,
-                args: ['class.daff-icon-button']
-            }], underline: [{
-                type: HostBinding,
-                args: ['class.daff-underline-button']
-            }], disabledClass: [{
+                    ],
+                    standalone: true,
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: DaffButtonSizableDirective }], propDecorators: { disabledClass: [{
                 type: HostBinding,
-                args: ['class.daff-button--disabled']
+                args: ['class.disabled']
             }], loading: [{
                 type: Input
             }], tabindex: [{
@@ -217,37 +116,315 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImpor
                 args: ['attr.tabindex']
             }] } });
 
+/**
+ * DaffButtonComponent is a rectangular contained button with background color.
+ *
+ * ## Usage
+ * ```html
+ * <button daff-button>
+ *  <div daffPrefix></div>
+ *  Button
+ *  <div daffSuffix></div>
+ * </button>
+ *
+ * <a href="/" daff-button>
+ *  <div daffPrefix></div>
+ *  Linked button
+ *  <div daffSuffix></div>
+ * </a>
+ * ```
+ */
+class DaffButtonComponent extends DaffButtonBaseDirective {
+    constructor() {
+        super(...arguments);
+        /**
+         * @docs-private
+         */
+        this.class = true;
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: DaffButtonComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.2", type: DaffButtonComponent, isStandalone: true, selector: "button[daff-button],a[daff-button]", host: { properties: { "class.daff-button": "this.class" } }, usesInheritance: true, ngImport: i0, template: "@if (_prefix) {\n  <ng-content select=\"[daffPrefix]\"></ng-content>\n}\n@if (loading) {\n  <daff-loading-icon class=\"daff-button__loading\"></daff-loading-icon>\n} @else {\n  <span class=\"daff-button__content\"><ng-content></ng-content></span>\n}\n@if (_suffix) {\n  <ng-content select=\"[daffSuffix]\"></ng-content>\n}", styles: [".daff-button{cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:inline-flex;justify-content:center;align-items:center;gap:.5rem;appearance:none;border:none;border-radius:.25rem;position:relative;text-align:center;text-decoration:none;min-width:96px}.daff-button[disabled],.daff-button.disabled{cursor:not-allowed}.daff-button .daff-button__content,.daff-button .daff-prefix,.daff-button .daff-suffix{z-index:2}.daff-button .daff-button__loading{max-width:1.5rem}.daff-button .daff-button__content{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.daff-button:after{content:\"\";border-radius:4px;position:absolute;width:100%;height:100%;opacity:0;transition:opacity .3s}.daff-button:hover:after,.daff-button:active:after{opacity:1}.daff-button.daff-sm{font-size:.875rem;line-height:2rem;height:2rem;padding:0 1rem}.daff-button.daff-md{font-size:1rem;line-height:3rem;height:3rem;padding:0 1.5rem}.daff-button.daff-lg{font-size:1.25rem;line-height:3.5rem;height:3.5rem;padding:0 1.5rem}\n"], dependencies: [{ kind: "ngmodule", type: DaffPrefixSuffixModule }, { kind: "component", type: i1.DaffLoadingIconComponent, selector: "daff-loading-icon" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: DaffButtonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: '' +
+                        'button[daff-button]' + ',' +
+                        'a[daff-button]', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
+                        DaffPrefixSuffixModule,
+                        DAFF_LOADING_ICON_COMPONENTS,
+                    ], template: "@if (_prefix) {\n  <ng-content select=\"[daffPrefix]\"></ng-content>\n}\n@if (loading) {\n  <daff-loading-icon class=\"daff-button__loading\"></daff-loading-icon>\n} @else {\n  <span class=\"daff-button__content\"><ng-content></ng-content></span>\n}\n@if (_suffix) {\n  <ng-content select=\"[daffSuffix]\"></ng-content>\n}", styles: [".daff-button{cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:inline-flex;justify-content:center;align-items:center;gap:.5rem;appearance:none;border:none;border-radius:.25rem;position:relative;text-align:center;text-decoration:none;min-width:96px}.daff-button[disabled],.daff-button.disabled{cursor:not-allowed}.daff-button .daff-button__content,.daff-button .daff-prefix,.daff-button .daff-suffix{z-index:2}.daff-button .daff-button__loading{max-width:1.5rem}.daff-button .daff-button__content{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.daff-button:after{content:\"\";border-radius:4px;position:absolute;width:100%;height:100%;opacity:0;transition:opacity .3s}.daff-button:hover:after,.daff-button:active:after{opacity:1}.daff-button.daff-sm{font-size:.875rem;line-height:2rem;height:2rem;padding:0 1rem}.daff-button.daff-md{font-size:1rem;line-height:3rem;height:3rem;padding:0 1.5rem}.daff-button.daff-lg{font-size:1.25rem;line-height:3.5rem;height:3.5rem;padding:0 1.5rem}\n"] }]
+        }], propDecorators: { class: [{
+                type: HostBinding,
+                args: ['class.daff-button']
+            }] } });
+
+/**
+ * DaffFlatButtonComponent is a rectangular contained button no background.
+ *
+ * ## Usage
+ * ```html
+ * <button daff-flat-button>
+ *  <div daffPrefix></div>
+ *  Flat Button
+ *  <div daffSuffix></div>
+ * </button>
+ *
+ * <a href="/" daff-flat-button>
+ *  <div daffPrefix></div>
+ *  Linked flat button
+ *  <div daffSuffix></div>
+ * </a>
+ * ```
+ */
+class DaffFlatButtonComponent extends DaffButtonBaseDirective {
+    constructor() {
+        super(...arguments);
+        /**
+         * @docs-private
+         */
+        this.class = true;
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: DaffFlatButtonComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.2", type: DaffFlatButtonComponent, isStandalone: true, selector: "button[daff-flat-button],a[daff-flat-button]", host: { properties: { "class.daff-flat-button": "this.class" } }, usesInheritance: true, ngImport: i0, template: "@if (_prefix) {\n  <ng-content select=\"[daffPrefix]\"></ng-content>\n}\n@if (loading) {\n  <daff-loading-icon class=\"daff-button__loading\"></daff-loading-icon>\n} @else {\n  <span class=\"daff-button__content\"><ng-content></ng-content></span>\n}\n@if (_suffix) {\n  <ng-content select=\"[daffSuffix]\"></ng-content>\n}", styles: [".daff-flat-button{cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:inline-flex;justify-content:center;align-items:center;gap:.5rem;appearance:none;border-radius:.25rem;position:relative;text-align:center;text-decoration:none;min-width:96px;background:none;border:none}.daff-flat-button[disabled],.daff-flat-button.disabled{cursor:not-allowed}.daff-flat-button .daff-button__content,.daff-flat-button .daff-prefix,.daff-flat-button .daff-suffix{z-index:2}.daff-flat-button .daff-button__loading{max-width:1.5rem}.daff-flat-button .daff-button__content{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.daff-flat-button:after{content:\"\";border-radius:4px;position:absolute;width:100%;height:100%;opacity:0;transition:opacity .3s}.daff-flat-button:hover:after,.daff-flat-button:active:after{opacity:1}.daff-flat-button.daff-sm{font-size:.875rem;line-height:2rem;height:2rem;padding:0 1rem}.daff-flat-button.daff-md{font-size:1rem;line-height:3rem;height:3rem;padding:0 1.5rem}.daff-flat-button.daff-lg{font-size:1.25rem;line-height:3.5rem;height:3.5rem;padding:0 1.5rem}\n"], dependencies: [{ kind: "ngmodule", type: DaffPrefixSuffixModule }, { kind: "component", type: i1.DaffLoadingIconComponent, selector: "daff-loading-icon" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: DaffFlatButtonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: '' +
+                        'button[daff-flat-button]' + ',' +
+                        'a[daff-flat-button]', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
+                        DaffPrefixSuffixModule,
+                        DAFF_LOADING_ICON_COMPONENTS,
+                    ], template: "@if (_prefix) {\n  <ng-content select=\"[daffPrefix]\"></ng-content>\n}\n@if (loading) {\n  <daff-loading-icon class=\"daff-button__loading\"></daff-loading-icon>\n} @else {\n  <span class=\"daff-button__content\"><ng-content></ng-content></span>\n}\n@if (_suffix) {\n  <ng-content select=\"[daffSuffix]\"></ng-content>\n}", styles: [".daff-flat-button{cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:inline-flex;justify-content:center;align-items:center;gap:.5rem;appearance:none;border-radius:.25rem;position:relative;text-align:center;text-decoration:none;min-width:96px;background:none;border:none}.daff-flat-button[disabled],.daff-flat-button.disabled{cursor:not-allowed}.daff-flat-button .daff-button__content,.daff-flat-button .daff-prefix,.daff-flat-button .daff-suffix{z-index:2}.daff-flat-button .daff-button__loading{max-width:1.5rem}.daff-flat-button .daff-button__content{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.daff-flat-button:after{content:\"\";border-radius:4px;position:absolute;width:100%;height:100%;opacity:0;transition:opacity .3s}.daff-flat-button:hover:after,.daff-flat-button:active:after{opacity:1}.daff-flat-button.daff-sm{font-size:.875rem;line-height:2rem;height:2rem;padding:0 1rem}.daff-flat-button.daff-md{font-size:1rem;line-height:3rem;height:3rem;padding:0 1.5rem}.daff-flat-button.daff-lg{font-size:1.25rem;line-height:3.5rem;height:3.5rem;padding:0 1.5rem}\n"] }]
+        }], propDecorators: { class: [{
+                type: HostBinding,
+                args: ['class.daff-flat-button']
+            }] } });
+
+/**
+ * DaffIconButtonComponent is an icon button used with icon fonts.
+ *
+ * ## Usage
+ * ```html
+ * <button daff-icon-button>
+ *  <fa-icon [icon]="faPlus"></fa-icon>
+ * </button>
+ *
+ * <a href="/" daff-icon-button>
+ *  <fa-icon [icon]="faPlus"></fa-icon>
+ * </a>
+ * ```
+ */
+class DaffIconButtonComponent extends DaffButtonBaseDirective {
+    constructor() {
+        super(...arguments);
+        /**
+         * @docs-private
+         */
+        this.class = true;
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: DaffIconButtonComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.2", type: DaffIconButtonComponent, isStandalone: true, selector: "button[daff-icon-button],a[daff-icon-button]", host: { properties: { "class.daff-icon-button": "this.class" } }, usesInheritance: true, ngImport: i0, template: "@if (_prefix) {\n  <ng-content select=\"[daffPrefix]\"></ng-content>\n}\n@if (loading) {\n  <daff-loading-icon class=\"daff-button__loading\"></daff-loading-icon>\n} @else {\n  <span class=\"daff-button__content\"><ng-content></ng-content></span>\n}\n@if (_suffix) {\n  <ng-content select=\"[daffSuffix]\"></ng-content>\n}", styles: [".daff-icon-button{cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:inline-flex;justify-content:center;align-items:center;gap:.5rem;appearance:none;border:none;border-radius:.25rem;position:relative;text-align:center;text-decoration:none;background:none;border:0;padding:0}.daff-icon-button[disabled],.daff-icon-button.disabled{cursor:not-allowed}.daff-icon-button .daff-button__content,.daff-icon-button .daff-prefix,.daff-icon-button .daff-suffix{z-index:2}.daff-icon-button .daff-button__loading{max-width:1.5rem}.daff-icon-button .daff-button__content{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.daff-icon-button.daff-sm{font-size:.875rem;line-height:2rem;height:2rem;width:2rem}.daff-icon-button.daff-md{font-size:1rem;line-height:3rem;height:3rem;width:3rem}.daff-icon-button.daff-lg{font-size:1.25rem;line-height:3.5rem;height:3.5rem;width:3.5rem}\n"], dependencies: [{ kind: "ngmodule", type: DaffPrefixSuffixModule }, { kind: "component", type: i1.DaffLoadingIconComponent, selector: "daff-loading-icon" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: DaffIconButtonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: '' +
+                        'button[daff-icon-button]' + ',' +
+                        'a[daff-icon-button]', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
+                        DaffPrefixSuffixModule,
+                        DAFF_LOADING_ICON_COMPONENTS,
+                    ], template: "@if (_prefix) {\n  <ng-content select=\"[daffPrefix]\"></ng-content>\n}\n@if (loading) {\n  <daff-loading-icon class=\"daff-button__loading\"></daff-loading-icon>\n} @else {\n  <span class=\"daff-button__content\"><ng-content></ng-content></span>\n}\n@if (_suffix) {\n  <ng-content select=\"[daffSuffix]\"></ng-content>\n}", styles: [".daff-icon-button{cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:inline-flex;justify-content:center;align-items:center;gap:.5rem;appearance:none;border:none;border-radius:.25rem;position:relative;text-align:center;text-decoration:none;background:none;border:0;padding:0}.daff-icon-button[disabled],.daff-icon-button.disabled{cursor:not-allowed}.daff-icon-button .daff-button__content,.daff-icon-button .daff-prefix,.daff-icon-button .daff-suffix{z-index:2}.daff-icon-button .daff-button__loading{max-width:1.5rem}.daff-icon-button .daff-button__content{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.daff-icon-button.daff-sm{font-size:.875rem;line-height:2rem;height:2rem;width:2rem}.daff-icon-button.daff-md{font-size:1rem;line-height:3rem;height:3rem;width:3rem}.daff-icon-button.daff-lg{font-size:1.25rem;line-height:3.5rem;height:3.5rem;width:3.5rem}\n"] }]
+        }], propDecorators: { class: [{
+                type: HostBinding,
+                args: ['class.daff-icon-button']
+            }] } });
+
+/**
+ * DaffRaisedButtonComponent is a rectangular contained button with background color and elevation.
+ *
+ * ## Usage
+ * ```html
+ * <button daff-raised-button>
+ *  <div daffPrefix></div>
+ *  Raised Button
+ *  <div daffSuffix></div>
+ * </button>
+ *
+ * <a href="/" daff-raised-button>
+ *  <div daffPrefix></div>
+ *  Linked raised button
+ *  <div daffSuffix></div>
+ * </a>
+ * ```
+ */
+class DaffRaisedButtonComponent extends DaffButtonBaseDirective {
+    constructor() {
+        super(...arguments);
+        /**
+         * @docs-private
+         */
+        this.class = true;
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: DaffRaisedButtonComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.2", type: DaffRaisedButtonComponent, isStandalone: true, selector: "button[daff-raised-button],a[daff-raised-button]", host: { properties: { "class.daff-raised-button": "this.class" } }, usesInheritance: true, ngImport: i0, template: "@if (_prefix) {\n  <ng-content select=\"[daffPrefix]\"></ng-content>\n}\n@if (loading) {\n  <daff-loading-icon class=\"daff-button__loading\"></daff-loading-icon>\n} @else {\n  <span class=\"daff-button__content\"><ng-content></ng-content></span>\n}\n@if (_suffix) {\n  <ng-content select=\"[daffSuffix]\"></ng-content>\n}", styles: [".daff-raised-button{cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:inline-flex;justify-content:center;align-items:center;gap:.5rem;appearance:none;border:none;border-radius:.25rem;position:relative;text-align:center;text-decoration:none;min-width:96px}.daff-raised-button[disabled],.daff-raised-button.disabled{cursor:not-allowed}.daff-raised-button .daff-button__content,.daff-raised-button .daff-prefix,.daff-raised-button .daff-suffix{z-index:2}.daff-raised-button .daff-button__loading{max-width:1.5rem}.daff-raised-button .daff-button__content{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.daff-raised-button:after{content:\"\";border-radius:0;position:absolute;width:100%;height:100%;opacity:0;transition:opacity .3s}.daff-raised-button:hover:after,.daff-raised-button:active:after{opacity:1}.daff-raised-button.daff-sm{font-size:.875rem;line-height:2rem;height:2rem;padding:0 1rem}.daff-raised-button.daff-md{font-size:1rem;line-height:3rem;height:3rem;padding:0 1.5rem}.daff-raised-button.daff-lg{font-size:1.25rem;line-height:3.5rem;height:3.5rem;padding:0 1.5rem}\n"], dependencies: [{ kind: "ngmodule", type: DaffPrefixSuffixModule }, { kind: "component", type: i1.DaffLoadingIconComponent, selector: "daff-loading-icon" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: DaffRaisedButtonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: '' +
+                        'button[daff-raised-button]' + ',' +
+                        'a[daff-raised-button]', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
+                        DaffPrefixSuffixModule,
+                        DAFF_LOADING_ICON_COMPONENTS,
+                    ], template: "@if (_prefix) {\n  <ng-content select=\"[daffPrefix]\"></ng-content>\n}\n@if (loading) {\n  <daff-loading-icon class=\"daff-button__loading\"></daff-loading-icon>\n} @else {\n  <span class=\"daff-button__content\"><ng-content></ng-content></span>\n}\n@if (_suffix) {\n  <ng-content select=\"[daffSuffix]\"></ng-content>\n}", styles: [".daff-raised-button{cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:inline-flex;justify-content:center;align-items:center;gap:.5rem;appearance:none;border:none;border-radius:.25rem;position:relative;text-align:center;text-decoration:none;min-width:96px}.daff-raised-button[disabled],.daff-raised-button.disabled{cursor:not-allowed}.daff-raised-button .daff-button__content,.daff-raised-button .daff-prefix,.daff-raised-button .daff-suffix{z-index:2}.daff-raised-button .daff-button__loading{max-width:1.5rem}.daff-raised-button .daff-button__content{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.daff-raised-button:after{content:\"\";border-radius:0;position:absolute;width:100%;height:100%;opacity:0;transition:opacity .3s}.daff-raised-button:hover:after,.daff-raised-button:active:after{opacity:1}.daff-raised-button.daff-sm{font-size:.875rem;line-height:2rem;height:2rem;padding:0 1rem}.daff-raised-button.daff-md{font-size:1rem;line-height:3rem;height:3rem;padding:0 1.5rem}.daff-raised-button.daff-lg{font-size:1.25rem;line-height:3.5rem;height:3.5rem;padding:0 1.5rem}\n"] }]
+        }], propDecorators: { class: [{
+                type: HostBinding,
+                args: ['class.daff-raised-button']
+            }] } });
+
+/**
+ * DaffStrokedButtonComponent is a rectangular outlined button with no background color.
+ *
+ * ## Usage
+ * ```html
+ * <button daff-stroked-button>
+ *  <div daffPrefix></div>
+ *  Stroked Button
+ *  <div daffSuffix></div>
+ * </button>
+ *
+ * <a href="/" daff-stroked-button>
+ *  <div daffPrefix></div>
+ *  Linked stroked button
+ *  <div daffSuffix></div>
+ * </a>
+ * ```
+ */
+class DaffStrokedButtonComponent extends DaffButtonBaseDirective {
+    constructor() {
+        super(...arguments);
+        /**
+         * @docs-private
+         */
+        this.class = true;
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: DaffStrokedButtonComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.2", type: DaffStrokedButtonComponent, isStandalone: true, selector: "button[daff-stroked-button],a[daff-stroked-button]", host: { properties: { "class.daff-stroked-button": "this.class" } }, usesInheritance: true, ngImport: i0, template: "@if (_prefix) {\n  <ng-content select=\"[daffPrefix]\"></ng-content>\n}\n@if (loading) {\n  <daff-loading-icon class=\"daff-button__loading\"></daff-loading-icon>\n} @else {\n  <span class=\"daff-button__content\"><ng-content></ng-content></span>\n}\n@if (_suffix) {\n  <ng-content select=\"[daffSuffix]\"></ng-content>\n}", styles: [".daff-stroked-button{cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:inline-flex;justify-content:center;align-items:center;gap:.5rem;appearance:none;border:none;border-radius:.25rem;position:relative;text-align:center;text-decoration:none;min-width:96px}.daff-stroked-button[disabled],.daff-stroked-button.disabled{cursor:not-allowed}.daff-stroked-button .daff-button__content,.daff-stroked-button .daff-prefix,.daff-stroked-button .daff-suffix{z-index:2}.daff-stroked-button .daff-button__loading{max-width:1.5rem}.daff-stroked-button .daff-button__content{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.daff-stroked-button:after{content:\"\";border-radius:3px;position:absolute;width:100%;height:100%;opacity:0;transition:opacity .3s}.daff-stroked-button:hover:after,.daff-stroked-button:active:after{opacity:1}.daff-stroked-button.daff-sm{font-size:.875rem;line-height:2rem;height:2rem;padding:0 1rem}.daff-stroked-button.daff-md{font-size:1rem;line-height:3rem;height:3rem;padding:0 1.5rem}.daff-stroked-button.daff-lg{font-size:1.25rem;line-height:3.5rem;height:3.5rem;padding:0 1.5rem}\n"], dependencies: [{ kind: "ngmodule", type: DaffPrefixSuffixModule }, { kind: "component", type: i1.DaffLoadingIconComponent, selector: "daff-loading-icon" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: DaffStrokedButtonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: '' +
+                        'button[daff-stroked-button]' + ',' +
+                        'a[daff-stroked-button]', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
+                        DaffPrefixSuffixModule,
+                        DAFF_LOADING_ICON_COMPONENTS,
+                    ], template: "@if (_prefix) {\n  <ng-content select=\"[daffPrefix]\"></ng-content>\n}\n@if (loading) {\n  <daff-loading-icon class=\"daff-button__loading\"></daff-loading-icon>\n} @else {\n  <span class=\"daff-button__content\"><ng-content></ng-content></span>\n}\n@if (_suffix) {\n  <ng-content select=\"[daffSuffix]\"></ng-content>\n}", styles: [".daff-stroked-button{cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:inline-flex;justify-content:center;align-items:center;gap:.5rem;appearance:none;border:none;border-radius:.25rem;position:relative;text-align:center;text-decoration:none;min-width:96px}.daff-stroked-button[disabled],.daff-stroked-button.disabled{cursor:not-allowed}.daff-stroked-button .daff-button__content,.daff-stroked-button .daff-prefix,.daff-stroked-button .daff-suffix{z-index:2}.daff-stroked-button .daff-button__loading{max-width:1.5rem}.daff-stroked-button .daff-button__content{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.daff-stroked-button:after{content:\"\";border-radius:3px;position:absolute;width:100%;height:100%;opacity:0;transition:opacity .3s}.daff-stroked-button:hover:after,.daff-stroked-button:active:after{opacity:1}.daff-stroked-button.daff-sm{font-size:.875rem;line-height:2rem;height:2rem;padding:0 1rem}.daff-stroked-button.daff-md{font-size:1rem;line-height:3rem;height:3rem;padding:0 1.5rem}.daff-stroked-button.daff-lg{font-size:1.25rem;line-height:3.5rem;height:3.5rem;padding:0 1.5rem}\n"] }]
+        }], propDecorators: { class: [{
+                type: HostBinding,
+                args: ['class.daff-stroked-button']
+            }] } });
+
+/**
+ * DaffUnderlineButtonComponent is a borderless button with a custom underline style.
+ *
+ * ## Usage
+ * ```html
+ * <button daff-underline-button>
+ *  <div daffPrefix></div>
+ *  Underline Button
+ *  <div daffSuffix></div>
+ * </button>
+ *
+ * <a href="/" daff-underline-button>
+ *  <div daffPrefix></div>
+ *  Linked underline button
+ *  <div daffSuffix></div>
+ * </a>
+ * ```
+ */
+class DaffUnderlineButtonComponent extends DaffButtonBaseDirective {
+    constructor() {
+        super(...arguments);
+        /**
+         * @docs-private
+         */
+        this.class = true;
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: DaffUnderlineButtonComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.2", type: DaffUnderlineButtonComponent, isStandalone: true, selector: "button[daff-underline-button],a[daff-underline-button]", host: { properties: { "class.daff-underline-button": "this.class" } }, usesInheritance: true, ngImport: i0, template: "@if (_prefix) {\n  <ng-content select=\"[daffPrefix]\"></ng-content>\n}\n@if (loading) {\n  <daff-loading-icon class=\"daff-button__loading\"></daff-loading-icon>\n} @else {\n  <span class=\"daff-button__content\"><ng-content></ng-content></span>\n}\n@if (_suffix) {\n  <ng-content select=\"[daffSuffix]\"></ng-content>\n}", styles: [".daff-underline-button{cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:inline-flex;justify-content:center;align-items:center;gap:.5rem;appearance:none;border:none;border-radius:.25rem;position:relative;text-align:center;background:transparent;border:0;border-radius:0;line-height:1.25rem;overflow:hidden;text-decoration:none;vertical-align:middle}.daff-underline-button .daff-button__content,.daff-underline-button .daff-prefix,.daff-underline-button .daff-suffix{z-index:2}.daff-underline-button .daff-button__loading{max-width:1.5rem}.daff-underline-button .daff-button__content{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.daff-underline-button[disabled],.daff-underline-button.disabled{cursor:not-allowed}.daff-underline-button[disabled]:hover:after,.daff-underline-button[disabled]:active:after,.daff-underline-button.disabled:hover:after,.daff-underline-button.disabled:active:after{animation:none}.daff-underline-button:after{bottom:0;content:\"\";height:2px;left:0;opacity:1;position:absolute;width:100%}.daff-underline-button:hover:after{animation:none}@media (min-width: 1024px){.daff-underline-button:hover:after{animation:underline-button-hover .7s ease}}.daff-underline-button.daff-sm{font-size:.875rem;height:1.25rem;padding:0}.daff-underline-button.daff-md{font-size:1rem;height:1.5rem;padding:0 0 4px}.daff-underline-button.daff-lg{font-size:1.25rem;height:1.75rem;padding:0 0 8px}@keyframes underline-button-hover{0%{transform:translate(0)}50%{transform:translate(100%)}51%{transform:translate(-100%)}to{transform:translate(0)}}\n"], dependencies: [{ kind: "ngmodule", type: DaffPrefixSuffixModule }, { kind: "component", type: i1.DaffLoadingIconComponent, selector: "daff-loading-icon" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: DaffUnderlineButtonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: '' +
+                        'button[daff-underline-button]' + ',' +
+                        'a[daff-underline-button]', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
+                        DaffPrefixSuffixModule,
+                        DAFF_LOADING_ICON_COMPONENTS,
+                    ], template: "@if (_prefix) {\n  <ng-content select=\"[daffPrefix]\"></ng-content>\n}\n@if (loading) {\n  <daff-loading-icon class=\"daff-button__loading\"></daff-loading-icon>\n} @else {\n  <span class=\"daff-button__content\"><ng-content></ng-content></span>\n}\n@if (_suffix) {\n  <ng-content select=\"[daffSuffix]\"></ng-content>\n}", styles: [".daff-underline-button{cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:inline-flex;justify-content:center;align-items:center;gap:.5rem;appearance:none;border:none;border-radius:.25rem;position:relative;text-align:center;background:transparent;border:0;border-radius:0;line-height:1.25rem;overflow:hidden;text-decoration:none;vertical-align:middle}.daff-underline-button .daff-button__content,.daff-underline-button .daff-prefix,.daff-underline-button .daff-suffix{z-index:2}.daff-underline-button .daff-button__loading{max-width:1.5rem}.daff-underline-button .daff-button__content{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.daff-underline-button[disabled],.daff-underline-button.disabled{cursor:not-allowed}.daff-underline-button[disabled]:hover:after,.daff-underline-button[disabled]:active:after,.daff-underline-button.disabled:hover:after,.daff-underline-button.disabled:active:after{animation:none}.daff-underline-button:after{bottom:0;content:\"\";height:2px;left:0;opacity:1;position:absolute;width:100%}.daff-underline-button:hover:after{animation:none}@media (min-width: 1024px){.daff-underline-button:hover:after{animation:underline-button-hover .7s ease}}.daff-underline-button.daff-sm{font-size:.875rem;height:1.25rem;padding:0}.daff-underline-button.daff-md{font-size:1rem;height:1.5rem;padding:0 0 4px}.daff-underline-button.daff-lg{font-size:1.25rem;height:1.75rem;padding:0 0 8px}@keyframes underline-button-hover{0%{transform:translate(0)}50%{transform:translate(100%)}51%{transform:translate(-100%)}to{transform:translate(0)}}\n"] }]
+        }], propDecorators: { class: [{
+                type: HostBinding,
+                args: ['class.daff-underline-button']
+            }] } });
+
+/** @deprecated in favor of {@link DAFF_BUTTON_COMPONENTS} */
 class DaffButtonModule {
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: DaffButtonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.2", ngImport: i0, type: DaffButtonModule, declarations: [DaffButtonComponent], imports: [CommonModule,
-            DaffPrefixSuffixModule,
-            DaffLoadingIconModule], exports: [DaffButtonComponent,
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.2", ngImport: i0, type: DaffButtonModule, imports: [CommonModule,
+            DaffButtonComponent,
+            DaffFlatButtonComponent,
+            DaffIconButtonComponent,
+            DaffRaisedButtonComponent,
+            DaffStrokedButtonComponent,
+            DaffUnderlineButtonComponent], exports: [DaffButtonComponent,
+            DaffFlatButtonComponent,
+            DaffIconButtonComponent,
+            DaffRaisedButtonComponent,
+            DaffStrokedButtonComponent,
+            DaffUnderlineButtonComponent,
             DaffPrefixSuffixModule] }); }
     /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: DaffButtonModule, imports: [CommonModule,
-            DaffPrefixSuffixModule,
-            DaffLoadingIconModule, DaffPrefixSuffixModule] }); }
+            DaffButtonComponent,
+            DaffFlatButtonComponent,
+            DaffIconButtonComponent,
+            DaffRaisedButtonComponent,
+            DaffStrokedButtonComponent,
+            DaffUnderlineButtonComponent, DaffPrefixSuffixModule] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: DaffButtonModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
                         CommonModule,
-                        DaffPrefixSuffixModule,
-                        DaffLoadingIconModule,
-                    ],
-                    declarations: [
                         DaffButtonComponent,
+                        DaffFlatButtonComponent,
+                        DaffIconButtonComponent,
+                        DaffRaisedButtonComponent,
+                        DaffStrokedButtonComponent,
+                        DaffUnderlineButtonComponent,
                     ],
                     exports: [
                         DaffButtonComponent,
+                        DaffFlatButtonComponent,
+                        DaffIconButtonComponent,
+                        DaffRaisedButtonComponent,
+                        DaffStrokedButtonComponent,
+                        DaffUnderlineButtonComponent,
                         DaffPrefixSuffixModule,
                     ],
                 }]
         }] });
 
+const DAFF_BUTTON_COMPONENTS = [
+    DaffButtonComponent,
+    DaffPrefixSuffixModule,
+    DaffFlatButtonComponent,
+    DaffIconButtonComponent,
+    DaffRaisedButtonComponent,
+    DaffStrokedButtonComponent,
+    DaffUnderlineButtonComponent,
+];
+
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { DaffButtonComponent, DaffButtonModule, DaffButtonSizableDirective };
+export { DAFF_BUTTON_COMPONENTS, DaffButtonComponent, DaffButtonModule, DaffButtonSizableDirective, DaffFlatButtonComponent, DaffIconButtonComponent, DaffRaisedButtonComponent, DaffStrokedButtonComponent, DaffUnderlineButtonComponent };
 //# sourceMappingURL=daffodil-design-button.mjs.map