@daffodil/design 0.51.1 → 0.53.1

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

@@ -0,0 +1,7 @@
+import { MenuContentComponent } from './menu-content/menu-content.component';
+import * as i0 from "@angular/core";
+export declare class BasicMenuComponent {
+    menu: typeof MenuContentComponent;
+    static ɵfac: i0.ɵɵFactoryDeclaration<BasicMenuComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<BasicMenuComponent, "basic-menu", never, {}, {}, never, never>;
+}

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

@@ -0,0 +1,10 @@
+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";
+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 ɵinj: i0.ɵɵInjectorDeclaration<BasicMenuComponentModule>;
+}

package/menu/examples/basic-menu/menu-content/menu-content.component.d.ts

@@ -0,0 +1,8 @@
+import * as i0 from "@angular/core";
+export declare class MenuContentComponent {
+    faUser: import("@fortawesome/fontawesome-common-types").IconDefinition;
+    faInfo: import("@fortawesome/fontawesome-common-types").IconDefinition;
+    faEnvelope: import("@fortawesome/fontawesome-common-types").IconDefinition;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MenuContentComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MenuContentComponent, "menu-content", never, {}, {}, never, never>;
+}

package/menu/examples/daffodil-design-menu-examples.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Generated bundle index. Do not edit.
+ */
+/// <amd-module name="@daffodil/design/menu/examples" />
+export * from './index';

package/menu/examples/index.d.ts

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

package/menu/examples/package.json

@@ -0,0 +1,10 @@
+{
+  "name": "@daffodil/design/menu/examples",
+  "module": "../../fesm2015/daffodil-design-menu-examples.mjs",
+  "es2020": "../../fesm2020/daffodil-design-menu-examples.mjs",
+  "esm2020": "../../esm2020/menu/examples/daffodil-design-menu-examples.mjs",
+  "fesm2020": "../../fesm2020/daffodil-design-menu-examples.mjs",
+  "fesm2015": "../../fesm2015/daffodil-design-menu-examples.mjs",
+  "typings": "daffodil-design-menu-examples.d.ts",
+  "sideEffects": false
+}

package/menu/examples/public_api.d.ts

@@ -0,0 +1,2 @@
+import { ComponentExample } from '@daffodil/design';
+export declare const MENU_EXAMPLES: ComponentExample[];

package/molecules/menu/helpers/create-overlay.d.ts

@@ -0,0 +1,3 @@
+import { Overlay, OverlayConfig } from '@angular/cdk/overlay';
+import { ElementRef } from '@angular/core';
+export declare function daffMenuCreateOverlay(overlay: Overlay, element: ElementRef, config?: OverlayConfig): import("@angular/cdk/overlay").OverlayRef;

package/molecules/menu/helpers/public_api.d.ts

@@ -0,0 +1 @@
+export { daffMenuCreateOverlay } from './create-overlay';

package/molecules/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 '../service/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]"]>;
+}

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

@@ -0,0 +1,18 @@
+import { ChangeDetectorRef, OnDestroy, TemplateRef, Type, ViewContainerRef } from '@angular/core';
+import { DaffMenuService } from '../service/menu.service';
+import * as i0 from "@angular/core";
+export declare class DaffMenuActivatorDirective implements OnDestroy {
+    private service;
+    private viewContainerRef;
+    private cdRef;
+    daffMenuActivator: Type<unknown> | TemplateRef<unknown>;
+    private _destroyed$;
+    private _open;
+    get openClass(): boolean;
+    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": "daffMenuActivator"; }, {}, never>;
+}

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

@@ -0,0 +1,20 @@
+import { DaffPrefixDirective } from '../../../core/prefix-suffix/public_api';
+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]", "*"]>;
+}

package/molecules/menu/menu.module.d.ts

@@ -0,0 +1,11 @@
+import * as i0 from "@angular/core";
+import * as i1 from "./menu-activator/menu-activator.component";
+import * as i2 from "./menu/menu.component";
+import * as i3 from "./menu-item/menu-item.component";
+import * as i4 from "@angular/common";
+import * as i5 from "@angular/cdk/overlay";
+export declare class DaffMenuModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<DaffMenuModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<DaffMenuModule, [typeof i1.DaffMenuActivatorDirective, typeof i2.DaffMenuComponent, typeof i3.DaffMenuItemComponent], [typeof i4.CommonModule, typeof i5.OverlayModule], [typeof i1.DaffMenuActivatorDirective, typeof i2.DaffMenuComponent, typeof i3.DaffMenuItemComponent]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<DaffMenuModule>;
+}

package/molecules/menu/public_api.d.ts

@@ -0,0 +1,6 @@
+export * from './helpers/public_api';
+export { DaffMenuService } from './service/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/molecules/menu/service/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 '../../../core/lazy/public_api';
+import * as i0 from "@angular/core";
+export interface DaffActivatedMenu {
+    el: ElementRef;
+    component: Type<unknown>;
+}
+export declare 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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@daffodil/design",
-  "version": "0.51.1",
+  "version": "0.53.1",
   "author": "Graycore LLC",
   "license": "MIT",
   "bugs": {
@@ -18,7 +18,7 @@
     "@angular/core": "^13.0.0",
     "@angular/forms": "^13.0.0",
     "@angular/cdk": "^13.0.0",
-    "@daffodil/core": "0.51.1",
+    "@daffodil/core": "0.53.1",
     "@fortawesome/angular-fontawesome": "^0.10.0",
     "@fortawesome/fontawesome-svg-core": "^1.2.32",
     "@fortawesome/free-solid-svg-icons": "^5.10.0",
@@ -28,7 +28,7 @@
     "rxjs": "7.5.5"
   },
   "optionalDependencies": {
-    "@faker-js/faker": "^5.5.3"
+    "@faker-js/faker": "^7.6.0"
   },
   "exports": {
     "./scss/daff-global": {
@@ -159,6 +159,14 @@
       "node": "./fesm2015/daffodil-design-media-gallery-examples.mjs",
       "default": "./fesm2020/daffodil-design-media-gallery-examples.mjs"
     },
+    "./menu/examples": {
+      "types": "./menu/examples/daffodil-design-menu-examples.d.ts",
+      "esm2020": "./esm2020/menu/examples/daffodil-design-menu-examples.mjs",
+      "es2020": "./fesm2020/daffodil-design-menu-examples.mjs",
+      "es2015": "./fesm2015/daffodil-design-menu-examples.mjs",
+      "node": "./fesm2015/daffodil-design-menu-examples.mjs",
+      "default": "./fesm2020/daffodil-design-menu-examples.mjs"
+    },
     "./modal/examples": {
       "types": "./modal/examples/daffodil-design-modal-examples.d.ts",
       "esm2020": "./esm2020/modal/examples/daffodil-design-modal-examples.mjs",

package/public_api.d.ts

@@ -20,6 +20,7 @@ export * from './molecules/image-list/public_api';
 export * from './molecules/link-set/public_api';
 export * from './molecules/list/public_api';
 export * from './molecules/media-gallery/public_api';
+export * from './molecules/menu/public_api';
 export * from './molecules/modal/public_api';
 export * from './molecules/navbar/public_api';
 export * from './molecules/paginator/public_api';

package/scss/theme.scss

@@ -32,6 +32,7 @@
 @use '../src/molecules/hero/hero-theme' as hero;
 @use '../src/molecules/list/list/list-theme' as list;
 @use '../src/molecules/media-gallery/media-gallery-theme' as media-gallery;
+@use '../src/molecules/menu/menu-theme' as menu;
 @use '../src/molecules/modal/modal-theme' as modal;
 @use '../src/molecules/navbar/navbar-theme' as navbar;
 @use '../src/molecules/paginator/paginator-theme' as paginator;
@@ -68,6 +69,7 @@
 	@include hero.daff-hero-theme($theme);
 	@include list.daff-list-theme($theme);
 	@include media-gallery.daff-media-gallery-theme($theme);
+	@include menu.daff-menu-theme($theme);
 	@include modal.daff-modal-theme($theme);
 	@include navbar.daff-navbar-theme($theme);
 	@include paginator.daff-paginator-theme($theme);

package/src/molecules/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/src/molecules/menu/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');
+	$gray: core.daff-map-deep-get($theme, 'core.gray');
+	$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 8px 12px rgb($black, 0.12);
+	}
+
+	.daff-menu-item {
+		background: $base;
+		color: $base-contrast;
+
+		&:hover,
+		&:focus {
+			background: theming.daff-illuminate($base, $gray, 1);
+		}
+	}
+}