@digital-realty/ix-drawer 1.2.3 → 1.2.5

package/dist/IxDrawer.js

@@ -131,8 +131,10 @@ export class IxDrawer extends LitElement {
             return nothing;
         }
         return html `<ix-icon-button
+      data-testid="drawer-close"
       @click=${this.handleCloseButton}
       icon="close"
+      aria-label="Close dialog"
     ></ix-icon-button>`;
     }
     renderMinimiseButton() {
@@ -180,16 +182,20 @@ export class IxDrawer extends LitElement {
         </form>
         <div slot="actions">
           <ix-button
+            data-testid="drawer-action-no"
             appearance="text"
             form="form-id"
             @click=${this.handleOnCancel}
+            aria-label="Cancel and keep the dialog open"
           >
             NO
           </ix-button>
           <ix-button
+            data-testid="drawer-action-yes"
             appearance="text"
             form="form-id"
             @click=${this.handleClosing}
+            aria-label="Confirm closing and discard changes"
           >
             YES
           </ix-button>

package/dist/IxDrawer.js.map

@@ -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.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  renderCloseButton() {\n    if (this.hideClose) {\n      return nothing;\n    }\n\n    return html`<ix-icon-button\n      @click=${this.handleCloseButton}\n      icon=\"close\"\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        @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          >\n            NO\n          </ix-button>\n          <ix-button\n            appearance=\"text\"\n            form=\"form-id\"\n            @click=${this.handleClosing}\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"]}
+{"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.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  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        @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            data-testid=\"drawer-action-no\"\n            appearance=\"text\"\n            form=\"form-id\"\n            @click=${this.handleOnCancel}\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

@@ -1 +1 @@
-import{__decorate}from"tslib";import{css,LitElement,nothing,html}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{--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-drawer-scrim-bg,rgba(0,0,0,.5));scroll-behavior:auto;overflow:auto}.drawer-container[closing]{animation:fadeOut var(--ix-drawer-animation-time,225ms) linear forwards}.drawer{display:flex;flex-direction:column;width:var(--ix-drawer-width-md,min(816px,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%);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-drawer-scrim-bg,#00000080)}}@keyframes fadeOut{0%{background-color:var(--ix-drawer-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:1200px){.drawer{width:var(--ix-drawer-width-lg,min(816px,90vw))}}@media screen and (max-width:600px){.drawer{width:min(var(--ix-drawer-width-sm,100vw),100vw);border-radius:var(--ix-drawer-border-radius,0)}}.drawer-header{display:flex;justify-content:space-between;position:fixed;left:40px;right:40px;top:0;padding-top:2rem;z-index:10}.drawer-header__close-btn{background:#fff;border-radius:50%;position:relative;z-index:9}.drawer-header__minimise-btn{flex:0}.drawer-body{overflow:auto;padding-top:32px;display:flex;flex-direction:column}.drawer.compact .drawer-body{padding-top:0}.drawer-body.no-scroll{overflow:hidden}.drawer-body.minimisable{padding-top:72px}.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}.drawer-minimised-sub-title{font-style:normal;font-weight:700;font-size:14px;line-height:24px;letter-spacing:.1px}.drawer-minimised-actions{margin-left:42px;display:flex;-webkit-box-align:center;align-items:center}.drawer-delete-dialog__title{line-height:1.25}.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}.has-header-footer .content{overflow-y:auto;padding-top:1rem;padding-bottom:1rem;height:100%}`;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.scrollable=!0,this.compact=!1,this.closing=!1,this.minimising=!1,this.hasHeaderFooter=!1,this.handleOnScroll=()=>{var e;this.contentBox&&(e=new CustomEvent("on-content-scroll",{detail:{scrollTop:this.contentBox.scrollTop,scrollHeight:this.contentBox.scrollHeight,clientHeight:this.contentBox.clientHeight},bubbles:!0,composed:!0}),this.dispatchEvent(e))}}static get styles(){return[IxDrawerStyles]}disconnectedCallback(){super.disconnectedCallback(),this.resetState()}updated(e){var i;super.updated(e),e.has("isVisible")&&(this.isVisible?(e=document.body.clientWidth,document.documentElement.style.overflow="hidden",i=document.body.clientWidth,document.body.style.paddingRight=i-e+"px"):(document.documentElement.style.overflow="initial",document.body.style.paddingRight="0px"))}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(e){e.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)}renderCloseButton(){return this.hideClose?nothing:html`<ix-icon-button @click="${this.handleCloseButton}" icon="close"></ix-icon-button>`}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>`}handleHeaderFooterChange(){var e=0<((null==(e=null==(e=this.header)?void 0:e.assignedElements())?void 0:e.length)||0),i=0<((null==(i=null==(i=this.footer)?void 0:i.assignedElements())?void 0:i.length)||0);this.hasHeaderFooter=e||i}renderDrawerContainer(){var e={drawer:!0,"animate-vert":this.animateVertical,"aside-hidden":this.hideAside,compact:this.compact};return html`<div class="drawer-container" ?closing="${this.closing}" @click="${this.clickOutsideDrawer}" @keydown="${this.clickOutsideDrawer}"><aside class="${classMap(e)}" @animationend="${this.handleClosed}"><div class="drawer-header"><div class="drawer-header__minimise-btn">${this.renderMinimiseButton()}</div><div class="drawer-header__close-btn">${this.renderCloseButton()}</div></div><div class="drawer-body ${this.scrollable?"":"no-scroll"} ${this.minimisable?"minimisable":""} ${this.hasHeaderFooter?"has-header-footer":""}" @scroll="${this.handleOnScroll}" id="content-scroll-box"><div class="header"><slot name="header" @slotchange="${this.handleHeaderFooterChange}"></slot></div><div class="content"><slot name="content"></slot></div><div class="footer"><slot name="footer" @slotchange="${this.handleHeaderFooterChange}"></slot></div></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([property({type:Boolean})],IxDrawer.prototype,"scrollable",void 0),__decorate([property({type:Boolean})],IxDrawer.prototype,"compact",void 0),__decorate([state()],IxDrawer.prototype,"closing",void 0),__decorate([state()],IxDrawer.prototype,"minimising",void 0),__decorate([state()],IxDrawer.prototype,"hasHeaderFooter",void 0),__decorate([query("#content-scroll-box")],IxDrawer.prototype,"contentBox",void 0),__decorate([query('slot[name="header"]')],IxDrawer.prototype,"header",void 0),__decorate([query('slot[name="footer"]')],IxDrawer.prototype,"footer",void 0),window.customElements.define("ix-drawer",IxDrawer);
+import{__decorate}from"tslib";import{css,LitElement,nothing,html}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{--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-drawer-scrim-bg,rgba(0,0,0,.5));scroll-behavior:auto;overflow:auto}.drawer-container[closing]{animation:fadeOut var(--ix-drawer-animation-time,225ms) linear forwards}.drawer{display:flex;flex-direction:column;width:var(--ix-drawer-width-md,min(816px,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%);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-drawer-scrim-bg,#00000080)}}@keyframes fadeOut{0%{background-color:var(--ix-drawer-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:1200px){.drawer{width:var(--ix-drawer-width-lg,min(816px,90vw))}}@media screen and (max-width:600px){.drawer{width:min(var(--ix-drawer-width-sm,100vw),100vw);border-radius:var(--ix-drawer-border-radius,0)}}.drawer-header{display:flex;justify-content:space-between;position:fixed;left:40px;right:40px;top:0;padding-top:2rem;z-index:10}.drawer-header__close-btn{background:#fff;border-radius:50%;position:relative;z-index:9}.drawer-header__minimise-btn{flex:0}.drawer-body{overflow:auto;padding-top:32px;display:flex;flex-direction:column}.drawer.compact .drawer-body{padding-top:0}.drawer-body.no-scroll{overflow:hidden}.drawer-body.minimisable{padding-top:72px}.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}.drawer-minimised-sub-title{font-style:normal;font-weight:700;font-size:14px;line-height:24px;letter-spacing:.1px}.drawer-minimised-actions{margin-left:42px;display:flex;-webkit-box-align:center;align-items:center}.drawer-delete-dialog__title{line-height:1.25}.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}.has-header-footer .content{overflow-y:auto;padding-top:1rem;padding-bottom:1rem;height:100%}`;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.scrollable=!0,this.compact=!1,this.closing=!1,this.minimising=!1,this.hasHeaderFooter=!1,this.handleOnScroll=()=>{var e;this.contentBox&&(e=new CustomEvent("on-content-scroll",{detail:{scrollTop:this.contentBox.scrollTop,scrollHeight:this.contentBox.scrollHeight,clientHeight:this.contentBox.clientHeight},bubbles:!0,composed:!0}),this.dispatchEvent(e))}}static get styles(){return[IxDrawerStyles]}disconnectedCallback(){super.disconnectedCallback(),this.resetState()}updated(e){var i;super.updated(e),e.has("isVisible")&&(this.isVisible?(e=document.body.clientWidth,document.documentElement.style.overflow="hidden",i=document.body.clientWidth,document.body.style.paddingRight=i-e+"px"):(document.documentElement.style.overflow="initial",document.body.style.paddingRight="0px"))}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(e){e.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)}renderCloseButton(){return this.hideClose?nothing:html`<ix-icon-button data-testid="drawer-close" @click="${this.handleCloseButton}" icon="close" aria-label="Close dialog"></ix-icon-button>`}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 data-testid="drawer-action-no" appearance="text" form="form-id" @click="${this.handleOnCancel}" aria-label="Cancel and keep the dialog open">NO</ix-button><ix-button data-testid="drawer-action-yes" appearance="text" form="form-id" @click="${this.handleClosing}" aria-label="Confirm closing and discard changes">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>`}handleHeaderFooterChange(){var e=0<((null==(e=null==(e=this.header)?void 0:e.assignedElements())?void 0:e.length)||0),i=0<((null==(i=null==(i=this.footer)?void 0:i.assignedElements())?void 0:i.length)||0);this.hasHeaderFooter=e||i}renderDrawerContainer(){var e={drawer:!0,"animate-vert":this.animateVertical,"aside-hidden":this.hideAside,compact:this.compact};return html`<div class="drawer-container" ?closing="${this.closing}" @click="${this.clickOutsideDrawer}" @keydown="${this.clickOutsideDrawer}"><aside class="${classMap(e)}" @animationend="${this.handleClosed}"><div class="drawer-header"><div class="drawer-header__minimise-btn">${this.renderMinimiseButton()}</div><div class="drawer-header__close-btn">${this.renderCloseButton()}</div></div><div class="drawer-body ${this.scrollable?"":"no-scroll"} ${this.minimisable?"minimisable":""} ${this.hasHeaderFooter?"has-header-footer":""}" @scroll="${this.handleOnScroll}" id="content-scroll-box"><div class="header"><slot name="header" @slotchange="${this.handleHeaderFooterChange}"></slot></div><div class="content"><slot name="content"></slot></div><div class="footer"><slot name="footer" @slotchange="${this.handleHeaderFooterChange}"></slot></div></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([property({type:Boolean})],IxDrawer.prototype,"scrollable",void 0),__decorate([property({type:Boolean})],IxDrawer.prototype,"compact",void 0),__decorate([state()],IxDrawer.prototype,"closing",void 0),__decorate([state()],IxDrawer.prototype,"minimising",void 0),__decorate([state()],IxDrawer.prototype,"hasHeaderFooter",void 0),__decorate([query("#content-scroll-box")],IxDrawer.prototype,"contentBox",void 0),__decorate([query('slot[name="header"]')],IxDrawer.prototype,"header",void 0),__decorate([query('slot[name="footer"]')],IxDrawer.prototype,"footer",void 0),window.customElements.define("ix-drawer",IxDrawer);

package/package.json

@@ -3,7 +3,7 @@
   "description": "Webcomponent ix-drawer following open-wc recommendations",
   "license": "MIT",
   "author": "interxion",
-  "version": "1.2.3",
+  "version": "1.2.5",
   "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.4.1",
-    "@digital-realty/ix-dialog": "^1.2.3",
-    "@digital-realty/ix-icon": "^1.2.1",
-    "@digital-realty/ix-icon-button": "^1.2.1",
+    "@digital-realty/ix-button": "^3.4.2",
+    "@digital-realty/ix-dialog": "^1.2.5",
+    "@digital-realty/ix-icon": "^1.2.2",
+    "@digital-realty/ix-icon-button": "^1.2.2",
     "@lit/react": "^1.0.2",
     "@material/web": "1.2.0",
     "lit": "^3.2.1",
@@ -110,5 +110,5 @@
     "README.md",
     "LICENSE"
   ],
-  "gitHead": "1ae325f4f33004b99a810afc06da42e119200d2f"
+  "gitHead": "bbcb2805555472c26b6590241ee4478c7d7c2302"
 }