@digital-realty/ix-drawer 1.2.12 → 1.3.1

package/dist/ix-drawer.min.js

@@ -1 +1,418 @@
-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);
+import{__decorate as i}from"tslib";import{css as e,LitElement as t,nothing as o,html as n}from"lit";import{classMap as r}from"lit/directives/class-map.js";import{state as a,property as s,query as d}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";const l=e`
+  :root,
+  :host :root,
+  :host {
+    --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, 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: white;
+    border-radius: var(--ix-drawer-border-radius, 16px 0px 0px 16px);
+    box-sizing: border-box;
+    box-shadow: 0px 12px 20px -12px rgba(0, 0, 0, 0.12),
+      0px 0px 0px 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, 0.2, 1) forwards;
+  }
+
+  :host([isvisible]) .drawer-container[closing] .drawer {
+    animation: slideOut var(--ix-drawer-animation-time, 225ms) 0ms
+      cubic-bezier(0, 0, 0.2, 1) forwards;
+  }
+
+  :host([isvisible]) .drawer.animate-vert {
+    animation: slideInVert var(--ix-drawer-animation-time, 225ms)
+      cubic-bezier(0, 0, 0.2, 1) forwards;
+  }
+
+  :host([isvisible]) .drawer-container[closing] .drawer.animate-vert {
+    animation: slideOutVert var(--ix-drawer-animation-time, 225ms) 0ms
+      cubic-bezier(0, 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, 0px);
+    }
+  }
+
+  .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: white;
+    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: rgb(255, 255, 255);
+    height: 72px;
+    display: flex;
+    -webkit-box-align: center;
+    align-items: center;
+    padding: 4px 24px;
+    box-shadow: rgba(0, 0, 0, 0.12) 0px 12px 20px -12px,
+      rgb(225, 228, 232) 0px 0px 0px 1px inset;
+    border-radius: 16px;
+    -webkit-box-pack: justify;
+    justify-content: space-between;
+  }
+
+  .drawer-minimised-title {
+    color: rgba(9, 34, 65, 0.7);
+    font-style: normal;
+    font-weight: normal;
+    font-size: 12px;
+    line-height: 16px;
+    letter-spacing: 0.4px;
+  }
+
+  .drawer-minimised-sub-title {
+    font-style: normal;
+    font-weight: bold;
+    font-size: 14px;
+    line-height: 24px;
+    letter-spacing: 0.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 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+    font-size: 1.5rem;
+    color: rgb(219, 0, 40);
+    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: 0px;
+    border: 0px;
+    margin: 0px;
+    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(0.4, 0, 0.2, 1) 0ms,
+      box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
+      border-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+    border-radius: 50%;
+    padding: 0px;
+    min-width: 0px;
+    z-index: 1050;
+    color: rgb(255, 255, 255);
+    height: 40px !important;
+    width: 40px !important;
+    background-color: rgb(20, 86, 224) !important;
+    box-shadow: none !important;
+  }
+
+  ix-dialog {
+    form {
+      max-width: 500px;
+    }
+  }
+
+  /* Notifications / compact drawer */
+  .drawer.compact .drawer-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    position: relative;
+    left: 0;
+    right: 0;
+    top: 0;
+    padding-top: 0;
+    background-color: #ffffff;
+    z-index: 10;
+  }
+
+  .has-header-footer .content {
+    overflow-y: auto;
+    padding-top: 1rem;
+    padding-bottom: 1rem;
+    height: 100%;
+  }
+`;class c extends t{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=()=>{if(this.contentBox){const 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[l]}disconnectedCallback(){super.disconnectedCallback(),this.resetState()}updated(i){if(super.updated(i),i.has("isVisible"))if(this.isVisible){const i=document.body.clientWidth;document.documentElement.style.overflow="hidden";const e=document.body.clientWidth-i;document.body.style.paddingRight=`${e}px`}else 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(){if(this.closing){if(this.closing=!1,this.openDeleteConfirmationDialog=!1,this.minimising)return this.minimising=!1,void(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)}renderCloseButton(){return this.hideClose?o:n`<ix-icon-button
+      data-testid="drawer-close"
+      @click=${this.handleCloseButton}
+      icon="close"
+      aria-label="Close dialog"
+    ></ix-icon-button>`}renderMinimiseButton(){return this.minimisable?n`<ix-button
+        data-testid="hideButton"
+        appearance="text"
+        has-icon
+        @click=${this.onMinimised}
+      >
+        <ix-icon slot="icon">fullscreen_exit</ix-icon>
+        HIDE
+      </ix-button>`:o}renderMaximiseButton(){return n`<div class="drawer__maximise-btn">
+      <ix-icon @click=${this.onMaximised}>fullscreen</ix-icon>
+    </div>`}renderDeleteButton(){return n`<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 n`
+      <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 n`<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 i,e,t,o;const n=((null===(e=null===(i=this.header)||void 0===i?void 0:i.assignedElements())||void 0===e?void 0:e.length)||0)>0,r=((null===(o=null===(t=this.footer)||void 0===t?void 0:t.assignedElements())||void 0===o?void 0:o.length)||0)>0;this.hasHeaderFooter=n||r}renderDrawerContainer(){const i={drawer:!0,"animate-vert":this.animateVertical,"aside-hidden":this.hideAside,compact:this.compact};return n`
+      <div
+        class="drawer-container"
+        ?closing=${this.closing}
+        @click=${this.clickOutsideDrawer}
+        @keydown=${this.clickOutsideDrawer}
+      >
+        <aside
+          class=${r(i)}
+          @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?n`
+      ${this.minimised?this.renderMinimisedContainer():this.renderDrawerContainer()}
+      ${this.renderDeleteConfirmationDialog()}
+    `:o}}i([a()],c.prototype,"minimised",void 0),i([a()],c.prototype,"openDeleteConfirmationDialog",void 0),i([s({type:Boolean})],c.prototype,"isVisible",void 0),i([s({type:Function})],c.prototype,"onClosed",void 0),i([s({type:String})],c.prototype,"minimisedTitle",void 0),i([s({type:String})],c.prototype,"minimisedSubTitle",void 0),i([s({type:Boolean})],c.prototype,"minimisable",void 0),i([s({type:Boolean})],c.prototype,"hideAside",void 0),i([s({type:Boolean})],c.prototype,"showConfirmationDialogOnClose",void 0),i([s({type:Boolean,attribute:"animate-vertical"})],c.prototype,"animateVertical",void 0),i([s({type:Boolean,attribute:"hide-close"})],c.prototype,"hideClose",void 0),i([s({type:Boolean})],c.prototype,"scrollable",void 0),i([s({type:Boolean})],c.prototype,"compact",void 0),i([a()],c.prototype,"closing",void 0),i([a()],c.prototype,"minimising",void 0),i([a()],c.prototype,"hasHeaderFooter",void 0),i([d("#content-scroll-box")],c.prototype,"contentBox",void 0),i([d('slot[name="header"]')],c.prototype,"header",void 0),i([d('slot[name="footer"]')],c.prototype,"footer",void 0),window.customElements.define("ix-drawer",c);

package/package.json

@@ -3,7 +3,7 @@
   "description": "Webcomponent ix-drawer following open-wc recommendations",
   "license": "MIT",
   "author": "interxion",
-  "version": "1.2.12",
+  "version": "1.3.1",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -21,18 +21,16 @@
     "start": "tsc && concurrently -k -r \"tsc --watch --preserveWatchOutput\" \"wds\"",
     "build": "tsc && npm run analyze -- --exclude dist && rollup -c",
     "prepublish": "tsc && npm run analyze -- --exclude dist",
-    "lint": "eslint --ext .ts,.html . --ignore-path .gitignore && prettier \"**/*.ts\" --check --ignore-path .gitignore",
-    "format": "eslint --ext .ts,.html . --fix --ignore-path .gitignore && prettier \"**/*.ts\" --write --ignore-path .gitignore",
+    "lint": "eslint --ext .ts,.html . && prettier \"**/*.ts\" --check --ignore-path .gitignore",
+    "format": "eslint --ext .ts,.html . --fix && prettier \"**/*.ts\" --write --ignore-path .gitignore",
     "test": "tsc && wtr --coverage",
-    "test:watch": "tsc && concurrently -k -r \"tsc --watch --preserveWatchOutput\" \"wtr --watch\"",
-    "storybook": "tsc && npm run analyze -- --exclude dist && concurrently -k -r \"tsc --watch --preserveWatchOutput\" \"wds -c .storybook/server.mjs\"",
-    "storybook:build": "tsc && npm run analyze -- --exclude dist && build-storybook"
+    "test:watch": "tsc && concurrently -k -r \"tsc --watch --preserveWatchOutput\" \"wtr --watch\""
   },
   "dependencies": {
-    "@digital-realty/ix-button": "^3.4.8",
-    "@digital-realty/ix-dialog": "^1.2.12",
-    "@digital-realty/ix-icon": "^1.2.4",
-    "@digital-realty/ix-icon-button": "^1.2.7",
+    "@digital-realty/ix-button": "^3.5.1",
+    "@digital-realty/ix-dialog": "^1.3.1",
+    "@digital-realty/ix-icon": "^1.3.1",
+    "@digital-realty/ix-icon-button": "^1.3.1",
     "@lit/react": "^1.0.2",
     "@material/web": "2.4.0",
     "lit": "^3.2.1",
@@ -40,33 +38,26 @@
   },
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "^0.4.17",
-    "@open-wc/eslint-config": "^9.2.1",
     "@open-wc/testing": "^3.1.6",
-    "@typescript-eslint/eslint-plugin": "^5.48.0",
-    "@typescript-eslint/parser": "^5.48.0",
+    "@rollup/plugin-terser": "^1.0.0",
+    "@typescript-eslint/eslint-plugin": "^8.58.2",
+    "@typescript-eslint/parser": "^8.58.2",
     "@web/dev-server": "^0.4.6",
-    "@web/dev-server-storybook": "^2.0.3",
     "@web/test-runner": "^0.20.2",
-    "concurrently": "^9.1.0",
-    "eslint": "^8.31.0",
+    "concurrently": "^9.2.1",
+    "eslint": "^9.39.4",
     "eslint-config-prettier": "^8.3.0",
     "husky": "^4.3.8",
     "lint-staged": "^10.5.4",
     "prettier": "^2.4.1",
     "rollup": "^4.29.1",
-    "rollup-plugin-minify-html-literals": "^1.2.6",
     "rollup-plugin-summary": "^2.0.0",
-    "rollup-plugin-uglify": "^6.0.4",
     "tslib": "^2.3.1",
     "typescript": "^4.5.2"
   },
   "customElements": "custom-elements.json",
   "eslintConfig": {
     "parser": "@typescript-eslint/parser",
-    "extends": [
-      "@open-wc",
-      "prettier"
-    ],
     "plugins": [
       "@typescript-eslint"
     ],
@@ -110,5 +101,5 @@
     "README.md",
     "LICENSE"
   ],
-  "gitHead": "4cd8803f4c5f3b3833ae6ebb5791f73a057863f8"
+  "gitHead": "da06737d6707fd3d4ef898ba0fa632e7b3ed8019"
 }