@almoamendev/ngx-md3 0.7.4 → 0.8.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@almoamendev/ngx-md3",
-  "version": "0.7.4",
+  "version": "0.8.0",
   "description": "MD3-style Angular components & style library",
   "author": "Murtadha (Hussain) Almoamen",
   "license": "MIT",

package/types/almoamendev-ngx-md3.d.ts

@@ -1,9 +1,9 @@
 import * as _angular_core from '@angular/core';
-import { ViewContainerRef, Injector, Signal, ElementRef, AfterViewInit, OnDestroy, OnInit, Renderer2, InputSignal, InjectionToken, Type, AfterContentInit, ComponentRef, TemplateRef } from '@angular/core';
+import { ViewContainerRef, Injector, Signal, ElementRef, AfterViewInit, OnDestroy, OnInit, Renderer2, InputSignal, AfterContentInit, Type, ComponentRef, InjectionToken, TemplateRef } from '@angular/core';
 import { FlexibleConnectedPositionStrategyOrigin, ConnectedPosition, OverlayRef } from '@angular/cdk/overlay';
 import { Observable, Subject } from 'rxjs';
 import * as i1 from '@angular/cdk/scrolling';
-import { AbstractControl } from '@angular/forms';
+import { AbstractControl, ControlValueAccessor } from '@angular/forms';
 import * as i1$1 from '@angular/router';
 import { CdkDialogContainer, DialogRef as DialogRef$1 } from '@angular/cdk/dialog';
 import { CdkPortalOutlet } from '@angular/cdk/portal';
@@ -131,6 +131,20 @@ type CarouselOrientation = 'horizontal';
  */
 type CarouselItemSize = 'large' | 'medium' | 'small';
 
+type SelectOptionValue = string | number;
+/**
+ * Value shape exposed to Angular forms by md3-select-field.
+ * Single selection emits a single value (or null), multiple selection emits an array.
+ */
+type SelectFieldValue = SelectOptionValue | SelectOptionValue[] | null;
+type SelectOption = {
+    value: SelectOptionValue;
+    label: string;
+    supportingText?: string;
+    trailingText?: string;
+    selected?: boolean;
+};
+
 /**
  * What happens to a dialog that is already open when a new dialog opens.
  * - close: the open dialogs are closed before the new one opens.
@@ -1706,6 +1720,7 @@ declare class NavigationRail implements ButtonContext {
     expanded: _angular_core.ModelSignal<boolean>;
     hideMenuButton: _angular_core.InputSignalWithTransform<boolean, unknown>;
     fullWidthIndicator: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    menuAlignment: _angular_core.InputSignal<"start" | "center" | "end">;
     containerStyle: _angular_core.InputSignal<ContainerStyle>;
     collapsedMode: _angular_core.InputSignal<CollapsedLayout>;
     expandedMode: _angular_core.InputSignal<ExpandedLayout>;
@@ -1724,7 +1739,7 @@ declare class NavigationRail implements ButtonContext {
     collapse(): void;
     expand(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<NavigationRail, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<NavigationRail, "md3-navigation-rail", never, { "expanded": { "alias": "expanded"; "required": false; "isSignal": true; }; "hideMenuButton": { "alias": "hide-menu-button"; "required": false; "isSignal": true; }; "fullWidthIndicator": { "alias": "full-width-indicator"; "required": false; "isSignal": true; }; "containerStyle": { "alias": "container-style"; "required": false; "isSignal": true; }; "collapsedMode": { "alias": "collapsed-layout"; "required": false; "isSignal": true; }; "expandedMode": { "alias": "expanded-layout"; "required": false; "isSignal": true; }; }, { "expanded": "expandedChange"; }, ["menuIcons", "floatingActionButton"], ["[md3-icon-element=expand]", "[md3-icon-element=collapse]", "[md3-fab]", "[md3-nav-item], md3-nav-group"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<NavigationRail, "md3-navigation-rail", never, { "expanded": { "alias": "expanded"; "required": false; "isSignal": true; }; "hideMenuButton": { "alias": "hide-menu-button"; "required": false; "isSignal": true; }; "fullWidthIndicator": { "alias": "full-width-indicator"; "required": false; "isSignal": true; }; "menuAlignment": { "alias": "menu-alignment"; "required": false; "isSignal": true; }; "containerStyle": { "alias": "container-style"; "required": false; "isSignal": true; }; "collapsedMode": { "alias": "collapsed-layout"; "required": false; "isSignal": true; }; "expandedMode": { "alias": "expanded-layout"; "required": false; "isSignal": true; }; }, { "expanded": "expandedChange"; }, ["menuIcons", "floatingActionButton"], ["[md3-icon-element=expand]", "[md3-icon-element=collapse]", "[md3-fab]", "[md3-nav-item], md3-nav-group"], true, never>;
 }
 
 declare class NavigationBar {
@@ -1770,6 +1785,173 @@ declare class SupportingText {
     static ɵdir: _angular_core.ɵɵDirectiveDeclaration<SupportingText, "[md3-supporting-text]", never, {}, {}, never, never, true, never>;
 }
 
+declare class Menu implements AfterContentInit {
+    private el;
+    private readonly portalOutlet;
+    protected readonly config: MenuConfig<unknown>;
+    protected menuColors: _angular_core.WritableSignal<"standard" | "vibrant">;
+    protected isVisible: _angular_core.WritableSignal<boolean>;
+    protected scheme: _angular_core.WritableSignal<"inherit" | "dark" | "light">;
+    protected direction: _angular_core.WritableSignal<"ltr" | "rtl" | null>;
+    isActive: _angular_core.WritableSignal<boolean>;
+    get element(): HTMLElement;
+    constructor(el: ElementRef);
+    ngAfterContentInit(): void;
+    showMenu(value: boolean): void;
+    /**
+     * The service creates this wrapper first, then calls this method to mount
+     * the user supplied component into the dialog container.
+     */
+    attachContent<T>(component: Type<T>, injector: Injector): ComponentRef<T>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<Menu, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<Menu, "md3-menu", never, {}, {}, never, never, true, never>;
+}
+
+declare const MENU_DATA: InjectionToken<unknown>;
+declare const MENU_CONFIG: InjectionToken<MenuConfig<unknown>>;
+declare const MENU_COMPONENT: InjectionToken<Type<unknown>>;
+declare class MenuRef<T = unknown, R = unknown> {
+    private readonly overlayRef;
+    private readonly previouslyFocusedElement;
+    private readonly closed;
+    private isClosed;
+    menuInstance?: Menu;
+    /**
+     * Filled by MenuService after the user component is attached. Keeping the
+     * instance here lets callers imperatively update inputs when that is useful.
+     */
+    componentInstance?: T;
+    constructor(overlayRef: OverlayRef, previouslyFocusedElement: HTMLElement | null);
+    close(result?: R): void;
+    private startCloseAnimation;
+    afterClosed(): Observable<R | undefined>;
+}
+
+declare class MenuService {
+    private readonly overlay;
+    private readonly injector;
+    private readonly document;
+    open<T, D = unknown, R = unknown>(component: Type<T>, config?: MenuConfig<D>): MenuRef<T, R>;
+    openSubMenu<T, D = unknown, R = unknown>(component: Type<T>, config?: MenuConfig<D>): MenuRef<T, R>;
+    private mergeConfig;
+    private isSelectInput;
+    private createOverlay;
+    private bindTriggerActiveState;
+    private resolveOrigin;
+    private resolveTriggerElement;
+    private flipPositionIfPushBreaksAnchor;
+    private getInitialConnectedPositions;
+    private getPreferredConnectedPosition;
+    private getFallbackPositionAfterPush;
+    private shouldFlipXPosition;
+    private shouldFlipYPosition;
+    private createConnectedPosition;
+    private createSubMenuConnectedPosition;
+    private getHorizontalPosition;
+    private getVerticalPosition;
+    private getFallbackXPosition;
+    private getSubMenuXPosition;
+    private getFallbackYPosition;
+    private getSubMenuVerticalAlignment;
+    private getOriginClientRect;
+    private getViewportMargin;
+    private getHalfEmInPixels;
+    private getOffsetY;
+    private getSubMenuOffsetX;
+    private getSubMenuOffsetY;
+    private getScrollStrategy;
+    private isMouseEvent;
+    private isElementRef;
+    private startOpenAnimation;
+    private createInjector;
+    private bindDataToInputs;
+    private connectCloseEvents;
+    private getFocusedElement;
+    private canBindDataToInputs;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<MenuService, never>;
+    static ɵprov: _angular_core.ɵɵInjectableDeclaration<MenuService>;
+}
+
+declare class SelectField implements ControlValueAccessor {
+    private menuService;
+    private viewContainerRef;
+    /**
+     * Form directive placed on the host element: [formControl], formControlName or [(ngModel)].
+     * The accessor is registered from the constructor instead of through an NG_VALUE_ACCESSOR
+     * provider, which keeps the directive injectable here and gives access to the control
+     * itself for the error state forwarded to md3-text-field.
+     */
+    private readonly ngControl;
+    options: _angular_core.InputSignal<SelectOption[]>;
+    multiple: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    label: _angular_core.InputSignal<string | null>;
+    /**
+     * Formats the text shown in the field. The default joins the labels of the selected
+     * options with a comma, so the field shows as many labels as its width allows.
+     * The formatter is not called for an empty selection: the field stays empty, which keeps
+     * the floating label in its place.
+     */
+    displayWith: _angular_core.InputSignal<((selected: SelectOption[]) => string) | null>;
+    /**
+     * Disables the field outside of a form. With reactive forms prefer control.disable().
+     */
+    disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    menuColors: _angular_core.InputSignal<"standard" | "vibrant">;
+    fieldType: _angular_core.InputSignal<"filled" | "outlined">;
+    /**
+     * Control passed explicitly, mirroring md3-text-field. Takes precedence over a form
+     * directive on the host element.
+     */
+    control: _angular_core.InputSignal<AbstractControl<any, any, any> | undefined>;
+    private iconElements;
+    hasLeadingIcon: _angular_core.Signal<boolean>;
+    hasArrowIcon: _angular_core.Signal<boolean>;
+    protected isMenuOpen: _angular_core.WritableSignal<boolean>;
+    private menuRef;
+    private inputElement;
+    /** Control resolved from the host form directive, captured when the accessor is wired up. */
+    private hostControl;
+    /** Disabled state pushed by the control, either through setDisabledState or control.disabled. */
+    private controlDisabled;
+    /**
+     * Set as soon as a control writes a value. From then on the control owns the selection and
+     * SelectOption.selected no longer seeds it.
+     */
+    private controlOwnsValue;
+    private onChange;
+    private onTouched;
+    /** Selection is kept by value so it survives options arriving or being replaced later. */
+    private selectedValues;
+    formControl: _angular_core.Signal<AbstractControl<any, any, any> | undefined>;
+    isDisabled: _angular_core.Signal<boolean>;
+    selectedOptions: _angular_core.Signal<SelectOption[]>;
+    selectedText: _angular_core.Signal<string | null>;
+    constructor(menuService: MenuService, viewContainerRef: ViewContainerRef);
+    writeValue(value: SelectFieldValue): void;
+    registerOnChange(fn: (value: SelectFieldValue) => void): void;
+    registerOnTouched(fn: () => void): void;
+    setDisabledState(isDisabled: boolean): void;
+    openMenu(): void;
+    closeMenu(): void;
+    toggleMenu(): void;
+    private openSelectOptions;
+    private selectValues;
+    private setSelectedValues;
+    private commitValue;
+    private currentValue;
+    private markAsTouched;
+    private syncFromControl;
+    private captureHostControl;
+    /**
+     * Accepts whatever a control holds and reduces it to the option values this field can show:
+     * a single value for single selection, a de-duplicated list for multiple selection.
+     */
+    private normalizeValues;
+    private valuesAreEqual;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SelectField, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SelectField, "md3-select-field", never, { "options": { "alias": "options"; "required": true; "isSignal": true; }; "multiple": { "alias": "multiple"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "displayWith": { "alias": "display-with"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "menuColors": { "alias": "menu-colors"; "required": false; "isSignal": true; }; "fieldType": { "alias": "field-type"; "required": false; "isSignal": true; }; "control": { "alias": "control"; "required": false; "isSignal": true; }; }, {}, ["iconElements"], ["[md3-icon-element=leading]", "[md3-icon-element=arrow]", "[md3-supporting-text]"], true, never>;
+}
+
 /**
  * Material 3 dialog shell. It extends the CDK dialog container, so focus
  * trapping, focus restoration and the ARIA attributes are handled by the CDK
@@ -2031,92 +2213,6 @@ declare class FullScreenDialog extends CdkDialogContainer implements DialogConta
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<FullScreenDialog, "md3-fullscreen-dialog", never, {}, {}, never, never, true, never>;
 }
 
-declare class Menu implements AfterContentInit {
-    private el;
-    private readonly portalOutlet;
-    protected readonly config: MenuConfig<unknown>;
-    protected menuColors: _angular_core.WritableSignal<"standard" | "vibrant">;
-    protected isVisible: _angular_core.WritableSignal<boolean>;
-    protected scheme: _angular_core.WritableSignal<"inherit" | "dark" | "light">;
-    protected direction: _angular_core.WritableSignal<"ltr" | "rtl" | null>;
-    isActive: _angular_core.WritableSignal<boolean>;
-    get element(): HTMLElement;
-    constructor(el: ElementRef);
-    ngAfterContentInit(): void;
-    showMenu(value: boolean): void;
-    /**
-     * The service creates this wrapper first, then calls this method to mount
-     * the user supplied component into the dialog container.
-     */
-    attachContent<T>(component: Type<T>, injector: Injector): ComponentRef<T>;
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<Menu, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<Menu, "md3-menu", never, {}, {}, never, never, true, never>;
-}
-
-declare const MENU_DATA: InjectionToken<unknown>;
-declare const MENU_CONFIG: InjectionToken<MenuConfig<unknown>>;
-declare const MENU_COMPONENT: InjectionToken<Type<unknown>>;
-declare class MenuRef<T = unknown, R = unknown> {
-    private readonly overlayRef;
-    private readonly previouslyFocusedElement;
-    private readonly closed;
-    private isClosed;
-    menuInstance?: Menu;
-    /**
-     * Filled by MenuService after the user component is attached. Keeping the
-     * instance here lets callers imperatively update inputs when that is useful.
-     */
-    componentInstance?: T;
-    constructor(overlayRef: OverlayRef, previouslyFocusedElement: HTMLElement | null);
-    close(result?: R): void;
-    private startCloseAnimation;
-    afterClosed(): Observable<R | undefined>;
-}
-
-declare class MenuService {
-    private readonly overlay;
-    private readonly injector;
-    private readonly document;
-    open<T, D = unknown, R = unknown>(component: Type<T>, config?: MenuConfig<D>): MenuRef<T, R>;
-    openSubMenu<T, D = unknown, R = unknown>(component: Type<T>, config?: MenuConfig<D>): MenuRef<T, R>;
-    private mergeConfig;
-    private createOverlay;
-    private bindTriggerActiveState;
-    private resolveOrigin;
-    private resolveTriggerElement;
-    private flipPositionIfPushBreaksAnchor;
-    private getInitialConnectedPositions;
-    private getPreferredConnectedPosition;
-    private getFallbackPositionAfterPush;
-    private shouldFlipXPosition;
-    private shouldFlipYPosition;
-    private createConnectedPosition;
-    private createSubMenuConnectedPosition;
-    private getHorizontalPosition;
-    private getVerticalPosition;
-    private getFallbackXPosition;
-    private getSubMenuXPosition;
-    private getFallbackYPosition;
-    private getSubMenuVerticalAlignment;
-    private getOriginClientRect;
-    private getViewportMargin;
-    private getHalfEmInPixels;
-    private getOffsetY;
-    private getSubMenuOffsetX;
-    private getSubMenuOffsetY;
-    private getScrollStrategy;
-    private isMouseEvent;
-    private isElementRef;
-    private startOpenAnimation;
-    private createInjector;
-    private bindDataToInputs;
-    private connectCloseEvents;
-    private getFocusedElement;
-    private canBindDataToInputs;
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<MenuService, never>;
-    static ɵprov: _angular_core.ɵɵInjectableDeclaration<MenuService>;
-}
-
 declare class MenuGroup {
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<MenuGroup, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<MenuGroup, "md3-menu-group", never, {}, {}, never, ["*"], true, never>;
@@ -2465,5 +2561,5 @@ declare class SnackbarService {
     static ɵprov: _angular_core.ɵɵInjectableDeclaration<SnackbarService>;
 }
 
-export { AppBar, AppBarLogo, Avatar, BOTTOM_SHEET_COMPONENT, BOTTOM_SHEET_CONFIG, BOTTOM_SHEET_DATA, Badge, BottomSheetRef, BottomSheetService, Button, ButtonGroup, CAROUSEL_STRATEGIES, Card, Carousel, CarouselItem, Checkbox, ChipAvatar, Chips, CircularProgressIndicator, DIALOG_COMPONENT, DIALOG_CONFIG, DIALOG_DATA, Dialog, DialogActions, DialogBody, DialogHeader, DialogRef, DialogService, Divider, FloatingActionButton, FullScreenDialog, Grid, GridItem, IconButton, IconElement, InputElement, Layout, LayoutService, LinearProgressIndicator, List, ListItem, ListItemPrimaryAction, ListLeading, ListSlot, LoadingIndicator, MENU_COMPONENT, MENU_CONFIG, MENU_DATA, MaterialIcon, Menu, MenuGroup, MenuItem, MenuRef, MenuService, ModalBottomSheetRef, NavigationBar, NavigationGroup, NavigationItem, NavigationRail, RadioButton, SIDE_SHEET_COMPONENT, SIDE_SHEET_CONFIG, SIDE_SHEET_DATA, SNACKBAR_ACTION_LABEL, SNACKBAR_CONFIG, SNACKBAR_MESSAGE, Scaffold, ScaffoldBar, ScaffoldPane, ScaffoldRail, SheetsService, SideSheetActions, SideSheetBody, SideSheetHeader, SideSheetRef, Slider, Snackbar, SnackbarRef, SnackbarService, SplitButton, StandardBottomSheetRef, StateComponent, SupportingText, Switch, TextField, Toolbar, ToolbarItem, TypeBody, TypeDisplay, TypeHeadline, TypeLabel, TypeTitle, ViewportService, buildGeometry, clampIndex, indexForScrollOffset, multiBrowseStrategy, parseCarouselAspectRatio, resolveItemGeometry, resolveState, scrollOffsetForIndex, sizeBandFor };
-export type { AppBarScrollingStyle, AppBarType, BottomSheetConfig, BottomSheetContainer, BottomSheetState, BottomSheetSurfaceHost, BottomSheetType, ButtonGroupSelection, ButtonGroupType, ButtonSize, ButtonType, CardType, CarouselAlignment, CarouselArrangement, CarouselGeometry, CarouselItemGeometry, CarouselItemSize, CarouselKeyline, CarouselKeylineState, CarouselLayout, CarouselOrientation, CarouselStrategy, CarouselStrategyContext, ChipStyle, ChipType, DialogConfig, DialogContainer, DialogRole, FabSize, FabType, FloatingBarSide, FloatingInset, IconButtonType, IconButtonWidth, ListLeadingSize, ListLeadingType, Md3NavigationMode, MenuConfig, MenuPositionOrigin, MenuPositionX, MenuPositionY, MenuScrollStrategy, PreviousDialog, SideSheetConfig, SideSheetContainer, SideSheetSide, SideSheetType, SliderSize, SnackbarConfig, SnackbarDismiss, SnackbarDismissReason, SnackbarPoliteness, SplitButtonType, StandardBottomSheetHost, TextColor, TextSize, ToolbarAlignment, ToolbarColor, ToolbarOrientation, ToolbarRegion, ToolbarScrollAction, ToolbarType };
+export { AppBar, AppBarLogo, Avatar, BOTTOM_SHEET_COMPONENT, BOTTOM_SHEET_CONFIG, BOTTOM_SHEET_DATA, Badge, BottomSheetRef, BottomSheetService, Button, ButtonGroup, CAROUSEL_STRATEGIES, Card, Carousel, CarouselItem, Checkbox, ChipAvatar, Chips, CircularProgressIndicator, DIALOG_COMPONENT, DIALOG_CONFIG, DIALOG_DATA, Dialog, DialogActions, DialogBody, DialogHeader, DialogRef, DialogService, Divider, FloatingActionButton, FullScreenDialog, Grid, GridItem, IconButton, IconElement, InputElement, Layout, LayoutService, LinearProgressIndicator, List, ListItem, ListItemPrimaryAction, ListLeading, ListSlot, LoadingIndicator, MENU_COMPONENT, MENU_CONFIG, MENU_DATA, MaterialIcon, Menu, MenuGroup, MenuItem, MenuRef, MenuService, ModalBottomSheetRef, NavigationBar, NavigationGroup, NavigationItem, NavigationRail, RadioButton, SIDE_SHEET_COMPONENT, SIDE_SHEET_CONFIG, SIDE_SHEET_DATA, SNACKBAR_ACTION_LABEL, SNACKBAR_CONFIG, SNACKBAR_MESSAGE, Scaffold, ScaffoldBar, ScaffoldPane, ScaffoldRail, SelectField, SheetsService, SideSheetActions, SideSheetBody, SideSheetHeader, SideSheetRef, Slider, Snackbar, SnackbarRef, SnackbarService, SplitButton, StandardBottomSheetRef, StateComponent, SupportingText, Switch, TextField, Toolbar, ToolbarItem, TypeBody, TypeDisplay, TypeHeadline, TypeLabel, TypeTitle, ViewportService, buildGeometry, clampIndex, indexForScrollOffset, multiBrowseStrategy, parseCarouselAspectRatio, resolveItemGeometry, resolveState, scrollOffsetForIndex, sizeBandFor };
+export type { AppBarScrollingStyle, AppBarType, BottomSheetConfig, BottomSheetContainer, BottomSheetState, BottomSheetSurfaceHost, BottomSheetType, ButtonGroupSelection, ButtonGroupType, ButtonSize, ButtonType, CardType, CarouselAlignment, CarouselArrangement, CarouselGeometry, CarouselItemGeometry, CarouselItemSize, CarouselKeyline, CarouselKeylineState, CarouselLayout, CarouselOrientation, CarouselStrategy, CarouselStrategyContext, ChipStyle, ChipType, DialogConfig, DialogContainer, DialogRole, FabSize, FabType, FloatingBarSide, FloatingInset, IconButtonType, IconButtonWidth, ListLeadingSize, ListLeadingType, Md3NavigationMode, MenuConfig, MenuPositionOrigin, MenuPositionX, MenuPositionY, MenuScrollStrategy, PreviousDialog, SelectFieldValue, SelectOption, SelectOptionValue, SideSheetConfig, SideSheetContainer, SideSheetSide, SideSheetType, SliderSize, SnackbarConfig, SnackbarDismiss, SnackbarDismissReason, SnackbarPoliteness, SplitButtonType, StandardBottomSheetHost, TextColor, TextSize, ToolbarAlignment, ToolbarColor, ToolbarOrientation, ToolbarRegion, ToolbarScrollAction, ToolbarType };