@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
@@ -2558,7 +2558,7 @@ const daffAccordionAnimations = {
2558
2558
  ]),
2559
2559
  };
2560
2560
 
2561
- const getAnimationState$2 = (open) => {
2561
+ const getAnimationState$3 = (open) => {
2562
2562
  if (open) {
2563
2563
  return 'open';
2564
2564
  }
@@ -2591,11 +2591,11 @@ class DaffAccordionItemComponent {
2591
2591
  */
2592
2592
  ngOnInit() {
2593
2593
  this._open = this.initiallyActive ? this.initiallyActive : this._open;
2594
- this._animationState = getAnimationState$2(this._open);
2594
+ this._animationState = getAnimationState$3(this._open);
2595
2595
  }
2596
2596
  toggleActive() {
2597
2597
  this._open = !this._open;
2598
- this._animationState = getAnimationState$2(this._open);
2598
+ this._animationState = getAnimationState$3(this._open);
2599
2599
  }
2600
2600
  }
2601
2601
  /** @nocollapse */ DaffAccordionItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: DaffAccordionItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
@@ -2676,11 +2676,11 @@ class DaffNavAccordionItemComponent {
2676
2676
  this._level = this.navAccordionItemParent._level + 1;
2677
2677
  }
2678
2678
  this._open = this.initiallyActive ? this.initiallyActive : this._open;
2679
- this._animationState = getAnimationState$2(this._open);
2679
+ this._animationState = getAnimationState$3(this._open);
2680
2680
  }
2681
2681
  toggleActive() {
2682
2682
  this._open = !this._open;
2683
- this._animationState = getAnimationState$2(this._open);
2683
+ this._animationState = getAnimationState$3(this._open);
2684
2684
  }
2685
2685
  }
2686
2686
  /** @nocollapse */ DaffNavAccordionItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: DaffNavAccordionItemComponent, deps: [{ token: DaffAccordionComponent }, { token: DaffNavAccordionItemComponent, optional: true, skipSelf: true }], target: i0.ɵɵFactoryTarget.Component });
@@ -2877,6 +2877,10 @@ const backdropTransitionOut = 'cubic-bezier(0.4, 0.0, 1, 1)';
2877
2877
  const backdropTransitionIn = 'cubic-bezier(0.0, 0.0, 0.2, 1)';
2878
2878
  const daffBackdropAnimations = {
2879
2879
  fadeBackdrop: trigger('fadeBackdrop', [
2880
+ state('interactable', style({ opacity: 1 })),
2881
+ state('non-interactable', style({ opacity: 0 })),
2882
+ transition('interactable => non-interactable', animate(animationDuration + ' ' + backdropTransitionOut)),
2883
+ transition('non-interactable => interactable', animate(animationDuration + ' ' + backdropTransitionIn)),
2880
2884
  transition(':enter', [
2881
2885
  style({ opacity: 0 }),
2882
2886
  animate(animationDuration + ' ' + backdropTransitionIn, style({ opacity: 1 })),
@@ -2887,6 +2891,8 @@ const daffBackdropAnimations = {
2887
2891
  ]),
2888
2892
  };
2889
2893
 
2894
+ const getAnimationState$2 = (interactable) => interactable ? 'interactable' : 'non-interactable';
2895
+
2890
2896
  class DaffBackdropComponent {
2891
2897
  constructor() {
2892
2898
  /**
@@ -2894,6 +2900,10 @@ class DaffBackdropComponent {
2894
2900
  */
2895
2901
  // eslint-disable-next-line @typescript-eslint/no-inferrable-types
2896
2902
  this.transparent = false;
2903
+ /**
2904
+ * Determines whether or not the backdrop is interactable.
2905
+ */
2906
+ this.interactable = true;
2897
2907
  /**
2898
2908
  * Boolean property that determines whether or not the
2899
2909
  * backdrop should fill up its containing window.
@@ -2904,34 +2914,64 @@ class DaffBackdropComponent {
2904
2914
  * Output event triggered when the backdrop is clicked.
2905
2915
  */
2906
2916
  this.backdropClicked = new EventEmitter();
2917
+ this.interactableClass = true;
2918
+ }
2919
+ ngOnInit() {
2920
+ this.interactableClass = this.interactable;
2907
2921
  }
2908
2922
  /**
2909
2923
  * Animation hook for that controls the backdrops
2910
2924
  * entrance and fade animations.
2911
2925
  */
2926
+ get fadeBackdropTrigger() {
2927
+ return getAnimationState$2(this.interactable);
2928
+ }
2929
+ animationDone(e) {
2930
+ this.interactableClass = !(e.toState === ':leave' || e.toState === 'non-interactable');
2931
+ }
2932
+ animationStart(e) {
2933
+ if (e.toState === ':enter' || e.toState === 'interactable') {
2934
+ this.interactableClass = true;
2935
+ }
2936
+ }
2937
+ /**
2938
+ * @deprecated
2939
+ * Backdrop event that triggers when the backdrop element is clicked.
2940
+ */
2912
2941
  onBackdropClicked() {
2913
2942
  this.backdropClicked.emit();
2914
2943
  }
2915
2944
  }
2916
2945
  /** @nocollapse */ DaffBackdropComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: DaffBackdropComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
2917
- /** @nocollapse */ DaffBackdropComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.0", type: DaffBackdropComponent, selector: "daff-backdrop", inputs: { transparent: "transparent", fullscreen: "fullscreen" }, outputs: { backdropClicked: "backdropClicked" }, host: { listeners: { "click": "onBackdropClicked()" }, properties: { "@fadeBackdrop": "this.onBackdropClicked" } }, ngImport: i0, template: "<div class=\"daff-backdrop\" [class.daff-backdrop--fullscreen]=\"fullscreen\" [class.daff-backdrop--transparent]=\"transparent\"></div>\n", styles: [":host{cursor:pointer;-webkit-user-select:none;user-select:none;display:block;-webkit-tap-highlight-color:rgba(0,0,0,0)}.daff-backdrop{background:rgba(0,0,0,.3);height:100%;width:100%}.daff-backdrop--transparent{background:none}.daff-backdrop:focus,.daff-backdrop:active,.daff-backdrop:visited{outline:0}.daff-backdrop--fullscreen{position:absolute}\n"], animations: [
2946
+ /** @nocollapse */ DaffBackdropComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.0", type: DaffBackdropComponent, selector: "daff-backdrop", inputs: { transparent: "transparent", interactable: "interactable", fullscreen: "fullscreen" }, outputs: { backdropClicked: "backdropClicked" }, host: { listeners: { "@fadeBackdrop.done": "animationDone($event)", "@fadeBackdrop.start": "animationStart($event)", "click": "onBackdropClicked()" }, properties: { "class.interactable": "this.interactableClass", "@fadeBackdrop": "this.fadeBackdropTrigger" } }, ngImport: i0, template: "<div class=\"daff-backdrop\" [class.daff-backdrop--fullscreen]=\"fullscreen\" [class.daff-backdrop--transparent]=\"transparent\"></div>\n", styles: [":host{display:block;-webkit-tap-highlight-color:rgba(0,0,0,0);visibility:hidden;pointer-events:none}:host.interactable{visibility:visible;pointer-events:all;cursor:pointer;-webkit-user-select:none;user-select:none}.daff-backdrop{background:rgba(0,0,0,.3);height:100%;width:100%}.daff-backdrop--transparent{background:none}.daff-backdrop:focus,.daff-backdrop:active,.daff-backdrop:visited{outline:0}.daff-backdrop--fullscreen{position:absolute}\n"], animations: [
2918
2947
  daffBackdropAnimations.fadeBackdrop,
2919
2948
  ], changeDetection: i0.ChangeDetectionStrategy.OnPush });
2920
2949
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: DaffBackdropComponent, decorators: [{
2921
2950
  type: Component,
2922
2951
  args: [{ selector: 'daff-backdrop', animations: [
2923
2952
  daffBackdropAnimations.fadeBackdrop,
2924
- ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"daff-backdrop\" [class.daff-backdrop--fullscreen]=\"fullscreen\" [class.daff-backdrop--transparent]=\"transparent\"></div>\n", styles: [":host{cursor:pointer;-webkit-user-select:none;user-select:none;display:block;-webkit-tap-highlight-color:rgba(0,0,0,0)}.daff-backdrop{background:rgba(0,0,0,.3);height:100%;width:100%}.daff-backdrop--transparent{background:none}.daff-backdrop:focus,.daff-backdrop:active,.daff-backdrop:visited{outline:0}.daff-backdrop--fullscreen{position:absolute}\n"] }]
2953
+ ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"daff-backdrop\" [class.daff-backdrop--fullscreen]=\"fullscreen\" [class.daff-backdrop--transparent]=\"transparent\"></div>\n", styles: [":host{display:block;-webkit-tap-highlight-color:rgba(0,0,0,0);visibility:hidden;pointer-events:none}:host.interactable{visibility:visible;pointer-events:all;cursor:pointer;-webkit-user-select:none;user-select:none}.daff-backdrop{background:rgba(0,0,0,.3);height:100%;width:100%}.daff-backdrop--transparent{background:none}.daff-backdrop:focus,.daff-backdrop:active,.daff-backdrop:visited{outline:0}.daff-backdrop--fullscreen{position:absolute}\n"] }]
2925
2954
  }], propDecorators: { transparent: [{
2926
2955
  type: Input
2956
+ }], interactable: [{
2957
+ type: Input
2927
2958
  }], fullscreen: [{
2928
2959
  type: Input
2929
2960
  }], backdropClicked: [{
2930
2961
  type: Output
2931
- }], onBackdropClicked: [{
2962
+ }], interactableClass: [{
2963
+ type: HostBinding,
2964
+ args: ['class.interactable']
2965
+ }], fadeBackdropTrigger: [{
2932
2966
  type: HostBinding,
2933
2967
  args: ['@fadeBackdrop']
2934
- }, {
2968
+ }], animationDone: [{
2969
+ type: HostListener,
2970
+ args: ['@fadeBackdrop.done', ['$event']]
2971
+ }], animationStart: [{
2972
+ type: HostListener,
2973
+ args: ['@fadeBackdrop.start', ['$event']]
2974
+ }], onBackdropClicked: [{
2935
2975
  type: HostListener,
2936
2976
  args: ['click']
2937
2977
  }] } });
@@ -4338,8 +4378,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.0", ngImpor
4338
4378
  }]
4339
4379
  }] });
4340
4380
 
4341
- const duration = '350ms';
4342
- const sidebarAnimateRemainTransition = 'cubic-bezier(0.4, 0.0, 0.2, 1)';
4381
+ const duration = '200ms';
4343
4382
  const sidebarAnimateInTransition = 'cubic-bezier(0.0, 0.0, 0.2, 1)';
4344
4383
  const sidebarAnimateOutTransition = 'cubic-bezier(0.4, 0.0, 1, 1)';
4345
4384
  const daffSidebarAnimations = {
@@ -4348,15 +4387,32 @@ const daffSidebarAnimations = {
4348
4387
  // 1. 3d transforms causes text to appear blurry on IE and Edge.
4349
4388
  state('open', style({
4350
4389
  transform: 'none',
4351
- visibility: 'visible',
4352
4390
  })),
4391
+ state('closed', style({
4392
+ transform: 'translateX({{width}})',
4393
+ }), { params: { width: '-240px' } }),
4353
4394
  transition('open => closed', animate(duration + ' ' + sidebarAnimateOutTransition)),
4354
4395
  transition('closed => open', animate(duration + ' ' + sidebarAnimateInTransition)),
4355
4396
  ]),
4356
4397
  transformContent: trigger('transformContent', [
4398
+ // We remove the `transform` here completely, rather than setting it to zero, because:
4399
+ // 1. 3d transforms causes text to appear blurry on IE and Edge.
4357
4400
  state('closed', style({
4358
4401
  transform: 'none',
4359
4402
  })),
4403
+ state('open', style({
4404
+ transform: 'translateX({{shift}})',
4405
+ }), { params: { shift: '-240px' } }),
4406
+ transition('open => closed', animate(duration + ' ' + sidebarAnimateInTransition)),
4407
+ transition('closed => open', animate(duration + ' ' + sidebarAnimateOutTransition)),
4408
+ ]),
4409
+ backdropTrigger: trigger('backdropTrigger', [
4410
+ state('open', style({
4411
+ opacity: 1,
4412
+ })),
4413
+ state('closed', style({
4414
+ opacity: 0,
4415
+ })),
4360
4416
  transition('open => closed', animate(duration + ' ' + sidebarAnimateOutTransition)),
4361
4417
  transition('closed => open', animate(duration + ' ' + sidebarAnimateInTransition)),
4362
4418
  ]),
@@ -4365,11 +4421,12 @@ var DaffSidebarAnimationStates;
4365
4421
  (function (DaffSidebarAnimationStates) {
4366
4422
  DaffSidebarAnimationStates["OPEN"] = "open";
4367
4423
  DaffSidebarAnimationStates["CLOSED"] = "closed";
4424
+ DaffSidebarAnimationStates["NONE"] = "none";
4368
4425
  })(DaffSidebarAnimationStates || (DaffSidebarAnimationStates = {}));
4369
4426
 
4370
4427
  const getAnimationState = (open, enabled = true) => {
4371
4428
  if (!enabled) {
4372
- return 'open';
4429
+ return 'none';
4373
4430
  }
4374
4431
  if (open && enabled) {
4375
4432
  return 'open';
@@ -4379,21 +4436,33 @@ const getAnimationState = (open, enabled = true) => {
4379
4436
  }
4380
4437
  };
4381
4438
 
4439
+ const getSidebarAnimationWidth = (side, width) => side === 'left' ? -1 * width + 'px' : width + 'px';
4440
+
4382
4441
  /**
4383
- * DaffSidebar is heavily based upon the work done by the @angular/material2
4442
+ * DaffSidebarComponent is heavily based upon the work done by the @angular/components
4384
4443
  * team on `mat-drawer` and `mat-sidenav`. `daff-sidebar` is intended to be
4385
- * a simplified version (with a different design) of `mat-drawer` which
4386
- * follows a stricter "dumb" component pattern than `mat-drawer`
4444
+ * a simplified version (with a different design) of `mat-drawer`.
4387
4445
  */
4388
4446
  class DaffSidebarComponent {
4389
4447
  constructor(_elementRef, _ngZone) {
4390
4448
  this._elementRef = _elementRef;
4391
4449
  this._ngZone = _ngZone;
4392
- this.class = true;
4393
4450
  /**
4394
4451
  * Event fired when `ESC` key is pressed when the sidebar has focus
4395
4452
  */
4396
4453
  this.escapePressed = new EventEmitter();
4454
+ /**
4455
+ * What side of the viewport to show the sidebar on.
4456
+ */
4457
+ this.side = 'left';
4458
+ /**
4459
+ * The mode of the sidebar.
4460
+ */
4461
+ this.mode = 'side';
4462
+ /**
4463
+ * Whether or not the sidebar is open.
4464
+ */
4465
+ this.open = false;
4397
4466
  /**
4398
4467
  * Listen to `keydown` events outside the zone so that change detection is not run every
4399
4468
  * time a key is pressed. Instead we re-enter the zone only if the `ESC` key is pressed.
@@ -4406,128 +4475,211 @@ class DaffSidebarComponent {
4406
4475
  }));
4407
4476
  });
4408
4477
  }
4478
+ /**
4479
+ * The CSS classes set.
4480
+ */
4481
+ get classes() {
4482
+ return {
4483
+ 'daff-sidebar': true,
4484
+ [this.side]: true,
4485
+ [this.mode]: true,
4486
+ };
4487
+ }
4488
+ ;
4489
+ /**
4490
+ * The animation state of the sidebar.
4491
+ */
4492
+ get transformSidebar() {
4493
+ return {
4494
+ value: getAnimationState(this.open, this.mode === 'over' || this.mode === 'side-fixed'),
4495
+ params: { width: getSidebarAnimationWidth(this.side, this.width) },
4496
+ };
4497
+ }
4498
+ /**
4499
+ * The width of the sidebar.
4500
+ */
4501
+ get width() {
4502
+ return this._elementRef.nativeElement.offsetWidth;
4503
+ }
4409
4504
  }
4410
4505
  /** @nocollapse */ DaffSidebarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: DaffSidebarComponent, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
4411
- /** @nocollapse */ DaffSidebarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.0", type: DaffSidebarComponent, selector: "daff-sidebar", outputs: { escapePressed: "escapePressed" }, host: { properties: { "class.daff-sidebar": "this.class" } }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: [":host{display:block}.daff-sidebar{display:block;height:100%}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
4506
+ /** @nocollapse */ DaffSidebarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.0", type: DaffSidebarComponent, selector: "daff-sidebar", inputs: { side: "side", mode: "mode", open: "open" }, outputs: { escapePressed: "escapePressed" }, host: { properties: { "class": "this.classes", "@transformSidebar": "this.transformSidebar" } }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: [":host{display:block;width:240px;flex-shrink:0;overflow:auto}:host.side-fixed{position:fixed;top:var(--daff-sidebar-side-fixed-top-shift);bottom:0;z-index:4;height:calc(100dvh - var(--daff-sidebar-side-fixed-top-shift))}:host.side-fixed.left{left:0}:host.side-fixed.right{right:0}:host.over,:host.under{position:absolute;top:0;bottom:0}:host.over.left,:host.under.left{left:0}:host.over.right,:host.under.right{right:0}:host.over{z-index:5}:host.under{z-index:2}:host-context(daff-sidebar-viewport daff-sidebar-viewport >).side-fixed{position:sticky}\n"], animations: [
4507
+ daffSidebarAnimations.transformSidebar,
4508
+ ], changeDetection: i0.ChangeDetectionStrategy.OnPush });
4412
4509
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: DaffSidebarComponent, decorators: [{
4413
4510
  type: Component,
4414
- args: [{ selector: 'daff-sidebar', template: '<ng-content></ng-content>', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block}.daff-sidebar{display:block;height:100%}\n"] }]
4415
- }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.NgZone }]; }, propDecorators: { class: [{
4511
+ args: [{ selector: 'daff-sidebar', template: '<ng-content></ng-content>', changeDetection: ChangeDetectionStrategy.OnPush, animations: [
4512
+ daffSidebarAnimations.transformSidebar,
4513
+ ], styles: [":host{display:block;width:240px;flex-shrink:0;overflow:auto}:host.side-fixed{position:fixed;top:var(--daff-sidebar-side-fixed-top-shift);bottom:0;z-index:4;height:calc(100dvh - var(--daff-sidebar-side-fixed-top-shift))}:host.side-fixed.left{left:0}:host.side-fixed.right{right:0}:host.over,:host.under{position:absolute;top:0;bottom:0}:host.over.left,:host.under.left{left:0}:host.over.right,:host.under.right{right:0}:host.over{z-index:5}:host.under{z-index:2}:host-context(daff-sidebar-viewport daff-sidebar-viewport >).side-fixed{position:sticky}\n"] }]
4514
+ }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.NgZone }]; }, propDecorators: { classes: [{
4416
4515
  type: HostBinding,
4417
- args: ['class.daff-sidebar']
4516
+ args: ['class']
4517
+ }], transformSidebar: [{
4518
+ type: HostBinding,
4519
+ args: ['@transformSidebar']
4418
4520
  }], escapePressed: [{
4419
4521
  type: Output
4522
+ }], side: [{
4523
+ type: Input
4524
+ }], mode: [{
4525
+ type: Input
4526
+ }], open: [{
4527
+ type: Input
4420
4528
  }] } });
4421
4529
 
4530
+ /**
4531
+ * Determines, given a list of sidebars, whether or not the backdrop is interactable (typically clickable).
4532
+ */
4533
+ const sidebarViewportBackdropInteractable = (sidebars) => sidebars.reduce((acc, sidebar) => ((sidebar.mode === 'over' || sidebar.mode === 'under') && sidebar.open) || acc, false);
4534
+
4535
+ /**
4536
+ * Given a list of sidebars, compute the associated content shift.
4537
+ */
4538
+ const sidebarViewportContentPadding = (sidebars, side) => sidebars.reduce((acc, sidebar) => {
4539
+ if (!(sidebar.mode === "side-fixed" /* SideFixed */ && sidebar.open)) {
4540
+ return acc;
4541
+ }
4542
+ if (sidebar.side === side) {
4543
+ return sidebar.width;
4544
+ }
4545
+ else {
4546
+ // This component is "stateless", its possible to have two open "under" sidebars.
4547
+ // As such, we defer to "left" being open by default.
4548
+ return acc;
4549
+ }
4550
+ }, 0);
4551
+
4552
+ const isViewportContentShifted = (mode, open) => (mode === 'under' && open);
4553
+ /**
4554
+ * Given a list of sidebars, compute the associated content shift.
4555
+ */
4556
+ const sidebarViewportContentShift = (sidebars) => sidebars.reduce((acc, sidebar) => {
4557
+ if (!isViewportContentShifted(sidebar.mode, sidebar.open)) {
4558
+ return acc;
4559
+ }
4560
+ if (sidebar.side === 'left') {
4561
+ return sidebar.width;
4562
+ }
4563
+ else if (sidebar.side === 'right' && acc === 0) {
4564
+ return -1 * sidebar.width;
4565
+ }
4566
+ else {
4567
+ // This component is "stateless", its possible to have two open "under" sidebars.
4568
+ // As such, we defer to "left" being open by default.
4569
+ return acc;
4570
+ }
4571
+ }, 0);
4572
+
4573
+ /**
4574
+ * The DaffSidebarViewport is the "holder" of sidebars throughout an entire application.
4575
+ * It's generally only used once, like
4576
+ *
4577
+ * ```html
4578
+ * <daff-sidebar-viewport>
4579
+ * <daff-sidebar></daff-sidebar>
4580
+ * <p>Some Content</p>
4581
+ * </daff-sidebar-viewport>
4582
+ * ```
4583
+ *
4584
+ * Importantly, its possible for there to be multiple sidebars of many modes
4585
+ * at the same time. @see {@link DaffSidebarMode }
4586
+ *
4587
+ * Since this is a functional component, it's possible to have multiple "open" sidebars
4588
+ * within at the same time. As a result, this component attempts to
4589
+ * gracefully handle these situations. However, importantly, this sidebar
4590
+ * has a constraint, there's only allowed to be one sidebar,
4591
+ * of each mode, on each side, at any given time. If this is violated,
4592
+ * this component will throw an exception.
4593
+ */
4422
4594
  class DaffSidebarViewportComponent {
4423
- constructor(ref) {
4424
- this.ref = ref;
4595
+ constructor(cdRef) {
4596
+ this.cdRef = cdRef;
4425
4597
  /**
4426
- * Internal tracking variable for the state of sidebar viewport.
4427
- *
4428
- * @docs-private
4598
+ * The number of pixels that the main content of the page should be shifted to
4599
+ * right when there are child sidebars.
4429
4600
  */
4430
- this._opened = false;
4601
+ this._shift = '0px';
4431
4602
  /**
4432
- * @docs-private
4603
+ * The left padding on the content when left side-fixed sidebars are open.
4433
4604
  */
4434
- this._mode = 'side';
4605
+ this._contentPadLeft = 0;
4435
4606
  /**
4436
- * Input state for whether or not the backdrop is
4437
- * "visible" to the human eye
4607
+ * The right padding on the content when right side-fixed sidebars are open.
4438
4608
  */
4439
- // eslint-disable-next-line @typescript-eslint/no-inferrable-types
4440
- this.backdropIsVisible = true;
4609
+ this._contentPadRight = 0;
4610
+ /**
4611
+ * Whether or not the backdrop is interactable
4612
+ */
4613
+ this._backdropInteractable = false;
4614
+ /**
4615
+ * The animation state
4616
+ */
4617
+ this._animationState = { value: 'closed', params: { shift: '0px' } };
4441
4618
  /**
4442
4619
  * Event fired when the backdrop is clicked
4443
4620
  * This is often used to close the sidebar
4444
4621
  */
4445
4622
  this.backdropClicked = new EventEmitter();
4446
4623
  }
4447
- /**
4448
- * The mode to put the sidebar in
4449
- */
4450
- get mode() {
4451
- return this._mode;
4452
- }
4453
- set mode(value) {
4454
- this._mode = value;
4455
- this._animationState = getAnimationState(this.opened, this.animationsEnabled);
4456
- }
4457
- /**
4458
- * Property for the "opened" state of the sidebar
4459
- */
4460
- get opened() {
4461
- return this._opened;
4462
- }
4463
- set opened(value) {
4464
- this._opened = value;
4465
- this._animationState = getAnimationState(value, this.animationsEnabled);
4466
- }
4467
- /**
4468
- * @docs-private
4469
- */
4470
- get animationsEnabled() {
4471
- return (this.mode === 'over' || this.mode === 'push') ? true : false;
4472
- }
4473
- /**
4474
- * @docs-private
4475
- */
4476
- ngOnInit() {
4477
- this._animationState = getAnimationState(this.opened, this.animationsEnabled);
4624
+ ngAfterContentChecked() {
4625
+ const nextShift = sidebarViewportContentShift(this.sidebars) + 'px';
4626
+ if (this._shift !== nextShift) {
4627
+ this._shift = nextShift;
4628
+ this.updateAnimationState();
4629
+ this.cdRef.markForCheck();
4630
+ }
4631
+ const nextBackdropInteractable = sidebarViewportBackdropInteractable(this.sidebars);
4632
+ if (this._backdropInteractable !== nextBackdropInteractable) {
4633
+ this._backdropInteractable = nextBackdropInteractable;
4634
+ this.updateAnimationState();
4635
+ this.cdRef.markForCheck();
4636
+ }
4637
+ ;
4638
+ const nextLeftPadding = sidebarViewportContentPadding(this.sidebars, 'left');
4639
+ if (this._contentPadLeft !== nextLeftPadding) {
4640
+ this._contentPadLeft = nextLeftPadding;
4641
+ this.updateAnimationState();
4642
+ this.cdRef.markForCheck();
4643
+ }
4644
+ const nextRightPadding = sidebarViewportContentPadding(this.sidebars, 'right');
4645
+ if (this._contentPadRight !== nextRightPadding) {
4646
+ this._contentPadRight = nextRightPadding;
4647
+ this.updateAnimationState();
4648
+ this.cdRef.markForCheck();
4649
+ }
4478
4650
  }
4479
4651
  /**
4480
4652
  * @docs-private
4653
+ *
4654
+ * Updates the animation state of the viewport depending upon the state
4655
+ * of all sidebars within the viewport.
4481
4656
  */
4482
- ngAfterViewInit() {
4483
- if (this.sidebar) {
4484
- this.sidebar.escapePressed.subscribe(() => {
4485
- this.onEscape();
4486
- });
4487
- }
4657
+ updateAnimationState() {
4658
+ this._animationState = {
4659
+ value: getAnimationState(this.sidebars.reduce((acc, sidebar) => acc || isViewportContentShifted(sidebar.mode, sidebar.open), false)),
4660
+ params: { shift: this._shift },
4661
+ };
4488
4662
  }
4489
4663
  /**
4490
4664
  * @docs-private
4665
+ * The called when the backdrop of the viewport is clicked upon.
4491
4666
  */
4492
4667
  _backdropClicked() {
4493
4668
  this.backdropClicked.emit();
4494
4669
  }
4495
- /**
4496
- * @docs-private
4497
- */
4498
- get hasBackdrop() {
4499
- return (this.mode === 'over' || this.mode === 'push');
4500
- }
4501
- /**
4502
- * @docs-private
4503
- */
4504
- onEscape() {
4505
- if (this.hasBackdrop) {
4506
- this.opened = false;
4507
- this.ref.markForCheck();
4508
- }
4509
- }
4510
4670
  }
4511
4671
  /** @nocollapse */ DaffSidebarViewportComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: DaffSidebarViewportComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
4512
- /** @nocollapse */ DaffSidebarViewportComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.0", type: DaffSidebarViewportComponent, selector: "daff-sidebar-viewport", inputs: { mode: "mode", backdropIsVisible: "backdropIsVisible", opened: "opened" }, outputs: { backdropClicked: "backdropClicked" }, queries: [{ propertyName: "sidebar", first: true, predicate: DaffSidebarComponent, descendants: true }], ngImport: i0, template: "<div class=\"daff-sidebar-viewport {{ mode }}\">\n <div class=\"daff-sidebar-viewport__sidebar\" [@transformSidebar]=\"_animationState\" [cdkTrapFocus]=\"opened && (mode === 'over' || mode === 'push')\">\n <ng-content select=\"daff-sidebar\" (escapePressed)=\"onEscape($event)\"></ng-content>\n </div>\n\n <daff-backdrop \n class=\"daff-sidebar-viewport__backdrop\" \n *ngIf=\"hasBackdrop && _opened\"\n [transparent]=\"!backdropIsVisible\" \n (backdropClicked)=\"_backdropClicked()\"></daff-backdrop>\n\n <div class=\"daff-sidebar-viewport__content\" [@transformContent]=\"_animationState\">\n <ng-content></ng-content>\n </div>\n</div>", styles: [".daff-sidebar-viewport{display:flex;min-height:100%;position:relative;width:100%;z-index:1}.daff-sidebar-viewport__content{flex:0 1 auto;width:100%;will-change:transform;z-index:2}.daff-sidebar-viewport__sidebar{flex-shrink:0;width:250px;will-change:transform,visibility;z-index:4}.daff-sidebar-viewport__backdrop{cursor:pointer;height:100%;position:absolute;width:100%;z-index:3}.daff-sidebar-viewport.push>.daff-sidebar-viewport__sidebar{bottom:0;height:100%;left:0;position:absolute;top:0;transform:translate(-250px);visibility:hidden}.daff-sidebar-viewport.push>.daff-sidebar-viewport__content{transform:translate(250px)}.daff-sidebar-viewport.over>.daff-sidebar-viewport__sidebar{bottom:0;height:100%;left:0;position:absolute;top:0;transform:translate(-250px);visibility:hidden}\n"], components: [{ type: DaffBackdropComponent, selector: "daff-backdrop", inputs: ["transparent", "fullscreen"], outputs: ["backdropClicked"] }], directives: [{ type: i1$4.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], animations: [
4513
- daffSidebarAnimations.transformSidebar,
4672
+ /** @nocollapse */ DaffSidebarViewportComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.0", type: DaffSidebarViewportComponent, selector: "daff-sidebar-viewport", outputs: { backdropClicked: "backdropClicked" }, queries: [{ propertyName: "sidebars", predicate: DaffSidebarComponent }], ngImport: i0, template: "<ng-content select=\"daff-sidebar:not([side=right])\"></ng-content>\n\n<daff-backdrop\n [@transformContent]=\"_animationState\"\n class=\"daff-sidebar-viewport__backdrop\"\n [interactable]=\"_backdropInteractable\"\n (backdropClicked)=\"_backdropClicked()\"></daff-backdrop>\n\n<div class=\"daff-sidebar-viewport__content\" [@transformContent]=\"_animationState\">\n <ng-content select=\"[daff-sidebar-viewport-nav]\"></ng-content>\n <div class=\"daff-sidebar-viewport__inner\" [style.padding-left.px]=\"_contentPadLeft\" [style.padding-right.px]=\"_contentPadRight\">\n <ng-content></ng-content>\n </div>\n</div>\n\n<ng-content select=\"daff-sidebar[side=right]\"></ng-content>", styles: [":host{overflow:hidden;display:flex;min-height:100%;position:relative;width:100%;z-index:1;height:100vh;height:100dvh}.daff-sidebar-viewport__content{flex:0 1 auto;width:100%;will-change:transform;z-index:3;overflow-y:auto;height:100%}.daff-sidebar-viewport__sidebar{flex-shrink:0}.daff-sidebar-viewport__backdrop{height:100%;position:absolute;width:100%;z-index:4}:host-context(daff-sidebar-viewport daff-sidebar-viewport) .daff-sidebar-viewport__inner{padding-left:0!important;padding-right:0!important}\n"], components: [{ type: DaffBackdropComponent, selector: "daff-backdrop", inputs: ["transparent", "interactable", "fullscreen"], outputs: ["backdropClicked"] }], animations: [
4514
4673
  daffSidebarAnimations.transformContent,
4515
4674
  ], changeDetection: i0.ChangeDetectionStrategy.OnPush });
4516
4675
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: DaffSidebarViewportComponent, decorators: [{
4517
4676
  type: Component,
4518
4677
  args: [{ selector: 'daff-sidebar-viewport', changeDetection: ChangeDetectionStrategy.OnPush, animations: [
4519
- daffSidebarAnimations.transformSidebar,
4520
4678
  daffSidebarAnimations.transformContent,
4521
- ], template: "<div class=\"daff-sidebar-viewport {{ mode }}\">\n <div class=\"daff-sidebar-viewport__sidebar\" [@transformSidebar]=\"_animationState\" [cdkTrapFocus]=\"opened && (mode === 'over' || mode === 'push')\">\n <ng-content select=\"daff-sidebar\" (escapePressed)=\"onEscape($event)\"></ng-content>\n </div>\n\n <daff-backdrop \n class=\"daff-sidebar-viewport__backdrop\" \n *ngIf=\"hasBackdrop && _opened\"\n [transparent]=\"!backdropIsVisible\" \n (backdropClicked)=\"_backdropClicked()\"></daff-backdrop>\n\n <div class=\"daff-sidebar-viewport__content\" [@transformContent]=\"_animationState\">\n <ng-content></ng-content>\n </div>\n</div>", styles: [".daff-sidebar-viewport{display:flex;min-height:100%;position:relative;width:100%;z-index:1}.daff-sidebar-viewport__content{flex:0 1 auto;width:100%;will-change:transform;z-index:2}.daff-sidebar-viewport__sidebar{flex-shrink:0;width:250px;will-change:transform,visibility;z-index:4}.daff-sidebar-viewport__backdrop{cursor:pointer;height:100%;position:absolute;width:100%;z-index:3}.daff-sidebar-viewport.push>.daff-sidebar-viewport__sidebar{bottom:0;height:100%;left:0;position:absolute;top:0;transform:translate(-250px);visibility:hidden}.daff-sidebar-viewport.push>.daff-sidebar-viewport__content{transform:translate(250px)}.daff-sidebar-viewport.over>.daff-sidebar-viewport__sidebar{bottom:0;height:100%;left:0;position:absolute;top:0;transform:translate(-250px);visibility:hidden}\n"] }]
4522
- }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { sidebar: [{
4523
- type: ContentChild,
4524
- args: [DaffSidebarComponent]
4525
- }], mode: [{
4526
- type: Input
4527
- }], backdropIsVisible: [{
4528
- type: Input
4529
- }], opened: [{
4530
- type: Input
4679
+ ], template: "<ng-content select=\"daff-sidebar:not([side=right])\"></ng-content>\n\n<daff-backdrop\n [@transformContent]=\"_animationState\"\n class=\"daff-sidebar-viewport__backdrop\"\n [interactable]=\"_backdropInteractable\"\n (backdropClicked)=\"_backdropClicked()\"></daff-backdrop>\n\n<div class=\"daff-sidebar-viewport__content\" [@transformContent]=\"_animationState\">\n <ng-content select=\"[daff-sidebar-viewport-nav]\"></ng-content>\n <div class=\"daff-sidebar-viewport__inner\" [style.padding-left.px]=\"_contentPadLeft\" [style.padding-right.px]=\"_contentPadRight\">\n <ng-content></ng-content>\n </div>\n</div>\n\n<ng-content select=\"daff-sidebar[side=right]\"></ng-content>", styles: [":host{overflow:hidden;display:flex;min-height:100%;position:relative;width:100%;z-index:1;height:100vh;height:100dvh}.daff-sidebar-viewport__content{flex:0 1 auto;width:100%;will-change:transform;z-index:3;overflow-y:auto;height:100%}.daff-sidebar-viewport__sidebar{flex-shrink:0}.daff-sidebar-viewport__backdrop{height:100%;position:absolute;width:100%;z-index:4}:host-context(daff-sidebar-viewport daff-sidebar-viewport) .daff-sidebar-viewport__inner{padding-left:0!important;padding-right:0!important}\n"] }]
4680
+ }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { sidebars: [{
4681
+ type: ContentChildren,
4682
+ args: [DaffSidebarComponent, { descendants: false }]
4531
4683
  }], backdropClicked: [{
4532
4684
  type: Output
4533
4685
  }] } });