add hide backdrop input (#40)

* add hide backdrop input

* bump

apps/demo/src/app/demo/demo.component.html

@@ -25,6 +25,7 @@
     [attr.collapsed]="inputs.top.collapsed"
     [attr.resize-disabled]="inputs.top.resizeDisabled"
     [attr.animation-disabled]="inputs.top.animationDisabled"
+    [attr.hide-backdrop]="inputs.top.hideBackdrop"
     (resized)="onResized('top', $event)"
     (backdropClicked)="onBackdropClicked('top')"
   >
@@ -41,6 +42,7 @@
     [attr.collapsed]="inputs.right.collapsed"
     [attr.resize-disabled]="inputs.right.resizeDisabled"
     [attr.animation-disabled]="inputs.right.animationDisabled"
+    [attr.hide-backdrop]="inputs.right.hideBackdrop"
     (resized)="onResized('right', $event)"
     (backdropClicked)="onBackdropClicked('right')"
   >
@@ -57,6 +59,7 @@
     [attr.collapsed]="inputs.bottom.collapsed"
     [attr.resize-disabled]="inputs.bottom.resizeDisabled"
     [attr.animation-disabled]="inputs.bottom.animationDisabled"
+    [attr.hide-backdrop]="inputs.bottom.hideBackdrop"
     (resized)="onResized('bottom', $event)"
     (backdropClicked)="onBackdropClicked('bottom')"
   >
@@ -73,6 +76,7 @@
     [attr.collapsed]="inputs.left.collapsed"
     [attr.resize-disabled]="inputs.left.resizeDisabled"
     [attr.animation-disabled]="inputs.left.animationDisabled"
+    [attr.hide-backdrop]="inputs.left.hideBackdrop"
     (resized)="onResized('left', $event)"
     (backdropClicked)="onBackdropClicked('left')"
   >

apps/demo/src/lib/components/editor/editor-form.component.html

@@ -189,4 +189,7 @@
   <mat-checkbox [formControl]="formControls.animationDisabled">
     Animation disabled
   </mat-checkbox>
+  <mat-checkbox [formControl]="formControls.hideBackdrop">
+    Hide backdrop
+  </mat-checkbox>
 </ng-template>

apps/demo/src/lib/components/editor/editor-form.component.ts

@@ -76,6 +76,11 @@ export class EditorFormComponent {
         this.panelFormControls[slot].animationDisabled
       );
 
+      connectFormValue(
+        this.layoutRx[slot].hideBackdrop,
+        this.panelFormControls[slot].hideBackdrop
+      );
+
       connectFormValue(
         this.layoutRx.remove[slot],
         this.panelFormControls[slot].remove
@@ -159,6 +164,7 @@ export class EditorFormComponent {
       collapsed: new FormControl(),
       resizeDisabled: new FormControl(),
       animationDisabled: new FormControl(),
+      hideBackdrop: new FormControl(),
     };
   }
 }

libs/angular/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@berg-layout/angular",
-  "version": "5.4.1",
+  "version": "5.5.0",
   "license": "MIT",
   "repository": {
     "url": "https://github.com/blidblid/berg-layout"

libs/angular/src/lib/components/panel/panel.component.html

@@ -7,6 +7,7 @@
   [attr.min-size]="minSize"
   [attr.max-size]="maxSize"
   [attr.animation-disabled]="animationDisabled"
+  [attr.hide-backdrop]="hideBackdrop"
   [attr.event-binding-mode]="eventBindingMode"
   (afterCollapsed)="onAfterCollapsed($event)"
   (afterExpanded)="onAfterExpanded($event)"

libs/angular/src/lib/components/panel/panel.component.ts

@@ -117,6 +117,17 @@ export class BergPanelComponent
   }
   private _animationDisabled = this.getDefaultInput('animationDisabled');
 
+  @Input()
+  get hideBackdrop(): boolean {
+    return this._hideBackdrop;
+  }
+  set hideBackdrop(value: boolean | null) {
+    this._hideBackdrop = coerceBooleanProperty(
+      value ?? this.getDefaultInput('hideBackdrop')
+    );
+  }
+  private _hideBackdrop = this.getDefaultInput('hideBackdrop');
+
   @Input()
   get eventBindingMode() {
     return this._eventBindingMode;

libs/angular/src/lib/components/testing/layout.component.spec.ts

@@ -180,6 +180,7 @@ describe('Angular implementation', () => {
         [absolute]="top.absolute"
         [collapsed]="top.collapsed"
         [resizeDisabled]="top.resizeDisabled"
+        [hideBackdrop]="top.hideBackdrop"
         (backdropClicked)="onBackdropClicked($event)"
         (resized)="onResized($event)"
         (afterCollapsed)="hasAfterCollapsedEmitted = true"
@@ -197,6 +198,7 @@ describe('Angular implementation', () => {
         [absolute]="right.absolute"
         [collapsed]="right.collapsed"
         [resizeDisabled]="right.resizeDisabled"
+        [hideBackdrop]="right.hideBackdrop"
       >
       </berg-panel>
 
@@ -210,6 +212,7 @@ describe('Angular implementation', () => {
         [absolute]="bottom.absolute"
         [collapsed]="bottom.collapsed"
         [resizeDisabled]="bottom.resizeDisabled"
+        [hideBackdrop]="bottom.hideBackdrop"
       >
       </berg-panel>
 
@@ -223,6 +226,7 @@ describe('Angular implementation', () => {
         [absolute]="left.absolute"
         [collapsed]="left.collapsed"
         [resizeDisabled]="left.resizeDisabled"
+        [hideBackdrop]="left.hideBackdrop"
       >
       </berg-panel>
 

libs/core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@berg-layout/core",
-  "version": "5.4.1",
+  "version": "5.5.0",
   "license": "MIT",
   "repository": {
     "url": "https://github.com/blidblid/berg-layout"

libs/core/src/lib/components/panel/panel-config.ts

@@ -19,6 +19,7 @@ export const BERG_PANEL_DEFAULT_INPUTS: RequireAll<BergPanelInputs> = {
   minSize: 50,
   maxSize: null,
   animationDisabled: false,
+  hideBackdrop: false,
 };
 
 export const BERG_PANEL_ATTRIBUTE_BY_INPUT: WebComponentAttributeByInput<BergPanelInputs> =
@@ -32,6 +33,7 @@ export const BERG_PANEL_ATTRIBUTE_BY_INPUT: WebComponentAttributeByInput<BergPan
     minSize: 'min-size',
     maxSize: 'max-size',
     animationDisabled: 'animation-disabled',
+    hideBackdrop: 'hide-backdrop',
   };
 
 export const BERG_PANEL_INPUT_BY_ATTRIBUTE: WebComponentInputByAttribute<BergPanelInputs> =

libs/core/src/lib/components/panel/panel-model.ts

@@ -27,6 +27,9 @@ export interface BergPanelInputs {
   /** Whether panel animations are disabled. */
   animationDisabled: boolean;
 
+  /** Whether the panel backdrop is hidden. */
+  hideBackdrop: boolean;
+
   /**
    * Controls how panel events update panel inputs.
    * With "auto", panel events automatically update panel inputs.

libs/core/src/lib/components/panel/panel.ts

@@ -171,21 +171,20 @@ export class BergPanelElement extends WebComponent<BergPanelInputs> {
         minSize: coerceNumberProperty,
         maxSize: coerceNumberProperty,
         animationDisabled: coerceBooleanProperty,
+        hideBackdrop: coerceBooleanProperty,
         eventBindingMode: (value: string) => validateOutputBindingMode(value),
       },
       {
         absolute: () => {
           this.updateBackdrop();
           this.layout.updateAbsolute(this.values.slot, this.values.absolute);
+          const absoluteZIndex = (BERG_PANEL_BACKDROP_Z_INDEX + 1).toString();
 
           if (this.values.absolute) {
             // the z-index is animated despite not being a transitioned property,
             // update z-index with disabled transitions to avoid flickering
             this.disableTransitions();
-            this.style.setProperty(
-              'z-index',
-              (BERG_PANEL_BACKDROP_Z_INDEX + 1).toString()
-            );
+            this.style.setProperty('z-index', absoluteZIndex);
 
             requestAnimationFrame(() => {
               this.enableTransitions();
@@ -194,11 +193,13 @@ export class BergPanelElement extends WebComponent<BergPanelInputs> {
           } else {
             this.classList.remove(BERG_PANEL_ABSOLUTE_CLASS);
 
-            this.timeouts.push(
-              setTimeout(() => {
-                this.style.removeProperty('z-index');
-              }, BERG_PANEL_BACKDROP_ANIMATION_DURATION)
-            );
+            if (this.style.zIndex === absoluteZIndex) {
+              this.timeouts.push(
+                setTimeout(() => {
+                  this.style.removeProperty('z-index');
+                }, BERG_PANEL_BACKDROP_ANIMATION_DURATION)
+              );
+            }
           }
         },
         collapsed: () => {
@@ -226,6 +227,7 @@ export class BergPanelElement extends WebComponent<BergPanelInputs> {
             this.classList.remove(BERG_PANEL_NO_TRANSITION_CLASS);
           }
         },
+        hideBackdrop: () => this.updateBackdrop(),
         slot: () => {
           this.classList.remove(...Object.values(BERG_PANEL_CLASSES_BY_SLOT));
           this.classList.add(BERG_PANEL_CLASSES_BY_SLOT[this.values.slot]);
@@ -256,6 +258,10 @@ export class BergPanelElement extends WebComponent<BergPanelInputs> {
   }
 
   private showBackdrop(): void {
+    if (this.values.hideBackdrop) {
+      return;
+    }
+
     const backdrop = this.getBackdropElement();
 
     if (!this.layout.shadowRoot || this.layout.shadowRoot.contains(backdrop)) {

libs/react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@berg-layout/react",
-  "version": "5.4.1",
+  "version": "5.5.0",
   "license": "MIT",
   "repository": {
     "url": "https://github.com/blidblid/berg-layout"

libs/react/src/lib/panel/panel.tsx

@@ -22,6 +22,7 @@ export function BergPanel(props: BergPanelProps) {
       min-size={props.minSize}
       max-size={props.maxSize}
       animation-disabled={props.animationDisabled}
+      hide-backdrop={props.hideBackdrop}
       event-binding-mode={props.eventBindingMode}
     >
       {props.children}

libs/testing/src/lib/run-layout-tests.ts

@@ -7,6 +7,8 @@ export const runLayoutTests = (
   render: Render
 ) => {
   describe('berg layout', () => {
+    const panelTransitionDuration = 500;
+
     describe('alignment', () => {
       it('should render top panel above left', async () => {
         await render({
@@ -261,6 +263,8 @@ export const runLayoutTests = (
           },
         });
 
+        await harness.tickDuration(panelTransitionDuration);
+
         const backdrop = harness.getAssertedBackdrop('top');
         const top = harness.assertedTop;
         const right = harness.assertedRight;
@@ -291,8 +295,7 @@ export const runLayoutTests = (
           },
         });
 
-        // there is some flake in this spec where the right panel z-index is not updated in time
-        harness.tickDuration(0);
+        await harness.tickDuration(panelTransitionDuration);
 
         const backdrop = harness.getAssertedBackdrop('right');
         const top = harness.assertedTop;
@@ -324,6 +327,8 @@ export const runLayoutTests = (
           },
         });
 
+        await harness.tickDuration(panelTransitionDuration);
+
         const backdrop = harness.getAssertedBackdrop('bottom');
         const top = harness.assertedTop;
         const right = harness.assertedRight;
@@ -354,6 +359,8 @@ export const runLayoutTests = (
           },
         });
 
+        await harness.tickDuration(panelTransitionDuration);
+
         const backdrop = harness.getAssertedBackdrop('left');
         const top = harness.assertedTop;
         const right = harness.assertedRight;
@@ -653,8 +660,6 @@ export const runLayoutTests = (
     });
 
     describe('with an absolute panel', () => {
-      const panelTransitionDuration = 500;
-
       it('should create a backdrop that covers the layout', async () => {
         await render({
           top: {
@@ -669,6 +674,18 @@ export const runLayoutTests = (
         );
       });
 
+      it('should not create a backdrop that covers the layout if it is set to be hidden', async () => {
+        await render({
+          top: {
+            absolute: true,
+            hideBackdrop: true,
+          },
+        });
+
+        await harness.tickDuration(panelTransitionDuration);
+        expect(harness.getBackdrop('top')).toBeNull();
+      });
+
       it('should position top over content', async () => {
         await render({
           top: {
@@ -886,7 +903,7 @@ export const runLayoutTests = (
         );
       });
 
-      fit('should overflow on the y-axis', async () => {
+      it('should overflow on the y-axis', async () => {
         await render({
           layout: {
             overflow: 'y',