@digital-realty/ix-drawer 1.0.41 → 1.0.43-alpha.0

package/dist/IxDrawer.d.ts

@@ -1,41 +1,41 @@
-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>;
-    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>;
+    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,14 +178,14 @@ export class IxDrawer extends LitElement {
           ${this.renderDeleteButton()} ${this.renderMaximiseButton()}
         </div>
       </div>
-    </div>`;
-    }
-    renderDrawerContainer() {
-        const drawerClasses = {
-            drawer: true,
-            'animate-vert': this.animateVertical,
-            'aside-hidden': this.hideAside,
-        };
+    </div>`;
+    }
+    renderDrawerContainer() {
+        const drawerClasses = {
+            drawer: true,
+            'animate-vert': this.animateVertical,
+            'aside-hidden': this.hideAside,
+        };
         return html `
       <div
         class="drawer-container"
@@ -202,8 +202,8 @@ export class IxDrawer extends LitElement {
               ${this.renderMinimiseButton()}
             </div>
             <slot name="header"></slot>
-            ${this.hideClose
-            ? nothing
+            ${this.hideClose
+            ? nothing
             : html `
                   <div class="drawer-header__close-btn">
                     <ix-icon-button
@@ -222,59 +222,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/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',
-    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',
+    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,
@@ -262,5 +262,5 @@ export const IxDrawerStyles = css `
       max-width: 500px;
     }
   }
-`;
+`;
 //# sourceMappingURL=ix-drawer-styles.js.map

package/package.json

@@ -3,7 +3,7 @@
   "description": "Webcomponent ix-drawer following open-wc recommendations",
   "license": "MIT",
   "author": "interxion",
-  "version": "1.0.41",
+  "version": "1.0.43-alpha.0",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -29,10 +29,10 @@
     "storybook:build": "tsc && npm run analyze -- --exclude dist && build-storybook"
   },
   "dependencies": {
-    "@digital-realty/ix-button": "^3.2.31",
-    "@digital-realty/ix-dialog": "^1.0.28",
-    "@digital-realty/ix-icon": "^1.0.36",
-    "@digital-realty/ix-icon-button": "^1.0.40",
+    "@digital-realty/ix-button": "^3.2.33-alpha.0",
+    "@digital-realty/ix-dialog": "^1.0.30-alpha.0",
+    "@digital-realty/ix-icon": "^1.0.38-alpha.0",
+    "@digital-realty/ix-icon-button": "^1.0.42-alpha.0",
     "@lit/react": "^1.0.2",
     "@material/web": "1.2.0",
     "lit": "^2.0.2",
@@ -109,5 +109,5 @@
     "README.md",
     "LICENSE"
   ],
-  "gitHead": "dc83d7ba595b824274ec44de0918b5b826fcd3ed"
+  "gitHead": "020de6dab25bbe6058e9a71b2c56681822403481"
 }