@digital-realty/ix-drawer 1.1.3 → 1.1.4

package/dist/IxDrawer.d.ts

@@ -1,42 +1,42 @@
-import { LitElement, nothing } from 'lit';
-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';
-export declare class IxDrawer extends LitElement {
-    static get styles(): import("lit").CSSResult[];
-    protected minimised: boolean;
-    protected openDeleteConfirmationDialog: boolean;
-    isVisible: boolean;
-    onClosed: any;
-    minimisedTitle: string;
-    minimisedSubTitle: string;
-    minimisable: boolean;
-    hideAside: boolean;
-    showConfirmationDialogOnClose: boolean;
-    animateVertical: boolean;
-    hideClose: boolean;
-    closing: boolean;
-    minimising: boolean;
-    contentBox: HTMLElement | undefined;
-    disconnectedCallback(): void;
-    resetState(): void;
-    handleOnScroll: () => void;
-    onMinimised(): void;
-    onMaximised(): void;
-    handleOnCancel(): void;
-    handleOnDelete(): void;
-    handleClosed(): void;
-    clickOutsideDrawer(event: MouseEvent): void;
-    handleCloseButton(): void;
-    handleOnBlur(): void;
-    handleClosing(): void;
-    renderMinimiseButton(): typeof nothing | import("lit").TemplateResult<1>;
-    renderMaximiseButton(): import("lit").TemplateResult<1>;
-    renderDeleteButton(): import("lit").TemplateResult<1>;
-    renderDeleteConfirmationDialog(): import("lit").TemplateResult<1>;
-    renderMinimisedContainer(): import("lit").TemplateResult<1>;
-    renderHeader(): import("lit").TemplateResult<1>;
-    renderDrawerContainer(): import("lit").TemplateResult<1>;
-    render(): typeof nothing | import("lit").TemplateResult<1>;
-}
+import { LitElement, nothing } from 'lit';
+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';
+export declare class IxDrawer extends LitElement {
+    static get styles(): import("lit").CSSResult[];
+    protected minimised: boolean;
+    protected openDeleteConfirmationDialog: boolean;
+    isVisible: boolean;
+    onClosed: any;
+    minimisedTitle: string;
+    minimisedSubTitle: string;
+    minimisable: boolean;
+    hideAside: boolean;
+    showConfirmationDialogOnClose: boolean;
+    animateVertical: boolean;
+    hideClose: boolean;
+    closing: boolean;
+    minimising: boolean;
+    contentBox: HTMLElement | undefined;
+    disconnectedCallback(): void;
+    resetState(): void;
+    handleOnScroll: () => void;
+    onMinimised(): void;
+    onMaximised(): void;
+    handleOnCancel(): void;
+    handleOnDelete(): void;
+    handleClosed(): void;
+    clickOutsideDrawer(event: MouseEvent): void;
+    handleCloseButton(): void;
+    handleOnBlur(): void;
+    handleClosing(): void;
+    renderMinimiseButton(): typeof nothing | import("lit").TemplateResult<1>;
+    renderMaximiseButton(): import("lit").TemplateResult<1>;
+    renderDeleteButton(): import("lit").TemplateResult<1>;
+    renderDeleteConfirmationDialog(): import("lit").TemplateResult<1>;
+    renderMinimisedContainer(): import("lit").TemplateResult<1>;
+    renderHeader(): import("lit").TemplateResult<1>;
+    renderDrawerContainer(): import("lit").TemplateResult<1>;
+    render(): typeof nothing | import("lit").TemplateResult<1>;
+}

package/dist/IxDrawer.js

@@ -1,112 +1,112 @@
-import { __decorate } from "tslib";
-import { LitElement, html, nothing } from 'lit';
-import { classMap } from 'lit/directives/class-map.js';
-import { property, query, state } from 'lit/decorators.js';
-import { IxDrawerStyles } from './styles/ix-drawer-styles.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';
-export class IxDrawer extends LitElement {
-    constructor() {
-        super(...arguments);
-        this.minimised = false;
-        this.openDeleteConfirmationDialog = false;
-        this.isVisible = false;
-        this.minimisedTitle = 'Draft';
-        this.minimisedSubTitle = '';
-        this.minimisable = false;
-        this.hideAside = false;
-        this.showConfirmationDialogOnClose = false;
-        this.animateVertical = false;
-        this.hideClose = false;
-        this.closing = false;
-        this.minimising = false;
-        this.handleOnScroll = () => {
-            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);
-            }
-        };
-    }
-    static get styles() {
-        return [IxDrawerStyles];
-    }
-    disconnectedCallback() {
-        super.disconnectedCallback();
-        this.resetState();
-    }
-    resetState() {
-        this.closing = false;
-        this.minimising = false;
-        this.openDeleteConfirmationDialog = false;
-        this.minimised = false;
-    }
-    onMinimised() {
-        this.minimising = true;
-        this.closing = true;
-        setTimeout(() => {
-            this.handleClosed();
-        }, 300);
-    }
-    onMaximised() {
-        this.minimised = false;
-    }
-    handleOnCancel() {
-        this.openDeleteConfirmationDialog = false;
-    }
-    handleOnDelete() {
-        this.openDeleteConfirmationDialog = true;
-    }
-    handleClosed() {
-        if (this.closing) {
-            this.closing = false;
-            this.openDeleteConfirmationDialog = false;
-            if (this.minimising) {
-                this.minimising = false;
-                this.minimised = !this.minimised;
-                return;
-            }
-            this.minimised = false;
-            this.onClosed();
-        }
-    }
-    clickOutsideDrawer(event) {
-        const el = event.target;
-        if (el.classList.contains('drawer-container')) {
-            if (!this.minimising && this.showConfirmationDialogOnClose)
-                this.openDeleteConfirmationDialog = true;
-            else
-                this.handleClosing();
-        }
-    }
-    handleCloseButton() {
-        if (this.showConfirmationDialogOnClose)
-            this.openDeleteConfirmationDialog = true;
-        else
-            this.handleClosing();
-    }
-    handleOnBlur() {
-        this.handleOnCancel();
-    }
-    handleClosing() {
-        this.closing = true;
-        // Backup timeout to complete closing
-        // if animation end event has not fired
-        setTimeout(() => {
-            this.handleClosed();
-        }, 300);
-    }
-    renderMinimiseButton() {
-        if (this.minimisable)
+import { __decorate } from "tslib";
+import { LitElement, html, nothing } from 'lit';
+import { classMap } from 'lit/directives/class-map.js';
+import { property, query, state } from 'lit/decorators.js';
+import { IxDrawerStyles } from './styles/ix-drawer-styles.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';
+export class IxDrawer extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.minimised = false;
+        this.openDeleteConfirmationDialog = false;
+        this.isVisible = false;
+        this.minimisedTitle = 'Draft';
+        this.minimisedSubTitle = '';
+        this.minimisable = false;
+        this.hideAside = false;
+        this.showConfirmationDialogOnClose = false;
+        this.animateVertical = false;
+        this.hideClose = false;
+        this.closing = false;
+        this.minimising = false;
+        this.handleOnScroll = () => {
+            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);
+            }
+        };
+    }
+    static get styles() {
+        return [IxDrawerStyles];
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.resetState();
+    }
+    resetState() {
+        this.closing = false;
+        this.minimising = false;
+        this.openDeleteConfirmationDialog = false;
+        this.minimised = false;
+    }
+    onMinimised() {
+        this.minimising = true;
+        this.closing = true;
+        setTimeout(() => {
+            this.handleClosed();
+        }, 300);
+    }
+    onMaximised() {
+        this.minimised = false;
+    }
+    handleOnCancel() {
+        this.openDeleteConfirmationDialog = false;
+    }
+    handleOnDelete() {
+        this.openDeleteConfirmationDialog = true;
+    }
+    handleClosed() {
+        if (this.closing) {
+            this.closing = false;
+            this.openDeleteConfirmationDialog = false;
+            if (this.minimising) {
+                this.minimising = false;
+                this.minimised = !this.minimised;
+                return;
+            }
+            this.minimised = false;
+            this.onClosed();
+        }
+    }
+    clickOutsideDrawer(event) {
+        const el = event.target;
+        if (el.classList.contains('drawer-container')) {
+            if (!this.minimising && this.showConfirmationDialogOnClose)
+                this.openDeleteConfirmationDialog = true;
+            else
+                this.handleClosing();
+        }
+    }
+    handleCloseButton() {
+        if (this.showConfirmationDialogOnClose)
+            this.openDeleteConfirmationDialog = true;
+        else
+            this.handleClosing();
+    }
+    handleOnBlur() {
+        this.handleOnCancel();
+    }
+    handleClosing() {
+        this.closing = true;
+        // Backup timeout to complete closing
+        // if animation end event has not fired
+        setTimeout(() => {
+            this.handleClosed();
+        }, 300);
+    }
+    renderMinimiseButton() {
+        if (this.minimisable)
             return html `<ix-button
         data-testid="hideButton"
         appearance="text"
@@ -115,15 +115,15 @@ export class IxDrawer extends LitElement {
       >
         <ix-icon slot="icon">fullscreen_exit</ix-icon>
         HIDE
-      </ix-button>`;
-        return nothing;
-    }
-    renderMaximiseButton() {
+      </ix-button>`;
+        return nothing;
+    }
+    renderMaximiseButton() {
         return html `<div class="drawer__maximise-btn">
       <ix-icon @click=${this.onMaximised}>fullscreen</ix-icon>
-    </div>`;
-    }
-    renderDeleteButton() {
+    </div>`;
+    }
+    renderDeleteButton() {
         return html `<svg
       class="drawer__delete-btn"
       focusable="false"
@@ -135,9 +135,9 @@ export class IxDrawer extends LitElement {
       <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> `;
-    }
-    renderDeleteConfirmationDialog() {
+    </svg> `;
+    }
+    renderDeleteConfirmationDialog() {
         return html `
       <ix-dialog
         .open=${this.openDeleteConfirmationDialog}
@@ -163,9 +163,9 @@ export class IxDrawer extends LitElement {
           >
         </div>
       </ix-dialog>
-    `;
-    }
-    renderMinimisedContainer() {
+    `;
+    }
+    renderMinimisedContainer() {
         return html `<div class="drawer-minimised-container">
       <div class="drawer-minimised-body">
         <div>
@@ -178,17 +178,17 @@ export class IxDrawer extends LitElement {
           ${this.renderDeleteButton()} ${this.renderMaximiseButton()}
         </div>
       </div>
-    </div>`;
-    }
-    renderHeader() {
+    </div>`;
+    }
+    renderHeader() {
         return html `
       <div class="drawer-header">
         <div class="drawer-header__minimise-btn">
           ${this.renderMinimiseButton()}
         </div>
 
-        ${this.hideClose
-            ? nothing
+        ${this.hideClose
+            ? nothing
             : html `
               <div class="drawer-header__close-btn">
                 <ix-icon-button
@@ -198,14 +198,14 @@ export class IxDrawer extends LitElement {
               </div>
             `}
       </div>
-    `;
-    }
-    renderDrawerContainer() {
-        const drawerClasses = {
-            drawer: true,
-            'animate-vert': this.animateVertical,
-            'aside-hidden': this.hideAside,
-        };
+    `;
+    }
+    renderDrawerContainer() {
+        const drawerClasses = {
+            drawer: true,
+            'animate-vert': this.animateVertical,
+            'aside-hidden': this.hideAside,
+        };
         return html `
       <div
         class="drawer-container"
@@ -227,59 +227,59 @@ export class IxDrawer extends LitElement {
           </div>
         </aside>
       </div>
-    `;
-    }
-    render() {
-        if (!this.isVisible)
-            return nothing;
+    `;
+    }
+    render() {
+        if (!this.isVisible)
+            return nothing;
         return html `
-      ${this.minimised
-            ? this.renderMinimisedContainer()
+      ${this.minimised
+            ? this.renderMinimisedContainer()
             : this.renderDrawerContainer()}
       ${this.renderDeleteConfirmationDialog()}
-    `;
-    }
-}
-__decorate([
-    state()
-], IxDrawer.prototype, "minimised", void 0);
-__decorate([
-    state()
-], IxDrawer.prototype, "openDeleteConfirmationDialog", 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 })
-], IxDrawer.prototype, "hideAside", void 0);
-__decorate([
-    property({ type: Boolean })
-], IxDrawer.prototype, "showConfirmationDialogOnClose", 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);
+    `;
+    }
+}
+__decorate([
+    state()
+], IxDrawer.prototype, "minimised", void 0);
+__decorate([
+    state()
+], IxDrawer.prototype, "openDeleteConfirmationDialog", 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 })
+], IxDrawer.prototype, "hideAside", void 0);
+__decorate([
+    property({ type: Boolean })
+], IxDrawer.prototype, "showConfirmationDialogOnClose", 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);
 //# sourceMappingURL=IxDrawer.js.map

package/dist/index.d.ts

@@ -1 +1 @@
-export { IxDrawer } from './IxDrawer.js';
+export { IxDrawer } from './IxDrawer.js';

package/dist/index.js

@@ -1,2 +1,2 @@
-export { IxDrawer } from './IxDrawer.js';
+export { IxDrawer } from './IxDrawer.js';
 //# sourceMappingURL=index.js.map

package/dist/ix-drawer.d.ts

@@ -1 +1 @@
-export {};
+export {};

package/dist/ix-drawer.js

@@ -1,3 +1,3 @@
-import { IxDrawer } from './IxDrawer.js';
-window.customElements.define('ix-drawer', IxDrawer);
+import { IxDrawer } from './IxDrawer.js';
+window.customElements.define('ix-drawer', IxDrawer);
 //# sourceMappingURL=ix-drawer.js.map

package/dist/ix-drawer.min.js

@@ -1 +1 @@
-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";let 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:99;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{display:flex;flex-direction:column;width:var(--ix-draw-width-sm,90vw);top:var(--intraportal-nav-height,var(--ix-top-nav-offset,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%)}.aside-hidden{display:none}: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.openDeleteConfirmationDialog=!1,this.isVisible=!1,this.minimisedTitle="Draft",this.minimisedSubTitle="",this.minimisable=!1,this.hideAside=!1,this.showConfirmationDialogOnClose=!1,this.animateVertical=!1,this.hideClose=!1,this.closing=!1,this.minimising=!1,this.handleOnScroll=()=>{var i;this.contentBox&&(i=new CustomEvent("on-content-scroll",{detail:{scrollTop:this.contentBox.scrollTop,scrollHeight:this.contentBox.scrollHeight,clientHeight:this.contentBox.clientHeight},bubbles:!0,composed:!0}),this.dispatchEvent(i))}}static get styles(){return[IxDrawerStyles]}disconnectedCallback(){super.disconnectedCallback(),this.resetState()}resetState(){this.closing=!1,this.minimising=!1,this.openDeleteConfirmationDialog=!1,this.minimised=!1}onMinimised(){this.minimising=!0,this.closing=!0,setTimeout(()=>{this.handleClosed()},300)}onMaximised(){this.minimised=!1}handleOnCancel(){this.openDeleteConfirmationDialog=!1}handleOnDelete(){this.openDeleteConfirmationDialog=!0}handleClosed(){this.closing&&(this.closing=!1,this.openDeleteConfirmationDialog=!1,this.minimising?(this.minimising=!1,this.minimised=!this.minimised):(this.minimised=!1,this.onClosed()))}clickOutsideDrawer(i){i.target.classList.contains("drawer-container")&&(!this.minimising&&this.showConfirmationDialogOnClose?this.openDeleteConfirmationDialog=!0:this.handleClosing())}handleCloseButton(){this.showConfirmationDialogOnClose?this.openDeleteConfirmationDialog=!0:this.handleClosing()}handleOnBlur(){this.handleOnCancel()}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>`}renderDeleteConfirmationDialog(){return html`<ix-dialog .open="${this.openDeleteConfirmationDialog}" @blur="${this.handleOnBlur}"><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>`}renderHeader(){return html`<div class="drawer-header"><div class="drawer-header__minimise-btn">${this.renderMinimiseButton()}</div>${this.hideClose?nothing:html`<div class="drawer-header__close-btn"><ix-icon-button @click="${this.handleCloseButton}" icon="close"></ix-icon-button></div>`}</div>`}renderDrawerContainer(){var i={drawer:!0,"animate-vert":this.animateVertical,"aside-hidden":this.hideAside};return html`<div class="drawer-container" ?closing="${this.closing}" @click="${this.clickOutsideDrawer}" @keydown="${this.clickOutsideDrawer}"><aside class="${classMap(i)}" @animationend="${this.handleClosed}">${this.renderHeader()}<div class="drawer-body" @scroll="${this.handleOnScroll}" id="content-scroll-box"><slot name="content"></slot></div></aside></div>`}render(){return this.isVisible?html`${this.minimised?this.renderMinimisedContainer():this.renderDrawerContainer()} ${this.renderDeleteConfirmationDialog()}`:nothing}}__decorate([state()],IxDrawer.prototype,"minimised",void 0),__decorate([state()],IxDrawer.prototype,"openDeleteConfirmationDialog",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})],IxDrawer.prototype,"hideAside",void 0),__decorate([property({type:Boolean})],IxDrawer.prototype,"showConfirmationDialogOnClose",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);
+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";let 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:1000;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{display:flex;flex-direction:column;width:var(--ix-draw-width-sm,90vw);top:0;bottom:0;right:0;position:fixed;padding:var(--ix-drawer-padding,0 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%)}.aside-hidden{display:none}: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;position:fixed;left:40px;right:40px;top:0;padding-top:2rem;background-color:#fff;z-index:10}.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;position:absolute;top:0;bottom:2rem;left:2rem;right:2rem;padding-top:5rem}.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.openDeleteConfirmationDialog=!1,this.isVisible=!1,this.minimisedTitle="Draft",this.minimisedSubTitle="",this.minimisable=!1,this.hideAside=!1,this.showConfirmationDialogOnClose=!1,this.animateVertical=!1,this.hideClose=!1,this.closing=!1,this.minimising=!1,this.handleOnScroll=()=>{var i;this.contentBox&&(i=new CustomEvent("on-content-scroll",{detail:{scrollTop:this.contentBox.scrollTop,scrollHeight:this.contentBox.scrollHeight,clientHeight:this.contentBox.clientHeight},bubbles:!0,composed:!0}),this.dispatchEvent(i))}}static get styles(){return[IxDrawerStyles]}disconnectedCallback(){super.disconnectedCallback(),this.resetState()}resetState(){this.closing=!1,this.minimising=!1,this.openDeleteConfirmationDialog=!1,this.minimised=!1}onMinimised(){this.minimising=!0,this.closing=!0,setTimeout(()=>{this.handleClosed()},300)}onMaximised(){this.minimised=!1}handleOnCancel(){this.openDeleteConfirmationDialog=!1}handleOnDelete(){this.openDeleteConfirmationDialog=!0}handleClosed(){this.closing&&(this.closing=!1,this.openDeleteConfirmationDialog=!1,this.minimising?(this.minimising=!1,this.minimised=!this.minimised):(this.minimised=!1,this.onClosed()))}clickOutsideDrawer(i){i.target.classList.contains("drawer-container")&&(!this.minimising&&this.showConfirmationDialogOnClose?this.openDeleteConfirmationDialog=!0:this.handleClosing())}handleCloseButton(){this.showConfirmationDialogOnClose?this.openDeleteConfirmationDialog=!0:this.handleClosing()}handleOnBlur(){this.handleOnCancel()}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>`}renderDeleteConfirmationDialog(){return html`<ix-dialog .open="${this.openDeleteConfirmationDialog}" @blur="${this.handleOnBlur}"><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>`}renderHeader(){return html`<div class="drawer-header"><div class="drawer-header__minimise-btn">${this.renderMinimiseButton()}</div>${this.hideClose?nothing:html`<div class="drawer-header__close-btn"><ix-icon-button @click="${this.handleCloseButton}" icon="close"></ix-icon-button></div>`}</div>`}renderDrawerContainer(){var i={drawer:!0,"animate-vert":this.animateVertical,"aside-hidden":this.hideAside};return html`<div class="drawer-container" ?closing="${this.closing}" @click="${this.clickOutsideDrawer}" @keydown="${this.clickOutsideDrawer}"><aside class="${classMap(i)}" @animationend="${this.handleClosed}">${this.renderHeader()}<div class="drawer-body" @scroll="${this.handleOnScroll}" id="content-scroll-box"><slot name="content"></slot></div></aside></div>`}render(){return this.isVisible?html`${this.minimised?this.renderMinimisedContainer():this.renderDrawerContainer()} ${this.renderDeleteConfirmationDialog()}`:nothing}}__decorate([state()],IxDrawer.prototype,"minimised",void 0),__decorate([state()],IxDrawer.prototype,"openDeleteConfirmationDialog",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})],IxDrawer.prototype,"hideAside",void 0),__decorate([property({type:Boolean})],IxDrawer.prototype,"showConfirmationDialogOnClose",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);

package/dist/react/IxDrawer.d.ts

@@ -1,4 +1,4 @@
-import { IxDrawer as IxDrawerLit } from '../IxDrawer.js';
-export declare const IxDrawer: import("@lit/react").ReactWebComponent<IxDrawerLit, {
-    onclick: string;
-}>;
+import { IxDrawer as IxDrawerLit } from '../IxDrawer.js';
+export declare const IxDrawer: import("@lit/react").ReactWebComponent<IxDrawerLit, {
+    onclick: string;
+}>;

package/dist/react/IxDrawer.js

@@ -1,13 +1,13 @@
-import React from 'react';
-import { createComponent } from '@lit/react';
-import { IxDrawer as IxDrawerLit } from '../IxDrawer.js';
-customElements.define('ix-drawer', IxDrawerLit);
-export const IxDrawer = createComponent({
-    tagName: 'ix-drawer-react',
-    elementClass: IxDrawerLit,
-    react: React,
-    events: {
-        onclick: 'onClick',
-    },
-});
+import React from 'react';
+import { createComponent } from '@lit/react';
+import { IxDrawer as IxDrawerLit } from '../IxDrawer.js';
+customElements.define('ix-drawer', IxDrawerLit);
+export const IxDrawer = createComponent({
+    tagName: 'ix-drawer-react',
+    elementClass: IxDrawerLit,
+    react: React,
+    events: {
+        onclick: 'onClick',
+    },
+});
 //# sourceMappingURL=IxDrawer.js.map

package/dist/styles/ix-drawer-styles.d.ts

@@ -1 +1 @@
-export declare const IxDrawerStyles: import("lit").CSSResult;
+export declare const IxDrawerStyles: import("lit").CSSResult;

package/dist/styles/ix-drawer-styles.js

@@ -1,4 +1,4 @@
-import { css } from 'lit';
+import { css } from 'lit';
 export const IxDrawerStyles = css `
   :root,
   :host :root,
@@ -9,7 +9,7 @@ export const IxDrawerStyles = css `
   }
 
   .drawer-container {
-    z-index: 99;
+    z-index: 1000;
     display: block;
     position: fixed;
     top: 0;
@@ -30,11 +30,11 @@ export const IxDrawerStyles = css `
     display: flex;
     flex-direction: column;
     width: var(--ix-draw-width-sm, 90vw);
-    top: var(--intraportal-nav-height, var(--ix-top-nav-offset, 0));
+    top: 0;
     bottom: 0;
     right: 0;
     position: fixed;
-    padding: var(--ix-drawer-padding, 32px 40px 46px 40px);
+    padding: var(--ix-drawer-padding, 0 40px);
     background-color: white;
     border-radius: var(--ix-drawer-border-radius, 16px 0px 0px 16px);
     box-sizing: border-box;
@@ -131,6 +131,13 @@ export const IxDrawerStyles = css `
     display: flex;
     justify-content: space-between;
     align-items: center;
+    position: fixed;
+    left: 40px;
+    right: 40px;
+    top: 0;
+    padding-top: 2rem;
+    background-color: #ffffff;
+    z-index: 10;
   }
 
   .drawer-header__close-btn {
@@ -147,7 +154,12 @@ export const IxDrawerStyles = css `
 
   .drawer-body {
     overflow: auto;
-    height: 100%;
+    position: absolute;
+    top: 0;
+    bottom: 2rem;
+    left: 2rem;
+    right: 2rem;
+    padding-top: 5rem;
   }
 
   .drawer-minimised-container {
@@ -262,5 +274,5 @@ export const IxDrawerStyles = css `
       max-width: 500px;
     }
   }
-`;
+`;
 //# sourceMappingURL=ix-drawer-styles.js.map

package/dist/styles/ix-drawer-styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"ix-drawer-styles.js","sourceRoot":"","sources":["../../src/styles/ix-drawer-styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,cAAc,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuQhC,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const IxDrawerStyles = css`\n  :root,\n  :host :root,\n  :host {\n    font-size: var(--ix-drawer-font-size, 0.875rem);\n    line-height: var(--ix-drawer-line-height, 1.25rem);\n    --ix-drawer-animation-time: 225ms;\n  }\n\n  .drawer-container {\n    z-index: 99;\n    display: block;\n    position: fixed;\n    top: 0;\n    bottom: 0;\n    left: 0;\n    right: 0;\n    background-color: var(--ix-draw-scrim-bg, #00000080);\n    scroll-behavior: auto;\n    overflow: auto;\n    animation: fadeIn var(--ix-drawer-animation-time, 225ms) linear forwards;\n  }\n\n  .drawer-container[closing] {\n    animation: fadeOut var(--ix-drawer-animation-time, 225ms) linear forwards;\n  }\n\n  .drawer {\n    display: flex;\n    flex-direction: column;\n    width: var(--ix-draw-width-sm, 90vw);\n    top: var(--intraportal-nav-height, var(--ix-top-nav-offset, 0));\n    bottom: 0;\n    right: 0;\n    position: fixed;\n    padding: var(--ix-drawer-padding, 32px 40px 46px 40px);\n    background-color: white;\n    border-radius: var(--ix-drawer-border-radius, 16px 0px 0px 16px);\n    box-sizing: border-box;\n    box-shadow: 0px 12px 20px -12px rgba(0, 0, 0, 0.12),\n      0px 0px 0px 1px #e1e4e8 inset;\n    transform: translateX(100%);\n    overflow: hidden;\n    z-index: 2;\n  }\n\n  .drawer.animate-vert {\n    transform: translateY(-100%);\n  }\n\n  .aside-hidden {\n    display: none;\n  }\n\n  :host([isvisible]) .drawer {\n    animation: slideIn var(--ix-drawer-animation-time, 225ms)\n      cubic-bezier(0, 0, 0.2, 1) forwards;\n  }\n\n  :host([isvisible]) .drawer-container[closing] .drawer {\n    animation: slideOut var(--ix-drawer-animation-time, 225ms) 0ms\n      cubic-bezier(0, 0, 0.2, 1) forwards;\n  }\n\n  :host([isvisible]) .drawer.animate-vert {\n    animation: slideInVert var(--ix-drawer-animation-time, 225ms)\n      cubic-bezier(0, 0, 0.2, 1) forwards;\n  }\n\n  :host([isvisible]) .drawer-container[closing] .drawer.animate-vert {\n    animation: slideOutVert var(--ix-drawer-animation-time, 225ms) 0ms\n      cubic-bezier(0, 0, 0.2, 1) forwards;\n  }\n\n  @keyframes fadeIn {\n    0% {\n      background-color: transparent;\n    }\n    100% {\n      background-color: var(--ix-draw-scrim-bg, #00000080);\n    }\n  }\n\n  @keyframes fadeOut {\n    0% {\n      background-color: var(--ix-draw-scrim-bg, #00000080);\n    }\n    100% {\n      background-color: transparent;\n    }\n  }\n\n  @keyframes slideIn {\n    100% {\n      transform: translateX(0);\n    }\n  }\n\n  @keyframes slideOut {\n    0% {\n      transform: translateX(0);\n    }\n    100% {\n      transform: translateX(100%);\n    }\n  }\n\n  @keyframes slideInVert {\n    100% {\n      transform: translateY(0);\n    }\n  }\n\n  @keyframes slideOutVert {\n    0% {\n      transform: translateY(0);\n    }\n    100% {\n      transform: translateY(-100%);\n    }\n  }\n\n  @media screen and (min-width: 1024px) {\n    .drawer {\n      width: var(--ix-draw-width-lg, 45vw);\n    }\n  }\n\n  .drawer-header {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n  }\n\n  .drawer-header__close-btn {\n    margin-bottom: -16px;\n    background: white;\n    border-radius: 50%;\n    position: relative;\n    z-index: 9;\n  }\n\n  .drawer-header__minimise-btn {\n    flex: 0;\n  }\n\n  .drawer-body {\n    overflow: auto;\n    height: 100%;\n  }\n\n  .drawer-minimised-container {\n    bottom: 24px;\n    position: absolute;\n    right: 24px;\n    z-index: 1200;\n    display: flex;\n    flex-direction: row;\n    gap: 8px;\n  }\n\n  .drawer-minimised-body {\n    background-color: rgb(255, 255, 255);\n    height: 72px;\n    display: flex;\n    -webkit-box-align: center;\n    align-items: center;\n    padding: 4px 24px;\n    box-shadow: rgba(0, 0, 0, 0.12) 0px 12px 20px -12px,\n      rgb(225, 228, 232) 0px 0px 0px 1px inset;\n    border-radius: 16px;\n    -webkit-box-pack: justify;\n    justify-content: space-between;\n  }\n\n  .drawer-minimised-title {\n    color: rgba(9, 34, 65, 0.7);\n    font-style: normal;\n    font-weight: normal;\n    font-size: 12px;\n    line-height: 16px;\n    letter-spacing: 0.4px;\n    font-family: 'Open Sans', sans-serif;\n  }\n\n  .drawer-minimised-sub-title {\n    font-style: normal;\n    font-weight: bold;\n    font-size: 14px;\n    line-height: 24px;\n    letter-spacing: 0.1px;\n    font-family: 'Open Sans', sans-serif;\n  }\n\n  .drawer-minimised-actions {\n    margin-left: 42px;\n    display: flex;\n    -webkit-box-align: center;\n    align-items: center;\n  }\n\n  .drawer-delete-dialog__title {\n    color: rgb(9, 34, 65);\n  }\n\n  .drawer__delete-btn {\n    user-select: none;\n    width: 1em;\n    height: 1em;\n    display: inline-block;\n    fill: currentcolor;\n    flex-shrink: 0;\n    transition: fill 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;\n    font-size: 1.5rem;\n    color: rgb(219, 0, 40);\n    cursor: pointer;\n    margin-right: 20px;\n  }\n\n  .drawer__maximise-btn {\n    display: inline-flex;\n    -webkit-box-align: center;\n    align-items: center;\n    -webkit-box-pack: center;\n    justify-content: center;\n    position: relative;\n    box-sizing: border-box;\n    -webkit-tap-highlight-color: transparent;\n    outline: 0px;\n    border: 0px;\n    margin: 0px;\n    cursor: pointer;\n    user-select: none;\n    vertical-align: middle;\n    appearance: none;\n    text-decoration: none;\n    font-family: 'Red Hat Display', sans-serif;\n    font-weight: 700;\n    font-style: normal;\n    font-size: 1.5rem;\n    line-height: 18.52px;\n    letter-spacing: 1.25px;\n    text-transform: uppercase;\n    min-height: 36px;\n    transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,\n      box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,\n      border-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;\n    border-radius: 50%;\n    padding: 0px;\n    min-width: 0px;\n    z-index: 1050;\n    color: rgb(255, 255, 255);\n    height: 40px !important;\n    width: 40px !important;\n    background-color: rgb(20, 86, 224) !important;\n    box-shadow: none !important;\n  }\n\n  ix-dialog {\n    form {\n      max-width: 500px;\n    }\n  }\n`;\n"]}
+{"version":3,"file":"ix-drawer-styles.js","sourceRoot":"","sources":["../../src/styles/ix-drawer-styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,cAAc,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmRhC,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const IxDrawerStyles = css`\n  :root,\n  :host :root,\n  :host {\n    font-size: var(--ix-drawer-font-size, 0.875rem);\n    line-height: var(--ix-drawer-line-height, 1.25rem);\n    --ix-drawer-animation-time: 225ms;\n  }\n\n  .drawer-container {\n    z-index: 1000;\n    display: block;\n    position: fixed;\n    top: 0;\n    bottom: 0;\n    left: 0;\n    right: 0;\n    background-color: var(--ix-draw-scrim-bg, #00000080);\n    scroll-behavior: auto;\n    overflow: auto;\n    animation: fadeIn var(--ix-drawer-animation-time, 225ms) linear forwards;\n  }\n\n  .drawer-container[closing] {\n    animation: fadeOut var(--ix-drawer-animation-time, 225ms) linear forwards;\n  }\n\n  .drawer {\n    display: flex;\n    flex-direction: column;\n    width: var(--ix-draw-width-sm, 90vw);\n    top: 0;\n    bottom: 0;\n    right: 0;\n    position: fixed;\n    padding: var(--ix-drawer-padding, 0 40px);\n    background-color: white;\n    border-radius: var(--ix-drawer-border-radius, 16px 0px 0px 16px);\n    box-sizing: border-box;\n    box-shadow: 0px 12px 20px -12px rgba(0, 0, 0, 0.12),\n      0px 0px 0px 1px #e1e4e8 inset;\n    transform: translateX(100%);\n    overflow: hidden;\n    z-index: 2;\n  }\n\n  .drawer.animate-vert {\n    transform: translateY(-100%);\n  }\n\n  .aside-hidden {\n    display: none;\n  }\n\n  :host([isvisible]) .drawer {\n    animation: slideIn var(--ix-drawer-animation-time, 225ms)\n      cubic-bezier(0, 0, 0.2, 1) forwards;\n  }\n\n  :host([isvisible]) .drawer-container[closing] .drawer {\n    animation: slideOut var(--ix-drawer-animation-time, 225ms) 0ms\n      cubic-bezier(0, 0, 0.2, 1) forwards;\n  }\n\n  :host([isvisible]) .drawer.animate-vert {\n    animation: slideInVert var(--ix-drawer-animation-time, 225ms)\n      cubic-bezier(0, 0, 0.2, 1) forwards;\n  }\n\n  :host([isvisible]) .drawer-container[closing] .drawer.animate-vert {\n    animation: slideOutVert var(--ix-drawer-animation-time, 225ms) 0ms\n      cubic-bezier(0, 0, 0.2, 1) forwards;\n  }\n\n  @keyframes fadeIn {\n    0% {\n      background-color: transparent;\n    }\n    100% {\n      background-color: var(--ix-draw-scrim-bg, #00000080);\n    }\n  }\n\n  @keyframes fadeOut {\n    0% {\n      background-color: var(--ix-draw-scrim-bg, #00000080);\n    }\n    100% {\n      background-color: transparent;\n    }\n  }\n\n  @keyframes slideIn {\n    100% {\n      transform: translateX(0);\n    }\n  }\n\n  @keyframes slideOut {\n    0% {\n      transform: translateX(0);\n    }\n    100% {\n      transform: translateX(100%);\n    }\n  }\n\n  @keyframes slideInVert {\n    100% {\n      transform: translateY(0);\n    }\n  }\n\n  @keyframes slideOutVert {\n    0% {\n      transform: translateY(0);\n    }\n    100% {\n      transform: translateY(-100%);\n    }\n  }\n\n  @media screen and (min-width: 1024px) {\n    .drawer {\n      width: var(--ix-draw-width-lg, 45vw);\n    }\n  }\n\n  .drawer-header {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    position: fixed;\n    left: 40px;\n    right: 40px;\n    top: 0;\n    padding-top: 2rem;\n    background-color: #ffffff;\n    z-index: 10;\n  }\n\n  .drawer-header__close-btn {\n    margin-bottom: -16px;\n    background: white;\n    border-radius: 50%;\n    position: relative;\n    z-index: 9;\n  }\n\n  .drawer-header__minimise-btn {\n    flex: 0;\n  }\n\n  .drawer-body {\n    overflow: auto;\n    position: absolute;\n    top: 0;\n    bottom: 2rem;\n    left: 2rem;\n    right: 2rem;\n    padding-top: 5rem;\n  }\n\n  .drawer-minimised-container {\n    bottom: 24px;\n    position: absolute;\n    right: 24px;\n    z-index: 1200;\n    display: flex;\n    flex-direction: row;\n    gap: 8px;\n  }\n\n  .drawer-minimised-body {\n    background-color: rgb(255, 255, 255);\n    height: 72px;\n    display: flex;\n    -webkit-box-align: center;\n    align-items: center;\n    padding: 4px 24px;\n    box-shadow: rgba(0, 0, 0, 0.12) 0px 12px 20px -12px,\n      rgb(225, 228, 232) 0px 0px 0px 1px inset;\n    border-radius: 16px;\n    -webkit-box-pack: justify;\n    justify-content: space-between;\n  }\n\n  .drawer-minimised-title {\n    color: rgba(9, 34, 65, 0.7);\n    font-style: normal;\n    font-weight: normal;\n    font-size: 12px;\n    line-height: 16px;\n    letter-spacing: 0.4px;\n    font-family: 'Open Sans', sans-serif;\n  }\n\n  .drawer-minimised-sub-title {\n    font-style: normal;\n    font-weight: bold;\n    font-size: 14px;\n    line-height: 24px;\n    letter-spacing: 0.1px;\n    font-family: 'Open Sans', sans-serif;\n  }\n\n  .drawer-minimised-actions {\n    margin-left: 42px;\n    display: flex;\n    -webkit-box-align: center;\n    align-items: center;\n  }\n\n  .drawer-delete-dialog__title {\n    color: rgb(9, 34, 65);\n  }\n\n  .drawer__delete-btn {\n    user-select: none;\n    width: 1em;\n    height: 1em;\n    display: inline-block;\n    fill: currentcolor;\n    flex-shrink: 0;\n    transition: fill 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;\n    font-size: 1.5rem;\n    color: rgb(219, 0, 40);\n    cursor: pointer;\n    margin-right: 20px;\n  }\n\n  .drawer__maximise-btn {\n    display: inline-flex;\n    -webkit-box-align: center;\n    align-items: center;\n    -webkit-box-pack: center;\n    justify-content: center;\n    position: relative;\n    box-sizing: border-box;\n    -webkit-tap-highlight-color: transparent;\n    outline: 0px;\n    border: 0px;\n    margin: 0px;\n    cursor: pointer;\n    user-select: none;\n    vertical-align: middle;\n    appearance: none;\n    text-decoration: none;\n    font-family: 'Red Hat Display', sans-serif;\n    font-weight: 700;\n    font-style: normal;\n    font-size: 1.5rem;\n    line-height: 18.52px;\n    letter-spacing: 1.25px;\n    text-transform: uppercase;\n    min-height: 36px;\n    transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,\n      box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,\n      border-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;\n    border-radius: 50%;\n    padding: 0px;\n    min-width: 0px;\n    z-index: 1050;\n    color: rgb(255, 255, 255);\n    height: 40px !important;\n    width: 40px !important;\n    background-color: rgb(20, 86, 224) !important;\n    box-shadow: none !important;\n  }\n\n  ix-dialog {\n    form {\n      max-width: 500px;\n    }\n  }\n`;\n"]}

package/package.json

@@ -3,7 +3,7 @@
   "description": "Webcomponent ix-drawer following open-wc recommendations",
   "license": "MIT",
   "author": "interxion",
-  "version": "1.1.3",
+  "version": "1.1.4",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -30,7 +30,7 @@
   },
   "dependencies": {
     "@digital-realty/ix-button": "^3.3.3",
-    "@digital-realty/ix-dialog": "^1.1.3",
+    "@digital-realty/ix-dialog": "^1.1.4",
     "@digital-realty/ix-icon": "^1.1.3",
     "@digital-realty/ix-icon-button": "^1.1.3",
     "@lit/react": "^1.0.2",
@@ -109,5 +109,5 @@
     "README.md",
     "LICENSE"
   ],
-  "gitHead": "d05f7852e15c67ec82d2b44f3d730398f25c55c4"
+  "gitHead": "b9d5ef1127e1f10cd74d54fcdc03825b4476b403"
 }