fix(sidepanel): can' t change backdropClass (#UIM-732) (#704)

Author: lskramarov

packages/mosaic/sidepanel/sidepanel-config.ts

@@ -23,6 +23,8 @@ export class McSidepanelConfig<D = any> {
     /** Whether the sidepanel has a backdrop. */
     hasBackdrop?: boolean = true;
 
+    backdropClass?: string;
+
     /** When we open multiple sidepanels, backdrop appears only once, except cases then this flag is true. */
     requiredBackdrop?: boolean = false;
 

packages/mosaic/sidepanel/sidepanel.service.ts

@@ -47,8 +47,10 @@ export class McSidepanelService implements OnDestroy {
         this.closeSidepanels(this.openedSidepanelsAtThisLevel);
     }
 
-    open<T, D = any>(componentOrTemplateRef: ComponentType<T> | TemplateRef<T>,
-                     config?: McSidepanelConfig<D>): McSidepanelRef<T> {
+    open<T, D = any>(
+        componentOrTemplateRef: ComponentType<T> | TemplateRef<T>,
+        config?: McSidepanelConfig<D>
+    ): McSidepanelRef<T> {
         const fullConfig = {
             ...(this.defaultOptions || new McSidepanelConfig()),
             ...config
@@ -170,6 +172,10 @@ export class McSidepanelService implements OnDestroy {
     }
 
     private getBackdropClass(config: McSidepanelConfig): string {
+        if (config.hasBackdrop && config.backdropClass) {
+            return config.backdropClass;
+        }
+
         const hasOpenedSidepanelWithBackdrop =
             this.openedSidepanels.some((sidepanelRef) => sidepanelRef.config.hasBackdrop!);
 

packages/mosaic/sidepanel/sidepanel.spec.ts

@@ -252,6 +252,12 @@ describe('McSidepanelService', () => {
         expect(overlayContainerElement.querySelector('.custom-overlay')).not.toBeNull();
     });
 
+    it('should be able to set custom backdrop class', () => {
+        sidepanelService.open(SimpleSidepanelExample, { backdropClass: 'custom-backdrop' });
+
+        expect(overlayContainerElement.querySelector('.custom-backdrop')).not.toBeNull();
+    });
+
     it('should add indent when open more than one sidepanel with same position', () => {
         sidepanelService.open(SimpleSidepanelExample);