@villedemontreal/angular-ui 3.0.0 → 3.1.0

package/lib/bao.module.d.ts

@@ -13,8 +13,9 @@ import * as i11 from "./radio/module";
 import * as i12 from "./summary/module";
 import * as i13 from "./avatar/module";
 import * as i14 from "./tabs/module";
+import * as i15 from "./modal/module";
 export declare class BaoModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<BaoModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<BaoModule, never, [typeof i1.BaoIconModule, typeof i2.BaoButtonModule, typeof i3.BaoAlertModule, typeof i4.BaoCardModule, typeof i5.BaoBreadcrumbModule], [typeof i1.BaoIconModule, typeof i2.BaoButtonModule, typeof i3.BaoAlertModule, typeof i5.BaoBreadcrumbModule, typeof i4.BaoCardModule, typeof i6.BaoTagModule, typeof i7.BaoHeaderInfoModule, typeof i8.BaoListModule, typeof i9.BaoCommonComponentsModule, typeof i10.BaoCheckboxModule, typeof i11.BaoRadioModule, typeof i12.BaoSummaryModule, typeof i13.BaoAvatarModule, typeof i14.BaoTabsModule]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<BaoModule, never, [typeof i1.BaoIconModule, typeof i2.BaoButtonModule, typeof i3.BaoAlertModule, typeof i4.BaoCardModule, typeof i5.BaoBreadcrumbModule], [typeof i1.BaoIconModule, typeof i2.BaoButtonModule, typeof i3.BaoAlertModule, typeof i5.BaoBreadcrumbModule, typeof i4.BaoCardModule, typeof i6.BaoTagModule, typeof i7.BaoHeaderInfoModule, typeof i8.BaoListModule, typeof i9.BaoCommonComponentsModule, typeof i10.BaoCheckboxModule, typeof i11.BaoRadioModule, typeof i12.BaoSummaryModule, typeof i13.BaoAvatarModule, typeof i14.BaoTabsModule, typeof i15.BaoModalModule]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<BaoModule>;
 }

package/lib/icon/icon.component.d.ts

@@ -23,7 +23,7 @@ export declare class BaoIconComponent implements OnDestroy {
     private _title;
     private _titleId;
     private _elementsWithExternalReferences?;
-    constructor(elementRef: ElementRef<HTMLElement>, iconRegistry: BaoIconRegistry, renderer: Renderer2, ariaHidden: string);
+    constructor(elementRef: ElementRef<HTMLElement>, iconRegistry: BaoIconRegistry, renderer: Renderer2);
     /** Name of the icon in the SVG icon set. */
     get svgIcon(): string;
     /** Title that will be used as an aria-label for the icon */
@@ -38,6 +38,6 @@ export declare class BaoIconComponent implements OnDestroy {
     private updateSvgIcon;
     private addTitleToSVG;
     private generateUniqueTitleId;
-    static ɵfac: i0.ɵɵFactoryDeclaration<BaoIconComponent, [null, null, null, { attribute: "aria-hidden"; }]>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<BaoIconComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<BaoIconComponent, "bao-icon", ["baoIcon"], { "color": "color"; "size": "size"; "svgIcon": "svgIcon"; "title": "title"; }, {}, never, ["*"]>;
 }

package/lib/modal/index.d.ts

@@ -0,0 +1,6 @@
+export * from './module';
+export * from './modal';
+export * from './modal-container';
+export * from './modal-config';
+export * from './modal-ref';
+export * from './modal-directives';

package/lib/modal/modal-animations.d.ts

@@ -0,0 +1,8 @@
+import { AnimationTriggerMetadata } from '@angular/animations';
+/**
+ * Animations used by MatDialog.
+ * @docs-private
+ */
+export declare const baoModalAnimations: {
+    readonly modalContainer: AnimationTriggerMetadata;
+};

package/lib/modal/modal-config.d.ts

@@ -0,0 +1,105 @@
+import { ViewContainerRef, Injector } from '@angular/core';
+import { Direction } from '@angular/cdk/bidi';
+import { ScrollStrategy } from '@angular/cdk/overlay';
+export declare enum eModalDesktopWidthSize {
+    SMALL = "bao-modal-sm",
+    MEDIUM = "bao-modal-md",
+    LARGE = "bao-modal-lg"
+}
+export declare enum eModalMobileWidthSize {
+    FULL = "bao-modal-mobil-full",
+    COMPACT = "bao-modal-mobil-compact"
+}
+export interface BaoModalConfig {
+    size?: eModalDesktopWidthSize;
+    mobileSize?: eModalMobileWidthSize;
+    data?: unknown;
+    ariaLabelledBy?: string;
+}
+/** Options for where to set focus to automatically on dialog open */
+export declare type AutoFocusTarget = 'dialog' | 'first-tabbable' | 'first-heading';
+/** Valid ARIA roles for a dialog element. */
+export declare type ModalRole = 'dialog' | 'alertdialog';
+/** Possible overrides for a dialog's position. */
+export interface ModalPosition {
+    /** Override for the dialog's top position. */
+    top?: string;
+    /** Override for the dialog's bottom position. */
+    bottom?: string;
+    /** Override for the dialog's left position. */
+    left?: string;
+    /** Override for the dialog's right position. */
+    right?: string;
+}
+/**
+ * Configuration for opening a modal dialog with the BaoModal service.
+ */
+export declare class BaoModalInitialConfig<D = unknown> {
+    /**
+     * Where the attached component should live in Angular's *logical* component tree.
+     * This affects what is available for injection and the change detection order for the
+     * component instantiated inside of the dialog. This does not affect where the dialog
+     * content will be rendered.
+     */
+    viewContainerRef?: ViewContainerRef;
+    /**
+     * Injector used for the instantiation of the component to be attached. If provided,
+     * takes precedence over the injector indirectly provided by `ViewContainerRef`.
+     */
+    injector?: Injector;
+    /** ID for the dialog. If omitted, a unique one will be generated. */
+    id?: string;
+    /** The ARIA role of the dialog element. */
+    role?: ModalRole;
+    /** Custom class for the overlay pane. */
+    panelClass?: string | string[];
+    /** Whether the dialog has a backdrop. */
+    hasBackdrop?: boolean;
+    /** Custom class for the backdrop. */
+    backdropClass?: string | string[];
+    /** Whether the user can use escape or clicking on the backdrop to close the modal. */
+    disableClose?: boolean;
+    /** Width of the dialog. */
+    width?: string;
+    /** Height of the dialog. */
+    height?: string;
+    /** Min-width of the dialog. If a number is provided, assumes pixel units. */
+    minWidth?: number | string;
+    /** Min-height of the dialog. If a number is provided, assumes pixel units. */
+    minHeight?: number | string;
+    /** Max-width of the dialog. If a number is provided, assumes pixel units. Defaults to 80vw. */
+    maxWidth?: number | string;
+    /** Max-height of the dialog. If a number is provided, assumes pixel units. */
+    maxHeight?: number | string;
+    /** Position overrides. */
+    position?: ModalPosition;
+    /** Data being injected into the child component. */
+    data?: D | null;
+    /** Layout direction for the dialog's content. */
+    direction?: Direction;
+    /** ID of the element that describes the dialog. */
+    ariaDescribedBy?: string | null;
+    /** ID of the element that labels the dialog. */
+    ariaLabelledBy?: string | null;
+    /** Aria label to assign to the dialog element. */
+    ariaLabel?: string | null;
+    /**
+     * Where the dialog should focus on open.
+     */
+    autoFocus?: AutoFocusTarget | string;
+    /**
+     * Whether the dialog should restore focus to the
+     * previously-focused element, after it's closed.
+     */
+    restoreFocus?: boolean;
+    /** Whether to wait for the opening animation to finish before trapping focus. */
+    delayFocusTrap?: boolean;
+    /** Scroll strategy to be used for the dialog. */
+    scrollStrategy?: ScrollStrategy;
+    /**
+     * Whether the dialog should close when the user goes backwards/forwards in history.
+     * Note that this usually doesn't include clicking on links (unless the user is using
+     * the `HashLocationStrategy`).
+     */
+    closeOnNavigation?: boolean;
+}

package/lib/modal/modal-container.d.ts

@@ -0,0 +1,106 @@
+import { AnimationEvent } from '@angular/animations';
+import { FocusMonitor, FocusOrigin, ConfigurableFocusTrapFactory, InteractivityChecker } from '@angular/cdk/a11y';
+import { BasePortalOutlet, CdkPortalOutlet, ComponentPortal, TemplatePortal } from '@angular/cdk/portal';
+import { ChangeDetectorRef, ComponentRef, ElementRef, EmbeddedViewRef, EventEmitter, NgZone } from '@angular/core';
+import { BaoModalInitialConfig } from './modal-config';
+import * as i0 from "@angular/core";
+/** Event that captures the state of modal container animations. */
+interface DialogAnimationEvent {
+    state: 'opened' | 'opening' | 'closing' | 'closed';
+    totalTime: number;
+}
+/**
+ * Throws an exception for the case when a ComponentPortal is
+ * attached to a DomPortalOutlet without an origin.
+ * @docs-private
+ */
+export declare function throwBaoModalContentAlreadyAttachedError(): void;
+/**
+ * Base class for the `BaoModalContainer`. The base class does not implement
+ * animations as these are left to implementers of the modal container.
+ */
+export declare abstract class _BaoModalContainerBase extends BasePortalOutlet {
+    protected _elementRef: ElementRef;
+    protected _focusTrapFactory: ConfigurableFocusTrapFactory;
+    protected _changeDetectorRef: ChangeDetectorRef;
+    /** The modal configuration. */
+    _config: BaoModalInitialConfig;
+    private readonly _interactivityChecker;
+    private readonly _ngZone;
+    private _focusMonitor?;
+    /** The portal outlet inside of this container into which the modal content will be loaded. */
+    _portalOutlet: CdkPortalOutlet;
+    /** Emits when an animation state changes. */
+    _animationStateChanged: EventEmitter<DialogAnimationEvent>;
+    /**
+     * Type of interaction that led to the modal being closed. This is used to determine
+     * whether the focus style will be applied when returning focus to its original location
+     * after the modal is closed.
+     */
+    _closeInteractionType: FocusOrigin | null;
+    /** ID of the element that should be considered as the modal's label. */
+    _ariaLabelledBy: string | null;
+    /** ID for the container DOM element. */
+    _id: string;
+    protected _document: Document;
+    /** The class that traps and manages focus within the modal. */
+    private _focusTrap;
+    /** Element that was focused before the modal was opened. Save this to restore upon close. */
+    private _elementFocusedBeforeDialogWasOpened;
+    constructor(_elementRef: ElementRef, _focusTrapFactory: ConfigurableFocusTrapFactory, _changeDetectorRef: ChangeDetectorRef, _document: any, 
+    /** The modal configuration. */
+    _config: BaoModalInitialConfig, _interactivityChecker: InteractivityChecker, _ngZone: NgZone, _focusMonitor?: FocusMonitor);
+    /** Initializes the modal container with the attached content. */
+    _initializeWithAttachedContent(): void;
+    /**
+     * Attach a ComponentPortal as content to this modal container.
+     */
+    attachComponentPortal<T>(portal: ComponentPortal<T>): ComponentRef<T>;
+    /**
+     * Attach a TemplatePortal as content to this modal container.
+     */
+    attachTemplatePortal<C>(portal: TemplatePortal<C>): EmbeddedViewRef<C>;
+    /** Moves focus back into the modal if it was moved out. */
+    _recaptureFocus(): Promise<void>;
+    /**
+     * Moves the focus inside the focus trap. When autoFocus is not set to 'modal', if focus
+     * cannot be moved then focus will go to the modal container.
+     */
+    protected _trapFocus(): Promise<void>;
+    /** Restores focus to the element that was focused before the modal opened. */
+    protected _restoreFocus(): void;
+    /**
+     * Focuses the provided element. If the element is not focusable, it will add a tabIndex
+     * attribute to forcefully focus it. The attribute is removed after focus is moved.
+     */
+    private _forceFocus;
+    /**
+     * Focuses the first element that matches the given selector within the focus trap.
+     */
+    private _focusByCssSelector;
+    /** Sets up the focus trap. */
+    private _setupFocusTrap;
+    /** Captures the element that was focused before the modal was opened. */
+    private _capturePreviouslyFocusedElement;
+    /** Focuses the modal container. */
+    private _focusDialogContainer;
+    /** Returns whether focus is inside the modal. */
+    private _containsFocus;
+    /** Starts the modal exit animation. */
+    abstract _startExitAnimation(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<_BaoModalContainerBase, [null, null, null, { optional: true; }, null, null, null, null]>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<_BaoModalContainerBase, never, never, {}, {}, never>;
+}
+export declare class BaoModalContainer extends _BaoModalContainerBase {
+    /** State of the modal animation. */
+    _state: 'void' | 'enter' | 'exit';
+    /** Callback, invoked whenever an animation on the host completes. */
+    _onAnimationDone({ toState, totalTime }: AnimationEvent): Promise<void>;
+    /** Callback, invoked when an animation on the host starts. */
+    _onAnimationStart({ toState, totalTime }: AnimationEvent): void;
+    /** Starts the modal exit animation. */
+    _startExitAnimation(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<BaoModalContainer, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<BaoModalContainer, "bao-modal-container", never, {}, {}, never, never>;
+}
+export {};

package/lib/modal/modal-directives.d.ts

@@ -0,0 +1,25 @@
+import { OnChanges, OnInit, SimpleChanges, ElementRef } from '@angular/core';
+import { BaoModal } from './modal';
+import { BaoModalRef } from './modal-ref';
+import * as i0 from "@angular/core";
+/**
+ * Button that will close the current dialog.
+ */
+export declare class BaoModalClose implements OnInit, OnChanges {
+    modalRef: BaoModalRef<unknown> | null;
+    private _elementRef;
+    private _dialog;
+    /** Screenreader label for the button. */
+    ariaLabel: string;
+    /** Default to "button" to prevents accidental form submits. */
+    type: 'submit' | 'button' | 'reset';
+    /** Dialog close input. */
+    dialogResult: unknown;
+    _baoModalClose: unknown;
+    constructor(modalRef: BaoModalRef<unknown> | null, _elementRef: ElementRef<HTMLElement>, _dialog: BaoModal);
+    ngOnInit(): void;
+    ngOnChanges(changes: SimpleChanges): void;
+    _onButtonClick(event: MouseEvent): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<BaoModalClose, [{ optional: true; }, null, null]>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<BaoModalClose, "[bao-modal-close], [baoModalClose]", ["BaoModalClose"], { "ariaLabel": "aria-label"; "type": "type"; "dialogResult": "bao-modal-close"; "_baoModalClose": "baoModalClose"; }, {}, never>;
+}

package/lib/modal/modal-ref.d.ts

@@ -0,0 +1,91 @@
+import { FocusOrigin } from '@angular/cdk/a11y';
+import { OverlayRef } from '@angular/cdk/overlay';
+import { Observable } from 'rxjs';
+import { ModalPosition } from './modal-config';
+import { _BaoModalContainerBase } from './modal-container';
+/** Possible states of the lifecycle of a modal. */
+export declare const enum BaoModalState {
+    OPEN = 0,
+    CLOSING = 1,
+    CLOSED = 2
+}
+/**
+ * Reference to a modal opened via the BaoModalService.
+ */
+export declare class BaoModalRef<T, R = unknown> {
+    private _overlayRef;
+    _containerInstance: _BaoModalContainerBase;
+    /** Id of the modal. */
+    readonly id: string;
+    /** The instance of component opened into the modal. */
+    componentInstance: T;
+    /** Whether the user is allowed to close the modal. */
+    disableClose: boolean | undefined;
+    /** Subject for notifying the user that the modal has finished opening. */
+    private readonly _afterOpened;
+    /** Subject for notifying the user that the modal has finished closing. */
+    private readonly _afterClosed;
+    /** Subject for notifying the user that the modal has started closing. */
+    private readonly _beforeClosed;
+    /** Result to be passed to afterClosed. */
+    private _result;
+    /** Handle to the timeout that's running as a fallback in case the exit animation doesn't fire. */
+    private _closeFallbackTimeout;
+    /** Current state of the modal. */
+    private _state;
+    constructor(_overlayRef: OverlayRef, _containerInstance: _BaoModalContainerBase, 
+    /** Id of the modal. */
+    id?: string);
+    /**
+     * Close the modal.
+     * @param modalResult Optional result to return to the modal opener.
+     */
+    close(modalResult?: R): void;
+    /**
+     * Gets an observable that is notified when the modal is finished opening.
+     */
+    afterOpened(): Observable<void>;
+    /**
+     * Gets an observable that is notified when the modal is finished closing.
+     */
+    afterClosed(): Observable<R | undefined>;
+    /**
+     * Gets an observable that is notified when the modal has started closing.
+     */
+    beforeClosed(): Observable<R | undefined>;
+    /**
+     * Gets an observable that emits when the overlay's backdrop has been clicked.
+     */
+    backdropClick(): Observable<MouseEvent>;
+    /**
+     * Gets an observable that emits when keydown events are targeted on the overlay.
+     */
+    keydownEvents(): Observable<KeyboardEvent>;
+    /**
+     * Updates the dialog's position.
+     */
+    updatePosition(position?: ModalPosition): this;
+    /**
+     * Updates the modal's width and height.
+     */
+    updateSize(width?: string, height?: string): this;
+    /** Add a CSS class or an array of classes to the overlay pane. */
+    addPanelClass(classes: string | string[]): this;
+    /** Remove a CSS class or an array of classes from the overlay pane. */
+    removePanelClass(classes: string | string[]): this;
+    /** Gets the current state of the modal's lifecycle. */
+    getState(): BaoModalState;
+    /**
+     * Finishes the modal close by updating the state of the modal
+     * and disposing the overlay.
+     */
+    private _finishModalClose;
+    /** Fetches the position strategy object from the overlay ref. */
+    private _getPositionStrategy;
+}
+/**
+ * Closes the modal with the specified interaction type. This is currently not part of
+ * `BaoModalRef` as that would conflict with custom modal ref mocks provided in tests.
+ * More details. See: https://github.com/angular/components/pull/9257#issuecomment-651342226.
+ */
+export declare function _closeModalVia<R>(ref: BaoModalRef<R>, interactionType: FocusOrigin, result?: R): void;

package/lib/modal/modal.d.ts

@@ -0,0 +1,91 @@
+import { InjectionToken, Injector, OnDestroy, TemplateRef, Type } from '@angular/core';
+import { Observable, Subject } from 'rxjs';
+import { BaoModalContainer, _BaoModalContainerBase } from './modal-container';
+import { BaoModalRef } from './modal-ref';
+import { BaoModalConfig } from './modal-config';
+import { ComponentType, Overlay, OverlayContainer } from '@angular/cdk/overlay';
+import * as i0 from "@angular/core";
+/** Injection token that can be used to access the data that was passed in to a modal. */
+export declare const BAO_MODAL_DATA: InjectionToken<unknown>;
+export declare abstract class BaoModalBase<C extends _BaoModalContainerBase> implements OnDestroy {
+    private _overlay;
+    private _injector;
+    private _parentModal;
+    private _overlayContainer;
+    private _modalRefConstructor;
+    private _modalContainerType;
+    private _modalDataToken;
+    private _animationMode?;
+    readonly afterAllClosed: Observable<void>;
+    private _openModalsAtThisLevel;
+    private readonly _afterAllClosedAtThisLevel;
+    private readonly _afterOpenedAtThisLevel;
+    private _ariaHiddenElements;
+    private _modalAnimatingOpen;
+    private _animationStateSubscriptions;
+    private _lastModalRef;
+    constructor(_overlay: Overlay, _injector: Injector, _parentModal: BaoModalBase<C> | undefined, _overlayContainer: OverlayContainer, _modalRefConstructor: Type<BaoModalRef<unknown>>, _modalContainerType: Type<C>, _modalDataToken: InjectionToken<unknown>, _animationMode?: 'NoopAnimations' | 'BrowserAnimations');
+    /** Keeps track of the currently-open modals. */
+    get openModals(): BaoModalRef<unknown>[];
+    /** Stream that emits when a modal has been opened. */
+    get afterOpened(): Subject<BaoModalRef<unknown>>;
+    getAfterAllClosed(): Subject<void>;
+    /**
+     * Opens a modal modal containing the given template.
+     */
+    open<T>(componentOrTemplateRef: ComponentType<T> | TemplateRef<T>, config?: BaoModalConfig): BaoModalRef<unknown>;
+    /**
+     * Closes all of the currently-open modals.
+     */
+    closeAll(): void;
+    /**
+     * Finds an open modal by its id.
+     */
+    getModalById(id: string): BaoModalRef<unknown> | undefined;
+    ngOnDestroy(): void;
+    /**
+     * Creates the overlay into which the modal will be loaded.
+     */
+    private _createOverlay;
+    /**
+     * Creates an overlay config from a modal config.
+     */
+    private _getOverlayConfig;
+    /**
+     * Attaches a modal container to a modal's already-created overlay.
+     */
+    private _attachModalContainer;
+    /**
+     * Attaches the user-provided component to the already-created modal container.
+     */
+    private _attachModalContent;
+    /**
+     * Creates a custom injector to be used inside the modal. This allows a component loaded inside
+     * of a modal to close itself and, optionally, to return a value.
+     */
+    private _createInjector;
+    /**
+     * Removes a modal from the array of open modals.
+     */
+    private _removeOpenModal;
+    /**
+     * Hides all of the content that isn't an overlay from assistive technology.
+     */
+    private _hideNonModalContentFromAssistiveTechnology;
+    /** Closes all of the modals in an array. */
+    private _closeModals;
+    /**
+     * Applies default options to the modal config.
+     */
+    private _applyConfigDefaults;
+    static ɵfac: i0.ɵɵFactoryDeclaration<BaoModalBase<any>, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<BaoModalBase<any>, never, never, {}, {}, never>;
+}
+/**
+ * Service to open modal.
+ */
+export declare class BaoModal extends BaoModalBase<BaoModalContainer> {
+    constructor(overlay: Overlay, injector: Injector, parentModal: BaoModal, overlayContainer: OverlayContainer, animationMode?: 'NoopAnimations' | 'BrowserAnimations');
+    static ɵfac: i0.ɵɵFactoryDeclaration<BaoModal, [null, null, { optional: true; skipSelf: true; }, null, { optional: true; }]>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<BaoModal>;
+}

package/lib/modal/module.d.ts

@@ -0,0 +1,12 @@
+import * as i0 from "@angular/core";
+import * as i1 from "./modal-container";
+import * as i2 from "./modal-directives";
+import * as i3 from "@angular/common";
+import * as i4 from "@angular/cdk/overlay";
+import * as i5 from "@angular/cdk/portal";
+import * as i6 from "@angular/platform-browser/animations";
+export declare class BaoModalModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<BaoModalModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<BaoModalModule, [typeof i1.BaoModalContainer, typeof i2.BaoModalClose], [typeof i3.CommonModule, typeof i4.OverlayModule, typeof i5.PortalModule, typeof i6.BrowserAnimationsModule, typeof i6.NoopAnimationsModule], [typeof i1.BaoModalContainer, typeof i2.BaoModalClose]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<BaoModalModule>;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@villedemontreal/angular-ui",
-  "version": "3.0.0",
+  "version": "3.1.0",
   "peerDependencies": {
     "@angular/cdk": ">=8.0.0 <14.0.0",
     "@angular/common": ">=8.0.0 <14.0.0",

package/public-api.d.ts

@@ -15,3 +15,4 @@ export * from './lib/summary/index';
 export * from './lib/shared';
 export * from './lib/avatar';
 export * from './lib/tabs';
+export * from './lib/modal';