@educarehq/solaris-ui 0.1.0 → 0.3.0

package/esm2022/lib/components/forms/form-field/component/form-field.component.js

@@ -0,0 +1,442 @@
+import { Component, input, computed, signal, effect, ContentChild, ElementRef, inject, NgZone, } from '@angular/core';
+import { FormControlDirective, FormControlName, NgModel } from '@angular/forms';
+import { SolarisFormPrefixDirective } from '../directives/form-prefix.directive';
+import { SolarisFormSuffixDirective } from '../directives/form-suffix.directive';
+import { SolarisTranslateService } from '../../../../services/translation';
+import { SolarisFormControl } from '../model/form-control.contract';
+import { SolarisFormLabelComponent } from './form-label.component';
+import { SolarisFormErrorComponent } from './form-error.component';
+import { SolarisFormHintComponent } from './form-hint.component';
+import * as i0 from "@angular/core";
+let nextId = 0;
+function generateId() {
+    return `solaris-form-field-${++nextId}`;
+}
+export class SolarisFormFieldComponent {
+    elementRef = inject(ElementRef);
+    translateService = inject(SolarisTranslateService);
+    ngZone = inject(NgZone);
+    constructor() {
+        // SECURITY_EXCEPTION: Setting disabled/readonly on native control is standard DOM API.
+        // SECURITY_EXCEPTION: Required for FormField to propagate disabled/readonly state to projected control.
+        effect(() => {
+            this.isEffectivelyDisabled();
+            this.isEffectivelyReadonly();
+            this.syncControlDisabledReadonly();
+        });
+    }
+    hintKey = input(...(ngDevMode ? [undefined, { debugName: "hintKey" }] : /* istanbul ignore next */ []));
+    labelKey = input(...(ngDevMode ? [undefined, { debugName: "labelKey" }] : /* istanbul ignore next */ []));
+    hint = input('', ...(ngDevMode ? [{ debugName: "hint" }] : /* istanbul ignore next */ []));
+    errorKey = input(...(ngDevMode ? [undefined, { debugName: "errorKey" }] : /* istanbul ignore next */ []));
+    label = input('', ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    error = input('', ...(ngDevMode ? [{ debugName: "error" }] : /* istanbul ignore next */ []));
+    optionalLabel = input(...(ngDevMode ? [undefined, { debugName: "optionalLabel" }] : /* istanbul ignore next */ []));
+    requiredLabel = input(...(ngDevMode ? [undefined, { debugName: "requiredLabel" }] : /* istanbul ignore next */ []));
+    optionalLabelKey = input(...(ngDevMode ? [undefined, { debugName: "optionalLabelKey" }] : /* istanbul ignore next */ []));
+    requiredLabelKey = input(...(ngDevMode ? [undefined, { debugName: "requiredLabelKey" }] : /* istanbul ignore next */ []));
+    required = input(false, ...(ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []));
+    optional = input(false, ...(ngDevMode ? [{ debugName: "optional" }] : /* istanbul ignore next */ []));
+    invalid = input(...(ngDevMode ? [undefined, { debugName: "invalid" }] : /* istanbul ignore next */ []));
+    disabled = input(...(ngDevMode ? [undefined, { debugName: "disabled" }] : /* istanbul ignore next */ []));
+    readonly = input(...(ngDevMode ? [undefined, { debugName: "readonly" }] : /* istanbul ignore next */ []));
+    density = input(...(ngDevMode ? [undefined, { debugName: "density" }] : /* istanbul ignore next */ []));
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    radius = input('md', ...(ngDevMode ? [{ debugName: "radius" }] : /* istanbul ignore next */ []));
+    appearance = input('outline', ...(ngDevMode ? [{ debugName: "appearance" }] : /* istanbul ignore next */ []));
+    control = input(undefined, ...(ngDevMode ? [{ debugName: "control" }] : /* istanbul ignore next */ []));
+    projectedLabel;
+    projectedHint;
+    projectedError;
+    prefix;
+    suffix;
+    formControl;
+    formControlDirective;
+    formControlName;
+    ngModelDir;
+    fieldId = generateId();
+    hintId = `solaris-form-field-hint-${this.fieldId}`;
+    errorId = `solaris-form-field-error-${this.fieldId}`;
+    labelId = `solaris-form-field-label-${this.fieldId}`;
+    isFocused = signal(false, ...(ngDevMode ? [{ debugName: "isFocused" }] : /* istanbul ignore next */ []));
+    isTextareaControl = signal(false, ...(ngDevMode ? [{ debugName: "isTextareaControl" }] : /* istanbul ignore next */ []));
+    autoDetectedDisabled = signal(false, ...(ngDevMode ? [{ debugName: "autoDetectedDisabled" }] : /* istanbul ignore next */ []));
+    autoDetectedReadonly = signal(false, ...(ngDevMode ? [{ debugName: "autoDetectedReadonly" }] : /* istanbul ignore next */ []));
+    controlResize = signal(null, ...(ngDevMode ? [{ debugName: "controlResize" }] : /* istanbul ignore next */ []));
+    maxLength = signal(undefined, ...(ngDevMode ? [{ debugName: "maxLength" }] : /* istanbul ignore next */ []));
+    currentLength = signal(0, ...(ngDevMode ? [{ debugName: "currentLength" }] : /* istanbul ignore next */ []));
+    showCharacterCounter = computed(() => {
+        const max = this.maxLength();
+        return max !== undefined && max > 0;
+    }, ...(ngDevMode ? [{ debugName: "showCharacterCounter" }] : /* istanbul ignore next */ []));
+    characterCounterText = computed(() => {
+        const max = this.maxLength();
+        if (max === undefined || max <= 0)
+            return '';
+        const current = this.currentLength();
+        return `${current}/${max}`;
+    }, ...(ngDevMode ? [{ debugName: "characterCounterText" }] : /* istanbul ignore next */ []));
+    characterCounterSeverity = computed(() => {
+        const max = this.maxLength();
+        const current = this.currentLength();
+        if (max === undefined || max <= 0)
+            return 'normal';
+        const ratio = current / max;
+        if (ratio >= 1)
+            return 'danger';
+        if (ratio >= 0.9)
+            return 'warning';
+        return 'normal';
+    }, ...(ngDevMode ? [{ debugName: "characterCounterSeverity" }] : /* istanbul ignore next */ []));
+    controlId = null;
+    controlElement = null;
+    focusListener = null;
+    blurListener = null;
+    inputListener = null;
+    hasProjectedLabel = computed(() => !!this.projectedLabel, ...(ngDevMode ? [{ debugName: "hasProjectedLabel" }] : /* istanbul ignore next */ []));
+    hasProjectedHint = computed(() => !!this.projectedHint, ...(ngDevMode ? [{ debugName: "hasProjectedHint" }] : /* istanbul ignore next */ []));
+    hasProjectedError = computed(() => !!this.projectedError, ...(ngDevMode ? [{ debugName: "hasProjectedError" }] : /* istanbul ignore next */ []));
+    hasPrefix = signal(false, ...(ngDevMode ? [{ debugName: "hasPrefix" }] : /* istanbul ignore next */ []));
+    hasSuffix = signal(false, ...(ngDevMode ? [{ debugName: "hasSuffix" }] : /* istanbul ignore next */ []));
+    controlType = computed(() => {
+        return this.isTextareaControl() ? 'textarea' : 'other';
+    }, ...(ngDevMode ? [{ debugName: "controlType" }] : /* istanbul ignore next */ []));
+    effectiveDensity = computed(() => {
+        return this.density() ?? 'comfortable';
+    }, ...(ngDevMode ? [{ debugName: "effectiveDensity" }] : /* istanbul ignore next */ []));
+    labelText = computed(() => {
+        const key = this.labelKey();
+        if (key) {
+            return this.translateService.translate(key);
+        }
+        return this.label();
+    }, ...(ngDevMode ? [{ debugName: "labelText" }] : /* istanbul ignore next */ []));
+    hintText = computed(() => {
+        const key = this.hintKey();
+        if (key) {
+            return this.translateService.translate(key);
+        }
+        return this.hint();
+    }, ...(ngDevMode ? [{ debugName: "hintText" }] : /* istanbul ignore next */ []));
+    errorText = computed(() => {
+        const key = this.errorKey();
+        if (key) {
+            return this.translateService.translate(key);
+        }
+        return this.error();
+    }, ...(ngDevMode ? [{ debugName: "errorText" }] : /* istanbul ignore next */ []));
+    optionalLabelText = computed(() => {
+        const key = this.optionalLabelKey();
+        if (key) {
+            return this.translateService.translate(key);
+        }
+        const explicit = this.optionalLabel();
+        if (explicit) {
+            return explicit;
+        }
+        return this.translateService.translate('solaris.form-field.optional');
+    }, ...(ngDevMode ? [{ debugName: "optionalLabelText" }] : /* istanbul ignore next */ []));
+    isEffectivelyDisabled = computed(() => {
+        const manual = this.disabled();
+        if (manual !== undefined) {
+            return manual;
+        }
+        const explicitControl = this.control();
+        if (explicitControl) {
+            return explicitControl.disabled;
+        }
+        if (this.formControl) {
+            return this.formControl.disabled;
+        }
+        return this.autoDetectedDisabled();
+    }, ...(ngDevMode ? [{ debugName: "isEffectivelyDisabled" }] : /* istanbul ignore next */ []));
+    isEffectivelyReadonly = computed(() => {
+        const manual = this.readonly();
+        if (manual !== undefined) {
+            return manual;
+        }
+        const explicitControl = this.control();
+        if (explicitControl) {
+            return explicitControl.readonly;
+        }
+        if (this.formControl) {
+            return this.formControl.readonly;
+        }
+        return this.autoDetectedReadonly();
+    }, ...(ngDevMode ? [{ debugName: "isEffectivelyReadonly" }] : /* istanbul ignore next */ []));
+    effectiveNgControl = computed(() => {
+        return (this.formControlDirective ??
+            this.formControlName ??
+            this.ngModelDir ??
+            null);
+    }, ...(ngDevMode ? [{ debugName: "effectiveNgControl" }] : /* istanbul ignore next */ []));
+    isAutoInvalid = computed(() => {
+        const control = this.effectiveNgControl();
+        if (!control?.control) {
+            return false;
+        }
+        const ctrl = control.control;
+        const invalid = ctrl.invalid;
+        const touched = ctrl.touched;
+        const dirty = ctrl.dirty;
+        const focused = this.isFocused();
+        if (!invalid) {
+            return false;
+        }
+        if (focused) {
+            return false;
+        }
+        return touched || dirty;
+    }, ...(ngDevMode ? [{ debugName: "isAutoInvalid" }] : /* istanbul ignore next */ []));
+    isInvalid = computed(() => {
+        const manual = this.invalid();
+        if (manual !== undefined) {
+            return manual;
+        }
+        const explicitControl = this.control();
+        if (explicitControl) {
+            return explicitControl.invalid;
+        }
+        if (this.formControl) {
+            return this.formControl.invalid && !this.isFocused();
+        }
+        return this.isAutoInvalid();
+    }, ...(ngDevMode ? [{ debugName: "isInvalid" }] : /* istanbul ignore next */ []));
+    showError = computed(() => {
+        return this.isInvalid() && (!!this.errorText() || this.hasProjectedError());
+    }, ...(ngDevMode ? [{ debugName: "showError" }] : /* istanbul ignore next */ []));
+    showHint = computed(() => {
+        if (this.showError()) {
+            return false;
+        }
+        return !!this.hintText() || this.hasProjectedHint();
+    }, ...(ngDevMode ? [{ debugName: "showHint" }] : /* istanbul ignore next */ []));
+    describedBy = computed(() => {
+        const ids = [];
+        if (this.showHint()) {
+            ids.push(this.hintId);
+        }
+        if (this.showError()) {
+            ids.push(this.errorId);
+        }
+        return ids.length > 0 ? ids.join(' ') : null;
+    }, ...(ngDevMode ? [{ debugName: "describedBy" }] : /* istanbul ignore next */ []));
+    ngAfterContentInit() {
+        this.hasPrefix.set(!!this.prefix);
+        this.hasSuffix.set(!!this.suffix);
+        this.detectControl();
+        this.connectControl();
+        this.syncDescribedBy();
+        this.syncControlDisabledReadonly();
+        this.warnNoControl();
+        this.warnMultipleControls();
+    }
+    syncControlDisabledReadonly() {
+        if (!this.controlElement) {
+            return;
+        }
+        if (this.control()) {
+            return;
+        }
+        // SECURITY_EXCEPTION: Setting disabled/readonly on native control is required for FormField propagation.
+        const input = this.controlElement;
+        const shouldDisable = this.isEffectivelyDisabled();
+        const shouldReadonly = this.isEffectivelyReadonly();
+        if (input.disabled !== shouldDisable) {
+            input.disabled = shouldDisable;
+        }
+        if (input.readOnly !== shouldReadonly) {
+            input.readOnly = shouldReadonly;
+        }
+    }
+    syncDescribedBy() {
+        const describedBy = this.describedBy();
+        const targetControl = this.control() ?? this.formControl;
+        if (targetControl) {
+            if (describedBy) {
+                targetControl.setDescribedByIds(describedBy.split(' '));
+            }
+            else {
+                targetControl.setDescribedByIds([]);
+            }
+        }
+    }
+    describedByEffect = effect(() => {
+        this.describedBy();
+        this.syncDescribedBy();
+    }, ...(ngDevMode ? [{ debugName: "describedByEffect" }] : /* istanbul ignore next */ []));
+    ngOnDestroy() {
+        this.removeListeners();
+    }
+    detectControl() {
+        const explicitControl = this.control();
+        if (explicitControl) {
+            this.controlId = explicitControl.id;
+            // SECURITY_EXCEPTION: nativeElement.querySelector required to find trigger element. Standard DOM API used after Angular CDK pattern.
+            const triggerEl = this.elementRef.nativeElement.querySelector('[solaris-form-field-trigger]');
+            if (triggerEl) {
+                this.controlElement = triggerEl;
+                if (triggerEl.id) {
+                    this.controlId = triggerEl.id;
+                }
+                this.connectControl();
+            }
+            return;
+        }
+        // SECURITY_EXCEPTION: nativeElement access required to detect projected form controls.
+        // SECURITY_EXCEPTION: Angular CDK and Material use the same approach.
+        // SECURITY_EXCEPTION: Read-only querySelectorAll, no DOM mutation.
+        const nativeElement = this.elementRef.nativeElement;
+        const children = nativeElement.querySelectorAll('input, select, textarea, [solaris-input], [solaris-select], [solaris-textarea]');
+        if (children.length > 0) {
+            const first = children[0];
+            this.controlElement = first;
+            // SECURITY_EXCEPTION: nativeElement.tagName is the standard DOM API to check element type.
+            const isTextarea = first.tagName === 'TEXTAREA';
+            this.isTextareaControl.set(isTextarea);
+            // SECURITY_EXCEPTION: getAttribute is the standard DOM API to read HTML attributes.
+            const maxlengthAttr = first.getAttribute('maxlength');
+            if (maxlengthAttr !== null) {
+                const parsed = parseInt(maxlengthAttr, 10);
+                this.maxLength.set(!isNaN(parsed) ? parsed : undefined);
+            }
+            else {
+                this.maxLength.set(undefined);
+            }
+            // SECURITY_EXCEPTION: reading value.length from native input/textarea is required for character counter.
+            this.currentLength.set(first.value?.length ?? 0);
+            if (isTextarea) {
+                const resize = first.dataset['resize'] ?? first.getAttribute('resize');
+                const validResize = resize === 'none' ||
+                    resize === 'vertical' ||
+                    resize === 'horizontal' ||
+                    resize === 'both'
+                    ? resize
+                    : 'vertical';
+                this.controlResize.set(validResize);
+            }
+            else {
+                this.controlResize.set(null);
+            }
+        }
+        if (this.formControl) {
+            this.controlId = this.formControl.id;
+        }
+        else if (this.controlElement) {
+            if (!this.controlElement.id) {
+                const generatedId = `solaris-control-${this.fieldId}`;
+                this.controlElement.id = generatedId;
+                this.controlId = generatedId;
+            }
+            else {
+                this.controlId = this.controlElement.id;
+            }
+        }
+    }
+    connectControl() {
+        if (this.controlElement) {
+            this.addListeners(this.controlElement);
+        }
+    }
+    addListeners(element) {
+        this.removeListeners();
+        this.ngZone.runOutsideAngular(() => {
+            const onFocus = () => {
+                this.ngZone.run(() => this.isFocused.set(true));
+            };
+            const onBlur = () => {
+                this.ngZone.run(() => this.isFocused.set(false));
+            };
+            const onInput = () => {
+                // SECURITY_EXCEPTION: reading value.length from native input/textarea is standard DOM API for character counter.
+                this.ngZone.run(() => {
+                    this.currentLength.set(element.value?.length ??
+                        0);
+                });
+            };
+            element.addEventListener('focusin', onFocus);
+            element.addEventListener('focusout', onBlur);
+            element.addEventListener('input', onInput);
+            this.focusListener = () => element.removeEventListener('focusin', onFocus);
+            this.blurListener = () => element.removeEventListener('focusout', onBlur);
+            this.inputListener = () => element.removeEventListener('input', onInput);
+        });
+    }
+    removeListeners() {
+        this.focusListener?.();
+        this.blurListener?.();
+        this.inputListener?.();
+        this.focusListener = null;
+        this.blurListener = null;
+        this.inputListener = null;
+    }
+    warnNoControl() {
+        const hasAnyControl = !!this.control() ||
+            !!this.formControl ||
+            !!this.controlElement ||
+            !!this.effectiveNgControl();
+        if (!hasAnyControl) {
+            console.warn(`[SolarisFormField] No form control found inside <solaris-form-field id="${this.fieldId}">. ` +
+                'Form Field requires a control (input, select, textarea, or a Solaris form control directive). ' +
+                'This warning is shown in development only. The component will render safely without the control.');
+        }
+    }
+    warnMultipleControls() {
+        // SECURITY_EXCEPTION: nativeElement access required to count projected controls.
+        // SECURITY_EXCEPTION: Same justification as detectControl: read-only query, no DOM mutation.
+        const nativeElement = this.elementRef.nativeElement;
+        const children = nativeElement.querySelectorAll('input, select, textarea, [solaris-input], [solaris-select], [solaris-textarea]');
+        if (children.length > 1) {
+            console.warn(`[SolarisFormField] Multiple form controls detected inside <solaris-form-field id="${this.fieldId}">. ` +
+                'Form Field v1 supports one main control. Multiple controls may cause unexpected behavior.');
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SolarisFormFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SolarisFormFieldComponent, isStandalone: true, selector: "solaris-form-field", inputs: { hintKey: { classPropertyName: "hintKey", publicName: "hintKey", isSignal: true, isRequired: false, transformFunction: null }, labelKey: { classPropertyName: "labelKey", publicName: "labelKey", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, errorKey: { classPropertyName: "errorKey", publicName: "errorKey", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, optionalLabel: { classPropertyName: "optionalLabel", publicName: "optionalLabel", isSignal: true, isRequired: false, transformFunction: null }, requiredLabel: { classPropertyName: "requiredLabel", publicName: "requiredLabel", isSignal: true, isRequired: false, transformFunction: null }, optionalLabelKey: { classPropertyName: "optionalLabelKey", publicName: "optionalLabelKey", isSignal: true, isRequired: false, transformFunction: null }, requiredLabelKey: { classPropertyName: "requiredLabelKey", publicName: "requiredLabelKey", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, optional: { classPropertyName: "optional", publicName: "optional", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, density: { classPropertyName: "density", publicName: "density", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, radius: { classPropertyName: "radius", publicName: "radius", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, control: { classPropertyName: "control", publicName: "control", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-size": "size()", "attr.data-radius": "radius()", "attr.data-bwignore": "\"true\"", "attr.data-appearance": "appearance()", "attr.data-density": "effectiveDensity()", "attr.data-control-type": "controlType()", "attr.data-control-resize": "controlResize()", "attr.data-invalid": "isInvalid() ? \"\" : null", "attr.data-focused": "isFocused() ? \"\" : null", "attr.data-has-prefix": "hasPrefix() ? \"\" : null", "attr.data-has-suffix": "hasSuffix() ? \"\" : null", "attr.data-disabled": "isEffectivelyDisabled() ? \"\" : null", "attr.data-readonly": "isEffectivelyReadonly() ? \"\" : null" } }, queries: [{ propertyName: "projectedLabel", first: true, predicate: SolarisFormLabelComponent, descendants: true }, { propertyName: "projectedHint", first: true, predicate: SolarisFormHintComponent, descendants: true }, { propertyName: "projectedError", first: true, predicate: SolarisFormErrorComponent, descendants: true }, { propertyName: "prefix", first: true, predicate: SolarisFormPrefixDirective, descendants: true }, { propertyName: "suffix", first: true, predicate: SolarisFormSuffixDirective, descendants: true }, { propertyName: "formControl", first: true, predicate: SolarisFormControl, descendants: true }, { propertyName: "formControlDirective", first: true, predicate: FormControlDirective, descendants: true }, { propertyName: "formControlName", first: true, predicate: FormControlName, descendants: true }, { propertyName: "ngModelDir", first: true, predicate: NgModel, descendants: true }], ngImport: i0, template: "@if (labelText() || hasProjectedLabel()) {\n  <div class=\"solaris-form-field__label-row\">\n    @if (hasProjectedLabel()) {\n      <ng-content select=\"solaris-form-label\" />\n    } @else if (labelText()) {\n      <label\n        class=\"solaris-form-field__label\"\n        [id]=\"labelId\"\n        [for]=\"controlId ?? undefined\"\n      >\n        {{ labelText() }}\n      </label>\n    }\n    @if (optional()) {\n      <span\n        class=\"solaris-form-field__optional-marker\"\n        [attr.aria-label]=\"optionalLabelText()\"\n      >\n        {{ optionalLabelText() }}\n      </span>\n    }\n    @if (showCharacterCounter()) {\n      <span\n        class=\"solaris-form-field__character-counter\"\n        aria-live=\"polite\"\n        [attr.aria-label]=\"characterCounterText()\"\n        [attr.data-severity]=\"characterCounterSeverity()\"\n      >\n        {{ characterCounterText() }}\n      </span>\n    }\n  </div>\n}\n\n<div class=\"solaris-form-field__control-wrapper\">\n  <span\n    class=\"solaris-form-field__affix solaris-form-field__affix--prefix\"\n    [attr.data-empty]=\"hasPrefix() ? null : ''\"\n  >\n    <ng-content select=\"[solaris-form-prefix]\" />\n  </span>\n\n  <div class=\"solaris-form-field__control\">\n    <ng-content />\n  </div>\n\n  <span\n    class=\"solaris-form-field__affix solaris-form-field__affix--suffix\"\n    [attr.data-empty]=\"hasSuffix() ? null : ''\"\n  >\n    <ng-content select=\"[solaris-form-suffix]\" />\n  </span>\n</div>\n\n@if (showError() || showHint()) {\n  <div class=\"solaris-form-field__message-row\">\n    @if (showError()) {\n      <div class=\"solaris-form-field__error\" [id]=\"errorId\" role=\"alert\">\n        @if (hasProjectedError()) {\n          <ng-content select=\"solaris-form-error\" />\n        } @else {\n          {{ errorText() }}\n        }\n      </div>\n    } @else if (showHint()) {\n      <div class=\"solaris-form-field__hint\" [id]=\"hintId\">\n        @if (hasProjectedHint()) {\n          <ng-content select=\"solaris-form-hint\" />\n        } @else {\n          {{ hintText() }}\n        }\n      </div>\n    }\n  </div>\n}\n", styles: [":host{--solaris-form-field-font-size: initial;--solaris-form-field-hint-color: initial;--solaris-form-field-label-color: initial;--solaris-form-field-control-gap: initial;--solaris-form-field-error-color: initial;--solaris-form-field-prefix-color: initial;--solaris-form-field-suffix-color: initial;--solaris-form-field-control-color: initial;--solaris-form-field-control-height: initial;--solaris-form-field-control-radius: initial;--solaris-form-field-hint-font-size: initial;--solaris-form-field-optional-color: initial;--solaris-form-field-label-font-size: initial;--solaris-form-field-error-font-size: initial;--solaris-form-field-disabled-opacity: initial;--solaris-form-field-focus-ring-width: initial;--solaris-form-field-focus-ring-color: initial;--solaris-form-field-control-padding-x: initial;--solaris-form-field-label-font-weight: initial;--solaris-form-field-message-margin-top: initial;--solaris-form-field-optional-font-size: initial;--solaris-form-field-error-border-color: initial;--solaris-form-field-control-background: initial;--solaris-form-field-label-margin-bottom: initial;--solaris-form-field-readonly-background: initial;--solaris-form-field-control-border-color: initial;--solaris-form-field-control-border-width: initial;display:block;box-sizing:border-box;font-size:var(--solaris-form-field-font-size);font-family:var(--solaris-font-family-sans),system-ui}.solaris-form-field__label-row{display:flex;align-items:center;gap:var(--solaris-spacing-2);margin-bottom:var(--solaris-form-field-label-margin-bottom)}.solaris-form-field__label,::ng-deep .solaris-form-label{display:inline-block;color:var(--solaris-form-field-label-color);font-size:var(--solaris-form-field-label-font-size);font-weight:var(--solaris-form-field-label-font-weight);cursor:pointer}.solaris-form-field__optional-marker{color:var(--solaris-form-field-optional-color);font-size:var(--solaris-form-field-optional-font-size);white-space:nowrap}.solaris-form-field__character-counter{margin-left:auto;color:var(--solaris-form-field-optional-color);font-size:var(--solaris-form-field-optional-font-size);font-variant-numeric:tabular-nums;white-space:nowrap;transition:color var(--solaris-motion-duration-fast) ease}.solaris-form-field__character-counter[data-severity=warning]{color:var(--solaris-warning-text)}.solaris-form-field__character-counter[data-severity=danger]{color:var(--solaris-danger-text)}.solaris-form-field__control-wrapper{position:relative;display:flex;align-items:stretch;gap:var(--solaris-form-field-control-gap);min-height:var(--solaris-form-field-control-height);padding:0 var(--solaris-form-field-control-padding-x);box-sizing:border-box;border-width:var(--solaris-form-field-control-border-width);border-style:solid;border-color:var(--solaris-form-field-control-border-color);border-radius:var(--solaris-form-field-control-radius);background:var(--solaris-form-field-control-background);transition:border-color var(--solaris-motion-duration-fast) ease,box-shadow var(--solaris-motion-duration-fast) ease}:host([data-has-prefix]) .solaris-form-field__control-wrapper{padding-left:0}.solaris-form-field__control-wrapper[data-connected-side=bottom]{border-bottom-left-radius:0;border-bottom-right-radius:0}.solaris-form-field__control-wrapper[data-connected-side=top]{border-top-left-radius:0;border-top-right-radius:0}.solaris-form-field__control{display:flex;flex:1;align-items:center;min-width:0}.solaris-form-field__affix{display:flex;flex:0 0 auto;align-self:stretch;align-items:center;justify-content:center;min-width:0;box-sizing:border-box;line-height:1;cursor:default}.solaris-form-field__affix[data-empty]{display:none}.solaris-form-field__affix--prefix{inline-size:var(--solaris-form-field-control-height);color:var(--solaris-form-field-prefix-color);border-inline-end:var(--solaris-border-width-sm) solid var(--solaris-border-subtle);transition:color var(--solaris-motion-duration-fast) ease}.solaris-form-field__affix--suffix{color:var(--solaris-form-field-suffix-color);transition:color var(--solaris-motion-duration-slow) ease}.solaris-form-field__affix--prefix:hover,.solaris-form-field__affix--suffix:hover{color:var(--solaris-text-default)}:host ::ng-deep .solaris-form-prefix,:host ::ng-deep .solaris-form-suffix{display:inline-flex;flex:0 0 auto;align-self:auto;align-items:center;justify-content:center;color:inherit;border:0;line-height:1;cursor:inherit}:host ::ng-deep solaris-icon.solaris-form-prefix,:host ::ng-deep solaris-icon.solaris-form-suffix,:host ::ng-deep .solaris-form-prefix solaris-icon,:host ::ng-deep .solaris-form-suffix solaris-icon{inline-size:1em;block-size:1em;flex:0 0 auto;color:inherit;font-size:var(--solaris-font-size-lg);transition:color var(--solaris-motion-duration-slow) ease}:host([data-control-type=textarea]){min-width:0}:host([data-control-type=textarea]) .solaris-form-field__control-wrapper{padding-right:0;overflow:visible}:host([data-control-type=textarea]) .solaris-form-field__control{overflow:visible}:host([data-control-type=textarea][data-control-resize=horizontal]) .solaris-form-field__control-wrapper{width:100%;min-width:8rem;overflow:hidden;resize:horizontal}:host([data-control-type=textarea][data-control-resize=horizontal]) .solaris-form-field__control{min-width:0}:host([data-control-type=textarea][data-control-resize=horizontal]) ::ng-deep textarea[solaris-textarea]{display:block;width:100%;min-width:0;resize:none}:host([data-control-type=textarea][data-control-resize=both]) .solaris-form-field__control-wrapper{width:100%;min-width:8rem;min-height:var(--solaris-form-field-control-height);align-items:stretch;overflow:hidden;resize:both}:host([data-control-type=textarea][data-control-resize=both]) .solaris-form-field__control{align-items:stretch;min-width:0;min-height:0;overflow:hidden}:host([data-control-type=textarea][data-control-resize=both]) ::ng-deep textarea[solaris-textarea]{display:block;flex:1 1 auto;width:100%;height:100%;min-width:0;min-height:0;resize:none}.solaris-form-field__message-row{margin-top:var(--solaris-form-field-message-margin-top)}.solaris-form-field__hint{margin:var(--solaris-spacing-1);color:var(--solaris-form-field-hint-color);font-size:var(--solaris-form-field-hint-font-size)}.solaris-form-field__error{margin:var(--solaris-spacing-1);color:var(--solaris-form-field-error-color);font-size:var(--solaris-form-field-error-font-size)}:host([data-size=sm]){--solaris-form-field-control-gap: var(--solaris-spacing-1);--solaris-form-field-font-size: var(--solaris-font-size-sm);--solaris-form-field-control-height: var(--solaris-spacing-8);--solaris-form-field-control-padding-x: var(--solaris-spacing-2);--solaris-form-field-hint-font-size: var(--solaris-font-size-xs);--solaris-form-field-label-font-size: var(--solaris-font-size-xs);--solaris-form-field-error-font-size: var(--solaris-font-size-xs);--solaris-form-field-message-margin-top: var(--solaris-spacing-1);--solaris-form-field-label-margin-bottom: var(--solaris-spacing-1);--solaris-form-field-optional-font-size: var(--solaris-font-size-xs)}:host([data-size=md]){--solaris-form-field-control-height: var(--solaris-spacing-10);--solaris-form-field-control-gap: var(--solaris-spacing-2);--solaris-form-field-font-size: var(--solaris-font-size-md);--solaris-form-field-control-padding-x: var(--solaris-spacing-3);--solaris-form-field-hint-font-size: var(--solaris-font-size-xs);--solaris-form-field-error-font-size: var(--solaris-font-size-xs);--solaris-form-field-label-font-size: var(--solaris-font-size-sm);--solaris-form-field-message-margin-top: var(--solaris-spacing-1);--solaris-form-field-label-margin-bottom: var(--solaris-spacing-1);--solaris-form-field-optional-font-size: var(--solaris-font-size-xs)}:host([data-size=lg]){--solaris-form-field-control-height: var(--solaris-spacing-12);--solaris-form-field-control-gap: var(--solaris-spacing-2);--solaris-form-field-font-size: var(--solaris-font-size-lg);--solaris-form-field-control-padding-x: var(--solaris-spacing-4);--solaris-form-field-hint-font-size: var(--solaris-font-size-xs);--solaris-form-field-label-font-size: var(--solaris-font-size-md);--solaris-form-field-error-font-size: var(--solaris-font-size-xs);--solaris-form-field-message-margin-top: var(--solaris-spacing-2);--solaris-form-field-label-margin-bottom: var(--solaris-spacing-2);--solaris-form-field-optional-font-size: var(--solaris-font-size-xs)}:host([data-density=compact]){--solaris-form-field-control-height: var(--solaris-density-min-height);--solaris-form-field-control-gap: var(--solaris-spacing-1);--solaris-form-field-font-size: var(--solaris-font-size-sm);--solaris-form-field-control-padding-x: var(--solaris-spacing-2);--solaris-form-field-hint-font-size: var(--solaris-font-size-xs);--solaris-form-field-label-font-size: var(--solaris-font-size-xs);--solaris-form-field-error-font-size: var(--solaris-font-size-xs);--solaris-form-field-message-margin-top: var(--solaris-spacing-1);--solaris-form-field-label-margin-bottom: var(--solaris-spacing-1);--solaris-form-field-optional-font-size: var(--solaris-font-size-xs)}:host([data-density=comfortable]){--solaris-form-field-control-height: var(--solaris-density-min-height);--solaris-form-field-control-gap: var(--solaris-spacing-2);--solaris-form-field-control-padding-x: var(--solaris-spacing-3);--solaris-form-field-hint-font-size: var(--solaris-font-size-xs);--solaris-form-field-error-font-size: var(--solaris-font-size-xs);--solaris-form-field-message-margin-top: var(--solaris-spacing-2);--solaris-form-field-label-margin-bottom: var(--solaris-spacing-2);--solaris-form-field-optional-font-size: var(--solaris-font-size-xs)}:host([data-radius=none]){--solaris-form-field-control-radius: var(--solaris-radius-none)}:host([data-radius=sm]){--solaris-form-field-control-radius: var(--solaris-radius-sm)}:host([data-radius=md]){--solaris-form-field-control-radius: var(--solaris-radius-md)}:host([data-radius=lg]){--solaris-form-field-control-radius: var(--solaris-radius-lg)}:host([data-focused]){--solaris-form-field-control-border-color: var( --solaris-form-field-focus-ring-color )}:host([data-disabled]){--solaris-form-field-control-color: var( --solaris-text-disabled, var(--solaris-text-muted) );--solaris-form-field-control-background: var( --solaris-surface-disabled, var(--solaris-surface-muted) );opacity:var(--solaris-form-field-disabled-opacity);cursor:not-allowed}:host([data-readonly]){--solaris-form-field-control-border-color: var(--solaris-border-subtle);--solaris-form-field-control-background: var( --solaris-form-field-readonly-background )}:host([data-appearance=outline]),:host([data-appearance=surface]),:host([data-appearance=filled]){--solaris-form-field-disabled-opacity: .5;--solaris-form-field-focus-ring-width: 2px;--solaris-form-field-hint-color: var(--solaris-text-muted);--solaris-form-field-prefix-color: var(--solaris-text-muted);--solaris-form-field-suffix-color: var(--solaris-text-muted);--solaris-form-field-error-color: var(--solaris-danger-text);--solaris-form-field-label-color: var(--solaris-text-default);--solaris-form-field-optional-color: var(--solaris-text-muted);--solaris-form-field-focus-ring-color: var(--solaris-primary-base);--solaris-form-field-error-border-color: var(--solaris-danger-base);--solaris-form-field-label-font-weight: var(--solaris-font-weight-medium)}:host([data-appearance=outline]){--solaris-form-field-control-border-width: var(--solaris-border-width-sm);--solaris-form-field-control-background: var(--solaris-surface-base);--solaris-form-field-readonly-background: var(--solaris-surface-muted);--solaris-form-field-control-border-color: var(--solaris-border-subtle)}:host([data-appearance=surface]){--solaris-form-field-control-border-width: 0;--solaris-form-field-readonly-background: var(--solaris-surface-base);--solaris-form-field-control-background: var(--solaris-surface-subtle);--solaris-form-field-control-border-color: var(--solaris-border-subtle)}:host([data-appearance=filled]){--solaris-form-field-control-background: var(--solaris-surface-subtle);--solaris-form-field-readonly-background: var(--solaris-surface-muted);--solaris-form-field-control-border-color: var(--solaris-border-subtle);--solaris-form-field-control-border-width: var(--solaris-border-width-sm)}:host([data-invalid]){--solaris-form-field-control-border-color: var( --solaris-form-field-error-border-color )}:host([data-invalid][data-focused]){--solaris-form-field-control-border-color: var( --solaris-form-field-error-border-color );outline-color:var(--solaris-form-field-error-border-color)}\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SolarisFormFieldComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'solaris-form-field', standalone: true, imports: [], host: {
+                        '[attr.data-size]': 'size()',
+                        '[attr.data-radius]': 'radius()',
+                        '[attr.data-bwignore]': '"true"',
+                        '[attr.data-appearance]': 'appearance()',
+                        '[attr.data-density]': 'effectiveDensity()',
+                        '[attr.data-control-type]': 'controlType()',
+                        '[attr.data-control-resize]': 'controlResize()',
+                        '[attr.data-invalid]': 'isInvalid() ? "" : null',
+                        '[attr.data-focused]': 'isFocused() ? "" : null',
+                        '[attr.data-has-prefix]': 'hasPrefix() ? "" : null',
+                        '[attr.data-has-suffix]': 'hasSuffix() ? "" : null',
+                        '[attr.data-disabled]': 'isEffectivelyDisabled() ? "" : null',
+                        '[attr.data-readonly]': 'isEffectivelyReadonly() ? "" : null',
+                    }, template: "@if (labelText() || hasProjectedLabel()) {\n  <div class=\"solaris-form-field__label-row\">\n    @if (hasProjectedLabel()) {\n      <ng-content select=\"solaris-form-label\" />\n    } @else if (labelText()) {\n      <label\n        class=\"solaris-form-field__label\"\n        [id]=\"labelId\"\n        [for]=\"controlId ?? undefined\"\n      >\n        {{ labelText() }}\n      </label>\n    }\n    @if (optional()) {\n      <span\n        class=\"solaris-form-field__optional-marker\"\n        [attr.aria-label]=\"optionalLabelText()\"\n      >\n        {{ optionalLabelText() }}\n      </span>\n    }\n    @if (showCharacterCounter()) {\n      <span\n        class=\"solaris-form-field__character-counter\"\n        aria-live=\"polite\"\n        [attr.aria-label]=\"characterCounterText()\"\n        [attr.data-severity]=\"characterCounterSeverity()\"\n      >\n        {{ characterCounterText() }}\n      </span>\n    }\n  </div>\n}\n\n<div class=\"solaris-form-field__control-wrapper\">\n  <span\n    class=\"solaris-form-field__affix solaris-form-field__affix--prefix\"\n    [attr.data-empty]=\"hasPrefix() ? null : ''\"\n  >\n    <ng-content select=\"[solaris-form-prefix]\" />\n  </span>\n\n  <div class=\"solaris-form-field__control\">\n    <ng-content />\n  </div>\n\n  <span\n    class=\"solaris-form-field__affix solaris-form-field__affix--suffix\"\n    [attr.data-empty]=\"hasSuffix() ? null : ''\"\n  >\n    <ng-content select=\"[solaris-form-suffix]\" />\n  </span>\n</div>\n\n@if (showError() || showHint()) {\n  <div class=\"solaris-form-field__message-row\">\n    @if (showError()) {\n      <div class=\"solaris-form-field__error\" [id]=\"errorId\" role=\"alert\">\n        @if (hasProjectedError()) {\n          <ng-content select=\"solaris-form-error\" />\n        } @else {\n          {{ errorText() }}\n        }\n      </div>\n    } @else if (showHint()) {\n      <div class=\"solaris-form-field__hint\" [id]=\"hintId\">\n        @if (hasProjectedHint()) {\n          <ng-content select=\"solaris-form-hint\" />\n        } @else {\n          {{ hintText() }}\n        }\n      </div>\n    }\n  </div>\n}\n", styles: [":host{--solaris-form-field-font-size: initial;--solaris-form-field-hint-color: initial;--solaris-form-field-label-color: initial;--solaris-form-field-control-gap: initial;--solaris-form-field-error-color: initial;--solaris-form-field-prefix-color: initial;--solaris-form-field-suffix-color: initial;--solaris-form-field-control-color: initial;--solaris-form-field-control-height: initial;--solaris-form-field-control-radius: initial;--solaris-form-field-hint-font-size: initial;--solaris-form-field-optional-color: initial;--solaris-form-field-label-font-size: initial;--solaris-form-field-error-font-size: initial;--solaris-form-field-disabled-opacity: initial;--solaris-form-field-focus-ring-width: initial;--solaris-form-field-focus-ring-color: initial;--solaris-form-field-control-padding-x: initial;--solaris-form-field-label-font-weight: initial;--solaris-form-field-message-margin-top: initial;--solaris-form-field-optional-font-size: initial;--solaris-form-field-error-border-color: initial;--solaris-form-field-control-background: initial;--solaris-form-field-label-margin-bottom: initial;--solaris-form-field-readonly-background: initial;--solaris-form-field-control-border-color: initial;--solaris-form-field-control-border-width: initial;display:block;box-sizing:border-box;font-size:var(--solaris-form-field-font-size);font-family:var(--solaris-font-family-sans),system-ui}.solaris-form-field__label-row{display:flex;align-items:center;gap:var(--solaris-spacing-2);margin-bottom:var(--solaris-form-field-label-margin-bottom)}.solaris-form-field__label,::ng-deep .solaris-form-label{display:inline-block;color:var(--solaris-form-field-label-color);font-size:var(--solaris-form-field-label-font-size);font-weight:var(--solaris-form-field-label-font-weight);cursor:pointer}.solaris-form-field__optional-marker{color:var(--solaris-form-field-optional-color);font-size:var(--solaris-form-field-optional-font-size);white-space:nowrap}.solaris-form-field__character-counter{margin-left:auto;color:var(--solaris-form-field-optional-color);font-size:var(--solaris-form-field-optional-font-size);font-variant-numeric:tabular-nums;white-space:nowrap;transition:color var(--solaris-motion-duration-fast) ease}.solaris-form-field__character-counter[data-severity=warning]{color:var(--solaris-warning-text)}.solaris-form-field__character-counter[data-severity=danger]{color:var(--solaris-danger-text)}.solaris-form-field__control-wrapper{position:relative;display:flex;align-items:stretch;gap:var(--solaris-form-field-control-gap);min-height:var(--solaris-form-field-control-height);padding:0 var(--solaris-form-field-control-padding-x);box-sizing:border-box;border-width:var(--solaris-form-field-control-border-width);border-style:solid;border-color:var(--solaris-form-field-control-border-color);border-radius:var(--solaris-form-field-control-radius);background:var(--solaris-form-field-control-background);transition:border-color var(--solaris-motion-duration-fast) ease,box-shadow var(--solaris-motion-duration-fast) ease}:host([data-has-prefix]) .solaris-form-field__control-wrapper{padding-left:0}.solaris-form-field__control-wrapper[data-connected-side=bottom]{border-bottom-left-radius:0;border-bottom-right-radius:0}.solaris-form-field__control-wrapper[data-connected-side=top]{border-top-left-radius:0;border-top-right-radius:0}.solaris-form-field__control{display:flex;flex:1;align-items:center;min-width:0}.solaris-form-field__affix{display:flex;flex:0 0 auto;align-self:stretch;align-items:center;justify-content:center;min-width:0;box-sizing:border-box;line-height:1;cursor:default}.solaris-form-field__affix[data-empty]{display:none}.solaris-form-field__affix--prefix{inline-size:var(--solaris-form-field-control-height);color:var(--solaris-form-field-prefix-color);border-inline-end:var(--solaris-border-width-sm) solid var(--solaris-border-subtle);transition:color var(--solaris-motion-duration-fast) ease}.solaris-form-field__affix--suffix{color:var(--solaris-form-field-suffix-color);transition:color var(--solaris-motion-duration-slow) ease}.solaris-form-field__affix--prefix:hover,.solaris-form-field__affix--suffix:hover{color:var(--solaris-text-default)}:host ::ng-deep .solaris-form-prefix,:host ::ng-deep .solaris-form-suffix{display:inline-flex;flex:0 0 auto;align-self:auto;align-items:center;justify-content:center;color:inherit;border:0;line-height:1;cursor:inherit}:host ::ng-deep solaris-icon.solaris-form-prefix,:host ::ng-deep solaris-icon.solaris-form-suffix,:host ::ng-deep .solaris-form-prefix solaris-icon,:host ::ng-deep .solaris-form-suffix solaris-icon{inline-size:1em;block-size:1em;flex:0 0 auto;color:inherit;font-size:var(--solaris-font-size-lg);transition:color var(--solaris-motion-duration-slow) ease}:host([data-control-type=textarea]){min-width:0}:host([data-control-type=textarea]) .solaris-form-field__control-wrapper{padding-right:0;overflow:visible}:host([data-control-type=textarea]) .solaris-form-field__control{overflow:visible}:host([data-control-type=textarea][data-control-resize=horizontal]) .solaris-form-field__control-wrapper{width:100%;min-width:8rem;overflow:hidden;resize:horizontal}:host([data-control-type=textarea][data-control-resize=horizontal]) .solaris-form-field__control{min-width:0}:host([data-control-type=textarea][data-control-resize=horizontal]) ::ng-deep textarea[solaris-textarea]{display:block;width:100%;min-width:0;resize:none}:host([data-control-type=textarea][data-control-resize=both]) .solaris-form-field__control-wrapper{width:100%;min-width:8rem;min-height:var(--solaris-form-field-control-height);align-items:stretch;overflow:hidden;resize:both}:host([data-control-type=textarea][data-control-resize=both]) .solaris-form-field__control{align-items:stretch;min-width:0;min-height:0;overflow:hidden}:host([data-control-type=textarea][data-control-resize=both]) ::ng-deep textarea[solaris-textarea]{display:block;flex:1 1 auto;width:100%;height:100%;min-width:0;min-height:0;resize:none}.solaris-form-field__message-row{margin-top:var(--solaris-form-field-message-margin-top)}.solaris-form-field__hint{margin:var(--solaris-spacing-1);color:var(--solaris-form-field-hint-color);font-size:var(--solaris-form-field-hint-font-size)}.solaris-form-field__error{margin:var(--solaris-spacing-1);color:var(--solaris-form-field-error-color);font-size:var(--solaris-form-field-error-font-size)}:host([data-size=sm]){--solaris-form-field-control-gap: var(--solaris-spacing-1);--solaris-form-field-font-size: var(--solaris-font-size-sm);--solaris-form-field-control-height: var(--solaris-spacing-8);--solaris-form-field-control-padding-x: var(--solaris-spacing-2);--solaris-form-field-hint-font-size: var(--solaris-font-size-xs);--solaris-form-field-label-font-size: var(--solaris-font-size-xs);--solaris-form-field-error-font-size: var(--solaris-font-size-xs);--solaris-form-field-message-margin-top: var(--solaris-spacing-1);--solaris-form-field-label-margin-bottom: var(--solaris-spacing-1);--solaris-form-field-optional-font-size: var(--solaris-font-size-xs)}:host([data-size=md]){--solaris-form-field-control-height: var(--solaris-spacing-10);--solaris-form-field-control-gap: var(--solaris-spacing-2);--solaris-form-field-font-size: var(--solaris-font-size-md);--solaris-form-field-control-padding-x: var(--solaris-spacing-3);--solaris-form-field-hint-font-size: var(--solaris-font-size-xs);--solaris-form-field-error-font-size: var(--solaris-font-size-xs);--solaris-form-field-label-font-size: var(--solaris-font-size-sm);--solaris-form-field-message-margin-top: var(--solaris-spacing-1);--solaris-form-field-label-margin-bottom: var(--solaris-spacing-1);--solaris-form-field-optional-font-size: var(--solaris-font-size-xs)}:host([data-size=lg]){--solaris-form-field-control-height: var(--solaris-spacing-12);--solaris-form-field-control-gap: var(--solaris-spacing-2);--solaris-form-field-font-size: var(--solaris-font-size-lg);--solaris-form-field-control-padding-x: var(--solaris-spacing-4);--solaris-form-field-hint-font-size: var(--solaris-font-size-xs);--solaris-form-field-label-font-size: var(--solaris-font-size-md);--solaris-form-field-error-font-size: var(--solaris-font-size-xs);--solaris-form-field-message-margin-top: var(--solaris-spacing-2);--solaris-form-field-label-margin-bottom: var(--solaris-spacing-2);--solaris-form-field-optional-font-size: var(--solaris-font-size-xs)}:host([data-density=compact]){--solaris-form-field-control-height: var(--solaris-density-min-height);--solaris-form-field-control-gap: var(--solaris-spacing-1);--solaris-form-field-font-size: var(--solaris-font-size-sm);--solaris-form-field-control-padding-x: var(--solaris-spacing-2);--solaris-form-field-hint-font-size: var(--solaris-font-size-xs);--solaris-form-field-label-font-size: var(--solaris-font-size-xs);--solaris-form-field-error-font-size: var(--solaris-font-size-xs);--solaris-form-field-message-margin-top: var(--solaris-spacing-1);--solaris-form-field-label-margin-bottom: var(--solaris-spacing-1);--solaris-form-field-optional-font-size: var(--solaris-font-size-xs)}:host([data-density=comfortable]){--solaris-form-field-control-height: var(--solaris-density-min-height);--solaris-form-field-control-gap: var(--solaris-spacing-2);--solaris-form-field-control-padding-x: var(--solaris-spacing-3);--solaris-form-field-hint-font-size: var(--solaris-font-size-xs);--solaris-form-field-error-font-size: var(--solaris-font-size-xs);--solaris-form-field-message-margin-top: var(--solaris-spacing-2);--solaris-form-field-label-margin-bottom: var(--solaris-spacing-2);--solaris-form-field-optional-font-size: var(--solaris-font-size-xs)}:host([data-radius=none]){--solaris-form-field-control-radius: var(--solaris-radius-none)}:host([data-radius=sm]){--solaris-form-field-control-radius: var(--solaris-radius-sm)}:host([data-radius=md]){--solaris-form-field-control-radius: var(--solaris-radius-md)}:host([data-radius=lg]){--solaris-form-field-control-radius: var(--solaris-radius-lg)}:host([data-focused]){--solaris-form-field-control-border-color: var( --solaris-form-field-focus-ring-color )}:host([data-disabled]){--solaris-form-field-control-color: var( --solaris-text-disabled, var(--solaris-text-muted) );--solaris-form-field-control-background: var( --solaris-surface-disabled, var(--solaris-surface-muted) );opacity:var(--solaris-form-field-disabled-opacity);cursor:not-allowed}:host([data-readonly]){--solaris-form-field-control-border-color: var(--solaris-border-subtle);--solaris-form-field-control-background: var( --solaris-form-field-readonly-background )}:host([data-appearance=outline]),:host([data-appearance=surface]),:host([data-appearance=filled]){--solaris-form-field-disabled-opacity: .5;--solaris-form-field-focus-ring-width: 2px;--solaris-form-field-hint-color: var(--solaris-text-muted);--solaris-form-field-prefix-color: var(--solaris-text-muted);--solaris-form-field-suffix-color: var(--solaris-text-muted);--solaris-form-field-error-color: var(--solaris-danger-text);--solaris-form-field-label-color: var(--solaris-text-default);--solaris-form-field-optional-color: var(--solaris-text-muted);--solaris-form-field-focus-ring-color: var(--solaris-primary-base);--solaris-form-field-error-border-color: var(--solaris-danger-base);--solaris-form-field-label-font-weight: var(--solaris-font-weight-medium)}:host([data-appearance=outline]){--solaris-form-field-control-border-width: var(--solaris-border-width-sm);--solaris-form-field-control-background: var(--solaris-surface-base);--solaris-form-field-readonly-background: var(--solaris-surface-muted);--solaris-form-field-control-border-color: var(--solaris-border-subtle)}:host([data-appearance=surface]){--solaris-form-field-control-border-width: 0;--solaris-form-field-readonly-background: var(--solaris-surface-base);--solaris-form-field-control-background: var(--solaris-surface-subtle);--solaris-form-field-control-border-color: var(--solaris-border-subtle)}:host([data-appearance=filled]){--solaris-form-field-control-background: var(--solaris-surface-subtle);--solaris-form-field-readonly-background: var(--solaris-surface-muted);--solaris-form-field-control-border-color: var(--solaris-border-subtle);--solaris-form-field-control-border-width: var(--solaris-border-width-sm)}:host([data-invalid]){--solaris-form-field-control-border-color: var( --solaris-form-field-error-border-color )}:host([data-invalid][data-focused]){--solaris-form-field-control-border-color: var( --solaris-form-field-error-border-color );outline-color:var(--solaris-form-field-error-border-color)}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { hintKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "hintKey", required: false }] }], labelKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelKey", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], errorKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorKey", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], optionalLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionalLabel", required: false }] }], requiredLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "requiredLabel", required: false }] }], optionalLabelKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionalLabelKey", required: false }] }], requiredLabelKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "requiredLabelKey", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], optional: [{ type: i0.Input, args: [{ isSignal: true, alias: "optional", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], density: [{ type: i0.Input, args: [{ isSignal: true, alias: "density", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], radius: [{ type: i0.Input, args: [{ isSignal: true, alias: "radius", required: false }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], control: [{ type: i0.Input, args: [{ isSignal: true, alias: "control", required: false }] }], projectedLabel: [{
+                type: ContentChild,
+                args: [SolarisFormLabelComponent]
+            }], projectedHint: [{
+                type: ContentChild,
+                args: [SolarisFormHintComponent]
+            }], projectedError: [{
+                type: ContentChild,
+                args: [SolarisFormErrorComponent]
+            }], prefix: [{
+                type: ContentChild,
+                args: [SolarisFormPrefixDirective]
+            }], suffix: [{
+                type: ContentChild,
+                args: [SolarisFormSuffixDirective]
+            }], formControl: [{
+                type: ContentChild,
+                args: [SolarisFormControl]
+            }], formControlDirective: [{
+                type: ContentChild,
+                args: [FormControlDirective]
+            }], formControlName: [{
+                type: ContentChild,
+                args: [FormControlName]
+            }], ngModelDir: [{
+                type: ContentChild,
+                args: [NgModel]
+            }] } });
+//# sourceMappingURL=form-field.component.js.map

package/esm2022/lib/components/forms/form-field/component/form-field.component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"form-field.component.js","sourceRoot":"","sources":["../../../../../../../../../packages/angular/src/lib/components/forms/form-field/component/form-field.component.ts","../../../../../../../../../packages/angular/src/lib/components/forms/form-field/component/form-field.component.html"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  input,\n  computed,\n  signal,\n  effect,\n  ContentChild,\n  AfterContentInit,\n  OnDestroy,\n  ElementRef,\n  inject,\n  NgZone,\n} from '@angular/core';\nimport { FormControlDirective, FormControlName, NgModel } from '@angular/forms';\n\nimport { SolarisFormPrefixDirective } from '../directives/form-prefix.directive';\nimport { SolarisFormSuffixDirective } from '../directives/form-suffix.directive';\nimport { SolarisTranslateService } from '../../../../services/translation';\nimport { SolarisFormControl } from '../model/form-control.contract';\nimport { SolarisFormLabelComponent } from './form-label.component';\nimport { SolarisFormErrorComponent } from './form-error.component';\nimport { SolarisFormHintComponent } from './form-hint.component';\n\nimport type {\n  SolarisFormFieldAppearance,\n  SolarisFormFieldSize,\n  SolarisFormFieldDensity,\n  SolarisFormFieldRadius,\n  ControlResize,\n} from '../model/form-field.types';\n\nlet nextId = 0;\nfunction generateId(): string {\n  return `solaris-form-field-${++nextId}`;\n}\n\n@Component({\n  selector: 'solaris-form-field',\n  standalone: true,\n  imports: [],\n  templateUrl: './form-field.component.html',\n  styleUrls: ['./form-field.component.scss'],\n  host: {\n    '[attr.data-size]': 'size()',\n    '[attr.data-radius]': 'radius()',\n    '[attr.data-bwignore]': '\"true\"',\n    '[attr.data-appearance]': 'appearance()',\n    '[attr.data-density]': 'effectiveDensity()',\n    '[attr.data-control-type]': 'controlType()',\n    '[attr.data-control-resize]': 'controlResize()',\n    '[attr.data-invalid]': 'isInvalid() ? \"\" : null',\n    '[attr.data-focused]': 'isFocused() ? \"\" : null',\n    '[attr.data-has-prefix]': 'hasPrefix() ? \"\" : null',\n    '[attr.data-has-suffix]': 'hasSuffix() ? \"\" : null',\n    '[attr.data-disabled]': 'isEffectivelyDisabled() ? \"\" : null',\n    '[attr.data-readonly]': 'isEffectivelyReadonly() ? \"\" : null',\n  },\n})\nexport class SolarisFormFieldComponent implements AfterContentInit, OnDestroy {\n  private readonly elementRef = inject<ElementRef<HTMLElement>>(ElementRef);\n  private readonly translateService = inject(SolarisTranslateService);\n  private readonly ngZone = inject(NgZone);\n\n  constructor() {\n    // SECURITY_EXCEPTION: Setting disabled/readonly on native control is standard DOM API.\n    // SECURITY_EXCEPTION: Required for FormField to propagate disabled/readonly state to projected control.\n    effect(() => {\n      this.isEffectivelyDisabled();\n      this.isEffectivelyReadonly();\n      this.syncControlDisabledReadonly();\n    });\n  }\n\n  readonly hintKey = input<string>();\n  readonly labelKey = input<string>();\n  readonly hint = input<string>('');\n  readonly errorKey = input<string>();\n  readonly label = input<string>('');\n  readonly error = input<string>('');\n  readonly optionalLabel = input<string>();\n  readonly requiredLabel = input<string>();\n  readonly optionalLabelKey = input<string>();\n  readonly requiredLabelKey = input<string>();\n  readonly required = input<boolean>(false);\n  readonly optional = input<boolean>(false);\n  readonly invalid = input<boolean | undefined>();\n  readonly disabled = input<boolean | undefined>();\n  readonly readonly = input<boolean | undefined>();\n  readonly density = input<SolarisFormFieldDensity>();\n  readonly size = input<SolarisFormFieldSize>('md');\n  readonly radius = input<SolarisFormFieldRadius>('md');\n  readonly appearance = input<SolarisFormFieldAppearance>('outline');\n  readonly control = input<SolarisFormControl | undefined>(undefined);\n\n  @ContentChild(SolarisFormLabelComponent)\n  protected projectedLabel?: SolarisFormLabelComponent;\n  @ContentChild(SolarisFormHintComponent)\n  protected projectedHint?: SolarisFormHintComponent;\n  @ContentChild(SolarisFormErrorComponent)\n  protected projectedError?: SolarisFormErrorComponent;\n  @ContentChild(SolarisFormPrefixDirective)\n  protected prefix?: SolarisFormPrefixDirective;\n  @ContentChild(SolarisFormSuffixDirective)\n  protected suffix?: SolarisFormSuffixDirective;\n  @ContentChild(SolarisFormControl)\n  protected formControl?: SolarisFormControl;\n  @ContentChild(FormControlDirective)\n  protected formControlDirective?: FormControlDirective;\n  @ContentChild(FormControlName)\n  protected formControlName?: FormControlName;\n  @ContentChild(NgModel)\n  protected ngModelDir?: NgModel;\n\n  protected readonly fieldId = generateId();\n  protected readonly hintId = `solaris-form-field-hint-${this.fieldId}`;\n  protected readonly errorId = `solaris-form-field-error-${this.fieldId}`;\n  protected readonly labelId = `solaris-form-field-label-${this.fieldId}`;\n\n  protected readonly isFocused = signal(false);\n  protected readonly isTextareaControl = signal(false);\n  protected readonly autoDetectedDisabled = signal(false);\n  protected readonly autoDetectedReadonly = signal(false);\n  protected readonly controlResize = signal<ControlResize | null>(null);\n\n  protected readonly maxLength = signal<number | undefined>(undefined);\n  protected readonly currentLength = signal<number>(0);\n  protected readonly showCharacterCounter = computed(() => {\n    const max = this.maxLength();\n    return max !== undefined && max > 0;\n  });\n  protected readonly characterCounterText = computed(() => {\n    const max = this.maxLength();\n    if (max === undefined || max <= 0) return '';\n    const current = this.currentLength();\n    return `${current}/${max}`;\n  });\n  protected readonly characterCounterSeverity = computed<\n    'normal' | 'warning' | 'danger'\n  >(() => {\n    const max = this.maxLength();\n    const current = this.currentLength();\n    if (max === undefined || max <= 0) return 'normal';\n    const ratio = current / max;\n    if (ratio >= 1) return 'danger';\n    if (ratio >= 0.9) return 'warning';\n    return 'normal';\n  });\n\n  protected controlId: string | null = null;\n  private controlElement: HTMLElement | null = null;\n  private focusListener: (() => void) | null = null;\n  private blurListener: (() => void) | null = null;\n  private inputListener: (() => void) | null = null;\n\n  protected readonly hasProjectedLabel = computed(() => !!this.projectedLabel);\n  protected readonly hasProjectedHint = computed(() => !!this.projectedHint);\n  protected readonly hasProjectedError = computed(() => !!this.projectedError);\n  protected readonly hasPrefix = signal(false);\n  protected readonly hasSuffix = signal(false);\n\n  protected readonly controlType = computed<\n    'input' | 'textarea' | 'select' | 'other'\n  >(() => {\n    return this.isTextareaControl() ? 'textarea' : 'other';\n  });\n\n  protected readonly effectiveDensity = computed<SolarisFormFieldDensity>(\n    () => {\n      return this.density() ?? 'comfortable';\n    },\n  );\n\n  protected readonly labelText = computed(() => {\n    const key = this.labelKey();\n    if (key) {\n      return this.translateService.translate(key);\n    }\n    return this.label();\n  });\n\n  protected readonly hintText = computed(() => {\n    const key = this.hintKey();\n    if (key) {\n      return this.translateService.translate(key);\n    }\n    return this.hint();\n  });\n\n  protected readonly errorText = computed(() => {\n    const key = this.errorKey();\n    if (key) {\n      return this.translateService.translate(key);\n    }\n    return this.error();\n  });\n\n  protected readonly optionalLabelText = computed(() => {\n    const key = this.optionalLabelKey();\n    if (key) {\n      return this.translateService.translate(key);\n    }\n    const explicit = this.optionalLabel();\n    if (explicit) {\n      return explicit;\n    }\n    return this.translateService.translate('solaris.form-field.optional');\n  });\n\n  protected readonly isEffectivelyDisabled = computed(() => {\n    const manual = this.disabled();\n    if (manual !== undefined) {\n      return manual;\n    }\n    const explicitControl = this.control();\n    if (explicitControl) {\n      return explicitControl.disabled;\n    }\n    if (this.formControl) {\n      return this.formControl.disabled;\n    }\n    return this.autoDetectedDisabled();\n  });\n\n  protected readonly isEffectivelyReadonly = computed(() => {\n    const manual = this.readonly();\n    if (manual !== undefined) {\n      return manual;\n    }\n    const explicitControl = this.control();\n    if (explicitControl) {\n      return explicitControl.readonly;\n    }\n    if (this.formControl) {\n      return this.formControl.readonly;\n    }\n    return this.autoDetectedReadonly();\n  });\n\n  protected readonly effectiveNgControl = computed(() => {\n    return (\n      this.formControlDirective ??\n      this.formControlName ??\n      this.ngModelDir ??\n      null\n    );\n  });\n\n  protected readonly isAutoInvalid = computed(() => {\n    const control = this.effectiveNgControl();\n    if (!control?.control) {\n      return false;\n    }\n    const ctrl = control.control;\n    const invalid = ctrl.invalid;\n    const touched = ctrl.touched;\n    const dirty = ctrl.dirty;\n    const focused = this.isFocused();\n    if (!invalid) {\n      return false;\n    }\n    if (focused) {\n      return false;\n    }\n    return touched || dirty;\n  });\n\n  protected readonly isInvalid = computed(() => {\n    const manual = this.invalid();\n    if (manual !== undefined) {\n      return manual;\n    }\n    const explicitControl = this.control();\n    if (explicitControl) {\n      return explicitControl.invalid;\n    }\n    if (this.formControl) {\n      return this.formControl.invalid && !this.isFocused();\n    }\n    return this.isAutoInvalid();\n  });\n\n  protected readonly showError = computed(() => {\n    return this.isInvalid() && (!!this.errorText() || this.hasProjectedError());\n  });\n\n  protected readonly showHint = computed(() => {\n    if (this.showError()) {\n      return false;\n    }\n    return !!this.hintText() || this.hasProjectedHint();\n  });\n\n  protected readonly describedBy = computed(() => {\n    const ids: string[] = [];\n    if (this.showHint()) {\n      ids.push(this.hintId);\n    }\n    if (this.showError()) {\n      ids.push(this.errorId);\n    }\n    return ids.length > 0 ? ids.join(' ') : null;\n  });\n\n  ngAfterContentInit(): void {\n    this.hasPrefix.set(!!this.prefix);\n    this.hasSuffix.set(!!this.suffix);\n    this.detectControl();\n    this.connectControl();\n    this.syncDescribedBy();\n    this.syncControlDisabledReadonly();\n    this.warnNoControl();\n    this.warnMultipleControls();\n  }\n\n  private syncControlDisabledReadonly(): void {\n    if (!this.controlElement) {\n      return;\n    }\n    if (this.control()) {\n      return;\n    }\n    // SECURITY_EXCEPTION: Setting disabled/readonly on native control is required for FormField propagation.\n    const input = this.controlElement as HTMLInputElement;\n    const shouldDisable = this.isEffectivelyDisabled();\n    const shouldReadonly = this.isEffectivelyReadonly();\n    if (input.disabled !== shouldDisable) {\n      input.disabled = shouldDisable;\n    }\n    if (input.readOnly !== shouldReadonly) {\n      input.readOnly = shouldReadonly;\n    }\n  }\n\n  private syncDescribedBy(): void {\n    const describedBy = this.describedBy();\n    const targetControl = this.control() ?? this.formControl;\n    if (targetControl) {\n      if (describedBy) {\n        targetControl.setDescribedByIds(describedBy.split(' '));\n      } else {\n        targetControl.setDescribedByIds([]);\n      }\n    }\n  }\n\n  protected readonly describedByEffect = effect(() => {\n    this.describedBy();\n    this.syncDescribedBy();\n  });\n\n  ngOnDestroy(): void {\n    this.removeListeners();\n  }\n\n  private detectControl(): void {\n    const explicitControl = this.control();\n    if (explicitControl) {\n      this.controlId = explicitControl.id;\n      // SECURITY_EXCEPTION: nativeElement.querySelector required to find trigger element. Standard DOM API used after Angular CDK pattern.\n      const triggerEl = this.elementRef.nativeElement.querySelector(\n        '[solaris-form-field-trigger]',\n      );\n      if (triggerEl) {\n        this.controlElement = triggerEl as HTMLElement;\n        if (triggerEl.id) {\n          this.controlId = triggerEl.id;\n        }\n        this.connectControl();\n      }\n      return;\n    }\n\n    // SECURITY_EXCEPTION: nativeElement access required to detect projected form controls.\n    // SECURITY_EXCEPTION: Angular CDK and Material use the same approach.\n    // SECURITY_EXCEPTION: Read-only querySelectorAll, no DOM mutation.\n    const nativeElement = this.elementRef.nativeElement;\n    const children = nativeElement.querySelectorAll(\n      'input, select, textarea, [solaris-input], [solaris-select], [solaris-textarea]',\n    );\n\n    if (children.length > 0) {\n      const first = children[0] as HTMLElement;\n      this.controlElement = first;\n      // SECURITY_EXCEPTION: nativeElement.tagName is the standard DOM API to check element type.\n      const isTextarea = first.tagName === 'TEXTAREA';\n      this.isTextareaControl.set(isTextarea);\n\n      // SECURITY_EXCEPTION: getAttribute is the standard DOM API to read HTML attributes.\n      const maxlengthAttr = first.getAttribute('maxlength');\n      if (maxlengthAttr !== null) {\n        const parsed = parseInt(maxlengthAttr, 10);\n        this.maxLength.set(!isNaN(parsed) ? parsed : undefined);\n      } else {\n        this.maxLength.set(undefined);\n      }\n      // SECURITY_EXCEPTION: reading value.length from native input/textarea is required for character counter.\n      this.currentLength.set(\n        (first as HTMLInputElement | HTMLTextAreaElement).value?.length ?? 0,\n      );\n\n      if (isTextarea) {\n        const resize = first.dataset['resize'] ?? first.getAttribute('resize');\n\n        const validResize: ControlResize =\n          resize === 'none' ||\n          resize === 'vertical' ||\n          resize === 'horizontal' ||\n          resize === 'both'\n            ? resize\n            : 'vertical';\n\n        this.controlResize.set(validResize);\n      } else {\n        this.controlResize.set(null);\n      }\n    }\n\n    if (this.formControl) {\n      this.controlId = this.formControl.id;\n    } else if (this.controlElement) {\n      if (!this.controlElement.id) {\n        const generatedId = `solaris-control-${this.fieldId}`;\n        this.controlElement.id = generatedId;\n        this.controlId = generatedId;\n      } else {\n        this.controlId = this.controlElement.id;\n      }\n    }\n  }\n\n  private connectControl(): void {\n    if (this.controlElement) {\n      this.addListeners(this.controlElement);\n    }\n  }\n\n  private addListeners(element: HTMLElement): void {\n    this.removeListeners();\n    this.ngZone.runOutsideAngular(() => {\n      const onFocus = (): void => {\n        this.ngZone.run(() => this.isFocused.set(true));\n      };\n      const onBlur = (): void => {\n        this.ngZone.run(() => this.isFocused.set(false));\n      };\n      const onInput = (): void => {\n        // SECURITY_EXCEPTION: reading value.length from native input/textarea is standard DOM API for character counter.\n        this.ngZone.run(() => {\n          this.currentLength.set(\n            (element as HTMLInputElement | HTMLTextAreaElement).value?.length ??\n              0,\n          );\n        });\n      };\n      element.addEventListener('focusin', onFocus);\n      element.addEventListener('focusout', onBlur);\n      element.addEventListener('input', onInput);\n      this.focusListener = () =>\n        element.removeEventListener('focusin', onFocus);\n      this.blurListener = () => element.removeEventListener('focusout', onBlur);\n      this.inputListener = () => element.removeEventListener('input', onInput);\n    });\n  }\n\n  private removeListeners(): void {\n    this.focusListener?.();\n    this.blurListener?.();\n    this.inputListener?.();\n    this.focusListener = null;\n    this.blurListener = null;\n    this.inputListener = null;\n  }\n\n  private warnNoControl(): void {\n    const hasAnyControl =\n      !!this.control() ||\n      !!this.formControl ||\n      !!this.controlElement ||\n      !!this.effectiveNgControl();\n    if (!hasAnyControl) {\n      console.warn(\n        `[SolarisFormField] No form control found inside <solaris-form-field id=\"${this.fieldId}\">. ` +\n          'Form Field requires a control (input, select, textarea, or a Solaris form control directive). ' +\n          'This warning is shown in development only. The component will render safely without the control.',\n      );\n    }\n  }\n\n  private warnMultipleControls(): void {\n    // SECURITY_EXCEPTION: nativeElement access required to count projected controls.\n    // SECURITY_EXCEPTION: Same justification as detectControl: read-only query, no DOM mutation.\n    const nativeElement = this.elementRef.nativeElement;\n    const children = nativeElement.querySelectorAll(\n      'input, select, textarea, [solaris-input], [solaris-select], [solaris-textarea]',\n    );\n    if (children.length > 1) {\n      console.warn(\n        `[SolarisFormField] Multiple form controls detected inside <solaris-form-field id=\"${this.fieldId}\">. ` +\n          'Form Field v1 supports one main control. Multiple controls may cause unexpected behavior.',\n      );\n    }\n  }\n}\n","@if (labelText() || hasProjectedLabel()) {\n  <div class=\"solaris-form-field__label-row\">\n    @if (hasProjectedLabel()) {\n      <ng-content select=\"solaris-form-label\" />\n    } @else if (labelText()) {\n      <label\n        class=\"solaris-form-field__label\"\n        [id]=\"labelId\"\n        [for]=\"controlId ?? undefined\"\n      >\n        {{ labelText() }}\n      </label>\n    }\n    @if (optional()) {\n      <span\n        class=\"solaris-form-field__optional-marker\"\n        [attr.aria-label]=\"optionalLabelText()\"\n      >\n        {{ optionalLabelText() }}\n      </span>\n    }\n    @if (showCharacterCounter()) {\n      <span\n        class=\"solaris-form-field__character-counter\"\n        aria-live=\"polite\"\n        [attr.aria-label]=\"characterCounterText()\"\n        [attr.data-severity]=\"characterCounterSeverity()\"\n      >\n        {{ characterCounterText() }}\n      </span>\n    }\n  </div>\n}\n\n<div class=\"solaris-form-field__control-wrapper\">\n  <span\n    class=\"solaris-form-field__affix solaris-form-field__affix--prefix\"\n    [attr.data-empty]=\"hasPrefix() ? null : ''\"\n  >\n    <ng-content select=\"[solaris-form-prefix]\" />\n  </span>\n\n  <div class=\"solaris-form-field__control\">\n    <ng-content />\n  </div>\n\n  <span\n    class=\"solaris-form-field__affix solaris-form-field__affix--suffix\"\n    [attr.data-empty]=\"hasSuffix() ? null : ''\"\n  >\n    <ng-content select=\"[solaris-form-suffix]\" />\n  </span>\n</div>\n\n@if (showError() || showHint()) {\n  <div class=\"solaris-form-field__message-row\">\n    @if (showError()) {\n      <div class=\"solaris-form-field__error\" [id]=\"errorId\" role=\"alert\">\n        @if (hasProjectedError()) {\n          <ng-content select=\"solaris-form-error\" />\n        } @else {\n          {{ errorText() }}\n        }\n      </div>\n    } @else if (showHint()) {\n      <div class=\"solaris-form-field__hint\" [id]=\"hintId\">\n        @if (hasProjectedHint()) {\n          <ng-content select=\"solaris-form-hint\" />\n        } @else {\n          {{ hintText() }}\n        }\n      </div>\n    }\n  </div>\n}\n"]}

package/esm2022/lib/components/forms/form-field/component/form-hint.component.js

@@ -0,0 +1,18 @@
+import { Component } from '@angular/core';
+import * as i0 from "@angular/core";
+export class SolarisFormHintComponent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SolarisFormHintComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.17", type: SolarisFormHintComponent, isStandalone: true, selector: "solaris-form-hint", host: { classAttribute: "solaris-form-hint" }, ngImport: i0, template: '<ng-content />', isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SolarisFormHintComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'solaris-form-hint',
+                    standalone: true,
+                    template: '<ng-content />',
+                    host: {
+                        class: 'solaris-form-hint',
+                    },
+                }]
+        }] });
+//# sourceMappingURL=form-hint.component.js.map

package/esm2022/lib/components/forms/form-field/component/form-hint.component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"form-hint.component.js","sourceRoot":"","sources":["../../../../../../../../../packages/angular/src/lib/components/forms/form-field/component/form-hint.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;;AAU1C,MAAM,OAAO,wBAAwB;wGAAxB,wBAAwB;4FAAxB,wBAAwB,4HALzB,gBAAgB;;4FAKf,wBAAwB;kBARpC,SAAS;mBAAC;oBACT,QAAQ,EAAE,mBAAmB;oBAC7B,UAAU,EAAE,IAAI;oBAChB,QAAQ,EAAE,gBAAgB;oBAC1B,IAAI,EAAE;wBACJ,KAAK,EAAE,mBAAmB;qBAC3B;iBACF","sourcesContent":["import { Component } from '@angular/core';\n\n@Component({\n  selector: 'solaris-form-hint',\n  standalone: true,\n  template: '<ng-content />',\n  host: {\n    class: 'solaris-form-hint',\n  },\n})\nexport class SolarisFormHintComponent {}\n"]}