@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.
Files changed (144) hide show
  1. package/accordion/examples/package.json +1 -1
  2. package/article/examples/package.json +1 -1
  3. package/button/examples/package.json +1 -1
  4. package/callout/examples/package.json +1 -1
  5. package/card/examples/package.json +1 -1
  6. package/checkbox/examples/package.json +1 -1
  7. package/container/examples/package.json +1 -1
  8. package/core/animation/animation-state-with-params.d.ts +8 -0
  9. package/core/public_api.d.ts +1 -0
  10. package/esm2020/core/animation/animation-state-with-params.mjs +2 -0
  11. package/esm2020/core/public_api.mjs +2 -1
  12. package/esm2020/molecules/backdrop/animation/backdrop-animation-state.mjs +2 -0
  13. package/esm2020/molecules/backdrop/animation/backdrop-animation.mjs +6 -2
  14. package/esm2020/molecules/backdrop/backdrop/backdrop.component.mjs +40 -5
  15. package/esm2020/molecules/sidebar/animation/sidebar-animation-state.mjs +2 -2
  16. package/esm2020/molecules/sidebar/animation/sidebar-animation-width.mjs +2 -0
  17. package/esm2020/molecules/sidebar/animation/sidebar-animation.mjs +21 -4
  18. package/esm2020/molecules/sidebar/animation/sidebar-viewport-animation-state.mjs +3 -0
  19. package/esm2020/molecules/sidebar/helper/sidebar-mode.mjs +1 -1
  20. package/esm2020/molecules/sidebar/helper/sidebar-side.mjs +2 -0
  21. package/esm2020/molecules/sidebar/public_api.mjs +1 -2
  22. package/esm2020/molecules/sidebar/sidebar/sidebar.component.mjs +62 -10
  23. package/esm2020/molecules/sidebar/sidebar-viewport/backdrop-interactable.mjs +5 -0
  24. package/esm2020/molecules/sidebar/sidebar-viewport/content-pad.mjs +17 -0
  25. package/esm2020/molecules/sidebar/sidebar-viewport/content-shift.mjs +21 -0
  26. package/esm2020/molecules/sidebar/sidebar-viewport/sidebar-viewport.component.mjs +83 -81
  27. package/esm2020/sidebar/examples/basic-sidebar/basic-sidebar.component.mjs +12 -0
  28. package/esm2020/sidebar/examples/basic-sidebar/basic-sidebar.module.mjs +29 -0
  29. package/esm2020/sidebar/examples/daffodil-design-sidebar-examples.mjs +5 -0
  30. package/esm2020/sidebar/examples/fixed-and-over-sidebar/fixed-and-over-sidebar.component.mjs +21 -0
  31. package/esm2020/sidebar/examples/fixed-and-over-sidebar/fixed-and-over-sidebar.module.mjs +32 -0
  32. package/esm2020/sidebar/examples/index.mjs +2 -0
  33. package/esm2020/sidebar/examples/public_api.mjs +18 -0
  34. package/esm2020/sidebar/examples/sidebar-with-sticky/sidebar-with-sticky.component.mjs +12 -0
  35. package/esm2020/sidebar/examples/sidebar-with-sticky/sidebar-with-sticky.module.mjs +29 -0
  36. package/esm2020/sidebar/examples/two-fixed-sidebars-either-side/two-fixed-sidebars-either-side.component.mjs +12 -0
  37. package/esm2020/sidebar/examples/two-fixed-sidebars-either-side/two-fixed-sidebars-either-side.module.mjs +29 -0
  38. package/esm2020/sidebar/examples/under-sidebar/under-sidebar.component.mjs +26 -0
  39. package/esm2020/sidebar/examples/under-sidebar/under-sidebar.module.mjs +32 -0
  40. package/esm2020/tree/daffodil-design-tree.mjs +5 -0
  41. package/esm2020/tree/examples/basic-tree/basic-tree.component.mjs +39 -0
  42. package/esm2020/tree/examples/basic-tree/basic-tree.module.mjs +34 -0
  43. package/esm2020/tree/examples/daffodil-design-tree-examples.mjs +5 -0
  44. package/esm2020/tree/examples/index.mjs +2 -0
  45. package/esm2020/tree/examples/public_api.mjs +7 -0
  46. package/esm2020/tree/index.mjs +2 -0
  47. package/esm2020/tree/interfaces/recursive-key.mjs +2 -0
  48. package/esm2020/tree/interfaces/tree-data.mjs +2 -0
  49. package/esm2020/tree/interfaces/tree-ui.mjs +2 -0
  50. package/esm2020/tree/public_api.mjs +5 -0
  51. package/esm2020/tree/tree/tree-notifier.service.mjs +45 -0
  52. package/esm2020/tree/tree/tree.component.mjs +106 -0
  53. package/esm2020/tree/tree-item/tree-item.directive.mjs +154 -0
  54. package/esm2020/tree/tree.module.mjs +31 -0
  55. package/esm2020/tree/utils/flatten-tree.mjs +47 -0
  56. package/esm2020/tree/utils/hydrate-tree.mjs +31 -0
  57. package/esm2020/tree/utils/transform-in-place.mjs +23 -0
  58. package/esm2020/tree/utils/traverse-tree.mjs +21 -0
  59. package/fesm2015/daffodil-design-sidebar-examples.mjs +218 -0
  60. package/fesm2015/daffodil-design-sidebar-examples.mjs.map +1 -0
  61. package/fesm2015/daffodil-design-tree-examples.mjs +81 -0
  62. package/fesm2015/daffodil-design-tree-examples.mjs.map +1 -0
  63. package/fesm2015/daffodil-design-tree.mjs +443 -0
  64. package/fesm2015/daffodil-design-tree.mjs.map +1 -0
  65. package/fesm2015/daffodil-design.mjs +250 -98
  66. package/fesm2015/daffodil-design.mjs.map +1 -1
  67. package/fesm2020/daffodil-design-sidebar-examples.mjs +218 -0
  68. package/fesm2020/daffodil-design-sidebar-examples.mjs.map +1 -0
  69. package/fesm2020/daffodil-design-tree-examples.mjs +81 -0
  70. package/fesm2020/daffodil-design-tree-examples.mjs.map +1 -0
  71. package/fesm2020/daffodil-design-tree.mjs +448 -0
  72. package/fesm2020/daffodil-design-tree.mjs.map +1 -0
  73. package/fesm2020/daffodil-design.mjs +250 -98
  74. package/fesm2020/daffodil-design.mjs.map +1 -1
  75. package/hero/examples/package.json +1 -1
  76. package/image/examples/package.json +1 -1
  77. package/input/examples/package.json +1 -1
  78. package/list/examples/package.json +1 -1
  79. package/loading-icon/examples/package.json +1 -1
  80. package/media-gallery/examples/package.json +1 -1
  81. package/menu/examples/package.json +1 -1
  82. package/modal/examples/package.json +1 -1
  83. package/molecules/backdrop/animation/backdrop-animation-state.d.ts +2 -0
  84. package/molecules/backdrop/backdrop/backdrop.component.d.ts +17 -3
  85. package/molecules/sidebar/animation/sidebar-animation-state.d.ts +2 -1
  86. package/molecules/sidebar/animation/sidebar-animation-width.d.ts +2 -0
  87. package/molecules/sidebar/animation/sidebar-animation.d.ts +3 -1
  88. package/molecules/sidebar/animation/sidebar-viewport-animation-state.d.ts +6 -0
  89. package/molecules/sidebar/helper/sidebar-mode.d.ts +27 -1
  90. package/molecules/sidebar/helper/sidebar-side.d.ts +12 -0
  91. package/molecules/sidebar/public_api.d.ts +2 -1
  92. package/molecules/sidebar/sidebar/sidebar.component.d.ts +37 -5
  93. package/molecules/sidebar/sidebar-viewport/backdrop-interactable.d.ts +6 -0
  94. package/molecules/sidebar/sidebar-viewport/content-pad.d.ts +7 -0
  95. package/molecules/sidebar/sidebar-viewport/content-shift.d.ts +8 -0
  96. package/molecules/sidebar/sidebar-viewport/sidebar-viewport.component.d.ts +47 -44
  97. package/navbar/examples/package.json +1 -1
  98. package/package.json +1 -1
  99. package/paginator/examples/package.json +1 -1
  100. package/quantity-field/examples/package.json +1 -1
  101. package/radio/examples/package.json +1 -1
  102. package/scss/global.scss +1 -0
  103. package/scss/theme.scss +2 -0
  104. package/sidebar/examples/basic-sidebar/basic-sidebar.component.d.ts +5 -0
  105. package/sidebar/examples/basic-sidebar/basic-sidebar.module.d.ts +8 -0
  106. package/sidebar/examples/daffodil-design-sidebar-examples.d.ts +5 -0
  107. package/sidebar/examples/fixed-and-over-sidebar/fixed-and-over-sidebar.component.d.ts +8 -0
  108. package/sidebar/examples/fixed-and-over-sidebar/fixed-and-over-sidebar.module.d.ts +8 -0
  109. package/sidebar/examples/index.d.ts +1 -0
  110. package/sidebar/examples/package.json +1 -0
  111. package/sidebar/examples/public_api.d.ts +2 -0
  112. package/sidebar/examples/sidebar-with-sticky/sidebar-with-sticky.component.d.ts +5 -0
  113. package/sidebar/examples/sidebar-with-sticky/sidebar-with-sticky.module.d.ts +8 -0
  114. package/sidebar/examples/two-fixed-sidebars-either-side/two-fixed-sidebars-either-side.component.d.ts +5 -0
  115. package/sidebar/examples/two-fixed-sidebars-either-side/two-fixed-sidebars-either-side.module.d.ts +8 -0
  116. package/sidebar/examples/under-sidebar/under-sidebar.component.d.ts +10 -0
  117. package/sidebar/examples/under-sidebar/under-sidebar.module.d.ts +8 -0
  118. package/src/molecules/sidebar/README.md +10 -0
  119. package/src/molecules/sidebar/helper/_variables.scss +7 -0
  120. package/src/molecules/sidebar/sidebar/sidebar-theme.scss +3 -3
  121. package/src/molecules/sidebar/sidebar-viewport/sidebar-viewport-theme.scss +5 -0
  122. package/tree/README.md +38 -0
  123. package/tree/daffodil-design-tree.d.ts +5 -0
  124. package/tree/examples/basic-tree/basic-tree.component.d.ts +7 -0
  125. package/tree/examples/basic-tree/basic-tree.module.d.ts +10 -0
  126. package/tree/examples/daffodil-design-tree-examples.d.ts +5 -0
  127. package/tree/examples/index.d.ts +1 -0
  128. package/tree/examples/package.json +1 -0
  129. package/tree/examples/public_api.d.ts +4 -0
  130. package/tree/index.d.ts +1 -0
  131. package/tree/interfaces/recursive-key.d.ts +3 -0
  132. package/tree/interfaces/tree-data.d.ts +13 -0
  133. package/tree/interfaces/tree-ui.d.ts +11 -0
  134. package/tree/package.json +1 -0
  135. package/tree/public_api.d.ts +6 -0
  136. package/tree/src/tree-theme.scss +38 -0
  137. package/tree/tree/tree-notifier.service.d.ts +32 -0
  138. package/tree/tree/tree.component.d.ts +75 -0
  139. package/tree/tree-item/tree-item.directive.d.ts +102 -0
  140. package/tree/tree.module.d.ts +9 -0
  141. package/tree/utils/flatten-tree.d.ts +19 -0
  142. package/tree/utils/hydrate-tree.d.ts +8 -0
  143. package/tree/utils/transform-in-place.d.ts +15 -0
  144. 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.
@@ -0,0 +1,7 @@
1
+ // Stacking Context Layers
2
+ $daff-sidebar-sidebar-over-z-index: 5;
3
+ $daff-sidebar-backdrop-z-index: 4;
4
+ $daff-sidebar-sidebar-side-fixed-z-index: 4;
5
+ $daff-sidebar-content-z-index: 3;
6
+ $daff-sidebar-sidebar-under-z-index: 2;
7
+ $daff-sidebar-viewport-z-index: 1;
@@ -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, "core.base-contrast");
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
- box-shadow: 6px 1px 9px 0 rgba($black, 0.1);
11
- color: $base-contrast;
11
+ color: $font-color;
12
12
  }
13
13
  }
@@ -7,5 +7,10 @@
7
7
  .daff-sidebar-viewport {
8
8
  background: $base;
9
9
  color: $base-contrast;
10
+
11
+ &__content {
12
+ background: $base;
13
+ color: $base-contrast;
14
+ }
10
15
  }
11
16
  }
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,5 @@
1
+ /**
2
+ * Generated bundle index. Do not edit.
3
+ */
4
+ /// <amd-module name="@daffodil/design/tree" />
5
+ export * from './index';
@@ -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,5 @@
1
+ /**
2
+ * Generated bundle index. Do not edit.
3
+ */
4
+ /// <amd-module name="@daffodil/design/tree/examples" />
5
+ export * from './index';
@@ -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"}
@@ -0,0 +1,4 @@
1
+ import { BasicTreeComponent } from './basic-tree/basic-tree.component';
2
+ export { BasicTreeModule } from './basic-tree/basic-tree.module';
3
+ export { BasicTreeComponent };
4
+ export declare const TREE_EXAMPLES: (typeof BasicTreeComponent)[];
@@ -0,0 +1 @@
1
+ export * from './public_api';
@@ -0,0 +1,3 @@
1
+ export declare type RecursiveTreeKeyOfType<T> = keyof {
2
+ [P in keyof T as T[P] extends T[] ? P : never]: T[];
3
+ };
@@ -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;