@breadstone/mosaik-elements-angular 0.0.185 → 0.0.187

package/CHANGELOG.md

@@ -1,3 +1,13 @@
+## 0.0.187 (2025-12-02)
+
+This was a version bump only for mosaik-elements-angular to align it with other projects, there were no code changes.
+
+## 0.0.186 (2025-12-02)
+
+### 🚀 Features
+
+- **directives:** refactor FormFieldDirective to use InputSignal for field state ([2ab766e52f](https://github.com/RueDeRennes/mosaik/commit/2ab766e52f))
+
 ## 0.0.185 (2025-12-02)
 
 ### 🚀 Features

package/fesm2022/mosaik-elements-angular.mjs

@@ -1,6 +1,6 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, inject, ChangeDetectorRef, ElementRef, NgZone, EventEmitter, Output, Input, ChangeDetectionStrategy, Component, makeEnvironmentProviders, DestroyRef, Directive, forwardRef, Injectable, Pipe, signal, effect, ViewChild, ViewEncapsulation, TemplateRef, Injector, DOCUMENT as DOCUMENT$1, Renderer2, computed, provideEnvironmentInitializer, ViewContainerRef, booleanAttribute, HostListener, ContentChildren, isDevMode, Optional, SkipSelf } from '@angular/core';
-import * as i1$1 from '@breadstone/mosaik-elements-foundation';
+import { InjectionToken, inject, ChangeDetectorRef, ElementRef, NgZone, EventEmitter, Output, Input, ChangeDetectionStrategy, Component, makeEnvironmentProviders, DestroyRef, Directive, forwardRef, Injectable, Pipe, signal, effect, ViewChild, ViewEncapsulation, TemplateRef, Injector, DOCUMENT as DOCUMENT$1, Renderer2, computed, provideEnvironmentInitializer, ViewContainerRef, booleanAttribute, HostListener, ContentChildren, input, isDevMode, Optional, SkipSelf } from '@angular/core';
+import * as i1 from '@breadstone/mosaik-elements-foundation';
 import { AbsoluteItemElement, AbsoluteElement, AnchorElement, AppHeaderElement, AppElement, AttachmentChatToolElement, AudioElement, AutoCompleteBoxElement, AvatarGroupElement, avatarElementValueAccessor, AvatarElement, BackdropElement, BadgeElement, BannerGroupElement, BannerHeaderElement, BannerSubHeaderElement, BannerElement, BottomSheetElement, BoxElement, BreadcrumbItemElement, BreadcrumbElement, BusyStateElement, ButtonGroupElement, ButtonElement, CalendarHeaderElement, CalendarItemElement, CalendarSubHeaderElement, calendarElementValueAccessor, CalendarElement, CameraElement, CardActionsElement, CardContentElement, CardFooterElement, CardHeaderElement, CardSubTitleElement, CardTitleElement, CardElement, Carousel2Element, CarouselItem2Element, CarouselItemElement, CarouselElement, CellGroupElement, CellElement, ChartElement, ChatHeaderElement, ChatInputAttachmentListElement, ChatInputElement, ChatMarkerElement, ChatMessageAvatarElement, ChatMessageDividerElement, ChatMessageReactionElement, ChatMessageElement, ChatElement, checkBoxGroupElementValueAccessor, CheckBoxGroupElement, checkboxElementValueAccessor, CheckboxElement, CheckmarkElement, ChipElement, chipBoxElementValueAccessor, ChipBoxElement, ChoiceGroupHeaderElement, choiceGroupElementValueAccessor, ChoiceGroupElement, choiceElementValueAccessor, ChoiceElement, CodeElement, ColorAreaElement, ColorPickerElement, ColorSliderElement, ColorSwatchGroupElement, ColorSwatchElement, ColorThumbElement, colorBoxElementValueAccessor, ColorBoxElement, ComboItemElement, comboElementValueAccessor, ComboElement, CommentElement, CompoundButtonElement, CookiesConsentElement, DataListElement, DataTableElement, dateBoxElementValueAccessor, DateBoxElement, dateTimeBoxElementValueAccessor, DateTimeBoxElement, DialogActionsElement, DialogContentElement, DialogFooterElement, DialogHeaderSubTextElement, DialogHeaderTextElement, DialogHeaderElement, DialogElement, DisclosureElement, DismissElement, DividerElement, DockPanelElement, DotElement, DrawerContainerElement, DrawerContentElement, DrawerElement, DropZoneElement, DropDownButtonElement, ElevationElement, EmojiElement, EmptyStateElement, EpgChannelElement, EpgProgramElement, EpgElement, ErrorStateElement, ErrorElement, ExpandableElement, ExpanderGroupElement, ExpanderHeaderElement, ExpanderSubHeaderElement, ExpanderElement, FloatingActionButtonGroupElement, FloatingActionButtonElement, FilePickerElement, FileUploadItemElement, fileUploadElementValueAccessor, FileUploadElement, FlipElement, FloatingTriggerElement, FloatingElement, FocusRingElement, FooterItemGroupElement, FooterItemElement, FooterElement, FormFieldElement, FormElement, GridItemElement, GridElement, HelmetElement, HintElement, IconElement, ImageElement, IndicatorElement, JumbotronHeaderElement, JumbotronSubHeaderElement, JumbotronElement, KbdShortcutElement, KbdElement, LightChainElement, ListItemGroupElement, ListItemElement, ListElement, MapElement, MarqueeElement, MasonryElement, MenuItemGroupElement, MenuItemElement, MenuElement, MessageBoxElement, MeterBarElement, MeterRingElement, NumberCounterElement, NumberElement, numberBoxElementValueAccessor, NumberBoxElement, PageContentElement, PageHeaderElement, PagePreContentElement, PagePreHeaderElement, PageElement, PageMenuElement, PaginatorElement, passwordBoxElementValueAccessor, PasswordBoxElement, PatternElement, PersonaElement, PerspectiveElement, pinBoxElementValueAccessor, PinBoxElement, PopupElement, PortalHostElement, PortalProjectionElement, PortalElement, ProgressBarElement, ProgressRingElement, QRCodeElement, radioGroupElementValueAccessor, RadioGroupElement, radioElementValueAccessor, RadioElement, RatingElement, ReactionChatToolElement, RepeatButtonElement, ResizeAdornerElement, RibbonElement, richTextBoxElementValueAccessor, RichTextBoxElement, RippleElement, ScaleElement, ScrollElement, scrubSliderElementValueAccessor, ScrubSliderElement, searchBoxElementValueAccessor, SearchBoxElement, SegmentItemElement, SegmentElement, SelectItemGroupElement, SelectItemElement, selectElementValueAccessor, SelectElement, signaturePadElementValueAccessor, SignaturePadElement, SkeletonElement, sliderElementValueAccessor, SliderElement, Slider2ThumbElement, Slider2Element, SpacerElement, SplitButtonElement, SplitElement, StackElement, StickyElement, SuccessStateElement, SummaryElement, SwipeElement, TabItemElement, TabPanelElement, TabStripItemElement, TabStripElement, TabElement, TableBodyElement, TableCellElement, TableFooterElement, TableHeaderElement, TableRowElement, TableElement, TextFormatElement, TextElement, textBoxElementValueAccessor, TextBoxElement, Theme2Element, ThumbnailElement, TickBarElement, TileListItemElement, TileListElement, timeBoxElementValueAccessor, TimeBoxElement, ToastElement, ToggleButtonGroupElement, toggleButtonElementValueAccessor, ToggleButtonElement, toggleSwitchElementValueAccessor, ToggleSwitchElement, ToggleTipElement, ToolbarElement, TooltipElement, TreeItemElement, TreeElement, UpDownSpinnerElement, VideoElement, VirtualizeElement, VoiceRecorderChatToolElement, WizardStepElement, WizardElement, WrapElement, ToastService as ToastService$1, EID, Key, MessageBoxService as MessageBoxService$1, BottomSheetService as BottomSheetService$1, TranslatorService, Translator, TranslatorServiceLocator, BREAKPOINTS, Size, Spacing, AnimationPlayer2, Animation, DateAgoIntl, TimeAgoIntl } from '@breadstone/mosaik-elements-foundation';
 import { NgControl, TouchedChangeEvent, NG_VALUE_ACCESSOR, FormControl, FormArray, FormGroup, AbstractControl, FormGroupDirective } from '@angular/forms';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
@@ -11,8 +11,7 @@ import { DOCUMENT, NgTemplateOutlet, AsyncPipe } from '@angular/common';
 import { ConfigurableFocusTrapFactory } from '@angular/cdk/a11y';
 import { OverlayPositionBuilder, Overlay } from '@angular/cdk/overlay';
 import { BreakpointObserver } from '@angular/cdk/layout';
-import * as i1 from '@angular/forms/signals';
-import { validate, Field } from '@angular/forms/signals';
+import { validate } from '@angular/forms/signals';
 import { emit, filterByMemberPath, orderByMemberPath } from '@breadstone/mosaik-elements';
 import { ThemeObserver, ThemeGeneratorServiceLocator, ThemeGenerator, ThemeObserverServiceLocator } from '@breadstone/mosaik-themes';
 import { map, startWith } from 'rxjs/operators';
@@ -61728,73 +61727,88 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
                 args: [{ required: true }]
             }] } });
 
-// #region Imports
-// #endregion
+//#region Imports
+//#endregion
 /**
- * Directive for binding Signal Form validation errors to mosaik-form-field elements.
- * Automatically sets the native error property with the first validation error message.
+ * Attribute-Directive that binds a `FieldState` to `FormFieldElement`.
+ * It observes the validation `errors()` and `touched()` state of the field,
+ * and automatically updates the Element’s `error` property — always using the **last** validation error (if any) when the field has been touched.
  *
  * @public
- *
- * @example
+ * @Usage
  * ```html
- * <mosaik-form-field [error]="emailField">
- *   <input type="email" [value]="emailField.value()" />
+ * <mosaik-form-field [fieldState]="form.someField()">
+ *   <mosaik-textbox [field]="form.someField" … />
  * </mosaik-form-field>
  * ```
  */
 class FormFieldDirective {
-    // #region Fields
+    //#region Fields
     _elementRef;
-    _control;
-    // #endregion
-    // #region Ctor
-    /**
-     * Constructs a new instance of the `{@link FormFieldErrorDirective}` class.
-     *
-     * @public
-     */
-    constructor(elementRef = inject(ElementRef), control = inject(Field)) {
+    //#endregion
+    //#region Ctor
+    constructor(elementRef = inject((ElementRef))) {
         this._elementRef = elementRef;
-        this._control = control;
+        // Observe changes in the fieldState signal. Whenever it changes (value, errors, touched…),
+        // we recalc the error message and apply it to the Web Component.
         effect(() => {
-            const fieldState = this._control.state();
-            this.updateErrorProperty(fieldState);
+            const fs = this.fieldState();
+            this.applyError(fs);
         });
     }
-    // #endregion
-    // #region Methods
+    //#endregion
+    //#region Properties
     /**
-     * Updates the error property of the form field element based on the provided FieldState.
+     * The FieldState to observe for validation errors.
      *
-     * @private
-     * @param fieldState The FieldState containing validation information.
+     * @required
+     * @public
+     * @example
+     * ```html
+     * <mosaik-form-field [fieldState]="form.someField()">
+     *   …
+     * </mosaik-form-field>
+     * ```
+     */
+    fieldState = input.required({ ...(ngDevMode ? { debugName: "fieldState" } : {}) });
+    //#endregion
+    //#region Methods
+    /**
+     * Maps the FieldState (errors + touched) to the Element error property.
+     * If there is at least one error AND the field has been touched → set error to the
+     * last error.message. Otherwise clear the error.
+     *
+     * @param fieldState The current FieldState
      */
-    updateErrorProperty(fieldState) {
-        const element = this._elementRef.nativeElement;
+    applyError(fieldState) {
+        const el = this._elementRef.nativeElement;
         if (!fieldState) {
-            element.error = '';
+            // No state → clear any previous error
+            el.error = '';
             return;
         }
-        const errors = fieldState.errors();
-        if (errors.length > 0 && fieldState.touched()) {
-            const firstError = errors[0];
-            const errorMessage = firstError.message;
-            element.error = errorMessage ?? '';
+        const errors = fieldState.errors(); // array of validation errors
+        const isTouched = fieldState.touched(); // whether the field was touched
+        if (errors.length > 0 && isTouched) {
+            // Use the last error in the array as the “active” error message
+            const lastError = errors[errors.length - 1];
+            el.error = lastError.message ?? '';
         }
         else {
-            element.error = '';
+            // No errors or not touched yet → clear error
+            el.error = '';
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: FormFieldDirective, deps: [{ token: i0.ElementRef }, { token: i1.Field }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.1", type: FormFieldDirective, isStandalone: true, selector: "mosaik-form-field[field]", ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: FormFieldDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.0.1", type: FormFieldDirective, isStandalone: true, selector: "mosaik-form-field", inputs: { fieldState: { classPropertyName: "fieldState", publicName: "fieldState", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: FormFieldDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: 'mosaik-form-field[field]'
+                    // applies to your custom element
+                    selector: 'mosaik-form-field'
                 }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1.Field }] });
+        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { fieldState: [{ type: i0.Input, args: [{ isSignal: true, alias: "fieldState", required: true }] }] } });
 
 // #region Imports
 // #endregion
@@ -62171,12 +62185,12 @@ class TranslateService {
     translate(key, ...args) {
         return this._translator.translate(key, ...args);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: TranslateService, deps: [{ token: i1$1.TranslatorService }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: TranslateService, deps: [{ token: i1.TranslatorService }], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: TranslateService });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: TranslateService, decorators: [{
             type: Injectable
-        }], ctorParameters: () => [{ type: i1$1.TranslatorService }] });
+        }], ctorParameters: () => [{ type: i1.TranslatorService }] });
 
 // #region Imports
 // #endregion