@daffodil/design 0.61.0 → 0.62.0

package/sidebar/examples/under-sidebar/under-sidebar.component.d.ts

@@ -0,0 +1,10 @@
+import * as i0 from "@angular/core";
+export declare class UnderSidebarComponent {
+    openLeft: boolean;
+    openRight: boolean;
+    openLeftSidebar(): void;
+    openRightSidebar(): void;
+    closeSidebar(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<UnderSidebarComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<UnderSidebarComponent, "under-sidebar", never, {}, {}, never, never>;
+}

package/sidebar/examples/under-sidebar/under-sidebar.module.d.ts

@@ -0,0 +1,8 @@
+import * as i0 from "@angular/core";
+import * as i1 from "./under-sidebar.component";
+import * as i2 from "@daffodil/design";
+export declare class UnderSidebarModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<UnderSidebarModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<UnderSidebarModule, [typeof i1.UnderSidebarComponent], [typeof i2.DaffSidebarModule, typeof i2.DaffNavbarModule, typeof i2.DaffButtonModule], [typeof i1.UnderSidebarComponent]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<UnderSidebarModule>;
+}

package/src/molecules/sidebar/README.md

@@ -8,3 +8,13 @@
     <p>Some Content</p>
 </daff-sidebar-viewport>
 ```
+
+
+### Goals
+
+1. Support position sticky inside sidebar content
+2. Support 1 sidebar at a time on each side
+3. Support viewports inside of other viewports.
+4. A `global` flag that can be set to use `dvh`
+5. Sidebars as the window size changes from `side` to `over` and vice-versa by default.
+6. Where does the body scrollbar start and end? Does it hit the header of go to the top of the document.

package/src/molecules/sidebar/helper/_variables.scss

@@ -0,0 +1,7 @@
+// Stacking Context Layers
+$daff-sidebar-sidebar-over-z-index: 5;
+$daff-sidebar-backdrop-z-index: 4;
+$daff-sidebar-sidebar-side-fixed-z-index: 4;
+$daff-sidebar-content-z-index: 3;
+$daff-sidebar-sidebar-under-z-index: 2;
+$daff-sidebar-viewport-z-index: 1;

package/src/molecules/sidebar/sidebar/sidebar-theme.scss

@@ -2,12 +2,12 @@
 
 @mixin daff-sidebar-theme($theme) {
 	$base: core.daff-map-deep-get($theme, 'core.base');
-	$base-contrast: core.daff-map-deep-get($theme, "core.base-contrast");
+	$base-contrast: core.daff-map-deep-get($theme, 'core.base-contrast');
 	$black: core.daff-map-deep-get($theme, 'core.black');
+	$font-color: core.daff-map-deep-get($theme, 'core.font-color');
 
 	.daff-sidebar {
 		background: $base;
-		box-shadow: 6px 1px 9px 0 rgba($black, 0.1);
-		color: $base-contrast;
+		color: $font-color;
 	}
 }

package/src/molecules/sidebar/sidebar-viewport/sidebar-viewport-theme.scss

@@ -7,5 +7,10 @@
 	.daff-sidebar-viewport {
 		background: $base;
 		color: $base-contrast;
+
+		&__content {
+			background: $base;
+			color: $base-contrast;
+		}
 	}
 }

package/tree/README.md

@@ -0,0 +1,38 @@
+# Tree
+
+Trees are used to visualize hierarchial information. They are often used to display navigational structures like nested lists of links.
+
+## Overview
+
+The `DaffTreeComponent` renders a tree structure. Typically, this is a structure of `<a>` and `<button>` elements that allow users to either navigate to a page, or explore the tree to find an item inside the tree that they want to navigate to.
+
+Instead of defining a recursive tree structure of components, which is often prohibitively slow when rendering large trees, the `DaffTreeComponent` renders a flattened tree, using padding to indicate the nesting level of the tree elements.
+
+Generally, tree usage consists of taking existing tree data, converting it to the `DaffTreeData` format, setting the `tree` input on the `DaffTreeComponent`, and providing templates for the cases where the tree element has children or not.
+
+## Features
+
+The `DaffTreeComponent` controls the rendering of the structure of the tree and provides template slots so that you can control the ultimate UI rendered for each node.
+
+Currently, we support two kind of templates `daffTreeItemWithChildrenTpl` and `daffTreeItemTpl`. These templates allow you to control the content of each tree node. In the case of `daffTreeItemWithChildrenTpl` a `click` handler will be automatically applied (along with an icon indicating the expanded state) to the template to allow users to automatically open and close the node.
+
+```html
+<ng-template #daffTreeItemWithChildrenTpl let-node>
+  <button daffTreeItem [node]="node">{{ node.title }} </button>
+</ng-template>
+
+<ng-template #daffTreeItemTpl let-node>
+  <a daffTreeItem [node]="node" [routerLink]="node.url">{{ node.title }}</a>
+</ng-template>
+```
+
+## Usage
+
+### Basic Tree
+
+<design-land-example-viewer-container example="basic-tree">
+</design-land-example-viewer-container>
+
+## Accessibility
+
+The `DaffTreeComponent` follows the specification for a [disclosure navigation menu](https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/examples/disclosure-navigation/) instead of a [tree view](https://www.w3.org/WAI/ARIA/apg/patterns/treeview/).

package/tree/daffodil-design-tree.d.ts

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

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

@@ -0,0 +1,7 @@
+import { DaffTreeData } from '@daffodil/design/tree';
+import * as i0 from "@angular/core";
+export declare class BasicTreeComponent {
+    tree: DaffTreeData<unknown>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<BasicTreeComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<BasicTreeComponent, "basic-tree", never, {}, {}, never, never>;
+}

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

@@ -0,0 +1,10 @@
+import * as i0 from "@angular/core";
+import * as i1 from "./basic-tree.component";
+import * as i2 from "@angular/router";
+import * as i3 from "@daffodil/design/tree";
+import * as i4 from "@fortawesome/angular-fontawesome";
+export declare class BasicTreeModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<BasicTreeModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<BasicTreeModule, [typeof i1.BasicTreeComponent], [typeof i2.RouterModule, typeof i3.DaffTreeModule, typeof i4.FontAwesomeModule], [typeof i1.BasicTreeComponent]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<BasicTreeModule>;
+}

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

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

package/tree/examples/index.d.ts

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

package/tree/examples/package.json

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

package/tree/examples/public_api.d.ts

@@ -0,0 +1,4 @@
+import { BasicTreeComponent } from './basic-tree/basic-tree.component';
+export { BasicTreeModule } from './basic-tree/basic-tree.module';
+export { BasicTreeComponent };
+export declare const TREE_EXAMPLES: (typeof BasicTreeComponent)[];

package/tree/index.d.ts

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

package/tree/interfaces/recursive-key.d.ts

@@ -0,0 +1,3 @@
+export declare type RecursiveTreeKeyOfType<T> = keyof {
+    [P in keyof T as T[P] extends T[] ? P : never]: T[];
+};

package/tree/interfaces/tree-data.d.ts

@@ -0,0 +1,13 @@
+/**
+ * A basic tree type supporting supplemental data on a tree node.
+ *
+ * Tree elements are often slightly more than just basic titles and child items.
+ * There may be other important data that needs to be available at render time.
+ */
+export interface DaffTreeData<T> {
+    title: string;
+    url: string;
+    id: string;
+    items: DaffTreeData<T>[];
+    data: T;
+}

package/tree/interfaces/tree-ui.d.ts

@@ -0,0 +1,11 @@
+import { DaffTreeData } from './tree-data';
+/**
+ * A DaffTreeUi is the internal data structure used during tree rendering.
+ *
+ * This is an internal implementation detail type that.
+ */
+export interface DaffTreeUi<T> extends DaffTreeData<T> {
+    open: boolean;
+    items: DaffTreeUi<T>[];
+    parent: DaffTreeUi<T>;
+}

package/tree/package.json

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

package/tree/public_api.d.ts

@@ -0,0 +1,6 @@
+export { DaffTreeModule } from './tree.module';
+export { DaffTreeComponent } from './tree/tree.component';
+export { DaffTreeItemDirective } from './tree-item/tree-item.directive';
+export { DaffTreeData } from './interfaces/tree-data';
+export { DaffTreeUi } from './interfaces/tree-ui';
+export { daffTransformTreeInPlace } from './utils/transform-in-place';

package/tree/src/tree-theme.scss

@@ -0,0 +1,38 @@
+@use 'sass:map';
+@use '../../scss/theming';
+@use '../../scss/core';
+
+@mixin daff-tree-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');
+	$gray: core.daff-map-deep-get($theme, 'core.gray');
+
+	.daff-tree-item {
+		$root: &;
+
+		background-color: $base;
+		color: theming.daff-illuminate($base-contrast, $gray, 2);
+
+		&:hover {
+			background-color: theming.daff-illuminate($base, $gray, 2);
+		}
+
+		&:after {
+			border-color: currentColor;
+		}
+
+		&.selected {
+			background-color: theming.daff-illuminate($base, $gray, 2);
+			color: $base-contrast;
+
+			&:before {
+				background-color: theming.daff-color($primary);
+			}
+		}
+	}
+}

package/tree/tree/tree-notifier.service.d.ts

@@ -0,0 +1,32 @@
+import { OnDestroy } from '@angular/core';
+/**
+ * This service is used by tree-items to notify their parent
+ * that the tree has to be re-computed.
+ *
+ * This service is a multiton associated with each tree instance.
+ * It follows the same lifecycle has the tree it is associated with.
+ */
+export declare class DaffTreeNotifierService implements OnDestroy {
+    /**
+     * @docs-private
+     */
+    private _notice;
+    /**
+     * An observable that emits when the tree needs to be re-computed.
+     */
+    notice$: import("rxjs").Observable<boolean>;
+    /**
+     * `notify` can be called to trigger a re-computation of the tree
+     * if data has changed unexpectedly and a re-render did not occur.
+     *
+     * This should be used sparingly. Instead, prefer updating `data` on the tree
+     * itself for performance reasons.
+     */
+    notify(): void;
+    /**
+     * Cleanup when the tree is destroyed.
+     *
+     * @docs-private
+     */
+    ngOnDestroy(): void;
+}

package/tree/tree/tree.component.d.ts

@@ -0,0 +1,75 @@
+import { OnInit, TemplateRef } from '@angular/core';
+import { DaffTreeData } from '../interfaces/tree-data';
+import { DaffTreeFlatNode } from '../utils/flatten-tree';
+import { DaffTreeNotifierService } from './tree-notifier.service';
+import * as i0 from "@angular/core";
+/**
+ * The `DaffTreeComponent` allows you to render tree structures as interactable ui.
+ *
+ * They can be used like:
+ *
+ * ```html
+ * <ul daff-tree [tree]="tree">
+ *   <ng-template #daffTreeItemWithChildrenTpl let-node>
+ *       <button daffTreeItem [node]="node">{{ node.title }} </button>
+ *   </ng-template>
+ *
+ *   <ng-template #daffTreeItemTpl let-node>
+ *       <a daffTreeItem [node]="node" [routerLink]="node.url">{{ node.title }}</a>
+ *   </ng-template>
+ * </ul>
+ * ```
+ *
+ * where `tree` is a {@link DaffTreeData}.
+ *
+ */
+export declare class DaffTreeComponent implements OnInit {
+    private notifier;
+    /**
+     * The css class of the daff-tree.
+     *
+     * @docs-private
+     */
+    class: boolean;
+    /**
+     * The internal tree element.
+     */
+    private tree;
+    /**
+     * The flattened tree data. You can iterate through this if you want to inspect
+     * the resulting array structure we computed to render the tree.
+     */
+    flatTree: DaffTreeFlatNode[];
+    /**
+     * @docs-private
+     */
+    private _dataTree;
+    /**
+     * The tree data you would like to render.
+     */
+    get dataTree(): DaffTreeData<unknown>;
+    set dataTree(dataTree: DaffTreeData<unknown>);
+    /**
+     * The template used to render tree-nodes that themselves have children.
+     *
+     * @docs-private
+     */
+    withChildrenTemplate: TemplateRef<any>;
+    /**
+     * The template used to render tree-nodes that have no children.
+     *
+     * @docs-private
+     */
+    treeItemTemplate: TemplateRef<any>;
+    constructor(notifier: DaffTreeNotifierService);
+    /**
+     * The track-by function used to reduce tree-item re-renders
+     */
+    trackByTreeElement(index: number, el: any): any;
+    /**
+     * @docs-private
+     */
+    ngOnInit(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DaffTreeComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DaffTreeComponent, "ul[daff-tree]", never, { "dataTree": "tree"; }, {}, ["withChildrenTemplate", "treeItemTemplate"], never>;
+}

package/tree/tree-item/tree-item.directive.d.ts

@@ -0,0 +1,102 @@
+import { DaffTreeNotifierService } from '../tree/tree-notifier.service';
+import { DaffTreeFlatNode } from '../utils/flatten-tree';
+import * as i0 from "@angular/core";
+/**
+ * The `DaffTreeItemDirective` allows you to demarcate the elements which are
+ * tree-children that interact with the parent tree.
+ *
+ * They can be used like:
+ *
+ * ```html
+ * <ul daff-tree [tree]="tree">
+ *   <ng-template #daffTreeItemWithChildrenTpl let-node>
+ *       <button daffTreeItem [node]="node">{{ node.title }} </button>
+ *   </ng-template>
+ *
+ *   <ng-template #daffTreeItemTpl let-node>
+ *       <a daffTreeItem [node]="node" [routerLink]="node.url">{{ node.title }}</a>
+ *   </ng-template>
+ * </ul>
+ * ```
+ *
+ * where `tree` is a {@link DaffTreeData} and `daff-tree` is a {@link DaffTreeComponent}.
+ *
+ */
+export declare class DaffTreeItemDirective {
+    private document;
+    private treeNotifier;
+    /**
+     * The css class of the daff-tree.
+     *
+     * @docs-private
+     */
+    class: boolean;
+    /**
+     * The css class of a DaffTreeItemDirective that has children.
+     *
+     * @docs-private
+     */
+    classParent: boolean;
+    /**
+     * The html `id` of the tree item. This is derived from the {@link DaffTreeData}.
+     *
+     * @docs-private
+     */
+    id: any;
+    /**
+     * Accessibility property, notifying users about whether
+     * or not the tree item is open.
+     *
+     * @docs-private
+     */
+    ariaExpanded: string;
+    /**
+     * A css variable indicating the depth of the tree.
+     * You can use this to style your templates if you want to
+     * use different designs at different depths.
+     */
+    depth: number;
+    /**
+     * The CSS class indicating whether or not the tree is `selected`.
+     */
+    get selectedClass(): boolean;
+    /**
+     * The CSS class indicating whether or not the tree is `open`.
+     */
+    openClass: boolean;
+    /**
+     * The {@link DaffTreeFlatNode} associated with this specific tree item.
+     *
+     * @docs-private
+     */
+    private _node;
+    /**
+     * The {@link DaffTreeFlatNode} associated with this specific tree item.
+     */
+    get node(): DaffTreeFlatNode;
+    set node(val: DaffTreeFlatNode);
+    /**
+     * Whether or not the tree item is the currently active item.
+     * Note that there is no requirement there there only be one active item at a time.
+     */
+    selected: boolean;
+    constructor(document: any, treeNotifier: DaffTreeNotifierService);
+    /**
+     * @docs-private
+     */
+    onEscape(): void;
+    /**
+     * @docs-private
+     */
+    onClick(): void;
+    /**
+     * Toggle the open state of the tree's parent.
+     */
+    toggleParent(node: DaffTreeFlatNode): void;
+    /**
+     * Toggle the open state of this specific subtree tree.
+     */
+    toggleTree(node: DaffTreeFlatNode): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DaffTreeItemDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<DaffTreeItemDirective, "[daffTreeItem]", never, { "node": "node"; "selected": "selected"; }, {}, never>;
+}

package/tree/tree.module.d.ts

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

package/tree/utils/flatten-tree.d.ts

@@ -0,0 +1,19 @@
+import { DaffTreeUi } from '../interfaces/tree-ui';
+/**
+ * A flattened node of a tree. This is used when translating the tree data
+ * structure into an array.
+ */
+export interface DaffTreeFlatNode {
+    id: number | string;
+    title: string;
+    url: string;
+    level: number;
+    hasChildren: boolean;
+    data: unknown;
+    _treeRef: DaffTreeUi<unknown>;
+}
+/**
+ * Flatten a DaffTreeUi<unknown> into an array, removing elements from the array
+ * below nodes in the tree that are not open.
+ */
+export declare const flattenTree: (daffUiTree: DaffTreeUi<unknown>) => DaffTreeFlatNode[];

package/tree/utils/hydrate-tree.d.ts

@@ -0,0 +1,8 @@
+import { DaffTreeData } from '../interfaces/tree-data';
+import { DaffTreeUi } from '../interfaces/tree-ui';
+export declare const daffDataTreeToUiTree: <T>(data: DaffTreeData<T>, parent: DaffTreeUi<T>, open?: boolean) => DaffTreeUi<T>;
+/**
+ * This function translates the original data given to us by the client
+ * to the internal representation of the tree used by the {@link DaffTreeComponent}
+ */
+export declare const hydrateTree: <T>(data: DaffTreeData<T>) => DaffTreeUi<T>;

package/tree/utils/transform-in-place.d.ts

@@ -0,0 +1,15 @@
+import { RecursiveTreeKeyOfType } from '../interfaces/recursive-key';
+import { DaffTreeData } from '../interfaces/tree-data';
+/**
+ * Transform a tree-like structure in-place into a {@link DaffTreeData}.
+ *
+ * This will mutate the original object, hydrating with additional properties.
+ *
+ * @param tree - The data structure representing tree-like data.
+ * @param transformFn - A user-supplied function that will transform the user
+ *  type into a {@link DaffTreeData}
+ * @param key - The property of the your tree that indicates which
+ *  key contains the "children" of your tree structure.
+ *
+ */
+export declare const daffTransformTreeInPlace: <T extends Record<any, any>>(tree: T, transformFn: (type: T) => T & DaffTreeData<unknown>, key: keyof { [P in keyof T as T[P] extends T[] ? P : never]: T[]; }) => DaffTreeData<unknown>;

package/tree/utils/traverse-tree.d.ts

@@ -0,0 +1,5 @@
+import { RecursiveTreeKeyOfType } from '../interfaces/recursive-key';
+/**
+ * Traverse the tree, pre-order, right-to-left
+ */
+export declare const traverse: <T extends Record<any, any>, V extends Record<any, any> = T>(tree: T, visit: (tree: T) => V, key: keyof { [P in keyof T as T[P] extends T[] ? P : never]: T[]; }) => V;