@aquera/nile-elements 0.0.11 → 0.0.12

package/package.json

@@ -3,7 +3,7 @@
   "description": "Webcomponent nile-elements following open-wc recommendations",
   "license": "MIT",
   "author": "nile-elements",
-  "version": "0.0.11",
+  "version": "0.0.12",
   "main": "dist/src/index.js",
   "type": "module",
   "module": "dist/src/index.js",

package/src/nile-dialog/nile-dialog.css.ts

@@ -115,6 +115,9 @@ export const styles = css`
     overflow: auto;
     -webkit-overflow-scrolling: touch;
     border: 1px solid #e5e9eb;
+  }
+
+  .dialog__body-noheader {
     border-radius: 4px 4px 0px 0px;
   }
 

package/src/nile-dialog/nile-dialog.ts

@@ -30,7 +30,6 @@ import NileElement from '../internal/nile-element';
  */
 @customElement('nile-dialog')
 export class NileDialog extends NileElement {
-
   static styles: CSSResultGroup = styles;
 
   private readonly hasSlotController = new HasSlotController(this, 'footer');
@@ -61,6 +60,16 @@ export class NileDialog extends NileElement {
 
   @property({ type: Boolean, reflect: true }) preventOverlayClose = false;
 
+
+  /**
+   *  Added to resolve conflicts between Angular Material's mat-drawer components.
+   */
+  private drawerStyle = `
+      <style id="drawer-style">
+        .mat-drawer.mat-drawer-side { z-index: 1; }
+      </style>
+  `;
+
   connectedCallback() {
     super.connectedCallback();
     this.handleDocumentKeyDown = this.handleDocumentKeyDown.bind(this);
@@ -74,6 +83,7 @@ export class NileDialog extends NileElement {
       this.addOpenListeners();
       this.modal.activate();
       lockBodyScrolling(this);
+      document.head.insertAdjacentHTML('beforeend', this.drawerStyle);
     }
   }
 
@@ -83,19 +93,20 @@ export class NileDialog extends NileElement {
   }
 
   private requestClose(source: 'close-button' | 'keyboard' | 'overlay') {
-
     const nileRequestClose = this.emit('nile-request-close', {
       cancelable: true,
-      detail: { source }
+      detail: { source },
     });
 
-    if(source === 'close-button'){
+    if (source === 'close-button') {
       this.hide();
       return;
     }
 
-    if (nileRequestClose.defaultPrevented || this.preventOverlayClose ) {
-      const animation = getAnimation(this, 'dialog.denyClose', { dir: 'right'});
+    if (nileRequestClose.defaultPrevented || this.preventOverlayClose) {
+      const animation = getAnimation(this, 'dialog.denyClose', {
+        dir: 'right',
+      });
       animateTo(this.panel, animation.keyframes, animation.options);
       return;
     }
@@ -121,12 +132,11 @@ export class NileDialog extends NileElement {
   @watch('open', { waitUntilFirstUpdate: true })
   async handleOpenChange() {
     if (this.open) {
-      // Show
       this.emit('nile-show');
       this.addOpenListeners();
       this.originalTrigger = document.activeElement as HTMLElement;
       this.modal.activate();
-
+      document.head.insertAdjacentHTML('beforeend', this.drawerStyle);
       lockBodyScrolling(this);
 
       // When the dialog is shown, Safari will attempt to set focus on whatever element has autofocus. This can cause
@@ -140,17 +150,24 @@ export class NileDialog extends NileElement {
         autoFocusTarget.removeAttribute('autofocus');
       }
 
-      await Promise.all([stopAnimations(this.dialog), stopAnimations(this.overlay)]);
+      await Promise.all([
+        stopAnimations(this.dialog),
+        stopAnimations(this.overlay),
+      ]);
       this.dialog.hidden = false;
 
       // Set initial focus
       requestAnimationFrame(() => {
-        const nileInitialFocus = this.emit('nile-initial-focus', { cancelable: true });
+        const nileInitialFocus = this.emit('nile-initial-focus', {
+          cancelable: true,
+        });
 
         if (!nileInitialFocus.defaultPrevented) {
           // Set focus to the autofocus target and restore the attribute
           if (autoFocusTarget) {
-            (autoFocusTarget as HTMLInputElement).focus({ preventScroll: true });
+            (autoFocusTarget as HTMLInputElement).focus({
+              preventScroll: true,
+            });
           } else {
             this.panel.focus({ preventScroll: true });
           }
@@ -162,11 +179,19 @@ export class NileDialog extends NileElement {
         }
       });
 
-      const panelAnimation = getAnimation(this, 'dialog.show', { dir: 'right' });
-      const overlayAnimation = getAnimation(this, 'dialog.overlay.show', { dir: 'right' });
+      const panelAnimation = getAnimation(this, 'dialog.show', {
+        dir: 'right',
+      });
+      const overlayAnimation = getAnimation(this, 'dialog.overlay.show', {
+        dir: 'right',
+      });
       await Promise.all([
         animateTo(this.panel, panelAnimation.keyframes, panelAnimation.options),
-        animateTo(this.overlay, overlayAnimation.keyframes, overlayAnimation.options)
+        animateTo(
+          this.overlay,
+          overlayAnimation.keyframes,
+          overlayAnimation.options
+        ),
       ]);
 
       this.emit('nile-after-show');
@@ -176,20 +201,39 @@ export class NileDialog extends NileElement {
       this.removeOpenListeners();
       this.modal.deactivate();
 
-      await Promise.all([stopAnimations(this.dialog), stopAnimations(this.overlay)]);
-      const panelAnimation = getAnimation(this, 'dialog.hide', { dir: 'right' });
-      const overlayAnimation = getAnimation(this, 'dialog.overlay.hide', { dir: 'right' });
+      await Promise.all([
+        stopAnimations(this.dialog),
+        stopAnimations(this.overlay),
+      ]);
+      const panelAnimation = getAnimation(this, 'dialog.hide', {
+        dir: 'right',
+      });
+      const overlayAnimation = getAnimation(this, 'dialog.overlay.hide', {
+        dir: 'right',
+      });
 
+      const styleTag = document.getElementById('drawer-style');
+      if (styleTag) {
+        document.head.removeChild(styleTag);
+      }
       // Animate the overlay and the panel at the same time. Because animation durations might be different, we need to
       // hide each one individually when the animation finishes, otherwise the first one that finishes will reappear
       // unexpectedly. We'll unhide them after all animations have completed.
       await Promise.all([
-        animateTo(this.overlay, overlayAnimation.keyframes, overlayAnimation.options).then(() => {
+        animateTo(
+          this.overlay,
+          overlayAnimation.keyframes,
+          overlayAnimation.options
+        ).then(() => {
           this.overlay.hidden = true;
         }),
-        animateTo(this.panel, panelAnimation.keyframes, panelAnimation.options).then(() => {
+        animateTo(
+          this.panel,
+          panelAnimation.keyframes,
+          panelAnimation.options
+        ).then(() => {
           this.panel.hidden = true;
-        })
+        }),
       ]);
 
       this.dialog.hidden = true;
@@ -237,10 +281,15 @@ export class NileDialog extends NileElement {
         class=${classMap({
           dialog: true,
           'dialog--open': this.open,
-          'dialog--has-footer': this.hasSlotController.test('footer')
+          'dialog--has-footer': this.hasSlotController.test('footer'),
         })}
       >
-        <div part="overlay" class="dialog__overlay" @click=${() => this.requestClose('overlay')} tabindex="-1"></div>
+        <div
+          part="overlay"
+          class="dialog__overlay"
+          @click=${() => this.requestClose('overlay')}
+          tabindex="-1"
+        ></div>
 
         <div
           part="panel"
@@ -256,7 +305,11 @@ export class NileDialog extends NileElement {
             ? html`
                 <header part="header" class="dialog__header">
                   <h2 part="title" class="dialog__title" id="title">
-                    <slot name="label"> ${this.label.length > 0 ? this.label : String.fromCharCode(65279)} </slot>
+                    <slot name="label">
+                      ${this.label.length > 0
+                        ? this.label
+                        : String.fromCharCode(65279)}
+                    </slot>
                   </h2>
                   <div part="header-actions" class="dialog__header-actions">
                     <slot name="header-actions"></slot>
@@ -274,7 +327,12 @@ export class NileDialog extends NileElement {
               `
             : ''}
 
-          <slot part="body" class="dialog__body"></slot>
+          <slot
+            part="body"
+            class="dialog__body  ${this.noHeader
+              ? 'dialog__body-noheader'
+              : ''}"
+          ></slot>
 
           <footer part="footer" class="dialog__footer">
             <slot name="footer"></slot>