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