diff --git a/libs/design/sidebar/src/public_api.ts b/libs/design/sidebar/src/public_api.ts
index 1d62e5c7cf..860cb195e5 100644
--- a/libs/design/sidebar/src/public_api.ts
+++ b/libs/design/sidebar/src/public_api.ts
@@ -5,6 +5,7 @@ export * from './sidebar-header/sidebar-header.component';
export * from './sidebar-footer/sidebar-footer.component';
export * from './sidebar-header/sidebar-header-title/sidebar-header-title.directive';
export * from './sidebar-header/sidebar-header-action/sidebar-header-action.directive';
+export * from './sidebar-viewport-backdrop/sidebar-viewport-backdrop.component';
export {
DaffSidebarMode,
DaffSidebarModeEnum,
diff --git a/libs/design/sidebar/src/sidebar-viewport-backdrop/animation/backdrop-animation-state.ts b/libs/design/sidebar/src/sidebar-viewport-backdrop/animation/backdrop-animation-state.ts
new file mode 100644
index 0000000000..9a1178f0d6
--- /dev/null
+++ b/libs/design/sidebar/src/sidebar-viewport-backdrop/animation/backdrop-animation-state.ts
@@ -0,0 +1,2 @@
+export type DaffSidebarViewportBackdropAnimationState = 'interactable' | 'non-interactable';
+export const getAnimationState = (interactable: boolean): DaffSidebarViewportBackdropAnimationState=> interactable ? 'interactable' : 'non-interactable';
diff --git a/libs/design/src/molecules/backdrop/animation/backdrop-animation.ts b/libs/design/sidebar/src/sidebar-viewport-backdrop/animation/backdrop-animation.ts
similarity index 94%
rename from libs/design/src/molecules/backdrop/animation/backdrop-animation.ts
rename to libs/design/sidebar/src/sidebar-viewport-backdrop/animation/backdrop-animation.ts
index 9635697d5d..efd55f0bed 100644
--- a/libs/design/src/molecules/backdrop/animation/backdrop-animation.ts
+++ b/libs/design/sidebar/src/sidebar-viewport-backdrop/animation/backdrop-animation.ts
@@ -11,7 +11,7 @@ const animationDuration = '350ms';
const backdropTransitionOut = 'cubic-bezier(0.4, 0.0, 1, 1)';
const backdropTransitionIn = 'cubic-bezier(0.0, 0.0, 0.2, 1)';
-export const daffBackdropAnimations: {
+export const daffSidebarViewportBackdropAnimations: {
readonly fadeBackdrop: AnimationTriggerMetadata;
} = {
fadeBackdrop: trigger('fadeBackdrop', [
diff --git a/libs/design/src/molecules/backdrop/backdrop/backdrop.component.scss b/libs/design/sidebar/src/sidebar-viewport-backdrop/sidebar-viewport-backdrop.component.scss
similarity index 68%
rename from libs/design/src/molecules/backdrop/backdrop/backdrop.component.scss
rename to libs/design/sidebar/src/sidebar-viewport-backdrop/sidebar-viewport-backdrop.component.scss
index 028200e904..a7e29b6594 100644
--- a/libs/design/src/molecules/backdrop/backdrop/backdrop.component.scss
+++ b/libs/design/sidebar/src/sidebar-viewport-backdrop/sidebar-viewport-backdrop.component.scss
@@ -1,28 +1,27 @@
-@use 'interactions';
+@use '../../../scss/interactions';
+@use '../helper/variables';
$bg-color: rgba(0, 0, 0, 0.3);
$highlight-color: rgba(0, 0, 0, 0);
:host {
display: block;
+ background: $bg-color;
-webkit-tap-highlight-color: $highlight-color;
+ position: absolute;
+ pointer-events: auto;
+ height: 100%;
+ width: 100%;
visibility: hidden;
- pointer-events: none;
+ z-index: variables.$daff-sidebar-backdrop-z-index;
&.interactable {
visibility: visible;
pointer-events: all;
@include interactions.clickable;
}
-}
-.daff-backdrop {
- background: $bg-color;
- height: 100%;
- width: 100%;
-
-
- &--transparent {
+ &.transparent {
background: none;
}
@@ -32,9 +31,7 @@ $highlight-color: rgba(0, 0, 0, 0);
outline: 0;
}
-
-
- &--fullscreen {
+ &.fullscreen {
position: absolute;
}
}
diff --git a/libs/design/sidebar/src/sidebar-viewport-backdrop/sidebar-viewport-backdrop.component.spec.ts b/libs/design/sidebar/src/sidebar-viewport-backdrop/sidebar-viewport-backdrop.component.spec.ts
new file mode 100644
index 0000000000..5b0dc50e0f
--- /dev/null
+++ b/libs/design/sidebar/src/sidebar-viewport-backdrop/sidebar-viewport-backdrop.component.spec.ts
@@ -0,0 +1,144 @@
+import {
+ Component,
+ DebugElement,
+} from '@angular/core';
+import {
+ waitForAsync,
+ ComponentFixture,
+ TestBed,
+} from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+
+import { DaffSidebarViewportBackdropComponent } from './sidebar-viewport-backdrop.component';
+
+@Component({ template: `
+
+` })
+class WrapperComponent {
+ fullscreen = false;
+ showValue = true;
+ transparent = true;
+ backdropFunction = () => {};
+}
+
+describe('@daffodil/design/sidebar | DaffSidebarViewportBackdropComponent | Usage', () => {
+ let wrapper: WrapperComponent;
+ let fixture: ComponentFixture;
+ let component: DaffSidebarViewportBackdropComponent;
+ let de: DebugElement;
+
+ beforeEach(waitForAsync(() => {
+ TestBed.configureTestingModule({
+ imports: [
+ NoopAnimationsModule,
+ ],
+ declarations: [
+ WrapperComponent,
+ DaffSidebarViewportBackdropComponent,
+ ],
+ })
+ .compileComponents();
+ }));
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(WrapperComponent);
+ wrapper = fixture.componentInstance;
+ fixture.detectChanges();
+
+ de = fixture.debugElement.query(By.css('daff-sidebar-viewport-backdrop'));
+ component = de.componentInstance;
+ });
+
+ it('should create', () => {
+ expect(wrapper).toBeTruthy();
+ });
+
+ describe('the transparent property', () => {
+ describe('when trasparent="false"', () => {
+ it('should not add the class `transparent` to the host element', () => {
+ wrapper.transparent = false;
+ fixture.detectChanges();
+
+ expect(de.nativeElement.classList).not.toContain('transparent');
+ });
+ });
+
+ describe('when transparent="true"', () => {
+ it('should add the class `transparent` to the host element', () => {
+ wrapper.transparent = true;
+ fixture.detectChanges();
+
+ expect(de.nativeElement.classList).toContain('transparent');
+ });
+ });
+ });
+
+ describe('the fullscreen property', () => {
+ describe('when fullscreen="false"', () => {
+ it('should not add the class `fullscreen` to the host element', () => {
+ wrapper.fullscreen = false;
+ fixture.detectChanges();
+
+ expect(de.nativeElement.classList).not.toContain('fullscreen');
+ });
+ });
+
+ describe('when fullscreen="true"', () => {
+ it('should add the class `fullscreen` to the host element', () => {
+ wrapper.fullscreen = true;
+ fixture.detectChanges();
+ expect(de.nativeElement.classList).toContain('fullscreen');
+ });
+ });
+ });
+
+ describe('when the backdrop host element is clicked', () => {
+ it('should emit backdropClicked', () => {
+ spyOn(component.backdropClicked, 'emit');
+
+ de.nativeElement.click();
+
+ expect(component.backdropClicked.emit).toHaveBeenCalledWith();
+ });
+ });
+});
+
+
+describe('@daffodil/design/sidebar | DaffSidebarViewportBackdropComponent | Defaults', () => {
+ let fixture: ComponentFixture;
+ let component: DaffSidebarViewportBackdropComponent;
+
+ beforeEach(waitForAsync(() => {
+ TestBed.configureTestingModule({
+ imports: [
+ NoopAnimationsModule,
+ ],
+ declarations: [
+ DaffSidebarViewportBackdropComponent,
+ ],
+ })
+ .compileComponents();
+ }));
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(DaffSidebarViewportBackdropComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+
+ it('should set transparent to `false` by default', () => {
+ expect(component.transparent).toBe(false);
+ });
+
+ it('should set fullscreen to `false` by default', () => {
+ expect(component.fullscreen).toBe(false);
+ });
+});
diff --git a/libs/design/src/molecules/backdrop/backdrop/backdrop.component.ts b/libs/design/sidebar/src/sidebar-viewport-backdrop/sidebar-viewport-backdrop.component.ts
similarity index 73%
rename from libs/design/src/molecules/backdrop/backdrop/backdrop.component.ts
rename to libs/design/sidebar/src/sidebar-viewport-backdrop/sidebar-viewport-backdrop.component.ts
index 823f453f8a..ea72126f32 100644
--- a/libs/design/src/molecules/backdrop/backdrop/backdrop.component.ts
+++ b/libs/design/sidebar/src/sidebar-viewport-backdrop/sidebar-viewport-backdrop.component.ts
@@ -7,29 +7,29 @@ import {
ChangeDetectionStrategy,
HostListener,
HostBinding,
- ElementRef,
OnInit,
} from '@angular/core';
-import { daffBackdropAnimations } from '../animation/backdrop-animation';
-import { getAnimationState } from '../animation/backdrop-animation-state';
+import { daffSidebarViewportBackdropAnimations } from './animation/backdrop-animation';
+import { getAnimationState } from './animation/backdrop-animation-state';
@Component({
- selector: 'daff-backdrop',
- templateUrl: './backdrop.component.html',
- styleUrls: ['./backdrop.component.scss'],
+ selector: 'daff-sidebar-viewport-backdrop',
+ template: '',
+ styleUrls: ['./sidebar-viewport-backdrop.component.scss'],
animations: [
- daffBackdropAnimations.fadeBackdrop,
+ daffSidebarViewportBackdropAnimations.fadeBackdrop,
],
changeDetection: ChangeDetectionStrategy.OnPush,
})
-export class DaffBackdropComponent implements OnInit {
+export class DaffSidebarViewportBackdropComponent implements OnInit {
+
+ @HostBinding('class.interactable') interactableClass = true;
/**
* Determines whether or not the backdrop is transparent.
*/
- // eslint-disable-next-line @typescript-eslint/no-inferrable-types
- @Input() transparent: boolean = false;
+ @Input() @HostBinding('class.transparent') transparent = false;
/**
* Determines whether or not the backdrop is interactable.
@@ -40,16 +40,13 @@ export class DaffBackdropComponent implements OnInit {
* Boolean property that determines whether or not the
* backdrop should fill up its containing window.
*/
- // eslint-disable-next-line @typescript-eslint/no-inferrable-types
- @Input() fullscreen: boolean = false;
+ @Input() @HostBinding('class.fullscreen') fullscreen = false;
/**
* Output event triggered when the backdrop is clicked.
*/
@Output() backdropClicked: EventEmitter = new EventEmitter();
- @HostBinding('class.interactable') interactableClass = true;
-
ngOnInit(): void {
this.interactableClass = this.interactable;
}
diff --git a/libs/design/sidebar/src/sidebar-viewport/sidebar-viewport.component.html b/libs/design/sidebar/src/sidebar-viewport/sidebar-viewport.component.html
index a288faf3f2..7322496bd9 100644
--- a/libs/design/sidebar/src/sidebar-viewport/sidebar-viewport.component.html
+++ b/libs/design/sidebar/src/sidebar-viewport/sidebar-viewport.component.html
@@ -1,11 +1,10 @@
-
+