@design-factory/angular 21.1.0-next.1 → 22.0.0-next.0

package/fesm2022/design-factory-angular-dropdown.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"design-factory-angular-dropdown.mjs","sources":["../../dropdown/dropdown.ts","../../dropdown/dropdown-toggle.ts","../../dropdown/dropdown-item.ts","../../dropdown/design-factory-angular-dropdown.ts"],"sourcesContent":["import { NgTemplateOutlet } from '@angular/common';\nimport {\n  ApplicationRef,\n  booleanAttribute,\n  Component,\n  createComponent,\n  effect,\n  ElementRef,\n  EnvironmentInjector,\n  inject,\n  Injector,\n  input,\n  output,\n  signal,\n  TemplateRef,\n  untracked,\n  viewChild,\n  ViewEncapsulation\n} from '@angular/core';\nimport {\n  AgnosWidgetDirective,\n  AngularWidget,\n  callWidgetFactory,\n  useDirectiveForElement\n} from '@design-factory/angular/internals';\nimport { createDropdown, type DropdownSize, type DropdownWidget } from '@design-factory/core/components/dropdown';\nimport { Placement } from '@design-factory/core/services/positioning';\n\n/**\n * Supported placement values for the dropdown overlay.\n * @since 22.0\n */\nexport type DfDropdownPlacement = Placement;\n\n/**\n * Available dropdown sizes.\n * @since 22.0\n */\nexport type DfDropdownSize = DropdownSize;\n\n@Component({\n  selector: 'df-dropdown-window',\n  imports: [NgTemplateOutlet],\n  encapsulation: ViewEncapsulation.None,\n  template: `<ng-container *ngTemplateOutlet=\"content()\" />`,\n  host: {\n    class: 'df-dropdown',\n    '[class.df-show]': 'this.widget().state.opened()',\n    '[class.df-dropdown-sm]': \"this.widget().state.size() === 'sm'\",\n    '[class.df-dropdown-lg]': \"this.widget().state.size() === 'lg'\"\n  }\n})\n/**\n * Internal host component used to render dropdown content in an overlay container.\n * It wires the menu directive to the host element and projects the dropdown template.\n *\n * @internal\n */\nexport class DfDropdownWindow {\n  readonly injector = inject(Injector);\n  readonly widget = input.required<AngularWidget<DropdownWidget>>();\n  readonly content = input.required<TemplateRef<unknown>>();\n}\n\n/**\n * Dropdown is a component to provide a button combined to a menu with a list of options.\n * @since 22.0\n */\n@Component({\n  selector: 'df-dropdown',\n  styles: [\"@use '@design-factory/components-styles/button';\", \"@use '@design-factory/components-styles/dropdown';\"],\n  encapsulation: ViewEncapsulation.None,\n  template: `\n    <ng-template #dropdownWindow>\n      <ng-content />\n    </ng-template>\n  `\n})\nexport class DfDropdown extends AgnosWidgetDirective<DropdownWidget> {\n  /**\n   * If `true`, the dropdown is open.\n   *\n   * @defaultValue `false`\n   */\n  readonly opened = input(false, { transform: booleanAttribute });\n\n  /**\n   * Event emitted when the open state changes.\n   */\n  readonly openedChange = output<boolean>();\n\n  /**\n   * The dropdown placement relative to its anchor.\n   */\n  readonly placement = input<string | DfDropdownPlacement[]>();\n\n  /**\n   * Visual size configuration for dropdown items.\n   */\n  readonly size = input<DfDropdownSize>();\n\n  /**\n   * Which element should contain the dropdown menu DOM element.\n   * - `'body'`: the menu is appended to `document.body` (useful when the toggle is inside an element that clips\n   *   its content via `overflow` or creates a stacking context).\n   * - `null` (default): the menu is rendered inline, where the dropdown is declared.\n   *\n   * @defaultValue `null`\n   */\n  readonly container = input<'body' | null>(null);\n\n  private readonly dropdownWindow = viewChild.required<TemplateRef<unknown>>('dropdownWindow');\n\n  protected readonly toggleElement = signal<HTMLElement | undefined>(undefined);\n\n  constructor() {\n    const widget = callWidgetFactory(createDropdown, {\n      events: {\n        onOpenedChange: (opened) => this.openedChange.emit(opened)\n      },\n      afterInit: () => {\n        const applicationRef = inject(ApplicationRef);\n        const injector = inject(Injector);\n        const environmentInjector = inject(EnvironmentInjector);\n        const elementRef = inject<ElementRef<HTMLElement>>(ElementRef);\n        useDirectiveForElement(this.toggleElement, this.directives.anchorDirective, injector);\n        useDirectiveForElement(elementRef, this.directives.dropdownDirective, injector);\n        effect((onCleanup) => {\n          if (widget.state.opened()) {\n            const container = this.container();\n            untracked(() => {\n              const parent = container === 'body' ? document.body : elementRef.nativeElement;\n              const hostElement = parent.appendChild(document.createElement('df-dropdown-window'));\n              const dropdownWindow = createComponent(DfDropdownWindow, {\n                hostElement,\n                elementInjector: injector,\n                environmentInjector\n              });\n              useDirectiveForElement(\n                dropdownWindow.location.nativeElement,\n                this.directives.menuDirective,\n                dropdownWindow.injector\n              );\n              dropdownWindow.setInput('widget', widget);\n              dropdownWindow.setInput('content', this.dropdownWindow());\n              applicationRef.attachView(dropdownWindow.hostView);\n              dropdownWindow.changeDetectorRef.detectChanges();\n              onCleanup(() => {\n                applicationRef.detachView(dropdownWindow.hostView);\n                dropdownWindow.destroy();\n                hostElement.remove();\n              });\n            });\n          }\n        });\n      }\n    });\n\n    super(widget);\n  }\n\n  /**\n   * Toggles the dropdown menu visibility programmatically.\n   *\n   * @param open - Optional explicit open state. When omitted, the current state is toggled.\n   */\n  public toggle(open?: boolean): void {\n    this.api.toggle(open);\n  }\n\n  /**\n   * Opens the dropdown menu programmatically.\n   */\n  public open(): void {\n    this.api.open();\n  }\n\n  /**\n   * Closes the dropdown menu programmatically.\n   */\n  public close(): void {\n    this.api.close();\n  }\n\n  /**\n   * Get whether the dropdown menu is currently open.\n   */\n  public isOpen(): boolean {\n    return this.state.opened();\n  }\n}\n","/* eslint-disable @angular-eslint/component-selector */\nimport { booleanAttribute, Component, effect, ElementRef, inject, input } from '@angular/core';\nimport { ɵDfButtonHost, ɵDfButtonVisual } from '@design-factory/angular/button';\nimport { DfIcon } from '@design-factory/angular/icon';\nimport { DfDropdown } from './dropdown';\n\n/**\n * Component representing the toggle button of a dropdown, which is used to toggle the visibility of the dropdown menu.\n * @since 22.0\n */\n@Component({\n  selector: 'button[dfDropdownToggle]',\n  imports: [DfIcon],\n  template: `\n    <ng-content />\n    @if (!iconOnly()) {\n      <df-icon\n        class=\"fa-light\"\n        [class.fa-chevron-down]=\"!dropdown().isOpen()\"\n        [class.fa-chevron-up]=\"dropdown().isOpen()\"\n      />\n    }\n  `,\n  hostDirectives: [\n    {\n      directive: ɵDfButtonVisual,\n      inputs: ['variant', 'appearance', 'size', 'transparent', 'mirror']\n    },\n    {\n      directive: ɵDfButtonHost,\n      inputs: ['disabled']\n    }\n  ],\n  host: {\n    class: 'df-dropdown-toggle',\n    '[class.df-show]': 'dropdown().isOpen()',\n    '[class.df-btn-icononly]': 'iconOnly()'\n  }\n})\nexport class DfDropdownToggle {\n  /**\n   * The dropdown instance controlled by this toggle element.\n   *\n   * Pass the referenced {@link DfDropdown} instance to connect the host button to its menu.\n   */\n  readonly dropdown = input.required<DfDropdown>({ alias: 'dfDropdownToggle' });\n\n  /**\n   * When true, hides the chevron icon for icon-only dropdown buttons.\n   *\n   * **Accessibility:** When using `iconOnly`, you must provide an `aria-label` attribute on the button element.\n   *\n   * @example\n   * ```html\n   * <button [dfDropdownToggle]=\"menu\" iconOnly aria-label=\"More options\">\n   *   <df-icon class=\"fa-light fa-ellipsis-v\" />\n   * </button>\n   * ```\n   */\n  readonly iconOnly = input(false, { transform: booleanAttribute });\n\n  constructor() {\n    const element = inject<ElementRef<HTMLElement>>(ElementRef).nativeElement;\n    effect(() => {\n      this.dropdown()['toggleElement'].set(element);\n    });\n  }\n}\n","import { booleanAttribute, DestroyRef, Directive, ElementRef, inject, input } from '@angular/core';\n\n/**\n * Directive representing a button in the dropdown menu.\n * @since 22.0\n */\n@Directive({\n  selector: 'button[dfDropdownItem]',\n  host: {\n    class: 'df-dropdown-item',\n    '[class.df-active]': 'active()',\n    '[disabled]': 'disabled() || null'\n  }\n})\nexport class DfDropdownItemButton {\n  /**\n   * Whether the dropdown item is displayed in its active state.\n   */\n  readonly active = input(false, { transform: booleanAttribute });\n\n  /**\n   * Whether the dropdown item is disabled.\n   */\n  readonly disabled = input(false, { transform: booleanAttribute });\n}\n\n/**\n * Directive representing a link in the dropdown menu.\n * @since 22.0\n */\n@Directive({\n  selector: 'a[dfDropdownItem]',\n  host: {\n    class: 'df-dropdown-item',\n    '[class.df-active]': 'active()',\n    '[attr.aria-disabled]': 'disabled() ? \"true\" : null',\n    '[attr.tabindex]': 'disabled() ? \"-1\" : null',\n    '(keydown)': 'onKeydown($event)'\n  }\n})\nexport class DfDropdownItemLink {\n  readonly #hostEl = inject<ElementRef<HTMLAnchorElement>>(ElementRef).nativeElement;\n\n  /**\n   * Whether the dropdown item is displayed in its active state.\n   */\n  readonly active = input(false, { transform: booleanAttribute });\n\n  /**\n   * Whether the dropdown item is disabled.\n   */\n  readonly disabled = input(false, { transform: booleanAttribute });\n\n  constructor() {\n    // Angular host listener metadata does not expose capture-phase options. Use a native listener so a\n    // disabled link can block clicks before RouterLink or other bubble-phase handlers navigate.\n    const destroyRef = inject(DestroyRef);\n    const onClickCapture = (event: Event) => {\n      if (this.disabled()) {\n        event.preventDefault();\n        event.stopImmediatePropagation();\n      }\n    };\n    this.#hostEl.addEventListener('click', onClickCapture, { capture: true });\n    destroyRef.onDestroy(() => this.#hostEl.removeEventListener('click', onClickCapture, { capture: true }));\n  }\n\n  protected onKeydown(event: KeyboardEvent) {\n    if (this.disabled() && (event.key === 'Enter' || event.key === ' ' || event.key === 'Spacebar')) {\n      event.preventDefault();\n      event.stopImmediatePropagation();\n    }\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":["ɵDfButtonVisual","ɵDfButtonHost"],"mappings":"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"}

package/fesm2022/design-factory-angular-form-field.mjs

@@ -0,0 +1,287 @@
+import * as i0 from '@angular/core';
+import { input, inject, booleanAttribute, computed, signal, Directive, ViewEncapsulation, Component, contentChild, contentChildren, effect } from '@angular/core';
+import { NgControl } from '@angular/forms';
+import { generateId } from '@design-factory/core/utils/id';
+import { DfIcon } from '@design-factory/angular/icon';
+
+/* eslint-enable @typescript-eslint/no-unused-vars */
+/**
+ * The form field control directive, used to mark an element as a control that can be associated with a {@link DfFormField}.
+ *
+ * @experimental 22.0
+ */
+class DfFormFieldControl {
+    constructor() {
+        /**
+         * The ID of the form control element.
+         *
+         * @defaultValue 'dfId-[number]'
+         */
+        this.id = input(generateId(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
+        /** Gets the NgControl for this control. */
+        this.ngControl = inject(NgControl, { optional: true, self: true });
+        // eslint-disable-next-line @angular-eslint/no-input-rename
+        this.requiredOverride = input(undefined, { ...(ngDevMode ? { debugName: "requiredOverride" } : /* istanbul ignore next */ {}), transform: booleanAttribute, alias: 'required' });
+        this.required = computed(() => this.requiredOverride() ?? this.ngControl?.['isRequired'] ?? false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []));
+        /**
+         * The list of element IDs that currently describe this control.
+         *
+         * It includes the IDs of the associated form field hints and error message elements. The form field will use this list to populate the `aria-describedby` attribute on the control.
+         */
+        this.describedByIds = signal([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "describedByIds" }] : /* istanbul ignore next */ []));
+        /**
+         * Determines whether the control is invalid and has been touched.
+         *
+         * This is used to determine when to display error messages and apply error styles.
+         */
+        this.touchedInvalid = computed(() => {
+            const control = this.ngControl?.control;
+            if (!control) {
+                return false;
+            }
+            return ((control['touchedReactive']?.() ?? control.touched) &&
+                (control['statusReactive']?.() ?? control.status) === 'INVALID');
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "touchedInvalid" }] : /* istanbul ignore next */ []));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: DfFormFieldControl, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.4", type: DfFormFieldControl, isStandalone: true, inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, requiredOverride: { classPropertyName: "requiredOverride", publicName: "required", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: DfFormFieldControl, decorators: [{
+            type: Directive
+        }], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], requiredOverride: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }] } });
+
+/**
+ * The label component, used to define the label of a {@link DfFormField} component.
+ *
+ * @experimental 22.0
+ */
+class DfLabel {
+    constructor() {
+        /**
+         * Whether to hide the mandatory indicator (asterisk) for required form fields. By default, the mandatory indicator is shown for required form fields.
+         */
+        this.noRequiredIndicator = input(false, { ...(ngDevMode ? { debugName: "noRequiredIndicator" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /**
+         * Ensures at compile time that the label is used within a form field component.
+         */
+        // eslint-disable-next-line no-unused-private-class-members
+        this.#formField = inject(DfFormField);
+    }
+    /**
+     * Ensures at compile time that the label is used within a form field component.
+     */
+    // eslint-disable-next-line no-unused-private-class-members
+    #formField;
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: DfLabel, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.4", type: DfLabel, isStandalone: true, selector: "df-label", inputs: { noRequiredIndicator: { classPropertyName: "noRequiredIndicator", publicName: "noRequiredIndicator", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: ` <ng-content /> `, isInline: true, styles: [".df-label{display:inline-block;margin-bottom:var(--df-spacing-3);font-size:var(--df-typo-sizing-default)}.df-form-sm .df-label{font-size:var(--df-typo-sizing-small)}.df-form-lg .df-label{font-size:var(--df-typo-sizing-large)}.df-form-field-sm .df-label{font-size:var(--df-typo-sizing-small)}.df-form-field-lg .df-label{font-size:var(--df-typo-sizing-large)}\n"], encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: DfLabel, decorators: [{
+            type: Component,
+            args: [{ selector: 'df-label', template: ` <ng-content /> `, encapsulation: ViewEncapsulation.None, styles: [".df-label{display:inline-block;margin-bottom:var(--df-spacing-3);font-size:var(--df-typo-sizing-default)}.df-form-sm .df-label{font-size:var(--df-typo-sizing-small)}.df-form-lg .df-label{font-size:var(--df-typo-sizing-large)}.df-form-field-sm .df-label{font-size:var(--df-typo-sizing-small)}.df-form-field-lg .df-label{font-size:var(--df-typo-sizing-large)}\n"] }]
+        }], propDecorators: { noRequiredIndicator: [{ type: i0.Input, args: [{ isSignal: true, alias: "noRequiredIndicator", required: false }] }] } });
+
+/**
+ * The form field error message component, used to display an error message inside of a {@link DfFormField} component.
+ *
+ * It can be associated with specific error codes of the form control, or it can be displayed for any error if no error codes are specified.
+ *
+ * @experimental 22.0
+ */
+class DfError {
+    constructor() {
+        /**
+         * The ID of the error message element.
+         *
+         * @defaultValue 'dfId-[number]'
+         */
+        this.id = input(generateId(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
+        /**
+         * The list of error codes that this error message corresponds to. If not provided, the error message will be displayed for any error.
+         */
+        this.on = input([], { ...(ngDevMode ? { debugName: "on" } : /* istanbul ignore next */ {}), transform: (value) => (Array.isArray(value) ? value : String(value).split(' ')) });
+        this.formField = inject(DfFormField);
+        /**
+         * Determines whether the error message should be displayed.
+         *
+         * The error message is always displayed if no error codes are specified or if the form control is not found.
+         * Otherwise, it is displayed only if the form control is invalid, touched, and has at least one of the specified error codes.
+         */
+        this.showError = computed(() => {
+            const errorCodes = this.on();
+            if (!errorCodes.length) {
+                return true;
+            }
+            const fieldControl = this.formField['fieldControl']();
+            const control = fieldControl['ngControl']?.control;
+            if (!control) {
+                return true;
+            }
+            const touched = control['touchedReactive']?.() ?? control.touched;
+            const status = control['statusReactive']?.() ?? control.status;
+            if (!touched || status !== 'INVALID') {
+                return false;
+            }
+            const errors = control.errors ?? {};
+            return errorCodes.some((code) => !!errors[code]);
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "showError" }] : /* istanbul ignore next */ []));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: DfError, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", type: DfError, isStandalone: true, selector: "df-error", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, on: { classPropertyName: "on", publicName: "on", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.id": "null" } }, ngImport: i0, template: `
+    @if (showError()) {
+      <div class="df-error" [attr.id]="id()"><df-icon class="fal fa-circle-minus df-error-icon" /><ng-content /></div>
+    }
+  `, isInline: true, dependencies: [{ kind: "component", type: DfIcon, selector: "df-icon" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: DfError, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'df-error',
+                    host: {
+                        '[attr.id]': 'null'
+                    },
+                    imports: [DfIcon],
+                    template: `
+    @if (showError()) {
+      <div class="df-error" [attr.id]="id()"><df-icon class="fal fa-circle-minus df-error-icon" /><ng-content /></div>
+    }
+  `
+                }]
+        }], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], on: [{ type: i0.Input, args: [{ isSignal: true, alias: "on", required: false }] }] } });
+
+/**
+ * The form field hint component, used to display a hint inside of a {@link DfFormField} component.
+ *
+ * @experimental 22.0
+ */
+class DfHint {
+    constructor() {
+        /**
+         * The ID of the hint element.
+         *
+         * @defaultValue 'dfId-[number]'
+         */
+        this.id = input(generateId(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
+        /**
+         * Ensures at compile time that the label is used within a form field component.
+         */
+        // eslint-disable-next-line no-unused-private-class-members
+        this.#formField = inject(DfFormField);
+    }
+    /**
+     * Ensures at compile time that the label is used within a form field component.
+     */
+    // eslint-disable-next-line no-unused-private-class-members
+    #formField;
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: DfHint, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.4", type: DfHint, isStandalone: true, selector: "df-hint", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.id": "id()" }, classAttribute: "df-hint" }, ngImport: i0, template: `<ng-content />`, isInline: true }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: DfHint, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'df-hint',
+                    host: {
+                        class: 'df-hint',
+                        '[attr.id]': 'id()'
+                    },
+                    template: `<ng-content />`
+                }]
+        }], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }] } });
+
+/**
+ * The form field component, used to wrap a form field control and its associated label, hints, and error messages.
+ *
+ * It accepts the following content:
+ * - `df-label`: to define the label of the form field through a {@link DfLabel} component. The label is optional but recommended for accessibility reasons.
+ * - `df-hint`: to define a hint for the form field control through a {@link DfHint} component. Multiple hints can be provided.
+ * - `df-error`: to define an error message for the form field control through a {@link DfError} component. Multiple error messages can be provided.
+ * - Any form field control component (e.g., `df-input`, `df-select`, etc.) that implements the {@link DfFormFieldControl} interface.
+ *
+ * The form field component is responsible for associating the label, hints, and error messages with the form field control using ARIA attributes.
+ *
+ * @experimental 22.0
+ */
+class DfFormField {
+    constructor() {
+        this.fieldControl = contentChild.required(DfFormFieldControl);
+        this.label = contentChild(DfLabel, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+        this.errors = contentChildren(DfError, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "errors" }] : /* istanbul ignore next */ []));
+        this.hints = contentChildren(DfHint, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "hints" }] : /* istanbul ignore next */ []));
+        this.showMandatoryIndicator = computed(() => {
+            const label = this.label();
+            if (!label) {
+                return false;
+            }
+            return !label.noRequiredIndicator() && this.fieldControl().required();
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "showMandatoryIndicator" }] : /* istanbul ignore next */ []));
+        effect(() => {
+            this.fieldControl().describedByIds.set([
+                ...this.errors()
+                    .filter((error) => error['showError']())
+                    .map((error) => error.id()),
+                ...this.hints().map((hint) => hint.id())
+            ]);
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: DfFormField, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", type: DfFormField, isStandalone: true, selector: "df-form-field", host: { classAttribute: "df-form-field" }, queries: [{ propertyName: "fieldControl", first: true, predicate: DfFormFieldControl, descendants: true, isSignal: true }, { propertyName: "label", first: true, predicate: DfLabel, descendants: true, isSignal: true }, { propertyName: "errors", predicate: DfError, isSignal: true }, { propertyName: "hints", predicate: DfHint, isSignal: true }], ngImport: i0, template: `
+    @if (label()) {
+      <label class="df-label" [for]="fieldControl().id()">
+        <ng-content select="df-label" />
+        @if (showMandatoryIndicator()) {
+          <span class="df-form-label-mandatory-indicator" aria-hidden="true">*</span>
+        }
+      </label>
+    }
+    <ng-content />
+    <div aria-atomic="true" aria-live="polite">
+      <ng-content select="df-error" />
+      @if (hints().length) {
+        <div class="df-form-field-hints">
+          <ng-content select="df-hint" />
+        </div>
+      }
+    </div>
+  `, isInline: true, styles: [".df-error{margin-top:var(--df-spacing-3);font-size:var(--df-typo-sizing-small);color:var(--df-color-danger-alt-default-foreground)}.df-error .df-error-icon{display:inline-block;margin-inline-end:var(--df-spacing-2)}.df-form-field-hints{margin-top:var(--df-spacing-3)}.df-hint{display:block;font-size:var(--df-typo-sizing-small);color:var(--df-color-subtext-foreground)}.df-form-sm .df-error{font-size:var(--df-typo-sizing-xsmall)}.df-form-lg .df-error{font-size:var(--df-typo-sizing-default)}.df-form-sm .df-hint{font-size:var(--df-typo-sizing-xsmall)}.df-form-lg .df-hint{font-size:var(--df-typo-sizing-default)}.df-form-label-mandatory-indicator{color:var(--df-color-danger-alt-default-foreground);font-weight:var(--df-typo-weight-regular);margin-inline:var(--df-spacing-1)}\n"], encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: DfFormField, decorators: [{
+            type: Component,
+            args: [{ selector: 'df-form-field', host: {
+                        class: 'df-form-field'
+                    }, template: `
+    @if (label()) {
+      <label class="df-label" [for]="fieldControl().id()">
+        <ng-content select="df-label" />
+        @if (showMandatoryIndicator()) {
+          <span class="df-form-label-mandatory-indicator" aria-hidden="true">*</span>
+        }
+      </label>
+    }
+    <ng-content />
+    <div aria-atomic="true" aria-live="polite">
+      <ng-content select="df-error" />
+      @if (hints().length) {
+        <div class="df-form-field-hints">
+          <ng-content select="df-hint" />
+        </div>
+      }
+    </div>
+  `, encapsulation: ViewEncapsulation.None, styles: [".df-error{margin-top:var(--df-spacing-3);font-size:var(--df-typo-sizing-small);color:var(--df-color-danger-alt-default-foreground)}.df-error .df-error-icon{display:inline-block;margin-inline-end:var(--df-spacing-2)}.df-form-field-hints{margin-top:var(--df-spacing-3)}.df-hint{display:block;font-size:var(--df-typo-sizing-small);color:var(--df-color-subtext-foreground)}.df-form-sm .df-error{font-size:var(--df-typo-sizing-xsmall)}.df-form-lg .df-error{font-size:var(--df-typo-sizing-default)}.df-form-sm .df-hint{font-size:var(--df-typo-sizing-xsmall)}.df-form-lg .df-hint{font-size:var(--df-typo-sizing-default)}.df-form-label-mandatory-indicator{color:var(--df-color-danger-alt-default-foreground);font-weight:var(--df-typo-weight-regular);margin-inline:var(--df-spacing-1)}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { fieldControl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => DfFormFieldControl), { isSignal: true }] }], label: [{ type: i0.ContentChild, args: [i0.forwardRef(() => DfLabel), { isSignal: true }] }], errors: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => DfError), { isSignal: true }] }], hints: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => DfHint), { isSignal: true }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { DfError, DfFormField, DfFormFieldControl, DfHint, DfLabel };
+//# sourceMappingURL=design-factory-angular-form-field.mjs.map

package/fesm2022/design-factory-angular-form-field.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"design-factory-angular-form-field.mjs","sources":["../../form-field/form-field-control.ts","../../form-field/label.ts","../../form-field/error.ts","../../form-field/hint.ts","../../form-field/form-field.ts","../../form-field/design-factory-angular-form-field.ts"],"sourcesContent":["import { booleanAttribute, computed, Directive, inject, input, signal } from '@angular/core';\nimport { NgControl } from '@angular/forms';\nimport { generateId } from '@design-factory/core/utils/id';\n/* eslint-disable @typescript-eslint/no-unused-vars */\nimport type { DfFormField } from './form-field';\n/* eslint-enable @typescript-eslint/no-unused-vars */\n\n/**\n * The form field control directive, used to mark an element as a control that can be associated with a {@link DfFormField}.\n *\n * @experimental 22.0\n */\n@Directive()\nexport abstract class DfFormFieldControl {\n  /**\n   * The ID of the form control element.\n   *\n   * @defaultValue 'dfId-[number]'\n   */\n  readonly id = input(generateId());\n\n  /** Gets the NgControl for this control. */\n  protected readonly ngControl = inject(NgControl, { optional: true, self: true });\n\n  // eslint-disable-next-line @angular-eslint/no-input-rename\n  readonly requiredOverride = input(undefined, { transform: booleanAttribute, alias: 'required' });\n  readonly required = computed(\n    () => this.requiredOverride() ?? (this.ngControl?.['isRequired'] as boolean | undefined) ?? false\n  );\n\n  /**\n   * The list of element IDs that currently describe this control.\n   *\n   * It includes the IDs of the associated form field hints and error message elements. The form field will use this list to populate the `aria-describedby` attribute on the control.\n   */\n  readonly describedByIds = signal<string[]>([]);\n\n  /**\n   * Determines whether the control is invalid and has been touched.\n   *\n   * This is used to determine when to display error messages and apply error styles.\n   */\n  readonly touchedInvalid = computed<boolean>(() => {\n    const control = this.ngControl?.control;\n    if (!control) {\n      return false;\n    }\n    return (\n      (control['touchedReactive']?.() ?? control.touched) &&\n      (control['statusReactive']?.() ?? control.status) === 'INVALID'\n    );\n  });\n}\n","import { booleanAttribute, Component, inject, input, ViewEncapsulation } from '@angular/core';\nimport { DfFormField } from './form-field';\n\n/**\n * The label component, used to define the label of a {@link DfFormField} component.\n *\n * @experimental 22.0\n */\n@Component({\n  selector: 'df-label',\n  template: ` <ng-content /> `,\n  encapsulation: ViewEncapsulation.None,\n  styles: \"@use '@design-factory/components-styles/label';\"\n})\nexport class DfLabel {\n  /**\n   * Whether to hide the mandatory indicator (asterisk) for required form fields. By default, the mandatory indicator is shown for required form fields.\n   */\n  readonly noRequiredIndicator = input(false, { transform: booleanAttribute });\n\n  /**\n   * Ensures at compile time that the label is used within a form field component.\n   */\n  // eslint-disable-next-line no-unused-private-class-members\n  readonly #formField = inject(DfFormField);\n}\n","import { Component, computed, inject, input } from '@angular/core';\nimport { DfIcon } from '@design-factory/angular/icon';\nimport { generateId } from '@design-factory/core/utils/id';\nimport { DfFormField } from './form-field';\n\n/**\n * The form field error message component, used to display an error message inside of a {@link DfFormField} component.\n *\n * It can be associated with specific error codes of the form control, or it can be displayed for any error if no error codes are specified.\n *\n * @experimental 22.0\n */\n@Component({\n  selector: 'df-error',\n  host: {\n    '[attr.id]': 'null'\n  },\n  imports: [DfIcon],\n  template: `\n    @if (showError()) {\n      <div class=\"df-error\" [attr.id]=\"id()\"><df-icon class=\"fal fa-circle-minus df-error-icon\" /><ng-content /></div>\n    }\n  `\n})\nexport class DfError {\n  /**\n   * The ID of the error message element.\n   *\n   * @defaultValue 'dfId-[number]'\n   */\n  readonly id = input(generateId());\n  /**\n   * The list of error codes that this error message corresponds to. If not provided, the error message will be displayed for any error.\n   */\n  readonly on = input([], {\n    transform: (value: unknown) => (Array.isArray(value) ? (value as string[]) : String(value).split(' '))\n  });\n\n  private readonly formField = inject(DfFormField);\n\n  /**\n   * Determines whether the error message should be displayed.\n   *\n   * The error message is always displayed if no error codes are specified or if the form control is not found.\n   * Otherwise, it is displayed only if the form control is invalid, touched, and has at least one of the specified error codes.\n   */\n  protected readonly showError = computed(() => {\n    const errorCodes = this.on();\n    if (!errorCodes.length) {\n      return true;\n    }\n    const fieldControl = this.formField['fieldControl']();\n    const control = fieldControl['ngControl']?.control;\n    if (!control) {\n      return true;\n    }\n    const touched = control['touchedReactive']?.() ?? control.touched;\n    const status = control['statusReactive']?.() ?? control.status;\n    if (!touched || status !== 'INVALID') {\n      return false;\n    }\n    const errors = control.errors ?? {};\n    return errorCodes.some((code) => !!errors[code]);\n  });\n}\n","import { Component, inject, input } from '@angular/core';\nimport { generateId } from '@design-factory/core/utils/id';\nimport { DfFormField } from './form-field';\n\n/**\n * The form field hint component, used to display a hint inside of a {@link DfFormField} component.\n *\n * @experimental 22.0\n */\n@Component({\n  selector: 'df-hint',\n  host: {\n    class: 'df-hint',\n    '[attr.id]': 'id()'\n  },\n  template: `<ng-content />`\n})\nexport class DfHint {\n  /**\n   * The ID of the hint element.\n   *\n   * @defaultValue 'dfId-[number]'\n   */\n  readonly id = input(generateId());\n  /**\n   * Ensures at compile time that the label is used within a form field component.\n   */\n  // eslint-disable-next-line no-unused-private-class-members\n  readonly #formField = inject(DfFormField);\n}\n","import { Component, computed, contentChild, contentChildren, effect, ViewEncapsulation } from '@angular/core';\nimport { DfFormFieldControl } from './form-field-control';\nimport { DfLabel } from './label';\nimport { DfError } from './error';\nimport { DfHint } from './hint';\n\n/**\n * The form field component, used to wrap a form field control and its associated label, hints, and error messages.\n *\n * It accepts the following content:\n * - `df-label`: to define the label of the form field through a {@link DfLabel} component. The label is optional but recommended for accessibility reasons.\n * - `df-hint`: to define a hint for the form field control through a {@link DfHint} component. Multiple hints can be provided.\n * - `df-error`: to define an error message for the form field control through a {@link DfError} component. Multiple error messages can be provided.\n * - Any form field control component (e.g., `df-input`, `df-select`, etc.) that implements the {@link DfFormFieldControl} interface.\n *\n * The form field component is responsible for associating the label, hints, and error messages with the form field control using ARIA attributes.\n *\n * @experimental 22.0\n */\n@Component({\n  selector: 'df-form-field',\n  host: {\n    class: 'df-form-field'\n  },\n  template: `\n    @if (label()) {\n      <label class=\"df-label\" [for]=\"fieldControl().id()\">\n        <ng-content select=\"df-label\" />\n        @if (showMandatoryIndicator()) {\n          <span class=\"df-form-label-mandatory-indicator\" aria-hidden=\"true\">*</span>\n        }\n      </label>\n    }\n    <ng-content />\n    <div aria-atomic=\"true\" aria-live=\"polite\">\n      <ng-content select=\"df-error\" />\n      @if (hints().length) {\n        <div class=\"df-form-field-hints\">\n          <ng-content select=\"df-hint\" />\n        </div>\n      }\n    </div>\n  `,\n  encapsulation: ViewEncapsulation.None,\n  styles: \"@use '@design-factory/components-styles/form-field'\"\n})\nexport class DfFormField {\n  protected readonly fieldControl = contentChild.required(DfFormFieldControl);\n  protected readonly label = contentChild(DfLabel);\n\n  protected readonly errors = contentChildren(DfError);\n  protected readonly hints = contentChildren(DfHint);\n\n  protected readonly showMandatoryIndicator = computed(() => {\n    const label = this.label();\n    if (!label) {\n      return false;\n    }\n    return !label.noRequiredIndicator() && this.fieldControl().required();\n  });\n\n  constructor() {\n    effect(() => {\n      this.fieldControl().describedByIds.set([\n        ...this.errors()\n          .filter((error) => error['showError']())\n          .map((error) => error.id()),\n        ...this.hints().map((hint) => hint.id())\n      ]);\n    });\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/design-factory-angular-icon.mjs

@@ -0,0 +1,24 @@
+import * as i0 from '@angular/core';
+import { ViewEncapsulation, Component } from '@angular/core';
+
+/**
+ * @experimental 22.0
+ */
+class DfIcon {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: DfIcon, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.4", type: DfIcon, isStandalone: true, selector: "df-icon", host: { attributes: { "aria-hidden": "true" }, classAttribute: "df-icon" }, ngImport: i0, template: '', isInline: true, styles: [""], encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: DfIcon, decorators: [{
+            type: Component,
+            args: [{ selector: 'df-icon', encapsulation: ViewEncapsulation.None, host: {
+                        class: 'df-icon',
+                        'aria-hidden': 'true'
+                    }, template: '' }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { DfIcon };
+//# sourceMappingURL=design-factory-angular-icon.mjs.map

package/fesm2022/design-factory-angular-icon.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"design-factory-angular-icon.mjs","sources":["../../icon/icon.ts","../../icon/design-factory-angular-icon.ts"],"sourcesContent":["import { Component, ViewEncapsulation } from '@angular/core';\n\n/**\n * @experimental 22.0\n */\n@Component({\n  selector: 'df-icon',\n  encapsulation: ViewEncapsulation.None,\n  host: {\n    class: 'df-icon',\n    'aria-hidden': 'true'\n  },\n  styles: \"@use '@design-factory/components-styles/icon';\",\n  template: ''\n})\nexport class DfIcon {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;AAEA;;AAEG;MAWU,MAAM,CAAA;8GAAN,MAAM,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAN,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,MAAM,+IAFP,EAAE,EAAA,QAAA,EAAA,IAAA,EAAA,MAAA,EAAA,CAAA,EAAA,CAAA,EAAA,aAAA,EAAA,EAAA,CAAA,iBAAA,CAAA,IAAA,EAAA,CAAA,CAAA;;2FAED,MAAM,EAAA,UAAA,EAAA,CAAA;kBAVlB,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,SAAS,EAAA,aAAA,EACJ,iBAAiB,CAAC,IAAI,EAAA,IAAA,EAC/B;AACJ,wBAAA,KAAK,EAAE,SAAS;AAChB,wBAAA,aAAa,EAAE;AAChB,qBAAA,EAAA,QAAA,EAES,EAAE,EAAA;;;ACbd;;AAEG;;;;"}

package/fesm2022/design-factory-angular-input.mjs

@@ -0,0 +1,34 @@
+import * as i0 from '@angular/core';
+import { ViewEncapsulation, Component } from '@angular/core';
+import { DfFormFieldControl } from '@design-factory/angular/form-field';
+
+/* eslint-enable @typescript-eslint/no-unused-vars */
+/**
+ * The input component, used to create an input field.
+ *
+ * It can be used as a standalone component or as a form field control within a {@link DfFormField} component.
+ *
+ * @since 22.0
+ */
+class DfInput extends DfFormFieldControl {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: DfInput, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.4", type: DfInput, isStandalone: true, selector: "input[dfInput]", host: { properties: { "class.df-input-invalid": "touchedInvalid()", "attr.id": "id()", "attr.aria-describedby": "describedByIds().join(\" \") || null", "attr.aria-required": "required() || null", "attr.aria-invalid": "touchedInvalid() ? \"true\" : null" }, classAttribute: "df-input" }, providers: [{ provide: DfFormFieldControl, useExisting: DfInput }], usesInheritance: true, ngImport: i0, template: '', isInline: true, styles: [".df-input{display:block;width:100%;outline:none;box-shadow:none;padding:.3125rem var(--df-spacing-3);margin:0;font-family:inherit;font-size:var(--df-typo-sizing-default);font-weight:var(--df-typo-weight-regular);line-height:1.5;color:var(--df-color-neutral-alt-default-foreground);appearance:none;background-color:var(--df-color-neutral-alt-default-background);background-clip:padding-box;border:1px solid var(--df-color-input-border);border-radius:var(--df-borderRadius-main-medium);--df-box-shadow-color: var(--df-color-input-border);transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out}@media(prefers-reduced-motion:reduce){.df-input{transition:none}}.df-input:disabled{cursor:not-allowed}.df-input:disabled::placeholder{color:var(--df-color-disabled-main-foreground)}.df-input::placeholder{font-style:var(--df-typo-style-italic)}.df-input[readonly]{background-color:var(--df-color-disabled-main-background);opacity:1}.df-input.df-input-invalid{border-color:var(--df-color-danger-main-default-border);--df-box-shadow-color: var(--df-color-danger-main-default-border)}.df-input:focus-visible{box-shadow:0 0 0 2px var(--df-color-neutral-alt-default-background),0 0 0 4px var(--df-box-shadow-color)}.df-form-sm .df-input{font-size:var(--df-typo-sizing-small);border-radius:var(--df-borderRadius-main-small);min-height:1.875rem;padding:.21875rem var(--df-spacing-3)}.df-form-lg .df-input{font-size:var(--df-typo-sizing-large);border-radius:var(--df-borderRadius-main-large);min-height:3rem;padding:.59375rem var(--df-spacing-3)}\n"], encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: DfInput, decorators: [{
+            type: Component,
+            args: [{ selector: 'input[dfInput]', encapsulation: ViewEncapsulation.None, host: {
+                        class: 'df-input',
+                        '[class.df-input-invalid]': 'touchedInvalid()',
+                        '[attr.id]': 'id()',
+                        '[attr.aria-describedby]': 'describedByIds().join(" ") || null',
+                        '[attr.aria-required]': 'required() || null',
+                        '[attr.aria-invalid]': 'touchedInvalid() ? "true" : null'
+                    }, template: '', providers: [{ provide: DfFormFieldControl, useExisting: DfInput }], styles: [".df-input{display:block;width:100%;outline:none;box-shadow:none;padding:.3125rem var(--df-spacing-3);margin:0;font-family:inherit;font-size:var(--df-typo-sizing-default);font-weight:var(--df-typo-weight-regular);line-height:1.5;color:var(--df-color-neutral-alt-default-foreground);appearance:none;background-color:var(--df-color-neutral-alt-default-background);background-clip:padding-box;border:1px solid var(--df-color-input-border);border-radius:var(--df-borderRadius-main-medium);--df-box-shadow-color: var(--df-color-input-border);transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out}@media(prefers-reduced-motion:reduce){.df-input{transition:none}}.df-input:disabled{cursor:not-allowed}.df-input:disabled::placeholder{color:var(--df-color-disabled-main-foreground)}.df-input::placeholder{font-style:var(--df-typo-style-italic)}.df-input[readonly]{background-color:var(--df-color-disabled-main-background);opacity:1}.df-input.df-input-invalid{border-color:var(--df-color-danger-main-default-border);--df-box-shadow-color: var(--df-color-danger-main-default-border)}.df-input:focus-visible{box-shadow:0 0 0 2px var(--df-color-neutral-alt-default-background),0 0 0 4px var(--df-box-shadow-color)}.df-form-sm .df-input{font-size:var(--df-typo-sizing-small);border-radius:var(--df-borderRadius-main-small);min-height:1.875rem;padding:.21875rem var(--df-spacing-3)}.df-form-lg .df-input{font-size:var(--df-typo-sizing-large);border-radius:var(--df-borderRadius-main-large);min-height:3rem;padding:.59375rem var(--df-spacing-3)}\n"] }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { DfInput };
+//# sourceMappingURL=design-factory-angular-input.mjs.map

package/fesm2022/design-factory-angular-input.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"design-factory-angular-input.mjs","sources":["../../input/input.ts","../../input/design-factory-angular-input.ts"],"sourcesContent":["import { Component, ViewEncapsulation } from '@angular/core';\nimport { DfFormFieldControl } from '@design-factory/angular/form-field';\n/* eslint-disable @typescript-eslint/no-unused-vars */\nimport type { DfFormField } from '@design-factory/angular/form-field';\n/* eslint-enable @typescript-eslint/no-unused-vars */\n\n/**\n * The input component, used to create an input field.\n *\n * It can be used as a standalone component or as a form field control within a {@link DfFormField} component.\n *\n * @since 22.0\n */\n@Component({\n  // eslint-disable-next-line @angular-eslint/component-selector\n  selector: 'input[dfInput]',\n  encapsulation: ViewEncapsulation.None,\n  host: {\n    class: 'df-input',\n    '[class.df-input-invalid]': 'touchedInvalid()',\n    '[attr.id]': 'id()',\n    '[attr.aria-describedby]': 'describedByIds().join(\" \") || null',\n    '[attr.aria-required]': 'required() || null',\n    '[attr.aria-invalid]': 'touchedInvalid() ? \"true\" : null'\n  },\n  styles: \"@use '@design-factory/components-styles/input';\",\n  template: '',\n  providers: [{ provide: DfFormFieldControl, useExisting: DfInput }]\n})\nexport class DfInput extends DfFormFieldControl {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;AAIA;AAEA;;;;;;AAMG;AAiBG,MAAO,OAAQ,SAAQ,kBAAkB,CAAA;8GAAlC,OAAO,EAAA,IAAA,EAAA,IAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAP,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,OAAO,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,gBAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,wBAAA,EAAA,kBAAA,EAAA,SAAA,EAAA,MAAA,EAAA,uBAAA,EAAA,sCAAA,EAAA,oBAAA,EAAA,oBAAA,EAAA,mBAAA,EAAA,oCAAA,EAAA,EAAA,cAAA,EAAA,UAAA,EAAA,EAAA,SAAA,EAFP,CAAC,EAAE,OAAO,EAAE,kBAAkB,EAAE,WAAW,EAAE,OAAO,EAAE,CAAC,iDADxD,EAAE,EAAA,QAAA,EAAA,IAAA,EAAA,MAAA,EAAA,CAAA,2gDAAA,CAAA,EAAA,aAAA,EAAA,EAAA,CAAA,iBAAA,CAAA,IAAA,EAAA,CAAA,CAAA;;2FAGD,OAAO,EAAA,UAAA,EAAA,CAAA;kBAhBnB,SAAS;AAEE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,gBAAgB,EAAA,aAAA,EACX,iBAAiB,CAAC,IAAI,EAAA,IAAA,EAC/B;AACJ,wBAAA,KAAK,EAAE,UAAU;AACjB,wBAAA,0BAA0B,EAAE,kBAAkB;AAC9C,wBAAA,WAAW,EAAE,MAAM;AACnB,wBAAA,yBAAyB,EAAE,oCAAoC;AAC/D,wBAAA,sBAAsB,EAAE,oBAAoB;AAC5C,wBAAA,qBAAqB,EAAE;qBACxB,EAAA,QAAA,EAES,EAAE,EAAA,SAAA,EACD,CAAC,EAAE,OAAO,EAAE,kBAAkB,EAAE,WAAW,EAAA,OAAS,EAAE,CAAC,EAAA,MAAA,EAAA,CAAA,2gDAAA,CAAA,EAAA;;;AC3BpE;;AAEG;;;;"}