@daffodil/design 0.66.1 → 0.67.0

package/loading-icon/examples/loading-icon-color/loading-icon-color.module.d.ts

@@ -1,9 +1,10 @@
 import * as i0 from "@angular/core";
 import * as i1 from "./loading-icon-color.component";
-import * as i2 from "@daffodil/design";
-import * as i3 from "@angular/forms";
+import * as i2 from "@daffodil/design/loading-icon";
+import * as i3 from "@daffodil/design";
+import * as i4 from "@angular/forms";
 export declare class LoadingIconColorModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<LoadingIconColorModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<LoadingIconColorModule, [typeof i1.LoadingIconColorComponent], [typeof i2.DaffLoadingIconModule, typeof i2.DaffRadioModule, typeof i3.ReactiveFormsModule], [typeof i1.LoadingIconColorComponent]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<LoadingIconColorModule, [typeof i1.LoadingIconColorComponent], [typeof i2.DaffLoadingIconModule, typeof i3.DaffRadioModule, typeof i4.ReactiveFormsModule], [typeof i1.LoadingIconColorComponent]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<LoadingIconColorModule>;
 }

package/loading-icon/examples/loading-icon-diameter/loading-icon-diameter.module.d.ts

@@ -1,6 +1,6 @@
 import * as i0 from "@angular/core";
 import * as i1 from "./loading-icon-diameter.component";
-import * as i2 from "@daffodil/design";
+import * as i2 from "@daffodil/design/loading-icon";
 export declare class LoadingIconDiameterModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<LoadingIconDiameterModule, never>;
     static ɵmod: i0.ɵɵNgModuleDeclaration<LoadingIconDiameterModule, [typeof i1.LoadingIconDiameterComponent], [typeof i2.DaffLoadingIconModule], [typeof i1.LoadingIconDiameterComponent]>;

package/loading-icon/index.d.ts

@@ -0,0 +1 @@
+export * from './public_api';

package/loading-icon/loading-icon/loading-icon.component.d.ts

@@ -0,0 +1,40 @@
+import { ElementRef, Renderer2 } from '@angular/core';
+import { DaffColorable } from '@daffodil/design';
+import * as i0 from "@angular/core";
+/**
+ * An _elementRef and an instance of renderer2 are needed for the Colorable mixin
+ */
+declare class DaffLoadingIconBase {
+    _elementRef: ElementRef;
+    _renderer: Renderer2;
+    constructor(_elementRef: ElementRef, _renderer: Renderer2);
+}
+declare const _daffLoadingIconBase: (new (...args: any[]) => {
+    _color: import("@daffodil/design").DaffPalette;
+    color: import("@daffodil/design").DaffPalette;
+    _elementRef: ElementRef<any>;
+    _renderer: Renderer2;
+}) & typeof DaffLoadingIconBase;
+/**
+ * @inheritdoc
+ */
+export declare class DaffLoadingIconComponent extends _daffLoadingIconBase implements DaffColorable {
+    private elementRef;
+    private renderer;
+    /**
+     * The (pixel) diameter of the animation
+     */
+    diameter: number;
+    /**
+     * @docs-private
+     */
+    class: boolean;
+    /**
+     * @docs-private
+     */
+    get maxWidth(): string;
+    constructor(elementRef: ElementRef, renderer: Renderer2);
+    static ɵfac: i0.ɵɵFactoryDeclaration<DaffLoadingIconComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DaffLoadingIconComponent, "daff-loading-icon", never, { "color": { "alias": "color"; "required": false; }; "diameter": { "alias": "diameter"; "required": false; }; }, {}, never, never, false, never>;
+}
+export {};

package/loading-icon/loading-icon.module.d.ts

@@ -0,0 +1,8 @@
+import * as i0 from "@angular/core";
+import * as i1 from "./loading-icon/loading-icon.component";
+import * as i2 from "@angular/common";
+export declare class DaffLoadingIconModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<DaffLoadingIconModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<DaffLoadingIconModule, [typeof i1.DaffLoadingIconComponent], [typeof i2.CommonModule], [typeof i1.DaffLoadingIconComponent]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<DaffLoadingIconModule>;
+}

package/loading-icon/public_api.d.ts

@@ -0,0 +1,2 @@
+export { DaffLoadingIconModule } from './loading-icon.module';
+export { DaffLoadingIconComponent } from './loading-icon/loading-icon.component';

package/loading-icon/src/loading-icon-theme.scss

@@ -0,0 +1,61 @@
+@use 'sass:map';
+@use '../../scss/core';
+@use '../../scss/theming';
+
+@mixin daff-loading-icon-theme($theme) {
+	$primary: map.get($theme, primary);
+	$secondary: map.get($theme, secondary);
+	$tertiary: map.get($theme, tertiary);
+	$base: core.daff-map-deep-get($theme, 'core.base');
+	$base-contrast: core.daff-map-deep-get($theme, 'core.base-contrast');
+	$white: core.daff-map-deep-get($theme, 'core.white');
+	$black: core.daff-map-deep-get($theme, 'core.black');
+
+	.daff-loading-icon {
+		circle {
+			stroke: currentColor;
+		}
+
+		&.daff-primary {
+			circle {
+				stroke: theming.daff-color($primary);
+			}
+		}
+
+		&.daff-secondary {
+			circle {
+				stroke: theming.daff-color($secondary);
+			}
+		}
+
+		&.daff-tertiary {
+			circle {
+				stroke: theming.daff-color($tertiary);
+			}
+		}
+
+		&.daff-theme {
+			circle {
+				stroke: $base;
+			}
+		}
+
+		&.daff-theme-contrast {
+			circle {
+				stroke: $base-contrast;
+			}
+		}
+
+		&.daff-black {
+			circle {
+				stroke: $black;
+			}
+		}
+
+		&.daff-white {
+			circle {
+				stroke: $white;
+			}
+		}
+	}
+}

package/media-gallery/README.md

@@ -0,0 +1,19 @@
+# Media Gallery
+`<daff-media-gallery>` is used to display a group of `[daffThumbnail]`s in a gallery format. Media galleries are useful to showcase multiple images related to a single product or topic.
+
+## Thumbnail
+`[daffThumbnail]` should be used as a directive with `<daff-image>`. [View Image Documentation](/libs/design/src/atoms/image/README.md)
+
+It should never be used as a standalone component. The first thumbnail is selected by default and dynamically rendered as the primary image by utilizing the `<daff-media-renderer>` component. The selected thumbnail can be controlled by the enduser, and the position of the list of thumbnails is dependent on the screen size.
+
+<design-land-example-viewer-container example="basic-media-gallery"></design-land-example-viewer-container>
+
+## Image Aspect Ratio
+It's recommended to utilize the same aspect ratio for all images in the same media gallery. Otherwise, the height and width of the media gallery may change with every different aspect ratio presented by the selected thumbnail as show in the example.
+
+The thumbnail dimension is set to `80x80` pixels, so the recommended aspect ratio is `1:1`. However, it is not required since the thumbnail will horizontally and vertically center align images within a thumbnail.
+
+<design-land-example-viewer-container example="mismatched-sizes-media-gallery"></design-land-example-viewer-container>
+
+## Accessibility
+Accessibility considerations for media gallery is handled by the `DaffImageComponent`. The `alt` attribute must be defined in `<daff-image>`. It specifies an alternate text for an image. An error will appear if it's not defined. This is important because it allows screen readers to describe what's in the image for visually impaired people. [View Image Documentation](/libs/design/src/atoms/image/README.md)

package/media-gallery/examples/basic-media-gallery/basic-media-gallery.module.d.ts

@@ -1,8 +1,9 @@
 import * as i0 from "@angular/core";
 import * as i1 from "./basic-media-gallery.component";
-import * as i2 from "@daffodil/design";
+import * as i2 from "@daffodil/design/image";
+import * as i3 from "@daffodil/design/media-gallery";
 export declare class BasicMediaGalleryModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<BasicMediaGalleryModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<BasicMediaGalleryModule, [typeof i1.BasicMediaGalleryComponent], [typeof i2.DaffImageModule, typeof i2.DaffMediaGalleryModule], [typeof i1.BasicMediaGalleryComponent]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<BasicMediaGalleryModule, [typeof i1.BasicMediaGalleryComponent], [typeof i2.DaffImageModule, typeof i3.DaffMediaGalleryModule], [typeof i1.BasicMediaGalleryComponent]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<BasicMediaGalleryModule>;
 }

package/media-gallery/examples/mismatched-sizes-media-gallery/mismatched-sizes-media-gallery.module.d.ts

@@ -1,8 +1,9 @@
 import * as i0 from "@angular/core";
 import * as i1 from "./mismatched-sizes-media-gallery.component";
-import * as i2 from "@daffodil/design";
+import * as i2 from "@daffodil/design/image";
+import * as i3 from "@daffodil/design/media-gallery";
 export declare class MismatchedSizesMediaGalleryModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<MismatchedSizesMediaGalleryModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<MismatchedSizesMediaGalleryModule, [typeof i1.MismatchedSizesMediaGalleryComponent], [typeof i2.DaffImageModule, typeof i2.DaffMediaGalleryModule], [typeof i1.MismatchedSizesMediaGalleryComponent]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<MismatchedSizesMediaGalleryModule, [typeof i1.MismatchedSizesMediaGalleryComponent], [typeof i2.DaffImageModule, typeof i3.DaffMediaGalleryModule], [typeof i1.MismatchedSizesMediaGalleryComponent]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<MismatchedSizesMediaGalleryModule>;
 }

package/media-gallery/examples/skeleton-media-gallery/skeleton-media-gallery.module.d.ts

@@ -1,8 +1,9 @@
 import * as i0 from "@angular/core";
 import * as i1 from "./skeleton-media-gallery.component";
-import * as i2 from "@daffodil/design";
+import * as i2 from "@daffodil/design/image";
+import * as i3 from "@daffodil/design/media-gallery";
 export declare class SkeletonMediaGalleryModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<SkeletonMediaGalleryModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<SkeletonMediaGalleryModule, [typeof i1.SkeletonMediaGalleryComponent], [typeof i2.DaffImageModule, typeof i2.DaffMediaGalleryModule], [typeof i1.SkeletonMediaGalleryComponent]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<SkeletonMediaGalleryModule, [typeof i1.SkeletonMediaGalleryComponent], [typeof i2.DaffImageModule, typeof i3.DaffMediaGalleryModule], [typeof i1.SkeletonMediaGalleryComponent]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<SkeletonMediaGalleryModule>;
 }

package/media-gallery/index.d.ts

@@ -0,0 +1 @@
+export * from './public_api';

package/media-gallery/media-gallery/media-gallery.component.d.ts

@@ -0,0 +1,41 @@
+import { OnInit, OnDestroy, ElementRef, Renderer2 } from '@angular/core';
+import { DaffSkeletonable } from '@daffodil/design';
+import { DaffMediaGalleryRegistration } from '../helpers/media-gallery-registration.interface';
+import { DaffMediaGalleryRegistry } from '../registry/media-gallery.registry';
+import * as i0 from "@angular/core";
+/**
+ * An _elementRef and an instance of renderer2 are needed for the link set mixins
+ */
+declare class DaffMediaGalleryBase {
+    _elementRef: ElementRef;
+    _renderer: Renderer2;
+    constructor(_elementRef: ElementRef, _renderer: Renderer2);
+}
+declare const _daffMediaGalleryBase: (new (...args: any[]) => {
+    _skeleton: boolean;
+    skeleton: boolean;
+    _elementRef: ElementRef<any>;
+    _renderer: Renderer2;
+}) & (new (...args: any[]) => {
+    _elementRef: ElementRef<any>;
+    _renderer: Renderer2;
+}) & typeof DaffMediaGalleryBase;
+export declare class DaffMediaGalleryComponent extends _daffMediaGalleryBase implements DaffMediaGalleryRegistration, DaffSkeletonable, OnInit, OnDestroy {
+    private elementRef;
+    private renderer;
+    private registry;
+    /**
+     * Adds a class for styling the media gallery
+     */
+    class: boolean;
+    /**
+     * The name of the gallery
+     */
+    name: string;
+    constructor(elementRef: ElementRef, renderer: Renderer2, registry: DaffMediaGalleryRegistry);
+    ngOnInit(): void;
+    ngOnDestroy(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DaffMediaGalleryComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DaffMediaGalleryComponent, "daff-media-gallery", never, { "skeleton": { "alias": "skeleton"; "required": false; }; "name": { "alias": "name"; "required": false; }; }, {}, never, ["[daffThumbnail]"], false, never>;
+}
+export {};

package/media-gallery/media-gallery.module.d.ts

@@ -0,0 +1,10 @@
+import * as i0 from "@angular/core";
+import * as i1 from "./media-gallery/media-gallery.component";
+import * as i2 from "./thumbnail/thumbnail.directive";
+import * as i3 from "./media-renderer/media-renderer.component";
+import * as i4 from "@angular/common";
+export declare class DaffMediaGalleryModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<DaffMediaGalleryModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<DaffMediaGalleryModule, [typeof i1.DaffMediaGalleryComponent, typeof i2.DaffThumbnailDirective, typeof i3.DaffMediaRendererComponent], [typeof i4.CommonModule], [typeof i2.DaffThumbnailDirective, typeof i1.DaffMediaGalleryComponent]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<DaffMediaGalleryModule>;
+}

package/media-gallery/media-renderer/media-renderer.component.d.ts

@@ -0,0 +1,29 @@
+import { OnInit, ComponentFactoryResolver, ViewContainerRef, OnDestroy } from '@angular/core';
+import { DaffMediaGalleryRegistration } from '../helpers/media-gallery-registration.interface';
+import { DaffMediaGalleryRegistry } from '../registry/media-gallery.registry';
+import * as i0 from "@angular/core";
+/**
+ * Dynamically renders the selected `DaffThumbnailDirective` in a `daff-media-gallery` any time the selected thumbnail
+ * changes.
+ */
+export declare class DaffMediaRendererComponent implements OnInit, OnDestroy {
+    private componentFactoryResolver;
+    private registry;
+    private gallery;
+    /**
+     * Private tracker for indicating when the component is destroyed.
+     */
+    private _destroy$;
+    constructor(componentFactoryResolver: ComponentFactoryResolver, registry: DaffMediaGalleryRegistry, gallery: DaffMediaGalleryRegistration);
+    /**
+     * The slot that the "component" is rendered into.
+     */
+    slot: ViewContainerRef;
+    ngOnInit(): void;
+    /**
+     * Used to unsubscribe from the dynamic component.
+     */
+    ngOnDestroy(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DaffMediaRendererComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DaffMediaRendererComponent, "daff-media-renderer", never, {}, {}, never, never, false, never>;
+}

package/media-gallery/public_api.d.ts

@@ -0,0 +1,4 @@
+export * from './media-gallery/media-gallery.component';
+export * from './media-gallery.module';
+export * from './thumbnail/thumbnail.directive';
+export { daffThumbnailCompatToken } from './thumbnail/thumbnail-compat.token';

package/media-gallery/registry/media-gallery.registry.d.ts

@@ -0,0 +1,34 @@
+import { BehaviorSubject } from 'rxjs';
+import { DaffMediaGalleryRegistration } from '../helpers/media-gallery-registration.interface';
+import { DaffThumbnailRegistration } from '../thumbnail/thumbnail-registration.interface';
+import * as i0 from "@angular/core";
+export interface DaffMediaGalleryDict {
+    [galleryName: string]: BehaviorSubject<DaffMediaGallery>;
+}
+export interface DaffMediaGallery {
+    gallery: DaffMediaGalleryRegistration;
+    thumbnails: DaffThumbnailRegistration[];
+}
+export declare const isGallery: (element: DaffThumbnailRegistration | DaffMediaGalleryRegistration) => element is DaffMediaGalleryRegistration;
+export declare class DaffMediaGalleryRegistry {
+    galleries: DaffMediaGalleryDict;
+    /**
+     * @description
+     * Adds a media element to the internal registry.
+     */
+    add(gallery: DaffMediaGalleryRegistration, thumbnail?: DaffThumbnailRegistration): void;
+    /**
+     * @description
+     * Removes a thumbnail or gallery from the internal registry.
+     */
+    remove(element: DaffThumbnailRegistration | DaffMediaGalleryRegistration): void;
+    private removeThumbnail;
+    private removeGallery;
+    /**
+     * @description
+     * Selects a media element for a given gallery.
+     */
+    select(thumbnail: DaffThumbnailRegistration): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DaffMediaGalleryRegistry, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<DaffMediaGalleryRegistry>;
+}

package/media-gallery/src/media-gallery-theme.scss

@@ -0,0 +1,27 @@
+@use 'sass:map';
+@use '../../scss/theming';
+@use '../../scss/core';
+
+@mixin daff-media-gallery-theme($theme) {
+	$neutral: core.daff-map-deep-get($theme, 'core.neutral');
+
+	.daff-media-gallery {
+		$root: &;
+
+		.daff-thumbnail {
+			border: 1px solid transparent;
+
+			&--selected {
+				border: 1px solid theming.daff-color($neutral);
+			}
+		}
+
+		&.daff-skeleton {
+			.daff-thumbnail {
+				&--selected {
+					border: none;
+				}
+			}
+		}
+	}
+}

package/media-gallery/thumbnail/thumbnail-registration.interface.d.ts

@@ -0,0 +1,9 @@
+import { Type } from '@angular/core';
+import { DaffMediaGalleryRegistration } from '../helpers/media-gallery-registration.interface';
+export interface DaffThumbnailRegistration {
+    gallery: DaffMediaGalleryRegistration;
+    selected: boolean;
+    component: Type<unknown>;
+    select: () => DaffThumbnailRegistration;
+    deselect: () => DaffThumbnailRegistration;
+}

package/media-gallery/thumbnail/thumbnail.directive.d.ts

@@ -0,0 +1,44 @@
+import { Type, EventEmitter, ChangeDetectorRef, OnInit, OnDestroy } from '@angular/core';
+import { DaffThumbnailRegistration } from './thumbnail-registration.interface';
+import { DaffMediaGalleryRegistration } from '../helpers/media-gallery-registration.interface';
+import { DaffMediaGalleryRegistry } from '../registry/media-gallery.registry';
+import * as i0 from "@angular/core";
+/**
+ * A directive marking thumbnails for the `DaffMediaRendererComponent`. Needs to be wrapped in a `daff-media-gallery` component
+ * and needs to be placed on a component that is provided as a `daffThumbnailCompatToken`.
+ */
+export declare class DaffThumbnailDirective implements OnInit, OnDestroy, DaffThumbnailRegistration {
+    component: Type<unknown>;
+    private cd;
+    private registry;
+    gallery: DaffMediaGalleryRegistration;
+    /**
+     * Adds a class for styling a selected thumbnail
+     */
+    get selectedClass(): boolean;
+    constructor(component: Type<unknown>, cd: ChangeDetectorRef, registry: DaffMediaGalleryRegistry, gallery: DaffMediaGalleryRegistration);
+    /**
+     * Adds a class for styling a thumbnail
+     */
+    class: boolean;
+    /**
+     * A prop for determining whether or not the media element is selected.
+     */
+    selected: boolean;
+    /**
+     * An event that fires after the media element becomes selected.
+     */
+    becameSelected: EventEmitter<void>;
+    /**
+     * Adds a click event to trigger selection of the media element.
+     *
+     * @param event: MouseEvent
+     */
+    onClick($event: MouseEvent): void;
+    ngOnInit(): void;
+    ngOnDestroy(): void;
+    select(): this;
+    deselect(): this;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DaffThumbnailDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<DaffThumbnailDirective, "[daffThumbnail]", never, {}, { "becameSelected": "becameSelected"; }, never, never, false, never>;
+}

package/menu/README.md

@@ -0,0 +1,7 @@
+# Menu
+Menus are small floating panels used to add additional information without cluttering a page.
+
+## Usage
+
+### Basic Menu
+<design-land-example-viewer-container example="basic-menu"></design-land-example-viewer-container>

package/menu/examples/basic-menu/basic-menu.module.d.ts

@@ -1,10 +1,11 @@
 import * as i0 from "@angular/core";
 import * as i1 from "./basic-menu.component";
 import * as i2 from "./menu-content/menu-content.component";
-import * as i3 from "@daffodil/design";
-import * as i4 from "@fortawesome/angular-fontawesome";
+import * as i3 from "@daffodil/design/button";
+import * as i4 from "@daffodil/design/menu";
+import * as i5 from "@fortawesome/angular-fontawesome";
 export declare class BasicMenuComponentModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<BasicMenuComponentModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<BasicMenuComponentModule, [typeof i1.BasicMenuComponent, typeof i2.MenuContentComponent], [typeof i3.DaffButtonModule, typeof i3.DaffMenuModule, typeof i4.FontAwesomeModule], [typeof i1.BasicMenuComponent]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<BasicMenuComponentModule, [typeof i1.BasicMenuComponent, typeof i2.MenuContentComponent], [typeof i3.DaffButtonModule, typeof i4.DaffMenuModule, typeof i5.FontAwesomeModule], [typeof i1.BasicMenuComponent]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<BasicMenuComponentModule>;
 }

package/menu/index.d.ts

@@ -0,0 +1 @@
+export * from './public_api';

package/menu/menu/menu.component.d.ts

@@ -0,0 +1,19 @@
+import { ConfigurableFocusTrapFactory } from '@angular/cdk/a11y';
+import { AfterContentInit, AfterViewInit, ElementRef, NgZone } from '@angular/core';
+import { DaffMenuService } from '../services/menu.service';
+import * as i0 from "@angular/core";
+export declare class DaffMenuComponent implements AfterContentInit, AfterViewInit {
+    private _focusTrapFactory;
+    private _ngZone;
+    private _elementRef;
+    private menuService;
+    class: boolean;
+    tabindex: number;
+    role: string;
+    private _focusTrap;
+    constructor(_focusTrapFactory: ConfigurableFocusTrapFactory, _ngZone: NgZone, _elementRef: ElementRef<HTMLElement>, menuService: DaffMenuService);
+    ngAfterContentInit(): void;
+    ngAfterViewInit(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DaffMenuComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DaffMenuComponent, "daff-menu", never, {}, {}, never, ["[daff-menu-item]"], false, never>;
+}

package/menu/menu-activator/menu-activator.component.d.ts

@@ -0,0 +1,18 @@
+import { ChangeDetectorRef, OnDestroy, TemplateRef, Type, ViewContainerRef } from '@angular/core';
+import { DaffMenuService } from '../services/menu.service';
+import * as i0 from "@angular/core";
+export declare class DaffMenuActivatorDirective implements OnDestroy {
+    private service;
+    private viewContainerRef;
+    private cdRef;
+    private _destroyed$;
+    private _open;
+    get openClass(): boolean;
+    daffMenuActivator: Type<unknown> | TemplateRef<unknown>;
+    constructor(service: DaffMenuService, viewContainerRef: ViewContainerRef, cdRef: ChangeDetectorRef);
+    ngOnDestroy(): void;
+    focus(): void;
+    openMenu(event: any): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DaffMenuActivatorDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<DaffMenuActivatorDirective, "[daffMenuActivator]", never, { "daffMenuActivator": { "alias": "daffMenuActivator"; "required": false; }; }, {}, never, never, false, never>;
+}

package/menu/menu-item/menu-item.component.d.ts

@@ -0,0 +1,20 @@
+import { DaffPrefixDirective } from '@daffodil/design';
+import * as i0 from "@angular/core";
+export declare class DaffMenuItemComponent {
+    /**
+     * @docs-private
+     */
+    class: boolean;
+    /**
+     * Sets the role of the component to menuitem.
+     *
+     * @docs-private
+     */
+    role: string;
+    /**
+     * @docs-private
+     */
+    _prefix: DaffPrefixDirective;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DaffMenuItemComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DaffMenuItemComponent, "a[daff-menu-item],button[daff-menu-item]", never, {}, {}, ["_prefix"], ["[daffPrefix]", "*"], false, never>;
+}

package/menu/public_api.d.ts

@@ -0,0 +1,6 @@
+export * from './helpers/public_api';
+export { DaffMenuService } from './services/menu.service';
+export { DaffMenuActivatorDirective } from './menu-activator/menu-activator.component';
+export { DaffMenuModule } from './menu.module';
+export { DaffMenuComponent } from './menu/menu.component';
+export { DaffMenuItemComponent } from './menu-item/menu-item.component';

package/menu/services/menu.service.d.ts

@@ -0,0 +1,24 @@
+import { Overlay, OverlayRef } from '@angular/cdk/overlay';
+import { ElementRef, TemplateRef, Type, ViewContainerRef } from '@angular/core';
+import { Observable } from 'rxjs';
+import { DaffLazyComponent } from '@daffodil/design';
+import * as i0 from "@angular/core";
+export interface DaffActivatedMenu {
+    el: ElementRef;
+    component: Type<unknown>;
+}
+export type DaffMenuSlot = TemplateRef<unknown> | DaffLazyComponent | Type<unknown>;
+export declare class DaffMenuService {
+    protected overlay: Overlay;
+    protected _overlay: OverlayRef | null;
+    private _activator;
+    private $_open;
+    open$: Observable<boolean>;
+    constructor(overlay: Overlay);
+    protected _createOverlay(activatorElement: ViewContainerRef, component: DaffMenuSlot): Promise<void>;
+    protected _destroyOverlay(): void;
+    close(): void;
+    open(activator: ViewContainerRef, component: DaffMenuSlot): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DaffMenuService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<DaffMenuService>;
+}

package/menu/src/menu-theme.scss

@@ -0,0 +1,25 @@
+@use '../../scss/core';
+@use '../../scss/theming';
+
+@mixin daff-menu-theme($theme) {
+	$white: core.daff-map-deep-get($theme, 'core.white');
+	$black: core.daff-map-deep-get($theme, 'core.black');
+	$neutral: core.daff-map-deep-get($theme, 'core.neutral');
+	$base: core.daff-map-deep-get($theme, 'core.base');
+	$base-contrast: core.daff-map-deep-get($theme, 'core.base-contrast');
+
+	.daff-menu {
+		background: $base;
+		box-shadow: 0 0 24px rgb($black, 0.12);
+	}
+
+	.daff-menu-item {
+		background: $base;
+		color: $base-contrast;
+
+		&:hover,
+		&:focus {
+			background: theming.daff-illuminate($base, $neutral, 1);
+		}
+	}
+}

package/modal/README.md

@@ -0,0 +1,47 @@
+# Modal Component
+
+The `DaffModalComponent` is a dynamically rendered component that floats above the rest of a page's content. It can be especially useful for interstitials that require additional user feedback.
+
+## Usage
+
+`DaffModalComponent` relies on using the `entryComponents` of the particular Angular `@NgModule`. To use the features of the `DaffModalComponent`:
+
+* Import the `DaffModalModule` as you would with any other `@daffodil/design` component
+* Add the component that you want rendered inside the modal to your `@NgModule`'s `entryComponents`
+
+```ts
+my.module.ts
+
+@NgModule({
+  declarations: [
+    MyModalContentComponent,
+  ],
+  imports: [
+    DaffModalModule,
+  ],
+  entryComponents: [
+    MyModalContentComponent
+  ]
+})
+export class ModalModule { 
+}
+```
+
+Once your `@NgModule` has been configured, you can take advantage of the `DaffModalService` that is provided by the `DaffModalModule` to `open` and `close` the instance of the `DaffModalComponent`. 
+
+```ts
+my-other.component.ts
+
+@Component({
+  template: '<button (click)="showModal()"></button>'
+})
+export class MyOtherComponent {
+  constructor(private modalService: DaffModalService) {}
+
+  showModal() {
+    this.modalService.open(MyModalContentComponent);
+  }
+}
+```
+
+> You will likely never render the `DaffModalComponent` directly like you would with other components due to its dynamic nature.

package/modal/animations/modal-animation-state.d.ts

@@ -0,0 +1 @@
+export declare const getAnimationState: (open: boolean) => "open" | "closed";

package/modal/examples/basic-modal/basic-modal.component.d.ts

@@ -1,4 +1,4 @@
-import { DaffModalService } from '@daffodil/design';
+import { DaffModalService } from '@daffodil/design/modal';
 import * as i0 from "@angular/core";
 export declare class BasicModalComponent {
     private modalService;

package/modal/examples/basic-modal/basic-modal.module.d.ts

@@ -1,9 +1,10 @@
 import * as i0 from "@angular/core";
 import * as i1 from "./basic-modal.component";
 import * as i2 from "./modal-content.component";
-import * as i3 from "@daffodil/design";
+import * as i3 from "@daffodil/design/modal";
+import * as i4 from "@daffodil/design/button";
 export declare class BasicModalModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<BasicModalModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<BasicModalModule, [typeof i1.BasicModalComponent, typeof i2.BasicModalContentComponent], [typeof i3.DaffModalModule, typeof i3.DaffButtonModule], [typeof i1.BasicModalComponent]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<BasicModalModule, [typeof i1.BasicModalComponent, typeof i2.BasicModalContentComponent], [typeof i3.DaffModalModule, typeof i4.DaffButtonModule], [typeof i1.BasicModalComponent]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<BasicModalModule>;
 }

package/modal/index.d.ts

@@ -0,0 +1 @@
+export * from './public_api';