@daffodil/design 0.61.0 → 0.62.1
Sign up to get free protection for your applications and to get access to all the features.
- package/accordion/examples/package.json +1 -1
- package/article/examples/package.json +1 -1
- package/button/examples/package.json +1 -1
- package/callout/examples/package.json +1 -1
- package/card/examples/package.json +1 -1
- package/checkbox/examples/package.json +1 -1
- package/container/examples/package.json +1 -1
- package/core/animation/animation-state-with-params.d.ts +8 -0
- package/core/public_api.d.ts +1 -0
- package/esm2020/core/animation/animation-state-with-params.mjs +2 -0
- package/esm2020/core/public_api.mjs +2 -1
- package/esm2020/molecules/backdrop/animation/backdrop-animation-state.mjs +2 -0
- package/esm2020/molecules/backdrop/animation/backdrop-animation.mjs +6 -2
- package/esm2020/molecules/backdrop/backdrop/backdrop.component.mjs +40 -5
- package/esm2020/molecules/sidebar/animation/sidebar-animation-state.mjs +2 -2
- package/esm2020/molecules/sidebar/animation/sidebar-animation-width.mjs +2 -0
- package/esm2020/molecules/sidebar/animation/sidebar-animation.mjs +21 -4
- package/esm2020/molecules/sidebar/animation/sidebar-viewport-animation-state.mjs +3 -0
- package/esm2020/molecules/sidebar/helper/sidebar-mode.mjs +1 -1
- package/esm2020/molecules/sidebar/helper/sidebar-side.mjs +2 -0
- package/esm2020/molecules/sidebar/public_api.mjs +1 -2
- package/esm2020/molecules/sidebar/sidebar/sidebar.component.mjs +62 -10
- package/esm2020/molecules/sidebar/sidebar-viewport/backdrop-interactable.mjs +5 -0
- package/esm2020/molecules/sidebar/sidebar-viewport/content-pad.mjs +17 -0
- package/esm2020/molecules/sidebar/sidebar-viewport/content-shift.mjs +21 -0
- package/esm2020/molecules/sidebar/sidebar-viewport/sidebar-viewport.component.mjs +83 -81
- package/esm2020/sidebar/examples/basic-sidebar/basic-sidebar.component.mjs +12 -0
- package/esm2020/sidebar/examples/basic-sidebar/basic-sidebar.module.mjs +29 -0
- package/esm2020/sidebar/examples/daffodil-design-sidebar-examples.mjs +5 -0
- package/esm2020/sidebar/examples/fixed-and-over-sidebar/fixed-and-over-sidebar.component.mjs +21 -0
- package/esm2020/sidebar/examples/fixed-and-over-sidebar/fixed-and-over-sidebar.module.mjs +32 -0
- package/esm2020/sidebar/examples/index.mjs +2 -0
- package/esm2020/sidebar/examples/public_api.mjs +18 -0
- package/esm2020/sidebar/examples/sidebar-with-sticky/sidebar-with-sticky.component.mjs +12 -0
- package/esm2020/sidebar/examples/sidebar-with-sticky/sidebar-with-sticky.module.mjs +29 -0
- package/esm2020/sidebar/examples/two-fixed-sidebars-either-side/two-fixed-sidebars-either-side.component.mjs +12 -0
- package/esm2020/sidebar/examples/two-fixed-sidebars-either-side/two-fixed-sidebars-either-side.module.mjs +29 -0
- package/esm2020/sidebar/examples/under-sidebar/under-sidebar.component.mjs +26 -0
- package/esm2020/sidebar/examples/under-sidebar/under-sidebar.module.mjs +32 -0
- package/esm2020/tree/daffodil-design-tree.mjs +5 -0
- package/esm2020/tree/examples/basic-tree/basic-tree.component.mjs +39 -0
- package/esm2020/tree/examples/basic-tree/basic-tree.module.mjs +34 -0
- package/esm2020/tree/examples/daffodil-design-tree-examples.mjs +5 -0
- package/esm2020/tree/examples/index.mjs +2 -0
- package/esm2020/tree/examples/public_api.mjs +7 -0
- package/esm2020/tree/index.mjs +2 -0
- package/esm2020/tree/interfaces/recursive-key.mjs +2 -0
- package/esm2020/tree/interfaces/tree-data.mjs +2 -0
- package/esm2020/tree/interfaces/tree-ui.mjs +2 -0
- package/esm2020/tree/public_api.mjs +5 -0
- package/esm2020/tree/tree/tree-notifier.service.mjs +45 -0
- package/esm2020/tree/tree/tree.component.mjs +106 -0
- package/esm2020/tree/tree-item/tree-item.directive.mjs +154 -0
- package/esm2020/tree/tree.module.mjs +31 -0
- package/esm2020/tree/utils/flatten-tree.mjs +47 -0
- package/esm2020/tree/utils/hydrate-tree.mjs +31 -0
- package/esm2020/tree/utils/transform-in-place.mjs +23 -0
- package/esm2020/tree/utils/traverse-tree.mjs +21 -0
- package/fesm2015/daffodil-design-sidebar-examples.mjs +218 -0
- package/fesm2015/daffodil-design-sidebar-examples.mjs.map +1 -0
- package/fesm2015/daffodil-design-tree-examples.mjs +81 -0
- package/fesm2015/daffodil-design-tree-examples.mjs.map +1 -0
- package/fesm2015/daffodil-design-tree.mjs +443 -0
- package/fesm2015/daffodil-design-tree.mjs.map +1 -0
- package/fesm2015/daffodil-design.mjs +250 -98
- package/fesm2015/daffodil-design.mjs.map +1 -1
- package/fesm2020/daffodil-design-sidebar-examples.mjs +218 -0
- package/fesm2020/daffodil-design-sidebar-examples.mjs.map +1 -0
- package/fesm2020/daffodil-design-tree-examples.mjs +81 -0
- package/fesm2020/daffodil-design-tree-examples.mjs.map +1 -0
- package/fesm2020/daffodil-design-tree.mjs +448 -0
- package/fesm2020/daffodil-design-tree.mjs.map +1 -0
- package/fesm2020/daffodil-design.mjs +250 -98
- package/fesm2020/daffodil-design.mjs.map +1 -1
- package/hero/examples/package.json +1 -1
- package/image/examples/package.json +1 -1
- package/input/examples/package.json +1 -1
- package/list/examples/package.json +1 -1
- package/loading-icon/examples/package.json +1 -1
- package/media-gallery/examples/package.json +1 -1
- package/menu/examples/package.json +1 -1
- package/modal/examples/package.json +1 -1
- package/molecules/backdrop/animation/backdrop-animation-state.d.ts +2 -0
- package/molecules/backdrop/backdrop/backdrop.component.d.ts +17 -3
- package/molecules/sidebar/animation/sidebar-animation-state.d.ts +2 -1
- package/molecules/sidebar/animation/sidebar-animation-width.d.ts +2 -0
- package/molecules/sidebar/animation/sidebar-animation.d.ts +3 -1
- package/molecules/sidebar/animation/sidebar-viewport-animation-state.d.ts +6 -0
- package/molecules/sidebar/helper/sidebar-mode.d.ts +27 -1
- package/molecules/sidebar/helper/sidebar-side.d.ts +12 -0
- package/molecules/sidebar/public_api.d.ts +2 -1
- package/molecules/sidebar/sidebar/sidebar.component.d.ts +37 -5
- package/molecules/sidebar/sidebar-viewport/backdrop-interactable.d.ts +6 -0
- package/molecules/sidebar/sidebar-viewport/content-pad.d.ts +7 -0
- package/molecules/sidebar/sidebar-viewport/content-shift.d.ts +8 -0
- package/molecules/sidebar/sidebar-viewport/sidebar-viewport.component.d.ts +47 -44
- package/navbar/examples/package.json +1 -1
- package/package.json +1 -1
- package/paginator/examples/package.json +1 -1
- package/quantity-field/examples/package.json +1 -1
- package/radio/examples/package.json +1 -1
- package/scss/global.scss +1 -0
- package/scss/theme.scss +2 -0
- package/sidebar/examples/basic-sidebar/basic-sidebar.component.d.ts +5 -0
- package/sidebar/examples/basic-sidebar/basic-sidebar.module.d.ts +8 -0
- package/sidebar/examples/daffodil-design-sidebar-examples.d.ts +5 -0
- package/sidebar/examples/fixed-and-over-sidebar/fixed-and-over-sidebar.component.d.ts +8 -0
- package/sidebar/examples/fixed-and-over-sidebar/fixed-and-over-sidebar.module.d.ts +8 -0
- package/sidebar/examples/index.d.ts +1 -0
- package/sidebar/examples/package.json +1 -0
- package/sidebar/examples/public_api.d.ts +2 -0
- package/sidebar/examples/sidebar-with-sticky/sidebar-with-sticky.component.d.ts +5 -0
- package/sidebar/examples/sidebar-with-sticky/sidebar-with-sticky.module.d.ts +8 -0
- package/sidebar/examples/two-fixed-sidebars-either-side/two-fixed-sidebars-either-side.component.d.ts +5 -0
- package/sidebar/examples/two-fixed-sidebars-either-side/two-fixed-sidebars-either-side.module.d.ts +8 -0
- package/sidebar/examples/under-sidebar/under-sidebar.component.d.ts +10 -0
- package/sidebar/examples/under-sidebar/under-sidebar.module.d.ts +8 -0
- package/src/molecules/sidebar/README.md +10 -0
- package/src/molecules/sidebar/helper/_variables.scss +7 -0
- package/src/molecules/sidebar/sidebar/sidebar-theme.scss +3 -3
- package/src/molecules/sidebar/sidebar-viewport/sidebar-viewport-theme.scss +5 -0
- package/tree/README.md +38 -0
- package/tree/daffodil-design-tree.d.ts +5 -0
- package/tree/examples/basic-tree/basic-tree.component.d.ts +7 -0
- package/tree/examples/basic-tree/basic-tree.module.d.ts +10 -0
- package/tree/examples/daffodil-design-tree-examples.d.ts +5 -0
- package/tree/examples/index.d.ts +1 -0
- package/tree/examples/package.json +1 -0
- package/tree/examples/public_api.d.ts +4 -0
- package/tree/index.d.ts +1 -0
- package/tree/interfaces/recursive-key.d.ts +3 -0
- package/tree/interfaces/tree-data.d.ts +13 -0
- package/tree/interfaces/tree-ui.d.ts +11 -0
- package/tree/package.json +1 -0
- package/tree/public_api.d.ts +6 -0
- package/tree/src/tree-theme.scss +38 -0
- package/tree/tree/tree-notifier.service.d.ts +32 -0
- package/tree/tree/tree.component.d.ts +75 -0
- package/tree/tree-item/tree-item.directive.d.ts +102 -0
- package/tree/tree.module.d.ts +9 -0
- package/tree/utils/flatten-tree.d.ts +19 -0
- package/tree/utils/hydrate-tree.d.ts +8 -0
- package/tree/utils/transform-in-place.d.ts +15 -0
- package/tree/utils/traverse-tree.d.ts +5 -0
@@ -0,0 +1,10 @@
|
|
1
|
+
import * as i0 from "@angular/core";
|
2
|
+
export declare class UnderSidebarComponent {
|
3
|
+
openLeft: boolean;
|
4
|
+
openRight: boolean;
|
5
|
+
openLeftSidebar(): void;
|
6
|
+
openRightSidebar(): void;
|
7
|
+
closeSidebar(): void;
|
8
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<UnderSidebarComponent, never>;
|
9
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<UnderSidebarComponent, "under-sidebar", never, {}, {}, never, never>;
|
10
|
+
}
|
@@ -0,0 +1,8 @@
|
|
1
|
+
import * as i0 from "@angular/core";
|
2
|
+
import * as i1 from "./under-sidebar.component";
|
3
|
+
import * as i2 from "@daffodil/design";
|
4
|
+
export declare class UnderSidebarModule {
|
5
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<UnderSidebarModule, never>;
|
6
|
+
static ɵmod: i0.ɵɵNgModuleDeclaration<UnderSidebarModule, [typeof i1.UnderSidebarComponent], [typeof i2.DaffSidebarModule, typeof i2.DaffNavbarModule, typeof i2.DaffButtonModule], [typeof i1.UnderSidebarComponent]>;
|
7
|
+
static ɵinj: i0.ɵɵInjectorDeclaration<UnderSidebarModule>;
|
8
|
+
}
|
@@ -8,3 +8,13 @@
|
|
8
8
|
<p>Some Content</p>
|
9
9
|
</daff-sidebar-viewport>
|
10
10
|
```
|
11
|
+
|
12
|
+
|
13
|
+
### Goals
|
14
|
+
|
15
|
+
1. Support position sticky inside sidebar content
|
16
|
+
2. Support 1 sidebar at a time on each side
|
17
|
+
3. Support viewports inside of other viewports.
|
18
|
+
4. A `global` flag that can be set to use `dvh`
|
19
|
+
5. Sidebars as the window size changes from `side` to `over` and vice-versa by default.
|
20
|
+
6. Where does the body scrollbar start and end? Does it hit the header of go to the top of the document.
|
@@ -2,12 +2,12 @@
|
|
2
2
|
|
3
3
|
@mixin daff-sidebar-theme($theme) {
|
4
4
|
$base: core.daff-map-deep-get($theme, 'core.base');
|
5
|
-
$base-contrast: core.daff-map-deep-get($theme,
|
5
|
+
$base-contrast: core.daff-map-deep-get($theme, 'core.base-contrast');
|
6
6
|
$black: core.daff-map-deep-get($theme, 'core.black');
|
7
|
+
$font-color: core.daff-map-deep-get($theme, 'core.font-color');
|
7
8
|
|
8
9
|
.daff-sidebar {
|
9
10
|
background: $base;
|
10
|
-
|
11
|
-
color: $base-contrast;
|
11
|
+
color: $font-color;
|
12
12
|
}
|
13
13
|
}
|
package/tree/README.md
ADDED
@@ -0,0 +1,38 @@
|
|
1
|
+
# Tree
|
2
|
+
|
3
|
+
Trees are used to visualize hierarchial information. They are often used to display navigational structures like nested lists of links.
|
4
|
+
|
5
|
+
## Overview
|
6
|
+
|
7
|
+
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.
|
8
|
+
|
9
|
+
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.
|
10
|
+
|
11
|
+
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.
|
12
|
+
|
13
|
+
## Features
|
14
|
+
|
15
|
+
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.
|
16
|
+
|
17
|
+
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.
|
18
|
+
|
19
|
+
```html
|
20
|
+
<ng-template #daffTreeItemWithChildrenTpl let-node>
|
21
|
+
<button daffTreeItem [node]="node">{{ node.title }} </button>
|
22
|
+
</ng-template>
|
23
|
+
|
24
|
+
<ng-template #daffTreeItemTpl let-node>
|
25
|
+
<a daffTreeItem [node]="node" [routerLink]="node.url">{{ node.title }}</a>
|
26
|
+
</ng-template>
|
27
|
+
```
|
28
|
+
|
29
|
+
## Usage
|
30
|
+
|
31
|
+
### Basic Tree
|
32
|
+
|
33
|
+
<design-land-example-viewer-container example="basic-tree">
|
34
|
+
</design-land-example-viewer-container>
|
35
|
+
|
36
|
+
## Accessibility
|
37
|
+
|
38
|
+
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/).
|
@@ -0,0 +1,7 @@
|
|
1
|
+
import { DaffTreeData } from '@daffodil/design/tree';
|
2
|
+
import * as i0 from "@angular/core";
|
3
|
+
export declare class BasicTreeComponent {
|
4
|
+
tree: DaffTreeData<unknown>;
|
5
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<BasicTreeComponent, never>;
|
6
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<BasicTreeComponent, "basic-tree", never, {}, {}, never, never>;
|
7
|
+
}
|
@@ -0,0 +1,10 @@
|
|
1
|
+
import * as i0 from "@angular/core";
|
2
|
+
import * as i1 from "./basic-tree.component";
|
3
|
+
import * as i2 from "@angular/router";
|
4
|
+
import * as i3 from "@daffodil/design/tree";
|
5
|
+
import * as i4 from "@fortawesome/angular-fontawesome";
|
6
|
+
export declare class BasicTreeModule {
|
7
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<BasicTreeModule, never>;
|
8
|
+
static ɵmod: i0.ɵɵNgModuleDeclaration<BasicTreeModule, [typeof i1.BasicTreeComponent], [typeof i2.RouterModule, typeof i3.DaffTreeModule, typeof i4.FontAwesomeModule], [typeof i1.BasicTreeComponent]>;
|
9
|
+
static ɵinj: i0.ɵɵInjectorDeclaration<BasicTreeModule>;
|
10
|
+
}
|
@@ -0,0 +1 @@
|
|
1
|
+
export * from './public_api';
|
@@ -0,0 +1 @@
|
|
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.1"}
|
package/tree/index.d.ts
ADDED
@@ -0,0 +1 @@
|
|
1
|
+
export * from './public_api';
|
@@ -0,0 +1,13 @@
|
|
1
|
+
/**
|
2
|
+
* A basic tree type supporting supplemental data on a tree node.
|
3
|
+
*
|
4
|
+
* Tree elements are often slightly more than just basic titles and child items.
|
5
|
+
* There may be other important data that needs to be available at render time.
|
6
|
+
*/
|
7
|
+
export interface DaffTreeData<T> {
|
8
|
+
title: string;
|
9
|
+
url: string;
|
10
|
+
id: string;
|
11
|
+
items: DaffTreeData<T>[];
|
12
|
+
data: T;
|
13
|
+
}
|
@@ -0,0 +1,11 @@
|
|
1
|
+
import { DaffTreeData } from './tree-data';
|
2
|
+
/**
|
3
|
+
* A DaffTreeUi is the internal data structure used during tree rendering.
|
4
|
+
*
|
5
|
+
* This is an internal implementation detail type that.
|
6
|
+
*/
|
7
|
+
export interface DaffTreeUi<T> extends DaffTreeData<T> {
|
8
|
+
open: boolean;
|
9
|
+
items: DaffTreeUi<T>[];
|
10
|
+
parent: DaffTreeUi<T>;
|
11
|
+
}
|
@@ -0,0 +1 @@
|
|
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.1"}
|
@@ -0,0 +1,6 @@
|
|
1
|
+
export { DaffTreeModule } from './tree.module';
|
2
|
+
export { DaffTreeComponent } from './tree/tree.component';
|
3
|
+
export { DaffTreeItemDirective } from './tree-item/tree-item.directive';
|
4
|
+
export { DaffTreeData } from './interfaces/tree-data';
|
5
|
+
export { DaffTreeUi } from './interfaces/tree-ui';
|
6
|
+
export { daffTransformTreeInPlace } from './utils/transform-in-place';
|
@@ -0,0 +1,38 @@
|
|
1
|
+
@use 'sass:map';
|
2
|
+
@use '../../scss/theming';
|
3
|
+
@use '../../scss/core';
|
4
|
+
|
5
|
+
@mixin daff-tree-theme($theme) {
|
6
|
+
$primary: map.get($theme, primary);
|
7
|
+
$secondary: map.get($theme, secondary);
|
8
|
+
$tertiary: map.get($theme, tertiary);
|
9
|
+
$base: core.daff-map-deep-get($theme, 'core.base');
|
10
|
+
$base-contrast: core.daff-map-deep-get($theme, 'core.base-contrast');
|
11
|
+
$white: core.daff-map-deep-get($theme, 'core.white');
|
12
|
+
$black: core.daff-map-deep-get($theme, 'core.black');
|
13
|
+
$gray: core.daff-map-deep-get($theme, 'core.gray');
|
14
|
+
|
15
|
+
.daff-tree-item {
|
16
|
+
$root: &;
|
17
|
+
|
18
|
+
background-color: $base;
|
19
|
+
color: theming.daff-illuminate($base-contrast, $gray, 2);
|
20
|
+
|
21
|
+
&:hover {
|
22
|
+
background-color: theming.daff-illuminate($base, $gray, 2);
|
23
|
+
}
|
24
|
+
|
25
|
+
&:after {
|
26
|
+
border-color: currentColor;
|
27
|
+
}
|
28
|
+
|
29
|
+
&.selected {
|
30
|
+
background-color: theming.daff-illuminate($base, $gray, 2);
|
31
|
+
color: $base-contrast;
|
32
|
+
|
33
|
+
&:before {
|
34
|
+
background-color: theming.daff-color($primary);
|
35
|
+
}
|
36
|
+
}
|
37
|
+
}
|
38
|
+
}
|
@@ -0,0 +1,32 @@
|
|
1
|
+
import { OnDestroy } from '@angular/core';
|
2
|
+
/**
|
3
|
+
* This service is used by tree-items to notify their parent
|
4
|
+
* that the tree has to be re-computed.
|
5
|
+
*
|
6
|
+
* This service is a multiton associated with each tree instance.
|
7
|
+
* It follows the same lifecycle has the tree it is associated with.
|
8
|
+
*/
|
9
|
+
export declare class DaffTreeNotifierService implements OnDestroy {
|
10
|
+
/**
|
11
|
+
* @docs-private
|
12
|
+
*/
|
13
|
+
private _notice;
|
14
|
+
/**
|
15
|
+
* An observable that emits when the tree needs to be re-computed.
|
16
|
+
*/
|
17
|
+
notice$: import("rxjs").Observable<boolean>;
|
18
|
+
/**
|
19
|
+
* `notify` can be called to trigger a re-computation of the tree
|
20
|
+
* if data has changed unexpectedly and a re-render did not occur.
|
21
|
+
*
|
22
|
+
* This should be used sparingly. Instead, prefer updating `data` on the tree
|
23
|
+
* itself for performance reasons.
|
24
|
+
*/
|
25
|
+
notify(): void;
|
26
|
+
/**
|
27
|
+
* Cleanup when the tree is destroyed.
|
28
|
+
*
|
29
|
+
* @docs-private
|
30
|
+
*/
|
31
|
+
ngOnDestroy(): void;
|
32
|
+
}
|
@@ -0,0 +1,75 @@
|
|
1
|
+
import { OnInit, TemplateRef } from '@angular/core';
|
2
|
+
import { DaffTreeData } from '../interfaces/tree-data';
|
3
|
+
import { DaffTreeFlatNode } from '../utils/flatten-tree';
|
4
|
+
import { DaffTreeNotifierService } from './tree-notifier.service';
|
5
|
+
import * as i0 from "@angular/core";
|
6
|
+
/**
|
7
|
+
* The `DaffTreeComponent` allows you to render tree structures as interactable ui.
|
8
|
+
*
|
9
|
+
* They can be used like:
|
10
|
+
*
|
11
|
+
* ```html
|
12
|
+
* <ul daff-tree [tree]="tree">
|
13
|
+
* <ng-template #daffTreeItemWithChildrenTpl let-node>
|
14
|
+
* <button daffTreeItem [node]="node">{{ node.title }} </button>
|
15
|
+
* </ng-template>
|
16
|
+
*
|
17
|
+
* <ng-template #daffTreeItemTpl let-node>
|
18
|
+
* <a daffTreeItem [node]="node" [routerLink]="node.url">{{ node.title }}</a>
|
19
|
+
* </ng-template>
|
20
|
+
* </ul>
|
21
|
+
* ```
|
22
|
+
*
|
23
|
+
* where `tree` is a {@link DaffTreeData}.
|
24
|
+
*
|
25
|
+
*/
|
26
|
+
export declare class DaffTreeComponent implements OnInit {
|
27
|
+
private notifier;
|
28
|
+
/**
|
29
|
+
* The css class of the daff-tree.
|
30
|
+
*
|
31
|
+
* @docs-private
|
32
|
+
*/
|
33
|
+
class: boolean;
|
34
|
+
/**
|
35
|
+
* The internal tree element.
|
36
|
+
*/
|
37
|
+
private tree;
|
38
|
+
/**
|
39
|
+
* The flattened tree data. You can iterate through this if you want to inspect
|
40
|
+
* the resulting array structure we computed to render the tree.
|
41
|
+
*/
|
42
|
+
flatTree: DaffTreeFlatNode[];
|
43
|
+
/**
|
44
|
+
* @docs-private
|
45
|
+
*/
|
46
|
+
private _dataTree;
|
47
|
+
/**
|
48
|
+
* The tree data you would like to render.
|
49
|
+
*/
|
50
|
+
get dataTree(): DaffTreeData<unknown>;
|
51
|
+
set dataTree(dataTree: DaffTreeData<unknown>);
|
52
|
+
/**
|
53
|
+
* The template used to render tree-nodes that themselves have children.
|
54
|
+
*
|
55
|
+
* @docs-private
|
56
|
+
*/
|
57
|
+
withChildrenTemplate: TemplateRef<any>;
|
58
|
+
/**
|
59
|
+
* The template used to render tree-nodes that have no children.
|
60
|
+
*
|
61
|
+
* @docs-private
|
62
|
+
*/
|
63
|
+
treeItemTemplate: TemplateRef<any>;
|
64
|
+
constructor(notifier: DaffTreeNotifierService);
|
65
|
+
/**
|
66
|
+
* The track-by function used to reduce tree-item re-renders
|
67
|
+
*/
|
68
|
+
trackByTreeElement(index: number, el: any): any;
|
69
|
+
/**
|
70
|
+
* @docs-private
|
71
|
+
*/
|
72
|
+
ngOnInit(): void;
|
73
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<DaffTreeComponent, never>;
|
74
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<DaffTreeComponent, "ul[daff-tree]", never, { "dataTree": "tree"; }, {}, ["withChildrenTemplate", "treeItemTemplate"], never>;
|
75
|
+
}
|
@@ -0,0 +1,102 @@
|
|
1
|
+
import { DaffTreeNotifierService } from '../tree/tree-notifier.service';
|
2
|
+
import { DaffTreeFlatNode } from '../utils/flatten-tree';
|
3
|
+
import * as i0 from "@angular/core";
|
4
|
+
/**
|
5
|
+
* The `DaffTreeItemDirective` allows you to demarcate the elements which are
|
6
|
+
* tree-children that interact with the parent tree.
|
7
|
+
*
|
8
|
+
* They can be used like:
|
9
|
+
*
|
10
|
+
* ```html
|
11
|
+
* <ul daff-tree [tree]="tree">
|
12
|
+
* <ng-template #daffTreeItemWithChildrenTpl let-node>
|
13
|
+
* <button daffTreeItem [node]="node">{{ node.title }} </button>
|
14
|
+
* </ng-template>
|
15
|
+
*
|
16
|
+
* <ng-template #daffTreeItemTpl let-node>
|
17
|
+
* <a daffTreeItem [node]="node" [routerLink]="node.url">{{ node.title }}</a>
|
18
|
+
* </ng-template>
|
19
|
+
* </ul>
|
20
|
+
* ```
|
21
|
+
*
|
22
|
+
* where `tree` is a {@link DaffTreeData} and `daff-tree` is a {@link DaffTreeComponent}.
|
23
|
+
*
|
24
|
+
*/
|
25
|
+
export declare class DaffTreeItemDirective {
|
26
|
+
private document;
|
27
|
+
private treeNotifier;
|
28
|
+
/**
|
29
|
+
* The css class of the daff-tree.
|
30
|
+
*
|
31
|
+
* @docs-private
|
32
|
+
*/
|
33
|
+
class: boolean;
|
34
|
+
/**
|
35
|
+
* The css class of a DaffTreeItemDirective that has children.
|
36
|
+
*
|
37
|
+
* @docs-private
|
38
|
+
*/
|
39
|
+
classParent: boolean;
|
40
|
+
/**
|
41
|
+
* The html `id` of the tree item. This is derived from the {@link DaffTreeData}.
|
42
|
+
*
|
43
|
+
* @docs-private
|
44
|
+
*/
|
45
|
+
id: any;
|
46
|
+
/**
|
47
|
+
* Accessibility property, notifying users about whether
|
48
|
+
* or not the tree item is open.
|
49
|
+
*
|
50
|
+
* @docs-private
|
51
|
+
*/
|
52
|
+
ariaExpanded: string;
|
53
|
+
/**
|
54
|
+
* A css variable indicating the depth of the tree.
|
55
|
+
* You can use this to style your templates if you want to
|
56
|
+
* use different designs at different depths.
|
57
|
+
*/
|
58
|
+
depth: number;
|
59
|
+
/**
|
60
|
+
* The CSS class indicating whether or not the tree is `selected`.
|
61
|
+
*/
|
62
|
+
get selectedClass(): boolean;
|
63
|
+
/**
|
64
|
+
* The CSS class indicating whether or not the tree is `open`.
|
65
|
+
*/
|
66
|
+
openClass: boolean;
|
67
|
+
/**
|
68
|
+
* The {@link DaffTreeFlatNode} associated with this specific tree item.
|
69
|
+
*
|
70
|
+
* @docs-private
|
71
|
+
*/
|
72
|
+
private _node;
|
73
|
+
/**
|
74
|
+
* The {@link DaffTreeFlatNode} associated with this specific tree item.
|
75
|
+
*/
|
76
|
+
get node(): DaffTreeFlatNode;
|
77
|
+
set node(val: DaffTreeFlatNode);
|
78
|
+
/**
|
79
|
+
* Whether or not the tree item is the currently active item.
|
80
|
+
* Note that there is no requirement there there only be one active item at a time.
|
81
|
+
*/
|
82
|
+
selected: boolean;
|
83
|
+
constructor(document: any, treeNotifier: DaffTreeNotifierService);
|
84
|
+
/**
|
85
|
+
* @docs-private
|
86
|
+
*/
|
87
|
+
onEscape(): void;
|
88
|
+
/**
|
89
|
+
* @docs-private
|
90
|
+
*/
|
91
|
+
onClick(): void;
|
92
|
+
/**
|
93
|
+
* Toggle the open state of the tree's parent.
|
94
|
+
*/
|
95
|
+
toggleParent(node: DaffTreeFlatNode): void;
|
96
|
+
/**
|
97
|
+
* Toggle the open state of this specific subtree tree.
|
98
|
+
*/
|
99
|
+
toggleTree(node: DaffTreeFlatNode): void;
|
100
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<DaffTreeItemDirective, never>;
|
101
|
+
static ɵdir: i0.ɵɵDirectiveDeclaration<DaffTreeItemDirective, "[daffTreeItem]", never, { "node": "node"; "selected": "selected"; }, {}, never>;
|
102
|
+
}
|
@@ -0,0 +1,9 @@
|
|
1
|
+
import * as i0 from "@angular/core";
|
2
|
+
import * as i1 from "./tree/tree.component";
|
3
|
+
import * as i2 from "./tree-item/tree-item.directive";
|
4
|
+
import * as i3 from "@angular/common";
|
5
|
+
export declare class DaffTreeModule {
|
6
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<DaffTreeModule, never>;
|
7
|
+
static ɵmod: i0.ɵɵNgModuleDeclaration<DaffTreeModule, [typeof i1.DaffTreeComponent, typeof i2.DaffTreeItemDirective], [typeof i3.CommonModule], [typeof i1.DaffTreeComponent, typeof i2.DaffTreeItemDirective]>;
|
8
|
+
static ɵinj: i0.ɵɵInjectorDeclaration<DaffTreeModule>;
|
9
|
+
}
|
@@ -0,0 +1,19 @@
|
|
1
|
+
import { DaffTreeUi } from '../interfaces/tree-ui';
|
2
|
+
/**
|
3
|
+
* A flattened node of a tree. This is used when translating the tree data
|
4
|
+
* structure into an array.
|
5
|
+
*/
|
6
|
+
export interface DaffTreeFlatNode {
|
7
|
+
id: number | string;
|
8
|
+
title: string;
|
9
|
+
url: string;
|
10
|
+
level: number;
|
11
|
+
hasChildren: boolean;
|
12
|
+
data: unknown;
|
13
|
+
_treeRef: DaffTreeUi<unknown>;
|
14
|
+
}
|
15
|
+
/**
|
16
|
+
* Flatten a DaffTreeUi<unknown> into an array, removing elements from the array
|
17
|
+
* below nodes in the tree that are not open.
|
18
|
+
*/
|
19
|
+
export declare const flattenTree: (daffUiTree: DaffTreeUi<unknown>) => DaffTreeFlatNode[];
|
@@ -0,0 +1,8 @@
|
|
1
|
+
import { DaffTreeData } from '../interfaces/tree-data';
|
2
|
+
import { DaffTreeUi } from '../interfaces/tree-ui';
|
3
|
+
export declare const daffDataTreeToUiTree: <T>(data: DaffTreeData<T>, parent: DaffTreeUi<T>, open?: boolean) => DaffTreeUi<T>;
|
4
|
+
/**
|
5
|
+
* This function translates the original data given to us by the client
|
6
|
+
* to the internal representation of the tree used by the {@link DaffTreeComponent}
|
7
|
+
*/
|
8
|
+
export declare const hydrateTree: <T>(data: DaffTreeData<T>) => DaffTreeUi<T>;
|
@@ -0,0 +1,15 @@
|
|
1
|
+
import { RecursiveTreeKeyOfType } from '../interfaces/recursive-key';
|
2
|
+
import { DaffTreeData } from '../interfaces/tree-data';
|
3
|
+
/**
|
4
|
+
* Transform a tree-like structure in-place into a {@link DaffTreeData}.
|
5
|
+
*
|
6
|
+
* This will mutate the original object, hydrating with additional properties.
|
7
|
+
*
|
8
|
+
* @param tree - The data structure representing tree-like data.
|
9
|
+
* @param transformFn - A user-supplied function that will transform the user
|
10
|
+
* type into a {@link DaffTreeData}
|
11
|
+
* @param key - The property of the your tree that indicates which
|
12
|
+
* key contains the "children" of your tree structure.
|
13
|
+
*
|
14
|
+
*/
|
15
|
+
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>;
|
@@ -0,0 +1,5 @@
|
|
1
|
+
import { RecursiveTreeKeyOfType } from '../interfaces/recursive-key';
|
2
|
+
/**
|
3
|
+
* Traverse the tree, pre-order, right-to-left
|
4
|
+
*/
|
5
|
+
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;
|