@impartner/design-components 1.0.0 → 1.0.2

package/lib/backdrop/backdrop.component.d.ts

@@ -1,4 +1,4 @@
-import { OnInit } from '@angular/core';
+import { OnDestroy, OnInit } from '@angular/core';
 import { InteractionService } from '../../services';
 import * as i0 from "@angular/core";
 /**
@@ -6,14 +6,16 @@ import * as i0 from "@angular/core";
  * This component needs to be added to the body of the host application if a backdrop is desired.
  * To use, import `BackdropModule` or another module that imports and exports that module from `@impartner/design-components`.
  */
-export declare class BackdropComponent implements OnInit {
+export declare class BackdropComponent implements OnInit, OnDestroy {
     private interactionService;
     private _valid;
+    constructor(interactionService: InteractionService);
     get valid(): boolean;
     get show(): boolean;
-    constructor(interactionService: InteractionService);
     ngOnInit(): void;
+    ngOnDestroy(): void;
     invalidate(): void;
+    validate(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<BackdropComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<BackdropComponent, "impdc-backdrop", never, {}, {}, never, never, false>;
 }

package/lib/breadcrumb/breadcrumb.component.d.ts

@@ -1,4 +1,4 @@
-import { QueryList } from '@angular/core';
+import { AfterViewInit, ChangeDetectorRef, QueryList } from '@angular/core';
 import { BreadcrumbItemComponent } from './breadcrumb-item.component';
 import * as i0 from "@angular/core";
 /**
@@ -6,13 +6,16 @@ import * as i0 from "@angular/core";
  * to a previous page. Items within must be wrapped with `BreadcrumbItemComponent` (`<impdc-breadcrumb-item`).
  * To use, import `BreadcrumbModule` or another module that imports and exports that module from `@impartner/design-components`.
  */
-export declare class BreadcrumbComponent {
+export declare class BreadcrumbComponent implements AfterViewInit {
+    private _changeDetectorRef;
     /**
      * Sets the `aria-label` attribute for the Breadcrumb's `nav` element for accessibility.
      */
     label: string;
     private impdcBreadcrumb;
-    protected _breadcrumbs: QueryList<BreadcrumbItemComponent>;
+    protected breadcrumbItems: QueryList<BreadcrumbItemComponent>;
+    constructor(_changeDetectorRef: ChangeDetectorRef);
+    ngAfterViewInit(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<BreadcrumbComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<BreadcrumbComponent, "impdc-breadcrumb, div[impdc-breadcrumb]", never, { "label": "label"; }, {}, ["_breadcrumbs"], never, false>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<BreadcrumbComponent, "impdc-breadcrumb, div[impdc-breadcrumb]", never, { "label": "label"; }, {}, ["breadcrumbItems"], never, false>;
 }

package/lib/breadcrumb/breadcrumb.module.d.ts

@@ -1,9 +1,9 @@
 import * as i0 from "@angular/core";
-import * as i1 from "./breadcrumb.component";
-import * as i2 from "./breadcrumb-item.component";
+import * as i1 from "./breadcrumb-item.component";
+import * as i2 from "./breadcrumb.component";
 import * as i3 from "@angular/common";
 export declare class BreadcrumbModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<BreadcrumbModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<BreadcrumbModule, [typeof i1.BreadcrumbComponent, typeof i2.BreadcrumbItemComponent], [typeof i3.CommonModule], [typeof i1.BreadcrumbComponent, typeof i2.BreadcrumbItemComponent]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<BreadcrumbModule, [typeof i1.BreadcrumbItemComponent, typeof i2.BreadcrumbComponent], [typeof i3.CommonModule], [typeof i1.BreadcrumbItemComponent, typeof i2.BreadcrumbComponent]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<BreadcrumbModule>;
 }

package/lib/data-card/data-card.component.d.ts

@@ -0,0 +1,72 @@
+import { EventEmitter } from '@angular/core';
+import * as i0 from "@angular/core";
+/**
+ * The `CardHeadingComponent` (`<impdc-data-card` or `<any impdc-data-card`) is to display data snapshots with support for
+ * previous values and differences.
+ * To use, import `DataCardModule` or another module that imports and exports that module from `@impartner/design-components`.
+ */
+export declare class DataCardComponent {
+    /**
+     * The subject text for the Data Card.
+     */
+    title: string;
+    /**
+     * The current data value. Any number/currency format is supported.
+     */
+    current: string;
+    /**
+     * The previous data value. Any number/currency format is supported.
+     */
+    previous: string;
+    /**
+     * The difference between the current and previous values. A numerical or percentage value is preferred,
+     * but any number/currency format is supported.
+     */
+    difference: string;
+    /**
+     * Text for the link at the bottom of the Data Card. If provided, enables the `linkClicked` event to be emitted.
+     */
+    linkText: string;
+    /**
+     * When stacking multiple Data Card elements together, it's common to combine their borders.
+     */
+    sharedBorders: boolean;
+    /**
+     * Makes the title stand out more than it does by default.
+     */
+    titleAttention: boolean;
+    /**
+     * Determines if the difference value will be wrapped in a `rounded-pill`.
+     */
+    differencePill: boolean;
+    /**
+     * Changes the text color for the current value.
+     */
+    currentColor: string;
+    /**
+     * Changes the color of the icon.
+     */
+    iconColor: string;
+    /**
+     * Changes the color of the icon's background.
+     */
+    iconBgColor: string;
+    /**
+     * Emitted when the link text is clicked.
+     */
+    linkClicked: EventEmitter<MouseEvent | Event>;
+    /**
+     * Emitted when the corner content is clicked.
+     */
+    cornerClicked: EventEmitter<MouseEvent | Event>;
+    private get classDataCard();
+    private get classDataCardSharedBorders();
+    get differenceNumber(): number;
+    get differenceNegative(): boolean;
+    get differencePositive(): boolean;
+    get differenceDisplay(): string;
+    handleLinkClick(event: MouseEvent | Event): void;
+    handleCornerClick(event: MouseEvent | Event): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DataCardComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DataCardComponent, "impdc-data-card, [impdc-data-card]", never, { "title": "title"; "current": "current"; "previous": "previous"; "difference": "difference"; "linkText": "linkText"; "sharedBorders": "sharedBorders"; "differencePill": "differencePill"; "currentColor": "currentColor"; "iconColor": "iconColor"; "iconBgColor": "iconBgColor"; }, { "linkClicked": "linkClicked"; "cornerClicked": "cornerClicked"; }, never, ["[icon]", "*", "[corner]", "[footer]"], false>;
+}

package/lib/data-card/data-card.module.d.ts

@@ -0,0 +1,9 @@
+import * as i0 from "@angular/core";
+import * as i1 from "./data-card.component";
+import * as i2 from "@angular/common";
+export declare class DataCardModule {
+    constructor();
+    static ɵfac: i0.ɵɵFactoryDeclaration<DataCardModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<DataCardModule, [typeof i1.DataCardComponent], [typeof i2.CommonModule], [typeof i1.DataCardComponent]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<DataCardModule>;
+}

package/lib/data-card/index.d.ts

@@ -0,0 +1,2 @@
+export { DataCardComponent } from './data-card.component';
+export { DataCardModule } from './data-card.module';

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

@@ -1,11 +1,13 @@
-import { ElementRef } from '@angular/core';
+import { AfterContentChecked, ElementRef } from '@angular/core';
 import { FontAwesomeIcon, FontAwesomeIconTheme } from '../../constants';
 import * as i0 from "@angular/core";
 /**
  * The `IconComponent` (`<impdc-icon` or `<any impdc-icon`) is an icon wrapper utilizing Font Awesome 5.
  * To use, import `IconModule` or another module that imports and exports that module from `@impartner/design-components`.
  */
-export declare class IconComponent {
+export declare class IconComponent implements AfterContentChecked {
+    private _loading;
+    private _licensed;
     /**
      * The Font Awesome 5 icon name. See {@link https://fontawesome.com/v5/search}. Local
      * development may not represent the complete list of available icons.
@@ -21,10 +23,10 @@ export declare class IconComponent {
      * interpreted as pixels.
      */
     size: string | number;
-    iconRef?: ElementRef;
-    private get usingLicensed();
+    iconRef: ElementRef;
     get typeClass(): string;
     get computedSize(): string;
+    ngAfterContentChecked(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<IconComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<IconComponent, "impdc-icon, [impdc-icon]", never, { "name": "name"; "theme": "theme"; "size": "size"; }, {}, never, never, false>;
 }

package/lib/index.d.ts

@@ -22,4 +22,5 @@ export * from './pagination';
 export * from './scrollable';
 export * from './size-detection';
 export * from './select-icon';
+export * from './data-card';
 export { DesignComponentsModule };

package/lib/modal/modal.component.d.ts

@@ -1,4 +1,4 @@
-import { EventEmitter, OnDestroy, OnInit } from '@angular/core';
+import { ElementRef, EventEmitter, OnDestroy, OnInit } from '@angular/core';
 import { FontAwesomeIcon, FontAwesomeIconTheme } from '../../constants';
 import { InteractionService } from '../../services';
 import { ButtonTheme } from '../button';
@@ -13,10 +13,11 @@ import * as i0 from "@angular/core";
 export declare class ModalComponent implements OnInit, OnDestroy {
     private _interactionService;
     private _interactableId;
+    private _show;
     /**
      * Determines if the Modal should be shown immediately.
      */
-    show: boolean;
+    set show(show: boolean);
     /**
      * The theme of the Modal. Affects the layout of the Modal as well as some colors.
      */
@@ -38,6 +39,10 @@ export declare class ModalComponent implements OnInit, OnDestroy {
      * The subject text of the Modal.
      */
     titleText: string;
+    /**
+     * The fallback button text to accept the Modal. This is bypassed if you content-project the accept button.
+     */
+    acceptText: string;
     /**
      * Allows the Modal to be dismissed. This is different from `accept` and `deny`. If a Modal is meant to be re-opened frequently it should be dismissable.
      */
@@ -50,6 +55,18 @@ export declare class ModalComponent implements OnInit, OnDestroy {
      * Shows a backdrop behind the Modal.
      */
     backdrop: boolean;
+    /**
+     * Contains the dismiss button content projection.
+     */
+    dismissEl: ElementRef;
+    /**
+     * Contains the deny button content projection.
+     */
+    denyEl: ElementRef;
+    /**
+     * Contains the accept button content projection.
+     */
+    acceptEl: ElementRef;
     /**
      * Event emitted when the Modal content is dismissed.
      */
@@ -62,6 +79,7 @@ export declare class ModalComponent implements OnInit, OnDestroy {
      * Event emitted when the Modal content is accepted.
      */
     accept: EventEmitter<MouseEvent | Event>;
+    constructor(_interactionService: InteractionService);
     get interactableId(): number;
     get valid(): boolean;
     get shown(): boolean;
@@ -69,12 +87,19 @@ export declare class ModalComponent implements OnInit, OnDestroy {
     get showDestructiveIcon(): boolean;
     get acceptFallbackTheme(): ButtonTheme;
     get hideHeader(): boolean;
-    constructor(_interactionService: InteractionService);
     ngOnInit(): void;
     ngOnDestroy(): void;
-    handleDismiss(event: MouseEvent | Event): void;
-    handleDeny(event: MouseEvent | Event): void;
-    handleAccept(event: MouseEvent | Event): void;
+    protected handleDismiss(event: MouseEvent | Event): void;
+    protected handleDeny(event: MouseEvent | Event): void;
+    protected handleAccept(event: MouseEvent | Event): void;
+    /**
+     * Opens/shows the modal programmatically.
+     */
+    open(): void;
+    /**
+     * Closes/hides the modal programmatically.
+     */
+    close(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<ModalComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<ModalComponent, "impdc-modal", never, { "show": "show"; "theme": "theme"; "size": "size"; "iconName": "iconName"; "iconTheme": "iconTheme"; "titleText": "titleText"; "dismissable": "dismissable"; "fade": "fade"; "backdrop": "backdrop"; }, { "dismiss": "dismiss"; "deny": "deny"; "accept": "accept"; }, never, ["*", "[dismiss]", "[deny]", "[accept]"], false>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ModalComponent, "impdc-modal", never, { "show": "show"; "theme": "theme"; "size": "size"; "iconName": "iconName"; "iconTheme": "iconTheme"; "titleText": "titleText"; "acceptText": "acceptText"; "dismissable": "dismissable"; "fade": "fade"; "backdrop": "backdrop"; }, { "dismiss": "dismiss"; "deny": "deny"; "accept": "accept"; }, never, ["*", "[dismiss]", "[deny]", "[accept]"], false>;
 }

package/lib/scrollable/scrollable.component.d.ts

@@ -9,6 +9,8 @@ import * as i0 from "@angular/core";
  */
 export declare class ScrollableComponent implements OnChanges, AfterViewInit {
     private _cd;
+    private readonly _hostElementRef;
+    private readonly GET_ANCESTOR_BG_SEARCH_DEPTH;
     /**
      * The base amount to scroll.
      */
@@ -25,7 +27,7 @@ export declare class ScrollableComponent implements OnChanges, AfterViewInit {
     private get _containerElement();
     contentRef: ElementRef | undefined;
     private get _contentElement();
-    constructor(_cd: ChangeDetectorRef);
+    constructor(_cd: ChangeDetectorRef, _hostElementRef: ElementRef);
     ngOnChanges(changes: SimpleChanges): void;
     ngAfterViewInit(): void;
     scroll(direction: number): Promise<void>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@impartner/design-components",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "author": "Impartner",
   "license": "BSD-3-Clause",
   "private": false,
@@ -16,7 +16,7 @@
     "@angular/core": ">= 14",
     "@angular/forms": ">= 14",
     "@angular/localize": ">= 14",
-    "@impartner/design": "^1.0.0",
+    "@impartner/design": "^1.0.1",
     "@ng-bootstrap/ng-bootstrap": "^13.1.1",
     "@popperjs/core": "^2.10.2",
     "nanoid": "^4.0.0",

package/services/interaction.service.d.ts

@@ -6,6 +6,7 @@ export declare class InteractionService {
     private _interactables;
     get showBackdrop(): boolean;
     registerBackdrop(modalBackdrop: BackdropComponent): void;
+    unregisterBackdrop(modalBackdrop: BackdropComponent): void;
     add(interactable: InteractableComponent): number;
     remove(interactableId: number): void;
     toggle(interactable: InteractableComponent): boolean;