@mozaic-ds/angular 2.1.7 → 2.1.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mozaic-ds/angular",
-  "version": "2.1.7",
+  "version": "2.1.9",
   "type": "module",
   "peerDependencies": {
     "@angular/common": ">=20.3.15",
@@ -13,7 +13,6 @@
   },
   "sideEffects": false,
   "publishConfig": {
-    "registry": "https://registry.npmjs.org/",
     "access": "public"
   },
   "repository": {

package/types/mozaic-ds-angular.d.ts

@@ -1,5 +1,5 @@
 import * as _angular_core from '@angular/core';
-import { TemplateRef, OnInit, ElementRef, InjectionToken, Type, AfterViewInit, OnDestroy, Renderer2, WritableSignal, Signal, AfterContentInit, QueryList, EventEmitter, ComponentRef } from '@angular/core';
+import { TemplateRef, OnInit, ElementRef, InjectionToken, Type, AfterViewInit, OnDestroy, Renderer2, WritableSignal, Signal, AfterContentInit, QueryList, ComponentRef } from '@angular/core';
 import { ControlValueAccessor } from '@angular/forms';
 import { CheckCircle32, Uploading32, WarningCircle32 } from '@mozaic-ds/icons-angular';
 import { RouterLink } from '@angular/router';
@@ -171,7 +171,7 @@ declare class MozFieldGroupComponent {
 }
 
 type MozFileUploaderFormat = 'inline' | 'stacked';
-declare class MozFileUploaderComponent implements OnInit {
+declare class MozFileUploaderComponent implements OnInit, ControlValueAccessor {
     readonly id: _angular_core.InputSignal<string>;
     readonly label: _angular_core.InputSignal<string | undefined>;
     readonly helpText: _angular_core.InputSignal<string | undefined>;
@@ -197,12 +197,25 @@ declare class MozFileUploaderComponent implements OnInit {
     readonly fileInformation: _angular_core.InputSignal<((file: File) => string) | undefined>;
     readonly retryFile: _angular_core.OutputEmitterRef<File>;
     readonly previewFile: _angular_core.OutputEmitterRef<File>;
+    /**
+     * Emits the current file list every time it changes because of a user
+     * interaction (select, drag & drop, delete). This lets the component be
+     * bound outside of Reactive Forms too, e.g. `(filesChange)="files = $event"`.
+     *
+     * When used inside a `FormGroup`/`FormControl` (via `formControlName` or
+     * `[(ngModel)]`), this output fires from the exact same code path as the
+     * `ControlValueAccessor` `onChange` callback below — both are always in
+     * sync, so most form use cases only need `valueChanges` on the control.
+     */
+    readonly filesChange: _angular_core.OutputEmitterRef<File[]>;
     readonly files: _angular_core.WritableSignal<File[]>;
     readonly isDragged: _angular_core.WritableSignal<boolean>;
+    private readonly formDisabled;
     readonly initialFiles: _angular_core.InputSignal<File[]>;
     readonly classes: _angular_core.Signal<{
         'file-uploader--draggable': boolean;
     }>;
+    readonly isDisabledState: _angular_core.Signal<boolean>;
     readonly inputClasses: _angular_core.Signal<{
         'file-uploader__input--disabled': boolean;
         'file-uploader__input--dragged': boolean;
@@ -219,8 +232,27 @@ declare class MozFileUploaderComponent implements OnInit {
     openFileDialog(): void;
     onDragOver(event: DragEvent): void;
     onDragLeave(event: DragEvent): void;
+    private onChange;
+    private onTouched;
+    /**
+     * Called by Angular Forms to push a value INTO the component (e.g. on
+     * `form.reset()`, `patchValue()`, or when the form is initialized with a
+     * non-empty value). Must only update local state, never call `onChange`
+     * back — otherwise it would create a feedback loop with the form.
+     */
+    writeValue(files: File[] | null): void;
+    registerOnChange(fn: (files: File[]) => void): void;
+    registerOnTouched(fn: () => void): void;
+    setDisabledState(isDisabled: boolean): void;
+    /**
+     * Single entry point for every user-driven mutation of the file list
+     * (select, drag & drop, delete). Updates the internal signal, then
+     * notifies both the `filesChange` output and the Reactive Forms
+     * `onChange`/`onTouched` callbacks so the two stay in sync.
+     */
+    private commitFiles;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<MozFileUploaderComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<MozFileUploaderComponent, "moz-file-uploader", never, { "id": { "alias": "id"; "required": true; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "helpText": { "alias": "helpText"; "required": false; "isSignal": true; }; "helpId": { "alias": "helpId"; "required": false; "isSignal": true; }; "necessityIndicator": { "alias": "necessityIndicator"; "required": false; "isSignal": true; }; "hasDragDrop": { "alias": "hasDragDrop"; "required": false; "isSignal": true; }; "showFilesList": { "alias": "showFilesList"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "multipleFiles": { "alias": "multipleFiles"; "required": false; "isSignal": true; }; "accept": { "alias": "accept"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; "subtitle": { "alias": "subtitle"; "required": false; "isSignal": true; }; "uploadButtonLabel": { "alias": "uploadButtonLabel"; "required": false; "isSignal": true; }; "format": { "alias": "format"; "required": false; "isSignal": true; }; "errorMessage": { "alias": "errorMessage"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "uploading": { "alias": "uploading"; "required": false; "isSignal": true; }; "hasPreview": { "alias": "hasPreview"; "required": false; "isSignal": true; }; "retryButtonLabel": { "alias": "retryButtonLabel"; "required": false; "isSignal": true; }; "deleteButtonLabel": { "alias": "deleteButtonLabel"; "required": false; "isSignal": true; }; "previewButtonLabel": { "alias": "previewButtonLabel"; "required": false; "isSignal": true; }; "information": { "alias": "information"; "required": false; "isSignal": true; }; "fileInformation": { "alias": "fileInformation"; "required": false; "isSignal": true; }; "initialFiles": { "alias": "initialFiles"; "required": false; "isSignal": true; }; }, { "retryFile": "retryFile"; "previewFile": "previewFile"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<MozFileUploaderComponent, "moz-file-uploader", never, { "id": { "alias": "id"; "required": true; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "helpText": { "alias": "helpText"; "required": false; "isSignal": true; }; "helpId": { "alias": "helpId"; "required": false; "isSignal": true; }; "necessityIndicator": { "alias": "necessityIndicator"; "required": false; "isSignal": true; }; "hasDragDrop": { "alias": "hasDragDrop"; "required": false; "isSignal": true; }; "showFilesList": { "alias": "showFilesList"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "multipleFiles": { "alias": "multipleFiles"; "required": false; "isSignal": true; }; "accept": { "alias": "accept"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; "subtitle": { "alias": "subtitle"; "required": false; "isSignal": true; }; "uploadButtonLabel": { "alias": "uploadButtonLabel"; "required": false; "isSignal": true; }; "format": { "alias": "format"; "required": false; "isSignal": true; }; "errorMessage": { "alias": "errorMessage"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "uploading": { "alias": "uploading"; "required": false; "isSignal": true; }; "hasPreview": { "alias": "hasPreview"; "required": false; "isSignal": true; }; "retryButtonLabel": { "alias": "retryButtonLabel"; "required": false; "isSignal": true; }; "deleteButtonLabel": { "alias": "deleteButtonLabel"; "required": false; "isSignal": true; }; "previewButtonLabel": { "alias": "previewButtonLabel"; "required": false; "isSignal": true; }; "information": { "alias": "information"; "required": false; "isSignal": true; }; "fileInformation": { "alias": "fileInformation"; "required": false; "isSignal": true; }; "initialFiles": { "alias": "initialFiles"; "required": false; "isSignal": true; }; }, { "retryFile": "retryFile"; "previewFile": "previewFile"; "filesChange": "filesChange"; }, never, never, true, never>;
 }
 
 type MozFileUploaderItemFormat = 'inline' | 'stacked';
@@ -737,7 +769,6 @@ declare class MozTabsComponent implements AfterContentInit {
     centered: _angular_core.InputSignal<boolean>;
     selectedIndex: _angular_core.ModelSignal<number>;
     tabsInput: _angular_core.InputSignal<MozTabItem[]>;
-    selectedIndexChange: EventEmitter<number>;
     tabsArray: _angular_core.WritableSignal<MozTabComponent[]>;
     virtualTabs: _angular_core.WritableSignal<MozTabItem[]>;
     constructor();
@@ -761,7 +792,7 @@ declare class MozTabsComponent implements AfterContentInit {
     onClickTab(index: number): void;
     onClickVirtualTab(index: number, tab: MozTabItem): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<MozTabsComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<MozTabsComponent, "moz-tabs", never, { "description": { "alias": "description"; "required": false; "isSignal": true; }; "divider": { "alias": "divider"; "required": false; "isSignal": true; }; "centered": { "alias": "centered"; "required": false; "isSignal": true; }; "selectedIndex": { "alias": "selectedIndex"; "required": false; "isSignal": true; }; "tabsInput": { "alias": "tabs"; "required": false; "isSignal": true; }; }, { "selectedIndex": "selectedIndexChange"; "selectedIndexChange": "selectedIndexChange"; }, ["tabs"], never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<MozTabsComponent, "moz-tabs", never, { "description": { "alias": "description"; "required": false; "isSignal": true; }; "divider": { "alias": "divider"; "required": false; "isSignal": true; }; "centered": { "alias": "centered"; "required": false; "isSignal": true; }; "selectedIndex": { "alias": "selectedIndex"; "required": false; "isSignal": true; }; "tabsInput": { "alias": "tabs"; "required": false; "isSignal": true; }; }, { "selectedIndex": "selectedIndexChange"; }, ["tabs"], never, true, never>;
 }
 
 type MozTagType = 'informative' | 'interactive' | 'contextualised' | 'removable' | 'selectable';
@@ -1901,7 +1932,6 @@ declare class MozPageHeaderComponent {
     readonly toggleMenu: _angular_core.OutputEmitterRef<void>;
     readonly toggleScope: _angular_core.OutputEmitterRef<boolean | undefined>;
     readonly scopeValueChange: _angular_core.OutputEmitterRef<string | number | boolean>;
-    readonly activeTabChange: _angular_core.OutputEmitterRef<number>;
     readonly classes: _angular_core.Signal<{
         'mc-page-header': boolean;
         'mc-page-header--with-shadow': boolean;
@@ -1923,9 +1953,8 @@ declare class MozPageHeaderComponent {
     onToggleScope(): void;
     onScopeTagClick(): void;
     onScopeSelectChange(value: string | number): void;
-    onActiveTabChange(index: number): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<MozPageHeaderComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<MozPageHeaderComponent, "moz-page-header", never, { "title": { "alias": "title"; "required": true; "isSignal": true; }; "shadow": { "alias": "shadow"; "required": false; "isSignal": true; }; "backButton": { "alias": "backButton"; "required": false; "isSignal": true; }; "searchButton": { "alias": "searchButton"; "required": false; "isSignal": true; }; "helpButton": { "alias": "helpButton"; "required": false; "isSignal": true; }; "notificationButton": { "alias": "notificationButton"; "required": false; "isSignal": true; }; "status": { "alias": "status"; "required": false; "isSignal": true; }; "statusLabel": { "alias": "statusLabel"; "required": false; "isSignal": true; }; "extraInfo": { "alias": "extraInfo"; "required": false; "isSignal": true; }; "scope": { "alias": "scope"; "required": false; "isSignal": true; }; "scopeValue": { "alias": "scopeValue"; "required": false; "isSignal": true; }; "scopePlaceholder": { "alias": "scopePlaceholder"; "required": false; "isSignal": true; }; "tabs": { "alias": "tabs"; "required": false; "isSignal": true; }; "activeTab": { "alias": "activeTab"; "required": false; "isSignal": true; }; }, { "activeTab": "activeTabChange"; "back": "back"; "search": "search"; "help": "help"; "notification": "notification"; "toggleMenu": "toggleMenu"; "toggleScope": "toggleScope"; "scopeValueChange": "scopeValueChange"; "activeTabChange": "activeTabChange"; }, never, ["[content]", "[actions]"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<MozPageHeaderComponent, "moz-page-header", never, { "title": { "alias": "title"; "required": true; "isSignal": true; }; "shadow": { "alias": "shadow"; "required": false; "isSignal": true; }; "backButton": { "alias": "backButton"; "required": false; "isSignal": true; }; "searchButton": { "alias": "searchButton"; "required": false; "isSignal": true; }; "helpButton": { "alias": "helpButton"; "required": false; "isSignal": true; }; "notificationButton": { "alias": "notificationButton"; "required": false; "isSignal": true; }; "status": { "alias": "status"; "required": false; "isSignal": true; }; "statusLabel": { "alias": "statusLabel"; "required": false; "isSignal": true; }; "extraInfo": { "alias": "extraInfo"; "required": false; "isSignal": true; }; "scope": { "alias": "scope"; "required": false; "isSignal": true; }; "scopeValue": { "alias": "scopeValue"; "required": false; "isSignal": true; }; "scopePlaceholder": { "alias": "scopePlaceholder"; "required": false; "isSignal": true; }; "tabs": { "alias": "tabs"; "required": false; "isSignal": true; }; "activeTab": { "alias": "activeTab"; "required": false; "isSignal": true; }; }, { "activeTab": "activeTabChange"; "back": "back"; "search": "search"; "help": "help"; "notification": "notification"; "toggleMenu": "toggleMenu"; "toggleScope": "toggleScope"; "scopeValueChange": "scopeValueChange"; }, never, ["[content]", "[actions]"], true, never>;
 }
 
 type MozTileAppearance = 'primary' | 'secondary' | 'inverse';