@digital-realty/ix-drawer 1.0.37 → 1.0.39
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.d.ts
CHANGED
package/dist/IxDrawer.js
CHANGED
|
@@ -16,6 +16,7 @@ export class IxDrawer extends LitElement {
|
|
|
16
16
|
this.minimisedTitle = 'Draft';
|
|
17
17
|
this.minimisedSubTitle = '';
|
|
18
18
|
this.minimisable = false;
|
|
19
|
+
this.hideAside = false;
|
|
19
20
|
this.showConfirmationDialogOnClose = false;
|
|
20
21
|
this.animateVertical = false;
|
|
21
22
|
this.hideClose = false;
|
|
@@ -183,6 +184,7 @@ export class IxDrawer extends LitElement {
|
|
|
183
184
|
const drawerClasses = {
|
|
184
185
|
drawer: true,
|
|
185
186
|
'animate-vert': this.animateVertical,
|
|
187
|
+
'aside-hidden': this.hideAside,
|
|
186
188
|
};
|
|
187
189
|
return html `
|
|
188
190
|
<div
|
|
@@ -254,6 +256,9 @@ __decorate([
|
|
|
254
256
|
__decorate([
|
|
255
257
|
property({ type: Boolean })
|
|
256
258
|
], IxDrawer.prototype, "minimisable", void 0);
|
|
259
|
+
__decorate([
|
|
260
|
+
property({ type: Boolean })
|
|
261
|
+
], IxDrawer.prototype, "hideAside", void 0);
|
|
257
262
|
__decorate([
|
|
258
263
|
property({ type: Boolean })
|
|
259
264
|
], IxDrawer.prototype, "showConfirmationDialogOnClose", void 0);
|
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, 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 }) 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 @state() closing = false;\n\n @state() minimising = false;\n\n @query('#content-scroll-box') contentBox: HTMLElement | undefined;\n\n disconnectedCallback(): void {\n super.disconnectedCallback();\n\n this.resetState();\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.openDeleteConfirmationDialog = false;\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 handleOnBlur() {\n this.handleOnCancel();\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 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 @blur=${this.handleOnBlur}\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 appearance=\"text\"\n form=\"form-id\"\n @click=${this.handleOnCancel}\n >NO</ix-button\n >\n <ix-button\n appearance=\"text\"\n form=\"form-id\"\n @click=${this.handleClosing}\n >YES</ix-button\n >\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 renderDrawerContainer() {\n const drawerClasses = {\n drawer: true,\n 'animate-vert': this.animateVertical,\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 <slot name=\"header\"></slot>\n ${this.hideClose\n ? nothing\n : html`\n <div class=\"drawer-header__close-btn\">\n <ix-icon-button\n @click=${this.handleCloseButton}\n icon=\"close\"\n ></ix-icon-button>\n </div>\n `}\n </div>\n <div\n class=\"drawer-body\"\n @scroll=${this.handleOnScroll}\n id=\"content-scroll-box\"\n >\n <slot name=\"content\"></slot>\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":";AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AAChD,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAC3D,OAAO,EAAE,cAAc,EAAE,MAAM,8BAA8B,CAAC;AAC9D,OAAO,wCAAwC,CAAC;AAChD,OAAO,oCAAoC,CAAC;AAC5C,OAAO,kDAAkD,CAAC;AAC1D,OAAO,wCAAwC,CAAC;AAEhD,MAAM,OAAO,QAAS,SAAQ,UAAU;IAAxC;;QAKqB,cAAS,GAAG,KAAK,CAAC;QAElB,iCAA4B,GAAG,KAAK,CAAC;QAE3B,cAAS,GAAG,KAAK,CAAC;QAInB,mBAAc,GAAG,OAAO,CAAC;QAEzB,sBAAiB,GAAG,EAAE,CAAC;QAEtB,gBAAW,GAAG,KAAK,CAAC;QAEpB,cAAS,GAAG,KAAK,CAAC;QAElB,kCAA6B,GAAG,KAAK,CAAC;QAEP,oBAAe,GACzE,KAAK,CAAC;QAE8C,cAAS,GAAG,KAAK,CAAC;QAE/D,YAAO,GAAG,KAAK,CAAC;QAEhB,eAAU,GAAG,KAAK,CAAC;QAiB5B,mBAAc,GAAG,GAAG,EAAE;YACpB,IAAI,IAAI,CAAC,UAAU,EAAE;gBACnB,MAAM,WAAW,GAAG,IAAI,WAAW,CAAC,mBAAmB,EAAE;oBACvD,MAAM,EAAE;wBACN,SAAS,EAAE,IAAI,CAAC,UAAU,CAAC,SAAS;wBACpC,YAAY,EAAE,IAAI,CAAC,UAAU,CAAC,YAAY;wBAC1C,YAAY,EAAE,IAAI,CAAC,UAAU,CAAC,YAAY;qBAC3C;oBACD,OAAO,EAAE,IAAI;oBACb,QAAQ,EAAE,IAAI;iBACf,CAAC,CAAC;gBACH,IAAI,CAAC,aAAa,CAAC,WAAW,CAAC,CAAC;aACjC;QACH,CAAC,CAAC;IA4MJ,CAAC;IAvQC,MAAM,KAAK,MAAM;QACf,OAAO,CAAC,cAAc,CAAC,CAAC;IAC1B,CAAC;IA+BD,oBAAoB;QAClB,KAAK,CAAC,oBAAoB,EAAE,CAAC;QAE7B,IAAI,CAAC,UAAU,EAAE,CAAC;IACpB,CAAC;IAED,UAAU;QACR,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;QACrB,IAAI,CAAC,UAAU,GAAG,KAAK,CAAC;QACxB,IAAI,CAAC,4BAA4B,GAAG,KAAK,CAAC;QAC1C,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;IACzB,CAAC;IAiBD,WAAW;QACT,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC;QACvB,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;QACpB,UAAU,CAAC,GAAG,EAAE;YACd,IAAI,CAAC,YAAY,EAAE,CAAC;QACtB,CAAC,EAAE,GAAG,CAAC,CAAC;IACV,CAAC;IAED,WAAW;QACT,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;IACzB,CAAC;IAED,cAAc;QACZ,IAAI,CAAC,4BAA4B,GAAG,KAAK,CAAC;IAC5C,CAAC;IAED,cAAc;QACZ,IAAI,CAAC,4BAA4B,GAAG,IAAI,CAAC;IAC3C,CAAC;IAED,YAAY;QACV,IAAI,IAAI,CAAC,OAAO,EAAE;YAChB,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;YACrB,IAAI,CAAC,4BAA4B,GAAG,KAAK,CAAC;YAE1C,IAAI,IAAI,CAAC,UAAU,EAAE;gBACnB,IAAI,CAAC,UAAU,GAAG,KAAK,CAAC;gBACxB,IAAI,CAAC,SAAS,GAAG,CAAC,IAAI,CAAC,SAAS,CAAC;gBACjC,OAAO;aACR;YAED,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;YAEvB,IAAI,CAAC,QAAQ,EAAE,CAAC;SACjB;IACH,CAAC;IAED,kBAAkB,CAAC,KAAiB;QAClC,MAAM,EAAE,GAAG,KAAK,CAAC,MAAqB,CAAC;QACvC,IAAI,EAAE,CAAC,SAAS,CAAC,QAAQ,CAAC,kBAAkB,CAAC,EAAE;YAC7C,IAAI,CAAC,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,6BAA6B;gBACxD,IAAI,CAAC,4BAA4B,GAAG,IAAI,CAAC;;gBACtC,IAAI,CAAC,aAAa,EAAE,CAAC;SAC3B;IACH,CAAC;IAED,iBAAiB;QACf,IAAI,IAAI,CAAC,6BAA6B;YACpC,IAAI,CAAC,4BAA4B,GAAG,IAAI,CAAC;;YACtC,IAAI,CAAC,aAAa,EAAE,CAAC;IAC5B,CAAC;IAED,YAAY;QACV,IAAI,CAAC,cAAc,EAAE,CAAC;IACxB,CAAC;IAED,aAAa;QACX,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;QACpB,qCAAqC;QACrC,uCAAuC;QACvC,UAAU,CAAC,GAAG,EAAE;YACd,IAAI,CAAC,YAAY,EAAE,CAAC;QACtB,CAAC,EAAE,GAAG,CAAC,CAAC;IACV,CAAC;IAED,oBAAoB;QAClB,IAAI,IAAI,CAAC,WAAW;YAClB,OAAO,IAAI,CAAA;;;;iBAIA,IAAI,CAAC,WAAW;;;;mBAId,CAAC;QAEhB,OAAO,OAAO,CAAC;IACjB,CAAC;IAED,oBAAoB;QAClB,OAAO,IAAI,CAAA;wBACS,IAAI,CAAC,WAAW;WAC7B,CAAC;IACV,CAAC;IAED,kBAAkB;QAChB,OAAO,IAAI,CAAA;;;;;;eAMA,IAAI,CAAC,cAAc;;;;;YAKtB,CAAC;IACX,CAAC;IAED,8BAA8B;QAC5B,OAAO,IAAI,CAAA;;gBAEC,IAAI,CAAC,4BAA4B;gBACjC,IAAI,CAAC,YAAY;;;;;;;;;;;qBAWZ,IAAI,CAAC,cAAc;;;;;;qBAMnB,IAAI,CAAC,aAAa;;;;;KAKlC,CAAC;IACJ,CAAC;IAED,wBAAwB;QACtB,OAAO,IAAI,CAAA;;;gDAGiC,IAAI,CAAC,cAAc;;cAErD,IAAI,CAAC,iBAAiB;;;;YAIxB,IAAI,CAAC,kBAAkB,EAAE,IAAI,IAAI,CAAC,oBAAoB,EAAE;;;WAGzD,CAAC;IACV,CAAC;IAED,qBAAqB;QACnB,MAAM,aAAa,GAAG;YACpB,MAAM,EAAE,IAAI;YACZ,cAAc,EAAE,IAAI,CAAC,eAAe;YACpC,cAAc,EAAE,IAAI,CAAC,SAAS;SAC/B,CAAC;QAEF,OAAO,IAAI,CAAA;;;mBAGI,IAAI,CAAC,OAAO;iBACd,IAAI,CAAC,kBAAkB;mBACrB,IAAI,CAAC,kBAAkB;;;kBAGxB,QAAQ,CAAC,aAAa,CAAC;0BACf,IAAI,CAAC,YAAY;;;;gBAI3B,IAAI,CAAC,oBAAoB,EAAE;;;cAG7B,IAAI,CAAC,SAAS;YACd,CAAC,CAAC,OAAO;YACT,CAAC,CAAC,IAAI,CAAA;;;+BAGW,IAAI,CAAC,iBAAiB;;;;iBAIpC;;;;sBAIK,IAAI,CAAC,cAAc;;;;;;;KAOpC,CAAC;IACJ,CAAC;IAED,MAAM;QACJ,IAAI,CAAC,IAAI,CAAC,SAAS;YAAE,OAAO,OAAO,CAAC;QAEpC,OAAO,IAAI,CAAA;QACP,IAAI,CAAC,SAAS;YACd,CAAC,CAAC,IAAI,CAAC,wBAAwB,EAAE;YACjC,CAAC,CAAC,IAAI,CAAC,qBAAqB,EAAE;QAC9B,IAAI,CAAC,8BAA8B,EAAE;KACxC,CAAC;IACJ,CAAC;CACF;AAnQU;IAAR,KAAK,EAAE;2CAA6B;AAE5B;IAAR,KAAK,EAAE;8DAAgD;AAE3B;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;2CAAmB;AAEjB;IAA7B,QAAQ,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,CAAC;0CAAe;AAEhB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;gDAA0B;AAEzB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;mDAAwB;AAEtB;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;6CAAqB;AAEpB;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;2CAAmB;AAElB;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;+DAAuC;AAEP;IAA3D,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,kBAAkB,EAAE,CAAC;iDACnD;AAE8C;IAArD,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,CAAC;2CAAmB;AAE/D;IAAR,KAAK,EAAE;yCAAiB;AAEhB;IAAR,KAAK,EAAE;4CAAoB;AAEE;IAA7B,KAAK,CAAC,qBAAqB,CAAC;4CAAqC","sourcesContent":["import { LitElement, 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 @state() closing = false;\n\n @state() minimising = false;\n\n @query('#content-scroll-box') contentBox: HTMLElement | undefined;\n\n disconnectedCallback(): void {\n super.disconnectedCallback();\n\n this.resetState();\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.openDeleteConfirmationDialog = false;\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 handleOnBlur() {\n this.handleOnCancel();\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 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 @blur=${this.handleOnBlur}\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 appearance=\"text\"\n form=\"form-id\"\n @click=${this.handleOnCancel}\n >NO</ix-button\n >\n <ix-button\n appearance=\"text\"\n form=\"form-id\"\n @click=${this.handleClosing}\n >YES</ix-button\n >\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 renderDrawerContainer() {\n const drawerClasses = {\n drawer: true,\n 'animate-vert': this.animateVertical,\n 'aside-hidden': this.hideAside,\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 <slot name=\"header\"></slot>\n ${this.hideClose\n ? nothing\n : html`\n <div class=\"drawer-header__close-btn\">\n <ix-icon-button\n @click=${this.handleCloseButton}\n icon=\"close\"\n ></ix-icon-button>\n </div>\n `}\n </div>\n <div\n class=\"drawer-body\"\n @scroll=${this.handleOnScroll}\n id=\"content-scroll-box\"\n >\n <slot name=\"content\"></slot>\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
|
@@ -1 +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";
|
|
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: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>`}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}"><div class="drawer-header"><div class="drawer-header__minimise-btn">${this.renderMinimiseButton()}</div><slot name="header"></slot>${this.hideClose?nothing:html`<div class="drawer-header__close-btn"><ix-icon-button @click="${this.handleCloseButton}" icon="close"></ix-icon-button></div>`}</div><div class="drawer-body" @scroll="${this.handleOnScroll}" id="content-scroll-box"><slot name="content"></slot></div></aside></div>`}render(){return this.isVisible?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);
|
|
@@ -1 +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
|
|
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: 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"]}
|
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.0.
|
|
6
|
+
"version": "1.0.39",
|
|
7
7
|
"type": "module",
|
|
8
8
|
"main": "dist/index.js",
|
|
9
9
|
"module": "dist/index.js",
|
|
@@ -32,7 +32,7 @@
|
|
|
32
32
|
"@digital-realty/ix-button": "^3.2.31",
|
|
33
33
|
"@digital-realty/ix-dialog": "^1.0.26",
|
|
34
34
|
"@digital-realty/ix-icon": "^1.0.36",
|
|
35
|
-
"@digital-realty/ix-icon-button": "^1.0.
|
|
35
|
+
"@digital-realty/ix-icon-button": "^1.0.40",
|
|
36
36
|
"@lit/react": "^1.0.2",
|
|
37
37
|
"@material/web": "1.2.0",
|
|
38
38
|
"lit": "^2.0.2",
|
|
@@ -109,5 +109,5 @@
|
|
|
109
109
|
"README.md",
|
|
110
110
|
"LICENSE"
|
|
111
111
|
],
|
|
112
|
-
"gitHead": "
|
|
112
|
+
"gitHead": "024e4b85148c7a248e9f283e35085f512e7c3b1e"
|
|
113
113
|
}
|