@i-cell/ids-angular 0.1.0 → 0.1.2

package/fesm2022/i-cell-ids-angular-forms.mjs

@@ -1,9 +1,9 @@
 import * as i0 from '@angular/core';
-import { Injectable, signal, Component, ViewEncapsulation, ChangeDetectionStrategy, InjectionToken, Directive, input, contentChildren, computed, Input, inject, Injector, ChangeDetectorRef, viewChild, contentChild, isDevMode, ElementRef, effect, output } from '@angular/core';
+import { Injectable, signal, Component, ViewEncapsulation, ChangeDetectionStrategy, InjectionToken, Directive, input, contentChildren, computed, Input, inject, ElementRef, ChangeDetectorRef, viewChild, contentChild, isDevMode, effect, output } from '@angular/core';
 import { ComponentBase, IdsSize, ComponentBaseWithDefaults, coerceBooleanAttribute } from '@i-cell/ids-angular/core';
-import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { toObservable, takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { IdsIconComponent } from '@i-cell/ids-angular/icon';
-import { startWith, Subject } from 'rxjs';
+import { tap, map, of, switchMap, Subject } from 'rxjs';
 import { Validators, FormGroupDirective, NgForm, NgControl } from '@angular/forms';
 import { hasModifierKey } from '@angular/cdk/keycodes';
 
@@ -246,6 +246,71 @@ function requiredFalseValidator(control) {
     return control.value === false ? null : { requiredFalse: true };
 }
 
+/**
+ * Directive to map an error message to an error code for a form field.
+ * Mappings must be defined between the directive element's tags ordered by priority (descending from top to bottom).
+ * The error code is provided as an attribute, while the error message will be this directive's text content.
+ * The latter can be a plain string literal or even an interpolated string value.
+ *
+ * @example
+ * ```html
+ * <ids-form-field>
+ *   <ids-label>Input field</ids-label>
+ *   <input
+ *     idsInput
+ *     ngModel
+ *     customValidator
+ *     required
+ *     [minlength]="3"
+ *     [maxlength]="10"
+ *     [pattern]="validPattern"
+ *   >
+ *   <ids-error-message>
+ *     <ids-error-def code="required">{{ 'ERROR.REQUIRED.CUSTOM' | translate }}</ids-error-def>
+ *     <ids-error-def code="minlength">'minLength' error message</ids-error-def>
+ *     <ids-error-def code="maxlength">'maxLength' error message</ids-error-def>
+ *     <ids-error-def code="pattern">'pattern' error message with interpolation: {{ model.value }}</ids-error-def>
+ *     <ids-error-def code="custom">Custom validator error message</ids-error-def>
+ *   </ids-error-message>
+ * </ids-form-field>
+ * ```
+ */
+class IdsErrorDefinitionDirective {
+    constructor() {
+        /**
+         * The validation error's identifier code
+         */
+        this.code = input.required();
+        this._elementRef = inject(ElementRef);
+    }
+    /**
+     * The validation error's message that will be presented to the user
+     */
+    get errorMessage() {
+        return this._elementRef.nativeElement.innerText;
+    }
+    /**
+     * Creates a IdsErrorMessageMapping instance based on this directive's state (code, errorMessage)
+     * @returns A IdsErrorMessageMapping instance
+     */
+    toErrorMessageMapping() {
+        // eslint-disable-next-line @typescript-eslint/no-this-alias
+        const self = this;
+        return {
+            code: this.code(),
+            message: () => self.errorMessage,
+        };
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.2", ngImport: i0, type: IdsErrorDefinitionDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.1.2", type: IdsErrorDefinitionDirective, isStandalone: true, selector: "ids-error-def", inputs: { code: { classPropertyName: "code", publicName: "code", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.2", ngImport: i0, type: IdsErrorDefinitionDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'ids-error-def',
+                }]
+        }] });
+
 class IdsMessageSuffixDirective {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.2", ngImport: i0, type: IdsMessageSuffixDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.1.2", type: IdsMessageSuffixDirective, isStandalone: true, selector: "[idsMessageSuffix]", ngImport: i0 }); }
@@ -310,32 +375,47 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.2", ngImpor
         }] });
 
 class IdsErrorMessageComponent extends ComponentBase {
+    get _hostName() {
+        return 'error-message';
+    }
     constructor() {
-        super(...arguments);
-        this._injector = inject(Injector);
-        this._errors = signal(null);
+        super();
+        this._parent = inject(IdsFormFieldComponent, { skipSelf: true });
+        this._control = signal(null);
+        this._errorDefDirs = contentChildren(IdsErrorDefinitionDirective);
+        this._errorDefs = computed(() => this._errorDefDirs().map((errorDefDir) => errorDefDir.toErrorMessageMapping()));
+        this._validationError = signal(null);
         this._hostClasses = computed(() => this._getHostClasses([]));
         this.suffixes = contentChildren(IdsMessageSuffixDirective);
+        toObservable(this._parent.control).pipe(tap((controlDir) => this._control.set(controlDir?.control ?? null)), map((controlDir) => controlDir?.statusChanges ?? of(null)), switchMap((statusChanges) => statusChanges), takeUntilDestroyed(this._destroyRef)).subscribe((status) => {
+            if (status === 'INVALID') {
+                const nextError = this._selectMostImportantValidationError();
+                this._validationError.set(nextError);
+            }
+            else {
+                this._validationError.set(null);
+            }
+        });
     }
-    get _hostName() {
-        return 'error-message';
-    }
-    ngOnInit() {
-        const parent = this._injector.get(IdsFormFieldComponent, null, { skipSelf: true, optional: true });
-        if (parent) {
-            const control = parent.control();
-            control?.statusChanges?.pipe(startWith(control.errors), takeUntilDestroyed(this._destroyRef)).subscribe(() => {
-                this._errors.set(control.errors);
-            });
+    _selectMostImportantValidationError() {
+        const errorDefs = this._errorDefs();
+        const control = this._control();
+        if (!errorDefs?.length || !control?.errors || Object.keys(control.errors).length === 0) {
+            return null;
         }
+        const errorCodes = new Set(Object.keys(control.errors));
+        return errorDefs.find((errorDef) => errorCodes.has(errorDef.code)) ?? null;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.2", ngImport: i0, type: IdsErrorMessageComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.2", type: IdsErrorMessageComponent, isStandalone: true, selector: "ids-error-message", queries: [{ propertyName: "suffixes", predicate: IdsMessageSuffixDirective, isSignal: true }], usesInheritance: true, hostDirectives: [{ directive: IdsMessageDirective }], ngImport: i0, template: "<div class=\"ids-message__prefix\">\n  <ng-content select=\"[idsMessagePrefix]\">\n    <ids-icon aria-hidden=\"true\" fontIcon=\"exclamation-circle\" />\n  </ng-content>\n</div>\n<div class=\"ids-message__text\">\n  <ng-content />\n</div>\n@if (suffixes().length) {\n  <div class=\"ids-message__suffix\">\n    <ng-content select=\"[idsMessageSuffix]\" />\n  </div>\n}\n", dependencies: [{ kind: "component", type: IdsIconComponent, selector: "ids-icon", inputs: ["size", "sizeCollection", "variant", "fontIcon", "svgIcon", "aria-hidden"] }], encapsulation: i0.ViewEncapsulation.None }); }
+    _getValidationErrorMessage(messageOrFn) {
+        return messageOrFn instanceof Function ? messageOrFn() : messageOrFn;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.2", ngImport: i0, type: IdsErrorMessageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.2", type: IdsErrorMessageComponent, isStandalone: true, selector: "ids-error-message", queries: [{ propertyName: "_errorDefDirs", predicate: IdsErrorDefinitionDirective, isSignal: true }, { propertyName: "suffixes", predicate: IdsMessageSuffixDirective, isSignal: true }], usesInheritance: true, hostDirectives: [{ directive: IdsMessageDirective }], ngImport: i0, template: "<div class=\"ids-message__prefix\">\n  <ng-content select=\"[idsMessagePrefix]\">\n    <ids-icon aria-hidden=\"true\" fontIcon=\"exclamation-circle\" variant=\"error\" />\n  </ng-content>\n</div>\n<div class=\"ids-message__text\">\n  @let validationError = _validationError();\n  @if (validationError) {\n    @let messageString = _getValidationErrorMessage(validationError.message);\n    {{ messageString }}\n  }\n</div>\n@if (suffixes().length) {\n  <div class=\"ids-message__suffix\">\n    <ng-content select=\"[idsMessageSuffix]\" />\n  </div>\n}\n", dependencies: [{ kind: "component", type: IdsIconComponent, selector: "ids-icon", inputs: ["size", "sizeCollection", "variant", "fontIcon", "svgIcon", "aria-hidden"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.2", ngImport: i0, type: IdsErrorMessageComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ids-error-message', imports: [IdsIconComponent], hostDirectives: [IdsMessageDirective], encapsulation: ViewEncapsulation.None, template: "<div class=\"ids-message__prefix\">\n  <ng-content select=\"[idsMessagePrefix]\">\n    <ids-icon aria-hidden=\"true\" fontIcon=\"exclamation-circle\" />\n  </ng-content>\n</div>\n<div class=\"ids-message__text\">\n  <ng-content />\n</div>\n@if (suffixes().length) {\n  <div class=\"ids-message__suffix\">\n    <ng-content select=\"[idsMessageSuffix]\" />\n  </div>\n}\n" }]
-        }] });
+            args: [{ selector: 'ids-error-message', imports: [IdsIconComponent], hostDirectives: [IdsMessageDirective], encapsulation: ViewEncapsulation.None, template: "<div class=\"ids-message__prefix\">\n  <ng-content select=\"[idsMessagePrefix]\">\n    <ids-icon aria-hidden=\"true\" fontIcon=\"exclamation-circle\" variant=\"error\" />\n  </ng-content>\n</div>\n<div class=\"ids-message__text\">\n  @let validationError = _validationError();\n  @if (validationError) {\n    @let messageString = _getValidationErrorMessage(validationError.message);\n    {{ messageString }}\n  }\n</div>\n@if (suffixes().length) {\n  <div class=\"ids-message__suffix\">\n    <ng-content select=\"[idsMessageSuffix]\" />\n  </div>\n}\n" }]
+        }], ctorParameters: () => [] });
 
 class IdsMessagePrefixDirective {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.2", ngImport: i0, type: IdsMessagePrefixDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
@@ -382,11 +462,11 @@ class IdsSuccessMessageComponent extends ComponentBase {
         return 'success-message';
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.2", ngImport: i0, type: IdsSuccessMessageComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.2", type: IdsSuccessMessageComponent, isStandalone: true, selector: "ids-success-message", queries: [{ propertyName: "suffixes", predicate: IdsMessageSuffixDirective, isSignal: true }], usesInheritance: true, hostDirectives: [{ directive: IdsMessageDirective }], ngImport: i0, template: "<div class=\"ids-message__prefix\">\n  <ng-content select=\"[idsMessagePrefix]\">\n    <ids-icon aria-hidden=\"true\" fontIcon=\"check\" />\n  </ng-content>\n</div>\n<div class=\"ids-message__text\">\n  <ng-content />\n</div>\n@if (suffixes().length) {\n  <div class=\"ids-message__suffix\">\n    <ng-content select=\"[idsMessageSuffix]\" />\n  </div>\n}\n", dependencies: [{ kind: "component", type: IdsIconComponent, selector: "ids-icon", inputs: ["size", "sizeCollection", "variant", "fontIcon", "svgIcon", "aria-hidden"] }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.2", type: IdsSuccessMessageComponent, isStandalone: true, selector: "ids-success-message", queries: [{ propertyName: "suffixes", predicate: IdsMessageSuffixDirective, isSignal: true }], usesInheritance: true, hostDirectives: [{ directive: IdsMessageDirective }], ngImport: i0, template: "<div class=\"ids-message__prefix\">\n  <ng-content select=\"[idsMessagePrefix]\">\n    <ids-icon aria-hidden=\"true\" fontIcon=\"check\" variant=\"success\" />\n  </ng-content>\n</div>\n<div class=\"ids-message__text\">\n  <ng-content />\n</div>\n@if (suffixes().length) {\n  <div class=\"ids-message__suffix\">\n    <ng-content select=\"[idsMessageSuffix]\" />\n  </div>\n}\n", dependencies: [{ kind: "component", type: IdsIconComponent, selector: "ids-icon", inputs: ["size", "sizeCollection", "variant", "fontIcon", "svgIcon", "aria-hidden"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.2", ngImport: i0, type: IdsSuccessMessageComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ids-success-message', imports: [IdsIconComponent], hostDirectives: [IdsMessageDirective], encapsulation: ViewEncapsulation.None, template: "<div class=\"ids-message__prefix\">\n  <ng-content select=\"[idsMessagePrefix]\">\n    <ids-icon aria-hidden=\"true\" fontIcon=\"check\" />\n  </ng-content>\n</div>\n<div class=\"ids-message__text\">\n  <ng-content />\n</div>\n@if (suffixes().length) {\n  <div class=\"ids-message__suffix\">\n    <ng-content select=\"[idsMessageSuffix]\" />\n  </div>\n}\n" }]
+            args: [{ selector: 'ids-success-message', imports: [IdsIconComponent], hostDirectives: [IdsMessageDirective], encapsulation: ViewEncapsulation.None, template: "<div class=\"ids-message__prefix\">\n  <ng-content select=\"[idsMessagePrefix]\">\n    <ids-icon aria-hidden=\"true\" fontIcon=\"check\" variant=\"success\" />\n  </ng-content>\n</div>\n<div class=\"ids-message__text\">\n  <ng-content />\n</div>\n@if (suffixes().length) {\n  <div class=\"ids-message__suffix\">\n    <ng-content select=\"[idsMessageSuffix]\" />\n  </div>\n}\n" }]
         }] });
 
 const defaultConfig$1 = IDS_FORM_FIELD_DEFAULT_CONFIG_FACTORY();
@@ -509,7 +589,7 @@ class IdsInputDirective extends ComponentBaseWithDefaults {
         this._defaultConfig = this._getDefaultConfig(defaultConfig, IDS_INPUT_DEFAULT_CONFIG);
         this.errorStateChanges = new Subject();
         this.successStateChanges = new Subject();
-        this.ngControl = inject(NgControl, { optional: true });
+        this.ngControl = inject(NgControl);
         this._focused = false;
         this.placeholder = input('');
         this.name = input();
@@ -556,12 +636,12 @@ class IdsInputDirective extends ComponentBaseWithDefaults {
     }
     _initErrorStateTracker() {
         this._errorStateTracker = new ErrorStateTracker(this.errorStateMatcher(), this.ngControl, this._parentFormGroup, this._parentForm, this.errorStateChanges);
-        this._successStateSubscription = this.errorStateChanges.pipe(takeUntilDestroyed(this._destroyRef)).subscribe(() => this.hasErrorState.set(this._errorStateTracker.hasErrorState));
+        this.errorStateChanges.pipe(takeUntilDestroyed(this._destroyRef)).subscribe(() => this.hasErrorState.set(this._errorStateTracker.hasErrorState));
     }
     _setSuccessStateTracker(canHandleSuccessState) {
         if (canHandleSuccessState) {
             this._successStateTracker = new SuccessStateTracker(this.successStateMatcher(), this.ngControl, this._parentFormGroup, this._parentForm, this.successStateChanges);
-            this.successStateChanges.pipe(takeUntilDestroyed(this._destroyRef)).subscribe(() => this.hasSuccessState.set(this._successStateTracker.hasSuccessState));
+            this._successStateSubscription = this.successStateChanges.pipe(takeUntilDestroyed(this._destroyRef)).subscribe(() => this.hasSuccessState.set(this._successStateTracker.hasSuccessState));
         }
         else {
             this._successStateTracker = undefined;
@@ -867,5 +947,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.2", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AbstractErrorStateMatcher, AbstractSuccessStateMatcher, ErrorStateMatcher, ErrorStateTracker, IDS_FIELDSET_DEFAULT_CONFIG, IDS_FIELDSET_DEFAULT_CONFIG_FACTORY, IDS_FORM_FIELD_CONTROL, IDS_FORM_FIELD_DEFAULT_CONFIG, IDS_FORM_FIELD_DEFAULT_CONFIG_FACTORY, IDS_INPUT_DEFAULT_CONFIG, IDS_INPUT_DEFAULT_CONFIG_FACTORY, IDS_MESSAGE_DEFAULT_CONFIG, IDS_MESSAGE_DEFAULT_CONFIG_FACTORY, IDS_OPTION_GROUP, IDS_OPTION_PARENT_COMPONENT, IDS_PSEUDO_CHECKBOX_PARENT, IdsErrorMessageComponent, IdsFieldsetComponent, IdsFieldsetMessageDirective, IdsFieldsetRowComponent, IdsFormFieldActionDirective, IdsFormFieldComponent, IdsFormFieldControl, IdsFormFieldVariant, IdsHintMessageComponent, IdsInputDirective, IdsLabelDirective, IdsMessageDirective, IdsMessagePrefixDirective, IdsMessageSuffixDirective, IdsMessageVariant, IdsOptionComponent, IdsOptionGroupComponent, IdsOptionSelectionChange, IdsPrefixDirective, IdsPseudoCheckboxState, IdsSuccessMessageComponent, IdsSuffixDirective, IdsValidators, Message, PseudoCheckboxComponent, SuccessStateMatcher, SuccessStateTracker, _countGroupLabelsBeforeOption, _getOptionScrollPosition, formFieldControlClass, requiredFalseValidator, requiredTrueValidator, requiredValidator };
+export { AbstractErrorStateMatcher, AbstractSuccessStateMatcher, ErrorStateMatcher, ErrorStateTracker, IDS_FIELDSET_DEFAULT_CONFIG, IDS_FIELDSET_DEFAULT_CONFIG_FACTORY, IDS_FORM_FIELD_CONTROL, IDS_FORM_FIELD_DEFAULT_CONFIG, IDS_FORM_FIELD_DEFAULT_CONFIG_FACTORY, IDS_INPUT_DEFAULT_CONFIG, IDS_INPUT_DEFAULT_CONFIG_FACTORY, IDS_MESSAGE_DEFAULT_CONFIG, IDS_MESSAGE_DEFAULT_CONFIG_FACTORY, IDS_OPTION_GROUP, IDS_OPTION_PARENT_COMPONENT, IDS_PSEUDO_CHECKBOX_PARENT, IdsErrorDefinitionDirective, IdsErrorMessageComponent, IdsFieldsetComponent, IdsFieldsetMessageDirective, IdsFieldsetRowComponent, IdsFormFieldActionDirective, IdsFormFieldComponent, IdsFormFieldControl, IdsFormFieldVariant, IdsHintMessageComponent, IdsInputDirective, IdsLabelDirective, IdsMessageDirective, IdsMessagePrefixDirective, IdsMessageSuffixDirective, IdsMessageVariant, IdsOptionComponent, IdsOptionGroupComponent, IdsOptionSelectionChange, IdsPrefixDirective, IdsPseudoCheckboxState, IdsSuccessMessageComponent, IdsSuffixDirective, IdsValidators, Message, PseudoCheckboxComponent, SuccessStateMatcher, SuccessStateTracker, _countGroupLabelsBeforeOption, _getOptionScrollPosition, formFieldControlClass, requiredFalseValidator, requiredTrueValidator, requiredValidator };
 //# sourceMappingURL=i-cell-ids-angular-forms.mjs.map