@daffodil/design 0.86.0 → 0.87.0

package/fesm2022/daffodil-design-textarea.mjs

@@ -0,0 +1,124 @@
+import * as i0 from '@angular/core';
+import { HostBinding, HostListener, Optional, Self, ChangeDetectionStrategy, Component } from '@angular/core';
+import * as i1 from '@angular/forms';
+import { merge, of, map } from 'rxjs';
+import * as i2 from '@daffodil/design';
+import { DaffFormFieldControl } from '@daffodil/design';
+
+/**
+ * DaffTextareaComponent provides the same functionality as a native `<textarea>` and contains custom styling and functionality.
+ */
+class DaffTextareaComponent extends DaffFormFieldControl {
+    get _id() {
+        return this.formField?.id;
+    }
+    ;
+    /**
+     * @docs-private
+     */
+    get internalId() {
+        return this._id;
+    }
+    /**
+     * @docs-private
+     */
+    focus() {
+        this.focused = true;
+        this.emitState();
+    }
+    /**
+     * @docs-private
+     */
+    blur() {
+        this.focused = false;
+        this.emitState();
+    }
+    /**
+     * @docs-private
+     */
+    get ariaDescribedBy() {
+        if (this.formField.hasErrorMessage()) {
+            return this.formField.errorMessageId;
+        }
+        else if (this.formField.hasHint()) {
+            return this.formField.hintId;
+        }
+        else {
+            return null;
+        }
+    }
+    constructor(
+    /**
+     * @docs-private
+     */
+    ngControl, _elementRef, formField) {
+        super(ngControl);
+        this.ngControl = ngControl;
+        this._elementRef = _elementRef;
+        this.formField = formField;
+        /** @docs-private */
+        this.controlType = 'native-textarea';
+        /**
+         * @docs-private
+         */
+        this.class = true;
+        /**
+         * @docs-private
+         */
+        this.focused = false;
+    }
+    /** @docs-private */
+    ngOnInit() {
+        this.stateChanges = merge(this._stateChanges.asObservable(), this.ngControl ? this.ngControl.statusChanges : of(undefined)).pipe(map(() => this.state));
+    }
+    /**
+     * @docs-private
+     */
+    onFocus() {
+        this._elementRef.nativeElement.focus();
+    }
+    /**
+     * @docs-private
+     */
+    get value() {
+        return this._elementRef.nativeElement.value;
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: DaffTextareaComponent, deps: [{ token: i1.NgControl, optional: true, self: true }, { token: i0.ElementRef }, { token: i2.DaffFormFieldComponent }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.11", type: DaffTextareaComponent, isStandalone: true, selector: "textarea[daff-textarea]", host: { listeners: { "focus": "focus()", "blur": "blur()" }, properties: { "class.daff-textarea": "this.class", "attr.id": "this.internalId", "attr.aria-describedby": "this.ariaDescribedBy" } }, providers: [
+            // eslint-disable-next-line @typescript-eslint/no-use-before-define
+            { provide: DaffFormFieldControl, useExisting: DaffTextareaComponent },
+        ], usesInheritance: true, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: [":host{background:none;border:none;box-shadow:none;margin:0;padding:0;resize:vertical;min-height:3.5rem;width:100%;box-sizing:border-box}:host:focus{border:none;box-shadow:none;outline:none}:host:disabled{cursor:not-allowed}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: DaffTextareaComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'textarea[daff-textarea]', template: '<ng-content></ng-content>', changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+                        // eslint-disable-next-line @typescript-eslint/no-use-before-define
+                        { provide: DaffFormFieldControl, useExisting: DaffTextareaComponent },
+                    ], styles: [":host{background:none;border:none;box-shadow:none;margin:0;padding:0;resize:vertical;min-height:3.5rem;width:100%;box-sizing:border-box}:host:focus{border:none;box-shadow:none;outline:none}:host:disabled{cursor:not-allowed}\n"] }]
+        }], ctorParameters: () => [{ type: i1.NgControl, decorators: [{
+                    type: Optional
+                }, {
+                    type: Self
+                }] }, { type: i0.ElementRef }, { type: i2.DaffFormFieldComponent }], propDecorators: { class: [{
+                type: HostBinding,
+                args: ['class.daff-textarea']
+            }], internalId: [{
+                type: HostBinding,
+                args: ['attr.id']
+            }], focus: [{
+                type: HostListener,
+                args: ['focus']
+            }], blur: [{
+                type: HostListener,
+                args: ['blur']
+            }], ariaDescribedBy: [{
+                type: HostBinding,
+                args: ['attr.aria-describedby']
+            }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { DaffTextareaComponent };
+//# sourceMappingURL=daffodil-design-textarea.mjs.map

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

@@ -0,0 +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  HostListener,\n  ChangeDetectionStrategy,\n  HostBinding,\n  OnInit,\n} from '@angular/core';\nimport { NgControl } from '@angular/forms';\nimport {\n  map,\n  merge,\n  of,\n} from 'rxjs';\n\nimport {\n  DaffFormFieldComponent,\n  DaffFormFieldControl,\n} from '@daffodil/design';\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    // eslint-disable-next-line @typescript-eslint/no-use-before-define\n    { provide: DaffFormFieldControl, useExisting: DaffTextareaComponent },\n  ],\n})\nexport class DaffTextareaComponent extends DaffFormFieldControl<string> implements DaffFormFieldControl<string>, OnInit {\n\n  /** @docs-private */\n  controlType = 'native-textarea';\n\n  /**\n   * @docs-private\n   */\n  @HostBinding('class.daff-textarea') class = true;\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  @HostBinding('attr.id') get internalId() {\n    return this._id;\n  }\n\n  /**\n   * @docs-private\n   */\n  @HostListener('focus') focus() {\n    this.focused = true;\n    this.emitState();\n  }\n\n  /**\n   * @docs-private\n   */\n  @HostListener('blur') blur() {\n    this.focused = false;\n    this.emitState();\n  }\n\n  /**\n   * @docs-private\n   */\n  @HostBinding('attr.aria-describedby') 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    );\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.mjs

@@ -1,8 +1,8 @@
 import * as i0 from '@angular/core';
 import { HostBinding, Directive, Input, ChangeDetectionStrategy, Component, isDevMode, ContentChild, ViewEncapsulation, NgModule, HostListener, Optional, Self, EventEmitter, ElementRef, Output, ViewChild, ContentChildren, Injectable, InjectionToken, inject, PLATFORM_ID, Inject, makeEnvironmentProviders, provideAppInitializer } from '@angular/core';
+import { NgTemplateOutlet, CommonModule, isPlatformBrowser, DOCUMENT } from '@angular/common';
 import { BehaviorSubject, of, fromEventPattern, Subject, merge, fromEvent, EMPTY, combineLatest } from 'rxjs';
 import * as i1 from '@angular/forms';
-import { CommonModule, isPlatformBrowser, DOCUMENT } from '@angular/common';
 import { BreakpointObserver } from '@angular/cdk/layout';
 import { startWith, map, catchError, filter, shareReplay } from 'rxjs/operators';
 import { DaffServerSafePersistenceServiceToken } from '@daffodil/core';
@@ -204,6 +204,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImpo
                 args: ['class.validated']
             }] } });
 
+class DaffFormFieldActionDirective {
+    constructor() {
+        /**
+         * @docs-private
+         */
+        this.class = true;
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: DaffFormFieldActionDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.11", type: DaffFormFieldActionDirective, isStandalone: true, selector: "[daffFormFieldAction]", host: { properties: { "class.daff-form-field-action": "this.class" } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: DaffFormFieldActionDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[daffFormFieldAction]',
+                }]
+        }], propDecorators: { class: [{
+                type: HostBinding,
+                args: ['class.daff-form-field-action']
+            }] } });
+
 /**
  *
  * The class that a form control must **implement** in order to be
@@ -261,6 +281,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImpo
         }] });
 
 let daffFormFieldId = 0;
+var DaffFormFieldApperanaceEnum;
+(function (DaffFormFieldApperanaceEnum) {
+    DaffFormFieldApperanaceEnum["Fluid"] = "fluid";
+    DaffFormFieldApperanaceEnum["Fixed"] = "fixed";
+})(DaffFormFieldApperanaceEnum || (DaffFormFieldApperanaceEnum = {}));
 class DaffFormFieldComponent {
     /** @docs-private */
     get isSelectField() {
@@ -298,6 +323,7 @@ class DaffFormFieldComponent {
          * form field should be marked as valid.
          */
         this.isValid = false;
+        this._appearance = DaffFormFieldApperanaceEnum.Fluid;
         /**
          * The unique id of the form field. Defaults to an autogenerated value. When using this,
          * it's your responsibility to ensure that the id for each form field is unique.
@@ -314,6 +340,18 @@ class DaffFormFieldComponent {
          */
         this.errorMessageId = this.id + '-error';
     }
+    /**
+     * @docs-private
+     */
+    get hasPrefixClass() {
+        return this._prefix;
+    }
+    /**
+     * @docs-private
+     */
+    get hasSuffixClass() {
+        return this._suffix || this._action;
+    }
     /**
      * @docs-private
      */
@@ -352,6 +390,39 @@ class DaffFormFieldComponent {
     get raisedClass() {
         return this._control?.raised || this.isFilled;
     }
+    /**
+     * The appearance style of a form field, whether the label is fluid or fixed.
+     */
+    get appearance() {
+        return this._appearance;
+    }
+    set appearance(value) {
+        if (value === null || value === undefined || value === '') {
+            this._appearance = DaffFormFieldApperanaceEnum.Fluid;
+        }
+        else {
+            this._appearance = value;
+        }
+    }
+    ;
+    /**
+     * @docs-private
+     */
+    get fluidClass() {
+        return this._appearance === DaffFormFieldApperanaceEnum.Fluid;
+    }
+    /**
+     * @docs-private
+     */
+    get fixedClass() {
+        return this._appearance === DaffFormFieldApperanaceEnum.Fixed;
+    }
+    /**
+     * @docs-private
+     */
+    get isFixed() {
+        return this._appearance === DaffFormFieldApperanaceEnum.Fixed;
+    }
     /**
      * @docs-private
      */
@@ -389,6 +460,10 @@ class DaffFormFieldComponent {
                     `2. OR manually set an 'id' on your input and matching 'for' attribute on your <label>.\n\n` +
                     `Why this matters: Proper labelling ensures assistive technologies can identify form fields correctly.`);
             }
+            if (this._suffix && this._action && !this.isFixed) {
+                console.warn(`UI consideration for form field with id "${this.id}":\n\n` + `In a fluid appearance, avoid using suffix alongside an action.`);
+            }
+            ;
         }
     }
     /**
@@ -427,25 +502,33 @@ class DaffFormFieldComponent {
         this._validateFormControl();
     }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: DaffFormFieldComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.11", type: DaffFormFieldComponent, isStandalone: true, selector: "daff-form-field", inputs: { id: "id" }, host: { properties: { "class.daff-form-field": "this.class", "class.daff-error": "this.errorClass", "class.daff-disabled": "this.disabledClass", "class.daff-valid": "this.validClass", "class.daff-focused": "this.focusedClass", "class.daff-raised": "this.raisedClass" } }, queries: [{ propertyName: "_prefix", first: true, predicate: DaffPrefixDirective, descendants: true }, { propertyName: "_suffix", first: true, predicate: DaffSuffixDirective, descendants: true }, { propertyName: "_control", first: true, predicate: DaffFormFieldControl, descendants: true }, { propertyName: "_formLabelDirective", first: true, predicate: DaffFormLabelDirective, descendants: true }, { propertyName: "_formFieldLabelDirective", first: true, predicate: DaffFormFieldLabelDirective, descendants: true }, { propertyName: "_hint", first: true, predicate: DaffHintComponent, descendants: true }, { propertyName: "_error", first: true, predicate: DaffErrorMessageComponent, descendants: true }], hostDirectives: [{ directive: DaffSkeletonableDirective, inputs: ["skeleton", "skeleton"] }], ngImport: i0, template: "<div class=\"daff-form-field__control\">\n\t@if (_prefix) {\n\t\t<ng-content select=\"[daffPrefix]\"></ng-content>\n\t}\n\t<div class=\"daff-form-field__form-wrapper\">\n\t\t@if (_formLabelDirective) {\n\t\t\t<ng-content select=\"label[daffFormLabel]\"></ng-content>\n\t\t} @else if(_formFieldLabelDirective) {\n\t\t\t<label class=\"daff-form-field__label\"\n\t\t\t\t[attr.for]=\"autoLabelId\"\n\t\t\t\t[attr.id]=\"customId\">\n\t\t\t\t<ng-content select=\"daff-form-label\"></ng-content>\n\t\t\t</label>\n\t\t} @else {\n\t\t\t<ng-content select=\"label\"></ng-content>\n\t\t}\n\t\t<ng-content></ng-content>\n\t\t@if (isSelectField) {\n\t\t\t<div class=\"daff-form-field__icon\"></div>\n\t\t}\n\t</div>\n  @if (_suffix) {\n\t\t<ng-content select=\"[daffSuffix]\"></ng-content>\n\t}\n</div>\n@if (hasHint()) {\n\t<div\n\t\tclass=\"daff-form-field__hint-wrapper\"\n\t\t[id]=\"hintId\">\n\t\t<ng-content select=\"daff-hint\"></ng-content>\n\t</div>\n}\n@if (hasErrorMessage()) {\n\t<div\n\t\tclass=\"daff-form-field__error-wrapper\"\n\t\t[id]=\"errorMessageId\">\n\t\t<ng-content select=\"daff-error-message\"></ng-content>\n\t</div>\n}", styles: [".daff-form-field{display:flex;flex-direction:column;gap:.25rem;position:relative}.daff-form-field__hint-wrapper,.daff-form-field__error-wrapper{display:flex;flex-direction:column;gap:.25rem}.daff-form-field__control{display:flex;align-items:center;border-radius:.25rem;font-size:1rem;line-height:1rem;position:relative;width:100%}.daff-form-field__control * ::-webkit-input-placeholder{opacity:0}.daff-form-field__control+.daff-hint,.daff-form-field__control+.daff-error-message{margin-top:.5rem}.daff-form-field input,.daff-form-field textarea,.daff-form-field select{font-size:1rem;line-height:1.5rem;padding:1rem}.daff-form-field label,.daff-form-field .daff-form-label,.daff-form-field__label{position:absolute;left:1rem;top:1.25rem;pointer-events:none;transform-origin:left top;transition:transform .15s}.daff-form-field label+input,.daff-form-field label+textarea,.daff-form-field label+select,.daff-form-field .daff-form-label+input,.daff-form-field .daff-form-label+textarea,.daff-form-field .daff-form-label+select,.daff-form-field__label+input,.daff-form-field__label+textarea,.daff-form-field__label+select{padding:1.5rem 1rem .5rem}.daff-form-field.daff-raised label,.daff-form-field.daff-raised .daff-form-label,.daff-form-field.daff-raised .daff-form-field__label{transform:translateY(-75%) scale(.75)}.daff-form-field.daff-raised * ::-webkit-input-placeholder{opacity:1}.daff-form-field.daff-disabled{cursor:not-allowed;opacity:.5}.daff-form-field__icon{content:\"\";position:absolute;top:48%;right:1rem;display:inline-block;border-right:2px solid currentColor;border-bottom:2px solid currentColor;width:.5rem;height:.5rem;transform:translateY(-50%) rotate(45deg);transition:transform .15s}.daff-form-field__form-wrapper{flex-grow:1;position:relative;overflow:hidden}.daff-form-field .daff-prefix{padding-left:1rem}.daff-form-field .daff-suffix{padding-right:1rem}.daff-form-field.daff-skeleton{display:flex;position:relative;height:3.5rem;width:100%;border-radius:.25rem}.daff-form-field.daff-skeleton:before{animation-name:loading;animation-duration:1s;animation-timing-function:linear;animation-iteration-count:infinite;animation-direction:alternate;content:\"\";height:3.5rem;width:100%;position:absolute;top:0;left:0}@keyframes loading{0%{opacity:.5}to{opacity:1}}.daff-form-field.daff-skeleton>*{visibility:hidden}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.11", type: DaffFormFieldComponent, isStandalone: true, selector: "daff-form-field", inputs: { appearance: "appearance", id: "id" }, host: { properties: { "class.daff-form-field": "this.class", "class.has-prefix": "this.hasPrefixClass", "class.has-suffix": "this.hasSuffixClass", "class.daff-error": "this.errorClass", "class.daff-disabled": "this.disabledClass", "class.daff-valid": "this.validClass", "class.daff-focused": "this.focusedClass", "class.daff-raised": "this.raisedClass", "class.fluid": "this.fluidClass", "class.fixed": "this.fixedClass" } }, queries: [{ propertyName: "_prefix", first: true, predicate: DaffPrefixDirective, descendants: true }, { propertyName: "_suffix", first: true, predicate: DaffSuffixDirective, descendants: true }, { propertyName: "_control", first: true, predicate: DaffFormFieldControl, descendants: true }, { propertyName: "_formLabelDirective", first: true, predicate: DaffFormLabelDirective, descendants: true }, { propertyName: "_formFieldLabelDirective", first: true, predicate: DaffFormFieldLabelDirective, descendants: true }, { propertyName: "_action", first: true, predicate: DaffFormFieldActionDirective, descendants: true }, { propertyName: "_hint", first: true, predicate: DaffHintComponent, descendants: true }, { propertyName: "_error", first: true, predicate: DaffErrorMessageComponent, descendants: true }], hostDirectives: [{ directive: DaffSkeletonableDirective, inputs: ["skeleton", "skeleton"] }], ngImport: i0, template: "<ng-content />\n\n@if (isFixed) {\n  <ng-container *ngTemplateOutlet=\"labelTemplate\"></ng-container>\n}\n<div class=\"daff-form-field__wrapper\">\n\t<div class=\"daff-form-field__control\">\n\t\t@if (_prefix) {\n\t\t\t<ng-content select=\"[daffPrefix]\"></ng-content>\n\t\t}\n\t\t<div class=\"daff-form-field__inner\">\n\t\t\t@if (!isFixed) {\n\t\t\t\t<ng-container *ngTemplateOutlet=\"labelTemplate\"></ng-container>\n\t\t\t}\n\t\t\t<ng-content></ng-content>\n\t\t</div>\n\t\t@if (isSelectField) {\n\t\t\t<div class=\"daff-form-field__icon\"></div>\n\t\t}\n\t\t@if (_suffix) {\n\t\t\t<ng-content select=\"[daffSuffix]\"></ng-content>\n\t\t}\n\t\t@if (_action && !isFixed) {\n\t\t\t<ng-container *ngTemplateOutlet=\"actionTemplate\"></ng-container>\n\t\t}\n\t</div>\n\t@if ((_action && isFixed)) {\n\t\t<ng-container *ngTemplateOutlet=\"actionTemplate\"></ng-container>\n\t}\n</div>\n@if (hasHint()) {\n\t<div\n\t\tclass=\"daff-form-field__hint-wrapper\"\n\t\t[id]=\"hintId\">\n\t\t<ng-content select=\"daff-hint\"></ng-content>\n\t</div>\n}\n@if (hasErrorMessage()) {\n\t<div\n\t\tclass=\"daff-form-field__error-wrapper\"\n\t\t[id]=\"errorMessageId\">\n\t\t<ng-content select=\"daff-error-message\"></ng-content>\n\t</div>\n}\n\n<ng-template #actionTemplate>\n\t<ng-content select=\"[daffFormFieldAction]\"></ng-content>\n</ng-template>\n\n<ng-template #labelTemplate>\n  @if (_formLabelDirective) {\n    <ng-content select=\"label[daffFormLabel]\"></ng-content>\n  } @else if(_formFieldLabelDirective) {\n    <label class=\"daff-form-field__label\"\n      [attr.for]=\"autoLabelId\"\n      [attr.id]=\"customId\">\n      <ng-content select=\"daff-form-label\"></ng-content>\n    </label>\n  } @else {\n    <ng-content select=\"label\"></ng-content>\n  }\n</ng-template>", styles: [".daff-form-field{display:flex;flex-direction:column;gap:.25rem;position:relative}.daff-form-field.has-prefix .daff-form-field__control{padding-left:0}.daff-form-field.has-suffix .daff-form-field__control{padding-right:0}.daff-form-field__hint-wrapper,.daff-form-field__error-wrapper{display:flex;flex-direction:column;gap:.25rem}.daff-form-field__wrapper{display:flex;gap:.25rem}.daff-form-field__control{display:flex;align-items:center;border-radius:.25rem;font-size:1rem;line-height:1rem;padding:0 1rem;position:relative;width:100%}.daff-form-field__control+.daff-hint,.daff-form-field__control+.daff-error-message{margin-top:.5rem}.daff-form-field.fixed input,.daff-form-field.fixed textarea,.daff-form-field.fixed select{font-size:1rem;line-height:1.5rem;padding:calc(.75rem - 1px) 0}.daff-form-field.fixed input * ::-webkit-input-placeholder,.daff-form-field.fixed textarea * ::-webkit-input-placeholder,.daff-form-field.fixed select * ::-webkit-input-placeholder{opacity:1}.daff-form-field.fluid .daff-form-field__control * ::-webkit-input-placeholder{opacity:0}.daff-form-field.fluid .daff-form-field-action{margin-right:.25rem}.daff-form-field.fluid input,.daff-form-field.fluid textarea,.daff-form-field.fluid select{font-size:1rem;line-height:1.5rem;padding:1rem 0}.daff-form-field.fluid label,.daff-form-field.fluid .daff-form-label,.daff-form-field.fluid .daff-form-field__label{position:absolute;left:0;top:1.25rem;pointer-events:none;transform-origin:left top;transition:transform .15s;overflow:hidden;white-space:nowrap}.daff-form-field.fluid label+input,.daff-form-field.fluid label+textarea,.daff-form-field.fluid label+select,.daff-form-field.fluid .daff-form-label+input,.daff-form-field.fluid .daff-form-label+textarea,.daff-form-field.fluid .daff-form-label+select,.daff-form-field.fluid .daff-form-field__label+input,.daff-form-field.fluid .daff-form-field__label+textarea,.daff-form-field.fluid .daff-form-field__label+select{padding:calc(1.5rem - 1px) 0 calc(.5rem - 1px)}.daff-form-field.fluid.daff-raised label,.daff-form-field.fluid.daff-raised .daff-form-label,.daff-form-field.fluid.daff-raised .daff-form-field__label{transform:translateY(-75%) scale(.75)}.daff-form-field.fluid.daff-raised * ::-webkit-input-placeholder{opacity:1}.daff-form-field.fluid .daff-prefix,.daff-form-field.fluid .daff-suffix{height:3rem;min-width:3rem}.daff-form-field.daff-disabled{cursor:not-allowed;opacity:.5}.daff-form-field__icon{content:\"\";position:absolute;top:48%;right:1rem;display:inline-block;border-right:2px solid currentColor;border-bottom:2px solid currentColor;width:.5rem;height:.5rem;transform:translateY(-50%) rotate(45deg);transition:transform .15s}.daff-form-field__inner{flex-grow:1;position:relative;overflow:hidden}.daff-form-field .daff-prefix,.daff-form-field .daff-suffix{display:flex;align-items:center;justify-content:center;appearance:none;background:none;border:none;height:calc(3rem - 2px);min-width:calc(3rem - 2px)}.daff-form-field.daff-skeleton{display:flex;position:relative;height:3.5rem;width:100%;border-radius:.25rem}.daff-form-field.daff-skeleton:before{animation-name:loading;animation-duration:1s;animation-timing-function:linear;animation-iteration-count:infinite;animation-direction:alternate;content:\"\";height:3.5rem;width:100%;position:absolute;top:0;left:0}@keyframes loading{0%{opacity:.5}to{opacity:1}}.daff-form-field.daff-skeleton>*{visibility:hidden}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: DaffFormFieldComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'daff-form-field', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, hostDirectives: [
+            args: [{ selector: 'daff-form-field', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        NgTemplateOutlet,
+                    ], hostDirectives: [
                         {
                             directive: DaffSkeletonableDirective,
                             inputs: ['skeleton'],
                         },
-                    ], template: "<div class=\"daff-form-field__control\">\n\t@if (_prefix) {\n\t\t<ng-content select=\"[daffPrefix]\"></ng-content>\n\t}\n\t<div class=\"daff-form-field__form-wrapper\">\n\t\t@if (_formLabelDirective) {\n\t\t\t<ng-content select=\"label[daffFormLabel]\"></ng-content>\n\t\t} @else if(_formFieldLabelDirective) {\n\t\t\t<label class=\"daff-form-field__label\"\n\t\t\t\t[attr.for]=\"autoLabelId\"\n\t\t\t\t[attr.id]=\"customId\">\n\t\t\t\t<ng-content select=\"daff-form-label\"></ng-content>\n\t\t\t</label>\n\t\t} @else {\n\t\t\t<ng-content select=\"label\"></ng-content>\n\t\t}\n\t\t<ng-content></ng-content>\n\t\t@if (isSelectField) {\n\t\t\t<div class=\"daff-form-field__icon\"></div>\n\t\t}\n\t</div>\n  @if (_suffix) {\n\t\t<ng-content select=\"[daffSuffix]\"></ng-content>\n\t}\n</div>\n@if (hasHint()) {\n\t<div\n\t\tclass=\"daff-form-field__hint-wrapper\"\n\t\t[id]=\"hintId\">\n\t\t<ng-content select=\"daff-hint\"></ng-content>\n\t</div>\n}\n@if (hasErrorMessage()) {\n\t<div\n\t\tclass=\"daff-form-field__error-wrapper\"\n\t\t[id]=\"errorMessageId\">\n\t\t<ng-content select=\"daff-error-message\"></ng-content>\n\t</div>\n}", styles: [".daff-form-field{display:flex;flex-direction:column;gap:.25rem;position:relative}.daff-form-field__hint-wrapper,.daff-form-field__error-wrapper{display:flex;flex-direction:column;gap:.25rem}.daff-form-field__control{display:flex;align-items:center;border-radius:.25rem;font-size:1rem;line-height:1rem;position:relative;width:100%}.daff-form-field__control * ::-webkit-input-placeholder{opacity:0}.daff-form-field__control+.daff-hint,.daff-form-field__control+.daff-error-message{margin-top:.5rem}.daff-form-field input,.daff-form-field textarea,.daff-form-field select{font-size:1rem;line-height:1.5rem;padding:1rem}.daff-form-field label,.daff-form-field .daff-form-label,.daff-form-field__label{position:absolute;left:1rem;top:1.25rem;pointer-events:none;transform-origin:left top;transition:transform .15s}.daff-form-field label+input,.daff-form-field label+textarea,.daff-form-field label+select,.daff-form-field .daff-form-label+input,.daff-form-field .daff-form-label+textarea,.daff-form-field .daff-form-label+select,.daff-form-field__label+input,.daff-form-field__label+textarea,.daff-form-field__label+select{padding:1.5rem 1rem .5rem}.daff-form-field.daff-raised label,.daff-form-field.daff-raised .daff-form-label,.daff-form-field.daff-raised .daff-form-field__label{transform:translateY(-75%) scale(.75)}.daff-form-field.daff-raised * ::-webkit-input-placeholder{opacity:1}.daff-form-field.daff-disabled{cursor:not-allowed;opacity:.5}.daff-form-field__icon{content:\"\";position:absolute;top:48%;right:1rem;display:inline-block;border-right:2px solid currentColor;border-bottom:2px solid currentColor;width:.5rem;height:.5rem;transform:translateY(-50%) rotate(45deg);transition:transform .15s}.daff-form-field__form-wrapper{flex-grow:1;position:relative;overflow:hidden}.daff-form-field .daff-prefix{padding-left:1rem}.daff-form-field .daff-suffix{padding-right:1rem}.daff-form-field.daff-skeleton{display:flex;position:relative;height:3.5rem;width:100%;border-radius:.25rem}.daff-form-field.daff-skeleton:before{animation-name:loading;animation-duration:1s;animation-timing-function:linear;animation-iteration-count:infinite;animation-direction:alternate;content:\"\";height:3.5rem;width:100%;position:absolute;top:0;left:0}@keyframes loading{0%{opacity:.5}to{opacity:1}}.daff-form-field.daff-skeleton>*{visibility:hidden}\n"] }]
+                    ], template: "<ng-content />\n\n@if (isFixed) {\n  <ng-container *ngTemplateOutlet=\"labelTemplate\"></ng-container>\n}\n<div class=\"daff-form-field__wrapper\">\n\t<div class=\"daff-form-field__control\">\n\t\t@if (_prefix) {\n\t\t\t<ng-content select=\"[daffPrefix]\"></ng-content>\n\t\t}\n\t\t<div class=\"daff-form-field__inner\">\n\t\t\t@if (!isFixed) {\n\t\t\t\t<ng-container *ngTemplateOutlet=\"labelTemplate\"></ng-container>\n\t\t\t}\n\t\t\t<ng-content></ng-content>\n\t\t</div>\n\t\t@if (isSelectField) {\n\t\t\t<div class=\"daff-form-field__icon\"></div>\n\t\t}\n\t\t@if (_suffix) {\n\t\t\t<ng-content select=\"[daffSuffix]\"></ng-content>\n\t\t}\n\t\t@if (_action && !isFixed) {\n\t\t\t<ng-container *ngTemplateOutlet=\"actionTemplate\"></ng-container>\n\t\t}\n\t</div>\n\t@if ((_action && isFixed)) {\n\t\t<ng-container *ngTemplateOutlet=\"actionTemplate\"></ng-container>\n\t}\n</div>\n@if (hasHint()) {\n\t<div\n\t\tclass=\"daff-form-field__hint-wrapper\"\n\t\t[id]=\"hintId\">\n\t\t<ng-content select=\"daff-hint\"></ng-content>\n\t</div>\n}\n@if (hasErrorMessage()) {\n\t<div\n\t\tclass=\"daff-form-field__error-wrapper\"\n\t\t[id]=\"errorMessageId\">\n\t\t<ng-content select=\"daff-error-message\"></ng-content>\n\t</div>\n}\n\n<ng-template #actionTemplate>\n\t<ng-content select=\"[daffFormFieldAction]\"></ng-content>\n</ng-template>\n\n<ng-template #labelTemplate>\n  @if (_formLabelDirective) {\n    <ng-content select=\"label[daffFormLabel]\"></ng-content>\n  } @else if(_formFieldLabelDirective) {\n    <label class=\"daff-form-field__label\"\n      [attr.for]=\"autoLabelId\"\n      [attr.id]=\"customId\">\n      <ng-content select=\"daff-form-label\"></ng-content>\n    </label>\n  } @else {\n    <ng-content select=\"label\"></ng-content>\n  }\n</ng-template>", styles: [".daff-form-field{display:flex;flex-direction:column;gap:.25rem;position:relative}.daff-form-field.has-prefix .daff-form-field__control{padding-left:0}.daff-form-field.has-suffix .daff-form-field__control{padding-right:0}.daff-form-field__hint-wrapper,.daff-form-field__error-wrapper{display:flex;flex-direction:column;gap:.25rem}.daff-form-field__wrapper{display:flex;gap:.25rem}.daff-form-field__control{display:flex;align-items:center;border-radius:.25rem;font-size:1rem;line-height:1rem;padding:0 1rem;position:relative;width:100%}.daff-form-field__control+.daff-hint,.daff-form-field__control+.daff-error-message{margin-top:.5rem}.daff-form-field.fixed input,.daff-form-field.fixed textarea,.daff-form-field.fixed select{font-size:1rem;line-height:1.5rem;padding:calc(.75rem - 1px) 0}.daff-form-field.fixed input * ::-webkit-input-placeholder,.daff-form-field.fixed textarea * ::-webkit-input-placeholder,.daff-form-field.fixed select * ::-webkit-input-placeholder{opacity:1}.daff-form-field.fluid .daff-form-field__control * ::-webkit-input-placeholder{opacity:0}.daff-form-field.fluid .daff-form-field-action{margin-right:.25rem}.daff-form-field.fluid input,.daff-form-field.fluid textarea,.daff-form-field.fluid select{font-size:1rem;line-height:1.5rem;padding:1rem 0}.daff-form-field.fluid label,.daff-form-field.fluid .daff-form-label,.daff-form-field.fluid .daff-form-field__label{position:absolute;left:0;top:1.25rem;pointer-events:none;transform-origin:left top;transition:transform .15s;overflow:hidden;white-space:nowrap}.daff-form-field.fluid label+input,.daff-form-field.fluid label+textarea,.daff-form-field.fluid label+select,.daff-form-field.fluid .daff-form-label+input,.daff-form-field.fluid .daff-form-label+textarea,.daff-form-field.fluid .daff-form-label+select,.daff-form-field.fluid .daff-form-field__label+input,.daff-form-field.fluid .daff-form-field__label+textarea,.daff-form-field.fluid .daff-form-field__label+select{padding:calc(1.5rem - 1px) 0 calc(.5rem - 1px)}.daff-form-field.fluid.daff-raised label,.daff-form-field.fluid.daff-raised .daff-form-label,.daff-form-field.fluid.daff-raised .daff-form-field__label{transform:translateY(-75%) scale(.75)}.daff-form-field.fluid.daff-raised * ::-webkit-input-placeholder{opacity:1}.daff-form-field.fluid .daff-prefix,.daff-form-field.fluid .daff-suffix{height:3rem;min-width:3rem}.daff-form-field.daff-disabled{cursor:not-allowed;opacity:.5}.daff-form-field__icon{content:\"\";position:absolute;top:48%;right:1rem;display:inline-block;border-right:2px solid currentColor;border-bottom:2px solid currentColor;width:.5rem;height:.5rem;transform:translateY(-50%) rotate(45deg);transition:transform .15s}.daff-form-field__inner{flex-grow:1;position:relative;overflow:hidden}.daff-form-field .daff-prefix,.daff-form-field .daff-suffix{display:flex;align-items:center;justify-content:center;appearance:none;background:none;border:none;height:calc(3rem - 2px);min-width:calc(3rem - 2px)}.daff-form-field.daff-skeleton{display:flex;position:relative;height:3.5rem;width:100%;border-radius:.25rem}.daff-form-field.daff-skeleton:before{animation-name:loading;animation-duration:1s;animation-timing-function:linear;animation-iteration-count:infinite;animation-direction:alternate;content:\"\";height:3.5rem;width:100%;position:absolute;top:0;left:0}@keyframes loading{0%{opacity:.5}to{opacity:1}}.daff-form-field.daff-skeleton>*{visibility:hidden}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { class: [{
                 type: HostBinding,
                 args: ['class.daff-form-field']
             }], _prefix: [{
                 type: ContentChild,
                 args: [DaffPrefixDirective]
+            }], hasPrefixClass: [{
+                type: HostBinding,
+                args: ['class.has-prefix']
             }], _suffix: [{
                 type: ContentChild,
                 args: [DaffSuffixDirective]
+            }], hasSuffixClass: [{
+                type: HostBinding,
+                args: ['class.has-suffix']
             }], _control: [{
                 type: ContentChild,
                 args: [DaffFormFieldControl]
@@ -455,6 +538,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImpo
             }], _formFieldLabelDirective: [{
                 type: ContentChild,
                 args: [DaffFormFieldLabelDirective]
+            }], _action: [{
+                type: ContentChild,
+                args: [DaffFormFieldActionDirective]
             }], _hint: [{
                 type: ContentChild,
                 args: [DaffHintComponent]
@@ -476,6 +562,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImpo
             }], raisedClass: [{
                 type: HostBinding,
                 args: ['class.daff-raised']
+            }], appearance: [{
+                type: Input
+            }], fluidClass: [{
+                type: HostBinding,
+                args: ['class.fluid']
+            }], fixedClass: [{
+                type: HostBinding,
+                args: ['class.fixed']
             }], id: [{
                 type: Input
             }] } });
@@ -561,6 +655,7 @@ const DAFF_FORM_FIELD_COMPONENTS = [
     DaffPrefixDirective,
     DaffSuffixDirective,
     DaffFormFieldLabelDirective,
+    DaffFormFieldActionDirective,
 ];
 
 class DaffNativeSelectComponent extends DaffFormFieldControl {
@@ -1332,8 +1427,10 @@ var DaffPaletteEnum;
 
 const colorInPalette = (color) => Object.values(DaffPaletteEnum).includes(color);
 const validateColor = (color) => {
-    if (color !== undefined && !colorInPalette(color)) {
-        console.warn(color + ' is not a valid color in DaffPalette');
+    if (isDevMode()) {
+        if (color !== undefined && !colorInPalette(color)) {
+            console.warn(color + ' is not a valid color in DaffPalette');
+        }
     }
 };
 /**
@@ -1507,6 +1604,15 @@ var DaffStatusEnum;
     DaffStatusEnum["Success"] = "success";
 })(DaffStatusEnum || (DaffStatusEnum = {}));
 
+const statusValues = (status) => Object.values(DaffStatusEnum).includes(status);
+const validateStatus = (status) => {
+    if (isDevMode()) {
+        if (status !== undefined && !statusValues(status)) {
+            console.warn(`'${status}' is not a valid value of the status property.\n\n` +
+                `The available values are: info, warn, critical, or success.`);
+        }
+    }
+};
 /**
  * `DaffStatusableDirective` allows a component to conditionally apply status-specific
  * styles by setting CSS classes based on the specified status. This directive is useful
@@ -1563,14 +1669,30 @@ class DaffStatusableDirective {
             'daff-success': this.status === DaffStatusEnum.Success,
         };
     }
+    /**
+     * @docs-private
+     */
+    ngOnChanges(changes) {
+        if (!changes.status.currentValue) {
+            this.status = this.defaultStatus;
+        }
+    }
+    /**
+     * @docs-private
+     */
+    ngOnInit() {
+        validateStatus(this.status);
+        if (this.status !== this.defaultStatus && this.defaultStatus) {
+            this.status = this.defaultStatus;
+        }
+    }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: DaffStatusableDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.11", type: DaffStatusableDirective, isStandalone: true, selector: "[daffStatusable]", inputs: { status: "status" }, host: { properties: { "class": "this.class" } }, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.11", type: DaffStatusableDirective, isStandalone: true, selector: "[daffStatusable]", inputs: { status: "status" }, host: { properties: { "class": "this.class" } }, usesOnChanges: true, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: DaffStatusableDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[daffStatusable]',
-                    standalone: true,
                 }]
         }], propDecorators: { class: [{
                 type: HostBinding,
@@ -1588,8 +1710,10 @@ var DaffTextAlignmentEnum;
 
 const textAlignmentValues = (textAlignment) => Object.values(DaffTextAlignmentEnum).includes(textAlignment);
 const validateTextAlignment = (textAlignment) => {
-    if (textAlignment !== undefined && !textAlignmentValues(textAlignment)) {
-        console.warn(`'${textAlignment}' is not a valid value of the textAlignment property. The available values are: left, center, or right.`);
+    if (isDevMode()) {
+        if (textAlignment !== undefined && !textAlignmentValues(textAlignment)) {
+            console.warn(`'${textAlignment}' is not a valid value of the textAlignment property. The available values are: left, center, or right.`);
+        }
     }
 };
 /**
@@ -2473,5 +2597,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { DAFF_FORM_FIELD_COMPONENTS, DAFF_THEME_INITIALIZER, DaffArticleEncapsulatedDirective, DaffBreakpoints, DaffCheckboxComponent, DaffCheckboxControlValueAccessorDirective, DaffCheckboxModule, DaffCheckboxSetComponent, DaffColorableDirective, DaffCompactableDirective, DaffErrorMessageComponent, DaffErrorMessageModule, DaffErrorStateMatcher, DaffFocusStackService, DaffFormFieldComponent, DaffFormFieldControl, DaffFormFieldLabelDirective, DaffFormFieldModule, DaffFormLabelDirective, DaffFormLabelModule, DaffHintComponent, DaffManageContainerLayoutDirective, DaffNativeSelectComponent, DaffNativeSelectModule, DaffOpenableDirective, DaffPrefixDirective, DaffPrefixSuffixModule, DaffRadioComponent, DaffRadioControlValueAccessorDirective, DaffRadioModule, DaffRadioSetComponent, DaffSelectableDirective, DaffSizableDirective, DaffSizableEnum, DaffSkeletonableDirective, DaffStatusEnum, DaffStatusableDirective, DaffSuffixDirective, DaffTextAlignableDirective, DaffTextAlignmentEnum, DaffTheme, DaffThemingService, NoopBreakpointObserver, SERVER_SAFE_BREAKPOINT_OBSERVER, daffFocusableElementsSelector };
+export { DAFF_FORM_FIELD_COMPONENTS, DAFF_THEME_INITIALIZER, DaffArticleEncapsulatedDirective, DaffBreakpoints, DaffCheckboxComponent, DaffCheckboxControlValueAccessorDirective, DaffCheckboxModule, DaffCheckboxSetComponent, DaffColorableDirective, DaffCompactableDirective, DaffErrorMessageComponent, DaffErrorMessageModule, DaffErrorStateMatcher, DaffFocusStackService, DaffFormFieldActionDirective, DaffFormFieldComponent, DaffFormFieldControl, DaffFormFieldLabelDirective, DaffFormFieldModule, DaffFormLabelDirective, DaffFormLabelModule, DaffHintComponent, DaffManageContainerLayoutDirective, DaffNativeSelectComponent, DaffNativeSelectModule, DaffOpenableDirective, DaffPrefixDirective, DaffPrefixSuffixModule, DaffRadioComponent, DaffRadioControlValueAccessorDirective, DaffRadioModule, DaffRadioSetComponent, DaffSelectableDirective, DaffSizableDirective, DaffSizableEnum, DaffSkeletonableDirective, DaffStatusEnum, DaffStatusableDirective, DaffSuffixDirective, DaffTextAlignableDirective, DaffTextAlignmentEnum, DaffTheme, DaffThemingService, NoopBreakpointObserver, SERVER_SAFE_BREAKPOINT_OBSERVER, daffFocusableElementsSelector };
 //# sourceMappingURL=daffodil-design.mjs.map