@digital-realty/ix-drawer - npm Package Compare versions

Comparing version 1.0.26 to 1.0.27

dist/IxDrawer.d.ts

@@ -15,2 +15,4 @@ import { LitElement, nothing } from 'lit';
     minimisable: boolean;
+    animateVertical: boolean;
+    hideClose: boolean;
     closing: boolean;
@@ -17,0 +19,0 @@ minimising: boolean;

dist/IxDrawer.js

 import { __decorate } from "tslib";
 import { LitElement, html, nothing } from 'lit';
+import { classMap } from 'lit/directives/class-map.js';
 import { property, state } from 'lit/decorators.js';
@@ -18,2 +19,4 @@ import { IxDrawerStyles } from './styles/ix-drawer-styles.js';
         this.minimisable = false;
+        this.animateVertical = false;
+        this.hideClose = false;
         this.closing = false;
@@ -140,2 +143,6 @@ this.minimising = false;
     renderDrawerContainer() {
+        const drawerClasses = {
+            drawer: true,
+            'animate-vert': this.animateVertical,
+        };
         return html `
@@ -148,3 +155,6 @@ <div
       >
-        <aside class="drawer" @animationend=${this.handleClosed}>
+        <aside
+          class=${classMap(drawerClasses)}
+          @animationend=${this.handleClosed}
+        >
           <div class="drawer-header">
@@ -155,8 +165,12 @@ <div class="drawer-header__minimise-btn">
             <slot name="header"></slot>
-            <div class="drawer-header__close-btn">
-              <ix-icon-button
-                @click=${this.handleClosing}
-                icon="close"
-              ></ix-icon-button>
-            </div>
+            ${this.hideClose
+            ? nothing
+            : html `
+                  <div class="drawer-header__close-btn">
+                    <ix-icon-button
+                      @click=${this.handleClosing}
+                      icon="close"
+                    ></ix-icon-button>
+                  </div>
+                `}
           </div>
@@ -201,2 +215,8 @@ <div class="drawer-body">
 __decorate([
+    property({ type: Boolean, attribute: 'animate-vertical' })
+], IxDrawer.prototype, "animateVertical", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'hide-close' })
+], IxDrawer.prototype, "hideClose", void 0);
+__decorate([
     state()
@@ -203,0 +223,0 @@ ], IxDrawer.prototype, "closing", void 0);

dist/styles/ix-drawer-styles.js

@@ -15,6 +15,6 @@ import { css } from 'lit';
     position: fixed;
-    width: 100%;
-    height: 100%;
     top: 0;
+    bottom: 0;
     left: 0;
+    right: 0;
     background-color: var(--ix-draw-scrim-bg, #00000080);
@@ -31,8 +31,10 @@ scroll-behavior: auto;
   .drawer {
-    width: 90%;
-    height: 100%;
-    float: right;
-    padding: 32px 0 46px 40px;
+    width: 90vw;
+    top: 0;
+    bottom: 0;
+    right: 0;
+    position: fixed;
+    padding: var(--ix-drawer-padding, 32px 40px 46px 40px);
     background-color: white;
-    border-radius: 16px 0px 0px 16px;
+    border-radius: var(--ix-drawer-border-radius, 16px 0px 0px 16px);
     box-sizing: border-box;
@@ -42,4 +44,10 @@ box-shadow: 0px 12px 20px -12px rgba(0, 0, 0, 0.12),
     transform: translateX(100%);
+    overflow: hidden;
+    z-index: 2;
   }
 
+  .drawer.animate-vert {
+    transform: translateY(-100%);
+  }
+
   :host([isvisible]) .drawer {
@@ -55,2 +63,12 @@ animation: slideIn var(--ix-drawer-animation-time, 225ms)
 
+  :host([isvisible]) .drawer.animate-vert {
+    animation: slideInVert var(--ix-drawer-animation-time, 225ms)
+      cubic-bezier(0, 0, 0.2, 1) forwards;
+  }
+
+  :host([isvisible]) .drawer-container[closing] .drawer.animate-vert {
+    animation: slideOutVert var(--ix-drawer-animation-time, 225ms) 0ms
+      cubic-bezier(0, 0, 0.2, 1) forwards;
+  }
+
   @keyframes fadeIn {
@@ -89,5 +107,20 @@ 0% {
 
+  @keyframes slideInVert {
+    100% {
+      transform: translateY(0);
+    }
+  }
+
+  @keyframes slideOutVert {
+    0% {
+      transform: translateY(0);
+    }
+    100% {
+      transform: translateY(-100%);
+    }
+  }
+
   @media screen and (min-width: 1024px) {
     .drawer {
-      width: 45%;
+      width: 45vw;
     }
@@ -97,3 +130,2 @@ }
   .drawer-header {
-    padding-right: 40px;
     display: flex;
@@ -117,5 +149,4 @@ justify-content: space-between;
   .drawer-body {
-    height: 95%;
     overflow: auto;
-    padding-right: 40px;
+    height: 100%;
   }
@@ -122,0 +153,0 @@

package.json

@@ -6,3 +6,3 @@ {
   "author": "interxion",
-  "version": "1.0.26",
+  "version": "1.0.27",
   "type": "module",
@@ -109,3 +109,3 @@ "main": "dist/index.js",
   ],
-  "gitHead": "b84d73018ee0d33b5f018c6953c2dcae0931c11e"
+  "gitHead": "57b88cc0ca98069100359155373d7150added1b0"
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

39448

increased by8.61%

Lines of code

507

increased by10.46%

No dependency changes