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

Comparing version 1.0.29 to 1.0.30

dist/ix-drawer.min.js

@@ -1,1 +0,1 @@
-import{__decorate}from"tslib";import{css,LitElement,html,nothing}from"lit";import{classMap}from"lit/directives/class-map.js";import{state,property}from"lit/decorators.js";import"@digital-realty/ix-button/ix-button.js";import"@digital-realty/ix-icon/ix-icon.js";import"@digital-realty/ix-icon-button/ix-icon-button.js";import"@digital-realty/ix-dialog/ix-dialog.js";const IxDrawerStyles=css`:host,:host :root,:root{font-size:var(--ix-drawer-font-size,.875rem);line-height:var(--ix-drawer-line-height,1.25rem);--ix-drawer-animation-time:225ms}.drawer-container{z-index:1;display:block;position:fixed;top:0;bottom:0;left:0;right:0;background-color:var(--ix-draw-scrim-bg,#00000080);scroll-behavior:auto;overflow:auto;animation:fadeIn var(--ix-drawer-animation-time,225ms) linear forwards}.drawer-container[closing]{animation:fadeOut var(--ix-drawer-animation-time,225ms) linear forwards}.drawer{width:var(--ix-draw-width-sm,90vw);top:0;bottom:0;right:0;position:fixed;padding:var(--ix-drawer-padding,32px 40px 46px 40px);background-color:#fff;border-radius:var(--ix-drawer-border-radius,16px 0 0 16px);box-sizing:border-box;box-shadow:0 12px 20px -12px rgba(0,0,0,.12),0 0 0 1px #e1e4e8 inset;transform:translateX(100%);overflow:hidden;z-index:2}.drawer.animate-vert{transform:translateY(-100%)}:host([isvisible]) .drawer{animation:slideIn var(--ix-drawer-animation-time,225ms) cubic-bezier(0,0,.2,1) forwards}:host([isvisible]) .drawer-container[closing] .drawer{animation:slideOut var(--ix-drawer-animation-time,225ms) 0s cubic-bezier(0,0,.2,1) forwards}:host([isvisible]) .drawer.animate-vert{animation:slideInVert var(--ix-drawer-animation-time,225ms) cubic-bezier(0,0,.2,1) forwards}:host([isvisible]) .drawer-container[closing] .drawer.animate-vert{animation:slideOutVert var(--ix-drawer-animation-time,225ms) 0s cubic-bezier(0,0,.2,1) forwards}@keyframes fadeIn{0%{background-color:transparent}100%{background-color:var(--ix-draw-scrim-bg,#00000080)}}@keyframes fadeOut{0%{background-color:var(--ix-draw-scrim-bg,#00000080)}100%{background-color:transparent}}@keyframes slideIn{100%{transform:translateX(0)}}@keyframes slideOut{0%{transform:translateX(0)}100%{transform:translateX(100%)}}@keyframes slideInVert{100%{transform:translateY(0)}}@keyframes slideOutVert{0%{transform:translateY(0)}100%{transform:translateY(-100%)}}@media screen and (min-width:1024px){.drawer{width:var(--ix-draw-width-lg,45vw)}}.drawer-header{display:flex;justify-content:space-between;align-items:center}.drawer-header__close-btn{margin-bottom:-16px;background:#fff;border-radius:50%;position:relative;z-index:9}.drawer-header__minimise-btn{flex:0}.drawer-body{overflow:auto;height:100%}.drawer-minimised-container{bottom:24px;position:absolute;right:24px;z-index:1200;display:flex;flex-direction:row;gap:8px}.drawer-minimised-body{background-color:#fff;height:72px;display:flex;-webkit-box-align:center;align-items:center;padding:4px 24px;box-shadow:rgba(0,0,0,.12) 0 12px 20px -12px,#e1e4e8 0 0 0 1px inset;border-radius:16px;-webkit-box-pack:justify;justify-content:space-between}.drawer-minimised-title{color:rgba(9,34,65,.7);font-style:normal;font-weight:400;font-size:12px;line-height:16px;letter-spacing:.4px;font-family:'Open Sans',sans-serif}.drawer-minimised-sub-title{font-style:normal;font-weight:700;font-size:14px;line-height:24px;letter-spacing:.1px;font-family:'Open Sans',sans-serif}.drawer-minimised-actions{margin-left:42px;display:flex;-webkit-box-align:center;align-items:center}.drawer-delete-dialog__title{color:#092241}.drawer__delete-btn{user-select:none;width:1em;height:1em;display:inline-block;fill:currentcolor;flex-shrink:0;transition:fill .2s cubic-bezier(.4,0,.2,1) 0s;font-size:1.5rem;color:#db0028;cursor:pointer;margin-right:20px}.drawer__maximise-btn{display:inline-flex;-webkit-box-align:center;align-items:center;-webkit-box-pack:center;justify-content:center;position:relative;box-sizing:border-box;-webkit-tap-highlight-color:transparent;outline:0;border:0;margin:0;cursor:pointer;user-select:none;vertical-align:middle;appearance:none;text-decoration:none;font-family:'Red Hat Display',sans-serif;font-weight:700;font-style:normal;font-size:1.5rem;line-height:18.52px;letter-spacing:1.25px;text-transform:uppercase;min-height:36px;transition:background-color 250ms cubic-bezier(.4,0,.2,1) 0s,box-shadow 250ms cubic-bezier(.4,0,.2,1) 0s,border-color 250ms cubic-bezier(.4,0,.2,1) 0s;border-radius:50%;padding:0;min-width:0;z-index:1050;color:#fff;height:40px!important;width:40px!important;background-color:#1456e0!important;box-shadow:none!important}`;class IxDrawer extends LitElement{constructor(){super(...arguments),this.minimised=!1,this.showDeleteConfirmationDialog=!1,this.isVisible=!1,this.minimisedTitle="Draft",this.minimisedSubTitle="",this.minimisable=!1,this.animateVertical=!1,this.hideClose=!1,this.closing=!1,this.minimising=!1}static get styles(){return[IxDrawerStyles]}onMinimised(){this.minimising=!0,this.closing=!0,setTimeout(()=>{this.handleClosed()},300)}onMaximised(){this.minimised=!1}handleOnCancel(){this.showDeleteConfirmationDialog=!1}handleOnDelete(){this.showDeleteConfirmationDialog=!0}handleClosed(){this.closing&&(this.closing=!1,this.minimising?(this.minimising=!1,this.minimised=!this.minimised):this.onClosed())}clickOutsideDrawer(i){i.target.classList.contains("drawer-container")&&this.handleClosing()}handleClosing(){this.closing=!0,setTimeout(()=>{this.handleClosed()},300)}renderMinimiseButton(){return this.minimisable?html`<ix-button data-testid="hideButton" appearance="text" has-icon @click="${this.onMinimised}"><ix-icon slot="icon">fullscreen_exit</ix-icon>HIDE</ix-button>`:nothing}renderMaximiseButton(){return html`<div class="drawer__maximise-btn"><ix-icon @click="${this.onMaximised}">fullscreen</ix-icon></div>`}renderDeleteButton(){return html`<svg class="drawer__delete-btn" focusable="false" aria-hidden="true" viewBox="0 0 24 24" data-testid="deleteIcon" @click="${this.handleOnDelete}"><path d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"></path></svg> ${this.renderDeleteConfirmationDialog()}`}renderDeleteConfirmationDialog(){return html`<ix-dialog .open="${this.showDeleteConfirmationDialog}"><form slot="content" id="form-id" method="dialog"><h2 class="drawer-delete-dialog__title">Are you sure you want to proceed? All details provided will be lost.</h2></form><div slot="actions"><ix-button appearance="text" form="form-id" @click="${this.handleOnCancel}">NO</ix-button><ix-button appearance="text" form="form-id" @click="${this.handleClosing}">YES</ix-button></div></ix-dialog>`}renderMinimisedContainer(){return html`<div class="drawer-minimised-container"><div class="drawer-minimised-body"><div><div class="drawer-minimised-title">${this.minimisedTitle}</div><div class="drawer-minimised-sub-title">${this.minimisedSubTitle}</div></div><div class="drawer-minimised-actions">${this.renderDeleteButton()} ${this.renderMaximiseButton()}</div></div></div>`}renderDrawerContainer(){var i={drawer:!0,"animate-vert":this.animateVertical};return html`<div class="drawer-container" ?closing="${this.closing}" @click="${this.clickOutsideDrawer}" @keydown="${this.clickOutsideDrawer}"><aside class="${classMap(i)}" @animationend="${this.handleClosed}"><div class="drawer-header"><div class="drawer-header__minimise-btn">${this.renderMinimiseButton()}</div><slot name="header"></slot>${this.hideClose?nothing:html`<div class="drawer-header__close-btn"><ix-icon-button @click="${this.handleClosing}" icon="close"></ix-icon-button></div>`}</div><div class="drawer-body"><slot name="content"></slot></div></aside></div>`}render(){return this.isVisible?this.minimised?this.renderMinimisedContainer():this.renderDrawerContainer():nothing}}__decorate([state()],IxDrawer.prototype,"minimised",void 0),__decorate([state()],IxDrawer.prototype,"showDeleteConfirmationDialog",void 0),__decorate([property({type:Boolean})],IxDrawer.prototype,"isVisible",void 0),__decorate([property({type:Function})],IxDrawer.prototype,"onClosed",void 0),__decorate([property({type:String})],IxDrawer.prototype,"minimisedTitle",void 0),__decorate([property({type:String})],IxDrawer.prototype,"minimisedSubTitle",void 0),__decorate([property({type:Boolean})],IxDrawer.prototype,"minimisable",void 0),__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()],IxDrawer.prototype,"closing",void 0),__decorate([state()],IxDrawer.prototype,"minimising",void 0),window.customElements.define("ix-drawer",IxDrawer);
+import{__decorate}from"tslib";import{css,LitElement,html,nothing}from"lit";import{classMap}from"lit/directives/class-map.js";import{state,property,query}from"lit/decorators.js";import"@digital-realty/ix-button/ix-button.js";import"@digital-realty/ix-icon/ix-icon.js";import"@digital-realty/ix-icon-button/ix-icon-button.js";import"@digital-realty/ix-dialog/ix-dialog.js";const IxDrawerStyles=css`:host,:host :root,:root{font-size:var(--ix-drawer-font-size,.875rem);line-height:var(--ix-drawer-line-height,1.25rem);--ix-drawer-animation-time:225ms}.drawer-container{z-index:1;display:block;position:fixed;top:0;bottom:0;left:0;right:0;background-color:var(--ix-draw-scrim-bg,#00000080);scroll-behavior:auto;overflow:auto;animation:fadeIn var(--ix-drawer-animation-time,225ms) linear forwards}.drawer-container[closing]{animation:fadeOut var(--ix-drawer-animation-time,225ms) linear forwards}.drawer{width:var(--ix-draw-width-sm,90vw);top:0;bottom:0;right:0;position:fixed;padding:var(--ix-drawer-padding,32px 40px 46px 40px);background-color:#fff;border-radius:var(--ix-drawer-border-radius,16px 0 0 16px);box-sizing:border-box;box-shadow:0 12px 20px -12px rgba(0,0,0,.12),0 0 0 1px #e1e4e8 inset;transform:translateX(100%);overflow:hidden;z-index:2}.drawer.animate-vert{transform:translateY(-100%)}:host([isvisible]) .drawer{animation:slideIn var(--ix-drawer-animation-time,225ms) cubic-bezier(0,0,.2,1) forwards}:host([isvisible]) .drawer-container[closing] .drawer{animation:slideOut var(--ix-drawer-animation-time,225ms) 0s cubic-bezier(0,0,.2,1) forwards}:host([isvisible]) .drawer.animate-vert{animation:slideInVert var(--ix-drawer-animation-time,225ms) cubic-bezier(0,0,.2,1) forwards}:host([isvisible]) .drawer-container[closing] .drawer.animate-vert{animation:slideOutVert var(--ix-drawer-animation-time,225ms) 0s cubic-bezier(0,0,.2,1) forwards}@keyframes fadeIn{0%{background-color:transparent}100%{background-color:var(--ix-draw-scrim-bg,#00000080)}}@keyframes fadeOut{0%{background-color:var(--ix-draw-scrim-bg,#00000080)}100%{background-color:transparent}}@keyframes slideIn{100%{transform:translateX(0)}}@keyframes slideOut{0%{transform:translateX(0)}100%{transform:translateX(100%)}}@keyframes slideInVert{100%{transform:translateY(0)}}@keyframes slideOutVert{0%{transform:translateY(0)}100%{transform:translateY(-100%)}}@media screen and (min-width:1024px){.drawer{width:var(--ix-draw-width-lg,45vw)}}.drawer-header{display:flex;justify-content:space-between;align-items:center}.drawer-header__close-btn{margin-bottom:-16px;background:#fff;border-radius:50%;position:relative;z-index:9}.drawer-header__minimise-btn{flex:0}.drawer-body{overflow:auto;height:100%}.drawer-minimised-container{bottom:24px;position:absolute;right:24px;z-index:1200;display:flex;flex-direction:row;gap:8px}.drawer-minimised-body{background-color:#fff;height:72px;display:flex;-webkit-box-align:center;align-items:center;padding:4px 24px;box-shadow:rgba(0,0,0,.12) 0 12px 20px -12px,#e1e4e8 0 0 0 1px inset;border-radius:16px;-webkit-box-pack:justify;justify-content:space-between}.drawer-minimised-title{color:rgba(9,34,65,.7);font-style:normal;font-weight:400;font-size:12px;line-height:16px;letter-spacing:.4px;font-family:'Open Sans',sans-serif}.drawer-minimised-sub-title{font-style:normal;font-weight:700;font-size:14px;line-height:24px;letter-spacing:.1px;font-family:'Open Sans',sans-serif}.drawer-minimised-actions{margin-left:42px;display:flex;-webkit-box-align:center;align-items:center}.drawer-delete-dialog__title{color:#092241}.drawer__delete-btn{user-select:none;width:1em;height:1em;display:inline-block;fill:currentcolor;flex-shrink:0;transition:fill .2s cubic-bezier(.4,0,.2,1) 0s;font-size:1.5rem;color:#db0028;cursor:pointer;margin-right:20px}.drawer__maximise-btn{display:inline-flex;-webkit-box-align:center;align-items:center;-webkit-box-pack:center;justify-content:center;position:relative;box-sizing:border-box;-webkit-tap-highlight-color:transparent;outline:0;border:0;margin:0;cursor:pointer;user-select:none;vertical-align:middle;appearance:none;text-decoration:none;font-family:'Red Hat Display',sans-serif;font-weight:700;font-style:normal;font-size:1.5rem;line-height:18.52px;letter-spacing:1.25px;text-transform:uppercase;min-height:36px;transition:background-color 250ms cubic-bezier(.4,0,.2,1) 0s,box-shadow 250ms cubic-bezier(.4,0,.2,1) 0s,border-color 250ms cubic-bezier(.4,0,.2,1) 0s;border-radius:50%;padding:0;min-width:0;z-index:1050;color:#fff;height:40px!important;width:40px!important;background-color:#1456e0!important;box-shadow:none!important}`;class IxDrawer extends LitElement{constructor(){super(...arguments),this.minimised=!1,this.showDeleteConfirmationDialog=!1,this.isVisible=!1,this.minimisedTitle="Draft",this.minimisedSubTitle="",this.minimisable=!1,this.animateVertical=!1,this.hideClose=!1,this.closing=!1,this.minimising=!1,this.handleOnScroll=i=>{var e;this.contentBox&&(e=new CustomEvent("on-content-scroll",{detail:{scrollTop:this.contentBox.scrollTop,scrollHeight:this.contentBox.scrollHeight,clientHeight:this.contentBox.clientHeight},bubbles:!0,composed:!0}),this.dispatchEvent(e))}}static get styles(){return[IxDrawerStyles]}onMinimised(){this.minimising=!0,this.closing=!0,setTimeout(()=>{this.handleClosed()},300)}onMaximised(){this.minimised=!1}handleOnCancel(){this.showDeleteConfirmationDialog=!1}handleOnDelete(){this.showDeleteConfirmationDialog=!0}handleClosed(){this.closing&&(this.closing=!1,this.minimising?(this.minimising=!1,this.minimised=!this.minimised):this.onClosed())}clickOutsideDrawer(i){i.target.classList.contains("drawer-container")&&this.handleClosing()}handleClosing(){this.closing=!0,setTimeout(()=>{this.handleClosed()},300)}renderMinimiseButton(){return this.minimisable?html`<ix-button data-testid="hideButton" appearance="text" has-icon @click="${this.onMinimised}"><ix-icon slot="icon">fullscreen_exit</ix-icon>HIDE</ix-button>`:nothing}renderMaximiseButton(){return html`<div class="drawer__maximise-btn"><ix-icon @click="${this.onMaximised}">fullscreen</ix-icon></div>`}renderDeleteButton(){return html`<svg class="drawer__delete-btn" focusable="false" aria-hidden="true" viewBox="0 0 24 24" data-testid="deleteIcon" @click="${this.handleOnDelete}"><path d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"></path></svg> ${this.renderDeleteConfirmationDialog()}`}renderDeleteConfirmationDialog(){return html`<ix-dialog .open="${this.showDeleteConfirmationDialog}"><form slot="content" id="form-id" method="dialog"><h2 class="drawer-delete-dialog__title">Are you sure you want to proceed? All details provided will be lost.</h2></form><div slot="actions"><ix-button appearance="text" form="form-id" @click="${this.handleOnCancel}">NO</ix-button><ix-button appearance="text" form="form-id" @click="${this.handleClosing}">YES</ix-button></div></ix-dialog>`}renderMinimisedContainer(){return html`<div class="drawer-minimised-container"><div class="drawer-minimised-body"><div><div class="drawer-minimised-title">${this.minimisedTitle}</div><div class="drawer-minimised-sub-title">${this.minimisedSubTitle}</div></div><div class="drawer-minimised-actions">${this.renderDeleteButton()} ${this.renderMaximiseButton()}</div></div></div>`}renderDrawerContainer(){var i={drawer:!0,"animate-vert":this.animateVertical};return html`<div class="drawer-container" ?closing="${this.closing}" @click="${this.clickOutsideDrawer}" @keydown="${this.clickOutsideDrawer}"><aside class="${classMap(i)}" @animationend="${this.handleClosed}"><div class="drawer-header"><div class="drawer-header__minimise-btn">${this.renderMinimiseButton()}</div><slot name="header"></slot>${this.hideClose?nothing:html`<div class="drawer-header__close-btn"><ix-icon-button @click="${this.handleClosing}" icon="close"></ix-icon-button></div>`}</div><div class="drawer-body" @scroll="${this.handleOnScroll}" id="content-scroll-box"><slot name="content"></slot></div></aside></div>`}render(){return this.isVisible?this.minimised?this.renderMinimisedContainer():this.renderDrawerContainer():nothing}}__decorate([state()],IxDrawer.prototype,"minimised",void 0),__decorate([state()],IxDrawer.prototype,"showDeleteConfirmationDialog",void 0),__decorate([property({type:Boolean})],IxDrawer.prototype,"isVisible",void 0),__decorate([property({type:Function})],IxDrawer.prototype,"onClosed",void 0),__decorate([property({type:String})],IxDrawer.prototype,"minimisedTitle",void 0),__decorate([property({type:String})],IxDrawer.prototype,"minimisedSubTitle",void 0),__decorate([property({type:Boolean})],IxDrawer.prototype,"minimisable",void 0),__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()],IxDrawer.prototype,"closing",void 0),__decorate([state()],IxDrawer.prototype,"minimising",void 0),__decorate([query("#content-scroll-box")],IxDrawer.prototype,"contentBox",void 0),window.customElements.define("ix-drawer",IxDrawer);

dist/IxDrawer.d.ts

@@ -19,2 +19,4 @@ import { LitElement, nothing } from 'lit';
     minimising: boolean;
+    contentBox: HTMLElement | undefined;
+    handleOnScroll: (e: Event) => void;
     onMinimised(): void;
@@ -21,0 +23,0 @@ onMaximised(): void;

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';
+import { property, query, state } from 'lit/decorators.js';
 import { IxDrawerStyles } from './styles/ix-drawer-styles.js';
@@ -23,2 +23,16 @@ import '@digital-realty/ix-button/ix-button.js';
         this.minimising = false;
+        this.handleOnScroll = (e) => {
+            if (this.contentBox) {
+                const scrollEvent = new CustomEvent('on-content-scroll', {
+                    detail: {
+                        scrollTop: this.contentBox.scrollTop,
+                        scrollHeight: this.contentBox.scrollHeight,
+                        clientHeight: this.contentBox.clientHeight,
+                    },
+                    bubbles: true,
+                    composed: true,
+                });
+                this.dispatchEvent(scrollEvent);
+            }
+        };
     }
@@ -174,3 +188,3 @@ static get styles() {
           </div>
-          <div class="drawer-body">
+          <div class="drawer-body" @scroll=${this.handleOnScroll} id="content-scroll-box">
             <slot name="content"></slot>
@@ -224,2 +238,5 @@ </div>
 ], IxDrawer.prototype, "minimising", void 0);
+__decorate([
+    query("#content-scroll-box")
+], IxDrawer.prototype, "contentBox", void 0);
 //# sourceMappingURL=IxDrawer.js.map

package.json

@@ -6,3 +6,3 @@ {
   "author": "interxion",
-  "version": "1.0.29",
+  "version": "1.0.30",
   "type": "module",
@@ -113,3 +113,3 @@ "main": "dist/index.js",
   ],
-  "gitHead": "be86a09dcee63221ccd0f1baa75192bf2073652f"
+  "gitHead": "a99264b5f1d7cdd356a016f6dbae9c02c719db99"
 }

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

50711

increased by4.74%

Lines of code

561

increased by3.7%

No dependency changes