@digital-realty/ix-drawer 1.3.4-IXUAT-10996.538677 → 1.3.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/IxDrawer.js +6 -2
- package/dist/IxDrawer.js.map +1 -1
- package/dist/ix-drawer.min.js +2 -2
- package/package.json +6 -6
package/dist/IxDrawer.js
CHANGED
|
@@ -173,7 +173,9 @@ export class IxDrawer extends LitElement {
|
|
|
173
173
|
return html `
|
|
174
174
|
<ix-dialog
|
|
175
175
|
.open=${this.openDeleteConfirmationDialog}
|
|
176
|
-
@closed=${() =>
|
|
176
|
+
@closed=${() => {
|
|
177
|
+
this.openDeleteConfirmationDialog = false;
|
|
178
|
+
}}
|
|
177
179
|
>
|
|
178
180
|
<form slot="content" id="form-id" method="dialog">
|
|
179
181
|
<h2 class="drawer-delete-dialog__title">
|
|
@@ -185,7 +187,9 @@ export class IxDrawer extends LitElement {
|
|
|
185
187
|
data-testid="drawer-action-no"
|
|
186
188
|
appearance="text"
|
|
187
189
|
form="form-id"
|
|
188
|
-
@click=${() =>
|
|
190
|
+
@click=${() => {
|
|
191
|
+
this.openDeleteConfirmationDialog = false;
|
|
192
|
+
}}
|
|
189
193
|
aria-label="Cancel and keep the dialog open"
|
|
190
194
|
>
|
|
191
195
|
NO
|
package/dist/IxDrawer.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"IxDrawer.js","sourceRoot":"","sources":["../src/IxDrawer.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, PropertyValues, html, nothing } from 'lit';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { property, query, state } from 'lit/decorators.js';\nimport { IxDrawerStyles } from './styles/ix-drawer-styles.js';\nimport '@digital-realty/ix-button/ix-button.js';\nimport '@digital-realty/ix-icon/ix-icon.js';\nimport '@digital-realty/ix-icon-button/ix-icon-button.js';\nimport '@digital-realty/ix-dialog/ix-dialog.js';\n\nexport class IxDrawer extends LitElement {\n static get styles() {\n return [IxDrawerStyles];\n }\n\n @state() protected minimised = false;\n\n @state() protected openDeleteConfirmationDialog = false;\n\n @property({ type: Boolean }) isVisible = false;\n\n @property({ type: Function }) onClosed: any;\n\n @property({ type: String }) minimisedTitle = 'Draft';\n\n @property({ type: String }) minimisedSubTitle = '';\n\n @property({ type: Boolean }) minimisable = false;\n\n @property({ type: Boolean }) hideAside = false;\n\n @property({ type: Boolean }) showConfirmationDialogOnClose = false;\n\n @property({ type: Boolean, attribute: 'animate-vertical' }) animateVertical =\n false;\n\n @property({ type: Boolean, attribute: 'hide-close' }) hideClose = false;\n\n @property({ type: Boolean }) scrollable = true;\n\n @property({ type: Boolean }) compact = false;\n\n @state() closing = false;\n\n @state() minimising = false;\n\n @state() hasHeaderFooter = false;\n\n @query('#content-scroll-box') contentBox: HTMLElement | undefined;\n\n @query('slot[name=\"header\"]') header: HTMLSlotElement | undefined;\n\n @query('slot[name=\"footer\"]') footer: HTMLSlotElement | undefined;\n\n disconnectedCallback(): void {\n super.disconnectedCallback();\n\n this.resetState();\n }\n\n protected updated(_changedProperties: PropertyValues): void {\n super.updated(_changedProperties);\n\n if (_changedProperties.has('isVisible')) {\n if (this.isVisible) {\n // IXUAT-9702 prevent background shifting on drawer opening\n // Calculate the width of the scrollbar if present, and add padding of equivalent width if so.\n const clientWidthBefore = document.body.clientWidth;\n document.documentElement.style.overflow = 'hidden';\n const clientWidthAfter = document.body.clientWidth;\n const scrollbarWidth = clientWidthAfter - clientWidthBefore;\n document.body.style.paddingRight = `${scrollbarWidth}px`;\n } else {\n document.documentElement.style.overflow = 'initial';\n document.body.style.paddingRight = `0px`;\n }\n }\n }\n\n resetState() {\n this.closing = false;\n this.minimising = false;\n this.openDeleteConfirmationDialog = false;\n this.minimised = false;\n }\n\n handleOnScroll = () => {\n if (this.contentBox) {\n const scrollEvent = new CustomEvent('on-content-scroll', {\n detail: {\n scrollTop: this.contentBox.scrollTop,\n scrollHeight: this.contentBox.scrollHeight,\n clientHeight: this.contentBox.clientHeight,\n },\n bubbles: true,\n composed: true,\n });\n this.dispatchEvent(scrollEvent);\n }\n };\n\n onMinimised() {\n this.minimising = true;\n this.closing = true;\n setTimeout(() => {\n this.handleClosed();\n }, 300);\n }\n\n onMaximised() {\n this.minimised = false;\n }\n\n handleOnCancel() {\n this.closing = true;\n setTimeout(() => {\n this.handleClosed();\n }, 300);\n }\n\n handleOnDelete() {\n this.openDeleteConfirmationDialog = true;\n }\n\n handleClosed() {\n if (this.closing) {\n this.closing = false;\n this.openDeleteConfirmationDialog = false;\n\n if (this.minimising) {\n this.minimising = false;\n this.minimised = !this.minimised;\n return;\n }\n\n this.minimised = false;\n\n this.onClosed();\n }\n }\n\n clickOutsideDrawer(event: MouseEvent) {\n const el = event.target as HTMLElement;\n if (el.classList.contains('drawer-container')) {\n if (!this.minimising && this.showConfirmationDialogOnClose)\n this.openDeleteConfirmationDialog = true;\n else this.handleClosing();\n }\n }\n\n handleCloseButton() {\n if (this.showConfirmationDialogOnClose)\n this.openDeleteConfirmationDialog = true;\n else this.handleClosing();\n }\n\n handleClosing() {\n this.closing = true;\n // Backup timeout to complete closing\n // if animation end event has not fired\n setTimeout(() => {\n this.handleClosed();\n }, 300);\n }\n\n renderCloseButton() {\n if (this.hideClose) {\n return nothing;\n }\n\n return html`<ix-icon-button\n data-testid=\"drawer-close\"\n @click=${this.handleCloseButton}\n icon=\"close\"\n aria-label=\"Close dialog\"\n ></ix-icon-button>`;\n }\n\n renderMinimiseButton() {\n if (this.minimisable)\n return html`<ix-button\n data-testid=\"hideButton\"\n appearance=\"text\"\n has-icon\n @click=${this.onMinimised}\n >\n <ix-icon slot=\"icon\">fullscreen_exit</ix-icon>\n HIDE\n </ix-button>`;\n\n return nothing;\n }\n\n renderMaximiseButton() {\n return html`<div class=\"drawer__maximise-btn\">\n <ix-icon @click=${this.onMaximised}>fullscreen</ix-icon>\n </div>`;\n }\n\n renderDeleteButton() {\n return html`<svg\n class=\"drawer__delete-btn\"\n focusable=\"false\"\n aria-hidden=\"true\"\n viewBox=\"0 0 24 24\"\n data-testid=\"deleteIcon\"\n @click=${this.handleOnDelete}\n >\n <path\n d=\"M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z\"\n ></path>\n </svg> `;\n }\n\n renderDeleteConfirmationDialog() {\n return html`\n <ix-dialog\n .open=${this.openDeleteConfirmationDialog}\n @closed=${() => (this.openDeleteConfirmationDialog = false)}\n >\n <form slot=\"content\" id=\"form-id\" method=\"dialog\">\n <h2 class=\"drawer-delete-dialog__title\">\n Are you sure you want to proceed? All details provided will be lost.\n </h2>\n </form>\n <div slot=\"actions\">\n <ix-button\n data-testid=\"drawer-action-no\"\n appearance=\"text\"\n form=\"form-id\"\n @click=${() => (this.openDeleteConfirmationDialog = false)}\n aria-label=\"Cancel and keep the dialog open\"\n >\n NO\n </ix-button>\n <ix-button\n data-testid=\"drawer-action-yes\"\n appearance=\"text\"\n form=\"form-id\"\n @click=${this.handleClosing}\n aria-label=\"Confirm closing and discard changes\"\n >\n YES\n </ix-button>\n </div>\n </ix-dialog>\n `;\n }\n\n renderMinimisedContainer() {\n return html`<div class=\"drawer-minimised-container\">\n <div class=\"drawer-minimised-body\">\n <div>\n <div class=\"drawer-minimised-title\">${this.minimisedTitle}</div>\n <div class=\"drawer-minimised-sub-title\">\n ${this.minimisedSubTitle}\n </div>\n </div>\n <div class=\"drawer-minimised-actions\">\n ${this.renderDeleteButton()} ${this.renderMaximiseButton()}\n </div>\n </div>\n </div>`;\n }\n\n handleHeaderFooterChange() {\n const hasHeader = (this.header?.assignedElements()?.length || 0) > 0;\n const hasFooter = (this.footer?.assignedElements()?.length || 0) > 0;\n this.hasHeaderFooter = hasHeader || hasFooter;\n }\n\n renderDrawerContainer() {\n const drawerClasses = {\n drawer: true,\n 'animate-vert': this.animateVertical,\n 'aside-hidden': this.hideAside,\n compact: this.compact,\n };\n\n return html`\n <div\n class=\"drawer-container\"\n ?closing=${this.closing}\n @click=${this.clickOutsideDrawer}\n @keydown=${this.clickOutsideDrawer}\n >\n <aside\n class=${classMap(drawerClasses)}\n @animationend=${this.handleClosed}\n >\n <div class=\"drawer-header\">\n <div class=\"drawer-header__minimise-btn\">\n ${this.renderMinimiseButton()}\n </div>\n <div class=\"drawer-header__close-btn\">\n ${this.renderCloseButton()}\n </div>\n </div>\n <div\n class=\"drawer-body ${this.scrollable ? '' : 'no-scroll'} ${this\n .minimisable\n ? 'minimisable'\n : ''}\n ${this.hasHeaderFooter ? 'has-header-footer' : ''}\n \"\n @scroll=${this.handleOnScroll}\n id=\"content-scroll-box\"\n >\n <div class=\"header\">\n <slot\n name=\"header\"\n @slotchange=${this.handleHeaderFooterChange}\n ></slot>\n </div>\n <div class=\"content\"><slot name=\"content\"></slot></div>\n <div class=\"footer\">\n <slot\n name=\"footer\"\n @slotchange=${this.handleHeaderFooterChange}\n ></slot>\n </div>\n </div>\n </aside>\n </div>\n `;\n }\n\n render() {\n if (!this.isVisible) return nothing;\n\n return html`\n ${this.minimised\n ? this.renderMinimisedContainer()\n : this.renderDrawerContainer()}\n ${this.renderDeleteConfirmationDialog()}\n `;\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"IxDrawer.js","sourceRoot":"","sources":["../src/IxDrawer.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, PropertyValues, html, nothing } from 'lit';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { property, query, state } from 'lit/decorators.js';\nimport { IxDrawerStyles } from './styles/ix-drawer-styles.js';\nimport '@digital-realty/ix-button/ix-button.js';\nimport '@digital-realty/ix-icon/ix-icon.js';\nimport '@digital-realty/ix-icon-button/ix-icon-button.js';\nimport '@digital-realty/ix-dialog/ix-dialog.js';\n\nexport class IxDrawer extends LitElement {\n static get styles() {\n return [IxDrawerStyles];\n }\n\n @state() protected minimised = false;\n\n @state() protected openDeleteConfirmationDialog = false;\n\n @property({ type: Boolean }) isVisible = false;\n\n @property({ type: Function }) onClosed: any;\n\n @property({ type: String }) minimisedTitle = 'Draft';\n\n @property({ type: String }) minimisedSubTitle = '';\n\n @property({ type: Boolean }) minimisable = false;\n\n @property({ type: Boolean }) hideAside = false;\n\n @property({ type: Boolean }) showConfirmationDialogOnClose = false;\n\n @property({ type: Boolean, attribute: 'animate-vertical' }) animateVertical =\n false;\n\n @property({ type: Boolean, attribute: 'hide-close' }) hideClose = false;\n\n @property({ type: Boolean }) scrollable = true;\n\n @property({ type: Boolean }) compact = false;\n\n @state() closing = false;\n\n @state() minimising = false;\n\n @state() hasHeaderFooter = false;\n\n @query('#content-scroll-box') contentBox: HTMLElement | undefined;\n\n @query('slot[name=\"header\"]') header: HTMLSlotElement | undefined;\n\n @query('slot[name=\"footer\"]') footer: HTMLSlotElement | undefined;\n\n disconnectedCallback(): void {\n super.disconnectedCallback();\n\n this.resetState();\n }\n\n protected updated(_changedProperties: PropertyValues): void {\n super.updated(_changedProperties);\n\n if (_changedProperties.has('isVisible')) {\n if (this.isVisible) {\n // IXUAT-9702 prevent background shifting on drawer opening\n // Calculate the width of the scrollbar if present, and add padding of equivalent width if so.\n const clientWidthBefore = document.body.clientWidth;\n document.documentElement.style.overflow = 'hidden';\n const clientWidthAfter = document.body.clientWidth;\n const scrollbarWidth = clientWidthAfter - clientWidthBefore;\n document.body.style.paddingRight = `${scrollbarWidth}px`;\n } else {\n document.documentElement.style.overflow = 'initial';\n document.body.style.paddingRight = `0px`;\n }\n }\n }\n\n resetState() {\n this.closing = false;\n this.minimising = false;\n this.openDeleteConfirmationDialog = false;\n this.minimised = false;\n }\n\n handleOnScroll = () => {\n if (this.contentBox) {\n const scrollEvent = new CustomEvent('on-content-scroll', {\n detail: {\n scrollTop: this.contentBox.scrollTop,\n scrollHeight: this.contentBox.scrollHeight,\n clientHeight: this.contentBox.clientHeight,\n },\n bubbles: true,\n composed: true,\n });\n this.dispatchEvent(scrollEvent);\n }\n };\n\n onMinimised() {\n this.minimising = true;\n this.closing = true;\n setTimeout(() => {\n this.handleClosed();\n }, 300);\n }\n\n onMaximised() {\n this.minimised = false;\n }\n\n handleOnCancel() {\n this.closing = true;\n setTimeout(() => {\n this.handleClosed();\n }, 300);\n }\n\n handleOnDelete() {\n this.openDeleteConfirmationDialog = true;\n }\n\n handleClosed() {\n if (this.closing) {\n this.closing = false;\n this.openDeleteConfirmationDialog = false;\n\n if (this.minimising) {\n this.minimising = false;\n this.minimised = !this.minimised;\n return;\n }\n\n this.minimised = false;\n\n this.onClosed();\n }\n }\n\n clickOutsideDrawer(event: MouseEvent) {\n const el = event.target as HTMLElement;\n if (el.classList.contains('drawer-container')) {\n if (!this.minimising && this.showConfirmationDialogOnClose)\n this.openDeleteConfirmationDialog = true;\n else this.handleClosing();\n }\n }\n\n handleCloseButton() {\n if (this.showConfirmationDialogOnClose)\n this.openDeleteConfirmationDialog = true;\n else this.handleClosing();\n }\n\n handleClosing() {\n this.closing = true;\n // Backup timeout to complete closing\n // if animation end event has not fired\n setTimeout(() => {\n this.handleClosed();\n }, 300);\n }\n\n renderCloseButton() {\n if (this.hideClose) {\n return nothing;\n }\n\n return html`<ix-icon-button\n data-testid=\"drawer-close\"\n @click=${this.handleCloseButton}\n icon=\"close\"\n aria-label=\"Close dialog\"\n ></ix-icon-button>`;\n }\n\n renderMinimiseButton() {\n if (this.minimisable)\n return html`<ix-button\n data-testid=\"hideButton\"\n appearance=\"text\"\n has-icon\n @click=${this.onMinimised}\n >\n <ix-icon slot=\"icon\">fullscreen_exit</ix-icon>\n HIDE\n </ix-button>`;\n\n return nothing;\n }\n\n renderMaximiseButton() {\n return html`<div class=\"drawer__maximise-btn\">\n <ix-icon @click=${this.onMaximised}>fullscreen</ix-icon>\n </div>`;\n }\n\n renderDeleteButton() {\n return html`<svg\n class=\"drawer__delete-btn\"\n focusable=\"false\"\n aria-hidden=\"true\"\n viewBox=\"0 0 24 24\"\n data-testid=\"deleteIcon\"\n @click=${this.handleOnDelete}\n >\n <path\n d=\"M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z\"\n ></path>\n </svg> `;\n }\n\n renderDeleteConfirmationDialog() {\n return html`\n <ix-dialog\n .open=${this.openDeleteConfirmationDialog}\n @closed=${() => {\n this.openDeleteConfirmationDialog = false;\n }}\n >\n <form slot=\"content\" id=\"form-id\" method=\"dialog\">\n <h2 class=\"drawer-delete-dialog__title\">\n Are you sure you want to proceed? All details provided will be lost.\n </h2>\n </form>\n <div slot=\"actions\">\n <ix-button\n data-testid=\"drawer-action-no\"\n appearance=\"text\"\n form=\"form-id\"\n @click=${() => {\n this.openDeleteConfirmationDialog = false;\n }}\n aria-label=\"Cancel and keep the dialog open\"\n >\n NO\n </ix-button>\n <ix-button\n data-testid=\"drawer-action-yes\"\n appearance=\"text\"\n form=\"form-id\"\n @click=${this.handleClosing}\n aria-label=\"Confirm closing and discard changes\"\n >\n YES\n </ix-button>\n </div>\n </ix-dialog>\n `;\n }\n\n renderMinimisedContainer() {\n return html`<div class=\"drawer-minimised-container\">\n <div class=\"drawer-minimised-body\">\n <div>\n <div class=\"drawer-minimised-title\">${this.minimisedTitle}</div>\n <div class=\"drawer-minimised-sub-title\">\n ${this.minimisedSubTitle}\n </div>\n </div>\n <div class=\"drawer-minimised-actions\">\n ${this.renderDeleteButton()} ${this.renderMaximiseButton()}\n </div>\n </div>\n </div>`;\n }\n\n handleHeaderFooterChange() {\n const hasHeader = (this.header?.assignedElements()?.length || 0) > 0;\n const hasFooter = (this.footer?.assignedElements()?.length || 0) > 0;\n this.hasHeaderFooter = hasHeader || hasFooter;\n }\n\n renderDrawerContainer() {\n const drawerClasses = {\n drawer: true,\n 'animate-vert': this.animateVertical,\n 'aside-hidden': this.hideAside,\n compact: this.compact,\n };\n\n return html`\n <div\n class=\"drawer-container\"\n ?closing=${this.closing}\n @click=${this.clickOutsideDrawer}\n @keydown=${this.clickOutsideDrawer}\n >\n <aside\n class=${classMap(drawerClasses)}\n @animationend=${this.handleClosed}\n >\n <div class=\"drawer-header\">\n <div class=\"drawer-header__minimise-btn\">\n ${this.renderMinimiseButton()}\n </div>\n <div class=\"drawer-header__close-btn\">\n ${this.renderCloseButton()}\n </div>\n </div>\n <div\n class=\"drawer-body ${this.scrollable ? '' : 'no-scroll'} ${this\n .minimisable\n ? 'minimisable'\n : ''}\n ${this.hasHeaderFooter ? 'has-header-footer' : ''}\n \"\n @scroll=${this.handleOnScroll}\n id=\"content-scroll-box\"\n >\n <div class=\"header\">\n <slot\n name=\"header\"\n @slotchange=${this.handleHeaderFooterChange}\n ></slot>\n </div>\n <div class=\"content\"><slot name=\"content\"></slot></div>\n <div class=\"footer\">\n <slot\n name=\"footer\"\n @slotchange=${this.handleHeaderFooterChange}\n ></slot>\n </div>\n </div>\n </aside>\n </div>\n `;\n }\n\n render() {\n if (!this.isVisible) return nothing;\n\n return html`\n ${this.minimised\n ? this.renderMinimisedContainer()\n : this.renderDrawerContainer()}\n ${this.renderDeleteConfirmationDialog()}\n `;\n }\n}\n"]}
|
package/dist/ix-drawer.min.js
CHANGED
|
@@ -330,7 +330,7 @@ import{__decorate as i}from"tslib";import{css as e,LitElement as t,nothing as o,
|
|
|
330
330
|
</svg> `}renderDeleteConfirmationDialog(){return r`
|
|
331
331
|
<ix-dialog
|
|
332
332
|
.open=${this.openDeleteConfirmationDialog}
|
|
333
|
-
@closed=${()=>this.openDeleteConfirmationDialog=!1}
|
|
333
|
+
@closed=${()=>{this.openDeleteConfirmationDialog=!1}}
|
|
334
334
|
>
|
|
335
335
|
<form slot="content" id="form-id" method="dialog">
|
|
336
336
|
<h2 class="drawer-delete-dialog__title">
|
|
@@ -342,7 +342,7 @@ import{__decorate as i}from"tslib";import{css as e,LitElement as t,nothing as o,
|
|
|
342
342
|
data-testid="drawer-action-no"
|
|
343
343
|
appearance="text"
|
|
344
344
|
form="form-id"
|
|
345
|
-
@click=${()=>this.openDeleteConfirmationDialog=!1}
|
|
345
|
+
@click=${()=>{this.openDeleteConfirmationDialog=!1}}
|
|
346
346
|
aria-label="Cancel and keep the dialog open"
|
|
347
347
|
>
|
|
348
348
|
NO
|
package/package.json
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
"description": "Webcomponent ix-drawer following open-wc recommendations",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"author": "interxion",
|
|
6
|
-
"version": "1.3.4
|
|
6
|
+
"version": "1.3.4",
|
|
7
7
|
"type": "module",
|
|
8
8
|
"main": "dist/index.js",
|
|
9
9
|
"module": "dist/index.js",
|
|
@@ -27,10 +27,10 @@
|
|
|
27
27
|
"test:watch": "tsc && concurrently -k -r \"tsc --watch --preserveWatchOutput\" \"wtr --watch\""
|
|
28
28
|
},
|
|
29
29
|
"dependencies": {
|
|
30
|
-
"@digital-realty/ix-button": "^3.5.
|
|
31
|
-
"@digital-realty/ix-dialog": "^1.3.
|
|
32
|
-
"@digital-realty/ix-icon": "^1.3.
|
|
33
|
-
"@digital-realty/ix-icon-button": "^1.3.
|
|
30
|
+
"@digital-realty/ix-button": "^3.5.4",
|
|
31
|
+
"@digital-realty/ix-dialog": "^1.3.2",
|
|
32
|
+
"@digital-realty/ix-icon": "^1.3.2",
|
|
33
|
+
"@digital-realty/ix-icon-button": "^1.3.2",
|
|
34
34
|
"@lit/react": "^1.0.2",
|
|
35
35
|
"@material/web": "2.4.0",
|
|
36
36
|
"lit": "^3.2.1",
|
|
@@ -95,5 +95,5 @@
|
|
|
95
95
|
"README.md",
|
|
96
96
|
"LICENSE"
|
|
97
97
|
],
|
|
98
|
-
"gitHead": "
|
|
98
|
+
"gitHead": "b84896f387916d401711a106719f040da9484925"
|
|
99
99
|
}
|