@daffodil/design 0.93.1 → 0.94.0

package/fesm2022/daffodil-design-tag.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Directive, EventEmitter, booleanAttribute, Output, Input, ContentChild, ChangeDetectionStrategy, ViewEncapsulation, Component } from '@angular/core';
+import { Directive, contentChild, input, booleanAttribute, output, Input, ChangeDetectionStrategy, ViewEncapsulation, Component } from '@angular/core';
 import { FaIconComponent } from '@fortawesome/angular-fontawesome';
 import { faTimes } from '@fortawesome/free-solid-svg-icons';
 import * as i2 from '@daffodil/design';
@@ -32,7 +32,7 @@ class DaffTagComponent {
      * Internal function to access the disabled property of the DaffDisableableDirective.
      */
     get disabled() {
-        return this.disabledDirective.disabled;
+        return this.disabledDirective.disabled();
     }
     /**
      * @deprecated Deprecated in version 0.93.0. Deprecated in version 0.93.1. Will be removed in version 0.96.0.
@@ -64,22 +64,26 @@ class DaffTagComponent {
          * @docs-private
          */
         this.faTimes = faTimes;
+        /**
+         * @docs-private
+         */
+        this._prefix = contentChild(DaffPrefixDirective, ...(ngDevMode ? [{ debugName: "_prefix" }] : /* istanbul ignore next */ []));
         /**
          * Whether the tag can be dismissed by the user.
          * Displays a close icon if `true`.
          */
-        this.dismissible = false;
+        this.dismissible = input(false, { ...(ngDevMode ? { debugName: "dismissible" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         /**
          * Emits when the tag is closed.
          */
-        this.closeTag = new EventEmitter();
+        this.closeTag = output();
         /**
          * Sets the default size of a tag to medium.
          */
         this.size.defaultSize = 'md';
     }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DaffTagComponent, deps: [{ token: DaffTagSizableDirective }, { token: i2.DaffDisableableDirective }, { token: i2.DaffStatusableDirective }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: DaffTagComponent, isStandalone: true, selector: "daff-tag", inputs: { status: "status", dismissible: ["dismissible", "dismissible", booleanAttribute] }, outputs: { closeTag: "closeTag" }, host: { properties: { "attr.aria-disabled": "disabled ? true : null", "class.dismissible": "dismissible" }, classAttribute: "daff-tag" }, queries: [{ propertyName: "_prefix", first: true, predicate: DaffPrefixDirective, descendants: true, static: true }], hostDirectives: [{ directive: i2.DaffArticleEncapsulatedDirective }, { directive: DaffTagSizableDirective, inputs: ["size", "size"] }, { directive: i2.DaffColorableDirective, inputs: ["color", "color"] }, { directive: i2.DaffStatusableDirective }, { directive: i2.DaffDisableableDirective, inputs: ["disabled", "disabled"] }], ngImport: i0, template: "@if (_prefix) {\n  <ng-content select=\"[daffPrefix]\"></ng-content>\n}\n<div class=\"daff-tag__label\">\n  <ng-content></ng-content>\n</div>\n@if (dismissible) {\n  <button class=\"daff-tag__close-icon\" (click)=\"onCloseTag($event)\" aria-label=\"Dismiss\" [attr.tabindex]=\"disabled ? -1 : null\">\n    <fa-icon [icon]=\"faTimes\" [fixedWidth]=\"true\"></fa-icon>\n  </button>\n}\n", styles: [".daff-tag{display:inline-flex;align-items:center;cursor:default;justify-content:center;flex-wrap:nowrap;border-radius:.25rem;position:relative}.daff-tag.daff-sm{font-size:.875rem;line-height:1rem;gap:.375rem;padding:.5rem}.daff-tag.daff-sm .daff-tag__close-icon{font-size:.875rem;line-height:1rem}.daff-tag.daff-md{font-size:1rem;line-height:1rem;gap:.5rem;padding:.5rem}.daff-tag.daff-md .daff-tag__close-icon{font-size:1rem;line-height:1.25rem}.daff-tag.daff-lg{font-size:1.25rem;line-height:1.25rem;gap:.5rem;padding:.75rem}.daff-tag.daff-lg .daff-tag__close-icon{font-size:1.25rem;line-height:1.25rem}.daff-tag:after{content:\"\";border-radius:.25rem;position:absolute;width:100%;height:100%;opacity:0;pointer-events:none;transition:opacity .3s;z-index:0}@media(hover:hover){.daff-tag:hover:after{opacity:1}}.daff-tag.daff-disabled{cursor:not-allowed;opacity:.5}@media(hover:hover){.daff-tag.daff-disabled:hover:after{opacity:0}}.daff-tag.daff-disabled .daff-tag__close-icon{cursor:not-allowed}.daff-tag.dismissible{cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.daff-tag .daff-tag__label,.daff-tag .daff-prefix,.daff-tag .daff-tag__close-icon{z-index:1}.daff-tag__close-icon{cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;border:none;background:none;appearance:none;padding:0;position:relative;color:currentColor;margin:0}\n"], dependencies: [{ kind: "component", type: FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "mask", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "transform", "a11yRole"], outputs: ["iconChange", "titleChange", "animationChange", "maskChange", "flipChange", "sizeChange", "pullChange", "borderChange", "inverseChange", "symbolChange", "rotateChange", "fixedWidthChange", "transformChange", "a11yRoleChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: DaffTagComponent, isStandalone: true, selector: "daff-tag", inputs: { status: { classPropertyName: "status", publicName: "status", isSignal: false, isRequired: false, transformFunction: null }, dismissible: { classPropertyName: "dismissible", publicName: "dismissible", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closeTag: "closeTag" }, host: { properties: { "attr.aria-disabled": "disabled ? true : null", "class.dismissible": "dismissible()" }, classAttribute: "daff-tag" }, queries: [{ propertyName: "_prefix", first: true, predicate: DaffPrefixDirective, descendants: true, isSignal: true }], hostDirectives: [{ directive: i2.DaffArticleEncapsulatedDirective }, { directive: DaffTagSizableDirective, inputs: ["size", "size"] }, { directive: i2.DaffColorableDirective, inputs: ["color", "color"] }, { directive: i2.DaffStatusableDirective, inputs: ["status", "status"] }, { directive: i2.DaffDisableableDirective, inputs: ["disabled", "disabled"] }], ngImport: i0, template: "@if (_prefix()) {\n  <ng-content select=\"[daffPrefix]\"></ng-content>\n}\n<div class=\"daff-tag__label\">\n  <ng-content></ng-content>\n</div>\n@if (dismissible()) {\n  <button class=\"daff-tag__close-icon\" (click)=\"onCloseTag($event)\" aria-label=\"Dismiss\" [attr.tabindex]=\"disabled ? -1 : null\">\n    <fa-icon [icon]=\"faTimes\" [fixedWidth]=\"true\"></fa-icon>\n  </button>\n}\n", styles: [".daff-tag{display:inline-flex;align-items:center;cursor:default;justify-content:center;flex-wrap:nowrap;border-radius:.25rem;position:relative}.daff-tag.daff-sm{font-size:.875rem;line-height:1rem;gap:.375rem;padding:.5rem}.daff-tag.daff-sm .daff-tag__close-icon{font-size:.875rem;line-height:1rem}.daff-tag.daff-md{font-size:1rem;line-height:1rem;gap:.5rem;padding:.5rem}.daff-tag.daff-md .daff-tag__close-icon{font-size:1rem;line-height:1.25rem}.daff-tag.daff-lg{font-size:1.25rem;line-height:1.25rem;gap:.5rem;padding:.75rem}.daff-tag.daff-lg .daff-tag__close-icon{font-size:1.25rem;line-height:1.25rem}.daff-tag:after{content:\"\";border-radius:.25rem;position:absolute;width:100%;height:100%;opacity:0;pointer-events:none;transition:opacity .3s;z-index:0}@media(hover:hover){.daff-tag:hover:after{opacity:1}}.daff-tag.daff-disabled{cursor:not-allowed;opacity:.5}@media(hover:hover){.daff-tag.daff-disabled:hover:after{opacity:0}}.daff-tag.daff-disabled .daff-tag__close-icon{cursor:not-allowed}.daff-tag.dismissible{cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.daff-tag .daff-tag__label,.daff-tag .daff-prefix,.daff-tag .daff-tag__close-icon{z-index:1}.daff-tag__close-icon{cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;border:none;background:none;appearance:none;padding:0;position:relative;color:currentColor;margin:0}\n"], dependencies: [{ kind: "component", type: FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "mask", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "transform", "a11yRole"], outputs: ["iconChange", "titleChange", "animationChange", "maskChange", "flipChange", "sizeChange", "pullChange", "borderChange", "inverseChange", "symbolChange", "rotateChange", "fixedWidthChange", "transformChange", "a11yRoleChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DaffTagComponent, decorators: [{
             type: Component,
@@ -95,6 +99,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                         },
                         {
                             directive: DaffStatusableDirective,
+                            inputs: ['status'],
                         },
                         {
                             directive: DaffDisableableDirective,
@@ -103,22 +108,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                     ], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         class: 'daff-tag',
                         '[attr.aria-disabled]': 'disabled ? true : null',
-                        '[class.dismissible]': 'dismissible',
+                        '[class.dismissible]': 'dismissible()',
                     }, imports: [
                         FaIconComponent,
                         DaffPrefixDirective,
-                    ], template: "@if (_prefix) {\n  <ng-content select=\"[daffPrefix]\"></ng-content>\n}\n<div class=\"daff-tag__label\">\n  <ng-content></ng-content>\n</div>\n@if (dismissible) {\n  <button class=\"daff-tag__close-icon\" (click)=\"onCloseTag($event)\" aria-label=\"Dismiss\" [attr.tabindex]=\"disabled ? -1 : null\">\n    <fa-icon [icon]=\"faTimes\" [fixedWidth]=\"true\"></fa-icon>\n  </button>\n}\n", styles: [".daff-tag{display:inline-flex;align-items:center;cursor:default;justify-content:center;flex-wrap:nowrap;border-radius:.25rem;position:relative}.daff-tag.daff-sm{font-size:.875rem;line-height:1rem;gap:.375rem;padding:.5rem}.daff-tag.daff-sm .daff-tag__close-icon{font-size:.875rem;line-height:1rem}.daff-tag.daff-md{font-size:1rem;line-height:1rem;gap:.5rem;padding:.5rem}.daff-tag.daff-md .daff-tag__close-icon{font-size:1rem;line-height:1.25rem}.daff-tag.daff-lg{font-size:1.25rem;line-height:1.25rem;gap:.5rem;padding:.75rem}.daff-tag.daff-lg .daff-tag__close-icon{font-size:1.25rem;line-height:1.25rem}.daff-tag:after{content:\"\";border-radius:.25rem;position:absolute;width:100%;height:100%;opacity:0;pointer-events:none;transition:opacity .3s;z-index:0}@media(hover:hover){.daff-tag:hover:after{opacity:1}}.daff-tag.daff-disabled{cursor:not-allowed;opacity:.5}@media(hover:hover){.daff-tag.daff-disabled:hover:after{opacity:0}}.daff-tag.daff-disabled .daff-tag__close-icon{cursor:not-allowed}.daff-tag.dismissible{cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.daff-tag .daff-tag__label,.daff-tag .daff-prefix,.daff-tag .daff-tag__close-icon{z-index:1}.daff-tag__close-icon{cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;border:none;background:none;appearance:none;padding:0;position:relative;color:currentColor;margin:0}\n"] }]
-        }], ctorParameters: () => [{ type: DaffTagSizableDirective }, { type: i2.DaffDisableableDirective }, { type: i2.DaffStatusableDirective }], propDecorators: { _prefix: [{
-                type: ContentChild,
-                args: [DaffPrefixDirective, { static: true }]
-            }], status: [{
+                    ], template: "@if (_prefix()) {\n  <ng-content select=\"[daffPrefix]\"></ng-content>\n}\n<div class=\"daff-tag__label\">\n  <ng-content></ng-content>\n</div>\n@if (dismissible()) {\n  <button class=\"daff-tag__close-icon\" (click)=\"onCloseTag($event)\" aria-label=\"Dismiss\" [attr.tabindex]=\"disabled ? -1 : null\">\n    <fa-icon [icon]=\"faTimes\" [fixedWidth]=\"true\"></fa-icon>\n  </button>\n}\n", styles: [".daff-tag{display:inline-flex;align-items:center;cursor:default;justify-content:center;flex-wrap:nowrap;border-radius:.25rem;position:relative}.daff-tag.daff-sm{font-size:.875rem;line-height:1rem;gap:.375rem;padding:.5rem}.daff-tag.daff-sm .daff-tag__close-icon{font-size:.875rem;line-height:1rem}.daff-tag.daff-md{font-size:1rem;line-height:1rem;gap:.5rem;padding:.5rem}.daff-tag.daff-md .daff-tag__close-icon{font-size:1rem;line-height:1.25rem}.daff-tag.daff-lg{font-size:1.25rem;line-height:1.25rem;gap:.5rem;padding:.75rem}.daff-tag.daff-lg .daff-tag__close-icon{font-size:1.25rem;line-height:1.25rem}.daff-tag:after{content:\"\";border-radius:.25rem;position:absolute;width:100%;height:100%;opacity:0;pointer-events:none;transition:opacity .3s;z-index:0}@media(hover:hover){.daff-tag:hover:after{opacity:1}}.daff-tag.daff-disabled{cursor:not-allowed;opacity:.5}@media(hover:hover){.daff-tag.daff-disabled:hover:after{opacity:0}}.daff-tag.daff-disabled .daff-tag__close-icon{cursor:not-allowed}.daff-tag.dismissible{cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.daff-tag .daff-tag__label,.daff-tag .daff-prefix,.daff-tag .daff-tag__close-icon{z-index:1}.daff-tag__close-icon{cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;border:none;background:none;appearance:none;padding:0;position:relative;color:currentColor;margin:0}\n"] }]
+        }], ctorParameters: () => [{ type: DaffTagSizableDirective }, { type: i2.DaffDisableableDirective }, { type: i2.DaffStatusableDirective }], propDecorators: { _prefix: [{ type: i0.ContentChild, args: [i0.forwardRef(() => DaffPrefixDirective), { isSignal: true }] }], status: [{
                 type: Input
-            }], dismissible: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }], closeTag: [{
-                type: Output
-            }] } });
+            }], dismissible: [{ type: i0.Input, args: [{ isSignal: true, alias: "dismissible", required: false }] }], closeTag: [{ type: i0.Output, args: ["closeTag"] }] } });
 
 /**
  * @docs-private

package/fesm2022/daffodil-design-tag.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"daffodil-design-tag.mjs","sources":["../../../libs/design/tag/src/tag/tag-sizable.directive.ts","../../../libs/design/tag/src/tag/tag.component.ts","../../../libs/design/tag/src/tag/tag.component.html","../../../libs/design/tag/src/tag.ts","../../../libs/design/tag/src/daffodil-design-tag.ts"],"sourcesContent":["import { Directive } from '@angular/core';\n\nimport {\n  DaffSizableDirective,\n  DaffSizeLargeType,\n  DaffSizeMediumType,\n  DaffSizeSmallType,\n} from '@daffodil/design';\n\n/**\n * The size types that the DaffTagComponent can implement.\n */\nexport type DaffTagSize = DaffSizeSmallType | DaffSizeMediumType | DaffSizeLargeType;\n\n@Directive({})\n\nexport class DaffTagSizableDirective extends DaffSizableDirective<DaffTagSize> {}\n\n","import {\n  booleanAttribute,\n  ChangeDetectionStrategy,\n  Component,\n  ContentChild,\n  EventEmitter,\n  Input,\n  Output,\n  ViewEncapsulation,\n} from '@angular/core';\nimport { FaIconComponent } from '@fortawesome/angular-fontawesome';\nimport { faTimes } from '@fortawesome/free-solid-svg-icons';\n\nimport {\n  DaffArticleEncapsulatedDirective,\n  DaffColorableDirective,\n  DaffDisableable,\n  DaffDisableableDirective,\n  DaffPrefixDirective,\n  DaffStatus,\n  DaffStatusableDirective,\n} from '@daffodil/design';\n\nimport { DaffTagSizableDirective } from './tag-sizable.directive';\n\n/**\n * DaffTagComponent is an interactive indicator and filter that can be edited or removed, used to represent selections, categories, or applied filters.\n *\n * @example\n * ```html\n * <daff-tag [dismissible]=\"true\" (closeTag)=\"onCloseTag()\">\n *   <fa-icon daffPrefix [icon]=\"faCircleCheck\"></fa-icon>\n *   Label\n * </daff-tag>\n * ```\n */\n\n@Component({\n  selector: 'daff-tag',\n  templateUrl: './tag.component.html',\n  styleUrl: './tag.component.scss',\n  hostDirectives: [\n    { directive: DaffArticleEncapsulatedDirective },\n    {\n      directive: DaffTagSizableDirective,\n      inputs: ['size'],\n    },\n    {\n      directive: DaffColorableDirective,\n      inputs: ['color'],\n    },\n    {\n      directive: DaffStatusableDirective,\n    },\n    {\n      directive: DaffDisableableDirective,\n      inputs: ['disabled'],\n    },\n  ],\n  encapsulation: ViewEncapsulation.None,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    class: 'daff-tag',\n    '[attr.aria-disabled]': 'disabled ? true : null',\n    '[class.dismissible]': 'dismissible',\n  },\n  imports: [\n    FaIconComponent,\n    DaffPrefixDirective,\n  ],\n})\nexport class DaffTagComponent implements DaffDisableable {\n  /**\n   * @docs-private\n   */\n  faTimes = faTimes;\n\n  /**\n   * @docs-private\n   */\n  @ContentChild(DaffPrefixDirective, { static: true }) _prefix: DaffPrefixDirective;\n\n  /**\n   * @docs-private\n   *\n   * Internal function to access the disabled property of the DaffDisableableDirective.\n   */\n  get disabled() {\n    return this.disabledDirective.disabled;\n  }\n\n  /**\n   * @deprecated Deprecated in version 0.93.0. Deprecated in version 0.93.1. Will be removed in version 0.96.0.\n   *\n   * Sets the status on the tag.\n   */\n  @Input()\n  get status(): DaffStatus {\n    return this.statusable.status;\n  }\n  set status(value: DaffStatus) {\n    this.statusable.status = value;\n  }\n\n  /**\n   * Whether the tag can be dismissed by the user.\n   * Displays a close icon if `true`.\n   */\n  @Input({ transform: booleanAttribute }) dismissible = false;\n\n  /**\n   * Emits when the tag is closed.\n   */\n  @Output() closeTag: EventEmitter<void> = new EventEmitter();\n\n  /**\n   * @docs-private\n   *\n   * Internal handler for the close icon click.\n   */\n  onCloseTag(event: Event) {\n    if (this.disabled) {\n      return;\n    }\n    this.closeTag.emit();\n  }\n\n  constructor(\n    private size: DaffTagSizableDirective,\n    private disabledDirective: DaffDisableableDirective,\n    private statusable: DaffStatusableDirective,\n  ) {\n    /**\n     * Sets the default size of a tag to medium.\n     */\n    this.size.defaultSize = 'md';\n  }\n}\n","@if (_prefix) {\n  <ng-content select=\"[daffPrefix]\"></ng-content>\n}\n<div class=\"daff-tag__label\">\n  <ng-content></ng-content>\n</div>\n@if (dismissible) {\n  <button class=\"daff-tag__close-icon\" (click)=\"onCloseTag($event)\" aria-label=\"Dismiss\" [attr.tabindex]=\"disabled ? -1 : null\">\n    <fa-icon [icon]=\"faTimes\" [fixedWidth]=\"true\"></fa-icon>\n  </button>\n}\n","import { DaffPrefixDirective } from '@daffodil/design';\n\nimport { DaffTagSizableDirective } from './tag/tag-sizable.directive';\nimport { DaffTagComponent } from './tag/tag.component';\n\n/**\n * @docs-private\n *\n * `DAFF_TAG_COMPONENTS` imports all the available components and directives.\n */\nexport const DAFF_TAG_COMPONENTS = <const> [\n  DaffTagComponent,\n  DaffTagSizableDirective,\n  DaffPrefixDirective,\n];\n\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":["i1.DaffTagSizableDirective"],"mappings":"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"}
+{"version":3,"file":"daffodil-design-tag.mjs","sources":["../../../libs/design/tag/src/tag/tag-sizable.directive.ts","../../../libs/design/tag/src/tag/tag.component.ts","../../../libs/design/tag/src/tag/tag.component.html","../../../libs/design/tag/src/tag.ts","../../../libs/design/tag/src/daffodil-design-tag.ts"],"sourcesContent":["import { Directive } from '@angular/core';\n\nimport {\n  DaffSizableDirective,\n  DaffSizeLargeType,\n  DaffSizeMediumType,\n  DaffSizeSmallType,\n} from '@daffodil/design';\n\n/**\n * The size types that the DaffTagComponent can implement.\n */\nexport type DaffTagSize = DaffSizeSmallType | DaffSizeMediumType | DaffSizeLargeType;\n\n@Directive({})\n\nexport class DaffTagSizableDirective extends DaffSizableDirective<DaffTagSize> {}\n\n","import {\n  booleanAttribute,\n  ChangeDetectionStrategy,\n  Component,\n  contentChild,\n  Input,\n  input,\n  output,\n  ViewEncapsulation,\n} from '@angular/core';\nimport { FaIconComponent } from '@fortawesome/angular-fontawesome';\nimport { faTimes } from '@fortawesome/free-solid-svg-icons';\n\nimport {\n  DaffArticleEncapsulatedDirective,\n  DaffColorableDirective,\n  DaffDisableable,\n  DaffDisableableDirective,\n  DaffPrefixDirective,\n  DaffStatus,\n  DaffStatusableDirective,\n} from '@daffodil/design';\n\nimport { DaffTagSizableDirective } from './tag-sizable.directive';\n\n/**\n * DaffTagComponent is an interactive indicator and filter that can be edited or removed, used to represent selections, categories, or applied filters.\n *\n * @example\n * ```html\n * <daff-tag [dismissible]=\"true\" (closeTag)=\"onCloseTag()\">\n *   <fa-icon daffPrefix [icon]=\"faCircleCheck\"></fa-icon>\n *   Label\n * </daff-tag>\n * ```\n */\n\n@Component({\n  selector: 'daff-tag',\n  templateUrl: './tag.component.html',\n  styleUrl: './tag.component.scss',\n  hostDirectives: [\n    { directive: DaffArticleEncapsulatedDirective },\n    {\n      directive: DaffTagSizableDirective,\n      inputs: ['size'],\n    },\n    {\n      directive: DaffColorableDirective,\n      inputs: ['color'],\n    },\n    {\n      directive: DaffStatusableDirective,\n      inputs: ['status'],\n    },\n    {\n      directive: DaffDisableableDirective,\n      inputs: ['disabled'],\n    },\n  ],\n  encapsulation: ViewEncapsulation.None,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    class: 'daff-tag',\n    '[attr.aria-disabled]': 'disabled ? true : null',\n    '[class.dismissible]': 'dismissible()',\n  },\n  imports: [\n    FaIconComponent,\n    DaffPrefixDirective,\n  ],\n})\nexport class DaffTagComponent implements DaffDisableable {\n  /**\n   * @docs-private\n   */\n  faTimes = faTimes;\n\n  /**\n   * @docs-private\n   */\n  _prefix = contentChild(DaffPrefixDirective);\n\n  /**\n   * @docs-private\n   *\n   * Internal function to access the disabled property of the DaffDisableableDirective.\n   */\n  get disabled() {\n    return this.disabledDirective.disabled();\n  }\n\n  /**\n   * @deprecated Deprecated in version 0.93.0. Deprecated in version 0.93.1. Will be removed in version 0.96.0.\n   *\n   * Sets the status on the tag.\n   */\n  @Input()\n  get status(): DaffStatus {\n    return this.statusable.status;\n  }\n  set status(value: DaffStatus) {\n    this.statusable.status = value;\n  }\n\n  /**\n   * Whether the tag can be dismissed by the user.\n   * Displays a close icon if `true`.\n   */\n  dismissible = input(false, { transform: booleanAttribute });\n\n  /**\n   * Emits when the tag is closed.\n   */\n  closeTag = output<void>();\n\n  /**\n   * @docs-private\n   *\n   * Internal handler for the close icon click.\n   */\n  onCloseTag(event: Event) {\n    if (this.disabled) {\n      return;\n    }\n    this.closeTag.emit();\n  }\n\n  constructor(\n    private size: DaffTagSizableDirective,\n    private disabledDirective: DaffDisableableDirective,\n    private statusable: DaffStatusableDirective,\n  ) {\n    /**\n     * Sets the default size of a tag to medium.\n     */\n    this.size.defaultSize = 'md';\n  }\n}\n","@if (_prefix()) {\n  <ng-content select=\"[daffPrefix]\"></ng-content>\n}\n<div class=\"daff-tag__label\">\n  <ng-content></ng-content>\n</div>\n@if (dismissible()) {\n  <button class=\"daff-tag__close-icon\" (click)=\"onCloseTag($event)\" aria-label=\"Dismiss\" [attr.tabindex]=\"disabled ? -1 : null\">\n    <fa-icon [icon]=\"faTimes\" [fixedWidth]=\"true\"></fa-icon>\n  </button>\n}\n","import { DaffPrefixDirective } from '@daffodil/design';\n\nimport { DaffTagSizableDirective } from './tag/tag-sizable.directive';\nimport { DaffTagComponent } from './tag/tag.component';\n\n/**\n * @docs-private\n *\n * `DAFF_TAG_COMPONENTS` imports all the available components and directives.\n */\nexport const DAFF_TAG_COMPONENTS = <const> [\n  DaffTagComponent,\n  DaffTagSizableDirective,\n  DaffPrefixDirective,\n];\n\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":["i1.DaffTagSizableDirective"],"mappings":"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"}

package/fesm2022/daffodil-design-text-snippet.mjs

@@ -1,56 +1,51 @@
 import * as i0 from '@angular/core';
-import { EventEmitter, ElementRef, Output, ViewChild, Input, ChangeDetectionStrategy, Component } from '@angular/core';
+import { model, input, viewChild, ElementRef, output, ChangeDetectionStrategy, Component } from '@angular/core';
 
 class DaffTextSnippetComponent {
     constructor() {
         /**
          * Whether or not the component should render a condensed version of the content.
          */
-        this.condensed = true;
+        this.condensed = model(true, ...(ngDevMode ? [{ debugName: "condensed" }] : /* istanbul ignore next */ []));
         /**
          * The HTML content to render inside the snippet.
          */
-        this.html = '';
+        this.html = input('', ...(ngDevMode ? [{ debugName: "html" }] : /* istanbul ignore next */ []));
+        /**
+         * @docs-private
+         */
+        this.contentRef = viewChild('contentEl', { ...(ngDevMode ? { debugName: "contentRef" } : /* istanbul ignore next */ {}), read: ElementRef });
+        /**
+         * @docs-private
+         */
+        this.htmlRef = viewChild('htmlEl', { ...(ngDevMode ? { debugName: "htmlRef" } : /* istanbul ignore next */ {}), read: ElementRef });
         /**
          * An output event that can be used to track the state of the component externally.
          */
-        // eslint-disable-next-line @angular-eslint/no-output-native
-        this.toggle = new EventEmitter();
+        this.toggled = output();
     }
     /**
      * @docs-private
      */
     ariaExpanded() {
-        return !this.condensed ? true : false;
+        return !this.condensed() ? true : false;
     }
     /**
      * @docs-private
      */
     toggleSnippet() {
-        this.condensed = !this.condensed;
-        this.toggle.emit(this.condensed);
+        this.condensed.set(!this.condensed());
+        this.toggled.emit(this.condensed());
     }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DaffTextSnippetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: DaffTextSnippetComponent, isStandalone: true, selector: "daff-text-snippet", inputs: { condensed: "condensed", html: "html" }, outputs: { toggle: "toggle" }, host: { classAttribute: "daff-text-snippet" }, viewQueries: [{ propertyName: "contentRef", first: true, predicate: ["contentEl"], descendants: true, read: ElementRef }, { propertyName: "htmlRef", first: true, predicate: ["htmlEl"], descendants: true, read: ElementRef }], ngImport: i0, template: "@if (html) {\n  <div class=\"daff-text-snippet__content daff-text-snippet__html\" #htmlEl [class.condensed]=\"condensed\" [innerHtml]=\"html\"></div>\n} @else {\n  <div class=\"daff-text-snippet__content daff-text-snippet__ngcontent\" #contentEl [class.condensed]=\"condensed\">\n    <ng-content></ng-content>\n  </div>\n}\n<button\n  class=\"daff-text-snippet__toggle\"\n  [attr.aria-expanded]=\"ariaExpanded()\"\n  (click)=\"toggleSnippet()\">\n    @if (condensed) {\n      Show more\n    } @else {\n      Show less\n    }\n</button>\n", styles: [":host{display:block;position:relative}:host ::ng-deep .daff-text-snippet__content>*:first-child{margin-top:0}:host ::ng-deep .daff-text-snippet__content>*:last-child{margin-bottom:0}:host ::ng-deep h2:first-of-type{margin-top:0}.daff-text-snippet__content{display:block}.daff-text-snippet__content.condensed{display:-webkit-box;line-clamp:1;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;width:100%}.daff-text-snippet__toggle{cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;appearance:none;background:none;border-left-style:none;border-right-style:none;border-top-style:none;margin:0;padding:0}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: DaffTextSnippetComponent, isStandalone: true, selector: "daff-text-snippet", inputs: { condensed: { classPropertyName: "condensed", publicName: "condensed", isSignal: true, isRequired: false, transformFunction: null }, html: { classPropertyName: "html", publicName: "html", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { condensed: "condensedChange", toggled: "toggled" }, host: { classAttribute: "daff-text-snippet" }, viewQueries: [{ propertyName: "contentRef", first: true, predicate: ["contentEl"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "htmlRef", first: true, predicate: ["htmlEl"], descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: "@if (html()) {\n  <div class=\"daff-text-snippet__content daff-text-snippet__html\" #htmlEl [class.condensed]=\"condensed()\" [innerHtml]=\"html()\"></div>\n} @else {\n  <div class=\"daff-text-snippet__content daff-text-snippet__ngcontent\" #contentEl [class.condensed]=\"condensed()\">\n    <ng-content></ng-content>\n  </div>\n}\n<button\n  class=\"daff-text-snippet__toggle\"\n  [attr.aria-expanded]=\"ariaExpanded()\"\n  (click)=\"toggleSnippet()\">\n    @if (condensed()) {\n      Show more\n    } @else {\n      Show less\n    }\n</button>\n", styles: [":host{display:block;position:relative}:host ::ng-deep .daff-text-snippet__content>*:first-child{margin-top:0}:host ::ng-deep .daff-text-snippet__content>*:last-child{margin-bottom:0}:host ::ng-deep h2:first-of-type{margin-top:0}.daff-text-snippet__content{display:block}.daff-text-snippet__content.condensed{display:-webkit-box;line-clamp:1;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;width:100%}.daff-text-snippet__toggle{cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;appearance:none;background:none;border-left-style:none;border-right-style:none;border-top-style:none;margin:0;padding:0}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DaffTextSnippetComponent, decorators: [{
             type: Component,
             args: [{ selector: 'daff-text-snippet', changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         class: 'daff-text-snippet',
-                    }, template: "@if (html) {\n  <div class=\"daff-text-snippet__content daff-text-snippet__html\" #htmlEl [class.condensed]=\"condensed\" [innerHtml]=\"html\"></div>\n} @else {\n  <div class=\"daff-text-snippet__content daff-text-snippet__ngcontent\" #contentEl [class.condensed]=\"condensed\">\n    <ng-content></ng-content>\n  </div>\n}\n<button\n  class=\"daff-text-snippet__toggle\"\n  [attr.aria-expanded]=\"ariaExpanded()\"\n  (click)=\"toggleSnippet()\">\n    @if (condensed) {\n      Show more\n    } @else {\n      Show less\n    }\n</button>\n", styles: [":host{display:block;position:relative}:host ::ng-deep .daff-text-snippet__content>*:first-child{margin-top:0}:host ::ng-deep .daff-text-snippet__content>*:last-child{margin-bottom:0}:host ::ng-deep h2:first-of-type{margin-top:0}.daff-text-snippet__content{display:block}.daff-text-snippet__content.condensed{display:-webkit-box;line-clamp:1;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;width:100%}.daff-text-snippet__toggle{cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;appearance:none;background:none;border-left-style:none;border-right-style:none;border-top-style:none;margin:0;padding:0}\n"] }]
-        }], propDecorators: { condensed: [{
-                type: Input
-            }], html: [{
-                type: Input
-            }], contentRef: [{
-                type: ViewChild,
-                args: ['contentEl', { read: ElementRef }]
-            }], htmlRef: [{
-                type: ViewChild,
-                args: ['htmlEl', { read: ElementRef }]
-            }], toggle: [{
-                type: Output
-            }] } });
+                    }, template: "@if (html()) {\n  <div class=\"daff-text-snippet__content daff-text-snippet__html\" #htmlEl [class.condensed]=\"condensed()\" [innerHtml]=\"html()\"></div>\n} @else {\n  <div class=\"daff-text-snippet__content daff-text-snippet__ngcontent\" #contentEl [class.condensed]=\"condensed()\">\n    <ng-content></ng-content>\n  </div>\n}\n<button\n  class=\"daff-text-snippet__toggle\"\n  [attr.aria-expanded]=\"ariaExpanded()\"\n  (click)=\"toggleSnippet()\">\n    @if (condensed()) {\n      Show more\n    } @else {\n      Show less\n    }\n</button>\n", styles: [":host{display:block;position:relative}:host ::ng-deep .daff-text-snippet__content>*:first-child{margin-top:0}:host ::ng-deep .daff-text-snippet__content>*:last-child{margin-bottom:0}:host ::ng-deep h2:first-of-type{margin-top:0}.daff-text-snippet__content{display:block}.daff-text-snippet__content.condensed{display:-webkit-box;line-clamp:1;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;width:100%}.daff-text-snippet__toggle{cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;appearance:none;background:none;border-left-style:none;border-right-style:none;border-top-style:none;margin:0;padding:0}\n"] }]
+        }], propDecorators: { condensed: [{ type: i0.Input, args: [{ isSignal: true, alias: "condensed", required: false }] }, { type: i0.Output, args: ["condensedChange"] }], html: [{ type: i0.Input, args: [{ isSignal: true, alias: "html", required: false }] }], contentRef: [{ type: i0.ViewChild, args: ['contentEl', { ...{ read: ElementRef }, isSignal: true }] }], htmlRef: [{ type: i0.ViewChild, args: ['htmlEl', { ...{ read: ElementRef }, isSignal: true }] }], toggled: [{ type: i0.Output, args: ["toggled"] }] } });
 
 /**
  * Generated bundle index. Do not edit.

package/fesm2022/daffodil-design-text-snippet.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"daffodil-design-text-snippet.mjs","sources":["../../../libs/design/text-snippet/src/text-snippet.component.ts","../../../libs/design/text-snippet/src/text-snippet.component.html","../../../libs/design/text-snippet/src/daffodil-design-text-snippet.ts"],"sourcesContent":["import {\n  Component,\n  Input,\n  ChangeDetectionStrategy,\n  EventEmitter,\n  Output,\n  ElementRef,\n  ViewChild,\n} from '@angular/core';\n\n@Component({\n  selector: 'daff-text-snippet',\n  templateUrl: './text-snippet.component.html',\n  styleUrls: ['./text-snippet.component.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    class: 'daff-text-snippet',\n  },\n})\nexport class DaffTextSnippetComponent {\n\n  /**\n   * Whether or not the component should render a condensed version of the content.\n   */\n  @Input() condensed = true;\n\n  /**\n   * The HTML content to render inside the snippet.\n   */\n  @Input() html = '';\n\n  /**\n   * @docs-private\n   */\n  ariaExpanded() {\n    return !this.condensed ? true : false;\n  }\n\n  /**\n   * @docs-private\n   */\n  @ViewChild('contentEl', { read: ElementRef }) contentRef: ElementRef;\n\n  /**\n   * @docs-private\n   */\n  @ViewChild('htmlEl', { read: ElementRef }) htmlRef: ElementRef;\n\n  /**\n   * An output event that can be used to track the state of the component externally.\n   */\n  // eslint-disable-next-line @angular-eslint/no-output-native\n  @Output() toggle: EventEmitter<boolean> = new EventEmitter();\n\n  /**\n   * @docs-private\n   */\n  toggleSnippet() {\n    this.condensed = !this.condensed;\n    this.toggle.emit(this.condensed);\n  }\n}\n","@if (html) {\n  <div class=\"daff-text-snippet__content daff-text-snippet__html\" #htmlEl [class.condensed]=\"condensed\" [innerHtml]=\"html\"></div>\n} @else {\n  <div class=\"daff-text-snippet__content daff-text-snippet__ngcontent\" #contentEl [class.condensed]=\"condensed\">\n    <ng-content></ng-content>\n  </div>\n}\n<button\n  class=\"daff-text-snippet__toggle\"\n  [attr.aria-expanded]=\"ariaExpanded()\"\n  (click)=\"toggleSnippet()\">\n    @if (condensed) {\n      Show more\n    } @else {\n      Show less\n    }\n</button>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;MAmBa,wBAAwB,CAAA;AATrC,IAAA,WAAA,GAAA;AAWE;;AAEG;QACM,IAAA,CAAA,SAAS,GAAG,IAAI;AAEzB;;AAEG;QACM,IAAA,CAAA,IAAI,GAAG,EAAE;AAmBlB;;AAEG;;AAEO,QAAA,IAAA,CAAA,MAAM,GAA0B,IAAI,YAAY,EAAE;AAS7D,IAAA;AA9BC;;AAEG;IACH,YAAY,GAAA;AACV,QAAA,OAAO,CAAC,IAAI,CAAC,SAAS,GAAG,IAAI,GAAG,KAAK;IACvC;AAkBA;;AAEG;IACH,aAAa,GAAA;AACX,QAAA,IAAI,CAAC,SAAS,GAAG,CAAC,IAAI,CAAC,SAAS;QAChC,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC;IAClC;iIAzCW,wBAAwB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAxB,uBAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,wBAAwB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,mBAAA,EAAA,MAAA,EAAA,EAAA,SAAA,EAAA,WAAA,EAAA,IAAA,EAAA,MAAA,EAAA,EAAA,OAAA,EAAA,EAAA,MAAA,EAAA,QAAA,EAAA,EAAA,IAAA,EAAA,EAAA,cAAA,EAAA,mBAAA,EAAA,EAAA,WAAA,EAAA,CAAA,EAAA,YAAA,EAAA,YAAA,EAAA,KAAA,EAAA,IAAA,EAAA,SAAA,EAAA,CAAA,WAAA,CAAA,EAAA,WAAA,EAAA,IAAA,EAAA,IAAA,EAsBH,UAAU,EAAA,EAAA,EAAA,YAAA,EAAA,SAAA,EAAA,KAAA,EAAA,IAAA,EAAA,SAAA,EAAA,CAAA,QAAA,CAAA,EAAA,WAAA,EAAA,IAAA,EAAA,IAAA,EAKb,UAAU,6BC9CzC,2hBAiBA,EAAA,MAAA,EAAA,CAAA,4pBAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA;;2FDEa,wBAAwB,EAAA,UAAA,EAAA,CAAA;kBATpC,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,mBAAmB,EAAA,eAAA,EAGZ,uBAAuB,CAAC,MAAM,EAAA,IAAA,EACzC;AACJ,wBAAA,KAAK,EAAE,mBAAmB;AAC3B,qBAAA,EAAA,QAAA,EAAA,2hBAAA,EAAA,MAAA,EAAA,CAAA,4pBAAA,CAAA,EAAA;;sBAOA;;sBAKA;;sBAYA,SAAS;AAAC,gBAAA,IAAA,EAAA,CAAA,WAAW,EAAE,EAAE,IAAI,EAAE,UAAU,EAAE;;sBAK3C,SAAS;AAAC,gBAAA,IAAA,EAAA,CAAA,QAAQ,EAAE,EAAE,IAAI,EAAE,UAAU,EAAE;;sBAMxC;;;AEpDH;;AAEG;;;;"}
+{"version":3,"file":"daffodil-design-text-snippet.mjs","sources":["../../../libs/design/text-snippet/src/text-snippet.component.ts","../../../libs/design/text-snippet/src/text-snippet.component.html","../../../libs/design/text-snippet/src/daffodil-design-text-snippet.ts"],"sourcesContent":["import {\n  Component,\n  ChangeDetectionStrategy,\n  ElementRef,\n  input,\n  model,\n  output,\n  viewChild,\n} from '@angular/core';\n\n@Component({\n  selector: 'daff-text-snippet',\n  templateUrl: './text-snippet.component.html',\n  styleUrl: './text-snippet.component.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    class: 'daff-text-snippet',\n  },\n})\nexport class DaffTextSnippetComponent {\n  /**\n   * Whether or not the component should render a condensed version of the content.\n   */\n  condensed = model(true);\n\n  /**\n   * The HTML content to render inside the snippet.\n   */\n  html = input('');\n\n  /**\n   * @docs-private\n   */\n  ariaExpanded() {\n    return !this.condensed() ? true : false;\n  }\n\n  /**\n   * @docs-private\n   */\n  contentRef = viewChild('contentEl', { read: ElementRef });\n\n  /**\n   * @docs-private\n   */\n  htmlRef = viewChild('htmlEl', { read: ElementRef });\n\n  /**\n   * An output event that can be used to track the state of the component externally.\n   */\n  toggled = output<boolean>();\n\n  /**\n   * @docs-private\n   */\n  toggleSnippet() {\n    this.condensed.set(!this.condensed());\n    this.toggled.emit(this.condensed());\n  }\n}\n","@if (html()) {\n  <div class=\"daff-text-snippet__content daff-text-snippet__html\" #htmlEl [class.condensed]=\"condensed()\" [innerHtml]=\"html()\"></div>\n} @else {\n  <div class=\"daff-text-snippet__content daff-text-snippet__ngcontent\" #contentEl [class.condensed]=\"condensed()\">\n    <ng-content></ng-content>\n  </div>\n}\n<button\n  class=\"daff-text-snippet__toggle\"\n  [attr.aria-expanded]=\"ariaExpanded()\"\n  (click)=\"toggleSnippet()\">\n    @if (condensed()) {\n      Show more\n    } @else {\n      Show less\n    }\n</button>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/daffodil-design-textarea.mjs

@@ -11,7 +11,7 @@ import { DaffFormFieldControl } from '@daffodil/design/form-field';
  */
 class DaffTextareaComponent extends DaffFormFieldControl {
     get _id() {
-        return this.formField?.id;
+        return this.formField?.id();
     }
     ;
     /**
@@ -65,10 +65,10 @@ class DaffTextareaComponent extends DaffFormFieldControl {
      */
     get ariaDescribedBy() {
         if (this.formField.hasErrorMessage()) {
-            return this.formField.errorMessageId;
+            return this.formField.errorMessageId();
         }
         else if (this.formField.hasHint()) {
-            return this.formField.hintId;
+            return this.formField.hintId();
         }
         else {
             return null;

package/fesm2022/daffodil-design-textarea.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"daffodil-design-textarea.mjs","sources":["../../../libs/design/textarea/src/textarea.component.ts","../../../libs/design/textarea/src/daffodil-design-textarea.ts"],"sourcesContent":["import {\n  Component,\n  Optional,\n  Self,\n  ElementRef,\n  ChangeDetectionStrategy,\n  OnInit,\n  Input,\n  booleanAttribute,\n} from '@angular/core';\nimport {\n  NgControl,\n  Validators,\n} from '@angular/forms';\nimport {\n  map,\n  merge,\n  of,\n  tap,\n} from 'rxjs';\n\nimport {\n  DaffFormFieldComponent,\n  DaffFormFieldControl,\n} from '@daffodil/design/form-field';\n\n/**\n * DaffTextareaComponent provides the same functionality as a native `<textarea>` and contains custom styling and functionality.\n */\n@Component({\n  // eslint-disable-next-line @angular-eslint/component-selector\n  selector: 'textarea[daff-textarea]',\n  template: '<ng-content></ng-content>',\n  styleUrls: ['./textarea.component.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  providers: [\n\n    { provide: DaffFormFieldControl, useExisting: DaffTextareaComponent },\n  ],\n  host: {\n    class: 'daff-textarea',\n    '[attr.id]': 'internalId',\n    '[disabled]': 'disabledAttribute',\n    '[required]': 'requiredAttribute',\n    '(focus)': 'focus()',\n    '(blur)': 'blur()',\n    '[attr.aria-describedby]': 'ariaDescribedBy',\n  },\n})\nexport class DaffTextareaComponent extends DaffFormFieldControl<string> implements DaffFormFieldControl<string>, OnInit {\n  /** @docs-private */\n  controlType = 'native-textarea';\n\n  /**\n   * @docs-private\n   */\n  focused = false;\n\n  private get _id() {\n    return this.formField?.id;\n  };\n\n  /**\n   * @docs-private\n   */\n  get internalId() {\n    return this._id;\n  }\n\n  /**\n   * @docs-private\n   *\n   * Implemented as part of DaffFormFieldControl.\n   */\n  @Input({ transform: booleanAttribute }) disabled = false;\n\n  /**\n   * @docs-private\n   */\n  get disabledAttribute() {\n    if (this.ngControl) {\n      return this.ngControl.disabled;\n    }\n\n    return this.disabled || null;\n  }\n\n  private _required = false;\n\n  /**\n   * @docs-private\n   *\n   * Implemented as part of DaffFormFieldControl.\n   */\n  @Input({ transform: booleanAttribute })\n  get required(): boolean {\n    return this.ngControl?.control?.hasValidator(Validators.required) ?? this._required;\n  }\n  set required(value: boolean) {\n    this._required = value;\n  }\n\n  /**\n   * @docs-private\n   */\n  get requiredAttribute() {\n    return this.required || null;\n  }\n\n  /**\n   * @docs-private\n   */\n  focus() {\n    this.focused = true;\n    this.emitState();\n  }\n\n  /**\n   * @docs-private\n   */\n  blur() {\n    this.focused = false;\n    this.emitState(true);\n  }\n\n  /**\n   * @docs-private\n   */\n  get ariaDescribedBy() {\n    if(this.formField.hasErrorMessage()) {\n      return this.formField.errorMessageId;\n    } else if(this.formField.hasHint()) {\n      return this.formField.hintId;\n    } else {\n      return null;\n    }\n  }\n\n  constructor(\n    /**\n     * @docs-private\n     */\n    @Optional() @Self() public ngControl: NgControl,\n    private _elementRef: ElementRef<HTMLInputElement>,\n    private formField: DaffFormFieldComponent,\n  ) {\n    super(ngControl);\n  }\n\n  /** @docs-private */\n  ngOnInit() {\n    this.stateChanges = merge(\n      this._stateChanges.asObservable(),\n      this.ngControl ? this.ngControl.statusChanges : of(undefined),\n    ).pipe(\n      map(() => this.state),\n      tap((state) => this.disabled = state.disabled),\n    );\n  }\n\n  /**\n   * @docs-private\n   */\n  onFocus() {\n    this._elementRef.nativeElement.focus();\n  }\n\n  /**\n   * @docs-private\n   */\n  get value() {\n    return this._elementRef.nativeElement.value;\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"daffodil-design-textarea.mjs","sources":["../../../libs/design/textarea/src/textarea.component.ts","../../../libs/design/textarea/src/daffodil-design-textarea.ts"],"sourcesContent":["import {\n  Component,\n  Optional,\n  Self,\n  ElementRef,\n  ChangeDetectionStrategy,\n  OnInit,\n  Input,\n  booleanAttribute,\n} from '@angular/core';\nimport {\n  NgControl,\n  Validators,\n} from '@angular/forms';\nimport {\n  map,\n  merge,\n  of,\n  tap,\n} from 'rxjs';\n\nimport {\n  DaffFormFieldComponent,\n  DaffFormFieldControl,\n} from '@daffodil/design/form-field';\n\n/**\n * DaffTextareaComponent provides the same functionality as a native `<textarea>` and contains custom styling and functionality.\n */\n@Component({\n  // eslint-disable-next-line @angular-eslint/component-selector\n  selector: 'textarea[daff-textarea]',\n  template: '<ng-content></ng-content>',\n  styleUrls: ['./textarea.component.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  providers: [\n\n    { provide: DaffFormFieldControl, useExisting: DaffTextareaComponent },\n  ],\n  host: {\n    class: 'daff-textarea',\n    '[attr.id]': 'internalId',\n    '[disabled]': 'disabledAttribute',\n    '[required]': 'requiredAttribute',\n    '(focus)': 'focus()',\n    '(blur)': 'blur()',\n    '[attr.aria-describedby]': 'ariaDescribedBy',\n  },\n})\nexport class DaffTextareaComponent extends DaffFormFieldControl<string> implements DaffFormFieldControl<string>, OnInit {\n  /** @docs-private */\n  controlType = 'native-textarea';\n\n  /**\n   * @docs-private\n   */\n  focused = false;\n\n  private get _id() {\n    return this.formField?.id();\n  };\n\n  /**\n   * @docs-private\n   */\n  get internalId() {\n    return this._id;\n  }\n\n  /**\n   * @docs-private\n   *\n   * Implemented as part of DaffFormFieldControl.\n   */\n  @Input({ transform: booleanAttribute }) disabled = false;\n\n  /**\n   * @docs-private\n   */\n  get disabledAttribute() {\n    if (this.ngControl) {\n      return this.ngControl.disabled;\n    }\n\n    return this.disabled || null;\n  }\n\n  private _required = false;\n\n  /**\n   * @docs-private\n   *\n   * Implemented as part of DaffFormFieldControl.\n   */\n  @Input({ transform: booleanAttribute })\n  get required(): boolean {\n    return this.ngControl?.control?.hasValidator(Validators.required) ?? this._required;\n  }\n  set required(value: boolean) {\n    this._required = value;\n  }\n\n  /**\n   * @docs-private\n   */\n  get requiredAttribute() {\n    return this.required || null;\n  }\n\n  /**\n   * @docs-private\n   */\n  focus() {\n    this.focused = true;\n    this.emitState();\n  }\n\n  /**\n   * @docs-private\n   */\n  blur() {\n    this.focused = false;\n    this.emitState(true);\n  }\n\n  /**\n   * @docs-private\n   */\n  get ariaDescribedBy() {\n    if(this.formField.hasErrorMessage()) {\n      return this.formField.errorMessageId();\n    } else if(this.formField.hasHint()) {\n      return this.formField.hintId();\n    } else {\n      return null;\n    }\n  }\n\n  constructor(\n    /**\n     * @docs-private\n     */\n    @Optional() @Self() public ngControl: NgControl,\n    private _elementRef: ElementRef<HTMLInputElement>,\n    private formField: DaffFormFieldComponent,\n  ) {\n    super(ngControl);\n  }\n\n  /** @docs-private */\n  ngOnInit() {\n    this.stateChanges = merge(\n      this._stateChanges.asObservable(),\n      this.ngControl ? this.ngControl.statusChanges : of(undefined),\n    ).pipe(\n      map(() => this.state),\n      tap((state) => this.disabled = state.disabled),\n    );\n  }\n\n  /**\n   * @docs-private\n   */\n  onFocus() {\n    this._elementRef.nativeElement.focus();\n  }\n\n  /**\n   * @docs-private\n   */\n  get value() {\n    return this._elementRef.nativeElement.value;\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/daffodil-design-toast.mjs

@@ -3,7 +3,7 @@ import * as i1$2 from '@angular/cdk/overlay';
 import { GlobalPositionStrategy } from '@angular/cdk/overlay';
 import { ComponentPortal } from '@angular/cdk/portal';
 import * as i0 from '@angular/core';
-import { Inject, Injectable, Directive, Input, ContentChild, ChangeDetectionStrategy, ViewEncapsulation, Component, EventEmitter, Output, Optional, SkipSelf } from '@angular/core';
+import { Inject, Injectable, Directive, contentChild, input, ChangeDetectionStrategy, ViewEncapsulation, Component, EventEmitter, Input, Output, Optional, SkipSelf } from '@angular/core';
 import { merge, of, EMPTY } from 'rxjs';
 import { filter, map, tap, delay, take } from 'rxjs/operators';
 import * as i2 from '@daffodil/design';
@@ -94,7 +94,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
 
 const daffDefaultToastConfiguration = {};
 
-/* eslint-disable quote-props */
 class DaffToastActionsDirective {
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DaffToastActionsDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
     /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: DaffToastActionsDirective, isStandalone: true, selector: "[daffToastActions]", host: { classAttribute: "daff-toast__actions" }, ngImport: i0 }); }
@@ -104,12 +103,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
             args: [{
                     selector: '[daffToastActions]',
                     host: {
-                        'class': 'daff-toast__actions',
+                        class: 'daff-toast__actions',
                     },
                 }]
         }] });
 
-/* eslint-disable quote-props */
 /**
  * @docs-private
  *
@@ -121,18 +119,27 @@ class DaffToastComponent {
      * @docs-private
      */
     onEscape() {
-        this.toast.dismiss();
+        this.toast().dismiss();
     }
     constructor(_elementRef, _focusTrapFactory, _focusStack) {
         this._elementRef = _elementRef;
         this._focusTrapFactory = _focusTrapFactory;
         this._focusStack = _focusStack;
+        /**
+         * @docs-private
+         */
+        this._actions = contentChild(DaffToastActionsDirective, ...(ngDevMode ? [{ debugName: "_actions" }] : /* istanbul ignore next */ []));
+        /**
+         * @docs-private
+         */
+        this._prefix = contentChild(DaffPrefixDirective, ...(ngDevMode ? [{ debugName: "_prefix" }] : /* istanbul ignore next */ []));
+        this.toast = input.required(...(ngDevMode ? [{ debugName: "toast" }] : /* istanbul ignore next */ []));
     }
     /**
      * @docs-private
      */
     ngAfterContentInit() {
-        if (daffToastChangesFocus(this.toast)) {
+        if (daffToastChangesFocus(this.toast())) {
             this._focusTrap = this._focusTrapFactory.create(this._elementRef.nativeElement);
         }
     }
@@ -140,7 +147,7 @@ class DaffToastComponent {
      * @docs-private
      */
     ngAfterViewInit() {
-        if (daffToastChangesFocus(this.toast)) {
+        if (daffToastChangesFocus(this.toast())) {
             this._focusStack.push();
             this._focusTrap.focusFirstTabbableElementWhenReady();
         }
@@ -149,12 +156,12 @@ class DaffToastComponent {
      * @docs-private
      */
     ngOnDestroy() {
-        if (daffToastChangesFocus(this.toast)) {
+        if (daffToastChangesFocus(this.toast())) {
             this._focusTrap.destroy();
         }
     }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DaffToastComponent, deps: [{ token: i0.ElementRef }, { token: i1$1.ConfigurableFocusTrapFactory }, { token: i2.DaffFocusStackService }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: DaffToastComponent, isStandalone: true, selector: "daff-toast", inputs: { toast: "toast" }, host: { listeners: { "keydown.escape": "onEscape()" }, classAttribute: "daff-toast" }, queries: [{ propertyName: "_actions", first: true, predicate: DaffToastActionsDirective, descendants: true }, { propertyName: "_prefix", first: true, predicate: DaffPrefixDirective, descendants: true }], hostDirectives: [{ directive: i2.DaffArticleEncapsulatedDirective }, { directive: i2.DaffStatusableDirective, inputs: ["status", "status"] }], ngImport: i0, template: "@if (_prefix) {\n  <ng-content select=\"[daffPrefix]\"></ng-content>\n}\n<div class=\"daff-toast__details\">\n  <div class=\"daff-toast__content\">\n    <ng-content select=\"[daffToastTitle]\"></ng-content>\n    <ng-content select=\"[daffToastMessage]\"></ng-content>\n  </div>\n  <ng-content select=\"[daffToastActions]\"></ng-content>\n</div>\n<ng-content></ng-content>\n", styles: [".daff-toast{display:flex;border-radius:.25rem;font-size:1rem;line-height:1.5rem;position:relative;min-width:15rem;max-width:90vw}@media(min-width:480px){.daff-toast{max-width:22rem}}.daff-toast+div+.daff-toast{margin-top:.75rem}.daff-toast+div+div+.daff-toast{margin-top:.75rem}.daff-toast+.daff-toast{margin-top:.75rem}.daff-toast:before{content:\"\";border-radius:.25rem 0 0 .25rem;position:absolute;height:100%;left:0;top:0;width:.25rem}.daff-toast .daff-prefix{padding:1rem 0 1rem 1rem}.daff-toast__close-button{cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;appearance:none;background:none;border:none;color:currentColor;margin:0;min-height:3rem;height:3rem;min-width:3rem;width:3rem}.daff-toast__details{display:block;font-size:1rem;line-height:1.5rem;width:100%}.daff-toast__content{display:flex;flex-direction:column;gap:.25rem;padding:1rem}.daff-toast__title{font-weight:600}.daff-toast__message{font-weight:400;line-height:1.25rem}.daff-toast__actions{display:flex;align-items:center;gap:.5rem;min-height:3rem;padding:0 1rem 1rem}@keyframes slideInLeft{0%{transform:translate(-100%)}to{transform:translate(0)}}@keyframes slideInRight{0%{transform:translate(100%)}to{transform:translate(0)}}@keyframes slideInTop{0%{transform:translateY(-100%)}to{transform:translateY(0)}}@keyframes slideInBottom{0%{transform:translateY(100%)}to{transform:translateY(0)}}.daff-toast.slide-in-left{animation:slideInLeft .3s ease-out}.daff-toast.slide-in-right{animation:slideInRight .3s ease-out}.daff-toast.slide-in-top{animation:slideInTop .3s ease-out}.daff-toast.slide-in-bottom{animation:slideInBottom .3s ease-out}@media screen and (prefers-reduced-motion:reduce){.daff-toast.slide-in-left,.daff-toast.slide-in-right,.daff-toast.slide-in-top,.daff-toast.slide-in-bottom{animation:none}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: DaffToastComponent, isStandalone: true, selector: "daff-toast", inputs: { toast: { classPropertyName: "toast", publicName: "toast", isSignal: true, isRequired: true, transformFunction: null } }, host: { listeners: { "keydown.escape": "onEscape()" }, classAttribute: "daff-toast" }, queries: [{ propertyName: "_actions", first: true, predicate: DaffToastActionsDirective, descendants: true, isSignal: true }, { propertyName: "_prefix", first: true, predicate: DaffPrefixDirective, descendants: true, isSignal: true }], hostDirectives: [{ directive: i2.DaffArticleEncapsulatedDirective }, { directive: i2.DaffStatusableDirective, inputs: ["status", "status"] }], ngImport: i0, template: "@if (_prefix()) {\n  <ng-content select=\"[daffPrefix]\"></ng-content>\n}\n<div class=\"daff-toast__details\">\n  <div class=\"daff-toast__content\">\n    <ng-content select=\"[daffToastTitle]\"></ng-content>\n    <ng-content select=\"[daffToastMessage]\"></ng-content>\n  </div>\n  <ng-content select=\"[daffToastActions]\"></ng-content>\n</div>\n<ng-content></ng-content>\n", styles: [".daff-toast{display:flex;border-radius:.25rem;font-size:1rem;line-height:1.5rem;position:relative;min-width:15rem;max-width:90vw}@media(min-width:480px){.daff-toast{max-width:22rem}}.daff-toast+div+.daff-toast{margin-top:.75rem}.daff-toast+div+div+.daff-toast{margin-top:.75rem}.daff-toast+.daff-toast{margin-top:.75rem}.daff-toast:before{content:\"\";border-radius:.25rem 0 0 .25rem;position:absolute;height:100%;left:0;top:0;width:.25rem}.daff-toast .daff-prefix{padding:1rem 0 1rem 1rem}.daff-toast__close-button{cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;appearance:none;background:none;border:none;color:currentColor;margin:0;min-height:3rem;height:3rem;min-width:3rem;width:3rem}.daff-toast__details{display:block;font-size:1rem;line-height:1.5rem;width:100%}.daff-toast__content{display:flex;flex-direction:column;gap:.25rem;padding:1rem}.daff-toast__title{font-weight:600}.daff-toast__message{font-weight:400;line-height:1.25rem}.daff-toast__actions{display:flex;align-items:center;gap:.5rem;min-height:3rem;padding:0 1rem 1rem}@keyframes slideInLeft{0%{transform:translate(-100%)}to{transform:translate(0)}}@keyframes slideInRight{0%{transform:translate(100%)}to{transform:translate(0)}}@keyframes slideInTop{0%{transform:translateY(-100%)}to{transform:translateY(0)}}@keyframes slideInBottom{0%{transform:translateY(100%)}to{transform:translateY(0)}}.daff-toast.slide-in-left{animation:slideInLeft .3s ease-out}.daff-toast.slide-in-right{animation:slideInRight .3s ease-out}.daff-toast.slide-in-top{animation:slideInTop .3s ease-out}.daff-toast.slide-in-bottom{animation:slideInBottom .3s ease-out}@media screen and (prefers-reduced-motion:reduce){.daff-toast.slide-in-left,.daff-toast.slide-in-right,.daff-toast.slide-in-top,.daff-toast.slide-in-bottom{animation:none}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DaffToastComponent, decorators: [{
             type: Component,
@@ -165,18 +172,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                             inputs: ['status'],
                         },
                     ], host: {
-                        'class': 'daff-toast',
+                        class: 'daff-toast',
                         '(keydown.escape)': 'onEscape()',
-                    }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (_prefix) {\n  <ng-content select=\"[daffPrefix]\"></ng-content>\n}\n<div class=\"daff-toast__details\">\n  <div class=\"daff-toast__content\">\n    <ng-content select=\"[daffToastTitle]\"></ng-content>\n    <ng-content select=\"[daffToastMessage]\"></ng-content>\n  </div>\n  <ng-content select=\"[daffToastActions]\"></ng-content>\n</div>\n<ng-content></ng-content>\n", styles: [".daff-toast{display:flex;border-radius:.25rem;font-size:1rem;line-height:1.5rem;position:relative;min-width:15rem;max-width:90vw}@media(min-width:480px){.daff-toast{max-width:22rem}}.daff-toast+div+.daff-toast{margin-top:.75rem}.daff-toast+div+div+.daff-toast{margin-top:.75rem}.daff-toast+.daff-toast{margin-top:.75rem}.daff-toast:before{content:\"\";border-radius:.25rem 0 0 .25rem;position:absolute;height:100%;left:0;top:0;width:.25rem}.daff-toast .daff-prefix{padding:1rem 0 1rem 1rem}.daff-toast__close-button{cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;appearance:none;background:none;border:none;color:currentColor;margin:0;min-height:3rem;height:3rem;min-width:3rem;width:3rem}.daff-toast__details{display:block;font-size:1rem;line-height:1.5rem;width:100%}.daff-toast__content{display:flex;flex-direction:column;gap:.25rem;padding:1rem}.daff-toast__title{font-weight:600}.daff-toast__message{font-weight:400;line-height:1.25rem}.daff-toast__actions{display:flex;align-items:center;gap:.5rem;min-height:3rem;padding:0 1rem 1rem}@keyframes slideInLeft{0%{transform:translate(-100%)}to{transform:translate(0)}}@keyframes slideInRight{0%{transform:translate(100%)}to{transform:translate(0)}}@keyframes slideInTop{0%{transform:translateY(-100%)}to{transform:translateY(0)}}@keyframes slideInBottom{0%{transform:translateY(100%)}to{transform:translateY(0)}}.daff-toast.slide-in-left{animation:slideInLeft .3s ease-out}.daff-toast.slide-in-right{animation:slideInRight .3s ease-out}.daff-toast.slide-in-top{animation:slideInTop .3s ease-out}.daff-toast.slide-in-bottom{animation:slideInBottom .3s ease-out}@media screen and (prefers-reduced-motion:reduce){.daff-toast.slide-in-left,.daff-toast.slide-in-right,.daff-toast.slide-in-top,.daff-toast.slide-in-bottom{animation:none}}\n"] }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1$1.ConfigurableFocusTrapFactory }, { type: i2.DaffFocusStackService }], propDecorators: { _actions: [{
-                type: ContentChild,
-                args: [DaffToastActionsDirective]
-            }], _prefix: [{
-                type: ContentChild,
-                args: [DaffPrefixDirective]
-            }], toast: [{
-                type: Input
-            }] } });
+                    }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (_prefix()) {\n  <ng-content select=\"[daffPrefix]\"></ng-content>\n}\n<div class=\"daff-toast__details\">\n  <div class=\"daff-toast__content\">\n    <ng-content select=\"[daffToastTitle]\"></ng-content>\n    <ng-content select=\"[daffToastMessage]\"></ng-content>\n  </div>\n  <ng-content select=\"[daffToastActions]\"></ng-content>\n</div>\n<ng-content></ng-content>\n", styles: [".daff-toast{display:flex;border-radius:.25rem;font-size:1rem;line-height:1.5rem;position:relative;min-width:15rem;max-width:90vw}@media(min-width:480px){.daff-toast{max-width:22rem}}.daff-toast+div+.daff-toast{margin-top:.75rem}.daff-toast+div+div+.daff-toast{margin-top:.75rem}.daff-toast+.daff-toast{margin-top:.75rem}.daff-toast:before{content:\"\";border-radius:.25rem 0 0 .25rem;position:absolute;height:100%;left:0;top:0;width:.25rem}.daff-toast .daff-prefix{padding:1rem 0 1rem 1rem}.daff-toast__close-button{cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;appearance:none;background:none;border:none;color:currentColor;margin:0;min-height:3rem;height:3rem;min-width:3rem;width:3rem}.daff-toast__details{display:block;font-size:1rem;line-height:1.5rem;width:100%}.daff-toast__content{display:flex;flex-direction:column;gap:.25rem;padding:1rem}.daff-toast__title{font-weight:600}.daff-toast__message{font-weight:400;line-height:1.25rem}.daff-toast__actions{display:flex;align-items:center;gap:.5rem;min-height:3rem;padding:0 1rem 1rem}@keyframes slideInLeft{0%{transform:translate(-100%)}to{transform:translate(0)}}@keyframes slideInRight{0%{transform:translate(100%)}to{transform:translate(0)}}@keyframes slideInTop{0%{transform:translateY(-100%)}to{transform:translateY(0)}}@keyframes slideInBottom{0%{transform:translateY(100%)}to{transform:translateY(0)}}.daff-toast.slide-in-left{animation:slideInLeft .3s ease-out}.daff-toast.slide-in-right{animation:slideInRight .3s ease-out}.daff-toast.slide-in-top{animation:slideInTop .3s ease-out}.daff-toast.slide-in-bottom{animation:slideInBottom .3s ease-out}@media screen and (prefers-reduced-motion:reduce){.daff-toast.slide-in-left,.daff-toast.slide-in-right,.daff-toast.slide-in-top,.daff-toast.slide-in-bottom{animation:none}}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1$1.ConfigurableFocusTrapFactory }, { type: i2.DaffFocusStackService }], propDecorators: { _actions: [{ type: i0.ContentChild, args: [i0.forwardRef(() => DaffToastActionsDirective), { isSignal: true }] }], _prefix: [{ type: i0.ContentChild, args: [i0.forwardRef(() => DaffPrefixDirective), { isSignal: true }] }], toast: [{ type: i0.Input, args: [{ isSignal: true, alias: "toast", required: true }] }] } });
 
 /* eslint-disable quote-props */
 class DaffToastMessageDirective {